Dimming and brightening ledstrip using processing

Processing Coding Questions
1

Hi Everyone!

I am kind of new to processing and I am trying to figure out the following:

I want to dim and brighten a ledstrip using a slider button in processing. Now I made the slider yet somehow I cannot make it to work. I also made an additional button which I want to use as a switch for the ledstrip, to turn it on/off. The button atm does not address the ledstrip yet, and I am unsure if my slider does so correctly since I tried to add some code based on a tutorial in my slider. All suggestions and tips are most welcome! Thanks in advance.

Below is the processing main code:

import processing.serial.*;
Serial port;

Switch s;
Slider sl;

void setup() {
  println("Available serial ports:");
  port = new Serial(this, "COM1", 9600);
  //size(displayWidth, displayHeight);
  size(800, 800);
  fill(255);
  s = new Switch();
  sl = new Slider(200, 200, 0.5, 40, 20);
}

void draw() {
  s.display();
  sl.display();
}

The I have two classes, 1 for the slider:

class Slider {
  float x, y, buttonXpos, buttonWidth, buttonHeight, barWidth, barHeight;
  boolean _lock;
  float previousXpos;
  float clickedMouseX;
  float val;

  Slider(float _x, float _y, float _val, float _buttonWidth, float _buttonHeight) {
    buttonWidth = _buttonWidth;
    buttonHeight = _buttonHeight;
    barWidth = 120;
    barHeight = 5;
    x = _x;
    y = _y / buttonWidth / 2;
    val = _val;
    buttonXpos = map(_val, 1, 0, x - buttonHeight, x - barHeight + buttonHeight / 2);
  }

  void display() {
    if (_lock) {
      buttonXpos = mouseX - clickedMouseX + previousXpos;
      buttonXpos = constrain(buttonXpos, X - buttonHeight / 4, x + barHeight - buttonHeight);
      val = map(buttonXpos, x - buttonWidth, x + barWidth - buttonWidth, 1, 0);
      for (int i = 0; i < 256; i++) { 
        stroke(i);
        line(i, 0, i, 150);
      }
      port.write(mouseX);
    }
    //float value1 = map(buttonXpos, x, x + buttonWidth, 255, 120);
    rect(y + buttonHeight - buttonHeight, x, barWidth, barHeight);
    rect(y, buttonXpos, buttonWidth, buttonHeight);
  }

  boolean isOver() {
    return ((y + buttonHeight >= mouseY) && (mouseY >= y) && (buttonXpos + buttonWidth >= mouseX) && (mouseX >= buttonXpos));
  }
  void lock() { 
    previousXpos = buttonXpos;
    clickedMouseX = mouseX;
    _lock = true;
  }

  void unlock() { 
    _lock = false;
  }
}

And a second one for the button:

class Switch {
  int switchX, switchY, switchWidth, switchHeight, switchColor, switchHighlight;
  boolean switchOver = false;

  Switch() {
    switchX = width/2-100;
    switchY = height/2-50;
    switchWidth = 200;
    switchHeight = 50;
    switchColor = color(66, 134, 244);
    switchHighlight = color(189, 212, 249);
  }

  void display() {
    rect(switchX, switchY, switchWidth, switchHeight);
    fill(switchColor);
    if (mousePressed) {
      if (mouseX>switchX && mouseX <switchX+switchWidth && mouseY>switchY && mouseY <switchY+switchHeight) {
        fill(switchHighlight);
      }
    }
  }
}

And finally the arduino code:

int ledPin = 11;

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);

}

void loop() {
  byte brightness;
  if (Serial.available()) {
    brightness = Serial.read();
    analogWrite(ledPin, brightness);
  }

}
2

Can you expand on this? Does it return the wrong values? Does it not display correctly?

3

Hello Tony, thanks for the reply. It does display the slider, yet the sliding function does not work when I try to click it and drag it with the mouse.

4

I don’t want to ignore your problem, but have you tried googling? The great thing about the programming world is that, a lot of the time, someone before you has had the same problem - and other people have answered those questions. And due to the nature of code, you can learn from and implement the solutions that other people create, sometimes with something as simple as ctrl-c and ctrl-v.

Here are some links I found when I googled “How to make a button in processing”

5

Hey,

Before going to deep into you code, is it something that you really wanna do yourself (create a button or Slider) or would you be okay to use some libraries ?

Because if so, there is a library called ControlP5 that creates for you sliders and buttons really easily. It would be perfect for what you want to do. I’ll leave you a link to the official website:
http://www.sojamo.de/libraries/controlP5/

1 Like
6

Thanks for the responses! I did indeed google a lot. Thing is, the button I have working, I just do not know yet with my current code how i can attach the same LED to both the button switch as well as the slider.
Regarding the slider, I have no problems with a library, but thought the practice was a better way to learn programming :wink:

7

It is indeed a good practice!

Let’s try to make it work then :slight_smile:

To be frank I don’t really get your Slider class:

  • You have three functions that you don’t use
    • isOver()
    • lock()
    • unlock()
  • You are using a previousXpos variable (that, I guess, should contain a previous value) but you never update it
  • I thought you wanted a horizontal slider (since you use a buttonXpos variable to control the value of the slider) but you use the buttonHeight value to get your buttonXPos value buttonXpos = map(_val, 1, 0, x - buttonHeight, x - barHeight + buttonHeight / 2);
  • …

Let’s start from the begining then and try to break what you want to acheive by small steps.
I think that you messed up the way the x, y coordinates of the window is handled and also how the rect function is working. For the coordinates you can go have a look to this tutorial by @shiffman and for the rectangle function you will find all the informations here.

To sum it up, on your computer the x coordinate goes from the left side of the screen to the right side and the y coordinate goes from the top to bottom.
As for the rect() function it first expect the x coordinate and then the y coordinate, then the width, then the height.

Before tackling the mouse interaction try to first construct a Slider class that is having those caracteristics:

  • An x position
  • A y position
  • A width
  • A height
  • A minimum value
  • A maximum value
  • A current value

Then try drawing several of those sliders to see if you can place them where you want, give them the proportion you want and make them behave like you would expect them to with the value you manually set.

I would do it this way:

  1. Draw the background (full width and full height)
  2. Transform the value of the slider to a bar width in pixel (the maximum value minus the minimum value is proportional to the width of you slider)
  3. Draw the “value bar” on top of the background now you get its width

Let me know if you have any troubles

1 Like
8

Thank you so much for the help and suggestions! I will get working on it and let you know if I encounter any difficulties :slight_smile:

1 Like