-1

Okay so hopefully there is a solution out there. I am looking to have one of my Phillips Hue bulbs blink when someone visits my website. I have tooled around with Hue API some and can get it working in the debug page but I need some code to inject it into my site.

I believe I am looking for some chunk of HTML to run a JS code to turn it on an off? I know my bridge IP and Username and the lights and all that but I can't get it to work. Below is what I have so far...

    <script type="text/javascript" language="javascript">
function send() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("PUT”, “URL AND ID FOR BRIDGE”, true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
}
</script>

I am looking to inject this code in the header or footer of my site so that when someone loads my main page the code turns the light on and then off. No other user interaction and something hidden in the background. I thought it would be cool If I could figure it out to have some real world tie to my site.

Thanks!

tk421
  • 5,775
  • 6
  • 23
  • 34
  • 1
    You **shouldn't** expose something like this on your website. Do you have something like PHP, Node.js or Python on your server? If that's the case you could create a "fake" image asset which will be request each time when a user visits your website. This "fake" image request can trigger your smart bulb toggle. – Siggy Dec 16 '17 at 04:19
  • I just tried that and that doesn't seem to be the fix. I think you are right and that might be the right place for that section of code but I feel like I am missing something else too. Thanks! –  Dec 16 '17 at 04:21
  • Siggy I am using SquareSpace so I don't have access to their servers. I also know nothing about PHP. –  Dec 16 '17 at 04:23
  • 4
    This is an impressive demonstration of how the "Internet of Things" will ruin us all. Because some flashy use-case trumps by some technically ignorant person trumps all reason. Connecting network-enabled lightbulbs to the internet through client-side JavaScript... For the reasons @Siggy detailed, it is **A Very Bad Idea™**. If you don't know about any server-side programming language, I suggest you first learn about that and the security implications of opening up **anything** to the internet. – herrbischoff Dec 16 '17 at 05:44
  • Well "ruin us all" might be a bit overstating things. But you certainly open the door for someone to soon be controlling every smart device in your house at their will. Not just the one bulb. – Ingo Bürk Dec 19 '17 at 07:53
  • @IngoBürk: For some context why I chose the words I did, check out this informal and entertaining introduction to the problem: https://www.youtube.com/watch?v=304Lcn0nU3c – herrbischoff Dec 19 '17 at 19:49

1 Answers1

0

The easiest way is to use IFTTT. https://ifttt.com From there use the My Applets Webhooks to connect your website to your Hue Light.

To call IFTTT, you will want to use PHP and cURL. You can technically do a straight up JS GET request, but you'd be giving away your key to the entire Internet, which is not the best idea. You may also need to make sure your server has cURL enabled.

To do this, create a PHP file, and add in the following code, and replace the {{key}} with the key generated in IFTTT, which you can find here: https://ifttt.com/services/maker_webhooks/settings

<?php
    header('Access-Control-Allow-Origin: https://maker.ifttt.com');

    if(!isset($_GET['triggerLight'])){
        die('No URL set');
    }

    $triggerLight = $_GET['triggerLight'];

    $url = 'https://maker.ifttt.com/trigger/' . $triggerLight . '/with/key/{{ACCESS_KEY_FROM_IFTTT}}';

    echo($url);

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
    $output = curl_exec($ch);
    echo $output;
    curl_close($ch);

?>

Notice the access control header. This is so you won't have to worry about cross site domain. (This PHP file is cobbled together from several Google searches, so it could probably be improved.)

Now using jQuery we'll do an ajax GET request to the PHP file we just created. Feel free to use vanilla JS, if you would like.

$.ajax({
    type: 'GET',
    url: "PATH_TO/iftt.php?triggerLight={{WEBHOOK_MAKER_EVENT_NAME}}"
});

You can have this run when your home page is loaded, and you should be good to go for what you want to do. There will probably be a rate limit at some point, depending on how heavy the traffic is to your site. There is approximately a 1-2 second delay going through IFTTT, but it's easier than going through the HUE API, mostly because to connect remotely you need to fill out a form to request access to the remote API.

I will say, that you want to be careful with what you wish for, since a blinking light every time a user visits your site might be really annoying for you. I chose a calming candle flame type hue, for an event tracking feature I built. I also chose not to turn the light on and off, up to you however.

Finally, as noted above, try not to ruin us all with this code. :)

Ian Venskus
  • 862
  • 6
  • 5