Give a slightly 3D look to virtual grid keys

Dewb · Dec 9, 2021 · c353261 · c353261
1 parent 037e779
commit c353261
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 28 deletions.
diff --git a/src/virtualgrid/VirtualGridKey.hpp b/src/virtualgrid/VirtualGridKey.hpp
@@ -33,10 +33,6 @@ struct VirtualGridKey : rack::app::ParamWidget
 
     void drawLayer(const DrawArgs& args, int layer) override
     {
-        if (layer != 1) {
-            return;
-        }
-
         auto vg = args.vg;
         uint8_t val = ledAddress != NULL ? *ledAddress : 0;
         auto rect = box.size;
@@ -53,26 +49,76 @@ struct VirtualGridKey : rack::app::ParamWidget
             &color2
         );
 
-        if (getParamQuantity() && getParamQuantity()->getValue() == HELD)
-        {
-            nvgBeginPath(vg);
-            nvgRoundedRect(vg, x - 3, x - 3, rect.x + 6, rect.y + 6, 6);
-            nvgFillColor(vg, nvgRGB(180, 180, 0));
-            nvgFill(vg);
+        bool pushed = getParamQuantity() && (getParamQuantity()->getValue() == HELD || getParamQuantity()->getValue() == PRESSED);
+        int pushAmount = 2.1;
+
+        if (!pushed) {
+            // highlight top and side edges
+            if ((val > 0 && layer == 1) || (val == 0 && layer == -1)) {
+                nvgBeginPath(vg);
+                nvgRoundedRect(vg, x - 0.3, y - 0.3, rect.x + 0.6, rect.y + 0.3, 4.3);
+                nvgFillColor(vg, val > 0 ? color1 : nvgRGB(180, 180, 180));
+                nvgFill(vg);
+            }
+
+            // shadow
+            if (layer == 0) {
+                nvgBeginPath(vg);
+                nvgRoundedRect(vg, x, y + pushAmount, rect.x, rect.y - pushAmount + 1.2, 4);
+                nvgFillColor(vg, nvgRGB(160, 160, 160));
+                nvgFill(vg);
+            }
+        } else {
+            // highlight top and side edges
+            if ((val > 0 && layer == 1) || (val == 0 && layer == -1)) {
+                nvgBeginPath(vg);
+                nvgRoundedRect(vg, x - 0.3, y - 0.3 + pushAmount, rect.x + 0.6, rect.y - pushAmount + 0.3, 4.3);
+                nvgFillColor(vg, val > 0 ? color1 : nvgRGB(180, 180, 180));
+                nvgFill(vg);
+            }
+            // shadow
+            if (layer == 0) {
+                nvgBeginPath(vg);
+                nvgRoundedRect(vg, x, y + pushAmount, rect.x, rect.y - pushAmount + 0.8, 4);
+                nvgFillColor(vg, nvgRGB(160, 160, 160));
+                nvgFill(vg);
+            }
         }
 
-        nvgBeginPath(vg);
-        auto paint = nvgBoxGradient(vg, x, y, rect.x, rect.y, rect.x * 0.4, rect.x * 1.2, color1, color2);
-        nvgRoundedRect(vg, x, y, rect.x, rect.y, 4);
-        if (val > 0)
-        {
-            nvgFillPaint(vg, paint);
+        // selection-hold ring
+        // if (getParamQuantity() && getParamQuantity()->getValue() == HELD)
+        // {
+        //     nvgBeginPath(vg);
+        //     nvgRoundedRect(vg, x - 3, y - 3 + pushAmount, rect.x + 6, rect.y + 6 - pushAmount, 6);
+        //     nvgFillColor(vg, nvgRGB(180, 180, 0));
+        //     nvgFill(vg);
+        // }
+
+        // button vertical face
+        if (!pushed) {
+            if ((val > 0 && layer == 1) || (val == 0 && layer == -1)) {
+                nvgBeginPath(vg);
+                nvgRoundedRect(vg, x, y + rect.y - (pushAmount + 10), rect.x, pushAmount + 10, 4);
+                nvgFillColor(vg, val > 0 ? color2 : nvgRGB(58, 58, 58));
+                nvgFill(vg);
+            }
         }
-        else
-        {
-            nvgFillColor(vg, nvgRGB(0, 0, 0));
+
+        // button top surface
+        if (layer == 1) {
+            nvgBeginPath(vg);
+            auto paint = nvgBoxGradient(vg, x, y + (pushed ? pushAmount : 0), rect.x, rect.y - pushAmount, rect.x * 0.4, rect.x * 1.2, color1, color2);
+            nvgRoundedRect(vg, x, y + (pushed ? pushAmount : 0), rect.x, rect.y - pushAmount, 4);
+            if (val > 0)
+            {
+                nvgFillPaint(vg, paint);
+            }
+            else
+            {
+                nvgFillColor(vg, nvgRGB(0, 0, 0));
+            }
+            nvgFill(vg);
         }
-        nvgFill(vg);
     }
 
     void beginPress()

diff --git a/src/virtualgrid/VirtualGridWidget.cpp b/src/virtualgrid/VirtualGridWidget.cpp
@@ -41,7 +41,7 @@ VirtualGridWidget::VirtualGridWidget(VirtualGridModule* module, unsigned w, unsi
     }
 
     float rackWidth = 0;
-    GridTheme* sampleTheme;
+    GridTheme* sampleTheme = &sampleThemeYellow;
 
     if (w == h)
     {
@@ -110,13 +110,16 @@ VirtualGridWidget::~VirtualGridWidget()
     GridConnectionManager::get()->deregisterGrid(id);
 }
 
-void VirtualGridWidget::draw(const DrawArgs& args)
+void VirtualGridWidget::drawLayer(const DrawArgs& args, int layer)
 {
-    nvgBeginPath(args.vg);
-    nvgRect(args.vg, 0.0, 0.0, box.size.x, box.size.y);
-    nvgFillColor(args.vg, nvgRGB(0xe6, 0xe6, 0xe6));
-    nvgFill(args.vg);
-    Widget::draw(args);
+    if (layer == -1)
+    {
+        nvgBeginPath(args.vg);
+        nvgRect(args.vg, 0.0, 0.0, box.size.x, box.size.y);
+        nvgFillColor(args.vg, nvgRGB(0xf0, 0xf0, 0xf0));
+        nvgFill(args.vg);
+    }
+    Widget::drawLayer(args, layer);
 }
 
 void VirtualGridWidget::clearHeldKeys()

diff --git a/src/virtualgrid/VirtualGridWidget.hpp b/src/virtualgrid/VirtualGridWidget.hpp
@@ -10,7 +10,7 @@ struct VirtualGridWidget : rack::app::ModuleWidget
     VirtualGridWidget(VirtualGridModule* module, unsigned w, unsigned h);
     ~VirtualGridWidget();
 
-    void draw(const DrawArgs& args) override;
+    void drawLayer(const DrawArgs& args, int layer) override;
     void onDragEnter(const rack::event::DragEnter& e) override;
     void onDragStart(const rack::event::DragStart& e) override;