Webpage IR codes using the Device Manager

Top  Previous  Next

For this to work we first need to setup a IR Devices, device. The has a few steps.

 

1.Enable the IR Devices Plugin on the File->settings->plugins

2.Go to the Device Manager (View->Devices)

3.If not already there add a IR Devices Component ( Edit->Add Component, select the IR Devices plugin)

4.Click on the IR Devices component

5.Add a new Device, (Edit->Add Device) any name you like.

6.Click on that newly created device

7.Either manually add controls and learn IR codes or import from web.

 

Now that we have controls defined in our newly created device, click on the control you wish to trigger from your web page. In the status bar you should see the ID of this control. For example "Control 8". That means we can use the id 8 as a reference to this control. This ID is stored in a disk database and is the same even after reboots. The only time it changes is when you delete the control or device.

Create the HTML file.

As before we'll assume that you have some understanding of HTML. Create this HTML file in the httpd directory of Girder. Name it control.html

 

<html>

 <head>

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

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

 </head>        

 <body>        

 <h1>IR Devices</h1>

         <button onclick="deviceManager.requestControlValueChange( 8, 1, 'Web Interface' );">CLICK ME</BUTTON>

         <p>

                 Edit control.html in the httpd directory and change the first parameter (the value 8 in this file) of requestControlValueChange to the ID of the control you wish to press.

         </p>        

 </body>

</html>

 

There are two parts that are interesting in there. The first is the loading of the device manager helper functions.

 

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

 

The second part actually presses the virtual control button. Note the first parameter to "requestControlValueChange". It has value 8. This is the id of the control. We found the value early by clicking on the control we like to control and reading it's value in the status bar.

 

<button onclick="deviceManager.requestControlValueChange( 8, 1, 'Web Interface' );">CLICK ME</BUTTON>

Making it dynamic ( ADVANCED )

Of course things change and the control might go away and you'd need to change your id. Instead of hard coding this value you can also use the deviceManager function available to javascript to dynamically create a page. Below is an example on how this is done. This is a bit more advanced. If the deeply nested asynchronous code scares you just move right along.

 

<html>

 <head>

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

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

         <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

         <script type="text/javascript">

         

                 /* A little Javascript magic to factor out 

                    some repeated code. Basically it takes the result 

                    of the deviceManager.XXX functions ( which is a table ) 

                    and turns this into a repeated calling of a callback 

                    

                    This avoid repeating the getItems code over and over

                    nesting inside eachother. If this is nebulous, don't 

                    worry just use it for now.                   

                    

                    */

                 function getItems ( f, id, cb ) {                        

                         if ( !cb ) {

                                 return;

                         }                                

                         f(id, function( result, items ) {

                                 if ( !result ) {

                                         return;

                                 }                                        

                                 for ( var id in items ) {

                                         if ( items.hasOwnProperty( id ) ) {                                        

                                                 cb( items[id] );

                                         }

                                 }                                        

                         });

                 }

                 

                 function getComponents ( id, cb ) {                        

                         return getItems(deviceManager.components, id, cb);

                 }

         

                 function getDevices ( id, cb ) {                        

                         return getItems(deviceManager.devices, id, cb);

                 }                

                 

                 function getControls ( id, cb ) {

                         return getItems(deviceManager.controls, id, cb);

                 }                                        

         

         

                 $(document).ready( function () {

                 

                         var c = $("#componentsDiv");

                         

                         // 130 is the plugin id of the IR Devices plugin.

                         getComponents( 130, function ( component ) {

                                 

                                 var cH2 = $("<h2>");

                                 cH2.text( component.name );                                                

                                 c.append(cH2);                                        

                                 

                                 getDevices( component.id, function ( device ) {

                                 

                                         var cH3 = $("<H3>");

                                         cH3.text( device.name );

                                         c.append(cH3);

                                         

                                         getControls( device.id, function(control) {

                                         

                                                 var button = $("<BUTTON>");

                                                 button.text ( control.name );

                                                 button.click ( function () {                                                                                                        

                                                         deviceManager.requestControlValueChange( control.id, 1, "Web Interface" );

                                                 });

                                                 c.append(button);                                                        

                                         

                                         });

                                         

                                 });

 

                         });

 

                 });

                         

         </script>

 </head>

 

 <body>

 

 <h1>IR Devices</h1>

 

 <div id="componentsDiv">        

 </div>

 

 </body>

</html>