[STALLED] Iris 16 - Building an RGB power button

[iFreilicht]

Update! Visualizer 0.1 release and lookout on online configurator!

Today, I proudly present version 0.1 of the Freilite Iris Visualizer, an online tool to try out potential configurations.

This version is by no means final, but it's a good framework for testing what's possible and what isn't with the data format I'm planning to use. (Big thanks to XeaLouS for his ideas on this!) As usual, feedback of any kind is very welcome!

In the future, this will be extended into an online configurator tool, so you won't have to install any software to modify the animations. More on that below.

Basic functionality:

TL;DR: Just try it out, it's fun!

On the left, you can see the live preview, on the right is the configuration UI, where you can modify Cues. Cues consist of multiple parameters that define how the LEDs change colour and are the basic building blocks of animations. In the future, you'll be able to chain multiple Cues together into Cue Lists.
Right now, only a single cue can be displayed at any given time. The parameters of each Cue are as follows (more will follow in the future):

• Start Color: Colour each LED will start its transition at.
• End Color: Colour each LED will end its transition at.The hue of this colour is capped at 359° in the visualiser to make it easier to achieve the rainbow animation you can see above.
• Duration: Time one full cycle of the animation will take. When the Time Divisor is lowered, this value should be increased to keep the same velocity.
• Time Divisor: Describes the value the Duration is divided by to calculate the temporal offset between neighbouring LEDs. Basically, this means that each LED counterclockwise of its neighbour will reach the End Colour earlier by (Duration/Time Divisor). This means that if a single dot is displayed, you can just reduce the Time Divisor to 6 to see two dots, 4 to see three dots and so on.
• Ramp Type: Specifies how the transition between Start Color and End Color is calculated. Currently, there are only three options. They are explained below.
• Ramp Parameter: Changes the behaviour of the Ramp Type. The basic concept is that it changes which time the "peak" of the functions happens at, but the practical implications are different for each Ramp Type.
• Reverse: Self explanatory.

The three Ramp Types are explained below. In the future, they will be illustrated in the Visualizer to make them easier to understand.

• Linear HSL: Moves on a linear path through the HSL colourspace, first from the Start Color to the End Color, and then back. I recommend this for most scenarios, especially when transitioning between two colours.
  The Ramp Parameter in this case specifies the position of the "peak" of the transition function. When it is 1, an LED will jump down to the Start Color immediately after reaching the End Color. When it is 0.5, it will take equal time to transition forth and back. Try it out to see if you can tell the difference! If you're coming from a music background, you can also think of it as the ratio between attack and release if decay and sustain are both 0.
• Linear RGB: Included for comparisons sake. In some cases this will also look better when transitioning between a regular colour and black or white. The Ramp Parameter has no effect in version 0.1, I just couldn't get it to work properly.
• Jump: Just jumps from Start Color to End Color and then back down. Very simple effect, I'm personally not really a fan of it, but it can look quite cool with a Ramp Parameter of 0.5 and lower Time Divisors. The Ramp Parameter works similarly as before, but it effectively changes the width of the spinning dot.

Wow, that was quite a bit of information. So, where will this go in the future?

 

Future Online configurator:

In the future, you will be able to download an animation you've designed on the Visualizer as a .hex file. The Iris 16 will be acting as a Mass Storage device similar to an SD card or Flash drive. To load the animation onto it, you simply open it in your file manager and copy the .hex file directly onto it. This means that you will not need to install any additional software and that the Iris 16 will be usable on every OS on the planet, no matter how obscure.

Additionally, none of this will be required after setting the button up once. All animations are stored on the Iris 16 itself, so even when putting it in a different machine, all the animations will be just where they were.
It will also be possible to upload a previously stored animation to modify it again. This means that you need no online account and don't have to enable cookies to save animations. And, you can share them with others in any way imaginable. Via e-mail, Pastebin, Google drive, even morse code if you're so inclined.

Makes you wonder why not more companies do it this way.

Thanks for reading and have fun breaking my software!

I'll implement downloading animations as soon as possible so you can start sharing your ideas.

[iFreilicht]

Update! Version 0.1.1 is out!

For this version, I replaced the stock colour picker with a custom one that also displays how the colour moves through the Hue-Luminosity-Plane. This should give a better understanding of how changing the parameters influences the colour transitions.

 

To use it, just grab either end of the transition line with your mouse. All colours will be changed live with almost no delay. The transition line will also change its colour to remain visible at all times.

 

Try it out here!

Saturation can't be modified with this system for now, it is at 100% constantly. While it's easy to pick a point on a plane with a mouse (or touch device), doing the same thing in a 3D space is much harder, especially when it should be possible to pick an arbitrary number of points, so I still need to figure out a good UI solution for that.

 

I am aware that the moving display dot wobbles when the transition line is at odd angles. That's because it is manually redrawn onto a canvas element for each frame, which doesn't support sub-pixel positioning. The solution to this are CSS animations, but that makes live updating much harder, so I didn't implement it yet.

 

Let me know what you think and stay tuned!

[The Benjamins]

When you are getting hyped for a button \o/

[iFreilicht]

On 2017-5-1 at 11:03 PM, The Benjamins said:

When you are getting hyped for a button \o/

Thanks man, much appreciated!

 

Update! New Weekend, new version! 0.1.2 is here.

Very major feature this time, see if you can spot it:

 

Try it out here!

 

Changelog:

• Multiple Cues can now be created and switched between
• Added example Cues
• All Cues can be saved to a formatted JSON file using the "Save" button
• JSON files previously saved can now be loaded into the visualizer using the "Load" button
• Seldom used options can now be found under "More Options"
• Options that don't apply to the current "Ramp Type" are hidden automatically
• The Colour Indicator moves very smoothly now, even on inclined paths
• A new option "Wrap Hue" has been added for Ramp Type "Linear HSL"

More details:
Cue management!
The first few options are obviously the showpiece. You can click through the examples to see how the different options can be put to use, delete cues and add new ones.

 

If you like what you made and want to save it or even share it with others, you can use the "Save" button to store a human-readable JSON file to your device. To share it, you can then upload the file to googledrive or dropbox, or even post the raw data to pastebin or a forum directly. To load a JSON file, simply click the "Load" button and select the file you want to use.

 

Both loading and saving are done client-side, so no matter how crappy your internet connection or how large the file you want to load/save, everything will happen almost instantaneously and without my server being involved. You can even use this functionality if your internet connection breaks, as long as you don't reload the page.

 

More options!
The "More Options" button will be used in the future for more obscure options that not everyone is going to be interested in. Right now, that's only the Time Divisor. Also, as you're changing the Ramp Type, the options Ramp Parameter and Wrap Hue will be hidden if they don't apply to your selection. This also gives me the option to integrate more complicated Ramp Types in the future that need more parameters than just these two.

 

The Wrap Hue option is an important addition. It will force the colour transition to cross the 360° boundary, allowing you (as shown in the picture above) to transition from pink to yellow without crossing blue or green. This now allows all possible colour transitions on the HL plane.

The way it works right now is a little counter-intuitive, but I'm not sure what a better solution could be. Basically, it will always force the line to go from the Start Colour to 360°, then jump over to the other side to 0° and go to the End Colour from there. If you want to go the opposite way, re-positioning the colour nodes won't work, you have to set the Ramp Parameter to 0. This might be very confusing for someone who doesn't understand what that parameter does, and the effects this oddity allows you to make will also be possible with Cue Lists in the future. Not sure how I can make this more user-friendly yet.

 

And I fixed the janky animation of the Colour Indicator. It looks so much nicer now.

 

Thanks for reading!

[The Benjamins]

1 hour ago, iFreilicht said:

Thanks man, much appreciated!

 

STUFF

Looks cool, make sure when it is released to have some pre designed lighting and simple mode for stupid people like me.

[iFreilicht]

Just now, The Benjamins said:

Looks cool, make sure when it is released to have some pre designed lighting and simple mode for stupid people like me.

Oh shit, I completely forgot to post the link. You can already try it out here: http://freilite.com/testing/iris-visualizer-0.1.2/

 

Are the pre-configured Cues on that link what you're talking about?

 

Or would you like something where you can select the kind of effect you want (rotating, pulsing) and then choose from just a few colours? I thought the UI as I made it was pretty simple to use and to play around with, I'm just going into a lot of detail when explaining it 

[The Benjamins]

3 minutes ago, iFreilicht said:

Oh shit, I completely forgot to post the link. You can already try it out here: http://freilite.com/testing/iris-visualizer-0.1.2/

 

Are the pre-configured Cues on that link what you're talking about?

 

Or would you like something where you can select the kind of effect you want (rotating, pulsing) and then choose from just a few colours? I thought the UI as I made it was pretty simple to use and to play around with, I'm just going into a lot of detail when explaining it 

Ya the cue's are nice. later on, maybe make a user submitted design site or something.

 

ya a simple UI and a full feature UI. (rotating, pulse) to make it easier for everyone to use and still allow advance users to fine tune their designs.

 

can't wait for the final product.

[iFreilicht]

2 minutes ago, The Benjamins said:

Ya the cue's are nice. later on, maybe make a user submitted design site or something.

Yes, I'd like to do something like that, but it's quite a bit more work than the simple web-app I'm doing right now.

 

3 minutes ago, The Benjamins said:

ya a simple UI and a full feature UI. (rotating, pulse) to make it easier for everyone to use and still allow advance users to fine tune their designs.

I'll see how I can integrate that, thanks a lot for the suggestion!

[SaDiablo81]

This is exactly what I'm after!

I'm surprised its not already a thing.

Any Idea yet when it'll be available?

 

[iFreilicht]

On 2017-6-8 at 9:03 PM, SaDiablo81 said:

This is exactly what I'm after!

I'm surprised its not already a thing.

Any Idea yet when it'll be available?

 

Well the initial idea was to have the first prototype ready by the end of May, but I haven't even received my first prototype part yet. At this point I'd want to say by the end of the year, but that does seem a little optimistic.

[The Benjamins]

1 hour ago, iFreilicht said:

Well the initial idea was to have the first prototype ready by the end of May, but I haven't even received my first prototype part yet. At this point I'd want to say by the end of the year, but that does seem a little optimistic.

what parts are you waiting for?

example circuit board, housing, board parts...

[pedromrs20]

If you were to do it with a simple led vandal switch (one of those with only one ring of light), how would you do it? I mean, adressable leds are amazing. But I don't need that to tie with my rgb build.

 

Amazing project you have here, by the way!

[SaDiablo81]

On 06/11/2017 at 8:41 AM, iFreilicht said:

At this point I'd want to say by the end of the year, but that does seem a little optimistic.

That's a shame, guess I'll have to make do with a standard one for now, I've put this project off for far too long as it is. I'll have to replace it later when they're available.

[iFreilicht]

On 6/11/2017 at 2:26 AM, The Benjamins said:

what parts are you waiting for?

example circuit board, housing, board parts...

PCB, but I'll be receiving it in a few days. This is what the whole project hinges on, as I don't know whether the LEDs will actually be bright enough the way I'm trying to multiplex them. If not, it's back to the drawing board.

 

On 6/11/2017 at 9:12 PM, pedromrs20 said:

If you were to do it with a simple led vandal switch (one of those with only one ring of light), how would you do it? I mean, adressable leds are amazing. But I don't need that to tie with my rgb build.

 

Amazing project you have here, by the way!

I'm not sure what you're referring to by "it", but you could get an adafruit vandal button like this one: https://www.adafruit.com/product/3350

It has three LEDs inside. Unfortunately, it is not compatible with the RGB LED strip headers some mainboards have today, as the button uses a common anode as opposed to the common cathode of LED strips. EDIT: This is actually not correct, 5050 LED strips and mainboards like the Asus AURA ones use a common anode, so this button would work perfectly fine.

 

On 6/12/2017 at 2:24 PM, SaDiablo81 said:

That's a shame, guess I'll have to make do with a standard one for now, I've put this project off for far too long as it is. I'll have to replace it later when they're available.

That's cool, go for it! Putting projects in the backlog is never fun, make it happen! If you want to keep the option of getting my button in the future, make sure to use a 16mm vandal switch now. I plan to make bigger versions as well but those will take even longer to develop, if they ever come out at all.

[iFreilicht]

Update! Version 0.2! Hardware is happening!

Hardware:

I received a notification from my manufacturer that they sent out the LED ring PCBs on Tuesday! So if all goes well I'll have something to show by the end of the weekend.

Software:

Version 0.2 is ready, click here to try it out!

(I really wanted to make this image a gif, but I didn't manage to record it properly)

 

Changelog:

• Added ability to create, edit and save Schedules, Periods and Delays
• Added options to modify a Cues name and Channels
• Revised UI a little
  

 

First off, if you still remember previous updates, Cue Lists are now called Schedules, and Cue List Items are Periods. Delays are a new mechanism and the name is subject to change.

 

To illustrate what these words mean, I marked all of them in the UI below.

 

So as you can see, a Schedule consists of Periods, which are described by a chain of Delays. A Schedule can display very complex animations, and uses multiple Cues to do that. One Period always corresponds to one Cue, which is toggled on or off when the black line passes a Delay. If a Period has zero Delays, the Cue will always be on.

This is a very effective way to describe all sorts of effects. Take a look at the example Schedules at the link above. You can make mirror gradients, bouncing dots, or turn on multiple LEDs at a time.

 

It took a long time to implement this, but now that it's done, it seems to be a very powerful way of characterising animations and I'm quite happy with how it works. If you try the visualizer out and find any bugs, please let me know!

[iFreilicht]

Update! LED rings arrived!

This is what I got, plus leftover parts from the assembly line. Quite a few failed attempts it seems.

 

That first break was so satisfying. I only broke out the unpopulated ones until I have the necessary equipment to test the others.

 

Sides come of first. Then the top is removed and the individual PCBs are broken out. I had to use strong pliers for the little bridges between the two rows.

 

Something I wanted to avoid: Leftover material outside the perimeter of the PCB. This means manual sanding is required before the whole unit can be assembled. I'll see whether I can fix this.

 

Just so you get an idea of the scale. The things are fucking tiny.

 

And this is what's left after breaking out one panel. The crossed out ones I'll keep for now, maybe I can troubleshoot the issue that caused manufacturing mishaps myself.

[TheRandomness]

The hype is already building up. I'd love to throw one of these at the breadbox

[iFreilicht]

Great to hear! I'll do my best to make this happen as quickly as possible

[iFreilicht]

Super-mini update:

 

Today I lay-outed, plotted and submitted for production a breakout PCB for the Iris 16 LED ring. I also ordered the necessary parts and some soldering equipment. To save money and time, I'll try to solder this one myself. Should be fun with a 20pin connector with 0.5mm pin pitch

 

If everything goes well, the first functional prototype will be done in two weeks! Then I check whether the LEDs will be bright enough with the multiplexing method I'm using. That is the final go/no go hurdle to pass. If it works out, everything else "just needs to be done", but can pretty much be guaranteed to succeed.

[lieder1987]

@iFreilicht are you self funding this?

[iFreilicht]

17 minutes ago, lieder1987 said:

@iFreilicht are you self funding this?

For now I am. But when time for production comes I'll do a crowdfunding campaign or group buy of sorts. Maybe I'll be able to break even, who knows? ¯\_(ツ)_/¯

 

 

[The Benjamins]

On 6/19/2017 at 5:11 AM, iFreilicht said:

Super-mini update:

 

Today I lay-outed, plotted and submitted for production a breakout PCB for the Iris 16 LED ring. I also ordered the necessary parts and some soldering equipment. To save money and time, I'll try to solder this one myself. Should be fun with a 20pin connector with 0.5mm pin pitch

 

If everything goes well, the first functional prototype will be done in two weeks! Then I check whether the LEDs will be bright enough with the multiplexing method I'm using. That is the final go/no go hurdle to pass. If it works out, everything else "just needs to be done", but can pretty much be guaranteed to succeed.

Have you soldered before, I use to solder under a microscope at the last place I work. 

 

For the 20 pin just glob on the solder and use the iron to move the solder or take some away, Don't try a pin by pin. 

[iFreilicht]

20 hours ago, The Benjamins said:

Have you soldered before, I use to solder under a microscope at the last place I work. 

 

For the 20 pin just glob on the solder and use the iron to move the solder or take some away, Don't try a pin by pin. 

I have, but this will be my first time drag soldering something this small. I've already watched a few tutorials on that, and I think I'll manage. It also helps that the connector has bosses that fit into holes in the PCB, so there's no risk of soldering it on crooked.

Thanks for the advice though, I appreciate it 

[The Benjamins]

3 minutes ago, iFreilicht said:

I have, but this will be my first time drag soldering something this small. I've already watched a few tutorials on that, and I think I'll manage. It also helps that the connector has bosses that fit into holes in the PCB, so there's no risk of soldering it on crooked.

Thanks for the advice though, I appreciate it 

I did that technique on surface mount IC's.

 

I can't wait to get a RGB button from you. 

[iFreilicht]

Hey @Hasle, hi @mrchow19910319, hope you enjoyed the read so far