Skip to content

Commit

Permalink
WIP: inspector design improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@timothyschoen
timothyschoen committed Dec 9, 2024
1 parent e582f79 commit fd125d3
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 36 deletions.
180 changes: 173 additions & 7 deletions Source/Components/PropertiesPanel.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ class PropertiesPanel : public Component {

auto titleX = x;
if (parent.titleAlignment == AlignWithPropertyName) {
titleX += 8;
titleX += 12;
}

auto title = getName();
Expand All @@ -123,17 +123,15 @@ class PropertiesPanel : public Component {

auto propertyBounds = Rectangle<float>(x, titleHeight + 8.0f, width, getHeight() - (titleHeight + 16.0f));

// Don't draw the shadow if the background colour has opacity
if (parent.drawShadowAndOutline) {
Path p;
p.addRoundedRectangle(propertyBounds.reduced(3.0f), Corners::largeCornerRadius);
dropShadow->render(g, p);
}

g.setColour(findColour(parent.panelColour));
g.setColour(findColour(parent.panelColour).withAlpha(parent.panelAlpha));
g.fillRoundedRectangle(propertyBounds, Corners::largeCornerRadius);

// Don't draw the outline if the background colour has opacity
if (parent.drawShadowAndOutline) {
g.setColour(findColour(parent.separatorColour));
g.drawRoundedRectangle(propertyBounds, Corners::largeCornerRadius, 1.0f);
Expand Down Expand Up @@ -164,7 +162,7 @@ class PropertiesPanel : public Component {

for (int i = 0; i < propertyComponents.size() - 1; i++) {
auto y = propertyComponents[i]->getBottom() + padding;
g.drawHorizontalLine(y, x, x + width);
g.drawHorizontalLine(y, x + 10, (x + width) - 10);
}
}

Expand Down Expand Up @@ -482,7 +480,8 @@ class PropertiesPanel : public Component {
};

struct BoolComponent : public PropertiesPanelProperty
, public Value::Listener {
, public Value::Listener
{
BoolComponent(String const& propertyName, Value& value, StringArray options)
: PropertiesPanelProperty(propertyName)
, textOptions(std::move(options))
Expand Down Expand Up @@ -593,6 +592,167 @@ class PropertiesPanel : public Component {
StringArray textOptions;
Value toggleStateValue;
};

struct InspectorBoolComponent : public BoolComponent
{
using BoolComponent::BoolComponent;

void paint(Graphics& g) override
{
bool isDown = getValue<bool>(toggleStateValue);

auto bounds = getLocalBounds().toFloat().removeFromRight(getWidth() / (2.0f - hideLabel));
auto buttonBounds = bounds.reduced(6);

auto contrast = isDown ? 0.2f : 0.05f;
if(isMouseOver()) contrast += 0.025;
// Add some alpha to make it look good on any background...
g.setColour(findColour(PlugDataColour::sidebarActiveBackgroundColourId).contrasting(contrast).withAlpha(0.3f));
g.fillRoundedRectangle(buttonBounds, Corners::defaultCornerRadius);

auto textColour = findColour(PlugDataColour::panelTextColourId);

if (!isEnabled()) {
textColour = findColour(PlugDataColour::panelTextColourId).withAlpha(0.5f);
}
Fonts::drawText(g, textOptions[isDown], bounds, textColour, 14.0f, Justification::centred);

// Paint label
PropertiesPanelProperty::paint(g);
}

PropertiesPanelProperty* createCopy() override
{
return new InspectorBoolComponent(getName(), toggleStateValue, textOptions);
}

};

struct InspectorColourComponent : public PropertiesPanelProperty
, public Value::Listener {

struct SwatchComponent : public Component {

explicit SwatchComponent(Value const& colour)
{
colourValue.referTo(colour);
}

void paint(Graphics& g) override
{
auto colour = Colour::fromString(colourValue.toString());

g.setColour(isMouseOver() ? colour.brighter(0.4f) : colour);
g.fillRoundedRectangle(getLocalBounds().toFloat(), Corners::defaultCornerRadius);
g.setColour(colour.darker(0.2f));
g.drawRoundedRectangle(getLocalBounds().toFloat(), Corners::defaultCornerRadius, 0.8f);
}

void mouseEnter(MouseEvent const& e) override
{
repaint();
}

void mouseExit(MouseEvent const& e) override
{
repaint();
}

Value colourValue;
};

InspectorColourComponent(String const& propertyName, Value& value)
: PropertiesPanelProperty(propertyName)
, swatchComponent(value)
{

currentColour.referTo(value);
setWantsKeyboardFocus(true);

currentColour.addListener(this);

swatchComponent.setInterceptsMouseClicks(false, false);
addAndMakeVisible(swatchComponent);

addAndMakeVisible(hexValueEditor);
hexValueEditor.setJustificationType(Justification::centred);
hexValueEditor.setInterceptsMouseClicks(false, true);

hexValueEditor.onEditorShow = [this](){
hexValueEditor.getCurrentTextEditor()->setInputRestrictions(7, "#0123456789ABCDEFabcdef");
};

hexValueEditor.onEditorHide = [this]() {
colour = String("ff") + hexValueEditor.getText().substring(1).toLowerCase();
currentColour.setValue(colour);
};

hexValueEditor.onTextChange = [this]() {
colour = String("ff") + hexValueEditor.getText().substring(1).toLowerCase();
};

updateHexValue();

setLookAndFeel(&LookAndFeel::getDefaultLookAndFeel());

repaint();
}

~InspectorColourComponent() override
{
currentColour.removeListener(this);
}

PropertiesPanelProperty* createCopy() override
{
return new InspectorColourComponent(getName(), currentColour);
}

void updateHexValue()
{
hexValueEditor.setColour(Label::textColourId, Colour::fromString(currentColour.toString()).contrasting(0.95f));
hexValueEditor.setText(String("#") + currentColour.toString().substring(2).toUpperCase(), dontSendNotification);
}

void resized() override
{
auto bounds = getLocalBounds().removeFromRight(getWidth() / (2 - hideLabel)).reduced(6);
swatchComponent.setBounds(bounds);
hexValueEditor.setBounds(bounds);
}

void valueChanged(Value& v) override
{
if (v.refersToSameSourceAs(currentColour)) {
updateHexValue();
repaint();
}
}

void mouseUp(MouseEvent const& e) override
{
if(e.getNumberOfClicks() == 2)
{
hexValueEditor.showEditor();
}
else {
auto pickerBounds = getScreenBounds().expanded(5);
ColourPicker::getInstance().show(getTopLevelComponent(), false, Colour::fromString(currentColour.toString()), pickerBounds, [_this = SafePointer(this)](Colour c) {
if (!_this)
return;

_this->currentColour = c.toString();
_this->repaint();
});
}
}

private:
SwatchComponent swatchComponent;
Value currentColour;
Value colour;
Label hexValueEditor;
};

struct ColourComponent : public PropertiesPanelProperty
, public Value::Listener {
Expand Down Expand Up @@ -1137,6 +1297,11 @@ class PropertiesPanel : public Component {
{
panelColour = newPanelColourId;
}

void setPanelAlpha(float panelTransparency)
{
panelAlpha = panelTransparency;
}

void setSeparatorColour(int newSeparatorColourId)
{
Expand Down Expand Up @@ -1185,8 +1350,9 @@ class PropertiesPanel : public Component {
TitleAlignment titleAlignment = AlignWithSection;
int panelColour;
int separatorColour;
float panelAlpha = 1.0f;
bool drawShadowAndOutline = true;
int titleHeight = 26;
int titleHeight = 28;
int contentWidth = 600;
BouncingViewport viewport;
PropertyHolderComponent* propertyHolderComponent;
Expand Down
4 changes: 2 additions & 2 deletions Source/LookAndFeel.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -833,12 +833,12 @@ void PlugDataLook::drawPropertyComponentLabel(Graphics& g, int width, int height
auto indent = jmin(10, component.getWidth() / 10);

auto colour = component.findColour(PropertyComponent::labelTextColourId)
.withMultipliedAlpha(component.isEnabled() ? 1.0f : 0.6f);
.withMultipliedAlpha(component.isEnabled() ? 0.72f : 0.3f);

auto textW = jmin(300, component.getWidth() / 2);
auto r = Rectangle<float>(textW, 0, component.getWidth() - textW, component.getHeight() - 1);

Fonts::drawFittedText(g, component.getName(), indent, r.getY(), r.getX(), r.getHeight(), colour, 1, 1.0f, (float)jmin(height, 24) * 0.65f, Justification::centredLeft);
Fonts::drawFittedText(g, component.getName(), indent + 2, r.getY(), r.getX(), r.getHeight(), colour, 1, 1.0f, (float)jmin(height, 24) * 0.65f, Justification::centredLeft);
}

void PlugDataLook::drawPropertyPanelSectionHeader(Graphics& g, String const& name, bool isOpen, int width, int height)
Expand Down
4 changes: 2 additions & 2 deletions Source/Objects/AtomHelper.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ class AtomHelper {
objectParameters.addParamCombo("Font height", cDimensions, &fontSize, { "auto", "8", "10", "12", "16", "24", "36" });
objectParameters.addParamReceiveSymbol(&receiveSymbol);
objectParameters.addParamSendSymbol(&sendSymbol);
objectParameters.addParamString("Label", cLabel, &labelText, "");
objectParameters.addParamCombo("Label Position", cLabel, &labelPosition, { "left", "right", "top", "bottom" });
objectParameters.addParamString("Text", cLabel, &labelText, "");
objectParameters.addParamCombo("Position", cLabel, &labelPosition, { "left", "right", "top", "bottom" });
}

void update()
Expand Down
22 changes: 9 additions & 13 deletions Source/Objects/IEMHelper.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,7 @@ class IEMHelper {
gui->getLookAndFeel().setColour(Slider::backgroundColourId, sliderBackground);

if (auto iemgui = ptr.get<t_iemgui>()) {
labelX = iemgui->x_ldx;
labelY = iemgui->x_ldy;
labelPosition = VarArray { var(iemgui->x_ldx), var(iemgui->x_ldy) };
}

labelHeight = getFontHeight();
Expand Down Expand Up @@ -85,11 +84,10 @@ class IEMHelper {
params.addParamReceiveSymbol(&receiveSymbol);
params.addParamSendSymbol(&sendSymbol);
}
params.addParamString("Label", cLabel, &labelText, "");
params.addParamString("Text", cLabel, &labelText, "");
params.addParamColourLabel(&labelColour);
params.addParamInt("Label X", cLabel, &labelX, labelPosX);
params.addParamInt("Label Y", cLabel, &labelY, labelPosY);
params.addParamInt("Label Height", cLabel, &labelHeight, labelHeightY);
params.addParamRange("Position", cLabel, &labelPosition, {labelPosX, labelPosY});
params.addParamInt("Height", cLabel, &labelHeight, labelHeightY);
params.addParamBool("Initialise", cGeneral, &initialise, { "No", "Yes" }, 0);

return params;
Expand Down Expand Up @@ -176,8 +174,7 @@ class IEMHelper {
}
case hash("label_pos"): {
if (atoms.size() >= 2) {
gui->setParameterExcludingListener(labelX, static_cast<int>(atoms[0].getFloat()));
gui->setParameterExcludingListener(labelY, static_cast<int>(atoms[1].getFloat()));
gui->setParameterExcludingListener(labelPosition, VarArray { var(atoms[0].getFloat()), var(atoms[1].getFloat()) });
gui->updateLabel();
}
return true;
Expand Down Expand Up @@ -246,8 +243,8 @@ class IEMHelper {
} else if (v.refersToSameSourceAs(labelColour)) {
setLabelColour(Colour::fromString(labelColour.toString()));
gui->updateLabel();
} else if (v.refersToSameSourceAs(labelX) || v.refersToSameSourceAs(labelY)) {
setLabelPosition({ getValue<int>(labelX), getValue<int>(labelY) });
} else if (v.refersToSameSourceAs(labelPosition)) {
setLabelPosition({ labelPosition.getValue().getArray()->getReference(0), labelPosition.getValue().getArray()->getReference(1) });
gui->updateLabel();
} else if (v.refersToSameSourceAs(labelHeight)) {
gui->limitValueMin(labelHeight, 4.f);
Expand Down Expand Up @@ -538,9 +535,8 @@ class IEMHelper {
Value secondaryColour = SynchronousValue();
Value labelColour = SynchronousValue();

Value labelX = SynchronousValue(0.0f);
Value labelY = SynchronousValue(0.0f);
Value labelHeight = SynchronousValue(18.0f);
Value labelPosition;
Value labelHeight = SynchronousValue();
Value labelText = SynchronousValue();

Value initialise = SynchronousValue();
Expand Down
5 changes: 2 additions & 3 deletions Source/Objects/NumberObject.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,9 @@ class NumberObject final : public ObjectBase {
objectParameters.addParamColourBG(&iemHelper.secondaryColour);
objectParameters.addParamReceiveSymbol(&iemHelper.receiveSymbol);
objectParameters.addParamSendSymbol(&iemHelper.sendSymbol);
objectParameters.addParamString("Label", cLabel, &iemHelper.labelText, "");
objectParameters.addParamString("Text", cLabel, &iemHelper.labelText, "");
objectParameters.addParamColourLabel(&iemHelper.labelColour);
objectParameters.addParamInt("Label X", cLabel, &iemHelper.labelX, 0);
objectParameters.addParamInt("Label Y", cLabel, &iemHelper.labelY, -8);
objectParameters.addParamRange("Position", cLabel, &iemHelper.labelPosition, {0, -8});
objectParameters.addParamBool("Initialise", cGeneral, &iemHelper.initialise, { "No", "Yes" }, 0);

input.setResetValue(0.0f);
Expand Down
6 changes: 3 additions & 3 deletions Source/Objects/ObjectParameters.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,17 +111,17 @@ class ObjectParameters {

void addParamColourFG(Value* pVal)
{
objectParameters.add(makeParam("Foreground color", tColour, cAppearance, pVal, StringArray(), PlugDataColour::canvasTextColourId));
objectParameters.add(makeParam("Foreground", tColour, cAppearance, pVal, StringArray(), PlugDataColour::canvasTextColourId));
}

void addParamColourBG(Value* pVal)
{
objectParameters.add(makeParam("Background color", tColour, cAppearance, pVal, StringArray(), PlugDataColour::guiObjectBackgroundColourId));
objectParameters.add(makeParam("Background", tColour, cAppearance, pVal, StringArray(), PlugDataColour::guiObjectBackgroundColourId));
}

void addParamColourLabel(Value* pVal)
{
objectParameters.add(makeParam("Label color", tColour, cLabel, pVal, StringArray(), PlugDataColour::canvasTextColourId));
objectParameters.add(makeParam("Color", tColour, cLabel, pVal, StringArray(), PlugDataColour::canvasTextColourId));
}

void addParamReceiveSymbol(Value* pVal)
Expand Down
Loading

0 comments on commit fd125d3

Please sign in to comment.