Improve button widget

- allow multiple topics
- add width argument + square_button_widget
- add touch/release payloads

mqtt_dash/static/main.js

@@ -133,12 +133,17 @@ function updateScroll() {
     element.scrollTop = element.scrollHeight;
 }
 
-function publish(topic, value, retain=false) {
+function publish(topics, value, retain=false) {
+    if (!Array.isArray(topics)) {
+        topics = [topics];
+    }
+    for (topic of topics) {
         var message = new Paho.MQTT.Message(value);
         message.destinationName = topic;
         message.retained = retain;
         client.send(message);
     }
+}
 
 function updateContents(id, value) {
     elem = document.getElementById(id);

mqtt_dash/static/style.css

@@ -54,7 +54,27 @@ html, body {
     transition-duration: 0.4s;
 }
 
+.widget-container {
+    position: relative;
+}
 .widget {
     align: center;
     vertical-align: middle;
+    position: relative;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.details-link {
+    opacity: 0.2;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    z-index: 9;
+}
+
+.widget-container:hover .details-link {
+    opacity: 1;
 }

mqtt_dash/widgets.py

@@ -22,25 +22,67 @@ def make_widget(template,
             kwargs['sub_topic'] = sub_topic
         _attrs['class'] = ' '.join([c for c in _classes if c is not None])
         attr_str = " ".join([f'{k}="{v}"' for k, v in _attrs.items()])
-        widget_template = f'<div {attr_str}>\n{template}\n</div>'
+
+        details_link = '''
+        {% if details_url %}
+        <label class="is-size-6 details-link" for="toggle-{{id_}}">📈</label> {%endif%}
+        {% if details_url %}
+        <input id="toggle-{{id_}}" class="element-toggle" type="checkbox" style="display: none"/>
+        <div class="modal" id="modal-{{id_}}">
+          <div class="modal-background"></div>
+          <div class="modal-content" style="width: 95vw; height: 95vh;">
+            <iframe src="{{details_url}}" style="width: 95%; height: 95%;"></iframe>
+          </div>
+          <label class="modal-close is-large" for="toggle-{{id_}}"></label>
+        </div>
+        <style>
+        #toggle-{{id_}}:checked ~ #modal-{{id_}} {
+          display: flex;
+        }
+        </style>
+        {% endif %}
+        '''
+
+        widget_template = f'''
+        <div class="widget-container">
+          {details_link}
+          <div {attr_str}>
+            {template}
+          </div>
+        </div>
+        '''
         return render_template_string(widget_template, **kwargs)
 
     return f
 
 
-def button_widget(topic, label, pub_value):
+def button_widget(topic, label, pub_value, release_value=None, width=None):
     template = '''
     <input type="button"
            class="button is-large is-info is-outlined"
            value="{{label}}"
-           onclick="publish('{{topic}}', '{{pub_value}}');"/>
+           {% if width %}
+           style="width:{{width}}"
+           {% endif %}
+           {% if release_value %}
+           ontouchstart="publish({{repr(topic)}}, '{{pub_value}}');"
+           ontouchend="publish({{repr(topic)}}, '{{release_value}}');"
+           {% else %}
+           onclick="publish({{repr(topic)}}, '{{pub_value}}');"
+           {% endif %}
+    />
     '''
     return make_widget(template,
                        'button',
                        label=label,
                        pub_value=pub_value,
-                       topic=topic)
+                       release_value=release_value,
+                       width=width,
+                       topic=topic,
+                       repr=repr)
 
+def square_button_widget(*args, size="4em", **kwargs):
+    return button_widget(*args, width=size, **kwargs)
 
 def slider_widget(label,
                   topic,
@@ -82,23 +124,26 @@ def slider_widget(label,
                        id_=id_)
 
 
-def label_widget(topic, label, unit=''):
+def label_widget(topic, label, unit='', **widget_args):
+    id_ = make_id()
     template = '''
     <div align="center" class="is-size-2">
+    <div>{{label}} </div>
     <span class="{{topic}}-value update-policy-replace-content">-</span>
     <span>{{unit}}</span>
     </div>
-    <div>{{label}}</div>
     '''
     return make_widget(template,
                        'label',
                        sub_topic=topic,
                        topic=topic,
                        unit=unit,
-                       label=label)
+                       label=label,
+                       id_=id_,
+                       **widget_args)
 
 
-def log_widget(topic, label):
+def log_widget(topic, label, **widget_args):
     id_ = make_id()
     template = '''
       <div class="table-container">
@@ -121,7 +166,8 @@ def log_widget(topic, label):
                        sub_topic=topic,
                        topic=topic,
                        label=label,
-                       id_=id_)
+                       id_=id_,
+                       **widget_args)
 
 
 def row_layout(title, elems):
@@ -131,7 +177,7 @@ def row_layout(title, elems):
         {% if title %}
         <div class="title">{{title}}</div>
         {% endif %}
-        <div class="columns is-tablet">
+        <div class="columns is-mobile is-multiline">
           {% for w in elems %}
             <div class="column">
               {{w()|safe}}
@@ -149,7 +195,7 @@ def column_layout(title, elems):
     def f():
         template = '''
         {% if title %}
-        <div class="title">{{title}}</div>
+        <h3>{{title}}</h3>
         {% endif %}
         <div class="rows">
           {% for w in elems %}