schaltbare Eigene Seite / Grundriss / EIB-Switch / Refresh

Wenn du möchtest kann ich dir ein wenig weiterhelfen :).

Ich hoffe dem Threadopener ist das Recht, das wir uns hier einbringen - gerne kann aber auch von den Moderaten das hier ausgelagert werden. Das überlassen ich den Moderaten und dem Threadopener ;).

Zuerst eine PHP Seite erstellen, die denn Status eines Geräte holt, z.B. getValue.php:


<?php
getvalueBoolean($ID);
?>

Ich habe z.B. den Bildern, die InstanzenID gegeben, dadurch sind die dann nachher eindeutig und können schnell zugeordnet werden. Vor dem laden habe ich ein ladenicon - dadurch sehe ich das das Script läuft und habe keinen falschen Status.

z.B.

Nun habe ich vor dem Head eine Funktion, die den Wert eines Geräte aktualisiert.

z.B. Function SetStatus(ID):

function SetStatus(ID)
{
	xmlDoc = new XMLHttpRequest();
        var url = "GetValue.php?id=" + ID;
	xmlDoc.open("GET", url , false);
	xmlDoc.send( null );

        if(xmlDoc.responseText.indexOf("1") != -1) {
            document.getElementById(ID).src='on.png';
            return true;
        } else {
            document.getElementById(ID).src='off.png';
            return false;
        }
}

Danach habe ich quasi eine Funktion die alle Werte mithilfe der vorherigen Funktion aktualisiert (die IDs und die Zeile vom SetStatus lasse ich aus PHP schleifen erstellen - ich hole die Werte aus meiner MySQL DB, aber man kann sich hier auch direkt IPS Funktion bedienen, die Alle Geräte aus einer Kategorie holen).

z.B. Function RefreshStatus(ID) {
SetStatus(11111);
SetStatus(22222);
SetStatus(33333);
};

Diese wird dann per Bodyonload in bestimmten Intervallen aufgerufen.

z.B. onload=„setintervall(RefreshStatus(),1000);“

Wenn du Bandbreite sparen möchtest, dann kannst du größere Intervalle verwenden und rufst einfach nach einem Schaltvorgang die Funktion RefreshStatus aufrufen.

Wenn du mehr wissen möchtest, melde dich einfach wieder :).

Ich hoffe das hilft dir ein wenig weiter ;).

1a, das gehört hier mit rein und ich werd auch dieser Tage weitere Versuche anstellen !

Sieht aber recht vielversprechend bei Euch aus !

Super, herzlichen Dank für die Routine zum Refresh, das hat mich schnell weitergebracht.

Nun läuft im FF alles, allerdings nicht aufm Ipad. Dort funktioniert alles nur das ersetzten der Grafiken nicht.

Vermutlich brauch ich noch ne Browserweiche :frowning:

Gruß Martin

  1. Test.php
<?php

	print "<html>
";
	print "<head>
";
	print "<TITLE>Maki Webfront II</TITLE> 
";
	print "<link rel=\"stylesheet\" href=\"test.css\" type=\"text/css\">";
	print "<meta http-equiv=\"pragma\" content=\"no-cache\" />";
	
	print "<script>";
	
	print "	function sndReq(url) {";
	print "		var action;";
	print "		action = new XMLHttpRequest;";
	print "		action.open('get', url);";
	print "		action.send(null);";
	print "	}";

	
	print "function SetStatus(ID,ICON)";
	print "{";
	print "		xmlDoc = new XMLHttpRequest();";
	print "		var url = \"getstate.php?id=\" + ID;";
	print "		xmlDoc.open(\"GET\", url , false);";
	print "		xmlDoc.send( null );";
    print "		if(xmlDoc.responseText.indexOf(\"1\") != -1) {";
	print "         	document.getElementById(ID).src='icons/' + ICON + '_on.png';";
	print "         	return true;";
	print "         } else {";
	print "        		 document.getElementById(ID).src='icons/' + ICON + '_off.png';";
	print "         	return false;";
	print "        }";
	print "}";	

	print "function RefreshStatus()";
	print "{";
	print "		SetStatus('33345','bulb');";
	print "}";


	print "</script>
";
	print "</head>
";



	print  "<body onload=\"setInterval('RefreshStatus()', 1000);\">";
	

	// AB HIER WERDEN DIE ICONS GESETZT

	print "<div id=\"Layer1\" style=\"position:absolute; left:236px; top:175px; width:50px; height:50px; z-index:1\">
";
	//print "		<button type=\"button\" onClick=\"sndReq('toggle.php?id=33345'); SetStatus('33345','bulb');\"  width=\"50\" height=\"50\"> <img id=\"33345\" src=\"icons/loading.gif\" > </button>
";		
	print "		<img id=\"33345\" src=\"icons/loading.gif\" onClick=\"sndReq('toggle.php?id=33345'); SetStatus('33345','bulb');\"  width=\"50\" height=\"50\">
";		
	print "</DIV>
";

	

	// Ende der ICON Area
	print "</body>
";
	print "</html>
";
?>
  1. CSS
body
{

background-repeat:no-repeat;
background-image: url(maki-wz-800.png);
background-position: 50px 50px ;

  
}
  1. TOGGLE.PHP
<?php
	EIB_switch((int)$id,  !GetValue(IPS_GetStatusVariableID((int)$id, "Value")));
?>
  1. GETSTATE.PHP
<?php

	$status = GetValue(IPS_GetStatusVariableID((int)$id, "Value"));
        echo $status;
	
?>


Ich hatte vorher ne Browserweiche drin, aber nur für IE anzufangen.

Das andere hatte bei mir selbst in der iPad GUI funktioniert.

Hier mal die Oringinal:

Senden:


function sndReq(id, value) {
var action;
var browser = navigator.appname;
if (browser == "Microsoft Internet Explorer") {
    action = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            action = new XMLHttpRequest;
        }
            action.open('get', '../shared/setreq.php?id=' + id + '&value=' + value);
            action.send(null);
            setTimeout("refreshStatus()",333);
        }
       }

Aktualisieren:

function getBooleanValue(variableName, icon)
{
    if (typeof window.ActiveXObject != 'undefined' )
        xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
            else
	xmlDoc = new XMLHttpRequest();
        var url = "../shared/GetValueBool.php?type=bool&id=" + variableName;
	xmlDoc.open("GET", url , false);
	xmlDoc.send( null );

        if(xmlDoc.responseText.indexOf("true") != -1) {
            document.getElementById(variableName).src='../icons/30/' + icon + '_on.png';
            return true;
        } else {
            document.getElementById(variableName).src='../icons/30/' + icon + '_off.png';
            return false;
        }
}

Aktualisierungsschleife:


function refreshStatus() {
getBooleanValue('12345', 'lampe');
}

Hoffe das hilft dir ein wenig weiter.

P.s.: Die Zahl bei „getBooleanValue“ ist nicht die InstanceID des Gerätes, sondern der Statusvariable. Ich verwende die InstanceID des Gerätes nur intern in meiner DB.

Na meine Leute :wink:

Das war doch in die 1.0 so zu machen? :loveips:

Edit:

DEMO ABGELAUFEN - PM fur zugang

(alles in-site mit <? php ?>-tags gemacht) Grundrisse neu gezeichnet und in kleine teile verschnitten. Mit die licht.gif licht-on.gif also die stati hinbekommen und als gimick die licht-uber.gif

Ich hab’s jetzt mal auf die :8080 in demo stehen so dass ihr mein Bude nicht flackeren lasst.

Grusse aus Belgien,
Fredje

Hallo @ll,

hab gerade mit großer Begeisterung gelesen, was ihr schon geschafft habt.

Leider reichen meine Kenntnisse nicht so weit, dass ich wirklich folgen kann.

Folgende Fragen sind bei mir offen:

  1. Die Bilder für Lampe an und Lampe aus beispielsweise, wie müssen diese heißen? Müssen diese im Objektbaum unter Medien hinzugefügt werden? Wie gehe ich vor?

  2. Das eigentliche Hauptscript: Wo gebe ich mein Background Image ein? Wie binde ich das ein?

  3. Die CSS: Einfach Texteditor, quelltext einfügen und als test.css speichern? Wo?

  4. Toggle.php etc. wo einfügen?

Vielleicht kann ja einer von euch das ganze als eine art Anleitung umbasteln, in der für weniger fortgeschrittene erklärt ist, an welcher Stelle die ID von welchem Objekt hin muss, wo welche Datei hin muss etc.

Vielen Dank.

Gruß Marc

Die Icons heissen immer irgendwas mit _on.png oder _off.png

Sie müssen in der Webroot des IPS Webservers liegen in einem Verzeichniss icons. In dem Verzeichniss worin das Icons Verzeichniss liegt liegt dann auch das Hauptscript und das CSS

Diese Code Zeile zeigt die Zusammensetzung des Icon namens.
Die Variable ICON enthält dann den namen des icons , z.b. bulb

document.getElementById(ID).src='icons/' + ICON + '_on.png';";

im CSS

background-image: url(maki-wz-800.png); 

Jo richtig und im gleichen ordner speichern wie die test.php

Im gleichen Ordner wie die test.php und das css file.

Nun ja eigentlich steht ja alles im Thread. Aber nochmal einfacher:

Der IPS Webserver hat seine Dokumenten Root unter c:\ip-symcon\webfront\user

da machste einen ordner test rein, in diesen speicherst du alle drei PHP Scripte und die CSS Datei und das hintergrundbild.

Dann legst du dort noch einen Ordner an der icons heist.

Da rein kommen die Icons, für eine Glühbirne z.b. bulb_on.png und bulb_off.png

Nun passt du in der Test.php die Icon Zeilen an:

 print "<div id=\"Layer1\" style=\"position:absolute; left:236px; top:175px; width:50px; height:50px; z-index:1\">
";
   
    print "        <img id=\"33345\" src=\"icons/loading.gif\" onClick=\"sndReq('toggle.php?id=33345'); SetStatus('33345','bulb');\"  width=\"50\" height=\"50\">
";        
    print "</DIV>
";

Für jedes Icon brauchst du so eine Zeile, die ID ist die ID der zu schaltenden Instanz, das „bulb“ bei SetStatus ist der teil der von _on.png / _off.png gesetzt wird. Denke der Rest ist klar oder?

Gruß Martin

Hey, danke,

hab jetzt über ip-adresse:82/user/test.php die Datei aufgerufen. Das funktioniert soweit ganz gut. Das heißt, Hintergrund ist nun da. Da ist auch ein Ladesymbol, welches nach kurzer Zeit auf das Symbol Lampe aus wechselt, aber egal was die Lampe sagt.

print „function RefreshStatus()“;
print „{“;
print " GetValue(‚15690‘);"; <- hier die Nummer von der Variable oder von der EIB-Instanz der Lampe?
print „}“;

Und in der Zeile? ->
print " <img id=„15690“ src=„icons/loading.gif“ onClick=„sndReq(‚toggle.php?id=15690‘); SetStatus(‚33248‘,‚bulb‘);“ width=„50“ height=„50“>
";

Wenn ich andere Skripte geschrieben habe musste ich zum Abfragen immer die Variable nehmen und zum Schreiben die Instanz, wie gesagt ist EIB.

15690 ist die EIB Instanz mit der Variable Boolean 33248

Was mache ich denn noch verkehrt?

Danke viel mals…

Gruß Marc

Du hast natürlich Recht

Das GetValue muss die ID der Status Variable nehmen, und Das Schalten geht über die Instanz ID

Moin…

kurze Frage. Funktioniert das noch so? Ich habe das gestern mal nachgebaut, weil ich mir ein Webfrontmenu gebaut hab. Ich will eigentlich nur per HTML-Seite mit Buttons Seiten im Webfront anspringen. Ich habe es auch geschafft, nur wird die „id“ und „value“ ( oben im Beispiel id=12345&value=false ) nicht an das angegebene Skript übergeben.
Was mache ich falsch?
Wenn ich z.B in das Skript (schalten.php) einen direkten Befehl ( EIB_switch etc.) schreibe, wird dieser ausgeführt. Also das Skript wird definitv ausgeführt, nur die Variablen werden nicht übergeben.
Ich habe es jetzt so gelöst, das ich mir mehrere „schalten.php“-skripte angelegt habe, die dann den Befehl ausführen. Nicht schön, aber funktioniert.
Vielleicht hat ja jemand einen Tip?
Gruß,
Peter

guck mal hier:
ich habe das einfach mit jquery und einem kleinen ajax script gebaut:
mit etwas html kenntnissen leicht nachvollziehbar.
einfach den buttons die attribute geben, der recht macht jquery.

bzw. coding:

Welcher Aktualisierungsscript gilt jetzt eigentlich? Und welche PHP-Code?

Kann es vielleicht einer nochmal sauber zusammenstellen? Bekomme meine Variablen irgendwie nicht gelesen.
Wäre echt geil wenn mir da einer helfen könnte:)

Gruß
Martin

Weiß da keiner bescheid? Ich verzweifel:D

Bitte Jungs:)
Weiß da keiner bescheid? Weiß echt nicht mehr weiter und weiß auch nicht wo ich da ansetzen soll…
Ich will einfach nur eine Variable lesen und je nach Zustand ein Lampen_Ein oder _Aus Symbol einblenden.

Gruß
Martin

Hallo Leute,

wenn man in der Forum-Suche „Floorplan“ eingibt, gibt es ja diverse Ergebnisse. Was ist nun „aktuell“? Die „Beste“ Variante?

Ich habe mich an diesem Beispiel hier mal versucht (IE), bekomme es aber nicht so richtig hin…

Wenn dieses hier noch eine „aktuelle“ Variante ist, dann würde ich mich der Bitte von Martin anschließen und mich über ein Beispiel freuen, was dann auch im IE funktioniert…

Joachim

Also ich habe die Abfrage jetzt so gelöst:

In deine HTML-Seite unter Java-Script kopierst du das hier rein:

function SetStatus_22045(ID)
    {
            xmlDoc = new XMLHttpRequest();
            var url = "GetValueBool_22045.php?" + ID;
            xmlDoc.open("GET", url , false);
            xmlDoc.send( null );
            if(xmlDoc.responseText.indexOf("1") != -1) {
                 document.getElementById(ID).src='Light_on.png';
                 return true;
             } else {
                     document.getElementById(ID).src='Light_off.png';
                 return false;
            }
    }  

Wobei die Endung der SetStatus „_22045“ meine Status Variable in IP-Symcon ist. Kannst auch nur „SetStatus“ schreiben.

Darunter kommt direkt die funktion „RefreshStatus“ (Wenn aber oben die „function“ nur „SetStatus“ benannt hast, musst es hier bei dem nachfolgendem Code auch anpassen):

function RefreshStatus()
    {
   	        SetStatus_22045(22045);
    }

In den BodyLoad kommt nun (Hintergrund.png ist mein Hintergrund, das ist uninteressant. Wichtig ist „onLoad“):

<body background="Hintergrund.png" onLoad="setInterval('RefreshStatus()', 1000);">

Zur Visualisierung des Icons legst dir einen ApDiv mit einem Hintergrundbild an mit der „ID“ aus dem SetStatus_22045 der in Klammern ist (22045).

<div id="apDiv20"><img src="loading.gif" width="50" height="50" ID="22045"></div>

Das wäre mal der HTML Part. Das Speicherst du als index.php im Ordner IP-Symcon/webfront/user ab.
In diesen Ordner kommen ebenfalls die Icons für Licht an/aus und loading. Ich habe mir mit Photoshop drei 50px auf 50px große Quadrate erstellt. Light_on=Gelb; Light_off=Rot und Loading ist bei mir Lila. Ist alles nur mal zum Testen.
So, Light_on.png; Light_off.png und loading.gif speicherst du jetzt ebenfalls im Ordner IP-Symcon/webfront/user ab.

In diesen Ordner IP-Symcon/webfront/user kommt jetzt noch die PHP-Datei (GetValueBoolean.php) rein die deine Status Variable in IP-Symcon nach dem Status abfrägt und dieses Ergebnis true oder false an deine HTML-Seite (index.php) zurück gibt.

So sieht bei mir mal die PHP-Datei aus:

$status = GetValue(22045);
echo $status;

Wie gesagt diese PHP-Datei speicherst du jetzt ebenfalls im Ordner IP-Symcon/webfront/user ab.

Was du jetzt machen musst ist, ich hab es mal so zum Testen gemacht, eine Boolsche Variable in IP-Symcon anlegen. Deren ID, bei mir ist es die „22045“, passt an bzw. übernimmst du in allen Scripten oben.
Desweiteren musst du in IP-Symcon eine neue WebServer Instanz mit dem Root auf webfront/user anlegen. IP am besten die wo Vorgeschlagen wird und Port von mir aus 10002.

Jetzt kannst du im Web Browser „deineIP:10002“ eingeben und öffnen.
Wenn du jetzt in IP-Symcon deine Status Variabe (bei mir 22045) von Hand ausführst und entweder auf true oder false setzt, sollte sich in deinem Web Browser dein Icon von rot auf gelb oder anderst herum ändern.

Hoffe es ist verständlich… :wink:
Wenn Fragen hast frag, über Verbesserungsvorschläge würde ich mich auch freuen.

Gruß
Martin

Hallo Martin,

vielen Dank für Deine ausführliche Antwort!

Da die Browser-Weiche wie sie ein paar Postings vorher beschrieben ist nicht „eingebaut“ ist, nehme ich mal an, dass diese Version nicht im IE funktioniert?
Wie baust Du die Java-Skripte in Dein Gesamt-Skript ein? So wie Pleibing es gepostet hat?

Joachim

Nachtrag:
Hier meine derzeitige Test.php:

<?php

    print "<html>
";
    print "<head>
";
    print "<TITLE>Maki Webfront II</TITLE> 
";
    print "<link rel=\"stylesheet\" href=\"test.css\" type=\"text/css\">";
    print "<meta http-equiv=\"pragma\" content=\"no-cache\" />";
    
    print "<script>";
    
    print "    function sndReq(url) {";
    print "        var action = new ActiveXObject('Microsoft.XMLHTTP');";
    print "        action.open('get', url);";
    print "       action.send(null);";
    print "   }";

    
    print "function SetStatus(ID,ICON)";
    print "{";
    print "    	xmlDoc = new ActiveXObject('Microsoft.XMLHTTP');";
    print "        var url = \"getstate.php?id=\" + ID;";
    print "        xmlDoc.open(\"GET\", url , false);";
    print "        xmlDoc.send( null );";
    print "        if(xmlDoc.responseText.indexOf('true') != 1) {";
    print "             document.getElementById(ID).src='icons/' + ICON + '_on.png';";
    print "             return true;";
    print "         } else {";
    print "                 document.getElementById(ID).src='icons/' + ICON + '_off.png';";
    print "             return false;";
    print "        }";
    print "}";    

    print "function RefreshStatus()";
    print "{";
    print "        SetStatus('45197','bulb');";
    print "}";


    print "</script>
";
    print "</head>
";



    print  "<body onload=\"setInterval('RefreshStatus()', 1000);\">";
    

    // AB HIER WERDEN DIE ICONS GESETZT

    print "<div id=\"Layer1\" style=\"position:absolute; left:185px; top:270px; width:50px; height:50px; z-index:1\">
";
    print "        <img id=\"45197\" src=\"icons/loading.gif\" onClick=\"sndReq('toggle.php?id=42689'); SetStatus('45197','bulb');\"  width=\"50\" height=\"50\">
";        
    print "</DIV>
";

    

    // Ende der ICON Area
    print "</body>
";
    print "</html>
";
?> 

Leider sehe ich die ganze Zeit die loading.gif, dieser scheint auch nicht anklickbar zu sein…

Nachtrag 2: Das mit der loading.gif lag an einem Syntaxfehler (habe ich im Skript oben bereits korrigiert), jetzt sehe ich eine bulb_on.png, aber auch diese scheint nicht anklickbar zu sein…

Hallo Leute,

ich habe mich (mit Erfolg) entschlossen einen anderen Ansatz zu wählen…

Vielen Dank für die Unterstützung!

Joachim