EventGhost

Support Forum
http://www.eventghost.net:80/forum/

Webserver

http://www.eventghost.net:80/forum/viewtopic.php?t=1663

Page 11 of 23

Re: Webserver

Posted: Tue Jan 26, 2016 4:12 pm
by krambriw
...and here are the two .png files for the lamp statuses
lamp-on.zip
(6.79 KiB) Downloaded 150 times

Re: Webserver

Posted: Tue Jan 26, 2016 5:31 pm
by bongolf
krambriw wrote:This simple sample sends and receives data using websockets. Copy & Paste into an html-document and put it into the webserver root]
Thanks, I will test that.
But what kind of events should I send from EventGhost to update this webpage?

Re: Webserver

Posted: Wed Jan 27, 2016 5:44 am
by krambriw
But what kind of events should I send from EventGhost to update this webpage?
That page sample does not have much code for that purpose, it was more supposed to demonstrate
- how to send events to EG
- how to update the button
- a toggle function

At the same time the page is also listening to websockets events from EG. All incoming are received in function wsMessage(event) but there is no code doing anything special (just setting the browser background to black).

Maybe this sample is better showing how elements in the page can be updated by events from EG

Code: Select all


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

<title>Simple websocket test page</title>

<script language="javascript">
    var cntr = 0;
    var old_cntr = 0;
    var old_hours = '';
    var old_minutes = '';
    var old_seconds = '';
    var oldLine = '';
    var global_n = '';
    wSocket = null;
    var prot = "";
    var ip = location.host;
    
    if (location.protocol == "https:") {
        prot = "wss://";
    }
    else {
        prot = "ws://";
    }
    //var url = prot + ip + "/ws"; //mandatory for Tornado
    var url = prot + ip; //enough for Webserver


    function init() {
        // event handlers for WebSocket:
        wSocket = new WebSocket(url);
        wSocket.onopen = function() {
           	document.getElementById("output").style.backgroundColor ="#C0C0C0"; //White
        }
        wSocket.onmessage = wsMessage;
        wSocket.onclose = function() {
            document.getElementById("output").style.backgroundColor ="#C0C0C0"; //Grey
        }
    }

    function writeToScreen(message) { 
        var pre = document.createElement("p"); 
        pre.style.wordWrap = "break-word"; 
        pre.innerHTML = message; 
        output.appendChild(pre); 
    } 


    function doSend(strng) {
        if (wSocket.readyState == 1) {
        	wSocket.send(JSON.stringify(strng));
        }
    }
    
    function wsMessage(evt) { 
        var d = new Date();
        var hours = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        var year = d.getFullYear();
        var month = d.getMonth();
        if (month < 10) {
            month = '0'+ month;
        }
        var day = d.getDate();
        if (day < 10) {
            day = '0'+ day;
        }
        global_n = year+'-'+month+'-'+day
        document.getElementById("theBody").style.backgroundColor ="green"; //Green
        //writeToScreen('<span style="color: white;"><font face="arial" color="white" font size="1">RESPONSE: '+evt.data+'</span>'); 
        
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        
    		if (oldLine != '') {
    			if ( cntr > 0 ) {
    			    old_cntr = cntr - 1;
    			}
    			else {
    				if ( cntr == 0 ) {
    				    old_cntr = 20;
    				}
    			}
    			txtID = old_cntr.toString();
    			document.getElementById(txtID).style.color ="white";
    			document.getElementById(txtID).innerHTML = oldLine;
    		}

    		txtID = cntr.toString();
    		document.getElementById(txtID).style.color ="yellow";
    		document.getElementById(txtID).innerHTML = global_n+' '+hours+':'+minutes+':'+seconds+' '+evt.data;
    		old_hours = hours;
    		old_minutes = minutes;
    		old_seconds = seconds;
    		if (old_hours != '') {
    		    oldLine =  global_n+' '+old_hours+':'+old_minutes+':'+old_seconds+' '+evt.data;
    		}
    		cntr += 1;
    		if ( cntr > 20) {
    			  cntr = 0;
    		}
    }

</script> 

<!-- <h2>WebSocket Test</h2> -->

<div id="output"></div> 

<body id="theBody" onLoad="init()" bgcolor="#3A3C69" text=white link=white vlink=white alink=white />
    <td><text id="00"><font face="arial" color="white" font size="1">&nbsp;</text></td><br />
    <br />
    <td><text id="0"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="1"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="2"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="3"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="4"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="5"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="6"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="7"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="8"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="9"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="10"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="11"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="12"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="13"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="14"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="15"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="16"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="17"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="18"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="19"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />
    <br />
    <td><text id="20"><font face="arial" color="white" font size="1">&nbsp;Log entry</text></td><br />

Re: Webserver

Posted: Wed Jan 27, 2016 8:24 am
by krambriw
..or this sample I made earlier will give you some more ideas

Code: Select all

<html lang="sv">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="PRAGMA" content="NO-CACHE">
    <title>Demo EventGhost sample</title>

<style type="text/css">
    .on { 
        border:4px inset;
        color:#369;
        background:#f9d543; 
    }
        
    .off {
        border:4px outset;
        color:#369;
        background:#f9d543; 
    }
</style>

<script type="text/javascript">
wSocket = null;
prot = "";
ip = "";
url = "";


function init() {
      // event handlers for WebSocket:
    wSocket = null;
    prot = "";
    ip = location.host;
    if (location.protocol == "https:") {
        prot = "wss://";
    }
    else {
        prot = "ws://";
    }
    url = prot + ip; //enough for Webserver
      //url = prot + ip + "/ws"; //mandatory for Tornado
      wSocket = new WebSocket(url);
      wSocket.onopen = function() {
          doSend("WebSocket rocks");
      }
      wSocket.onmessage = wsMessage; 
      wSocket.onclose = function() {
        console.log("Web Socket closed.");
      }
 }
   
var global_n = '';


function TriggerEvent(eventname, el)
{
    if(el.className == "on") {
        el.className="off";
        doSend(eventname+'.OFF')
    } else {
        el.className="on";
        doSend(eventname+'.ON')
    }
    return false;
}


function doSend(message){
    wSocket.send(message);
}


function wsMessage() { 

		//alert(event.data);

        if (event.data == "Bokhylla_TellStickDuo_ON")
          {
          document.getElementById("b01").style.backgroundColor="#FBF14D";
          document.getElementById("b01").style.color ="black";
          document.getElementById("b01").className = "on";
          document.getElementById('i01').src = "lamp-on.png";
          document.getElementById("b01").style.fontSize ="20";
          }
        if (event.data == "Bokhylla_TellStickDuo_OFF")
          {
          document.getElementById("b01").style.backgroundColor="black";
          document.getElementById("b01").style.color ="white";
          document.getElementById("b01").className = "off";
          document.getElementById('i01').src = "lamp-off.png";
          document.getElementById("b01").style.fontSize ="20";
          }

        if (event.data == "Garage_TellStickDuo_ON")
          {
          document.getElementById("b02").style.backgroundColor="#FBF14D";
          document.getElementById("b02").style.color ="black";
          document.getElementById("b02").className = "on";
          document.getElementById('i02').src = "lamp-on.png";
          document.getElementById("b02").style.fontSize ="20";
          }
        if (event.data == "Garage_TellStickDuo_OFF")
          {
          document.getElementById("b02").style.backgroundColor="black";
          document.getElementById("b02").style.color ="white";
          document.getElementById("b02").className = "off";
          document.getElementById('i02').src = "lamp-off.png";
          document.getElementById("b02").style.fontSize ="20";
          }

        if (event.data == "Home_TellStickDuo_ON")
          {
          document.getElementById("bHome").style.backgroundColor="#FBF14D";
          document.getElementById("bHome").style.color ="black";
          document.getElementById("bHome").className = "on";
          document.getElementById('iHome').src = "lamp-on.png";
          document.getElementById("bHome").style.fontSize ="20";
          }
        if (event.data == "Home_TellStickDuo_OFF")
          {
          document.getElementById("bHome").style.backgroundColor="black";
          document.getElementById("bHome").style.color ="white";
          document.getElementById("bHome").className = "off";
          document.getElementById('iHome').src = "lamp-off.png";
          document.getElementById("bHome").style.fontSize ="20";
          }

        if (event.data == "Test_TellStickDuo_ON")
          {
          document.getElementById("bTest").style.backgroundColor="#FBF14D";
          document.getElementById("bTest").style.color ="black";
          document.getElementById("bTest").className = "on";
          document.getElementById('iTest').src = "lamp-on.png";
          document.getElementById("bTest").style.fontSize ="20";
          }
        if (event.data == "Test_TellStickDuo_OFF")
          {
          document.getElementById("bTest").style.backgroundColor="black";
          document.getElementById("bTest").style.color ="white";
          document.getElementById("bTest").className = "off";
          document.getElementById('iTest').src = "lamp-off.png";
          document.getElementById("bTest").style.fontSize ="20";
          }

        if (event.data.match("166_TellStickDuo_Temperature:")) //Temperatur ett
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t02").style.color ="white";
            document.getElementById("t02").style.fontFamily ="arial";
            document.getElementById("t02").style.fontSize ="12";
            document.getElementById("t02").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("81_TellStickDuo_Temperature:")) //Temperatur två            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t04").style.color ="white";
            document.getElementById("t04").style.fontFamily ="arial";
            document.getElementById("t04").style.fontSize ="12";
            document.getElementById("t04").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("31_TellStickDuo_Temperature:")) //Temperatur tre
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t06").style.color ="white";
            document.getElementById("t06").style.fontFamily ="arial";
            document.getElementById("t06").style.fontSize ="12";
            document.getElementById("t06").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("7_TellStickDuo_Temperature:")) //Temperatur fyra
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t08").style.color ="white";
            document.getElementById("t08").style.fontFamily ="arial";
            document.getElementById("t08").style.fontSize ="12";
            document.getElementById("t08").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("11_TellStickDuo_Temperature:")) //Temperatur fem
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t10").style.color ="white";
            document.getElementById("t10").style.fontFamily ="arial";
            document.getElementById("t10").style.fontSize ="12";
            document.getElementById("t10").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("230_TellStickDuo_Temperature:")) //Temperatur sex
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t12").style.color ="white";
            document.getElementById("t12").style.fontFamily ="arial";
            document.getElementById("t12").style.fontSize ="12";
            document.getElementById("t12").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.search("currDate_Time")!=-1)
          {
          var m = event.data.split(".");
          //alert(m[1]);
          global_n = m[1].split(" ");
          var n = m[1].split(" ");
          //alert(n[1]);
          var today = null;
          var o = parseInt(n[0]);

          switch (o) {
            case 0: today = 'S├Ândag'; break;
            case 1: today = 'Måndag'; break;
            case 2: today = 'Tisdag'; break;
            case 3: today = 'Onsdag'; break;
            case 4: today = 'Torsdag'; break;
            case 5: today = 'Fredag'; break;
            case 6: today = 'L├Ârdag'; break;
            default: today = 'unknown';
          }
          document.getElementById("dd00").style.color ="white";
          document.getElementById("dd00").style.fontFamily ="arial";
          document.getElementById("dd00").style.fontSize ="25";
          document.getElementById("dd00").innerHTML = today+"    "+n[1];
          document.getElementById("tt00").style.color ="white";
          document.getElementById("tt00").style.fontFamily ="arial";
          document.getElementById("tt00").style.fontSize ="25";
          document.getElementById("tt00").innerHTML = n[2];
          }



</script>
  </head>
  <body onload="init()" alink="white" bgcolor="#3A3C69" link="white" text="white"

    vlink="white">
    <center>
      <br>
      <table border="1" width="55%">
        <tbody>
          <tr>
            <!-- Row 0 -->
            <td><text id="dd00"><font font="" color="white" face="arial" size="3">&nbsp;Dag
                  och datum</font></text></td>
            <td><text id="tt00"><font font="" color="white" face="arial" size="3">&nbsp;Tid</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t01"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  ett</font></text></td>
            <td><text id="t02"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t03"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  två</font></text></td>
            <td><text id="t04"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t05"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  tre</font></text></td>
            <td><text id="t06"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t07"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  fyra</font></text></td>
            <td><text id="t08"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t09"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  fem</font></text></td>
            <td><text id="t10"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t11"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  sex</font></text></td>
            <td><text id="t12"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 1 -->
            <td><button id="b01" class="off" onmousedown="TriggerEvent('Bokhylla', this)"

                style="background-color:black"><img src="lamp-on.png" id="i01" align="right">&nbsp;Bokhylla&nbsp;&nbsp;</button></td>
            <td><button id="b02" class="off" onmousedown="TriggerEvent('Garage', this)"

                style="background-color:black"><img src="lamp-on.png" id="i02" align="right">&nbsp;Garage&nbsp;&nbsp;</button></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><button id="bHome" class="off" onmousedown="TriggerEvent('Home', this)"

                style="background-color:black"><img src="lamp-on.png" id="iHome"

                  align="right">&nbsp;Äntligen hemma&nbsp;&nbsp;</button></td>
            <td><button id="bTest" class="off" onmousedown="TriggerEvent('Test', this)"

                style="background-color:black"><img src="lamp-on.png" id="iTest"

                  align="right">&nbsp;Test&nbsp;&nbsp;</button></td>
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
        </tbody>
      </table>
    </center>
    
  </body>
</html>

Re: Webserver

Posted: Wed Jan 27, 2016 11:31 am
by bongolf
krambriw wrote:..or this sample I made earlier will give you some more ideas

Code: Select all

<html lang="sv">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="PRAGMA" content="NO-CACHE">
    <title>Demo EventGhost sample</title>

<style type="text/css">
    .on { 
        border:4px inset;
        color:#369;
        background:#f9d543; 
    }
        
    .off {
        border:4px outset;
        color:#369;
        background:#f9d543; 
    }
</style>

<script type="text/javascript">
wSocket = null;
prot = "";
ip = "";
url = "";


function init() {
      // event handlers for WebSocket:
    wSocket = null;
    prot = "";
    ip = location.host;
    if (location.protocol == "https:") {
        prot = "wss://";
    }
    else {
        prot = "ws://";
    }
    url = prot + ip; //enough for Webserver
      //url = prot + ip + "/ws"; //mandatory for Tornado
      wSocket = new WebSocket(url);
      wSocket.onopen = function() {
          doSend("WebSocket rocks");
      }
      wSocket.onmessage = wsMessage; 
      wSocket.onclose = function() {
        console.log("Web Socket closed.");
      }
 }
   
var global_n = '';


function TriggerEvent(eventname, el)
{
    if(el.className == "on") {
        el.className="off";
        doSend(eventname+'.OFF')
    } else {
        el.className="on";
        doSend(eventname+'.ON')
    }
    return false;
}


function doSend(message){
    wSocket.send(message);
}


function wsMessage() { 

		//alert(event.data);

        if (event.data == "Bokhylla_TellStickDuo_ON")
          {
          document.getElementById("b01").style.backgroundColor="#FBF14D";
          document.getElementById("b01").style.color ="black";
          document.getElementById("b01").className = "on";
          document.getElementById('i01').src = "lamp-on.png";
          document.getElementById("b01").style.fontSize ="20";
          }
        if (event.data == "Bokhylla_TellStickDuo_OFF")
          {
          document.getElementById("b01").style.backgroundColor="black";
          document.getElementById("b01").style.color ="white";
          document.getElementById("b01").className = "off";
          document.getElementById('i01').src = "lamp-off.png";
          document.getElementById("b01").style.fontSize ="20";
          }

        if (event.data == "Garage_TellStickDuo_ON")
          {
          document.getElementById("b02").style.backgroundColor="#FBF14D";
          document.getElementById("b02").style.color ="black";
          document.getElementById("b02").className = "on";
          document.getElementById('i02').src = "lamp-on.png";
          document.getElementById("b02").style.fontSize ="20";
          }
        if (event.data == "Garage_TellStickDuo_OFF")
          {
          document.getElementById("b02").style.backgroundColor="black";
          document.getElementById("b02").style.color ="white";
          document.getElementById("b02").className = "off";
          document.getElementById('i02').src = "lamp-off.png";
          document.getElementById("b02").style.fontSize ="20";
          }

        if (event.data == "Home_TellStickDuo_ON")
          {
          document.getElementById("bHome").style.backgroundColor="#FBF14D";
          document.getElementById("bHome").style.color ="black";
          document.getElementById("bHome").className = "on";
          document.getElementById('iHome').src = "lamp-on.png";
          document.getElementById("bHome").style.fontSize ="20";
          }
        if (event.data == "Home_TellStickDuo_OFF")
          {
          document.getElementById("bHome").style.backgroundColor="black";
          document.getElementById("bHome").style.color ="white";
          document.getElementById("bHome").className = "off";
          document.getElementById('iHome').src = "lamp-off.png";
          document.getElementById("bHome").style.fontSize ="20";
          }

        if (event.data == "Test_TellStickDuo_ON")
          {
          document.getElementById("bTest").style.backgroundColor="#FBF14D";
          document.getElementById("bTest").style.color ="black";
          document.getElementById("bTest").className = "on";
          document.getElementById('iTest').src = "lamp-on.png";
          document.getElementById("bTest").style.fontSize ="20";
          }
        if (event.data == "Test_TellStickDuo_OFF")
          {
          document.getElementById("bTest").style.backgroundColor="black";
          document.getElementById("bTest").style.color ="white";
          document.getElementById("bTest").className = "off";
          document.getElementById('iTest').src = "lamp-off.png";
          document.getElementById("bTest").style.fontSize ="20";
          }

        if (event.data.match("166_TellStickDuo_Temperature:")) //Temperatur ett
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t02").style.color ="white";
            document.getElementById("t02").style.fontFamily ="arial";
            document.getElementById("t02").style.fontSize ="12";
            document.getElementById("t02").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("81_TellStickDuo_Temperature:")) //Temperatur två            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t04").style.color ="white";
            document.getElementById("t04").style.fontFamily ="arial";
            document.getElementById("t04").style.fontSize ="12";
            document.getElementById("t04").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("31_TellStickDuo_Temperature:")) //Temperatur tre
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t06").style.color ="white";
            document.getElementById("t06").style.fontFamily ="arial";
            document.getElementById("t06").style.fontSize ="12";
            document.getElementById("t06").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("7_TellStickDuo_Temperature:")) //Temperatur fyra
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t08").style.color ="white";
            document.getElementById("t08").style.fontFamily ="arial";
            document.getElementById("t08").style.fontSize ="12";
            document.getElementById("t08").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("11_TellStickDuo_Temperature:")) //Temperatur fem
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t10").style.color ="white";
            document.getElementById("t10").style.fontFamily ="arial";
            document.getElementById("t10").style.fontSize ="12";
            document.getElementById("t10").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.match("230_TellStickDuo_Temperature:")) //Temperatur sex
            {
            var m = event.data;
            var temp = m.split('_')[3];
            //alert(temp);
            document.getElementById("t12").style.color ="white";
            document.getElementById("t12").style.fontFamily ="arial";
            document.getElementById("t12").style.fontSize ="12";
            document.getElementById("t12").innerHTML = temp+" C, "+"senaste kontakt: "+global_n[1]+' '+global_n[2];
            }

        if (event.data.search("currDate_Time")!=-1)
          {
          var m = event.data.split(".");
          //alert(m[1]);
          global_n = m[1].split(" ");
          var n = m[1].split(" ");
          //alert(n[1]);
          var today = null;
          var o = parseInt(n[0]);

          switch (o) {
            case 0: today = 'S├Ândag'; break;
            case 1: today = 'Måndag'; break;
            case 2: today = 'Tisdag'; break;
            case 3: today = 'Onsdag'; break;
            case 4: today = 'Torsdag'; break;
            case 5: today = 'Fredag'; break;
            case 6: today = 'L├Ârdag'; break;
            default: today = 'unknown';
          }
          document.getElementById("dd00").style.color ="white";
          document.getElementById("dd00").style.fontFamily ="arial";
          document.getElementById("dd00").style.fontSize ="25";
          document.getElementById("dd00").innerHTML = today+"    "+n[1];
          document.getElementById("tt00").style.color ="white";
          document.getElementById("tt00").style.fontFamily ="arial";
          document.getElementById("tt00").style.fontSize ="25";
          document.getElementById("tt00").innerHTML = n[2];
          }



</script>
  </head>
  <body onload="init()" alink="white" bgcolor="#3A3C69" link="white" text="white"

    vlink="white">
    <center>
      <br>
      <table border="1" width="55%">
        <tbody>
          <tr>
            <!-- Row 0 -->
            <td><text id="dd00"><font font="" color="white" face="arial" size="3">&nbsp;Dag
                  och datum</font></text></td>
            <td><text id="tt00"><font font="" color="white" face="arial" size="3">&nbsp;Tid</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t01"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  ett</font></text></td>
            <td><text id="t02"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t03"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  två</font></text></td>
            <td><text id="t04"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t05"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  tre</font></text></td>
            <td><text id="t06"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t07"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  fyra</font></text></td>
            <td><text id="t08"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t09"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  fem</font></text></td>
            <td><text id="t10"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><text id="t11"><font font="" color="white" face="arial" size="3">&nbsp;Temperatur
                  sex</font></text></td>
            <td><text id="t12"><font font="" color="white" face="arial" size="3">&nbsp;Väntar
                  på data...</font></text></td>
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 1 -->
            <td><button id="b01" class="off" onmousedown="TriggerEvent('Bokhylla', this)"

                style="background-color:black"><img src="lamp-on.png" id="i01" align="right">&nbsp;Bokhylla&nbsp;&nbsp;</button></td>
            <td><button id="b02" class="off" onmousedown="TriggerEvent('Garage', this)"

                style="background-color:black"><img src="lamp-on.png" id="i02" align="right">&nbsp;Garage&nbsp;&nbsp;</button></td>
          </tr>
          <tr>
            <!-- Row 9 -->
            <td><button id="bHome" class="off" onmousedown="TriggerEvent('Home', this)"

                style="background-color:black"><img src="lamp-on.png" id="iHome"

                  align="right">&nbsp;Äntligen hemma&nbsp;&nbsp;</button></td>
            <td><button id="bTest" class="off" onmousedown="TriggerEvent('Test', this)"

                style="background-color:black"><img src="lamp-on.png" id="iTest"

                  align="right">&nbsp;Test&nbsp;&nbsp;</button></td>
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
          <tr>
            <!-- Row 9 -->
          </tr>
        </tbody>
      </table>
    </center>
    
  </body>
</html>
Thank you, this looks close to what I am trying to do!

But how does it look on the EG-end?
How do you send the events/data to the web server?

Re: Webserver

Posted: Wed Jan 27, 2016 2:27 pm
by krambriw
How I send???

The function doSend('string') is responsible for sending messages via websockets to the webserver.

When you click on a button on the page (check the html part of the code) it calls the function TriggerEvent (onmousedown="TriggerEvent('Test', this)"). The TriggerEvent function changes the state of your button and then calls doSend

I think best is if you try it out a bit, you will notice events in the EG log if you have it up and running correctly

Re: Webserver

Posted: Wed Jan 27, 2016 2:58 pm
by bongolf
I have it up and running,and the buttons are working as you are describing and events are coming in to the EG-log. So far so good ;-)

But what I am wondering about is how you get the temperatures to the webpage.
Temperatur ett Väntar på data...
Temperatur två Väntar på data...
...

I can see in the code that you are matching:
"XX_TellStickDuo_Temperature:" to variabel "t0Y"
But how do you send that event/data?
(There is a lot of options in the Webserver-plugin for sending/broadcasting messages/data/values...)

Re: Webserver

Posted: Wed Jan 27, 2016 3:29 pm
by krambriw
OK, I see

Yes, as you say, there are several ways to do it. In the javascript code you have to filter out the data from the event, that's where I in some cases sometimes use match or find.

The following ways

- if you have a RFXtrx and use the RFXtrx plugin, it has built-in support for sending events to the webserver via websockets
- you can use a python script in a macro that you trigger with the selected events (see example below)
- you can use a macro and a webserver server-client action (see picture below)
Skärmklipp.JPG

Code: Select all

import time
a = str(eg.event.payload)
b = str(
    time.strftime("%H%M", time.localtime())
)
c = b+' '+a
eg.plugins.Webserver.BroadcastMessage(c, False)

Re: Webserver

Posted: Wed Jan 27, 2016 6:30 pm
by bongolf
That is perfect!
Now I have something to play with.
Thanks a lot!

Re: Webserver

Posted: Sun Jan 31, 2016 3:38 pm
by bongolf
I have played around for a while and it is working good. The webpage is updated via the web sockets.
But every time a load/reload my webpage I get these errors in EG
prntscrn.tiff
Can anyone figure out why?

Code: Select all

<html lang="sv">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="PRAGMA" content="NO-CACHE">
    <meta http-equiv="refresh" content="600">
    <title>DB program info</title>


<script type="text/javascript">
wSocket = null;
prot = "";
ip = "";
url = "";


function init() 
{
    // event handlers for WebSocket:
    wSocket = null;
    prot = "";
    ip = location.host;
    if (location.protocol == "https:") 
    {
        prot = "wss://";
    }
    else 
    {
        prot = "ws://";
    }
    url = prot + ip; //enough for Webserver
      //url = prot + ip + "/ws"; //mandatory for Tornado
      wSocket = new WebSocket(url);
      wSocket.onopen = function() 
      {
          doSend("WebSocket rocks");
      }
      wSocket.onmessage = wsMessage; 
      wSocket.onclose = function() 
      {
        console.log("Web Socket closed.");
      }
}   
function wsMessage() 
{ 

      //alert(event.data);  //G├Âr en dialogruta om den ├ñr aktiv
	var m = event.data;
	var item = m.split('|')[0];
        var kanal = m.split('|')[1];
	var program = m.split('|')[2];
	var tid = m.split('|')[3];
	var nextprogram = m.split('|')[4];

	// Senaste event
	document.getElementById("t_event").innerHTML = m;


        if (item=="socket_dbinfo") //Temperatur planta
            {
            document.getElementById("t_kanal").innerHTML = kanal;
            document.getElementById("t_program").innerHTML = program;
            document.getElementById("t_tid").innerHTML = tid;
            document.getElementById("t_nextprogram").innerHTML = nextprogram; 
            }

}


</script>
  </head>
 <body onload="init()" alink="white" bgcolor="#000000" link="white" text="white" 

vlink="white">
<p style="font-family:arial;font-size:80%;color:white">
<br>        			<!-------  Senaste event ---------->
Senaste event:
<br> 
<text id="t_event">Väntar...</text>
<br> 
<text id="t_kanal">{{eg.globals.kanal}}</text> 
<br>
<text id="t_program">{{eg.globals.program}}</text> 
<br>
<font color="grey">
<text id="t_tid">{{eg.globals.tvtime}}</text> min till: <text id="t_nextprogram">

{{eg.globals.nextprogram}}</font></text>  
 
  </body>
</html>

Re: Webserver

Posted: Mon Feb 01, 2016 9:42 pm
by bongolf
Never mind my previous post, cause today there are no more error messages in the log!
Strange, but you can't find a problem that isn't there...

Re: Webserver

Posted: Sun Feb 07, 2016 2:03 am
by wysocki
I don't know the exact pattern, but sometimes the webserver is not running, mostly after I restart EG. The EG log shows "Webserver started as unsecured (http://) on port 88" but I can't access it from any computer, (even the server itself). Chrome browser says "This webpage is not available ERR_CONNECTION_REFUSED". I finally got it to restart when I restarted the server computer. Downloaded the latest version, still the same issue.

What is the recommended way to restart the webserver and why wouldn't it start when I just restart EG?

Re: Webserver

Posted: Sun Feb 07, 2016 11:08 am
by Sem;colon
For me, this happens only when EventGhost didn't shut down completely (for example when it crashes or wenn you kill it with the task manager)
It looks like processes that were created from eventghost (e.g. the ping plugin creates ping.exe processes) are not killed when EventGhost dies and the system waits for them before releasing the ports.
If I kill these processes manually before starting EG again, it works.

Everything works fine when I close/restart EventGhost the normal way.

Re: Webserver

Posted: Mon Feb 08, 2016 11:38 pm
by wysocki
Found the problem! I started by pulling almost everything out of my xml configuration and slowly reloading it. The problem was in the section that has the webserver/musicbee macros (understandably I guess). However I somehow noticed that when I closed EG, the Musicbee was still running and restarting EG didn't restart the server. When I rebooted, Musicbee is not running when EG starts and it initialized the webserver properly. If I manually close Musicbee in between restarts of EG, it works fine! Maybe this should be done by EG?

Re: Webserver

Posted: Wed Feb 10, 2016 4:41 am
by wysocki
New questions about Webserver:

1. Why isn't there a "Periodically Broadcast Values" action? I have a mailbox monitor that sets a variable when the box is opened and I broadcast that variable to all clients upon that event. However, I'd like to continue to broadcast every 5 minutes until someone gets the mail and resets the variable.

2. I can't figure out how to use Periodically Broadcast Data or the others, could they be used to do this (or point me to some docs)?

3. What's the difference between "Stop all periaodic tasks" and "Stop Periodic tasks (broadcast/oneclient)"?
All times are UTC
Page 11 of 23

Powered by phpBB® Forum Software © phpBB Limited