Add modgui to Info plugin

Signed-off-by: falkTX <falktx@falktx.com>

examples/Info/modgui.ttl

@@ -0,0 +1,42 @@
+@prefix lv2:    <http://lv2plug.in/ns/lv2core#> .
+@prefix mod:    <http://moddevices.com/ns/mod#> .
+@prefix modgui: <http://moddevices.com/ns/modgui#> .
+
+<http://distrho.sf.net/examples/Info>
+    mod:brand "DISTRHO" ;
+    mod:label "Info" ;
+    modgui:gui [
+        modgui:brand "DISTRHO" ;
+        modgui:label "Info" ;
+        modgui:resourcesDirectory <modgui> ;
+        modgui:iconTemplate <modgui/icon-info.html> ;
+        modgui:stylesheet <modgui/stylesheet-info.css> ;
+        modgui:screenshot <modgui/screenshot-info.png> ;
+        modgui:thumbnail <modgui/thumbnail-info.png> ;
+        modgui:javascript <modgui/script-info.js> ;
+        modgui:monitoredOutputs [
+            lv2:symbol "buffer_size" ;
+        ] , [
+            lv2:symbol "time_playing" ;
+        ] , [
+            lv2:symbol "time_frame" ;
+        ] , [
+            lv2:symbol "time_validbbt" ;
+        ] , [
+            lv2:symbol "time_bar" ;
+        ] , [
+            lv2:symbol "time_beat" ;
+        ] , [
+            lv2:symbol "time_tick" ;
+        ] , [
+            lv2:symbol "time_barstarttick" ;
+        ] , [
+            lv2:symbol "time_beatsperbar" ;
+        ] , [
+            lv2:symbol "time_beattype" ;
+        ] , [
+            lv2:symbol "time_ticksperbeat" ;
+        ] , [
+            lv2:symbol "time_beatsperminute" ;
+        ] ;
+    ] .

examples/Info/modgui/icon-info.html

@@ -0,0 +1,73 @@
+<div class="mod-pedal distrho-info{{{cns}}}">
+    <div mod-role="drag-handle" class="mod-drag-handle"></div>
+
+    <div class="tables clearfix">
+        <div class="table-left">
+            <table>
+                <tr>
+                    <td>Buffer Size:</td>
+                    <td mod-role="buffer_size">---</td>
+                </tr>
+                <tr>
+                    <td>Sample Rate:</td>
+                    <td mod-role="sample_rate">---</td>
+                </tr>
+                <tr>
+                    <td>Playing:</td>
+                    <td mod-role="time_playing">---</td>
+                </tr>
+                <tr>
+                    <td>Frame:</td>
+                    <td mod-role="time_frame">---</td>
+                </tr>
+                <tr>
+                    <td>Time:</td>
+                    <td mod-role="time_frame_s">---</td>
+                </tr>
+            </table>
+        </div>
+        <div class="table-right">
+            <table>
+                <tr>
+                    <td>BBT Valid:</td>
+                    <td mod-role="time_validbbt">---</td>
+                </tr>
+                <tr>
+                    <td>Bar:</td>
+                    <td mod-role="time_bar">---</td>
+                </tr>
+                <tr>
+                    <td>Beat:</td>
+                    <td mod-role="time_beat">---</td>
+                </tr>
+                <tr>
+                    <td>Tick:</td>
+                    <td mod-role="time_tick">---</td>
+                </tr>
+                <tr>
+                    <td>Bar Start Tick:</td>
+                    <td mod-role="time_barstarttick">---</td>
+                </tr>
+                <tr>
+                    <td>Beats Per Bar:</td>
+                    <td mod-role="time_beatsperbar">---</td>
+                </tr>
+                <tr>
+                    <td>Beat Type:</td>
+                    <td mod-role="time_beattype">---</td>
+                </tr>
+                <tr>
+                    <td>Ticks Per Beat:</td>
+                    <td mod-role="time_ticksperbeat">---</td>
+                </tr>
+                <tr>
+                    <td>BPM:</td>
+                    <td mod-role="time_beatsperminute">---</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+
+    <div class="mod-logo"></div>
+    <div class="mod-magic"></div>
+</div>

examples/Info/modgui/script-info.js

@@ -0,0 +1,57 @@
+function (event) {
+
+    function magic () {
+        if (event.data.magicHasHappened) {
+            $('#pedalboard-dashboard').css({
+                'background': "#111 url(/img/background.jpg) repeat",
+            });
+        } else {
+            $('#pedalboard-dashboard').css({
+                'background': "#111 url(/resources/tilesf1.jpg?uri=http%3A//distrho.sf.net/examples/Info) repeat",
+            });
+        }
+        event.data.magicHasHappened = !event.data.magicHasHappened;
+    }
+
+    function handle_event (symbol, value) {
+        switch (symbol) {
+            case 'time_playing':
+            case 'time_validbbt':
+                value = value > 0.5 ? "Yes" : "No";
+                break;
+            case 'time_beatsperminute':
+                value = value.toFixed(2);
+                break;
+            case 'time_frame': {
+                var time = value / SAMPLERATE;
+                var secs =  time % 60;
+                var mins = (time / 60) % 60;
+                var hrs  = (time / 3600) % 60;
+                event.icon.find('[mod-role=time_frame_s]').text(sprintf("%02d:%02d:%02d", hrs, mins, secs));
+                // fall-through
+            }
+            default:
+                value = value.toFixed();
+                break;
+        }
+
+        event.icon.find('[mod-role='+symbol+']').text(value);
+    }
+
+    if (event.type == 'start') {
+        var ports = event.ports;
+        for (var p in ports) {
+            if (ports[p].symbol[0] == ":") {
+                continue;
+            }
+            handle_event (ports[p].symbol, ports[p].value);
+        }
+        // special cases
+        event.icon.find ('[mod-role=sample_rate]').text(SAMPLERATE);
+        event.icon.find ('.mod-magic').click(magic);
+    }
+    else if (event.type == 'change') {
+        handle_event (event.symbol, event.value);
+    }
+
+}

examples/Info/modgui/stylesheet-info.css

@@ -0,0 +1,88 @@
+@import url(/fonts/nexa/stylesheet.css);
+@import url(/fonts/questrial/stylesheet.css);
+
+.distrho-info{{{cns}}} {
+    background-image:url(/resources/box.png{{{ns}}});
+    background-position:center center;
+    background-repeat:no-repeat;
+    background-size:600px 300px;
+    width:600px;
+    height:300px;
+/*     position:absolute; */
+    border-radius: 21px;
+/*     font-size: 2rem !important; */
+}
+
+.distrho-info{{{cns}}} .mod-pedal-input.mono,
+.distrho-info{{{cns}}} .mod-pedal-output.mono {
+    top: 60px !important;
+}
+
+.distrho-info{{{cns}}} .mod-pedal-input.stereo,
+.distrho-info{{{cns}}} .mod-pedal-output.stereo {
+    top: 15px !important;
+}
+
+.distrho-info{{{cns}}} .mod-logo {
+    background: url(/img/watermark.png) 42px 146px no-repeat;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+@keyframes mod-magic{{{cns}}} {
+    0% {
+        opacity: 0.1;
+    }
+    100% {
+        opacity: 0.75;
+    }
+}
+
+.distrho-info{{{cns}}} .mod-magic {
+    background: url(/img/social/favicon.png) no-repeat;
+    width: 118px;
+    height: 118px;
+    position: absolute;
+    top: 158px;
+    left: 52px;
+    background-size: cover;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 21;
+    animation: mod-magic{{{cns}}} 5s infinite;
+    animation-direction: alternate;
+    animation-timing-function: ease-in;
+}
+
+.distrho-info{{{cns}}} .tables {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    padding: 21px;
+    font-family: monospace;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.distrho-info{{{cns}}} .table-left,
+.distrho-info{{{cns}}} .table-right {
+    width: 50%;
+}
+.distrho-info{{{cns}}} .table-left {
+    padding-left: 36px;
+}
+
+.distrho-info{{{cns}}} table {
+    border-collapse: separate;
+    border-spacing: 6px 1px;
+}
+
+.distrho-info{{{cns}}} tr > td:first-child {
+    text-align: right;
+}
+.distrho-info{{{cns}}} tr > td:last-child {
+    font-weight: lighter;
+}

examples/Info/modgui/tilesf1.LICENSE

@@ -0,0 +1,4 @@
+From http://www.myfreetextures.com/generated-seamless-tile-background-texture/
+
+Fair Use – You can use the images with credit / attribution to www.myfreetextures.com.
+Sometimes it is not possible to give credit directly on a final project – in these cases please mention the site on your website, facebook or similar, whatever you think is fair.