Tag: JavaScript

PiRoom – LED Lighting [Update]

I tried and tried to get the Websocket working, but I just couldn’t get the thing to work. Back to Google.

I found a different source where the author got his code to work with the Pi, however it was made for a different purpose. After tweaking the code, I finally got what I have been trying to achieve for weeks:

Websocket Connected

Not only that, turns out my JavaScript was also working pretty nicely, and I was actually receiving the data values from the user as well:

Websocket Output

So far, this is looking good. I just need to make all the clients synchronous and parse the data above.

As always, all of my code and updates can be found on my github.

Basic Website: Sliders and Input Boxes

I’m still away form my Pi, but I was still working on my basic website. I wanted the sliders and the input boxes to be in accordance, so that there would be no code clashes in the future. To pull this off, I added this to my slider code:


<input id="ledRslider" name='ledRslider' type='range' min="0" max="255" step="5" class="ledSlider" oninput="ledSlider(this.value, 'R')">
<input id="ledGslider" name='ledGslider' type='range' min="0" max="255" step="5" class="ledSlider" oninput="ledSlider(this.value, 'G')">
<input id="ledBslider" name='ledBslider' type='range' min="0" max="255" step="5" class="ledSlider" oninput="ledSlider(this.value, 'B')">

The main thing to pay attention to is the


oninput="ledSlider(this.value, 'R')"

This bit of code sends the current value of the slider as well as the color of the slider to a Javascript function. The value part is obvious, but I also made the sliders send their color so that there could only be one function, opposed to three.

The corresponding JS function looks like so:


function ledSlider(val, color) {
    document.getElementById('led' + color + 'value').value = val;
}

As seen in the code above, the input box gets updated as the slider changes, and all of the input boxes will get changed to their corresponding slider, all with just one function.

So far, the end result looks like so:

Slider Gif

Now, I have to make a XMLHTTPRequest from the JS to the corresponding PHP, which will then execute the a command from the Pi, which will finally change how the lights work.

The party has just begun.