Add VKB wheel skin colors, tweak design and positioning (#6002)

Closes #5746
surge-synthesizer · Mar 31, 2022 · bdffeca · bdffeca
1 parent 885d9e9
commit bdffeca
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 28 deletions.
diff --git a/resources/data/skins/dark-mode.surge-skin/skin.xml b/resources/data/skins/dark-mode.surge-skin/skin.xml
@@ -147,6 +147,12 @@
         <color id="dialog.checkbox.border" value="lightgray"/>
         <color id="dialog.checkbox.tick" value="lightgray"/>
 
+        <color id="vkb.key.mouse_over" value="surgebluetrans"/>
+        <color id="vkb.key.pressed" value="surgeblue"/>
+        <color id="vkb.wheel.background" value="bggray"/>
+        <color id="vkb.wheel.border" value="bordergray"/>
+        <color id="vkb.wheel.value" value="surgeblue"/>
+
         <color id="effect.label.separator" value="#5E5E5E"/>
         <color id="effect.label.text" value="lightgray"/>
         <color id="effect.label.presetname" value="lightgray"/>

diff --git a/src/common/SkinColors.cpp b/src/common/SkinColors.cpp
@@ -452,6 +452,12 @@ namespace VirtualKeyboard
 {
 const Surge::Skin::Color Text("vkb.text", 0x000000, 0xFF), Shadow("vkb.shadow", 0x40000000);
 
+namespace Wheel
+{
+const Surge::Skin::Color Background("vkb.wheel.background", 0xFFFFFF),
+    Border("vkb.wheel.border", 0x979797), Value("vkb.wheel.value", 0xFF9000);
+}
+
 namespace Key
 {
 const Surge::Skin::Color Black("vkb.key.black", 0x000000, 0xFF), White("vkb.key.white", 0xFFFFFF),

diff --git a/src/common/SkinColors.h b/src/common/SkinColors.h
@@ -369,6 +369,11 @@ namespace VirtualKeyboard
 {
 extern const Surge::Skin::Color Text, Shadow;
 
+namespace Wheel
+{
+extern const Surge::Skin::Color Background, Border, Value;
+}
+
 namespace Key
 {
 extern const Surge::Skin::Color Black, White, Separator, MouseOver, Pressed;

diff --git a/src/surge-xt/SurgeSynthEditor.cpp b/src/surge-xt/SurgeSynthEditor.cpp
@@ -27,34 +27,27 @@ struct VKeyboardWheel : public juce::Component
     int value{0};
     void paint(juce::Graphics &g) override
     {
-        auto wheelSz = getLocalBounds().reduced(1, 2);
-        g.setColour(juce::Colour(15, 15, 15));
+        auto wheelSz = getLocalBounds().reduced(2, 3);
+
+        g.setColour(findColour(SurgeJUCELookAndFeel::SurgeColourIds::wheelBgId));
         g.fillRect(wheelSz);
-        g.setColour(juce::Colour(80, 80, 80));
-        g.drawRect(wheelSz);
+        g.setColour(findColour(SurgeJUCELookAndFeel::SurgeColourIds::wheelBorderId));
+        g.drawRect(wheelSz.expanded(1, 1));
 
         float p = 1.0 * value / range;
+
         if (!unipolar)
+        {
             p = 1.0 * (value + range) / (2 * range);
+        }
 
         // y direction is flipped
         p = 1 - p;
 
-        int nTicks = 10;
-        float shift = 1.0 * p / nTicks;
-
-        for (int i = 0; i < nTicks; ++i)
-        {
-            int lev = 150 - (i + p) * 50.0 / (nTicks);
-            g.setColour(juce::Colour(lev, lev, lev));
-            float yp = (i + p * nTicks - floor(p * nTicks)) * wheelSz.getHeight() / nTicks +
-                       wheelSz.getY();
-            g.drawLine(wheelSz.getX(), yp, wheelSz.getRight(), yp);
-        }
+        float cp = wheelSz.getY() + p * (wheelSz.getHeight() - 4);
+        auto r = wheelSz.withHeight(2).translated(0, cp - 2).reduced(1, 0);
 
-        float cp = wheelSz.getY() + p * wheelSz.getHeight();
-        auto r = wheelSz.withHeight(3).translated(0, cp - 3);
-        g.setColour(juce::Colours::yellow);
+        g.setColour(findColour(SurgeJUCELookAndFeel::SurgeColourIds::wheelValueId));
         g.fillRect(r);
     }
 
@@ -281,27 +274,26 @@ void SurgeSynthEditor::resized()
         auto y = adapter->getWindowSizeY();
         auto x = addTempo ? 50 : 0;
         auto wheels = 32;
+        auto margin = 6;
         int tempoHeight = 14, typeinHeight = 18, yOffset = -2;
         int tempoBlockHeight = tempoHeight + typeinHeight;
         int tempoBlockYPos = ((extraYSpaceForVirtualKeyboard - tempoBlockHeight) / 2) + yOffset;
 
         auto xf = juce::AffineTransform().scaled(applyZoomFactor);
-        auto r = juce::Rectangle<int>(x + wheels, y, adapter->getWindowSizeX() - x - wheels,
+        auto r = juce::Rectangle<int>(x + wheels + margin, y,
+                                      adapter->getWindowSizeX() - x - wheels - margin,
                                       extraYSpaceForVirtualKeyboard);
-        // std::cout << "B4 " << r.toString() << std::endl;
-        // r = r.transformedBy(xf);
-        // std::cout << "AT " << r.toString() << std::endl;
         keyboard->setBounds(r);
-        keyboard->setTransform(xf); // juce::AffineTransform().scaled(1.05));
+        keyboard->setTransform(xf);
         keyboard->setVisible(true);
 
         auto pmr = juce::Rectangle<int>(x, y, wheels / 2, extraYSpaceForVirtualKeyboard);
         pitchwheel->setBounds(pmr);
-        pitchwheel->setTransform(xf); // juce::AffineTransform().scaled(1.05));
+        pitchwheel->setTransform(xf);
         pitchwheel->setVisible(true);
-        pmr = pmr.translated(wheels / 2, 0);
+        pmr = pmr.translated((wheels / 2) + margin / 3, 0);
         modwheel->setBounds(pmr);
-        modwheel->setTransform(xf); // juce::AffineTransform().scaled(1.05));
+        modwheel->setTransform(xf);
         modwheel->setVisible(true);
 
         if (addTempo)

diff --git a/src/surge-xt/gui/SurgeJUCELookAndFeel.cpp b/src/surge-xt/gui/SurgeJUCELookAndFeel.cpp
@@ -30,8 +30,6 @@ using namespace juce;
 void SurgeJUCELookAndFeel::onSkinChanged()
 {
     setColour(topWindowBorderId, skin->getColor(Colors::Dialog::Titlebar::Background));
-    setColour(tempoTypeinTextId, Colours::black);
-    setColour(tempoTypeinHighlightId, Colours::red);
 
     setColour(DocumentWindow::backgroundColourId, Colour(48, 48, 48));
     setColour(TextButton::buttonColourId, Colour(32, 32, 32));
@@ -102,6 +100,13 @@ void SurgeJUCELookAndFeel::onSkinChanged()
     setColour(SurgeJUCELookAndFeel::SurgeColourIds::tempoTypeinTextId,
               skin->getColor(Colors::Dialog::Entry::Text));
 
+    setColour(SurgeJUCELookAndFeel::SurgeColourIds::wheelBgId,
+              skin->getColor(Colors::VirtualKeyboard::Wheel::Background));
+    setColour(SurgeJUCELookAndFeel::SurgeColourIds::wheelBorderId,
+              skin->getColor(Colors::VirtualKeyboard::Wheel::Border));
+    setColour(SurgeJUCELookAndFeel::SurgeColourIds::wheelValueId,
+              skin->getColor(Colors::VirtualKeyboard::Wheel::Value));
+
     setColour(MidiKeyboardComponent::textLabelColourId,
               skin->getColor(Colors::VirtualKeyboard::Text));
     setColour(MidiKeyboardComponent::shadowColourId,

diff --git a/src/surge-xt/gui/SurgeJUCELookAndFeel.h b/src/surge-xt/gui/SurgeJUCELookAndFeel.h
@@ -62,6 +62,10 @@ class SurgeJUCELookAndFeel : public juce::LookAndFeel_V4, public Surge::GUI::Ski
         tempoTypeinBorderId,
         tempoTypeinHighlightId,
         tempoTypeinTextId,
+
+        wheelBgId,
+        wheelBorderId,
+        wheelValueId,
     };
 
     int lastDark{-1};