Web control improvments

P

pikoko

Member
Id like to see a web page that comes with vixen that alows you to use all the commands and all you have to do is start the server and connect the client and put in "http://192.168.1.112:41402/gui/" and it bring up a web page base gui that lets you control vixen via the web for testing. so we can use the web page instead of login in to the computer in the house from the yard we could use our phone to control it or in my case id be using my ipod touch
 
a web page using ajax i think would be the nicest. im looking into it but me not being good at programming id likly butcher it or get something working but it'd be like needlessly complex or long
 
could do something like using ajax to pull the xml from .pro file in the profile folder cause you could call
Code: 
<outputs>0,1,2,3,4,5,6,7</outputs>
or
Code: 
  <ChannelObjects>
    <Channel color="-1" output="0" id="633607085519375000" enabled="True">Channel 1</Channel>
    <Channel color="-1" output="1" id="633607085520156250" enabled="True">Channel 2</Channel>
    <Channel color="-1" output="2" id="633607085520156250" enabled="True">Channel 3</Channel>
    <Channel color="-1" output="3" id="633607085520156250" enabled="True">Channel 4</Channel>
    <Channel color="-1" output="4" id="633607085520156250" enabled="True">Channel 5</Channel>
    <Channel color="-1" output="5" id="633607085520156250" enabled="True">Channel 6</Channel>
    <Channel color="-1" output="6" id="633607085520156250" enabled="True">Channel 7</Channel>
    <Channel color="-1" output="7" id="633607085520156250" enabled="True">Channel 8</Channel>
  </ChannelObjects>
 
so i put a simple web page that pulls the channel numbers from a .pro(profile) file which you just rename to a .xml and put it in the directory with the html page.

Test page
the page right now only loads the channels and lets you control 9 channels.
we are(me and Josh) are working on adding the play, pause and, stop buttons.

here's the source

xmltest.html
Code: 
<html><head>

<title>layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="index2_files/channel.js" type="text/javascript"></script>
</head><body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<!-- ImageReady Slices (layout.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="1280" height="885">
	<tbody><tr>
		<td colspan="7">
			<img src="index2_files/index_01.gif" alt="" width="1280" height="29"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="index2_files/index_02.gif" alt="" usemap="#index_02_Map" border="0" width="93" height="149"></td>
		<td>
			<img src="index2_files/channel%2520number.htm" alt="" width="39" height="23"></td>
		<td colspan="2" rowspan="2">
			<img src="index2_files/index_04.gif" alt="" usemap="#index_04_Map" border="0" width="147" height="149"></td>
		<td>
			<img src="index2_files/time.htm" alt="" width="76" height="23"></td>
		<td colspan="2" rowspan="2">
			<img src="index2_files/index_06.gif" alt="" width="925" height="149"></td>
	</tr>
	<tr>
		<td>
			<img src="index2_files/index_07.gif" alt="" usemap="#index_07_Map" border="0" width="39" height="126"></td>
		<td>
			<img src="index2_files/index_08.gif" alt="" width="76" height="126"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2"> <div id="copy" width="242" height="706"><table border="1"><tbody><tr></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=1" target="firstframe">Channel 1</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=2" target="firstframe">Channel 2</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=3" target="firstframe">Channel 3</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=4" target="firstframe">Channel 4</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=5" target="firstframe">Channel 5</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=6" target="firstframe">Channel 6</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=7" target="firstframe">Channel 7</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=8" target="firstframe">Channel 8</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=9" target="firstframe">Channel 9</a></td></tr><tr><td><a href="http://127.0.0.1:41402/vixen/command.html?action=toggle&channel=0" target="firstframe">All</a></td></tr></tbody></table></div></td>
		<td colspan="3">
			<div id="body" width="1020" height="687" alt=""> </div></td>
		<td rowspan="2">
			<img src="index2_files/index_11.gif" alt="" width="18" height="706"></td>
	</tr>
	<tr>
		<td colspan="3"> </td>
	</tr>
	<tr>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="93" height="1"></td>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="39" height="1"></td>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="110" height="1"></td>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="37" height="1"></td>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="76" height="1"></td>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="907" height="1"></td>
		<td>
			<img src="index2_files/spacer.gif" alt="" width="18" height="1"></td>
	</tr>
</tbody></table>
<map name="index_02_Map">
<area shape="rect" alt="load channels" coords="17,0,93,23" onclick="loadXMLDoc('icicle.xml')">
</map>
<map name="index_04_Map">
<area shape="rect" alt="Loop" coords="95,25,125,47" href="#">
<area shape="rect" alt="Stop" coords="63,25,94,46" href="#">
<area shape="rect" alt="Pause" coords="41,25,62,47" href="#">
<area shape="rect" alt="Plays from selected spot." coords="9,25,28,48" href="#">
<area shape="rect" alt="play" coords="0,25,8,48" href="#">
</map>
<map name="index_07_Map">
<div id='play'></div>
</map>
<!-- End ImageReady Slices -->
</body></html>

Channel.js
Code: 
var xmlhttp;
var chan;
var client=prompt("Enter Client name","vixen");
var host=prompt("Enter server ip","127.0.0.1");
play="<area shape='rect' alt='play' coords='0,25,8,48' href=http://"+host+":41402/request.html?action=execute">"
document.getElementById('play').innerHTML=play;
function loadXMLDoc(url)
{

xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Mozilla, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5, IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=onResponse;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function onResponse()
{

chan=0;
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
  {
  alert("Problem retrieving XML data " + xmlhttp.Status);
  return;
  }

txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("ChannelObjects");
for (i=0;i<x.length;i++)
  {
  txt=txt + "<tr>";
  xx=x[0].getElementsByTagName("Channel"); //this tells the webpage to load the channel section from the channelOjects
   {
    try
      {
	  for (e=0;e<xx.length;e++)
		{
		chan++
		txt=txt + "<tr><td><a href=http://"+host+":41402/"+client+"/command.html?action=toggle&channel="+chan+" target='firstframe'>" + xx[e].firstChild.nodeValue + "</a></td></tr>";
		}
	  }
    catch (er)
      {
      txt=txt + "<td><a href=http://"+host+":41402/"+client+"/command.html?action=toggle&channel=0>All</a></td>";
      }
    }
	
  txt=txt + "</tr>";
  txt=txt + "<tr>";
  txt=txt + "<td><a href=http://"+host+":41402/"+client+"/command.html?action=toggle&channel=0 target='firstframe'>All</a></td>";
  txt=txt + "</tr>";
  }
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;
}
 
Last edited:
just to make it clear, any input is appreciated, we both are lacking in skills to put it plain and simple.

Hopefully it will be useable this year, and great next year.
 
You must log in or register to reply here.
Back
Top