Add button(s) to visualisation using javascript

[jamesng]

Hi

I'd like to create a widget which only display buttons for the lights which are switched on - similar in style to Apple's Home application which has a pop-up window from the dashboard which displays buttons for the active lights only.

Is there some sample javascript to dynamically add buttons to a visualisation using the value, name & address info from grp.all()?  

I can see how I can hide or disable buttons already placed on a visualisation using JavaScript, however I'd prefer a compact layout which only includes buttons for lights that are switched on.  The number of buttons displayed on the visu would neeed to change - somewhere between 1 and 20 buttons displayed as a list from about 50 lighting groups.

Kind Regards
James

[admin]

You can use this CSS to display all elements in a row (manual placement is ignored) inside a certain widget. Then you can combine it with show/hide script.

Code:

#widget-5 > div.item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: left;
  margin: 5px;
}

[jamesng]

I've been experimenting with your CSS suggestion this afternoon, however am running into two issues:

1: the item-labels are not linked to the item-controls resulting in a jumble of buttons in the UI

2: there doesn't appear a way to identify specific item-controls from the HTML so that a javascript can hide those which are switched off - I can't see the the group address or name in the HTML. Am I missing something here?  Attached is the HTML

Code:

<div class="layer layer-centered layer-widget transparent" id="widget-67" style="width: 300px; height: 500px; position: absolute; background-image: url(&quot;/scada/resources/img/background.png?1663484962&quot;); background-color: transparent; top: 0px; left: 895px; opacity: 1; display: block; background-repeat: no-repeat no-repeat;">

<div class="item item-control" style="top: 143px; left: 0px; z-index: 70;">
  <div class="icon"><img src="/scada/resources/icons/button_off.png?1484378778" style="width: 105px; height: 46px;"></div>
  <div class="value" style="font-size: 10px;">0%</div>
</div>

<div class="item item-label" style="top: 116px; left: 0px; z-index: 80; font-size: 12px; color: rgb(247, 101, 255); font-family: Arial;">Desk</div>

</div>

Is there a way to turn on display of the control-name on the usermode (ipad view) - or to generate a similar object HTML structure from the touch mode with object titles?


Or if this approach is not possible, can I use javascript to dynamically add only the active buttons to the widget on page load?


Many thanks

Kind Regards,
James

[admin]

You can use Additional class to target certain elements. You can create labels using CSS (these won't be visible in the editor). This example uses three classes: obj1, obj2, obj3. Label position and other properties can be freely adjusted.

Code:

#widget-5 > div.item:after {
  position: absolute;
  top: -10px;
  left: 0;
  display: block;
}
.obj1:after {
  content: "obj1 label";
}
.obj2:after {
  content: "obj2 label";
}
.obj3:after {
  content: "obj3 label";
}

[jamesng]

I've used CSS to add labels in the past, however in this instance there are a lot of buttons (one for each light in the building / 50 or so per floor) so it would be preferable to dynamically add this based on the Custom Name applied to the object on this Widget. 

Can't this be achieved by pulling this info from the data object on the page?  I'm just not quite sure how to access the info from the object as yet.


I'm using the following javascript to dynamically hide buttons based on their value

Code:

$(function() {
  $('.hidden-by-value').each(function(_, el) {
    var addr = $(el).data('status-object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value;
        $(el).css('visibility', value ? 'visible' : 'hidden');
      });
    }
  });
});

Many thanks


Kind Regards
James

[admin]

Object name is not exposed anywhere in the current firmware. This will be changed in the next release: group address and name will be accessible via data attributes.