Webpage IR codes using Actions

Top  Previous  Next

For this tutorial please complete the "IR Codes in an Action" first. The next step is to create a new HTML file in the httpd directory of Girder. We'd like to assume you know a little bit about HTML and Javascript. If not please look at some of the introductory HTML tutorials on the web, there are many good ones.


Note that with a little bit of creativity you can see that this tutorial can also be used to learn how to place events on a web page, which is really all this is.

The web page

Let's say we created a file called "irbuttons.html" inside this we'll add the following bits and pieces to create a barebones HTML file with Girder integration.




         <title>Girder - IR Codes on Webpage / gir.triggerEvent example</title>

         <script src="gir/triggerEvent.lhtml"></script>




 <button onclick="gir.triggerEvent('ir button 1', 18 );">IR button 1</button>





There are two lines that are of interest here. First the line:


<script src="gir/triggerEvent.lhtml"></script>


All this does is it includes the gir/triggerEvent.lhtml file into your page. This is where all the real magic happens. If you are curious go look at it. If not all you need to know is that this file exports a function into javascript called gir.triggerEvent(...). This function has the following parameters:


function gir.triggerEvent ( eventString, eventDevice, keyModifier, payloads, cb ) 


eventString, as the name implies is a string, a piece of text that we can randomly select. Pick something memorable link "IR Button 1".

eventDevice is a number Girder uses to determine who is responsible for this event. In this case we'll use 18, which is the magic number for Girder's own events (or external events like this).

keyModifier is the number that determines if this is a "NONE" (=0), "ON" (=1), "REPEAT" (=4) or "OFF" (=2).

payloads is an array of strings that should be passed to Girder as a payload.

cb is a callback parameters. Pass a function to this if you'd like to be notified of success or failure.


This function we use on the second line of interest in the HTML file:


<button onclick="gir.triggerEvent('IR Button 1', 18 );">IR button 1</button>


This tells HTML to create a button element and when it is clicked it calls our gir.triggerEvent function!

Hooking it all together

Now that we have a very basic we page we'd like pressing that button to do something. You might have noticed that pressing the button on that page will trigger an event in Girder, specifically the "IR Button 1" event. All we need to do now is tell Girder to trigger the Send IR action when this event comes in. This of course is discussed in the "Hook Events to Actions" tutorial. Press the button on the web page after you hooked the event to the IR action and you should magically now be sending IR codes out of your PIR-1! Congratulations.


You can find this also as an example in triggerEvent.html in the httpd directory