In der Annahme, dass das vielleicht jemand irgendwann einmal nachbauen möchte, hänge ich unten mal meinen Code an.
Wie Ihr an Hand der Screenshots erkennen könnt, habe ich auch in den verschiedenen CSS etwas gewütet.
Der Übersicht Willen habe ich das relativ große Display des iPads in 2 Spalten aufgeteilt (Spalte 2 ist aber noch nicht "belegt").
Links werden die wichtigsten Schalter dargestellt, rechts kommen dann entweder noch welche hinzu, oder ich baue die Wetter/ Webcam-Anzeige dort ein. Mal sehen
Um die Temperatur z.B. im Wohnzimmer zu Ändern, muss man nur auf die Zeile "Wohnzimmer ($Temp °C)" clicken - ähh touchen.
Dann poppt das Spinning-Wheel auf und man kann die gewünschte Temperatur einstellen. Ein Touch auf "Done" übernimmt den Wert.
Auf dem Display wird der Wert zwar gleich übernommen, allerdings erst beim nächsten Kontakt der CCU mit dem Thermostat auch dort gesetzt.
In meinem Fall wird periodisch ein Script gestartet, das den gesetzten Wert mit der Ist-Temperatur vergleicht und dann entsprechend den Aktor
"Lüfter Wohnzimmer" ein- bzw. ausschaltet (ist eine Elektro-/ Nachtspeicherheizung). Systembedingt ist das dann logischerweise etwas verzögert:
Temperatur setzen -> warten bis zum Thermostat übertragen -> warten bis das Script startet -> Aktor schalten.
Nur am Rande noch:
Weiß jemand wie sich die Temperaturfühler verhalten, wenn die Temperatur über den in den Specs angegebenen 79.9°C bewegt?
Der Wert für die Sauna ist derzeit nur von einem "Platzhalter-Thermometer" übernommen, weil ich den Sensor mit abgesetztem Temp-Fühler noch nicht habe,
bzw. nicht kaufen möchte, wenn damit die tatsächliche Saunatemperatur gar nicht angezeigt werden kann.
Nun aber genug der Worte, hier der Code:
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" id="iphone-viewport" content="minimum-scale=1.0, initial-scale=1.1, width=device-width, user-scalable=no"/>
<link rel="apple-touch-icon" href="icon.png"/>
<link rel="stylesheet" type="text/css" href="css/iwebkit.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.2.custom.css"/>
<link rel="stylesheet" type="text/css" href="css/spinningwheel.css" media="all"/>
<link href="css/iwebkit.css" rel="stylesheet" media="screen" type="text/css" />
<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/spinningwheel.js?v=1.4"></script>
<script type="text/javascript" src="includes/iwebkit_functions.js" ></script>
<script type="text/javascript" src="includes/global_style.js"></script>
<script type="text/javascript" src="includes/custom_functions.js"></script>
<script type="text/javascript" src="../../includes/globals.inc.js"></script>
<script type="text/javascript" src="../../includes/js/functions.js"></script>
<script type="text/javascript" src="../../includes/js/slideshow.js"></script>
<script type="text/javascript" src="../../includes/js/json-minified.js"></script>
<script type="text/javascript" src="../../includes/js/regaHss_functions.js"></script>
<script type="text/javascript" src="../../includes/js/site_functions.js"></script>
<script type="text/javascript" src="../../includes/js/xmlrpc_functions.js"></script>
<script type="text/javascript" src="../../includes/js/phpSession_functions.js"></script>
<script type="text/javascript" src="../../includes/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../includes/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="../../includes/js/prototype.js"></script>
<script type="text/javascript">
// start init function on window.load
// starte init Funktion bei window.load
Event.observe(window, "load", init);
// config-array with all devices/variables,etc. that will be updated periodically
// Konfigurationsarray mit allen Geräten/Variablen, usw. die regelmäÃig aktualisiert werden
var SITE_devicesArray = {
'ID01':{'INTERFACE':'HSS', 'SN':'Wecker','HTML_CONTAINER':'SysVar_Wecker','TYP':'REGAHSS_VARIABLE_STATE_IO'},
'ID02':{'INTERFACE':'HSS', 'SN':'Weckzeit','HTML_CONTAINER':'SysVar_Weckzeit','TYP':'REGAHSS_VARIABLE_TEXT'},
'ID03':{'INTERFACE':'RF', 'SN':'GEQ0132574:1', 'HTML_CONTAINER':'swt_general','TYP':'SWITCH'},
'ID04':{'INTERFACE':'RF', 'SN':'HEQ0149529:1', 'HTML_CONTAINER':'swt_ladung','TYP':'SWITCH'},
'ID05':{'INTERFACE':'RF', 'SN':'HEQ0149529:2', 'HTML_CONTAINER':'swt_luefterwz','TYP':'SWITCH'},
'ID06':{'INTERFACE':'RF', 'SN':'HEQ0149529:3', 'HTML_CONTAINER':'swt_boiler','TYP':'SWITCH'},
'ID07':{'INTERFACE':'RF', 'SN':'HEQ0149529:4', 'HTML_CONTAINER':'swt_luefterapp','TYP':'SWITCH'},
'ID08':{'INTERFACE':'RF', 'SN':'IEQ0020582:1', 'HTML_CONTAINER':'swt_befeuchter','TYP':'SWITCH'},
'ID09':{'INTERFACE':'RF', 'SN':'IEQ0020582:2', 'HTML_CONTAINER':'sauna','TYP':'SWITCH'},
// 'ID10':{'INTERFACE':'RF', 'SN':'IEQ0020582:3', 'HTML_CONTAINER':'swt_unused3','TYP':'SWITCH'},
// 'ID11':{'INTERFACE':'RF', 'SN':'IEQ0020582:4', 'HTML_CONTAINER':'swt_unused4','TYP':'SWITCH'},
// 'ID12':{'INTERFACE':'RF', 'SN':'HEQ0102586:1', 'HTML_CONTAINER':'swt_fenster','TYP':'SWITCH'},
// 'ID13':{'INTERFACE':'RF', 'SN':'HEQ0102586:2', 'HTML_CONTAINER':'swt_krippe','TYP':'SWITCH'},
'ID14':{'INTERFACE':'RF', 'SN':'GEQ0173766:2', 'HTML_CONTAINER':'THM_APP','TYP':'VALUE','DATAPOINT':'SETPOINT'},
'ID15':{'INTERFACE':'RF', 'SN':'GEQ0173766:1', 'HTML_CONTAINER':'TEMP_APP','TYP':'VALUE','DATAPOINT':'TEMPERATURE'},
'ID16':{'INTERFACE':'RF', 'SN':'GEQ0173766:1', 'HTML_CONTAINER':'HUM_APP','TYP':'VALUE','DATAPOINT':'HUMIDITY'},
'ID17':{'INTERFACE':'RF', 'SN':'HEQ0130481:2', 'HTML_CONTAINER':'THM_WZ','TYP':'VALUE','DATAPOINT':'SETPOINT'},
'ID18':{'INTERFACE':'RF', 'SN':'HEQ0130481:1', 'HTML_CONTAINER':'TEMP_WZ','TYP':'VALUE','DATAPOINT':'TEMPERATURE'},
'ID19':{'INTERFACE':'RF', 'SN':'HEQ0130481:1', 'HTML_CONTAINER':'HUM_WZ','TYP':'VALUE','DATAPOINT':'HUMIDITY'},
'ID20':{'INTERFACE':'RF', 'SN':'HEQ0105536:1', 'HTML_CONTAINER':'TEMP_SAUNA','TYP':'VALUE','DATAPOINT':'TEMPERATURE'},
// 'ID21':{'INTERFACE':'RF', 'SN':'HEQ0105536:1', 'HTML_CONTAINER':'HUM_SAUNA','TYP':'VALUE','DATAPOINT':'HUMIDITY'},
'ID22':{'INTERFACE':'RF', 'SN':'HEQ0110834:1', 'HTML_CONTAINER':'TEMP_OUT','TYP':'VALUE','DATAPOINT':'TEMPERATURE'},
'ID23':{'INTERFACE':'RF', 'SN':'HEQ0110834:1', 'HTML_CONTAINER':'HUM_OUT','TYP':'VALUE','DATAPOINT':'HUMIDITY'},
};
// refresh rate for ReGa-Hss IDs in SITE_devicesArray, in ms
// Wiederholfrequenz für ReGa-Hss IDs im SITE_devicesArray, in ms
var SITE_regaHssRefreshRate = 5000;
// refresh rate for normal XML-RPC IDs in SITE_devicesArray, in ms
// Wiederholfrequenz f.r standard XML-RPC IDs im SITE_devicesArray, in ms
var SITE_refreshRate = 5000;
// global variables
// globale Variablen
var regaHss_requestString = '';
var runOnce = true;
var current_hour = 0;
var current_minute = 0;
// Init
function init(){
// suscribte to CCU XML-RPC Interface
// melde sich bei der CCU XML-RPC Schnittstelle an
xmlRpc_init();
// start updates
// starte Aktualisierungen
updateXmlRpcDevices();
// generate ReGa-HSS string to request states
// generiere ReGa-HSS string um Werte ab zu fragen
regaHss_requestString = regaHss_createRequestString();
// init onclick events for every ID in SITE_devicesArray
// belege jede ID in SITE_devicesArray mit einem standard onclick event
site_initOnclickEvent(SITE_devicesArray);
// start updates
// starte Aktualisierungen
updateRegaHssDevices();
setTimeout(function(){ window.scrollTo(0,0); }, 100);
}
// request all device states every <SITE_refreshRate> ms
// Frage alle IDs alle <SITE_refreshRate> ms ab
function updateXmlRpcDevices(){
phpSession_RequestGlobalDeviceArray();
setTimeout("updateXmlRpcDevices()", SITE_refreshRate);
}
// request all ReGaHSS device states every <SITE_regaHssRefreshRate> ms
// Frage alle ReGaHSS IDs alle <SITE_regaHssRefreshRate> ms ab
function updateRegaHssDevices(){
regaHss_RequestGlobalDeviceArray(regaHss_requestString);
setTimeout("updateRegaHssDevices()", SITE_regaHssRefreshRate);
}
// this function is called for every ID in SITE_devicesArray with every refresh. use this for custom functions
// diese Funktion wird für jede ID im SITE_devicesArray bei jedem Update aufgerufen. Benutzen Sie dies für eigene Funktionen
function page_IdIterator(var_Id, var_Interface, var_Sn, var_Container, var_Typ){
if (var_Sn == "SysVar_Weckzeit"){
custom_parseText(var_Id, GLOBAL_regaHssArray[var_Id]['VARIABLE']);
}
}
// called by site_updateControls after every refreh
// wird von site_updateControls nach jedem Update aufgerufen
function page_update(){
tempWZ = GLOBAL_statusArray['HEQ0130481:2']['SETPOINT'].toString().split('.');
current_degreeWZ = parseInt(tempWZ[0].substr(0,2));
current_halfdegreeWZ = parseInt(tempWZ[1].substr(0,1));
tempAPP = GLOBAL_statusArray['GEQ0173766:2']['SETPOINT'].toString().split('.');
current_degreeAPP = parseInt(tempAPP[0].substr(0,2));
current_halfdegreeAPP = parseInt(tempAPP[1].substr(0,1));
temp = GLOBAL_regaHssArray['ID02']['VARIABLE'].toString().split('.');
current_hour = parseInt(temp[0].substr(0,2));
current_minute = parseInt(temp[1].substr(0,2));
}
function sw_done() {
var test = SpinningWheel.getSelectedValues();
var Time = test.values[0]+'.'+test.values[1];
regaHss_setSystemVariableDisabled('ID02', Time);
document.getElementById("SysVar_Weckzeit").innerHTML = Time+" Uhr";
}
function sw_TempWZ_done() {
var test = SpinningWheel.getSelectedValues();
var Temp = test.values[0]+'.'+test.values[2];
xmlRpc_setValue("RF", "HEQ0130481:2", "SETPOINT", Temp);
}
function sw_TempAPP_done() {
var test = SpinningWheel.getSelectedValues();
var Temp = test.values[0]+'.'+test.values[2];
xmlRpc_setValue("RF", "GEQ0173766:2", "SETPOINT", Temp);
}
function openTime() {
var hours = { 0: '00', 1: '01', 2: '02', 3: '03', 4: '04', 5: '05', 6: '06', 7: '07', 8: '08', 9: '09'};
var minutes = { 0: '00', 1: '01', 2: '02', 3: '03', 4: '04', 5: '05', 6: '06', 7: '07', 8: '08', 9: '09'};
for( var i = 10; i <= 23; i++ ) {
hours[i] = i.toString();
minutes[i] = i.toString();
}
for( var i = 24; i <= 59; i++ ) {
minutes[i] = i.toString();
}
SpinningWheel.addSlot(hours, 'right', current_hour);
SpinningWheel.addSlot(minutes, '', current_minute);
SpinningWheel.addSlot({ 0: 'Uhr'}, 'readonly shrink', 0);
SpinningWheel.setCancelAction(function(){ });
SpinningWheel.setDoneAction(sw_done);
SpinningWheel.open();
}
function openTempWZ() {
var degrees = { 0: '00', 10: '10', 11: '11', 12: '12', 13: '13', 14: '14', 15: '15', 16: '16', 17: '17', 18: '18', 19: '19', 20: '20', 21: '21', 22: '22', 23: '23', 24: '24', 25: '25'};
var halfdegrees = { 0: '0', 5: '5'};
for( var i = 15; i <= 12; i++ ) {
degrees[i] = i.toString();
}
for( var i = 4; i <= 1; i++ ) {
halfdegrees[i] = i.toString();
}
SpinningWheel.addSlot(degrees, 'right', current_degreeWZ);
SpinningWheel.addSlot({ separator: ','}, 'readonly shrink');
SpinningWheel.addSlot(halfdegrees, '', current_halfdegreeWZ);
SpinningWheel.addSlot({ 0: '°C '}, 'readonly shrink', 0);
SpinningWheel.setCancelAction(function(){ });
SpinningWheel.setDoneAction(sw_TempWZ_done);
SpinningWheel.open();
}
function openTempAPP() {
var degrees = { 0: '00', 10: '10', 11: '11', 12: '12', 13: '13', 14: '14', 15: '15', 16: '16', 17: '17', 18: '18', 19: '19', 20: '20', 21: '21', 22: '22', 23: '23', 24: '24', 25: '25'};
var halfdegrees = { 0: '0', 5: '5'};
for( var i = 15; i <= 12; i++ ) {
degrees[i] = i.toString();
}
for( var i = 4; i <= 1; i++ ) {
halfdegrees[i] = i.toString();
}
SpinningWheel.addSlot(degrees, 'right', current_degreeAPP);
SpinningWheel.addSlot({ separator: ','}, 'readonly shrink');
SpinningWheel.addSlot(halfdegrees, '', current_halfdegreeAPP);
SpinningWheel.addSlot({ 0: '°C '}, 'readonly shrink', 0);
SpinningWheel.setCancelAction(function(){ });
SpinningWheel.setDoneAction(sw_TempAPP_done);
SpinningWheel.open();
}
</script>
<title>Homematic Webcontrol</title>
</head>
<body>
<div id="topbar">
<div id="title"></div>
<div id="rightnav"><a href="weather.php">Wetter</a></div>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="content">
<ul class="pageitem">
<li class="custom_button"><span class="name">Generalschalter</span><div id="swt_general" class="custom_button_pic"></div></li>
<li class="custom_button"><span class="name">Heizung Ladebefehl</span><div id="swt_ladung" class="custom_button_pic"></div></li>
<li class="custom_button"><span class="name">Lüfter Wohnzimmer</span><div id="swt_luefterwz" class="custom_button_pic"></div></li>
<li class="custom_button"><span class="name">Boiler Aufheizen</span><div id="swt_boiler" class="custom_button_pic"></div></li>
<li class="custom_button"><span class="name">Lüfter Appartement</span><div id="swt_luefterapp" class="custom_button_pic"></div></li>
<li class="custom_button"><span class="name">Luftbefeuchter</span><div id="swt_befeuchter" class="custom_button_pic"></div></li>
<li class="custom_button"><span class="name">Sauna (</span><span class="temp" id="TEMP_SAUNA"></span><span class="temp">°C)</span><div id="sauna" class="custom_button_pic"></div></li>
</ul>
<ul class="pageitem">
<li class="custom_button" onclick="openTempWZ()"><span class="name">Wohnzimmer (</span><span class ="temp" id="THM_WZ"></span><span class="temp">°C):</span><div class="custom_temp">% </div><div id="HUM_WZ" class="custom_temp"></div><div class="custom_temp">°C </div><div id="TEMP_WZ" class="custom_temp"></div></li>
<li class="custom_button" onclick="openTempAPP()"><span class="name">Appartement (</span><span class="temp" id ="THM_APP"></span><span class="temp">°C):</span><div class="custom_temp">% </div><div id="HUM_APP" class="custom_temp"></div><div class="custom_temp">°C </div><div id ="TEMP_APP" class="custom_temp"></div></li>
<li class="custom_button"><span class="name">Aussenwerte: </span><div class="custom_temp">% </div><div id="HUM_OUT" class="custom_temp"></div><div class="custom_temp">°C </div><div id ="TEMP_OUT" class="custom_temp"></div></li>
<li class="custom_button"><span class="name">Windwerte: </span><div class="custom_temp">km/h </div><div id="HUM_OUT" class="custom_temp"></div><div class="custom_temp">° </div><div id ="TEMP_OUT" class="custom_temp"></div></li>
<li class="custom_button"><span class="name">Wecker</span><div id="SysVar_Wecker" class="custom_button_pic"></div></li>
<li class="menu" onclick="openTime()"><span class="name">Weckzeit</span><div id="SysVar_Weckzeit" class="custom_temp"></div></li>
</ul>
</td>
<td> Spalte 2
</ul>
</td>
</tr>
</table>
</div>
<div id="Status_LED"></div>
</body>
</html>