HueIce Live

21 Responses

  1. Kevin Andersson Kevin Andersson

    While working with the unofficial Philips Hue API, another idea appeared to me. What if I could take a live videofeed, calculate the average color, convert it to HSL, and send it to any connected hue bulbs? Well, I would have one big-ass Ambilight setup, that is what!

    After a couple of hours coding tonight, mainly working on pixel selection, I got a prototype up and running.

    I plan to sell this for around 5$, do you think that is reasonable?

    Videos of the prototype:


    Pixar trailer test


    Let me know what you guys think :)


    about 1 year ago

  2. Tristan L'Abbé Tristan L'Abbé

    Thats genius man. Awesome.

    about 1 year ago

  3. Kai Aras Kai Aras

    Nice! What did you implement it in? I'm basically doing the exact same thing on iOS :-)

    Early Ambify Video Demo


    about 1 year ago

  4. Kevin Andersson Kevin Andersson

    @Kai Aras that looks great mate! I used Adobe Air, as I've been coding in AS3 for years now. How often do you poke the api to get your transitions working?


    about 1 year ago

  5. Kai Aras Kai Aras

    @Kevin Andersson well, keep it up, look great so far! How do you process the frames? I've tried extracting multiple colours but simply using the average color seemed to work best. I used an interval of .5 seconds I think. It's been a while though, been focusing on the music part for now.


    about 1 year ago

  6. Kevin Andersson Kevin Andersson

    @Kai Aras thank you. I am currently sampling from a user-selected area (which you can see in the first video).

    I also tried with several samples, but one sample works the best. For movies, sampling either the corner area, or center gives a really nice effect.


    about 1 year ago

  7. Kai Aras Kai Aras

    @Kevin Andersson ah, overlooked that first part. Can't wait to see more!

    about 1 year ago

  8. Kevin Andersson Kevin Andersson

    @Kai Aras ah! Just fixed a major issue with my brightness calculation, now it works great. Let me see if I can't shoot another video!

    about 1 year ago

  9. Pausrr Pausrr

    Thats great.!!! I had a same idea when Hue was launched but I'm only designer and dont have developer to do that:-)

    about 1 year ago

  10. Kevin Andersson Kevin Andersson

    Making quite a lot of progress on the live feed for hue.


    about 1 year ago

  11. Evan Dinsmore Evan Dinsmore

    Nice, I'm doing something similar (or trying) with a native Mac toolbar app, but it's my first time diving into Objective-C, so it's more of an experiment than anything. I hope to use it while gaming to get more atmosphere. :)

    about 1 year ago

  12. Doney den Ouden Doney den Ouden

    Very cool, aside from the fact that the one second lag would drive me crazy.

    about 1 year ago

  13. Kevin Andersson Kevin Andersson

    @Doney den Ouden it was basically a proof of concept. I've coding everything from scratch this morning, and is has a way better response rate now. I'll see if I can upload something later.

    about 1 year ago

  14. Doney den Ouden Doney den Ouden

    @Kevin Andersson Cool, I'm really excited for the Hue's possibilities and your application, might get them in the future, if the response rate increases.

    I'd also make 2 color options available if I were you:
    1) Take the average color of the whole screen and send them to both lights
    2) Take the average color of the left 25% of the screen and send that to the bulbs on the left, same for the bulbs on the right

    about 1 year ago

  15. Kevin Andersson Kevin Andersson

    @Doney den Ouden as for 2. I've already included a screen selection tool. You can either leave it at default (the whole screen) or select an area which then is used for the average. I'll probably also add independent sources for different lights.

    about 1 year ago

  16. Doney den Ouden Doney den Ouden

    @Kevin Andersson Neat, so basically I could play a movie using VLC on my Mac and then use this to have an Ambilight kind of effect?
    Another idea; an overall maximum-brightness slider, so that you can set the brightness to a low point when watching tensive movies in the dark.

    about 1 year ago

  17. Kevin Andersson Kevin Andersson

    @Doney den Ouden
    Currently you need your webcam to point at the screen, as that is where I get the data from.

    The maximum brightness is another thing which is already thought of in my build. I have variables for a brightness multiplier, as well as another variable increasing the color saturation.

    about 1 year ago

  18. Kevin Andersson Kevin Andersson

    Updated prototype video. Everything completely rewritten.
    Here's a couple of new features:

    Color trim
    Value that defines when the Camera Sampler should dispatch a new color value. The sampler checks the difference in color value, from the previous entry - if the gap is larger than the defined value it fires a change color event.

    Defined the overall transition speed for color / brightness change. However, if black is detected transition will change to 1 second to prevent flickering.

    Black cutoff
    Because most cameras don't do well in low lumen, black often comes out as blue / green - this value tells the sampler when to transition to black. If the brightness goes below this value the sampler will turn the lights off.

    Saturation multiplier
    Value per light source - multiplies the saturation.

    Value per light source - multiplies the brightness.

    Preview video

    Learned SO much about colorspaces doing this little sideproject. HSL, HSB, RGB, HEX - damn.

    about 1 year ago

  19. Bobby Giangeruso Bobby Giangeruso

    Color for that background is perfect.

    about 1 year ago

  20. This is just to give you an indication of where the app is heading, and to let you know that I am still alive an breathing.

    Let me show you the changelog while I'm here:

    New Class :: VideoDisplay
    Decoupled video from Camera / Camerasampler
    New Class :: UIKitPanel
    Dynamic positioning
    New Class :: UIKitToolbar (header)
    Dynamic width
    Class :: ColorSamplePicker
    Added offset_x, offset_y to input target
    Added selection preview
    Class :: UIbutton
    Added UIIcon support

    General optimization
    Moved all buttons, sliders, panel elements into panels

    New Class :: UIAsset
    Class to reference static external assets and load them dynamically (icons, video, sound)
    New Class :: UIIcon
    Implements UIAsset
    Implements UIIcon
    Implements UIIcon
    New Class :: UISlider
    New Class :: UIButton

    In development:
    New Class :: UIPanel

    Native Menus

    about 1 year ago

  21. While building Hue Ice: Live, most of my time has been spent on making the building blocks for a scaleable, cross-platform application (not so much on UI design). I've been developing with OOP AS3 for years, which is also my real job, and when Adobe Air came out I started developing stuff with that as well. Mostly I've just been writing classes upon classes to control the most basic functionality; this is the turning point.

    This UIKit is being developed from the ground up, with a goal of having a complete library of objects to drag & drop into my projects. All elements will be compiled as Flash / Air components, which will enable external parameters (just like you know from XCode).

    Please note that this isn't a matter of UI Design, but Code design, so please refrain from commenting on the looks; don't judge the lady on her looks man'!

    Just another status update from my ever expanding project.

    about 1 year ago

keyboard shortcuts: previous shot next shot L or F like