Skip to content

Commit

Permalink
Place components in new center panel
Browse files Browse the repository at this point in the history
  • Loading branch information
JoseDiazRohena committed Dec 30, 2023
1 parent 395fad7 commit 452719c
Show file tree
Hide file tree
Showing 13 changed files with 284 additions and 18 deletions.
1 change: 1 addition & 0 deletions .clang-format
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ BreakBeforeBraces: Custom
BraceWrapping: # Allman except for lambdas
AfterClass: true
AfterCaseLabel: true
AfterEnum: true
AfterFunction: true
AfterNamespace: true
AfterStruct: true
Expand Down
2 changes: 2 additions & 0 deletions CMakeLists.txt
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,14 @@ set(SourceFiles
libs/tote_bag/juce_gui/components/widgets/LabelSlider.h
libs/tote_bag/juce_gui/components/widgets/ParameterSlider.h
libs/tote_bag/juce_gui/components/widgets/ParameterTextButton.h
libs/tote_bag/juce_gui/components/widgets/tbl_ToggleButton.h
libs/tote_bag/juce_gui/components/widgets/DrawableParameterButton.cpp
libs/tote_bag/juce_gui/components/widgets/FlatTextButton.cpp
libs/tote_bag/juce_gui/components/widgets/FlatTextChooser.cpp
libs/tote_bag/juce_gui/components/widgets/LabelSlider.cpp
libs/tote_bag/juce_gui/components/widgets/ParameterSlider.cpp
libs/tote_bag/juce_gui/components/widgets/ParameterTextButton.cpp
libs/tote_bag/juce_gui/components/widgets/tbl_ToggleButton.cpp

libs/tote_bag/juce_gui/lookandfeel/LookAndFeel.h
libs/tote_bag/juce_gui/lookandfeel/LookAndFeelConstants.h
Expand Down
4 changes: 1 addition & 3 deletions libs/tote_bag/juce_gui/components/widgets/LabelSlider.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ LabelSlider::~LabelSlider()

void LabelSlider::resized()
{
const auto mainArea = getLocalBounds();
const auto margin = juce::roundToInt (mainArea.getHeight() * .01f);
auto sliderArea = mainArea.reduced (margin);
auto sliderArea = getLocalBounds();

const auto labelHeight = juce::roundToInt (sliderArea.getHeight() * .140);
const auto labelArea = sliderArea.removeFromTop (labelHeight);
Expand Down
14 changes: 14 additions & 0 deletions libs/tote_bag/juce_gui/components/widgets/tbl_ToggleButton.cpp
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// 2023 Tote Bag Labs

#include "tbl_ToggleButton.h"

namespace tote_bag
{
ToggleButton::ToggleButton (const juce::String& parameterId,
juce::AudioProcessorValueTreeState& stateToControl)
: juce::ToggleButton (parameterId)
, buttonValue (stateToControl, parameterId, *this)
{
setClickingTogglesState (true);
}
} // namespace tote_bag
28 changes: 28 additions & 0 deletions libs/tote_bag/juce_gui/components/widgets/tbl_ToggleButton.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

// 2023 Tote Bag Labs

#pragma once

#include <juce_audio_processors/juce_audio_processors.h>
#include <juce_gui_basics/juce_gui_basics.h>

namespace tote_bag
{
class ToggleButton : public juce::ToggleButton
{
public:
ToggleButton (const juce::String& parameterId,
juce::AudioProcessorValueTreeState& stateToControl);

enum ColourIds
{
backgroundColourId = 0x1006504,
highightColourId = 0x1006505,
};

private:
juce::AudioProcessorValueTreeState::ButtonAttachment buttonValue;

JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (ToggleButton)
};
} // namespace tote_bag
30 changes: 27 additions & 3 deletions libs/tote_bag/juce_gui/lookandfeel/LookAndFeel.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
#include "LookAndFeelConstants.h"

#include "tote_bag/juce_gui/components/widgets/FlatTextButton.h"
#include "tote_bag/juce_gui/components/widgets/tbl_ToggleButton.h"

namespace tote_bag
{
Expand All @@ -28,10 +29,14 @@ LookAndFeel::LookAndFeel()

// slider text box colours
setColour (juce::Slider::textBoxTextColourId, juce::Colours::black);
setColour (juce::Slider::textBoxOutlineColourId, vPinkDark);
setColour (juce::Slider::textBoxOutlineColourId, vPink);
setColour (juce::Slider::rotarySliderOutlineColourId, vPinkDark);
setColour (juce::Slider::rotarySliderFillColourId, juce::Colours::floralwhite);

// toggle button colours
setColour (ToggleButton::backgroundColourId, juce::Colours::grey);
setColour (ToggleButton::highightColourId, juce::Colours::green);

// so we don't get background painting on drawable buttons
setColour (juce::DrawableButton::backgroundOnColourId,
juce::Colours::transparentWhite);
Expand Down Expand Up @@ -209,10 +214,10 @@ void LookAndFeel::drawRotarySlider (juce::Graphics& g,
const float rotaryEndAngle,
juce::Slider& slider)
{
auto bounds = juce::Rectangle<int> (x, y, width, height).toFloat().reduced (10);
auto bounds = juce::Rectangle<int> (x, y, width, height).toFloat();
auto radius = juce::jmin (bounds.getWidth(), bounds.getHeight()) / 2.0f;
auto lineW = radius * 0.125f;
auto arcRadius = radius - lineW * 0.5f;
auto arcRadius = radius - lineW;
const auto toAngle =
rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);

Expand Down Expand Up @@ -399,6 +404,25 @@ void LookAndFeel::drawPopupMenuItem (juce::Graphics& g,
g.drawFittedText (text, r, juce::Justification::left, 1);
}

void LookAndFeel::drawToggleButton (juce::Graphics& g,
juce::ToggleButton& button,
bool,
bool)
{
const auto backgroundBounds = button.getLocalBounds();
g.setColour (findColour (ToggleButton::backgroundColourId));
g.fillEllipse (backgroundBounds.toFloat());

const auto buttonIsActive = button.getToggleState();
if (buttonIsActive)
{
const auto highlightBounds = backgroundBounds.reduced (
juce::roundToInt (backgroundBounds.getWidth() * .20f));
g.setColour (findColour (ToggleButton::highightColourId));
g.fillEllipse (highlightBounds.toFloat());
}
}

juce::Slider::SliderLayout LookAndFeel::getSliderLayout (juce::Slider& slider)
{
// 1. compute the actually visible textBox size from the slider textBox size and some additional constraints
Expand Down
11 changes: 10 additions & 1 deletion libs/tote_bag/juce_gui/lookandfeel/LookAndFeel.h
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,18 @@ class LookAndFeel : public juce::LookAndFeel_V4,
const juce::Drawable*,
const juce::Colour*) override;

void drawToggleButton (juce::Graphics& g,
juce::ToggleButton& button,
bool,
bool) override;

juce::Slider::SliderLayout getSliderLayout (juce::Slider& slider) override;

enum ColourIds { knobColourId = 0x1001800, pointerColourId = 0x1001801 };
enum ColourIds
{
knobColourId = 0x1001800,
pointerColourId = 0x1001801
};

private:
FontHolder fontHolder;
Expand Down
3 changes: 1 addition & 2 deletions libs/tote_bag/juce_gui/utilities/GraphicsUtilities.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,13 @@ void drawRoundedRect (juce::Graphics& g,

auto h = croppedBounds.getHeight();
auto lineThickness = h * .025f;
auto cornerSize = h * .25f;
auto cornerSize = h * .075f;

g.setColour (colour.darker());

g.drawRoundedRectangle (croppedBounds, cornerSize, lineThickness);

g.setColour (colour);

juce::Path p;
p.addRoundedRectangle (croppedBounds, cornerSize);
g.fillPath (p);
Expand Down
3 changes: 1 addition & 2 deletions src/PluginEditor.h
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ class ValentineAudioProcessorEditor : public juce::AudioProcessorEditor

VMainPanel mainPanel;

// in figma ~ 5053 x 1741. ratio = 2.9 ish width to height
static constexpr float ratio = 2.5f;
static constexpr float ratio = 2.02f;
static constexpr int minimumWidth = 700;
static constexpr int startingWidth = 1000;
static constexpr int maximumWidth = 2000;
Expand Down
167 changes: 166 additions & 1 deletion src/gui/panels/ValentineCenterPanel.cpp
Original file line number Diff line number Diff line change
@@ -1,26 +1,191 @@
// 2023 Tote Bag Labs

#include "ValentineCenterPanel.h"
#include "BinaryData.h"
#include "PluginProcessor.h"

#include "ValentineParameters.h"
#include "tote_bag/juce_gui/lookandfeel/LookAndFeelConstants.h"
#include "tote_bag/juce_gui/utilities/GraphicsUtilities.h"

namespace tote_bag
{
namespace valentine
{
namespace detail
{
inline const juce::String kCrushSliderText = "CRUSH";
inline const juce::String kCompressSliderText = "COMPRESS";
inline const juce::String kSaturateSliderText = "SATURATE";
inline const juce::String kRatioSliderText = "RATIO";
inline const juce::String kAttackSliderText = "ATTACK";
inline const juce::String kReleaseSliderText = "RELEASE";
inline const juce::String kOutputSliderText = "OUTPUT";
inline const juce::String kMixSliderText = "MIX";
} // namespace detail

CenterPanel::CenterPanel (ValentineAudioProcessor& processor)
: borderLineThickness (0.0f)
, borderCornerSize (0.0f)
, crushEnableButton (parameterID (VParameter::crushEnable), processor.treeState)
, crushSlider (detail::kCrushSliderText,
parameterID (VParameter::bitCrush),
processor.treeState)
, compressSlider (detail::kCompressSliderText,
parameterID (VParameter::inputGain),
processor.treeState)
, saturateEnableButton (parameterID (VParameter::saturateEnable), processor.treeState)
, saturateSlider (detail::kSaturateSliderText,
parameterID (VParameter::saturation),
processor.treeState)
, valentineLogo (
juce::Drawable::createFromImageData (BinaryData::logo_218x40_svg,
BinaryData::logo_218x40_svgSize))
, ratioSlider (detail::kRatioSliderText,
parameterID (VParameter::ratio),
processor.treeState)
, attackSlider (detail::kAttackSliderText,
parameterID (VParameter::attack),
processor.treeState)
, releaseSlider (detail::kReleaseSliderText,
parameterID (VParameter::release),
processor.treeState)
, clipEnableButton (parameterID (VParameter::outputClipEnable), processor.treeState)
, outputSlider (detail::kOutputSliderText,
parameterID (VParameter::makeupGain),
processor.treeState)
, mixSlider (detail::kMixSliderText,
parameterID (VParameter::dryWet),
processor.treeState)
{
addAndMakeVisible (crushEnableButton);
addAndMakeVisible (crushSlider);
addAndMakeVisible (compressSlider);
addAndMakeVisible (saturateEnableButton);
addAndMakeVisible (saturateSlider);
addAndMakeVisible (valentineLogo.get());
addAndMakeVisible (ratioSlider);
addAndMakeVisible (attackSlider);
addAndMakeVisible (releaseSlider);
addAndMakeVisible (clipEnableButton);
addAndMakeVisible (outputSlider);
addAndMakeVisible (mixSlider);
}

CenterPanel::~CenterPanel()
{
}

void CenterPanel::paint (juce::Graphics&)
void CenterPanel::paint (juce::Graphics& g)
{
g.setColour (juce::Colours::black);

g.drawRoundedRectangle (topRowBorder.toFloat(),
borderCornerSize,
borderLineThickness);

g.drawRoundedRectangle (bottomRowBorder.toFloat(),
borderCornerSize,
borderLineThickness);

g.fillRect (bottomRowDivider);
}

void CenterPanel::resized()
{
auto localBounds = getLocalBounds();
const auto margin = juce::roundToInt (localBounds.getHeight() * .025f);

const auto topRowHeight = localBounds.getHeight() * .55f;

topRowBorder =
localBounds.removeFromTop (juce::roundToInt (topRowHeight)).reduced (margin);
auto topRowComponents = topRowBorder.reduced (margin);

auto topRowSliders = topRowComponents.removeFromLeft (
juce::roundToInt (topRowComponents.getWidth() * .65f));
const auto topRowButtonWidth = juce::roundToInt (topRowSliders.getWidth() * .033f);
const auto adjustedTopRowComponentsWidth =
topRowSliders.getWidth() - (topRowButtonWidth * 2.0f);
const auto topRowSliderWidth =
juce::roundToInt (adjustedTopRowComponentsWidth / 3.0f);

const auto topRowButtonSpacer =
juce::roundToInt ((topRowSliders.getHeight() - topRowButtonWidth) * .5f);
const auto topRowButtonNudge = topRowButtonWidth / 2.2f;
const auto initialCrushButtonX = topRowSliders.getX();
const auto crushEnableButtonBounds =
topRowSliders.removeFromLeft (topRowButtonWidth)
.reduced (0, topRowButtonSpacer)
.withX (initialCrushButtonX + topRowButtonNudge);

crushEnableButton.setBounds (crushEnableButtonBounds);
crushSlider.setBounds (topRowSliders.removeFromLeft (topRowSliderWidth));
compressSlider.setBounds (topRowSliders.removeFromLeft (topRowSliderWidth));

const auto initialSaturateButtonX = topRowSliders.getX();
const auto saturateEnableButtonBounds =
topRowSliders.removeFromLeft (topRowButtonWidth)
.reduced (0, topRowButtonSpacer)
.withX (initialSaturateButtonX + topRowButtonNudge);

saturateEnableButton.setBounds (saturateEnableButtonBounds);
saturateSlider.setBounds (topRowSliders.removeFromLeft (topRowSliderWidth));

const auto logoHeight = juce::roundToInt (topRowComponents.getHeight() * .25f);
topRowComponents.removeFromTop (logoHeight * 1.45f);
topRowComponents.removeFromRight (logoHeight * .5f);
const auto valentineLogoBounds = topRowComponents.removeFromTop (logoHeight);

valentineLogo->setTransformToFit (
valentineLogoBounds.toFloat(),
juce::RectanglePlacement (juce::RectanglePlacement::centred
| juce::RectanglePlacement::fillDestination));

const auto topRowBorderHeight = topRowBorder.getHeight();
borderLineThickness = topRowBorderHeight * .01f;
borderCornerSize = topRowBorderHeight * .060f;

localBounds.removeFromTop (margin);
bottomRowBorder = localBounds.reduced (margin);

const auto bottomRowBorderWidth = bottomRowBorder.getWidth();
const auto bottomRowBorderY = bottomRowBorder.getY();
const auto bottomRowBorderHeight = bottomRowBorder.getHeight();

auto bottomRowComponents = bottomRowBorder.reduced (margin);

const auto bottomRowButtonWidth =
juce::roundToInt (bottomRowComponents.getWidth() / 60.0f);
const auto adjustedBottomRowComponentsWidth =
bottomRowComponents.getWidth() - bottomRowButtonWidth;
const auto bottomRowSliderWidth =
juce::roundToInt (adjustedBottomRowComponentsWidth / 6.0f);

ratioSlider.setBounds (bottomRowComponents.removeFromLeft (bottomRowSliderWidth));
attackSlider.setBounds (bottomRowComponents.removeFromLeft (bottomRowSliderWidth));
releaseSlider.setBounds (bottomRowComponents.removeFromLeft (bottomRowSliderWidth));

const auto dividerBounds = bottomRowComponents.removeFromLeft (bottomRowSliderWidth);

bottomRowDivider =
juce::Rectangle<int> (juce::roundToInt (dividerBounds.getCentreX()),
dividerBounds.getY(),
juce::roundToInt (borderLineThickness),
dividerBounds.getHeight());

const auto bottomRowButtonSpacer =
juce::roundToInt ((bottomRowComponents.getHeight() - bottomRowButtonWidth) * .5f);
const auto bottomRowButtonNudge = bottomRowButtonWidth / 1.25f;
const auto clipButtonInitialX = bottomRowComponents.getX();
const auto clipButtonBounds =
bottomRowComponents.removeFromLeft (bottomRowButtonWidth)
.reduced (0, bottomRowButtonSpacer)
.withX (clipButtonInitialX + bottomRowButtonNudge);

clipEnableButton.setBounds (clipButtonBounds);
outputSlider.setBounds (bottomRowComponents.removeFromLeft (bottomRowSliderWidth));
mixSlider.setBounds (bottomRowComponents.removeFromLeft (bottomRowSliderWidth));
}
} // namespace tote_bag
} // namespace valentine
Loading

0 comments on commit 452719c

Please sign in to comment.