1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Any demand for a hue based web application?

Discussion in 'HTML, Graphics & Programming' started by HungryHippos, Mar 4, 2018.

  1. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    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:

    [​IMG]

    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.
     
  2. roccles

    Hitman

    Joined: Apr 26, 2012

    Posts: 626

    Looks like a fun project.

    Stick it up on Github and see if it gets any interest.
     
  3. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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.

    [​IMG]
     
  4. andy_mk3

    Sgarrista

    Joined: Oct 5, 2009

    Posts: 7,600

    Location: Lincolnshire

    Looks awesome and definitely something I could use.
     
  5. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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.
     
  6. Dj_Jestar

    Caporegime

    Joined: Oct 18, 2002

    Posts: 28,300

    Location: Back in East London

  7. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    Did not realise they offered that, will add it to github tomorrow!
     
  8. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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
     
  9. Dj_Jestar

    Caporegime

    Joined: Oct 18, 2002

    Posts: 28,300

    Location: Back in East London

    Git is already integrated into VS. You push your changes and boom.. website updated. Seems bizarre you can't run the hub in https though. In fact that's fundamentally broken if you can't.
     
  10. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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:

    [​IMG]
     
  11. CaptainComedy

    Perma Banned

    Joined: Jul 3, 2008

    Posts: 3,772

    Location: My fabulous ship

    change that white background to a darker shade of the light backgrounds, too much contrast
     
  12. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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.

    [​IMG]

    Working on scene addition.

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

    [​IMG]
     
    Last edited: Mar 12, 2018
  13. V_R

    Sgarrista

    Joined: Jan 17, 2007

    Posts: 7,591

    Location: UK

    Just found this. Great work! Thank you very much!
     
  14. V_R

    Sgarrista

    Joined: Jan 17, 2007

    Posts: 7,591

    Location: UK

    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. :)
     
  15. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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.

    [​IMG]
     
    Last edited: Nov 17, 2018
  16. Semple

    Mobster

    Joined: Mar 5, 2010

    Posts: 4,206

    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.
     
  17. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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: Nov 18, 2018
  18. V_R

    Sgarrista

    Joined: Jan 17, 2007

    Posts: 7,591

    Location: UK

    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.
     
  19. HungryHippos

    Soldato

    Joined: Mar 25, 2004

    Posts: 6,516

    Location: Fareham

    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.
     
  20. Fireskull

    Sgarrista

    Joined: Oct 31, 2006

    Posts: 9,555

    Location: Southampton / Winchester

    Thanks for this, will have a look at some point!

    You can see your bridge IP via the hue app.