Any demand for a hue based web application?

HungryHippos

HungryHippos

HungryHippos

Soldato
Joined
25 Mar 2004
Posts
15,946
Location
Fareham
I have a number of hue bulbs and accessories, but I find the default hue app on my phone a bit annoying for certain things. For example renaming lights is painful, and I can't set the exact value for colours I want, I have to approximate it.

So over the last couple of days I spent a little time messing around with the api, so that I could do these things a bit easier for my own purposes, and for a bit of a learning exercise as well.

The result (so far) is this:

PmsImaS.png

This currently runs from a single local .html file, which grabs the source scripts for bootstrap/google material icons/jquery from the external websites.

It iterates through all of the bulbs on the hub, and outputs a bootstrap card for each one. The template HTML data is filled in so that each one displays the id, name, some utility buttons (left to right, and some values that can be modified.

I have colour coded the text, if it's grey it's on and reachable. If it's orange it's on. If it's red it's unreachable.

I was wondering if anyone else would be interested in this, or perhaps there exists something that allows you to modify the hue configuration from a desktop machine already, I know we have quite a few hue users on this site.
 
Looks like a fun project.

HungryHippos said:
I was wondering if anyone else would be interested in this, or perhaps there exists something that allows you to modify the hue configuration from a desktop machine already, I know we have quite a few hue users on this site.
Click to expand...

Stick it up on Github and see if it gets any interest.
 
I'd assume I can run it directly from a website as well, was considering throwing it on an azure one so that people can mess around on it.

I have been modifying it a bit look and feel wise, I like the new styling a bit more and I have a bit more control over the light settings. Added a colour picker which makes selecting the xy values of the group a lot easier.

qrpC0b6.png
 
I've created an azure website to test it on so anyone can try it.

http://huetest.azurewebsites.net/

Basic instructions:

1. You'll need a whitelisted API user id to run it with. This is very easy to get with the PowerShell below. Just replace my bridge IP 192.168.1.81 with yours, hit the button on top of your hub, then run it all. It should return a long series of letters and numbers.

$Bridge = "192.168.1.81"
$Body = @{devicetype = "TestHueApp#Testing"} | ConvertTo-Json
Invoke-RestMethod -Uri "http://$Bridge/api" -Method "Post" -Body $Body

2. Put the Hub IP address and the user ID into the two boxes at the top of the page, then click the update cookie button. This will save these variables as cookies so you don't need to enter them each time you load the page.

After that it should just work, at least it does for me :)

Any feedback is welcome, the API is reasonably big and I haven't looked at everything it can do. At the moment it's just getting the lights, groups, and scenes and generating the page content based on this. The scenes aren't even being used for anything yet I was intending to add some functions for them.

I am not a developer by trade, so I tend to just hack stuff together until it works. If anyone wants to weigh in on the project I'd be happy to receive any useful advice or help! I'd really like to do something like this with MVC perhaps.

I am certainly over utilising window.reload to update statuses as things are modified.

This will probably not be working well on mobile devices whatsoever.
 
Tried to add the content to github pages, but it seems to enforce https:// and the local hue hub only works over http:// - as this results in catch 22 I don't think I can host the website itself on github, only the code. Can't disable https:// either as it's not possible on a default github pages url.

Hosting the website on azure is fine as it doesn't require https:// although it's loading stuff via https:// where it can.

I've not found a good workflow of updating my project in both github as well as my VS 2017 project. Ideally I'd like to edit the code in VS 2017 and publish to azure that way, with github picking up my changes and then allowing me to commit them.

Code is up on: https://github.com/lordhippos/lordhippos.github.io

Website is up on: http://huetest.azurewebsites.net
 
Yep! it's very odd. If you have your own domain I think you can do it, I guess it's everything under the common github pages. I had a look at the github docs and they basically said that you are buggered if you can't get the thing to use https.

Made a couple of changes from feedback that mrk had, along with some of my own thoughts.

It should work a little better in thinner viewports now, as I was designing it all around how it works on my massive screen. I lowered some of the padding and re-arranged some things.

I've added brightness sliders in 5% increments to the lights and the groups.

Removed the hue/sat values as I think they were probably more confusing than anything else. You can generally set the colour values via RGB translation to CIE, or via colour temp (ct) from cold to warm white depending upon the light capabilities (see the bottom one below can't do colours so it's currently not displaying as on, which is something I wanted to sort out).

I need to:
  • Add the colour picker options to the lights.
  • Consider removing the ability to manually set X/Y values as no human can really spend the time working that out. I am translating to RGB anyway and may be better showing that.
  • Possibly use another slider for colour temp values if white is wanted instead of colour.
  • Sort out the bulb showing the colour if it's only got a colour temp value and can't do X/Y values.
  • the images are using SVG sources, but I am struggling to get them to stay consistent in size when the page changes in size - I would like them to always scale along with the container they are in properly but zoom out and they become tiny.
Current iteration on a less wide image:

6ak1dse.png
 
Is this better?

I've added some scene controls as well, at the moment it's just "load scene", "delete scene", and "save current bulb settings to scene" in that order. Can't delete a scene that is locked which is shown via the icon.

SHLRjNl.png

Working on scene addition.

Edit - added scene addition, but the hue app doesn't want to see any manually created scenes! rubbish! :(

OLCVSMy.png
 
Last edited:
Hey @HungryHippos, I use it quite regularly and today I'm getting the following error. :(

Error 403 - This web app is stopped.
The web app you have attempted to reach is currently stopped and does not accept any requests. Please try to reload the page or visit it again soon.

Any ideas? It really handy and would love for it to remain active. :)
 
I apologise sir but my Azure credit ran out! :(

I get $150 a month to play with or whatever through my work, but I left my personal VM running so it died before the billing thing renewed.

I think it's due to kick back into life in a day or two though so please bear with :)

Also good to see people using it. Let me know if you think it can do anything better or differently?

As you can see quite flat billing model, I just overstretched it a little I guess! I was using it today as well still find it useful. May do some work at some point on updating it but for now it's kind of doing what I want which is allowing me to set more granular colour temps.

1ffCh97.png
 
Last edited:
Never saw this project before, but I've been tempted to start having a play around with the API as Phillips just seem extremely slow at releasing anything.
 
It's back today :)

I wanted to look at how I could re-do the site in ASP.NET MVC, in part because I'd hopefully learn something as I've not made anything in MVC before.

My VM which ate most of my credit used to have a start/stop script. I looked into it and it was relying on a certificate for an Azure Automation user that had expired. Renewed that for another year, maybe it will work again now!
 
Last edited:
Ah I didn't realise it was a paid for thing!

I like it how it is and for now I can't really see much wrong with it. I use it mostly for just controlling the lights if I'm sat at the PC! I do like that I can set an individual colour temperature though, which you can't do in the Hue app.
 
It's not paid for exactly, at my work we do a lot of business with Microsoft, so to get us on board with more "Azure" stuff we all get £115 a month to spend on Azure for free, but it doesn't rollover. Basically a use it or don't use it thing.

I don't do much with Azure, mainly Exchange, so I just use it for a couple of personal things like a VM I can RDP onto whenever I want for testing, and this Hue web application :)

Your use case is the same as mine to be honest, I also use it for lights when I am sat at the PC. The one thing I wouldn't mind improving is how to get the Hue IP address, at the moment it assumes you may be able to work it out by checking your Routers IP table or similar. Not sure if there is a smarter way to get it.
 
You must log in or register to reply here.
Back
Top Bottom