Merge pull request #85 from mikeoliphant/modgui

Add modgui

CMakeLists.txt

@@ -29,6 +29,9 @@ add_custom_target(copy_binaries ALL
 	DEPENDS neural_amp_modeler
 )
 
+file(COPY resources/modgui.ttl DESTINATION neural_amp_modeler.lv2)
+file(COPY resources/modgui DESTINATION neural_amp_modeler.lv2)
+
 configure_file(resources/manifest.ttl.in neural_amp_modeler.lv2/manifest.ttl)
 configure_file(resources/neural_amp_modeler.ttl.in neural_amp_modeler.lv2/neural_amp_modeler.ttl)
 

CREDITS.md

@@ -4,4 +4,6 @@ https://github.com/mikeoliphant/NeuralAudio
 
 https://github.com/lv2/lv2
 
-In addition, the CMake structure and LV2 plugin structure are based on code from https://github.com/Dougal-s/Aether.
+The CMake structure and LV2 plugin structure are based on code from https://github.com/Dougal-s/Aether.
+
+modgui user interface is by Roman Brandstetter (@rominator1983) and Filipe Coelho (@falktk) based on design from Evan Heritage.

resources/manifest.ttl.in

@@ -5,4 +5,4 @@
 <@NAM_LV2_ID@>
 	a lv2:Plugin;
 	lv2:binary <neural_amp_modeler@CMAKE_SHARED_MODULE_SUFFIX@>;
-	rdfs:seeAlso <neural_amp_modeler.ttl>.
+	rdfs:seeAlso <neural_amp_modeler.ttl>,<modgui.ttl>.

resources/modgui.ttl

@@ -0,0 +1,21 @@
+@prefix modgui: <http://moddevices.com/ns/modgui#>.
+@prefix lv2:    <http://lv2plug.in/ns/lv2core#>.
+
+<http://github.com/mikeoliphant/neural-amp-modeler-lv2>
+    modgui:gui [
+        modgui:resourcesDirectory <modgui>;
+        modgui:iconTemplate <modgui/icon-nam.html>;
+        modgui:stylesheet <modgui/stylesheet-nam.css>;
+        modgui:screenshot <modgui/screenshot-nam.png>;
+        modgui:thumbnail <modgui/thumbnail-nam.png>;
+        modgui:discussionURL <https://forum.mod.audio/t/neural-amp-modeler/10112> ;
+        modgui:port [
+            lv2:index 0;
+            lv2:symbol "input_level";
+            lv2:name "Input Lvl";
+        ], [
+            lv2:index 1;
+            lv2:symbol "output_level";
+            lv2:name "Output Lvl";
+        ];
+    ].

resources/modgui/icon-nam.html

@@ -0,0 +1,45 @@
+<div class="mod-pedal mod-pedal-nam">
+    <div mod-role="drag-handle" class="mod-drag-handle"></div>
+    <div class="mod-control-group group1 clearfix">
+        {{#controls}}
+        <div class="mod-knob" title="{{name}}">
+            <div class="mod-knob-title">{{name}}</div>
+            <div class="mod-knob-image" mod-role="input-control-port" mod-port-symbol="{{symbol}}"></div>
+        </div>
+        {{/controls}}
+    </div>
+    <div class="mod-footswitch" mod-role="bypass"></div>
+
+    <div class="mod-control-group group2 clearfix">
+        <div class="mod-control-group mod-enumerated-group bottom clearfix">
+            {{#effect.parameters}}
+            {{#path}}
+            <div class="mod-enumerated" mod-role="input-parameter" mod-parameter-uri="{{uri}}" mod-widget="custom-select-path">
+                <div mod-role="input-parameter-value" mod-parameter-uri="{{uri}}" class="mod-enumerated-selected">
+                    -- choose a NAM model --
+                </div>
+                <div class="mod-enumerated-list">
+                    {{#files}}
+                    <div mod-role="enumeration-option" mod-parameter-value="{{fullname}}">{{basename}}</div>
+                    {{/files}}
+                </div>
+            </div>
+            {{/path}}
+            {{/effect.parameters}}
+        </div>
+    </div>
+    <div class="mod-pedal-input">
+        {{#effect.ports.audio.input}}
+        <div class="mod-input mod-input-disconnected" title="{{name}}" mod-role="input-audio-port" mod-port-symbol="{{symbol}}">
+            <div class="mod-pedal-input-image"></div>
+        </div>
+        {{/effect.ports.audio.input}}
+    </div>
+    <div class="mod-pedal-output">
+        {{#effect.ports.audio.output}}
+        <div class="mod-output mod-output-disconnected" title="{{name}}" mod-role="output-audio-port" mod-port-symbol="{{symbol}}">
+            <div class="mod-pedal-output-image"></div>
+        </div>
+        {{/effect.ports.audio.output}}
+    </div>
+</div>

resources/modgui/stylesheet-nam.css

@@ -0,0 +1,130 @@
+/* nam */
+
+@import url(/fonts/nexa/stylesheet.css);
+@import url(/fonts/questrial/stylesheet.css);
+
+/* = CONTAINER
+================================================ */
+.mod-pedal-nam {
+    background-position:center center;
+    background-repeat:no-repeat;
+    /* background image is 1121 × 536*/
+    background-size:560px 268px;
+    background-image:url(/resources/background.png{{{ns}}});
+    width:560px;
+    height:268px;
+    position:absolute;
+    border-radius:40px;
+}
+
+/* = BYPASS
+================================================ */
+.mod-pedal-nam .mod-footswitch {
+    background-image:url(/resources/bypass_on.png{{{ns}}});
+    background-position:center center;
+    background-repeat:no-repeat;
+    background-size:82px 47px;
+    width:82px;
+    height:47px;
+    top:132px;
+    left:235px;
+    cursor:pointer;
+    position:absolute;
+}
+.mod-pedal-nam .mod-footswitch.on {
+    background-image:url(/resources/bypass_off.png{{{ns}}});
+}
+
+/* = KNOBS
+================================================ */
+.mod-pedal-nam .mod-control-group {
+    z-index:30;
+    position:relative;
+    margin:0px;
+    padding:0px;
+    display:inline;
+}
+
+.mod-pedal-nam .group1 {
+    top:86px;
+    left:22px;
+}
+
+.mod-pedal-nam .group2 {
+    top:107px;
+    left:78px;
+}
+
+.mod-pedal-nam .mod-control-group .mod-knob .mod-knob-title {
+    text-align: center;
+    color:white;
+}
+
+.mod-pedal-nam .mod-control-group .mod-knob {
+    overflow:hidden;
+    position:relative;
+    display:inline-block;
+}
+
+.mod-pedal-nam .mod-control-group .mod-knob:first-child {
+    margin-left: 0px;
+}
+
+.mod-pedal-nam .mod-control-group .mod-knob:last-child {
+    margin-left: 315px;
+}
+
+.mod-pedal-nam .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:5000px 100px;
+    height:100px;
+    width:100px;
+    cursor:pointer;
+}
+
+.mod-pedal-nam .mod-enumerated {
+    position: relative;
+    font-weight: bold;
+    cursor: pointer;
+    color: white;
+}
+
+.mod-pedal-nam .mod-enumerated .mod-enumerated-selected {
+    padding-left: 5px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: transparent;
+    color: white;
+    display: block;
+}
+
+/* THE LIST OF OPTIONS */
+.mod-pedal-nam .mod-enumerated .mod-enumerated-list {
+    background: black;
+    display: none;
+    overflow: auto;
+    position: absolute;
+    padding: 0;
+    width: 405px;
+    height: 220px;
+    border: 2px solid #333;
+}
+
+.mod-pedal-nam .mod-enumerated .mod-enumerated-list > div {
+    padding: 3px 5px;
+}
+
+.mod-pedal-nam .mod-enumerated .mod-enumerated-list > div.selected {
+    background: #333;
+}
+
+.mod-pedal-nam .mod-enumerated .mod-enumerated-list > div:hover {
+    background: #222;
+}
+
+.mod-pedal-nam .mod-enumerated .mod-enumerated-list > div.selected:hover {
+    background: #555;
+}