Basic Website: The Framework

I currently don’t have access to my Pi, so I thought it would be better to make the website in the meanwhile. I want the led control board to kind of look like a throttle setup, where the user can change the RGB values with a scrubber as well as type in values as well. With only a couple of minutes, I came up with this code,

<div id="roomColorControl">
 <table>
   <tr>
     <td><center>R</center></td>
     <td><center>G</center></td>
     <td><center>B</center></td>
   </tr>
   <tr>
     <td><input id="ledRvalue" name="ledRvalue" class="ledValue" type="number" max="255" min="0"></td>
     <td><input id="ledGvalue" name="ledGvalue" class="ledValue" type="number" max="255" min="0"></td>
     <td><input id="ledBvalue" name="ledBvalue" class="ledValue" type="number" max="255" min="0"></td>
   </tr>
   <tr>
     <td><center><input id="ledRslider" name='ledRslider' type='range' min="0" max="255" step="5" class="ledSlider"></center></td>
     <td><center><input id="ledGslider" name='ledGslider' type='range' min="0" max="255" step="5" class="ledSlider"></center></td>
     <td><center><input id="ledBslider" name='ledBslider' type='range' min="0" max="255" step="5" class="ledSlider"></center></td>
   </tr>
 <table>
</div>

The reason why I went with a table format is that it will be easier to handle, and it gives me the ability to put the text box on top of the slider without much hassle in the CSS area.

Speaking of CSS, the slider’s default position is horizontal, and I had to make it vertical, so I added this into my CSS file:


.ledSlider {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

With a little CSS here and there, the result is this:

LED strip control basic

Now, with a little Javascript and PHP magic, hopefully this can be used to control the lights!

Smart Room Concept

I have been reading a lot of articles online, and I realized if I could combine all of them, I could really beef up the quality of my room.

So far, I have a couple of features that I would like to implement in this system:

  1. Natural Wake-Up Clock
  2. Mirror HUD
  3. Web Interface

A while back, I stumbled across a clock that would change the brightness of a room in order to simulate the rising sun (example). However, at $100, I couldn’t justify the cost. I decided that if I made one myself, I would be able to make it for cheaper, as well as make it more expandable.

I’m going to use a Raspberry Pi for this build, due to its very light resource requirements, and its versatility (plus, I won one from a hackathon, and I didn’t know what to do with it).

Instead of a little bulb, I’m going to replace the whole room lighting with an LED strip, which will be controlled by the Pi, which should be able to change the color and the brightness of the strip. Theoretically, I should be able to simulate the rising sun with this setup. Another added benefit is due to the LED strips having to be RGB (in order for me to control them), they will emit a blue light, which as recent studies have shown, will affect the levels of melatonin in my blood, and will help me wake up.

However, I’m aware of the irony of last statement. If I’m using blue LEDs to wake up, won’t it make sleeping a pain? I will also be implementing a f.lux like system to the lights, so that it will be a bit easier to sleep.

To manage all of this, I will have a web interface which would be able to control the Pi remotely from a phone. This gives me the benefit of closing the lights without having to get up from bed (something that happens too much), as well as basically controlling the whole room from my fingertips.

I also saw another post about a “magic mirror”, essentially a HUD on a mirror. If I can get the materials, I believe this could be a valuable addition to my project, as I could see stats about the other processes running, as well as auxiliary information such as weather, time, etc.

These are some ideas which I would love to do, but I don’t know if I will be able to get to it:

  • Have the whole room voice controlled – that’s a whole other level of coolness
    • Have a natural AI for the voice control (like JARVIS) – that a whole other other level of awesomeness
  • Try to incorporate a leap motion like system on the mirror to have a responsive mirror
  • Have a music system setup so I can flash the lights to the whole room to the beat