HueIce Live
keyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
113,555,939,593 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
21 Responses
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:
Prototype
https://www.dropbox.com/s/bgdxn5fsgkys6x7/HueIceFull.mov
Pixar trailer test
https://www.dropbox.com/s/m9xf1stvwcorcvk/HueIceLivePixar480p.mov
Inception
https://www.dropbox.com/s/0789b9zsv4zc3g2/HueIceInception480p%20-%20Wi-Fi.m4v
Let me know what you guys think :)
4 months ago
Pro
Tristan L'Abbé
Thats genius man. Awesome.
4 months ago
Pro
Kai Aras
Nice! What did you implement it in? I'm basically doing the exact same thing on iOS :-)
Early Ambify Video Demo
http://tmblr.co/ZCNjtvXnWPWm
4 months ago
@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?
4 months ago
Pro
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.
4 months ago
@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.
4 months ago
Pro
Kai Aras
@Kevin Andersson ah, overlooked that first part. Can't wait to see more!
4 months ago
@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!
4 months ago
Pro
Pausrr
Thats great.!!! I had a same idea when Hue was launched but I'm only designer and dont have developer to do that:-)
4 months ago
Making quite a lot of progress on the live feed for hue.
Inception
https://www.dropbox.com/s/0789b9zsv4zc3g2/HueIceInception480p%20-%20Wi-Fi.m4v
4 months ago
Pro
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. :)
4 months ago
Pro
Doney den Ouden
Very cool, aside from the fact that the one second lag would drive me crazy.
4 months ago
@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.
4 months ago
Pro
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
4 months ago
@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.
4 months ago
Pro
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.
4 months ago
@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.
4 months ago
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.
Transition
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.
Brightness
Value per light source - multiplies the brightness.
Preview video
http://db.tt/wzw482Fo
Learned SO much about colorspaces doing this little sideproject. HSL, HSB, RGB, HEX - damn.
4 months ago
Pro
Bobby Giangeruso
Color for that background is perfect.
4 months ago
Rebound
Hue Ice Live: Gettin' sweet
by Kevin Andersson
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:
30.01.13
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
29.01.13
New Class :: UIAsset
Class to reference static external assets and load them dynamically (icons, video, sound)
New Class :: UIIcon
Implements UIAsset
UISwitch
Implements UIIcon
UISlider
Implements UIIcon
New Class :: UISlider
New Class :: UIButton
CameraSampler
Panels
Buttons
Refactored
In development:
New Class :: UIPanel
Native Menus
4 months ago
Rebound
Adobe Air Epic UIKit
by Kevin Andersson
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.
4 months ago