# Dimming and brightening ledstrip using processing

**URL:** <https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269>\
**Category:** Coding Questions\
**Created:** [August 1, 2018, 3:04pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269 "2018-08-01T15:04:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![morganruben](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@morganruben](https://discourse.processing.org/u/morganruben)\
**Post date:** [August 1, 2018, 3:04pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/1 "2018-08-01T15:04:36Z")

</div>

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:

```auto
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:

```auto
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:

```auto
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:

```auto
int ledPin = 11;

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

}

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

}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 1, 2018, 4:02pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/2 "2018-08-01T16:02:20Z")

</div>

> [@morganruben](#):
>
> Now I made the slider yet somehow I cannot make it to work

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

---

<div class="post-metadata">

**Author:** ![morganruben](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@morganruben](https://discourse.processing.org/u/morganruben)\
**Post date:** [August 1, 2018, 4:07pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/3 "2018-08-01T16:07:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 1, 2018, 4:33pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/4 "2018-08-01T16:33:14Z")

</div>

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”

> **[A Simple Button for Processing Language Code | Starting Electronics Blog](https://blog.startingelectronics.com/a-simple-button-for-processing-language-code/)**
>
> A button to use in the window of a Processing application (processing.org). The simple processing button class is easy for beginners to understand and use.

> <https://stackoverflow.com/questions/21608367/processing-a-simple-button>

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 1, 2018, 5:00pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/5 "2018-08-01T17:00:44Z")

</div>

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/](http://www.sojamo.de/libraries/controlP5/)

---

<div class="post-metadata">

**Author:** ![morganruben](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@morganruben](https://discourse.processing.org/u/morganruben)\
**Post date:** [August 1, 2018, 9:06pm UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/6 "2018-08-01T21:06:21Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 2, 2018, 6:54am UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/7 "2018-08-02T06:54:25Z")

</div>

It is indeed a good practice!

Let’s try to make it work then 🙂

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](https://processing.org/tutorials/drawing/) by @shiffman and for the rectangle function you will find all the informations [here](https://processing.org/reference/rect_.html).

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

---

<div class="post-metadata">

**Author:** ![morganruben](https://avatars.discourse-cdn.com/v4/letter/m/9e8a1a/32.png) [@morganruben](https://discourse.processing.org/u/morganruben)\
**Post date:** [August 3, 2018, 7:00am UTC](https://discourse.processing.org/t/dimming-and-brightening-ledstrip-using-processing/2269/8 "2018-08-03T07:00:35Z")

</div>

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