Hallo Swissboy,
danke, jetzt wars im Zusammenhang verständlich gg
Ich bin jetzt auf 2 Probleme gestoßen:
-„meine“ Grafik hat immer noch den Buttonrand
-im IE läufts, d.h. Schalten geht - aber der Firefox (16.0.2) mag nicht
Bin für jede Idee dankbar… Dann kann ich am WE mal einiges bauen…
Mercie !
Ich denke die Grafik muß als .gif mit transparenz auf weiß gewandelt werden.
Ich bin mir nicht sicher ob man Buttons transparent machen kann. Der Button nimmt die Größe des beinhalteten Bildes an.
Vielleicht klappt es mit „area shapes“
Gruß
Boris
Ich habe eigene Icons im WF als .png mit transparenz im Gebrauch 
Die .png´s sind alle mit transparentem Hintergrun - aber ich bekomm immer (in der größe passende) Buttons als HG.
Kann man die Buttons selbst transparent setzen ? Evtl. im css ?
ja, in den meisten Grafikprogrammen geht das.
nein
Der Button kommt aber aus dem Code (Dojo oder wer auch immer)
Meine o.g. Sprechblase IST transparten/freigestellt.
Nur der Code, der mir das hier schlatbarmachen soll auf der HTML-Seite bastelt immer die Buttons drum,
ich kenn mich mit den Attributen leider ned aus…
Sehr seltsam - heute Nachmittag ging es noch und auf einmal versagt es.
Ich hab’ es gerade nochmal auf den Inhalt von Swissboys Anleitung rediziert aber nichtmal eine Lampe kann ich schalten…
Hat sich da ein Fehler eingeschlichen?
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<!-- <script src="../dojo-release-1.7.2-src/dojo/dojo.js" data-dojo-config="async: true"></script> -->
<style type="text/css">
#ips .variable {
position: absolute;
}
#ips .button {
position: absolute;
}
</style>
<script>
var ips = null;
require(["dijit/form/Button", "dijit/form/TextBox"]);
require(["dojo/dom", "dojo/domReady!", "dojox/rpc/Service", "dojox/rpc/JsonRPC", "dojo/parser"], function(dom, ready) {
ips = new dojox.rpc.Service("ips.smd");
//start variable reading loop
readVariables();
});
function readVariables()
{
require(["dojo/query"], function(query) {
query(".variable").forEach(function(node, index, arr){
ips.GetValueFormatted(parseInt(node.getAttribute("ips-variable-id"))).then(
function(data)
{
label = node.getAttribute("ips-variable-label");
if(label != null)
{
if(data != "An" && node.getAttribute("ips-variable-id") == 50029)
dojo.byId("LAEGBL").innerHTML = "<img src='../img/L_aus.png' width='20' height='20' alt='Lampe Badezimmer Ein'>";
else if(data == "An" && node.getAttribute("ips-variable-id") == 50029)
dojo.byId("LAEGBL").innerHTML = "<img src='../img/L_ein.png' width='20' height='20' alt='Lampe Badezimmer Aus'>";
}
else
node.innerHTML = "";
}
);
});
});
window.setTimeout(readVariables, 10000);
}
</script>
</head>
<body class="tundra" style="width: 750px; height: 750px; background-image: url(/img/eg.png); background-repeat: no-repeat;">
<div id="ips" style="vertical-align:middle;">
<h2>IP-Symcon<br/>Floorplan<br/>Demo</h2>
<button id="LAEGBL" data-dojo-type="dijit.form.Button" style="top: 400px; left: 410px;" class="button">
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
ips.GetValueBoolean(50029).then(
function(data){
if(data==true)
ips.HM_WriteValueBoolean(29939, "STATE", false);
else
ips.HM_WriteValueBoolean(29939, "STATE", true);
},
function(err){
alert(err);
}
);
</script>
</button>
<div ips-variable-id="50029" ips-variable-label="Lampe Badezimmer: " style="top: 105px; left: 400px;" class="variable"></div>
</div>
</body>
</html>
Viele Grüße
Boris
Hallo…
Da hat sich sicher irgendwo ein Fehler eingeschlichen… Wie erwähnt aktiviere unbedingt die Anzeige von Javascript Errors um zu sehen ob da vielleicht was nicht stimmt. Es genügt ein falsches Zeichen irgendwo an einer Stelle und es geht nichts mehr. Wenn die Statusanzeige stimmt und das schalten nicht geht… dann ist irgendwo im Javascript ein Fehler drinn. Teste auch noch mit dem Paresy html ob die Verbindung überhaupt besteht aber die ist bei mir noch nie verreist, ich denke kaum das da was nicht stimmen würde. IPSymcon $Dienst muss natürlich auch laufen…
Hallo djtark
Sorry war gestern und heute noch an einem Projekt dran um Kamarabilder analysieren zu können… werd ich hier dann mal auch noch zeigen wenns soweit ist.
Doch das geht… du kannst die Grafik ohne „Buttonhintergrund“ anzeigen lassen. Im Prinzip geht das sehr einfach und ja… es sind schlussendlich CSS Definitionen mit denen du das machen kannst. Bei mir stellte sich diese Frage aber nie, da ich immer einen Rahmen (eben rot grün etc. je nach Status) um die Grafik mache und nicht mit Bubbles arbeite. Die einfachste Lösung, du musst nur ganz am Anfang des Codes diese Zeile
<link rel=„stylesheet“ href=„http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css“>
gegen ein anderes Theme austauschen. Diese Themes gibt es zu genüge… ich denke aber das insbesondere das Theme unten das macht was du möchtest…
<link rel=„stylesheet“ href="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css">
Und sonst… suchen… man kommt immer weiter aber manchmal ist es holt etwas zeitintensiver…
Diese Themen beinhalten CSS Code den du auch auslesen und danach an den Buttons nur das ändern kannst was du willst… . Ein Tipp wäre dann nur noch, du kannst den Pfad vom css oben auch in den Browser eingeben und siehst den Quellcode und was darin gemacht wird und wie es geht zbsp die Transparenz zu setzen.
Gruss
Hallo zusammen
wie angekündigt hier eine ganz simple Variante des Floorplan Themas:
Features:
Das hier ist nur ein ganz simples Framework um die Technik der Interaktion zwischen Floorplan und IPS zu zeigen. Gestalterisch stehen euch da noch alle Wege offen.
Bitte eine Kategorie beliebigen Namens erstellen, und das Script unter beliebigem Namen darin abspeichern.
Weiters eine String Variable beliebigen Namens mit dem Profil ~HTMLBox anlegen.
Diese Variable enthält den HTML Code des Floorplanes. Sie ist per Webfront Configurator ins Webfront entsprechend einzubinden.
Die ID dieser Variablen muß im Script eingetragen werden.
/*
* Add a Categorie, name is free of choice
* Add this Script in this categorie, name is your choice
* Add a Variable (string) with profile ~HTMLBox,
* The ID of the Variable need to be put in $id_Floorplan !!
* Create directory in /Webfront/user/Floorplan/ to pt you own icons and floorplan inside
* maintain directory names in case you use different one
*
* Some credits go to user WGreipl and Horst who publishd the technic of this script/
*/
$id_Floorplan = 30670 /*[Floorplan\Floorplan]*/;
$ImgFloorplan = '"user\floorplan est_ohne_icon.png"';
//________________________________________________________________________________________
IF ($_IPS['SENDER'] == 'RunScript') {
switch ($action)
{
case 'FlurInnen':
IPS_RunScriptEx(53579 /*[Programe\Lichtsteuerung\Lichtsteuerung Schalter]*/, Array("WF" => "WF_Flur"));
break;
/*
case 'Your Device Name':
Your script or command to switch your actuator
break;
*/
}
}
IF (($_IPS['SENDER'] == 'Variable') or ($_IPS['SENDER'] == 'Execute')){
// Your Script to get Actuator icon
$BulpFlurInnen = getBulbIcon(39158 /*[Licht\Flur Erdgeschoß\Status]*/);
$ausgabe ='<p>';
$ausgabe.= '<div id="floorplan" style=width:450px; height:450px; position:absolute; left:0px; top:0px; z-index:-1;>';
$ausgabe.='<p><img src='.$ImgFloorplan.'; border="0"></p> </div>';
$ausgabe.='<div style="width:100x; height:100px; position:absolute; left:220px; top:200px; z-index:1";
onclick="dojo.xhrGet({ url: \'user/buttons.php?ts=\' + (new Date()).getTime() + \'&ScriptID='.$IPS_SELF.'&do=FlurInnen\' })";>
<p><img src='.$BulpFlurInnen.' width=13 height=20 border=0</p> </div>';
// $ausgabe.= .... your code to add further device
SetValue($id_Floorplan,$ausgabe);
}
//_______________________________________________________________________________________
function getBulbIcon($idStatus) {
IF ((GetValue($idStatus)) == true) {
$IconPath = 'user\floorplan\BulpOn.png';
}
else{
$IconPath = 'user\floorplan\BulpOff.png';
}
return $IconPath;
}
Für jede zu monitorende Statusvariable ist ein Trigger „Bei Variablenupdate“ auf das Script zu legen.
Dann noch unter /Webfront/User/ ein Directory namens „floorplan“ anlegen und euren Floorplan (oder die beigefügten Demodateien reinkopieren.
Unter /User ein File namens „buttons.php“ anlegen und diesen Code reinkopieren:
<?php
$ScriptID = $_GET['ScriptID'];
$Action = $_GET['do'];
if ($ScriptID > 0)
{
IPS_RunScriptWaitEx((int)$ScriptID, array('action' => $Action) );
}
?>
demo_png.zip (10.8 KB)
Beschreibung folgt im nächsten Post.
bb
1: Diese beiden sind frei wählbar, MÜSSEN aber pro Gerät exakt übereinstimmen, sinnvollerweise die Bezeichnung des jeweiligen Aktors wählen
2: „getBulbIcon“ definiert das jeweilige Icon
3: Position des Icons relativ zum ursprungs des Floorplanes
4: Größes des Icon, man kann damit zwar zoomen, für gute Darstellungsqualität sollten aber die exakten px Werte eingetragen werden.
6: Größe des „Klick empfindlichen“ Bereiches des jeweilige Icons
Um weitere Aktuatoren einzubinden sind:
viel Spass
bb
So funktionierts:
Wird ein Gerät geschaltet, so ändert sich dessen Statusvariable.
Diese triggert das Script und der Codeteil: IF (($_IPS[‚SENDER‘] == ‚Variable‘) …
wird aufgerufen.
Darin wird erstmal für alle Geräte das passende Icon ausgewählt und dann mit einem leeren Floorplan zu einer kompletten Darstellung zusammengefügt.
Dem Icon wird das Script „…buttons.php…“ und über "…’&do=FlurInnen’… eine geräteabhängige Konstante mitgegeben.
Wird nun das Icon im Floorplan angelickt, so startet „buttons.php“ und dieses aktiviert seinerseits wieder das Script.
Diesmal ist allerdings der „… IF ($_IPS[‚SENDER‘] == ‚RunScript‘)…“ Codeteil aktiv. Dieser bekommt die vorher erwähnte Konstante ( hier „FlurInnen“ ) übergeben und kann per Auswahl damit den jeweiligen Aktor schalten.
Durch schalten des Aktors ändert sich seine Statusvariable und der Kreis ist geschlossen.
viel Spass
bb
Hallo Bernhard,
hab Dein Skript mal 1zu1 übernommen. Geht soweit Super. Nur bei Klick auf Lampensymbol passiert nichts.
Muß ich das dojo noch irgendwie integrieren?
jnicke: da fehlt noch was kleines… du hast ja in dem Script folgende Zeile:
IPS_RunScriptEx(53579 /[Programe\Lichtsteuerung\Lichtsteuerung Schalter]/, Array(„WF“ => „WF_Flur“));
Damit der Schaltvorgang funktioniert musst du entweder ein Script anlegen und die ID oben gegen deine ID tauschen und dort drinn die Schaltvorgänge vornehmen oder du kannst einfacher direkt anstatt der Zeile oben etwas einsetzen wie
MXC_SwitchMode(IDdeines Aktors, GetValueBoolean(IDdeinerStatusvar) ? False : True);
Dann klappts, gruss
hab ich ja gemacht. Geht aber nicht.
<?
/*
* Add a Categorie, name is free of choice
* Add this Script in this categorie, name is your choice
* Add a Variable (string) with profile ~HTMLBox,
* The ID of the Variable need to be put in $id_Floorplan !!
* Create directory in /Webfront/user/Floorplan/ to pt you own icons and floorplan inside
* maintain directory names in case you use different one
*
* Some credits go to user WGreipl and Horst who publishd the technic of this script/
*/
$id_Floorplan = 38955 /*[WebFront\Floorplan\floorplan]*/ ;
$ImgFloorplan = '"user\floorplan est_ohne_icon.png"';
//________________________________________________________________________________________
IF ($_IPS['SENDER'] == 'RunScript') {
switch ($action)
{
case 'FlurInnen':
HM_WriteValueBoolean(24420 /*[Homematic\Geräte\Schalter\Flur LS]*/ , "STATE", true);
// IPS_RunScriptEx(11530 /*[Scripte\Schaltscripte\Flur Licht]*/ , Array("WF" => "WF_Flur"));
break;
/*
case 'Your Device Name':
Your script or command to switch your actuator
break;
*/
}
}
IF (($_IPS['SENDER'] == 'Variable') or ($_IPS['SENDER'] == 'Execute')){
// Your Script to get Actuator icon
$BulpFlurInnen = getBulbIcon(35819 /*[Homematic\Geräte\Schalter\Flur LS\STATE]*/ );
$ausgabe ='<p>';
$ausgabe.= '<div id="floorplan" style=width:450px; height:450px; position:absolute; left:0px; top:0px; z-index:-1;>';
$ausgabe.='<p><img src='.$ImgFloorplan.'; border="0"></p> </div>';
$ausgabe.='<div style="width:100x; height:100px; position:absolute; left:220px; top:200px; z-index:1";
onclick="dojo.xhrGet({ url: \'user/buttons.php?ts=\' + (new Date()).getTime() + \'&ScriptID='.$IPS_SELF.'&do=FlurInnen\' })";>
<p><img src='.$BulpFlurInnen.' width=13 height=20 border=0</p> </div>';
// $ausgabe.= .... your code to add further device
SetValue($id_Floorplan,$ausgabe);
}
//_______________________________________________________________________________________
function getBulbIcon($idStatus) {
IF ((GetValue($idStatus)) == true) {
$IconPath = 'user\floorplan\BulpOn.png';
}
else{
$IconPath = 'user\floorplan\BulpOff.png';
}
return $IconPath;
}
?>
Am Mauszeiger ändert sich beim überfahren auch nichts.
Beim überfahren ist auch nix zu sehen.
Ich hatte auch einen Fehler welchen ich mit Firefox durch einblenden der „Web-Konsole“ fassen konnte:
Ich hatte die button.php fälschlicherweise in das /User/Floorplan Unterverzeichnis kopiert und nicht in /user.
Über die Webkonsole des Firefox konnte ich den Fehler dann recht schnell lokalisieren (404 Not found…)
Auch wichtig ist, das die Datei button.php heisst und nicht wie in Bernhard’s erstem Post buttons.php.
Das ist ein Superskript, vor allem mit relativ verständlichem Code 
Vielen Dank erstmal - muss jetzt weiter tippen:)
Danke, genau das wars. Hatte die Datei im floorplan-Verzeichnis. Nur das die Datei doch „buttons.php“ heißt.
Jetzt funktioniert das Superskript.
Servus zusammen
Sorry für den Vertipper im Pfad zur buttons.php.
Im HTML Teil ist absichtlich nur das mindeste drinnen um die nackte Funktion zu demonstrieren.
Persönliche Verschönerungen und Features wie zb. ein „On_Mouseover“ oder sowas sind dann jedem seine eigen Sache und Geschmack.
So wie Icons oder die Darstellung es Grundriß.
Falls ihr Code gut findet und den HTML Teil schön-bastelt wäre es nett wenn ihr eure Anpassungen oder Resourcen posten würdet.
Optische Anregungen sind immer erwünscht.
gruß
bb
Hallo bb!
Hatte wohl Glück und ging bei mir grad von Anfang an. Vielen Dank fürs posten der Lösung! Die Implementation ist identisch wie bei Sonos die Member-Gruppen Bildung gelöst ist.
Cooler Ansatz, einfach, übersichtlich und vor allem einfacher zu debuggen - da vieles in IPS passiert und man im eigenen Schiff bleibt. Find ich super vielleicht hat jemand noch eine andere Technik oder einen Ansatz mit dem man so einen Floorplan realisieren könnte? Bisher habe ich bei beiden Lösungen viele Vorteile und aber auch Nachteile/Probleme gefunden. Eine Kombination der beiden Techniken wäre für mich aktuell die beste Lösung und je mehr Lösungsansätze wir haben um so besser wird das finish.