Skip to content

Commit

Permalink
refactor some style elements, clean up mapping settings panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@vsicurella
vsicurella committed Jun 3, 2024
1 parent ab9a15c commit 14dc61e
Show file tree
Hide file tree
Showing 12 changed files with 204 additions and 138 deletions.
9 changes: 3 additions & 6 deletions Source/CurvesArea.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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);
Expand Down
22 changes: 13 additions & 9 deletions Source/GlobalSettingsArea.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
}
Expand All @@ -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());
Expand Down
2 changes: 2 additions & 0 deletions Source/GlobalSettingsArea.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
30 changes: 22 additions & 8 deletions Source/LumatoneEditorLookAndFeel.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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));
Expand All @@ -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)
{
Expand Down Expand Up @@ -1029,6 +1037,11 @@ class LumatoneEditorLookAndFeel : public LookAndFeel_V4
return bar.getWidth() / bar.getNumTabs();
}

juce::Rectangle<int> getTabButtonExtraComponentBounds(const juce::TabBarButton& tbb, juce::Rectangle<int>& area, juce::Component& extraComp) override
{
return juce::Rectangle<int>(400,400,400,400);
}

void drawTabButton(TabBarButton& tbb, Graphics& g, bool isMouseOver, bool isMouseDown) override
{
Colour c;
Expand All @@ -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
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
}
Expand Down
11 changes: 2 additions & 9 deletions Source/LumatoneEditorStyleCommon.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -610,11 +602,12 @@ enum LumatoneEditorIcon

enum LumatoneEditorColourIDs
{
TitlePink,
LabelPink,
LabelBlue,
DisconnectedRed,
ConnectedGreen,
DarkBackground,
HeaderBackground,
MediumBackground,
LightBackground,
ControlAreaBackground,
Expand Down
2 changes: 1 addition & 1 deletion Source/Main.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
74 changes: 53 additions & 21 deletions Source/MainComponent.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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::TabbedComponent>(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 = &sectionTabs->getTabbedButtonBar();
sectionTabBar->addChangeListener(this);

btnLoadFile.reset(new juce::TextButton("btnLoadFile"));
addAndMakeVisible(btnLoadFile.get());
btnLoadFile->setButtonText(juce::translate("LoadFile"));
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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()
Expand All @@ -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);
Expand Down Expand Up @@ -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(
Expand All @@ -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();
Expand All @@ -537,7 +570,6 @@ void MainContentComponent::resized()
// curvesArea->repaint();
//}


void MainContentComponent::handleStatePropertyChange(juce::ValueTree stateIn, const juce::Identifier& property)
{
LumatoneEditorState::handleStatePropertyChange(stateIn, property);
Expand Down
Loading

0 comments on commit 14dc61e

Please sign in to comment.