Creating your own webinterface

To make it easier for other users. Im posting my results on creating your own webinterface.
As I’m new to javascript / xhtml my code is probarbly not the best but its great for the search engine and its makes it easier to copy-paste ;D
For let me say that i have the Denon plugin installed but in the example im not using it. Because I use my receiver a lot, and also al the available zones. So why create al lot of button’s my self while the webinterface it self is OK (maybe i will do it in the future :wink: )

First the code to for the iframes (there is probarbly a xhtml option for it but as a first setup, its fine)

[code]

Test pagina
[/code] The reason i put the main zone at the bottom is because the page which is loaded needs more width. I placed the x.x in the ip-adress which needs to be changed to your own settings.

Now the code of knopjes.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(deURL, naam, response)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
//xmlhttp.responseText
xmlhttp.onreadystatechange=function()
  {
   document.getElementById(response).innerHTML=naam ;
    
  }
// your vera ip needs to be filled on the line below
xmlhttp.open("GET","http://192.168.x.x:3480/data_request?id=action&DeviceNum="+deURL,true);
xmlhttp.send();

}

</script>
<style type"text/css">
div.wrapper { 
width:510px; 
} 
div.links { 
width:175px; 
float:left; 
text-align:left; 
vertical-align:top; 
} 
div.mid { 
width:175px; 
float:left; 
text-align:right; 
vertical-align:top; 
} 
div.rechts { 
width:150px; 
float:right; 
text-align:left; 
vertical-align:top; 
} 
div.cv { 
width:35px; 
float:left; 
text-align:left; 
vertical-align:top; 
}
hr { 
clear:both; 
display:block; 
visibility:hidden;}
</style>
</head>
<body>
<div class="wrapper">
<div class="links"><button type="button" id="Keuken uit" onclick="loadXMLDoc('11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0', this.id,'r1')">Keuken</button></div> <div class="mid"> <button type="button" id="Keuken aan" onclick="loadXMLDoc('11&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1', this.id,'r1')">Keuken aan</button></div><div id="r1" class="rechts"></div>
<hr />
<div class="links"><button type="button" id="Woonkamer uit" onclick="loadXMLDoc('4&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0', this.id,'r2')">Woonkamer</button></div> <div class="mid"> <button type="button" id="Woonkamer aan" onclick="loadXMLDoc('4&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1', this.id,'r2')">Woonkamer</button></div><div id="r2" class="rechts"></div>
<hr />
<div class="links"><button type="button" id="Eetkamer uit" onclick="loadXMLDoc('10&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0', this.id,'r3')">Eetkamer</button></div> <div class="mid"> <button type="button" id="Eetkamer aan" onclick="loadXMLDoc('10&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1', this.id,'r3')">Eetkamer</button></div><div id="r3" class="rechts"></div>
<hr />
<div class="links"><button type="button" id="TV uit" onclick="loadXMLDoc('61&serviceId=urn:micasaverde-com:serviceId:DiscretePower1&action=Off', this.id,'r4')">TV</button></div> <div class="mid"> <button type="button" id="TV aan" onclick="loadXMLDoc('61&serviceId=urn:micasaverde-com:serviceId:DiscretePower1&action=On', this.id,'r4')">TV</button></div><div id="r4" class="rechts"></div>
<hr />
<div class="links"><button type="button" id="Slaapkamer uit" onclick="loadXMLDoc('13&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0', this.id,'r5')">Slaapkamer</button></div> <div class="mid"> <button type="button" id="Slaapkamer aan" onclick="loadXMLDoc('13&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1', this.id,'r5')">Slaapkamer</button></div><div id="r5" class="rechts"></div>
<hr />
<div class="links"><button type="button" id="Overloop uit" onclick="loadXMLDoc('12&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=0', this.id,'r6')">Overloop</button></div> <div class="mid"> <button type="button" id="Overloop aan" onclick="loadXMLDoc('12&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=1', this.id,'r6')">Overloop</button></div><div id="r6" class="rechts"></div>
<hr />
<div class="cv"><button type="button" id="CV pomp uit" onclick="loadXMLDoc('45&serviceId=urn:upnp-org:serviceId:HVAC_UserOperatingMode1&action=SetModeTarget&NewModeTarget=Off', this.id,'r7')">UIT</button></div><div class="cv"><button type="button" id="16 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=16', this.id,'r7')">16</button></div><div class="cv"><button type="button" id="17 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=17', this.id,'r7')">17</button></div><div class="cv"><button type="button" id="18 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=18', this.id,'r7')">18</button></div><div class="cv"><button type="button" id="19 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=19', this.id,'r7')">19</button></div><div class="cv"><button type="button" id="20 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=20', this.id,'r7')">20</button></div><div class="cv"><button type="button" id="21 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=21', this.id,'r7')">21</button></div><div class="cv"><button type="button" id="22 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=22', this.id,'r7')">22</button></div><div class="cv"><button type="button" id="23 graden" onclick="loadXMLDoc('44&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1_Heat&action=SetCurrentSetpoint&NewCurrentSetpoint=23', this.id,'r7')">23</button></div><div class="cv"><button type="button" id="CV pomp aan" onclick="loadXMLDoc('45&serviceId=urn:upnp-org:serviceId:HVAC_UserOperatingMode1&action=SetModeTarget&NewModeTarget=HeatOn', this.id,'r7')">AAN</button></div><div id="r7" class="rechts"></div>
</div>


</body>
</html>

##I’ll explain the code later if needed…

The result of this is attached in this post, I’ve paid little attention to the make-up as i coded it all in notepad :smiley: