Closing popup sliders

[tassiebean]

Hi,

I have a large house plan that I've divided into four sub-plans, each of which is controlled by popup widgets. I've encountered a problem where it is difficult to close a popup slider once it is opened. See attached visualisation.

The widget takes up most of the screen. There will be many objects to be controlled in each room, hence I have made the icons small (not many shown here for simplicity). The problem is that having opened a slider, it seems to me that the only way to close it is to tap outside the widget, but this closes the whole widget when the user probably wants to tap some other icons too. Tapping the (toggle) icon in the bottom left room does indeed toggle it, but the slider still doesn't go away. Apart from closing the widget the only other way I can see to close it is to tap the small icon that opened it in the first place, which is not easy to do since it is small and risks just moving the slider to a new setting (or tap another icon which IS a slider, but the user may not want to do that).

You can see I've used custom CSS, and I know I can relocate all sliders on this widget to be in the top right hand space for example. This is one solution, but to close it we still have tap the icon which bought it up (somewhat tedious). I thought of making a big black dummy object icon in the top right had area for example, but as for the toggle icon, this doesn't close the widget. I could set up a listener for this dummy object in Custom Javascript but I don't know the script to close a popup slider (is there a suitable command script?).

So, how can I make it so that if I tap on an empty area of the widget, the popup slider closes?

Thanks, Phil

[Daniel]

I think you should consider changing your approach. You should try to limit amount of clicks for the user, usually on a widget there are no other popups. The slider should be inline control and they stay permanently open.

[admin]

The slider will hide if you click inside the widget. Add this to Custom JavaScript to change the behavior so clicking anywhere won't hide a widget if there's an open control (slider or any other):

Code:

if (window.hideControls) {
  var hidecontrols = window.hideControls
    , hidewidgets = window.hideWidgets
    , hidden;

  window.hideControls = function() {
    hidden = $E.controls.filter('.show').length > 0;
    hidecontrols();

    setTimeout(function() {
      hidden = false;
    }, 10);
  }

  window.hideWidgets = function() {
    if (!hidden) {
      hidewidgets();
    }
  }
}

[tassiebean]

Thanks, admin!

This is an acceptable solution for me. Actually, the slider hides if I click OUTSIDE the widget (not anywhere, and not inside the widget). A second tap outside the widget will close the widget of course.

[admin]

It should hide if you click anywhere. By default it will also hide the widget if clicked outside of it. Can you share your backup via PM?

[tassiebean]

I think you should consider changing your approach. You should try to limit amount of clicks for the user, usually on a widget there are no other popups.  The slider should be inline control and they stay permanently open.

I'm up for ideas, and I'm very conscious of clicks needed to complete a task. However, bear in mind this is just one quarter of the real estate (floor plan) of this house, and it is still very busy (see attachment). As you can see there is no room for inline controls. Of course, I cold break it into many more sub-plans but this gets unwieldy and confusing too.

When these do get too busy, I do sometimes change slider devices to toggles (even though the light is a dimmable).

I could use a whole page (plan) for each floorplan image (rather than a widget) but that doesn't really help much.

Thanks for your suggestions!

[Daniel]

Is this whole floor plan a widget?

[tassiebean]

Is this whole floor plan a widget?

Yes, it is the black box with thin white line border and drop shadow. It is one of four similar widgets for different parts of the house.

It does get unwieldy when the customer wants an iPad controlling the lot. I have a bigger zoom for the Master bedroom for instance (shown here), in addition to the four overview floor plans (one of which shown above).

[Daniel]

Why don't you use plan instead of widget? Widget meant to be used for small control like few buttons in a single room.

[admin]

You have to set the widget background using widget properties not by placing an image element. Then the hiding will work correctly when clicking inside the widget.

[tassiebean]

You have to set the widget background using widget properties not by placing an image element. Then the hiding will work correctly when clicking inside the widget.

Thanks. Yes, I had thought to break my image into sub-parts that butt up against each other perfectly, but that do not cover the two black areas. These two black areas could then be the areas to touch to close the popup control.

Thanks again.