Update modgui

modguis/PingPongPan-modgui.lv2/manifest.ttl

@@ -1,11 +1,13 @@
-@prefix mod: <http://portalmod.com/ns/modgui#>.
+@prefix mod:    <http://moddevices.com/ns/mod#>.
+@prefix modgui: <http://moddevices.com/ns/modgui#>.
 
 <http://distrho.sf.net/plugins/PingPongPan>
-    mod:gui [
-        a mod:Gui;
-        mod:resourcesDirectory <modgui>;
-        mod:iconTemplate <modgui/icon-ppp.html>;
-        mod:templateData <modgui/data-ppp.json>;
-        mod:screenshot <modgui/screenshot-ppp.png>;
-        mod:thumbnail <modgui/thumb-ppp.png>;
-    ] .
+    mod:brand "DISTRHO";
+    mod:label "PingPongPan";
+    modgui:gui [
+        modgui:resourcesDirectory <modgui>;
+        modgui:iconTemplate <modgui/icon-ppp.html>;
+        modgui:stylesheet <modgui/stylesheet-ppp.css>;
+        modgui:screenshot <modgui/screenshot-ppp.png>;
+        modgui:thumbnail <modgui/thumb-ppp.png>;
+    ].

modguis/PingPongPan-modgui.lv2/modgui/data-ppp.json

@@ -1,15 +0,0 @@
-{
-    "author": "DISTRHO", 
-    "color": "yellow", 
-    "controls": [
-        {
-            "name": "Frequency", 
-            "symbol": "freq"
-        }, 
-        {
-            "name": "Width", 
-            "symbol": "with"
-        }
-    ], 
-    "label": "Ping Pong Pan"
-}

modguis/PingPongPan-modgui.lv2/modgui/icon-ppp.html

@@ -1,4 +1,4 @@
-<div class="pingpongpan mod-pedal mod-pedal-boxy ">
+<div class="pingpongpan mod-pedal mod-pedal-boxy{{{cns}}}">
     <div mod-role="drag-handle" class="mod-drag-handle"></div>
 
     <div class="mod-light on" mod-role="bypass-light"></div>
@@ -8,7 +8,7 @@
             <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="freq"></div>
         </div>
         <div class="mod-knob pingpongpan-knob_width">
-            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="with"></div>
+            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="width"></div>
         </div>
     </div>
 
@@ -39,70 +39,3 @@
         {{/effect.ports.midi.output}}
     </div>
 </div>
-<style>
-.pingpongpan * {
-    color:black !important;
-}
-.pingpongpan {
-    background-image:url(/resources/background.png{{{ns}}}) !important;
-    background-size:615px 344px;
-    width:615px;
-    height:344px;
-}
-.pingpongpan .mod-control-group {
-    width:500px;
-    height:220px;
-}
-.pingpongpan .mod-control-group .mod-knob {
-    height:220px !important;
-}
-.pingpongpan .mod-control-group .mod-knob .mod-knob-image {
-    background-image:url(/resources/knob.png{{{ns}}});
-    background-position:left center;
-    background-repeat:no-repeat;
-    background-size:auto 220px;
-    height:220px;
-    width:220px;
-    margin:0 auto;
-    cursor:pointer;
-    position:relative;
-    overflow:hidden;
-}
-.pingpongpan .mod-control-group .pingpongpan-knob_freq {
-    top:55px;
-    left:58px;
-    position:absolute;
-}
-.pingpongpan .mod-control-group .pingpongpan-knob_width {
-    top:55px;
-    left:302px;
-    position:absolute;
-}
-.pingpongpan .mod-light {
-    top:32px;
-    left:320px;
-}
-.pingpongpan .mod-footswitch {
-    background-image:url(/resources/footswitch.png{{{ns}}});
-    background-position:top center;
-    background-repeat:no-repeat;
-    background-size:auto 132px;
-    top:15px;
-    left:430px !important;
-    cursor:pointer;
-    height:66px;
-    position:absolute;
-}
-.pingpongpan .mod-footswitch.on {
-    background-position:top center;
-}
-.pingpongpan .mod-footswitch.off {
-    background-position:bottom center;
-}
-.pingpongpan .mod-pedal-input , .pingpongpan .mod-pedal-output {
-    top: 60px;
-}
-.pingpongpan .mod-pedal-input .mod-input , .pingpongpan .mod-pedal-output .mod-output {
-    margin-bottom: 40px !important
-}
-</style>

modguis/PingPongPan-modgui.lv2/modgui/stylesheet-ppp.css

@@ -0,0 +1,228 @@
+
+/* STYLES FOR THE BOXY PEDAL */
+
+@import url(/fonts/nexa/stylesheet.css);
+@import url(/fonts/questrial/stylesheet.css);
+
+/* = CONTAINER
+================================================ */
+.mod-pedal-boxy{{{cns}}} {
+    background-position:center center;
+    background-repeat:no-repeat;
+    background-size:230px 431px;
+    height:431px;
+    position:absolute;
+    width:230px;
+    border-radius: 26px;
+}
+
+/* = PLUGIN'S AUTHOR
+================================================ */
+.mod-pedal-boxy{{{cns}}} .mod-plugin-brand {
+    left:0;
+    position:absolute;
+    right:0;
+    text-align:center;
+    text-transform:uppercase;
+    top:160px;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-plugin-brand h1 {
+    border-color:#000;
+    border-radius:12px;
+    border-style:solid;
+    border-width:4px;
+    display:inline-block;
+    font-family:"Nexa";
+    font-size:32px;
+    padding:3px 9px 0;
+}
+
+/* = PLUGIN'S NAME
+================================================ */
+.mod-pedal-boxy{{{cns}}} .mod-plugin-name {
+    left:30px;
+    overflow:hidden;
+    position:absolute;
+    right:30px;
+    text-align:center;
+    top:340px;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-plugin-name h1 {
+    font-family:"Questrial";
+    font-size:21px;
+    line-height:1;
+}
+
+/* = LIGHT ON/OFF
+================================================ */
+.mod-pedal-boxy{{{cns}}} .mod-light {
+    background-position:center center;
+    background-repeat:no-repeat;
+    height:32px;
+    left:10px;
+    position:absolute;
+    right:10px;
+    top:235px;
+}
+
+/* = KNOBS
+================================================ */
+.mod-pedal-boxy{{{cns}}} .mod-control-group {
+    margin:20px;
+    position:relative;
+    text-align:center;
+    z-index:30;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-control-group .mod-knob {
+    overflow:hidden;
+    position:relative;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-control-group .mod-knob {
+    height:110px;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-control-group .mod-knob > span.mod-knob-title {
+    bottom:0px;
+    display:block;
+    font-size:11px;
+    font-weight:bold;
+    height:12px;
+    left:0;
+    line-height:1;
+    margin:0;
+    overflow:hidden;
+    padding:0;
+    position:absolute;
+    right:0;
+    text-transform:uppercase;
+}
+
+/* = ENUMERATED LIST
+================================================ */
+.mod-pedal-boxy{{{cns}}} .mod-enumerated-group {
+    height:31px;
+    margin:20px auto 0 !important;
+    position:relative;
+    width:190px;
+    z-index:35;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated {
+    background-position:right center;
+    background-repeat:no-repeat;
+    font-size:11px;
+    font-weight:bold;
+    left:0;
+    line-height:2;
+    overflow:hidden;
+    position:absolute;
+    right:0;
+    text-align:left;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated .mod-enumerated-selected {
+    background-color:rgba(0,0,0,.3);
+    box-shadow:inset 0 0 4px rgba(0,0,0,.3);
+    border-radius:4px;
+    padding:3px 9px;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated .mod-enumerated-selected {
+    border-radius:4px 4px 0 0;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated .mod-enumerated-list {
+    display:none;
+    color:#fff;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated .mod-enumerated-list {
+    background-color:rgba(0,0,0,.9);
+    display:none;
+    height:115px;
+    overflow:auto;
+    position:relative;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated .mod-enumerated-list > div {
+    padding:3px 9px;
+}
+
+.mod-pedal-boxy{{{cns}}} .mod-enumerated .mod-enumerated-list > div:hover {
+    background-color:rgba(255,255,255,.2);
+    cursor:pointer;
+}
+
+/* STYLES FOR THE PLUGIN */
+
+.pingpongpan * {
+    color:black !important;
+}
+.pingpongpan {
+    background-image:url(/resources/background.png{{{ns}}}) !important;
+    background-size:615px 344px;
+    width:615px;
+    height:344px;
+    border-radius: 0;
+}
+.pingpongpan .mod-control-group {
+    width:500px;
+    height:220px;
+}
+.pingpongpan .mod-control-group .mod-knob {
+    height:220px !important;
+}
+.pingpongpan .mod-control-group .mod-knob .mod-knob-image {
+    background-image:url(/resources/knob.png{{{ns}}});
+    background-position:left center;
+    background-repeat:no-repeat;
+    background-size:auto 220px;
+    height:220px;
+    width:220px;
+    margin:0 auto;
+    cursor:pointer;
+    position:relative;
+    overflow:hidden;
+}
+.pingpongpan .mod-control-group .pingpongpan-knob_freq {
+    top:55px;
+    left:58px;
+    position:absolute;
+}
+.pingpongpan .mod-control-group .pingpongpan-knob_width {
+    top:55px;
+    left:302px;
+    position:absolute;
+}
+.pingpongpan .mod-light {
+    top:32px;
+    left:320px;
+}
+.pingpongpan .mod-footswitch {
+    background-image:url(/resources/footswitch.png{{{ns}}});
+    background-position:top center;
+    background-repeat:no-repeat;
+    background-size:auto 132px;
+    top:15px;
+    right:55px;
+    cursor:pointer;
+    height:66px;
+    width: 66px;
+    position:absolute;
+}
+.pingpongpan .mod-footswitch.on {
+    background-position:top center;
+}
+.pingpongpan .mod-footswitch.off {
+    background-position:bottom center;
+}
+.pingpongpan .mod-pedal-input , .pingpongpan .mod-pedal-output {
+    top: 60px;
+}
+.pingpongpan .mod-pedal-input .mod-input , .pingpongpan .mod-pedal-output .mod-output {
+    margin-bottom: 40px !important
+}

plugins/PingPongPan/DistrhoPluginPingPongPan.cpp

@@ -54,7 +54,7 @@ void DistrhoPluginPingPongPan::initParameter(uint32_t index, Parameter& paramete
     case paramWidth:
         parameter.hints      = kParameterIsAutomable;
         parameter.name       = "Width";
-        parameter.symbol     = "with";
+        parameter.symbol     = "width";
         parameter.unit       = "%";
         parameter.ranges.def = 75.0f;
         parameter.ranges.min = 0.0f;