danward79
August 22nd, 2005, 01:17 PM
Hi
I have been playing around with the webserver, even got me a nice domain name to make getting to it easier, from anywhere.
Now, basically I ripped apart Ron's example to come up with, what you see in the pic below.
What I would really like to see now is the LED indicators on the right monitored by AJAX.
So far I have the code below, but am a html mumpty so am a bit clueless as to how I got there!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dan's Webserver</title><meta http-equiv="Pragma" content="no-cache">
<style type="text/css">
BODY { font-family: sans-serif;
margin:0px;
background-repeat: repeat-y;
background-position: right;
}
TABLE.p { border-right: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
background: #EEEEEE;
}
TH.p { border-left: solid 1px black;
border-Bottom: solid 1px black; background:#EEEEEE; text-align:center;
}
TH.p2 { border-left: solid 1px black;
border-Bottom: solid 1px black; background:#FFFFFF; text-align:center;
}
TD.p { border-left: solid 1px black; background:#EEEEEE; padding-left:10px; padding-right:10px; padding-top:3px;}
TD.p2 { border-left: solid 1px black; background:#FFFFFF; padding-left:10px; padding-right:10px; padding-top:3px;}
TD.main { padding: 50px; }
TABLE.main { padding:0px; }
</style>
<SCRIPT type="text/javascript">
var formRequester = null;
window.onload = init;
/* Initialisation for JS capable browsers */
function init()
{
var Form1 = document.getElementById("varform");
var Form2 = document.getElementById("eventform");
var Form3 = document.getElementById("osdform");
var Data1 = document.getElementById("Data1");
Data1.onkeyup = sendvarForm;
Form1.onsubmit = submitform;
Form2.onsubmit = submitEventForm;
Form3.onsubmit = submitOSDForm;
return true;
}
/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeForm()
{
var Data2 = document.getElementById("Data2");
// If XMLHR object has finished retrieving the data
if (formRequester.readyState == 4)
{
// If the data was retrieved successfully
try
{
if (formRequester.status == 200)
{
//sentForm();
Data2.value = formRequester.responseText;
}
// IE returns a status code of 0 on some occasions, so ignore this case
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + formRequester.statusText);
}
}
catch (error)
{
}
}
return true;
}
/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeEventForm()
{
var Data2 = document.getElementById("EventStatus");
// If XMLHR object has finished retrieving the data
if (formRequester.readyState == 4)
{
// If the data was retrieved successfully
try
{
if (formRequester.status == 200)
{
//sentForm();
Data2.value = formRequester.responseText;
}
// IE returns a status code of 0 on some occasions, so ignore this case
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + formRequester.statusText);
Data2.value = formRequester.statusText;
}
}
catch (error)
{
}
}
return true;
}
/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeOSDForm()
{
var Data2 = document.getElementById("OSDStatus");
// If XMLHR object has finished retrieving the data
if (formRequester.readyState == 4)
{
// If the data was retrieved successfully
try
{
if (formRequester.status == 200)
{
//sentForm();
Data2.value = formRequester.responseText;
}
// IE returns a status code of 0 on some occasions, so ignore this case
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + formRequester.statusText);
Data2.value = formRequester.statusText;
}
}
catch (error)
{
}
}
return true;
}
function submitform()
{
return false;
}
function submitEventForm()
{
/* Send information via XMLHR */
var Event = document.getElementById("Event");
var Device = document.getElementById("Device");
var Data2 = document.getElementById("EventStatus");
var CGIString = "Event=" + Event.value + "&Device="+Device.value;
try
{
formRequester = new XMLHttpRequest();
}
catch (error)
{
try
{
formRequester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
formRequester = null;
return false;
}
}
Data2.value="Working...";
formRequester.onreadystatechange = onreadystatechangeEventForm;
formRequester.open("GET", "ajaxreq.lhtml?" + CGIString);
formRequester.send(null);
return false;
}
function submitOSDForm()
{
/* Send information via XMLHR */
var OSD = document.getElementById("OSDtext");
var lFontSize = document.getElementById("FontSize");
var Monitor = document.getElementById("Monitor");
var Data2 = document.getElementById("OSDStatus");
var CGIString = "OSD=" + OSD.value + "&FontSize="+lFontSize.value+ "&Monitor="+Monitor.value;
try
{
formRequester = new XMLHttpRequest();
}
catch (error)
{
try
{
formRequester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
formRequester = null;
return false;
}
}
Data2.value="Working...";
formRequester.onreadystatechange = onreadystatechangeOSDForm;
formRequester.open("GET", "ajaxreq.lhtml?" + CGIString);
formRequester.send(null);
return false;
}
function sendvarForm()
{
/* Send information via XMLHR */
var Data1 = document.getElementById("Data1");
var CGIString = "Data=" + Data1.value;
try
{
formRequester = new XMLHttpRequest();
}
catch (error)
{
try
{
formRequester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
formRequester = null;
return false;
}
}
formRequester.onreadystatechange = onreadystatechangeForm;
formRequester.open("GET", "ajaxreq.lhtml?" + CGIString);
formRequester.send(null);
return false;
}
</SCRIPT>
</head>
<body>
<td class="main" valign="top">
<H2><A name="plugins" id="plugins">Lighting and Appliance Control</A></H2>
<CENTER>
<TABLE border="0" cellpadding="2" cellspacing="0" class="p">
<TR>
<TH align="left" class="p">
Light / App ID
</TH>
<TH align="left" class="p2">Power</TH>
<TH align="left" class="p2"></TH>
</TR>
<%
-- LuaScripting in the Webpage!
local l = X10Modules
local load,status
local lighttable='';
for i,v in pairs(l) do
if l[i].CurrentState == 1 then
load = 'poweroff.png (working_to_1.lhtml?poweroff='.. i ..')'
status = 'ledgreen.png'
else
load = 'power.png (working_to_1.lhtml?poweron='.. i ..')'
status = 'ledred.png'
end
if l[i].InUse == 1 then
lighttable = '<tr><td class="p">'.. i ..'</td><td class="p2">' .. load .. '</td><td class="p2">' .. status ..'</td></tr>\n'
webserver:print(lighttable)
end
end
%>
</TABLE>
</CENTER>
</td>
<TABLE class="main" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD class="main" valign="top">
<FORM id="varform" name="varform">Variable Name: <INPUT type="text" name="Data1" id="Data1">
<TEXTAREA name="Data2" id="Data2" cols="15" rows="1"></TEXTAREA>
</FORM>
Data1 = _VERSION
Data1.sendvarForm
<%
Data1 = X10Modules
webserver:print (Data1, Data2)
%>
</TD>
</TR>
</TABLE>
</body>
</html>
Any ideas how I would mod this to get to where I want?
:oops:
I have been playing around with the webserver, even got me a nice domain name to make getting to it easier, from anywhere.
Now, basically I ripped apart Ron's example to come up with, what you see in the pic below.
What I would really like to see now is the LED indicators on the right monitored by AJAX.
So far I have the code below, but am a html mumpty so am a bit clueless as to how I got there!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dan's Webserver</title><meta http-equiv="Pragma" content="no-cache">
<style type="text/css">
BODY { font-family: sans-serif;
margin:0px;
background-repeat: repeat-y;
background-position: right;
}
TABLE.p { border-right: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
background: #EEEEEE;
}
TH.p { border-left: solid 1px black;
border-Bottom: solid 1px black; background:#EEEEEE; text-align:center;
}
TH.p2 { border-left: solid 1px black;
border-Bottom: solid 1px black; background:#FFFFFF; text-align:center;
}
TD.p { border-left: solid 1px black; background:#EEEEEE; padding-left:10px; padding-right:10px; padding-top:3px;}
TD.p2 { border-left: solid 1px black; background:#FFFFFF; padding-left:10px; padding-right:10px; padding-top:3px;}
TD.main { padding: 50px; }
TABLE.main { padding:0px; }
</style>
<SCRIPT type="text/javascript">
var formRequester = null;
window.onload = init;
/* Initialisation for JS capable browsers */
function init()
{
var Form1 = document.getElementById("varform");
var Form2 = document.getElementById("eventform");
var Form3 = document.getElementById("osdform");
var Data1 = document.getElementById("Data1");
Data1.onkeyup = sendvarForm;
Form1.onsubmit = submitform;
Form2.onsubmit = submitEventForm;
Form3.onsubmit = submitOSDForm;
return true;
}
/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeForm()
{
var Data2 = document.getElementById("Data2");
// If XMLHR object has finished retrieving the data
if (formRequester.readyState == 4)
{
// If the data was retrieved successfully
try
{
if (formRequester.status == 200)
{
//sentForm();
Data2.value = formRequester.responseText;
}
// IE returns a status code of 0 on some occasions, so ignore this case
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + formRequester.statusText);
}
}
catch (error)
{
}
}
return true;
}
/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeEventForm()
{
var Data2 = document.getElementById("EventStatus");
// If XMLHR object has finished retrieving the data
if (formRequester.readyState == 4)
{
// If the data was retrieved successfully
try
{
if (formRequester.status == 200)
{
//sentForm();
Data2.value = formRequester.responseText;
}
// IE returns a status code of 0 on some occasions, so ignore this case
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + formRequester.statusText);
Data2.value = formRequester.statusText;
}
}
catch (error)
{
}
}
return true;
}
/* Execute the action which has been associated with the completion of this object */
function onreadystatechangeOSDForm()
{
var Data2 = document.getElementById("OSDStatus");
// If XMLHR object has finished retrieving the data
if (formRequester.readyState == 4)
{
// If the data was retrieved successfully
try
{
if (formRequester.status == 200)
{
//sentForm();
Data2.value = formRequester.responseText;
}
// IE returns a status code of 0 on some occasions, so ignore this case
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + formRequester.statusText);
Data2.value = formRequester.statusText;
}
}
catch (error)
{
}
}
return true;
}
function submitform()
{
return false;
}
function submitEventForm()
{
/* Send information via XMLHR */
var Event = document.getElementById("Event");
var Device = document.getElementById("Device");
var Data2 = document.getElementById("EventStatus");
var CGIString = "Event=" + Event.value + "&Device="+Device.value;
try
{
formRequester = new XMLHttpRequest();
}
catch (error)
{
try
{
formRequester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
formRequester = null;
return false;
}
}
Data2.value="Working...";
formRequester.onreadystatechange = onreadystatechangeEventForm;
formRequester.open("GET", "ajaxreq.lhtml?" + CGIString);
formRequester.send(null);
return false;
}
function submitOSDForm()
{
/* Send information via XMLHR */
var OSD = document.getElementById("OSDtext");
var lFontSize = document.getElementById("FontSize");
var Monitor = document.getElementById("Monitor");
var Data2 = document.getElementById("OSDStatus");
var CGIString = "OSD=" + OSD.value + "&FontSize="+lFontSize.value+ "&Monitor="+Monitor.value;
try
{
formRequester = new XMLHttpRequest();
}
catch (error)
{
try
{
formRequester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
formRequester = null;
return false;
}
}
Data2.value="Working...";
formRequester.onreadystatechange = onreadystatechangeOSDForm;
formRequester.open("GET", "ajaxreq.lhtml?" + CGIString);
formRequester.send(null);
return false;
}
function sendvarForm()
{
/* Send information via XMLHR */
var Data1 = document.getElementById("Data1");
var CGIString = "Data=" + Data1.value;
try
{
formRequester = new XMLHttpRequest();
}
catch (error)
{
try
{
formRequester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
formRequester = null;
return false;
}
}
formRequester.onreadystatechange = onreadystatechangeForm;
formRequester.open("GET", "ajaxreq.lhtml?" + CGIString);
formRequester.send(null);
return false;
}
</SCRIPT>
</head>
<body>
<td class="main" valign="top">
<H2><A name="plugins" id="plugins">Lighting and Appliance Control</A></H2>
<CENTER>
<TABLE border="0" cellpadding="2" cellspacing="0" class="p">
<TR>
<TH align="left" class="p">
Light / App ID
</TH>
<TH align="left" class="p2">Power</TH>
<TH align="left" class="p2"></TH>
</TR>
<%
-- LuaScripting in the Webpage!
local l = X10Modules
local load,status
local lighttable='';
for i,v in pairs(l) do
if l[i].CurrentState == 1 then
load = 'poweroff.png (working_to_1.lhtml?poweroff='.. i ..')'
status = 'ledgreen.png'
else
load = 'power.png (working_to_1.lhtml?poweron='.. i ..')'
status = 'ledred.png'
end
if l[i].InUse == 1 then
lighttable = '<tr><td class="p">'.. i ..'</td><td class="p2">' .. load .. '</td><td class="p2">' .. status ..'</td></tr>\n'
webserver:print(lighttable)
end
end
%>
</TABLE>
</CENTER>
</td>
<TABLE class="main" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD class="main" valign="top">
<FORM id="varform" name="varform">Variable Name: <INPUT type="text" name="Data1" id="Data1">
<TEXTAREA name="Data2" id="Data2" cols="15" rows="1"></TEXTAREA>
</FORM>
Data1 = _VERSION
Data1.sendvarForm
<%
Data1 = X10Modules
webserver:print (Data1, Data2)
%>
</TD>
</TR>
</TABLE>
</body>
</html>
Any ideas how I would mod this to get to where I want?
:oops: