Add button(s) to visualisation using javascript

[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