re-fine layout on UI, add new screenshot

This commit is contained in:
Armin 2026-07-15 18:29:49 +02:00
commit 5ac73bee25
2 changed files with 52 additions and 42 deletions

View file

@ -149,12 +149,12 @@ void ComboBoxLookAndFeel::drawPopupMenuItem(juce::Graphics& g, const juce::Recta
// --- VU Meter --- // --- VU Meter ---
void VuMeter::paint(juce::Graphics& g) { void VuMeter::paint(juce::Graphics& g) {
auto bounds = getLocalBounds().toFloat(); auto bounds = getLocalBounds().toFloat().reduced(0.5f);
juce::ColourGradient bgGrad(juce::Colour(0x99222222), bounds.getCentreX(), bounds.getY(), juce::ColourGradient bgGrad(juce::Colour(0xBB222222), bounds.getCentreX(), bounds.getY(),
juce::Colour(0x99111111), bounds.getCentreX(), bounds.getBottom(), false); juce::Colour(0xBB111111), bounds.getCentreX(), bounds.getBottom(), false);
g.setGradientFill(bgGrad); g.setGradientFill(bgGrad);
g.fillRoundedRectangle(bounds, 3.0f); g.fillRoundedRectangle(bounds, 9.0f);
float level = processor.getRmsLevel(); float level = processor.getRmsLevel();
float clamped = juce::jlimit(0.0f, 1.0f, level); float clamped = juce::jlimit(0.0f, 1.0f, level);
@ -164,6 +164,9 @@ void VuMeter::paint(juce::Graphics& g) {
{ {
juce::Graphics::ScopedSaveState saved(g); juce::Graphics::ScopedSaveState saved(g);
juce::Path clipPath;
clipPath.addRoundedRectangle(bounds, 9.0f);
g.reduceClipRegion(clipPath);
g.setOpacity(0.7f); g.setOpacity(0.7f);
juce::ColourGradient grad(juce::Colour(0xff00cc44), 0.0f, bounds.getBottom(), juce::ColourGradient grad(juce::Colour(0xff00cc44), 0.0f, bounds.getBottom(),
@ -172,8 +175,8 @@ void VuMeter::paint(juce::Graphics& g) {
g.fillRoundedRectangle(innerBar, 2.0f); g.fillRoundedRectangle(innerBar, 2.0f);
} }
g.setColour(juce::Colour(0xff444444)); g.setColour(juce::Colour(0xff333333));
g.drawRoundedRectangle(bounds, 3.0f, 1.0f); g.drawRoundedRectangle(bounds, 9.0f, 1.0f);
g.setColour(juce::Colour(0xffccaa44)); g.setColour(juce::Colour(0xffccaa44));
g.setFont(juce::Font(13.0f).boldened()); g.setFont(juce::Font(13.0f).boldened());
@ -182,15 +185,15 @@ void VuMeter::paint(juce::Graphics& g) {
// --- Waveform Display --- // --- Waveform Display ---
void WaveformDisplay::paint(juce::Graphics& g) { void WaveformDisplay::paint(juce::Graphics& g) {
auto bounds = getLocalBounds().toFloat(); auto bounds = getLocalBounds().toFloat().reduced(0.5f);
juce::ColourGradient bgGrad(juce::Colour(0x99222222), bounds.getCentreX(), bounds.getY(), juce::ColourGradient bgGrad(juce::Colour(0xBB222222), bounds.getCentreX(), bounds.getY(),
juce::Colour(0x99111111), bounds.getCentreX(), bounds.getBottom(), false); juce::Colour(0xBB111111), bounds.getCentreX(), bounds.getBottom(), false);
g.setGradientFill(bgGrad); g.setGradientFill(bgGrad);
g.fillRoundedRectangle(bounds, 3.0f); g.fillRoundedRectangle(bounds, 9.0f);
g.setColour(juce::Colour(0xff555555)); g.setColour(juce::Colour(0xff333333));
g.drawRoundedRectangle(bounds, 3.0f, 1.0f); g.drawRoundedRectangle(bounds, 9.0f, 1.0f);
g.setColour(juce::Colour(0xff333333)); g.setColour(juce::Colour(0xff333333));
g.drawLine(bounds.getX(), bounds.getCentreY(), bounds.getRight(), bounds.getCentreY(), 1.0f); g.drawLine(bounds.getX(), bounds.getCentreY(), bounds.getRight(), bounds.getCentreY(), 1.0f);
@ -224,6 +227,9 @@ void WaveformDisplay::paint(juce::Graphics& g) {
{ {
juce::Graphics::ScopedSaveState saved(g); juce::Graphics::ScopedSaveState saved(g);
juce::Path clipPath;
clipPath.addRoundedRectangle(bounds, 9.0f);
g.reduceClipRegion(clipPath);
g.setOpacity(0.7f); g.setOpacity(0.7f);
juce::ColourGradient waveGrad(juce::Colour(0xff00ff88), 0.0f, bounds.getY(), juce::ColourGradient waveGrad(juce::Colour(0xff00ff88), 0.0f, bounds.getY(),
@ -242,15 +248,15 @@ void WaveformDisplay::paint(juce::Graphics& g) {
// --- Spectrum Analyzer --- // --- Spectrum Analyzer ---
void SpectrumAnalyzer::paint(juce::Graphics& g) { void SpectrumAnalyzer::paint(juce::Graphics& g) {
auto bounds = getLocalBounds().toFloat(); auto bounds = getLocalBounds().toFloat().reduced(0.5f);
juce::ColourGradient bgGrad(juce::Colour(0x99222222), bounds.getCentreX(), bounds.getY(), juce::ColourGradient bgGrad(juce::Colour(0xBB222222), bounds.getCentreX(), bounds.getY(),
juce::Colour(0x99111111), bounds.getCentreX(), bounds.getBottom(), false); juce::Colour(0xBB111111), bounds.getCentreX(), bounds.getBottom(), false);
g.setGradientFill(bgGrad); g.setGradientFill(bgGrad);
g.fillRoundedRectangle(bounds, 3.0f); g.fillRoundedRectangle(bounds, 9.0f);
g.setColour(juce::Colour(0xff555555)); g.setColour(juce::Colour(0xff333333));
g.drawRoundedRectangle(bounds, 3.0f, 1.0f); g.drawRoundedRectangle(bounds, 9.0f, 1.0f);
std::array<float, ChromaFlockProcessor::fftSize * 2> fftData{}; std::array<float, ChromaFlockProcessor::fftSize * 2> fftData{};
int writePos = processor.fftWritePos.load(std::memory_order_acquire); int writePos = processor.fftWritePos.load(std::memory_order_acquire);
@ -275,6 +281,11 @@ void SpectrumAnalyzer::paint(juce::Graphics& g) {
float barW = w / static_cast<float>(numBars); float barW = w / static_cast<float>(numBars);
int maxBin = fftSize / 4; int maxBin = fftSize / 4;
juce::Graphics::ScopedSaveState savedClip(g);
juce::Path clipPath;
clipPath.addRoundedRectangle(bounds, 9.0f);
g.reduceClipRegion(clipPath);
for (int bar = 0; bar < numBars; ++bar) { for (int bar = 0; bar < numBars; ++bar) {
float t = static_cast<float>(bar) / static_cast<float>(numBars); float t = static_cast<float>(bar) / static_cast<float>(numBars);
float tNext = static_cast<float>(bar + 1) / static_cast<float>(numBars); float tNext = static_cast<float>(bar + 1) / static_cast<float>(numBars);
@ -795,8 +806,8 @@ void MainContentComponent::paint(juce::Graphics& g) {
auto rect = juce::Rectangle<float>(static_cast<float>(x), static_cast<float>(y), auto rect = juce::Rectangle<float>(static_cast<float>(x), static_cast<float>(y),
static_cast<float>(w), static_cast<float>(h)); static_cast<float>(w), static_cast<float>(h));
// 3D fill gradient: slight light top, dark bottom // 3D fill gradient: slight light top, dark bottom
juce::ColourGradient fillGrad(juce::Colour(0x99222222), rect.getCentreX(), rect.getY(), juce::ColourGradient fillGrad(juce::Colour(0xBB222222), rect.getCentreX(), rect.getY(),
juce::Colour(0x99111111), rect.getCentreX(), rect.getBottom(), false); juce::Colour(0xBB111111), rect.getCentreX(), rect.getBottom(), false);
g.setGradientFill(fillGrad); g.setGradientFill(fillGrad);
g.fillRoundedRectangle(rect, 9.0f); g.fillRoundedRectangle(rect, 9.0f);
// Border // Border
@ -805,20 +816,19 @@ void MainContentComponent::paint(juce::Graphics& g) {
}; };
drawSection(10, 128, 498, 200); drawSection(10, 128, 498, 200);
drawSection(520, 128, 620, 200); drawSection(518, 128, 624, 200);
drawSection(1152, 128, 498, 200); drawSection(1152, 128, 498, 200);
drawSection(75, 338, 498, 160); drawSection(75, 338, 498, 160);
drawSection(585, 338, 498, 160); drawSection(583, 338, 502, 160);
drawSection(1095, 338, 490, 160); drawSection(1095, 338, 490, 160);
drawSection(10, 818, 1640, 128);
drawSection(10, 956, 1640, 136); drawSection(10, 956, 1640, 136);
// FX sub-sections // FX sub-sections
auto drawSubSection = [&](int x, int y, int w, int h, const juce::String& title, int titlePadY = 2) { auto drawSubSection = [&](int x, int y, int w, int h, const juce::String& title, int titlePadY = 2) {
auto rect = juce::Rectangle<float>(static_cast<float>(x), static_cast<float>(y), auto rect = juce::Rectangle<float>(static_cast<float>(x), static_cast<float>(y),
static_cast<float>(w), static_cast<float>(h)); static_cast<float>(w), static_cast<float>(h));
juce::ColourGradient fillGrad(juce::Colour(0x99222222), rect.getCentreX(), rect.getY(), juce::ColourGradient fillGrad(juce::Colour(0xBB222222), rect.getCentreX(), rect.getY(),
juce::Colour(0x99111111), rect.getCentreX(), rect.getBottom(), false); juce::Colour(0xBB111111), rect.getCentreX(), rect.getBottom(), false);
g.setGradientFill(fillGrad); g.setGradientFill(fillGrad);
g.fillRoundedRectangle(rect, 9.0f); g.fillRoundedRectangle(rect, 9.0f);
g.setColour(juce::Colour(0xff333333)); g.setColour(juce::Colour(0xff333333));
@ -833,12 +843,12 @@ void MainContentComponent::paint(juce::Graphics& g) {
drawSubSection(1247, 508, 240, 140, "AUTO-PAN", 6); drawSubSection(1247, 508, 240, 140, "AUTO-PAN", 6);
// LFO sub-sections // LFO sub-sections
drawSubSection(15, 658, 530, 150, "LFO 1", 4); drawSubSection(10, 658, 540, 150, "LFO 1", 4);
drawSubSection(560, 658, 530, 150, "LFO 2", 4); drawSubSection(560, 658, 530, 150, "LFO 2", 4);
// FX2 sub-sections // FX2 sub-sections
drawSubSection(1100, 658, 265, 150, "DELAY", 4); drawSubSection(1100, 658, 265, 150, "DELAY", 4);
drawSubSection(1375, 658, 265, 150, "REVERB", 4); drawSubSection(1375, 658, 275, 150, "REVERB", 4);
} }
void MainContentComponent::resized() { void MainContentComponent::resized() {
@ -856,14 +866,14 @@ void MainContentComponent::resized() {
osc1FineKnob.setBounds(20 + (knobSize + knobSpacing) * 2, knobY1, knobSize, knobSize); osc1FineKnob.setBounds(20 + (knobSize + knobSpacing) * 2, knobY1, knobSize, knobSize);
osc1LevelKnob.setBounds(20 + (knobSize + knobSpacing) * 3, knobY1, knobSize, knobSize); osc1LevelKnob.setBounds(20 + (knobSize + knobSpacing) * 3, knobY1, knobSize, knobSize);
osc2Label.setBounds(520, sectionY, 620, labelH); osc2Label.setBounds(518, sectionY, 624, labelH);
osc2WaveBox.setBounds(530, sectionY + labelH + 4, 200, 36); osc2WaveBox.setBounds(528, sectionY + labelH + 4, 200, 36);
int knobY2 = sectionY + labelH + comboH + 8; int knobY2 = sectionY + labelH + comboH + 8;
osc2OctKnob.setBounds(530, knobY2, knobSize, knobSize); osc2OctKnob.setBounds(528, knobY2, knobSize, knobSize);
osc2SemiKnob.setBounds(530 + knobSize + knobSpacing, knobY2, knobSize, knobSize); osc2SemiKnob.setBounds(528 + knobSize + knobSpacing, knobY2, knobSize, knobSize);
osc2FineKnob.setBounds(530 + (knobSize + knobSpacing) * 2, knobY2, knobSize, knobSize); osc2FineKnob.setBounds(528 + (knobSize + knobSpacing) * 2, knobY2, knobSize, knobSize);
osc2LevelKnob.setBounds(530 + (knobSize + knobSpacing) * 3, knobY2, knobSize, knobSize); osc2LevelKnob.setBounds(528 + (knobSize + knobSpacing) * 3, knobY2, knobSize, knobSize);
phaseOffsetKnob.setBounds(530 + (knobSize + knobSpacing) * 4, knobY2, knobSize, knobSize); phaseOffsetKnob.setBounds(528 + (knobSize + knobSpacing) * 4, knobY2, knobSize, knobSize);
filterLabel.setBounds(1152, sectionY, 498, labelH); filterLabel.setBounds(1152, sectionY, 498, labelH);
filterTypeBox.setBounds(1162, sectionY + labelH + 4, 200, 36); filterTypeBox.setBounds(1162, sectionY + labelH + 4, 200, 36);
@ -880,12 +890,12 @@ void MainContentComponent::resized() {
envSustainKnob.setBounds(85 + (knobSize + knobSpacing) * 2, knobYA, knobSize, knobSize); envSustainKnob.setBounds(85 + (knobSize + knobSpacing) * 2, knobYA, knobSize, knobSize);
envReleaseKnob.setBounds(85 + (knobSize + knobSpacing) * 3, knobYA, knobSize, knobSize); envReleaseKnob.setBounds(85 + (knobSize + knobSpacing) * 3, knobYA, knobSize, knobSize);
fEnvLabel.setBounds(585, 342, 498, labelH); fEnvLabel.setBounds(583, 342, 502, labelH);
int knobYFE = 352 + labelH + 6; int knobYFE = 352 + labelH + 6;
fEnvAttackKnob.setBounds(595, knobYFE, knobSize, knobSize); fEnvAttackKnob.setBounds(593, knobYFE, knobSize, knobSize);
fEnvDecayKnob.setBounds(595 + knobSize + knobSpacing, knobYFE, knobSize, knobSize); fEnvDecayKnob.setBounds(593 + knobSize + knobSpacing, knobYFE, knobSize, knobSize);
fEnvSustainKnob.setBounds(595 + (knobSize + knobSpacing) * 2, knobYFE, knobSize, knobSize); fEnvSustainKnob.setBounds(593 + (knobSize + knobSpacing) * 2, knobYFE, knobSize, knobSize);
fEnvReleaseKnob.setBounds(595 + (knobSize + knobSpacing) * 3, knobYFE, knobSize, knobSize); fEnvReleaseKnob.setBounds(593 + (knobSize + knobSpacing) * 3, knobYFE, knobSize, knobSize);
globalLabel.setBounds(1095, 342, 490, labelH); globalLabel.setBounds(1095, 342, 490, labelH);
int knobYM = 352 + labelH + 6; int knobYM = 352 + labelH + 6;
@ -984,9 +994,9 @@ void MainContentComponent::resized() {
// Visualizer area // Visualizer area
int vizY = 818; int vizY = 818;
int vizH = 128; int vizH = 128;
vuMeter.setBounds(14, vizY, 40, vizH); vuMeter.setBounds(10, vizY, 40, vizH);
waveformDisplay.setBounds(60, vizY, 780, vizH); waveformDisplay.setBounds(60, vizY, 790, vizH);
spectrumAnalyzer.setBounds(850, vizY, 794, vizH); spectrumAnalyzer.setBounds(860, vizY, 790, vizH);
// Piano roll // Piano roll
pianoRoll.setBounds(10, 956, 1640, 136); pianoRoll.setBounds(10, 956, 1640, 136);

BIN
shot.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

Before After
Before After