Monitor the input level on the mod UI

Author: paulfd

source/alo.lv2/modgui.ttl

@@ -8,6 +8,7 @@
     modgui:stylesheet <modgui/stylesheet-alo.css> ;
     modgui:screenshot <modgui/screenshot-alo.png> ;
     modgui:thumbnail <modgui/thumbnail-alo.png> ;
+    modgui:javascript <modgui/script-alo.js> ;
     modgui:brand "devcurmudgeon" ;
     modgui:label "ALO" ;
     modgui:model "combo-model-001" ;
@@ -49,4 +50,7 @@
         lv2:symbol "bars" ;
         lv2:name "Bars" ;
     ] ;
-] .
+    modgui:monitoredOutputs [
+        lv2:symbol "level" ;
+    ] ;
+] .

source/alo.lv2/modgui/icon-alo.html

@@ -45,10 +45,10 @@
                 <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="midi_base"></div>
             </div>
         </div>
-        <div class="mod-knob">
+        <div class="midi-base">
             <div class="mod-knob-image-wrapper">
-                <div class="mod-knob-title">{{name}}</div>
-                <div class="mod-knob-value" mod-role="input-control-value" mod-port-symbol="midi_base">60.000</div>
+                <div class="knob-title">{{name}}</div>
+                <div class="knob-value" mod-role="input-control-value" mod-port-symbol="midi_base">60.000</div>
             </div>
         </div>
         {{/controls.6}}
@@ -59,9 +59,10 @@
                 <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="threshold"></div>
             </div>
         </div>
-        <div class="mod-knob">
-                <div class="mod-knob-title">{{name}}</div>
-                <div class="mod-knob-value" mod-role="input-control-value" mod-port-symbol="threshold">40.000</div>
+        <div class="threshold">
+                <span class="knob-title">{{name}}</span>
+                <span class="knob-value" mod-role="input-control-value" mod-port-symbol="threshold">40.000</span>
+                <span class="knob-title">Input level</span><span class="knob-value" mod-role="level">-90.000</span>
         </div>
         {{/controls.7}}
         <div class="mod-separator"></div>
@@ -71,9 +72,9 @@
                 <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="bars"></div>
             </div>
         </div>
-        <div class="mod-knob">
-                <div class="mod-knob-title">{{name}}</div>
-                <div class="mod-knob-value" mod-role="input-control-value" mod-port-symbol="bars">2.000</div>
+        <div class="bars">
+                <div class="knob-title">{{name}}</div>
+                <div class="knob-value" mod-role="input-control-value" mod-port-symbol="bars">2.000</div>
          </div>
         {{/controls.8}}
         <div class="mod-separator"></div>

source/alo.lv2/modgui/script-alo.js

@@ -0,0 +1,15 @@
+function (event) {
+
+    function handle_event (symbol, value) {
+		switch (symbol) {
+			case 'level':
+				event.icon.find ('[mod-role=level]').text (value.toFixed(2));
+			default:
+				break;
+		}
+	}
+
+	if (event.type == 'change') {
+		handle_event (event.symbol, event.value);
+	}
+}

source/alo.lv2/modgui/stylesheet-alo.css

@@ -18,11 +18,11 @@
     color: #3c3;
     font-size: 18px;
     font-weight: bold;
-    left: 80px;
+    left: 40px;
     line-height: 1;
     margin: 0;
     position: absolute;
-    top: 23px;
+    top: 13px;
 }
 
 /* PLUGIN'S NAME */
@@ -33,8 +33,8 @@
     line-height: 1;
     margin: 0;
     position: absolute;
-    right: 80px;
-    top: 23px;
+    right: 50px;
+    top: 10px;
 }
 
 /* CONTROLS */
@@ -52,7 +52,7 @@
     left: 40px;
     position: absolute;
     right: 40px;
-    top: 47px;
+    top: 40px;
 }
 
 .alo{{{cns}}} .mod-control-group > div {
@@ -133,8 +133,9 @@
     height:50px;
     margin-top: 10px;
     position:relative;
-    width: 58px;
+    width: 60px;
 }
+
 .alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-image-wrapper {
     padding: 1px;
 }
@@ -165,6 +166,55 @@
     text-align: center;
 }
 
+
+/* KNOB VALUES */
+.alo{{{cns}}} .mod-control-group .midi-base {
+    display:inline-block;
+    float: left;
+    height: 50px;
+    margin-top: 10px;
+    position:relative;
+    width: 58px;
+}
+
+.alo{{{cns}}} .mod-control-group .threshold {
+    display:inline-block;
+    float: left;
+    height:50px;
+    margin-top: 5px;
+    position:relative;
+    width: 80px;
+}
+
+.alo{{{cns}}} .mod-control-group .bars {
+    display:inline-block;
+    float: left;
+    height:50px;
+    margin-top: 10px;
+    position:relative;
+    width: 35px;
+}
+
+.alo{{{cns}}} .mod-control-group .knob-title {
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    color: #fff;
+    display:block;
+    font-size: 12px;
+    font-weight: bold;
+    height:18px;
+    text-align: center;
+}
+
+.alo{{{cns}}} .mod-control-group .knob-value {
+    border-radius: 0 0 8px 8px;
+    display:block;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+}
+
+
 /* ENUMERATED LIST */
 .alo{{{cns}}} .mod-enumerated {
     color:#fff;