Page 1 of 9 123 ... LastLast
Results 1 to 10 of 84

Thread: Webserver - change a variable through a web page

  1. #1
    Join Date
    Jul 2001
    Location
    Risør - Norway
    Posts
    5,477

    Default Webserver - change a variable through a web page

    My lack of programming skills bites me in the ass again. I would like to be able to control my wake-up system so that members of the family can access their own webpage and change or order a wake-up (which is done with the speakers in the rooms, but that part has been running pretty flawlessly for many years). So when they go into the webpage they will see all the wake-up events with that zone. Here's my final wake-up call (yeah, I'm a sleeper...):

    Code:
    Timere.Vekking.Opp= scheduler.Create('opp',18) 
    Timere.Vekking.Opp:DayOfWeekTask(1, 1, 07, 44, scheduler.INFINITE) --mandag 
    Timere.Vekking.Opp:DayOfWeekTask(1, 2, 07, 44, scheduler.INFINITE) --tirsdag 
    Timere.Vekking.Opp:DayOfWeekTask(1, 3, 07, 44, scheduler.INFINITE) --onsdag 
    Timere.Vekking.Opp:DayOfWeekTask(1, 4, 07, 44, scheduler.INFINITE) --torsdag 
    Timere.Vekking.Opp:DayOfWeekTask(1, 5, 07, 44, scheduler.INFINITE) --fredag 
    Timere.Vekking.Opp:Start() 
    Timere.Vekking.politisk = Timere.Vekking.Opp:ListProperties()
    The "dag" at the end of the line is the day of the week. So on my page I would like to see all those scheduler times (I'm guessing that I would have to replace the time there with variables for each day), and then be able to write in those boxes to change it for one day, or for as many days as I'd like. But here comes the kicker: I would also like to have some way of choosing if this is for one day only or for good. And to deactivate the timer. And finally to save the changed variable in hard code somewhere (I could probably use LUA's registry write for that) so that a restart of the computer doesn't mess it up. I'm guessing I can't really do that in a script in Girder, right? Or would it be possible to do it in a LUA file?

    So basically I'm asking for the moon and the stars. Maybe somebody has in his powers to give them to me? Or at least help me on the way?
    Last edited by Mastiff; December 4th, 2014 at 03:08 PM.
    Tor - managing director of the Cinema Inferno home theater and multi-zone sound system with Girder running the show in the back, NetRemote as the GUI and Media Center 17, PowerDVD and ZoomPlayer as playback software
    Hobsyssel mastiffs: http://www.hobsyssel.no

  2. #2
    Join Date
    Jul 2001
    Location
    Risør - Norway
    Posts
    5,477

    Default

    Oh, and I don't consider a hard kick in the pants as being help on the way, even if it takes me a few inches higher!
    Tor - managing director of the Cinema Inferno home theater and multi-zone sound system with Girder running the show in the back, NetRemote as the GUI and Media Center 17, PowerDVD and ZoomPlayer as playback software
    Hobsyssel mastiffs: http://www.hobsyssel.no

  3. #3
    Join Date
    Jan 1998
    Location
    Jupiter, FL
    Posts
    13,541

    Default

    Sure that is possible, it will take some Lua glue to make it happen of course. Just remember you can place Lua code inside HTML pages. Together with CGI parameters ( like bla.html?hour=7&minute=40 ) you could make that dynamic.
    Ron
    No support through PM

  4. #4
    Join Date
    Jul 2001
    Location
    Risør - Norway
    Posts
    5,477

    Default

    Thanks, Ron! Then I know it's possible, so next weekend I will start messing with it. This weekend I will be spending doing hardware stuff at the cabin, to get everything ready for our Christmas there!
    Tor - managing director of the Cinema Inferno home theater and multi-zone sound system with Girder running the show in the back, NetRemote as the GUI and Media Center 17, PowerDVD and ZoomPlayer as playback software
    Hobsyssel mastiffs: http://www.hobsyssel.no

  5. #5
    Join Date
    Sep 2008
    Posts
    150

    Default

    I've done a fair bit of coding to interact with Girder variables and events to and from a set of web pages. I use this to control lighting and heating and to see status' of digital inputs to mention just a few from a web page.
    I've used a lot of jquery (as per the manual and this forum with slight customisations), but as I was using quite large tables, and I didn't want to code them from scratch I used javascript to dynamically build tables.
    if you don't need to dynamically build tables then its very easy using basic functions.
    If you do (if for instance you had lots of names zones or rooms and didnt want to duplicate this coding in your webpage) then dynamic tables are (in my opinion) the way forward.
    If this looks of any use, and you want further explanation then just ask. If its of no use, then no worries!
    As for basic interaction, the interesting bit to send data to girder is:

    Code:
    function SendEventPayload( Event, Device, Payload1, Payload2, Payload3, Payload4 )
    {
    $.get("ajax_sendevent_payload.lhtml?event="+escape(Event)+"&device="+escape(Device)+"&payload1="+escape(Payload1)+"&payload2="+escape(Payload2)+"&payload3="+escape(Payload3)+"&payload4="+escape(Payload4));
    return false;
    }
    noting, that you must have a file called "ajax_sendevent_payload.lhtml"
    which needs to contain:
    Code:
    <%
    	webserver:SetGZIP(false) 
    	webserver:SetHeader("Cache-Control: no-cache, must-revalidate")
      webserver:SetHeader("Expires: Fri, 30 Oct 1998 14:19:41 GMT")
    	local table = webserver:GetCGI()
    	if ( gir ) then
      	gir.TriggerEvent( table['event'], table['device'], table['payload1'], table['payload2'], table['payload3'], table['payload4'] )
    	end	
    %>
    and to look at variables within girder, you need the functions "checkGIRDER" and "checkDATA" and the associated functions to keep scanning the data you want to look at "$(document).ready(function()" renaming the variable paths to suit,
    Note, in my doc they are split into checkGIRDER for static information (such as descriptions) to ones with are scanned every x ms for a change.

    Also note, javascript is case sensitive.
    Also note, alert() is like print in girder and is very useful to debug code that won't work.
    I started from very basic building blocks and expanded gradually keeping backups as I went along, hence why its not too tidy. If I rewrote from scratch I'd hope it would be much neater.

    To then change a variable, I'd send an event with a payload containing the variable to change plus the data and use a script in the girder tree to update the actual variable.

    I tried to attach this as a file, but it won't work, so I've just copied the file in here:
    Note, all the bits about key and sub key is to deal with lots of arrays of data and JsonOBJ strings, so may not be applicable to you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="PRAGMA" content="NO-CACHE">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Digital Inputs</title>
    
    <link type="text/css" rel="stylesheet" href="styles.css">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script>
    
    jsonOBJ = {};
    function now(){
    window.location.reload(true);
    }
    function SetImage(id, src)
    {
    var Image = document.getElementById(id);
    if (Image != null)
    {
    Image.src = src;
    }
    return false;
    }
    function SendEventPayload( Event, Device, Payload1, Payload2, Payload3, Payload4 )
    {
    $.get("ajax_sendevent_payload.lhtml?event="+escape(Event)+"&device="+escape(Device)+"&payload1="+escape(Payload1)+"&payload2="+escape(Payload2)+"&payload3="+escape(Payload3)+"&payload4="+escape(Payload4));
    return false;
    }
    function SendEventPayloadByID( Event, Device, Payload1, Payload2ID, Payload3, Payload4)
    {
    var Payload2 = document.getElementById(Payload2ID);
    SendEventPayload(Event, Device, Payload1, Payload2.value, Payload3, Payload4);
    return false;
    }
    function SendEventByID( EventID, DeviceID )
    {
    var Event = document.getElementById(EventID);
    var Device = document.getElementById(DeviceID); SendEvent(Event.value, Device.value);return false;
    }
    //
    //
    function checkGIRDER(GirderVariable,LocalVariable,SetButton) {
    $.ajax({
    type: "GET",
    url: "ajaxreqjson.lhtml",
    data: {Data : "myVal,"+GirderVariable},
    async: true,
    cache: false,
    timeout:5000,
    success: function(data){
    checkDATA(data,GirderVariable,LocalVariable,SetButton);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
    $("#error").text("Comet Timeout ERROR: " + textStatus + " (" + errorThrown + ")");
    },
    });
    }
    //Scan once for source text data
    function checkDATA(data,GirderVariable,LocalVariable,SetButton) {
    try {
    jsonOBJ = jQuery.parseJSON(data);
    //alert(data);
    $("#" + LocalVariable+"FullData").text(data);
    var DataString = (jsonOBJ[GirderVariable]);
    if (SetButton == 'array')
    {
    var Stringlength = DataString.length;
    var arraymax = Stringlength + 1;
    for (var a = 0; a < arraymax; a++)
    {
    $("#" + LocalVariable + "ID" + a).text(DataString[a]);
    if (DataString[a]==1)
    {
    SetImage(LocalVariable + "Button" + a, "img/button_red_up.jpg");
    }
    if (DataString[a]==0)
    {
    SetImage(LocalVariable + "Button" + a, "img/button_green_up.jpg");
    }
    }
    }
    //variable = "string to look in"
    //variable.indexof("string to find")
    for (var key in jsonOBJ[GirderVariable]) 
    //$("#" + LocalVariable+"FullData2").text(sonOBJ[GirderVariable][key]);
    { 
    for (var subkey in jsonOBJ[GirderVariable][key])
    {
    //alert("Sub key found: key: "+key+" subkey:"+subkey+" Contains:"+jsonOBJ[GirderVariable][key][subkey]);
    $("#" + LocalVariable + "_" + key + "_" + subkey).text(jsonOBJ[GirderVariable][key][subkey]);
    $("#" + LocalVariable + "_key_"+ key + "_subkey_" + subkey).text(key + "_" + subkey);
    }
    if (jsonOBJ[GirderVariable].hasOwnProperty(key)) {
    //alert(key)
    $("#" + LocalVariable + key).text(jsonOBJ[GirderVariable][key]);
    $("#" + LocalVariable + "key"+ key).text(key);
    if (SetButton == 'true')
    {
    if (jsonOBJ[GirderVariable][key]=='1')
    {
    $("#" + LocalVariable + "txt"+ key).text("1");
    SetImage(LocalVariable + "Button"+key, "img/button_green_up.jpg");
    }
    if (jsonOBJ[GirderVariable][key]=='0')
    {
    $("#" + LocalVariable + "txt"+ key).text("0");
    SetImage(LocalVariable + "Button"+key, "img/button_blue_up.jpg");
    }
    }
    }
    }
    }
    catch(err) { $("#jsondata").text(data);
    $("#error").append(" INCORRECTLY FORMED JSON DATA...");
    }
    }
    //
    //variables that need to update on page load only
    //Girder source variable, Local source variable, true if set buttons, array if table array
    //
    
    $(document).ready(function() { setTimeout('checkGIRDER(\'HOUSE.IO_Diagnostics.DI_Description\',\'DIName\',\'array\')',100); });
    //
    //variables that need to update regularily
    //Girder source variable, Local source variable, true if set buttons
    //
    $(document).ready(function() { setTimeout('ScanInputs()',100);});
    
    function ScanInputs()
    {
    $(document).ready(function() { setTimeout('checkGIRDER(\'HOUSE.IO_Diagnostics.DI_Value\',\'DIValue\',\'array\')',100); });
    $(document).ready(function() { setTimeout('checkGIRDER(\'HOUSE.IO_Diagnostics.DI_Time0_string\',\'DITime0\',\'array\')',100); });
    $(document).ready(function() { setTimeout('checkGIRDER(\'HOUSE.IO_Diagnostics.DI_Time1_string\',\'DITime1\',\'array\')',100); });
    setTimeout('ScanInputs()',1000);
    }
    //
    // Build the table
    function BuildTable()
    {
    var rows = 128; //here's your number of rows and columns
    //var cols = 1;
    $('#dynamictable').append('<table></table>');
    var table = $('#dynamictable').children();
    var tr = $('<tr>');
    $('<td style=\"text-align: center; width: 80px; height: 45px;\">ID</td>').appendTo(tr);
    $('<td style=\"text-align: center; width: 160px; height: 45px;\">Name</td>').appendTo(tr);
    $('<td style=\"text-align: center; width: 80px; height: 45px;\">Status</td>').appendTo(tr);
    $('<td style=\"text-align: center; width: 80px; height: 45px;\">Time1</td>').appendTo(tr);
    $('<td style=\"text-align: center; width: 80px; height: 45px;\">Time0</td>').appendTo(tr);
    tr.appendTo(table);
    for(var r = 0; r < rows; r++)
    {
    var tr = $('<tr>');
    var ID = r + 1;
    var ID2 = r;
    var ImageID = r;
    $('<td style=\"text-align: center; width: 80px; height: 45px;\">'+ID+'</td>').appendTo(tr);
    var Name = '<center><Div><Span id=\"DIName'+ID2+'\"></span></center>';
    $('<td style=\"text-align: center; width: 160px; height: 45px;\">'+Name+'</td>').appendTo(tr);
    var DigButton = '<center><a href=\"\" onclick=\'return SendEventPayload(\"DIGIO\", \"18\", \"\",\"\",\"'+ID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"DIValueButton'+ImageID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"DIValueButton'+ImageID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"DIValueButton'+ImageID+'\" border=\"0\"></a>&nbsp;</center>'
    $('<td style=\"text-align: center; width: 80px; height: 45px;\">'+DigButton+'</td>').appendTo(tr);
    var Time1= '<center><Div><Span id=\"DITime1'+ID2+'\"></span></center>';
    $('<td style=\"text-align: center; width: 160px; height: 45px;\">'+Time1+'</td>').appendTo(tr);
    var Time0= '<center><Div><Span id=\"DITime0'+ID2+'\"></span></center>';
    $('<td style=\"text-align: center; width: 160px; height: 45px;\">'+Time0+'</td>').appendTo(tr);
    tr.appendTo(table);
    }
    }
    window.onload = BuildTable;
    </script>
    <style>
    #dynamictable
    {
    border:solid 1px;
    border-collapse:collapse;
    }
    #dynamictable th
    {
    border:solid 1px;
    border-collapse:collapse;
    }
    #dynamictable td
    {
    border:solid 2px;
    vertical-align:middle;
    text-align:middle;
    }
    </style>
    </head>
    <body style="color: rgb(0, 0, 0); background-color: rgb(153, 153, 153);" alink="#000099" link="#000099" vlink="#990099">
    <h1>Digital Inputs</h1>
    <div id="dynamictable"></div>
    </body></html>
    Jon

  6. #6
    Join Date
    Jul 2001
    Location
    Risør - Norway
    Posts
    5,477

    Default

    Holy Moly! This looks great! Thank you very much! I will certainly put this into a webpage and check it out next weekend, (or the week after), when I get the time to mess with this stuff! Appreciate it a lot!
    Tor - managing director of the Cinema Inferno home theater and multi-zone sound system with Girder running the show in the back, NetRemote as the GUI and Media Center 17, PowerDVD and ZoomPlayer as playback software
    Hobsyssel mastiffs: http://www.hobsyssel.no

  7. #7
    Join Date
    Sep 2008
    Posts
    150

    Default

    No prob.
    Jon

  8. #8
    Join Date
    Jul 2001
    Location
    Risør - Norway
    Posts
    5,477

    Default

    Hi agian, Jon! Finally got around to this (busy Christmas, ending up working a lot more than I really wanted to...). I have created the lhtml file and a html file with the code in the bottom window. But I do not get boxes to put any code into. I get a page with a table (digital inputs), but none of the columns are input boxes. Am I doing something wrong, or have I misunderstood you?
    Tor - managing director of the Cinema Inferno home theater and multi-zone sound system with Girder running the show in the back, NetRemote as the GUI and Media Center 17, PowerDVD and ZoomPlayer as playback software
    Hobsyssel mastiffs: http://www.hobsyssel.no

  9. #9
    Join Date
    Sep 2008
    Posts
    150

    Default

    Hi,
    Rather than trying to work with my script,
    I'll draft something up specifically over the next couple of days to:
    Display a generic table of girder variables, text Input boxes, buttons and button statuses that should be easier to understand.
    Jon.

  10. #10
    Join Date
    Jul 2001
    Location
    Risør - Norway
    Posts
    5,477

    Default

    That would be totally fantastic, thank you very much!
    Tor - managing director of the Cinema Inferno home theater and multi-zone sound system with Girder running the show in the back, NetRemote as the GUI and Media Center 17, PowerDVD and ZoomPlayer as playback software
    Hobsyssel mastiffs: http://www.hobsyssel.no

Page 1 of 9 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •