From 14dc61e9b22f2edc2b873840ed30878daa3dc988 Mon Sep 17 00:00:00 2001 From: Vincenzo Sicurella Date: Sun, 2 Jun 2024 21:18:54 -0400 Subject: [PATCH] refactor some style elements, clean up mapping settings panel --- Source/CurvesArea.cpp | 9 +- Source/GlobalSettingsArea.cpp | 22 +++-- Source/GlobalSettingsArea.h | 2 + Source/LumatoneEditorLookAndFeel.h | 30 ++++-- Source/LumatoneEditorStyleCommon.h | 11 +-- Source/Main.cpp | 2 +- Source/MainComponent.cpp | 74 ++++++++++---- Source/MainComponent.h | 9 +- Source/MappingSettingsControls.cpp | 154 +++++++++++++++-------------- Source/MappingSettingsControls.h | 23 +++-- Source/MappingSettingsPanel.cpp | 2 +- Source/MidiEditArea.cpp | 4 +- 12 files changed, 204 insertions(+), 138 deletions(-) diff --git a/Source/CurvesArea.cpp b/Source/CurvesArea.cpp index 6316ce6f..00ca11d4 100644 --- a/Source/CurvesArea.cpp +++ b/Source/CurvesArea.cpp @@ -65,11 +65,11 @@ CurvesArea::CurvesArea (const LumatoneEditorState& stateIn) labelWindowTitle.reset (new juce::Label ("labelWindowTitle", juce::translate("Curves"))); addAndMakeVisible (labelWindowTitle.get()); - labelWindowTitle->setFont (juce::Font (18.00f, juce::Font::plain).withTypefaceStyle ("Regular")); labelWindowTitle->setJustificationType (juce::Justification::centredLeft); labelWindowTitle->setEditable (false, false, false); - labelWindowTitle->setColour (juce::TextEditor::textColourId, juce::Colours::black); - labelWindowTitle->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); + labelWindowTitle->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); + labelWindowTitle->setColour (juce::Label::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LabelPink)); + labelWindowTitle->setColour (juce::Label::backgroundColourId, juce::Colours::transparentBlack); labelWindowTitle->setBounds (8, 8, 150, 24); @@ -95,9 +95,6 @@ CurvesArea::CurvesArea (const LumatoneEditorState& stateIn) getEditorLookAndFeel().setColour(VelocityCurveBeam::beamColourId, Colour(0x66ff5e00)); getEditorLookAndFeel().setColour(VelocityCurveBeam::outlineColourId, Colour(0xffd7d9da)); - labelWindowTitle->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); - labelWindowTitle->setColour(Label::backgroundColourId, Colour()); - curvesTab->setColour(TabbedComponent::ColourIds::outlineColourId, Colour()); curvesTab->setColour(TabbedComponent::ColourIds::backgroundColourId, Colour()); //curvesTab->addTab(juce::translate("Note Velocity"), Colour(), new NoteOnOffVelocityCurveDialog(), true); diff --git a/Source/GlobalSettingsArea.cpp b/Source/GlobalSettingsArea.cpp index 7070188c..1c23e13a 100644 --- a/Source/GlobalSettingsArea.cpp +++ b/Source/GlobalSettingsArea.cpp @@ -154,6 +154,9 @@ void GlobalSettingsArea::paint (juce::Graphics& g) //[UserPrePaint] Add your own custom painting code here.. //[/UserPrePaint] + g.setColour(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::MediumBackground)); + g.fillAll(); + //[UserPaint] Add your own custom painting code here.. //[/UserPaint] } @@ -167,31 +170,32 @@ void GlobalSettingsArea::resized() int calbrateBtnHeight = roundToInt(getHeight() * calibrateHeight); int calibrateWidth = getLookAndFeel().getTextButtonWidthToFitText(*settingsButton, calbrateBtnHeight); - settingsButton->setSize(calibrateWidth, calbrateBtnHeight); - settingsButton->setTopRightPosition(getWidth(), roundToInt((getHeight() - settingsButton->getHeight()) * 0.5f)); - - float margin = roundToInt(getHeight() * 0.1f); + float controlsMargin = roundToInt(getHeight() * 0.1f); float colourEditHeight = proportionOfHeight(controlsHeight); float controlY = proportionOfHeight((1 - controlsHeight) / 2.0f); float colourButtonWidth = colourEditHeight * colourButtonAspect; Font colourLabelsFont = getAppFonts().getFont(LumatoneEditorFont::FranklinGothic, colourEditHeight * 1.1f); + int startMargin = proportionOfWidth(marginXRatio); + settingsButton->setSize(calibrateWidth, calbrateBtnHeight); + settingsButton->setTopRightPosition(getWidth() - startMargin, roundToInt((getHeight() - settingsButton->getHeight()) * 0.5f)); + lblColourInactiveMacroButton->setFont(colourLabelsFont); resizeLabelWithHeight(lblColourInactiveMacroButton.get(), colourEditHeight); - lblColourInactiveMacroButton->setTopRightPosition(settingsButton->getX() - margin, controlY); + lblColourInactiveMacroButton->setTopRightPosition(settingsButton->getX() - controlsMargin, controlY); inactiveMacroButtonColourEdit->setSize(colourButtonWidth, colourEditHeight); - inactiveMacroButtonColourEdit->setTopRightPosition(lblColourInactiveMacroButton->getX() - margin, controlY); + inactiveMacroButtonColourEdit->setTopRightPosition(lblColourInactiveMacroButton->getX() - controlsMargin, controlY); lblColourActiveMacroButton->setFont(colourLabelsFont); resizeLabelWithHeight(lblColourActiveMacroButton.get(), colourEditHeight); - lblColourActiveMacroButton->setTopRightPosition(inactiveMacroButtonColourEdit->getX() - margin, controlY); + lblColourActiveMacroButton->setTopRightPosition(inactiveMacroButtonColourEdit->getX() - controlsMargin, controlY); activeMacroButtonColourEdit->setSize(colourButtonWidth, colourEditHeight); - activeMacroButtonColourEdit->setTopRightPosition(lblColourActiveMacroButton->getX() - margin, controlY); + activeMacroButtonColourEdit->setTopRightPosition(lblColourActiveMacroButton->getX() - controlsMargin, controlY); resizeLabelWithHeight(lblPresetButtonColours.get(), colourEditHeight); - lblPresetButtonColours->setTopRightPosition(activeMacroButtonColourEdit->getX() - margin, controlY); + lblPresetButtonColours->setTopRightPosition(activeMacroButtonColourEdit->getX() - controlsMargin, controlY); resizeLabelWithHeight(lblDeveloperMode.get(), getHeight()); lblDeveloperMode->setCentrePosition(getLocalBounds().getCentre()); diff --git a/Source/GlobalSettingsArea.h b/Source/GlobalSettingsArea.h index 5109c486..b2162db9 100644 --- a/Source/GlobalSettingsArea.h +++ b/Source/GlobalSettingsArea.h @@ -90,6 +90,8 @@ class GlobalSettingsArea : public juce::Component, //============================================================================== // Size and position constants + const float marginXRatio = 0.02f; + const float colourButtonAspect = 1.235294f; const float inactiveButtonAspect = 4.695652f; diff --git a/Source/LumatoneEditorLookAndFeel.h b/Source/LumatoneEditorLookAndFeel.h index 8f5a565b..7ad842b5 100644 --- a/Source/LumatoneEditorLookAndFeel.h +++ b/Source/LumatoneEditorLookAndFeel.h @@ -51,6 +51,14 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 return appFonts.getFont(fontIdIn, heightIn); } +public: + // Helpers for static style definition that don't need component references + + juce::Font getTabBarFont(float height=12.0f) const + { + return getAppFont(LumatoneEditorFont::GothamNarrowMedium, height); + } + public: //================================================================== // LookAndFeel_V4 Implementation @@ -142,7 +150,7 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 void drawDocumentWindowTitleBar(DocumentWindow& window, Graphics& g, int w, int h, int titleSpaceX, int titleSpaceW, const Image* icon, bool drawTitleTextOnLeft) override { - g.fillAll(parent->findColour(LumatoneEditorColourIDs::DarkBackground)); + g.fillAll(parent->findColour(LumatoneEditorColourIDs::HeaderBackground)); g.setColour(parent->findColour(LumatoneEditorColourIDs::DescriptionText)); g.setFont(parent->getAppFont(LumatoneEditorFont::GothamNarrowMedium, h * 0.75f)); @@ -163,7 +171,7 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 Image btnImage(Image::PixelFormat::RGB, btnSize, btnSize, false); Graphics g(btnImage); - g.fillAll(parent->findColour(LumatoneEditorColourIDs::DarkBackground)); + g.fillAll(parent->findColour(LumatoneEditorColourIDs::HeaderBackground)); if (buttonType == DocumentWindow::closeButton) { @@ -1029,6 +1037,11 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 return bar.getWidth() / bar.getNumTabs(); } + juce::Rectangle getTabButtonExtraComponentBounds(const juce::TabBarButton& tbb, juce::Rectangle& area, juce::Component& extraComp) override + { + return juce::Rectangle(400,400,400,400); + } + void drawTabButton(TabBarButton& tbb, Graphics& g, bool isMouseOver, bool isMouseDown) override { Colour c; @@ -1047,7 +1060,7 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 Font getTabButtonFont(TabBarButton& tbb, float height) override { - return getAppFont(LumatoneEditorFont::GothamNarrowMedium, height).withHorizontalScale(1.05f); + return getTabBarFont().withHeight(height).withHorizontalScale(1.05f); } void drawTabButtonText(TabBarButton& tbb, Graphics& g, bool isMouseOver, bool isMouseDown) override @@ -1271,18 +1284,19 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 void setupDefaultColours() { // Colour references - setColour(LumatoneEditorColourIDs::LabelPink, Colour(0xffdfceca)); + setColour(LumatoneEditorColourIDs::TitlePink, Colour(0xffdfceca)); + setColour(LumatoneEditorColourIDs::LabelPink, Colour(0xffcecece)); setColour(LumatoneEditorColourIDs::LabelBlue, Colour(0xff60aac5)); setColour(LumatoneEditorColourIDs::DisconnectedRed, Colour(0xffd7002a)); setColour(LumatoneEditorColourIDs::ConnectedGreen, Colour(0xff84aea3)); - setColour(LumatoneEditorColourIDs::DarkBackground, Colour(0xff1a1b1c)); + setColour(LumatoneEditorColourIDs::HeaderBackground, Colour(0xff1a1b1c)); setColour(LumatoneEditorColourIDs::MediumBackground, Colour(0xff212529)); - setColour(LumatoneEditorColourIDs::LightBackground, Colour(0xff272b2f)); + setColour(LumatoneEditorColourIDs::LightBackground, Colour(0xff272b2e)); setColour(LumatoneEditorColourIDs::ControlAreaBackground, Colour(0xff212626)); setColour(LumatoneEditorColourIDs::ActiveText, Colours::white); setColour(LumatoneEditorColourIDs::InactiveText, Colour(0xffb1b1b1)); setColour(LumatoneEditorColourIDs::DescriptionText, Colour(0xffcbcbcb)); - setColour(LumatoneEditorColourIDs::ControlBoxBackground, Colour(0xff212427)); + setColour(LumatoneEditorColourIDs::ControlBoxBackground, Colour(0xff1e2222)); setColour(LumatoneEditorColourIDs::ControlBoxHighlighted, Colour(0xff3d5a78)); setColour(LumatoneEditorColourIDs::DefaultPresetButtonActive, Colour(0xffff84e6)); setColour(LumatoneEditorColourIDs::DefaultPresetButtonInactive, Colour(0xff5c7cf2)); @@ -1312,7 +1326,7 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4 setColour(TextEditor::ColourIds::highlightedTextColourId, findColour(LumatoneEditorColourIDs::DescriptionText)); setColour(TextEditor::ColourIds::shadowColourId, Colour()); - setColour(AlertWindow::ColourIds::backgroundColourId, findColour(LumatoneEditorColourIDs::DarkBackground)); + setColour(AlertWindow::ColourIds::backgroundColourId, findColour(LumatoneEditorColourIDs::HeaderBackground)); setColour(AlertWindow::ColourIds::textColourId, findColour(LumatoneEditorColourIDs::DescriptionText)); setColour(AlertWindow::ColourIds::outlineColourId, findColour(LumatoneEditorColourIDs::MediumBackground)); } diff --git a/Source/LumatoneEditorStyleCommon.h b/Source/LumatoneEditorStyleCommon.h index bdefd270..f7f3b184 100644 --- a/Source/LumatoneEditorStyleCommon.h +++ b/Source/LumatoneEditorStyleCommon.h @@ -30,14 +30,6 @@ // Rounded corner size over app height ratio for layout elements #define ROUNDEDCORNERTOAPPHEIGHT 0.00555556f - -#define SETTINGSAREAMARGINHEIGHT 0.1714f -#define SETTINGSLABELHEIGHT 0.13f -#define SETTINGSLABELMARGINWIDTH 0.01f - -#define SETTINGSCONTROLMARGINTOAPPWIDTH 0.01171875f -#define SETTINGSTOGGLEHEIGHTSCALAR 0.087f - #if JUCE_MAC #define GLOBALFONTSCALAR 0.9f #define CONTROLBOXFONTHEIGHTSCALAR 0.7f @@ -610,11 +602,12 @@ enum LumatoneEditorIcon enum LumatoneEditorColourIDs { + TitlePink, LabelPink, LabelBlue, DisconnectedRed, ConnectedGreen, - DarkBackground, + HeaderBackground, MediumBackground, LightBackground, ControlAreaBackground, diff --git a/Source/Main.cpp b/Source/Main.cpp index 9af8dbdd..96e276dc 100644 --- a/Source/Main.cpp +++ b/Source/Main.cpp @@ -705,7 +705,7 @@ bool TerpstraSysExApplication::aboutTerpstraSysEx() //resizeLabelWithHeight(label, roundToInt(area.getHeight() * 0.24f)); options.dialogTitle = "About Lumatone Editor"; - options.dialogBackgroundColour = state.getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::DarkBackground); + options.dialogBackgroundColour = state.getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::HeaderBackground); options.escapeKeyTriggersCloseButton = true; options.useNativeTitleBar = false; diff --git a/Source/MainComponent.cpp b/Source/MainComponent.cpp index 0519fa32..7497c3fc 100644 --- a/Source/MainComponent.cpp +++ b/Source/MainComponent.cpp @@ -60,13 +60,24 @@ MainContentComponent::MainContentComponent(const LumatoneEditorState& stateIn, j addAndMakeVisible(globalSettingsArea.get()); globalSettingsArea->listenToColourEditButtons(this); + lblEditTitle.reset(new Label("lblEditTitle", "Edit Mapping")); + lblEditTitle->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); + lblEditTitle->setColour(Label::ColourIds::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LabelBlue)); + lblEditTitle->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); + addAndMakeVisible(lblEditTitle.get()); + sectionTabs = std::make_unique(juce::TabbedButtonBar::TabsAtTop); + sectionTabs->setColour(juce::TabbedComponent::ColourIds::outlineColourId, juce::Colours::transparentBlack); addAndMakeVisible(*sectionTabs); sectionTabs->addTab("Key Editor", juce::Colour(), mappingSettingsComponent.get(), false); sectionTabs->addTab("AutoGenerator", juce::Colour(), mappingSettingsComponent.get(), false); sectionTabs->addTab("Advanced", juce::Colour(), mappingSettingsComponent.get(), false); sectionTabs->addTab("Mapping Settings", juce::Colour(), mappingSettingsComponent.get(), false); + sectionTabNames = sectionTabs->getTabNames(); + sectionTabBar = §ionTabs->getTabbedButtonBar(); + sectionTabBar->addChangeListener(this); + btnLoadFile.reset(new juce::TextButton("btnLoadFile")); addAndMakeVisible(btnLoadFile.get()); btnLoadFile->setButtonText(juce::translate("LoadFile")); @@ -123,22 +134,24 @@ MainContentComponent::MainContentComponent(const LumatoneEditorState& stateIn, j MainContentComponent::~MainContentComponent() { - //TerpstraSysExApplication::getApp().getMidiDriver().removeListener(this); + copiedSubBoardData = nullptr; + + lblAppVersion = nullptr; + lblAppName = nullptr; - btnLoadFile = nullptr; - btnSaveFile = nullptr; btnImportFile = nullptr; + btnSaveFile = nullptr; + btnLoadFile = nullptr; + + sectionTabs = nullptr; + lblEditTitle = nullptr; + + globalSettingsArea = nullptr; - // globalSettingsArea = nullptr; - // curvesArea = nullptr; mappingSettingsComponent = nullptr; - // noteEditArea = nullptr; - midiEditArea = nullptr; allKeysOverview = nullptr; - - lblAppName = nullptr; - lblAppVersion = nullptr; + midiEditArea = nullptr; } void MainContentComponent::saveStateToPropertiesFile(PropertiesFile* propertiesFile) @@ -394,6 +407,12 @@ void MainContentComponent::changeListenerCallback(ChangeBroadcaster *source) // { // // allKeysOverview->setCurrentSetSelection(noteEditArea->getOctaveBoardSelectorTab()->getCurrentTabIndex()); // } + + // Probably not the cleanest way to do this + if (source == sectionTabBar) + { + resizeEditSectionTabs(); + } } void MainContentComponent::buttonClicked(Button* btn) @@ -444,9 +463,7 @@ void MainContentComponent::paint (Graphics& g) g.fillAll(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::MediumBackground)); g.setColour(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LightBackground)); - // g.setColour(juce::Colours::green); g.fillRect(controlsAreaBackground); - } void MainContentComponent::resized() @@ -471,7 +488,7 @@ void MainContentComponent::resized() controlsAreaBackground = getBounds().withTop(proportionOfHeight(controlsAreaY)).withBottom(footerY); controlsArea = controlsAreaBackground.withSizeKeepingCentre(contentWidth, controlsAreaBackground.getHeight()); - controlsLabelYPos = proportionOfHeight(controlSectionTabsY); + controlsLabelYPos = controlsArea.getY() - proportionOfHeight(controlsLabelHeight); // All keys overview/virtual keyboard playing // int newKeysOverviewAreaHeight = jmax(controlsLabelYPos - midiAreaHeight, MINIMALTERPSTRAKEYSETAREAHEIGHT); @@ -500,17 +517,18 @@ void MainContentComponent::resized() // noteEditArea->setSize(proportionOfWidth(assignWidth), proportionOfHeight(assignHeight)); // noteEditArea->setControlsTopLeftPosition(proportionOfWidth(assignMarginX), controlsArea.getY()); + lblEditTitle->setTopLeftPosition(contentMargin, controlsLabelYPos); + resizeLabelWithHeight(lblEditTitle.get(), (controlsArea.getY() - controlsLabelYPos) * 0.8f); + sectionTabs->setBounds(contentMargin, controlsLabelYPos, contentWidth, footerY - controlsArea.getY()); + // sectionTabs->setOff(lblEditTitle->getWidth()); + resizeEditSectionTabs(); // generalOptionsArea->setBounds(getLocalBounds().toFloat().getProportion(generalSettingsBounds).toNearestInt()); // pedalSensitivityDlg->setBounds(getLocalBounds().toFloat().getProportion(pedalSettingsBounds).toNearestInt()); - // curvesArea->setBounds(getLocalBounds().toFloat().getProportion(curvesAreaBounds).toNearestInt()); - // globalSettingsArea->setBounds(getLocalBounds() - // .withTop(roundToInt(getHeight() * footerAreaY)) - // .withTrimmedRight(footerHeight) - // ); + globalSettingsArea->setBounds(getLocalBounds().withTop(roundToInt(getHeight() * footerAreaY))); resizeLabelWithHeight(lblAppName.get(), roundToInt(footerHeight * lumatoneVersionHeight), 1.0f, " "); lblAppName->setTopLeftPosition( @@ -520,15 +538,30 @@ void MainContentComponent::resized() resizeLabelWithHeight(lblAppVersion.get(), roundToInt(lblAppName->getHeight() * 0.75f)); lblAppVersion->setTopLeftPosition(lblAppName->getRight(), lblAppName->getBottom() - lblAppVersion->getHeight()); } +void MainContentComponent::resizeEditSectionTabs() +{ + int sectionTabsMargin = proportionOfWidth(sectionTabsMarginW); + int sectionTabsWidth = 0; + + auto font = getEditorLookAndFeel().getTabBarFont((float)sectionTabBar->getHeight() * 0.7f); + for (int i = 0; i < sectionTabNames.size(); i++) + { + sectionTabsWidth += font.getStringWidth(sectionTabNames[i]) + sectionTabsMargin; + } + + int leftMargin = lblEditTitle->getWidth() + roundToInt(sectionTabsMargin * 0.5f); + sectionTabBar->setBounds(sectionTabBar->getBounds().withTrimmedLeft(leftMargin).withWidth(sectionTabsWidth)); +} + // -//void MainContentComponent::refreshKeyDataFields() +// void MainContentComponent::refreshKeyDataFields() //{ // noteEditArea->refreshKeyFields(); // // allKeysOverview->mappingUpdateCallback(); // // juce::Timer::callAfterDelay(1, [&]() { allKeysOverview->refreshMappingData(); }); //} // -//void MainContentComponent::refreshAllFields() +// void MainContentComponent::refreshAllFields() //{ // refreshKeyDataFields(); // generalOptionsArea->loadFromMapping(); @@ -537,7 +570,6 @@ void MainContentComponent::resized() // curvesArea->repaint(); //} - void MainContentComponent::handleStatePropertyChange(juce::ValueTree stateIn, const juce::Identifier& property) { LumatoneEditorState::handleStatePropertyChange(stateIn, property); diff --git a/Source/MainComponent.h b/Source/MainComponent.h index b11d43aa..de644a4b 100644 --- a/Source/MainComponent.h +++ b/Source/MainComponent.h @@ -61,6 +61,8 @@ class MainContentComponent : public juce::Component void paint (juce::Graphics&) override; void resized() override; + void resizeEditSectionTabs(); + //void refreshKeyDataFields(); //void refreshAllFields(); @@ -97,6 +99,7 @@ class MainContentComponent : public juce::Component // std::unique_ptr curvesArea; std::unique_ptr globalSettingsArea; + std::unique_ptr lblEditTitle; std::unique_ptr sectionTabs; std::unique_ptr btnLoadFile; @@ -120,12 +123,16 @@ class MainContentComponent : public juce::Component juce::Rectangle controlsArea; juce::Rectangle controlsAreaBackground; + juce::TabbedButtonBar* sectionTabBar; + const float sectionTabsMarginW = 0.013f; + juce::StringArray sectionTabNames; + const float contentWidthRatio = 0.871f; const float headerHeight = 0.0837f; const float controlSectionTabsY = 0.63f; - // const float controlsLabelHeight = 0.033f; + const float controlsLabelHeight = 0.033f; const float controlsAreaY = 0.662f; const float controlsAreaHeight = 0.43f; diff --git a/Source/MappingSettingsControls.cpp b/Source/MappingSettingsControls.cpp index 585d666c..6b05f507 100644 --- a/Source/MappingSettingsControls.cpp +++ b/Source/MappingSettingsControls.cpp @@ -18,13 +18,13 @@ MappingSettingsControls::MappingSettingsControls (const LumatoneEditorState& stateIn) : LumatoneEditorState("MappingSettingsControls", stateIn) { - labelGeneralSettingslTitle.reset (new juce::Label ("labelGeneralSettingslTitle", juce::translate("General Settings"))); - labelGeneralSettingslTitle->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); - labelGeneralSettingslTitle->setJustificationType (juce::Justification::centredLeft); - labelGeneralSettingslTitle->setEditable (false, false, false); - labelGeneralSettingslTitle->setColour(Label::ColourIds::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LabelBlue)); - labelGeneralSettingslTitle->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); - addAndMakeVisible (labelGeneralSettingslTitle.get()); + lblGeneralSettings.reset (new juce::Label ("lblGeneralSettings", juce::translate("General Settings"))); + lblGeneralSettings->setJustificationType (juce::Justification::centredLeft); + lblGeneralSettings->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); + lblGeneralSettings->setEditable (false, false, false); + lblGeneralSettings->setColour(Label::ColourIds::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LabelPink)); + lblGeneralSettings->setColour (juce::TextEditor::backgroundColourId, juce::Colours::transparentBlack); + addAndMakeVisible (lblGeneralSettings.get()); buttonAfterTouchActive.reset (new juce::ToggleButton ("buttonAfterTouchActive")); buttonAfterTouchActive->setButtonText (juce::translate("Polyphonic Aftertouch")); @@ -42,30 +42,29 @@ MappingSettingsControls::MappingSettingsControls (const LumatoneEditorState& sta }; addAndMakeVisible (buttonLightOnKeyStrokes.get()); - labelExprContrSensitivity.reset (new juce::Label ("labelExprContrSensitivity", juce::translate("Sensitivity"))); - labelExprContrSensitivity->setFont(getAppFonts().getFont(LumatoneEditorFont::GothamNarrowMedium)); - labelExprContrSensitivity->setJustificationType (juce::Justification::centred); - labelExprContrSensitivity->setEditable (false, false, false); - labelExprContrSensitivity->setColour (juce::TextEditor::textColourId, juce::Colours::black); - labelExprContrSensitivity->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); - addAndMakeVisible (labelExprContrSensitivity.get()); + lblExprSensitivity.reset (new juce::Label ("lblExprSensitivity", juce::translate("Expression Sensitivity"))); + lblExprSensitivity->setFont(getAppFonts().getFont(LumatoneEditorFont::GothamNarrowMedium)); + lblExprSensitivity->setJustificationType (juce::Justification::centred); + lblExprSensitivity->setEditable (false, false, false); + lblExprSensitivity->setColour (juce::TextEditor::textColourId, juce::Colours::black); + lblExprSensitivity->setColour (juce::TextEditor::backgroundColourId, juce::Colours::transparentBlack); + addAndMakeVisible (lblExprSensitivity.get()); btnInvertExpression.reset (new juce::ToggleButton ("btnInvertExpression")); - btnInvertExpression->setButtonText (juce::translate("Invert")); + btnInvertExpression->setButtonText (juce::translate("Invert Expression")); btnInvertExpression->onClick = [&]() { setInvertExpression(btnInvertExpression->getToggleState()); }; addAndMakeVisible (btnInvertExpression.get()); - lblExpression.reset (new juce::Label ("lblExpression", juce::translate("Expression"))); - lblExpression->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); - lblExpression->setJustificationType (juce::Justification::centredLeft); - lblExpression->setEditable (false, false, false); - lblExpression->setColour (juce::Label::textColourId, juce::Colour (0xff61acc8)); - lblExpression->setColour (juce::TextEditor::textColourId, juce::Colours::black); - lblExpression->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); - addAndMakeVisible (lblExpression.get()); + lblPedalSettings.reset (new juce::Label ("lblPedalSettings", juce::translate("Pedal Settings"))); + lblPedalSettings->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); + lblPedalSettings->setJustificationType (juce::Justification::centredLeft); + lblPedalSettings->setEditable (false, false, false); + lblPedalSettings->setColour (juce::Label::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LabelPink)); + lblPedalSettings->setColour (juce::TextEditor::backgroundColourId, juce::Colours::transparentBlack); + addAndMakeVisible (lblPedalSettings.get()); sldExprCtrlSensitivity.reset (new juce::Slider ("sldExprCtrlSensitivity")); sldExprCtrlSensitivity->setRange (0, 127, 1); @@ -78,20 +77,20 @@ MappingSettingsControls::MappingSettingsControls (const LumatoneEditorState& sta addAndMakeVisible (sldExprCtrlSensitivity.get()); btnInvertSustain.reset (new juce::ToggleButton ("btnInvertSustain")); - btnInvertSustain->setButtonText (juce::translate("Invert")); + btnInvertSustain->setButtonText (juce::translate("Invert Sustain")); btnInvertSustain->onClick = [&]() { setInvertSustain(btnInvertSustain->getToggleState()); }; - // addAndMakeVisible (btnInvertSustain.get()); - - lblSustain.reset (new juce::Label ("lblSustain", juce::translate("Sustain"))); - lblSustain->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); - lblSustain->setJustificationType (juce::Justification::centredLeft); - lblSustain->setEditable (false, false, false); - lblSustain->setColour (juce::Label::textColourId, juce::Colour (0xff61acc8)); - lblSustain->setColour (juce::TextEditor::textColourId, juce::Colours::black); - lblSustain->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); + addAndMakeVisible (btnInvertSustain.get()); + + // lblSustain.reset (new juce::Label ("lblSustain", juce::translate("Sustain"))); + // lblSustain->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); + // lblSustain->setJustificationType (juce::Justification::centredLeft); + // lblSustain->setEditable (false, false, false); + // lblSustain->setColour (juce::Label::textColourId, juce::Colour (0xff61acc8)); + // lblSustain->setColour (juce::TextEditor::textColourId, juce::Colours::black); + // lblSustain->setColour (juce::TextEditor::backgroundColourId, juce::Colour (0x00000000)); // addAndMakeVisible (lblSustain.get()); @@ -102,7 +101,7 @@ MappingSettingsControls::~MappingSettingsControls() { removeEditorListener(this); - labelGeneralSettingslTitle = nullptr; + lblGeneralSettings = nullptr; buttonAfterTouchActive = nullptr; buttonLightOnKeyStrokes = nullptr; } @@ -110,62 +109,69 @@ MappingSettingsControls::~MappingSettingsControls() //============================================================================== void MappingSettingsControls::paint (juce::Graphics& g) { - g.setColour(juce::Colour(0xff212626)); - g.fillRoundedRectangle(getLocalBounds().toFloat().withTop(proportionOfHeight(SETTINGSAREAMARGINHEIGHT)), roundedCornerSize); + g.setColour(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::ControlAreaBackground)); + g.fillRoundedRectangle(getLocalBounds().toFloat(), roundedCornerSize); + + g.setColour(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::ControlBoxBackground)); + g.fillRoundedRectangle(generalSettingsBounds, roundedCornerSize); + g.fillRoundedRectangle(pedalBounds, roundedCornerSize); } void MappingSettingsControls::resized() { - float w = getWidth(); - float h = getHeight(); + float w = (float)getWidth(); + float h = (float)getHeight(); roundedCornerSize = roundToInt(getWindowBounds().getHeight() * ROUNDEDCORNERTOAPPHEIGHT); - resizeLabelWithHeight(labelGeneralSettingslTitle.get(), roundToInt(getHeight() * SETTINGSLABELHEIGHT)); - labelGeneralSettingslTitle->setTopLeftPosition(roundToInt(getWidth() * SETTINGSLABELMARGINWIDTH), 0); + int settingsMarginX = roundToInt(w * controlAreaXMargin); + int settingsYMargin = roundToInt(h * settingsAreaMarginH); + + int generalSettingsRightX = roundToInt(w * 0.5f - settingsMarginX); + int pedalSettingsX = roundToInt(w * 0.5f); + + int lblHeight = roundToInt(h * settingsLabelH); + + int controlAreaY = lblGeneralSettings->getBottom() + settingsYMargin; + int settingsHeight = h - controlAreaY - settingsYMargin; + + generalSettingsBounds = juce::Rectangle(settingsMarginX, controlAreaY, generalSettingsRightX - settingsMarginX, settingsHeight); + pedalBounds = juce::Rectangle(pedalSettingsX, controlAreaY, w - settingsMarginX - pedalSettingsX, settingsHeight); + + resizeLabelWithHeight(lblGeneralSettings.get(), lblHeight); + lblGeneralSettings->setTopLeftPosition(generalSettingsBounds.getX(), settingsYMargin); - int marginX = roundToInt(getParentWidth() * SETTINGSCONTROLMARGINTOAPPWIDTH); + resizeLabelWithHeight(lblPedalSettings.get(), lblHeight); + lblPedalSettings->setTopLeftPosition(pedalBounds.getX(), lblGeneralSettings->getY()); + + int buttonHeight = roundToInt(h * controlHeightScalar); + int buttonY = roundToInt(h * 0.3f); + int buttonMarginY = roundToInt(buttonHeight * controlYMarginToControlHeight); + + int controlMarginX = proportionOfWidth(controlXMargin); buttonAfterTouchActive->setBounds( - marginX, proportionOfHeight(0.3f), proportionOfWidth(1.0f), proportionOfHeight(SETTINGSTOGGLEHEIGHTSCALAR) - ); + generalSettingsBounds.withTrimmedLeft(controlMarginX).withTrimmedTop(buttonMarginY).withHeight(buttonHeight).toNearestInt()); buttonLightOnKeyStrokes->setBounds( - marginX, proportionOfHeight(0.5f), proportionOfWidth(1.0f), proportionOfHeight(SETTINGSTOGGLEHEIGHTSCALAR) - ); + buttonAfterTouchActive->getBounds().translated(0, buttonHeight + buttonMarginY)); - roundedCornerSize = roundToInt(getWindowBounds().getHeight() * ROUNDEDCORNERTOAPPHEIGHT); - - int areaMarginWidth = roundToInt(w * sectionMarginWidth) * 0.5f; - int areaMarginHeight = roundToInt(h * SETTINGSAREAMARGINHEIGHT); + btnInvertSustain->setBounds(pedalBounds.withTrimmedLeft(controlMarginX) + .withTop(buttonY) + .withHeight(buttonHeight) + .toNearestInt()); - expressionBounds = getLocalBounds().toFloat().withTop(areaMarginHeight).withRight(roundToInt(w * 0.5f - areaMarginWidth)); - sustainBounds = getLocalBounds().toFloat().withTop(areaMarginHeight).withLeft(roundToInt(w * 0.5f + areaMarginWidth)); + btnInvertExpression->setBounds(pedalBounds.withTrimmedLeft(controlMarginX) + .withTop(btnInvertSustain->getBottom() + settingsYMargin) + .withHeight(buttonHeight).toNearestInt()); - int lblMarginX = roundToInt(w * SETTINGSLABELMARGINWIDTH); - int lblWidth = roundToInt(w * 0.5f); - int lblHeight = roundToInt(h * SETTINGSLABELHEIGHT); - lblExpression->setBounds(expressionBounds.getX() + lblMarginX, 0, lblWidth, lblHeight); - lblSustain->setBounds(sustainBounds.getX() + lblMarginX, 0, lblWidth, lblHeight); + lblExprSensitivity->setBounds(pedalBounds.withTop(btnInvertExpression->getBottom() + settingsYMargin) + .withHeight(buttonHeight) + .toNearestInt()); - int controlMargin = roundToInt(getParentWidth() * SETTINGSCONTROLMARGINTOAPPWIDTH); - int buttonHeight = roundToInt(h * SETTINGSTOGGLEHEIGHTSCALAR); - int buttonY = roundToInt(h * 0.3f); - btnInvertExpression->setBounds(expressionBounds.withTrimmedLeft(controlMargin).withTop(buttonY).withHeight(buttonHeight).toNearestInt()); - btnInvertSustain->setBounds(sustainBounds.withTrimmedLeft(controlMargin).withTop(buttonY).withHeight(buttonHeight).toNearestInt()); - - sldExprCtrlSensitivity->setBounds( - expressionBounds.reduced(expressionBounds.getWidth() * 0.2f, 0) - .withTop(btnInvertExpression->getBottom() + buttonHeight) - .withTrimmedBottom(buttonHeight * 1.5f) - .toNearestInt() - ); - - labelExprContrSensitivity->setBounds( - expressionBounds.withTop(sldExprCtrlSensitivity->getBottom() + buttonHeight * 0.1f) - .withTrimmedBottom(buttonHeight * 0.5f) - .toNearestInt() - ); + sldExprCtrlSensitivity->setBounds(pedalBounds.withTop(lblExprSensitivity->getBottom() + buttonMarginY * 0.25f) + .withTrimmedBottom(buttonMarginY) + .toNearestInt()); } void MappingSettingsControls::loadFromMapping() diff --git a/Source/MappingSettingsControls.h b/Source/MappingSettingsControls.h index 5d1fba3f..9428ba7f 100644 --- a/Source/MappingSettingsControls.h +++ b/Source/MappingSettingsControls.h @@ -44,22 +44,33 @@ class MappingSettingsControls : public juce::Component private: int roundedCornerSize = 0; - juce::Rectangle expressionBounds; - juce::Rectangle sustainBounds; - const float sectionMarginWidth = 0.05f; + juce::Rectangle generalSettingsBounds; + juce::Rectangle pedalBounds; //============================================================================== - std::unique_ptr labelGeneralSettingslTitle; + std::unique_ptr lblGeneralSettings; std::unique_ptr buttonAfterTouchActive; std::unique_ptr buttonLightOnKeyStrokes; - std::unique_ptr labelExprContrSensitivity; + std::unique_ptr lblExprSensitivity; std::unique_ptr btnInvertExpression; - std::unique_ptr lblExpression; + std::unique_ptr lblPedalSettings; std::unique_ptr sldExprCtrlSensitivity; std::unique_ptr btnInvertSustain; std::unique_ptr lblSustain; + //============================================================================== + + const float settingsAreaMarginH = 0.067f; + const float settingsLabelH = 0.1f; + + const float controlAreaXMargin = 0.055f; + + const float controlXMargin = 0.034f; + const float controlHeightScalar = 0.055f; + + const float controlYMarginToControlHeight = 1.0f; + //============================================================================== JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MappingSettingsControls) }; diff --git a/Source/MappingSettingsPanel.cpp b/Source/MappingSettingsPanel.cpp index 0042b319..5c3f36a5 100644 --- a/Source/MappingSettingsPanel.cpp +++ b/Source/MappingSettingsPanel.cpp @@ -37,7 +37,7 @@ void MappingSettingsPanel::paint(juce::Graphics& g) void MappingSettingsPanel::resized() { contentMarginY = proportionOfHeight(contentMarginHeightRatio); - contentHeight = juce::roundToInt(getHeight() - contentMarginY * 2); + contentHeight = juce::roundToInt(getHeight() - contentMarginY); settingsControls->setBounds(0, contentMarginY, proportionOfWidth(controlsWidthRatio), contentHeight); diff --git a/Source/MidiEditArea.cpp b/Source/MidiEditArea.cpp index fba8c42c..8aacb10d 100644 --- a/Source/MidiEditArea.cpp +++ b/Source/MidiEditArea.cpp @@ -41,7 +41,7 @@ MidiEditArea::MidiEditArea (const LumatoneEditorState& stateIn) lumatoneLabel.reset(new juce::Label("LumatoneLabel", "lumatone")); lumatoneLabel->setFont(getAppFonts().getFont(LumatoneEditorFont::UniviaProBold)); - lumatoneLabel->setColour(juce::Label::ColourIds::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LabelPink)); + lumatoneLabel->setColour(juce::Label::ColourIds::textColourId, getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::TitlePink)); lumatoneLabel->setJustificationType(Justification::centred); addAndMakeVisible(lumatoneLabel.get()); @@ -215,7 +215,7 @@ void MidiEditArea::paint (juce::Graphics& g) g.fillAll(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::LightBackground)); // Dark background for title and logomark - g.setColour(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::DarkBackground)); + g.setColour(getEditorLookAndFeel().findColour(LumatoneEditorColourIDs::HeaderBackground)); g.fillRect(lumatoneLabelBounds); g.fillRect(connectivityArea);