Antwort
Nov 02, 2015 - 20:21
Das in NEO nur ein ? angezeigt wird liegt daran das NEO selber den Status nicht aktualisiert. Wenn sich die Anzeigen selber aktualisieren würden müste ständig der Status abgefragt werden und die NEO Oberfläche komplett neu gerendert werden da es ein Canvas Element ist. Dies ist die Begründung von Mediola warum nur ein ? angezeigt wird und zum Anzeigen die Vorschau verwendet werden soll.
Mein Vorschlag wäre zumindest einmalig den Status abzufragen und bei jeder Änderung an einem Element z.B. der Schriftgröße. Ansonsten muss man ständig zwischen NEO und der Vorschau wechseln. Mal sehen ob Mediola hier noch etwas nachbessert. Als Lösung für das Problem gibt es nur den Workarround ein Webseitenelement zu benutzten und das IP Symcon Modul zu umgehen.
Das Webseiten Element wird als iFrame in NEO dargestellt und der aktuelle Status ist dann auch in NEO sichtbar. Wenn man sich die Mühe macht dies selber zu machen hat man außerdem den Vorteil das man in dem Webseitenelement z.B. Javascript und CSS nutzen kann.
Hier ein einfaches Beispiel einer Seite und das Vorgehen:
- Unterhalb des IP Symcon Ordners unter webfront/user ein neues Verzeichnis anlegen z.B. neo
- In das Verzeichnis eine PHP Datei anlegen z.B. wetterdaten.php
- Zum Auslesen der Variablen wir die JSON API von IP Symcon genutzt
- Dann in die Datei wetterdaten.php folgenden Inhalt kopieren
PHP Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wetter OC3 Buttom</title>
<link href="css/oc3buttom.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6,n2,n4:default;acme:n4:default;
bilbo:n4:default.js" type="text/javascript"></script>
</head>
<body>
<?php
//Holt Variablen
$rpc = new JSONRPC("http://{user}:{passwort}@{IP}:{port}/api/");
$temp = $rpc->GetValueFormatted(37442 /*[Garten\Wetterstation\Temperatur]*/);
$temp1 = $rpc->GetValue(37442 /*[Garten\Wetterstation\Temperatur]*/);
$humidity = $rpc->GetValueFormatted(42624 /*[Garten\Wetterstation\Feuchtigkeit]*/);
$wind = $rpc->GetValueFormatted(33880 /*[Garten\Wetterstation\Windgeschwindigkeit]*/);
$rain = $rpc->GetValueFormatted(30716 /*[Homematic\HomeMatic Systemvariablen\Regen heute]*/);
?>
<section id="oc3buttom">
<div class="oc3icon" id="tempicon"><img src="images/svg/temperature27.svg" alt="temp" height="75"/></div>
<div class="oc3buttomtext" id="temp">Temperatur</div>
<div class="oc3buttomvalue" id="tempvalue"><?php echo utf8_encode($temp); ?></div>
<div class="oc3icon" id="humidityicon"><img src="images/svg/drop18.svg" alt="humidity" height="75"/></div>
<div class="oc3buttomtext" id="humidity">Luftfeuchte</div>
<div class="oc3buttomvalue" id="humidityvalue"><?php echo $humidity; ?></div>
<div class="oc3icon" id="windicon"><img src="images/svg/wind54.svg" alt="wind" height="75"/></div>
<div class="oc3buttomtext" id="wind">Windstärke</div>
<div class="oc3buttomvalue" id="windvalue"><?php echo $wind; ?></div>
<div class="oc3icon" id="rainicon"><img src="images/svg/rain101.svg" alt="rain" height="75"/></div>
<div class="oc3buttomtext" id="rain">Regen Heute</div><div class="oc3buttomvalue" id="rainvalue"><?php echo $rain; ?></div>
</section>
</body>
</html>
$rpc = new JSONRPC("http://{user}:{passwort}@{IP}:{port}/api/");
user ist der Username von IP-Symcon Einzutragen
passwort ist das Passwort für den Fernzugriff
IP Die IP Adresse vom IP-Symcon Server
Port Der Port unter dem IP-Symcon Webserver erreichbar ist in der Regel 82
Dies sieht dann z.B. so aus
$rpc = new JSONRPC("http://max.mustermann@mail.de:superduperpasswort@192.168.55.10:82/api/
");
Die Variablen lesen wir mit GetValueFormatted aus und müssen dazu dann noch die ObjectID der Variable in IP-Symcon angeben.
$temp = $rpc->GetValueFormatted({ObjektID IPSymcon Variable});
Dann legen wir noch ein Unterverzeichnis unterhalb von dem neu erstellten Ordner neo an und nennen diesen css
In den Ordner css legen wir eine datei oc3buttom.css an mit dem Inhalt
code CSS:
@charset "utf-8";
#oc3buttom {
position: relative;
height: 100px;
border-radius: 25px;
width: 1173px;
-webkit-box-shadow: 2px 2px 5px rgba(83,76,76,1.00);
box-shadow: 2px 2px 5px rgba(83,76,76,1.00);
background-image: url(url), -webkit-linear-gradient(270deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
background-image: url(url), -moz-linear-gradient(270deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
background-image: url(url), -o-linear-gradient(270deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
background-image: url(url), linear-gradient(180deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
}
.oc3icon {
position: absolute;
opacity: 1;
top: 9px;
}
.oc3buttomtext {
position: absolute;
top: 40px;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
color: rgba(242,242,247,1.00);
text-shadow: 1px 1px 1px rgba(55,52,53,1.00);
font-size: x-large;
}
.oc3buttomvalue {
position: absolute;
top: 40px;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
color: rgba(242,242,247,1.00);
text-shadow: 1px 1px 1px rgba(55,52,53,1.00);
font-size: x-large;
}
#oc3buttom #tempicon {
left: 5px;
}
#oc3buttom #tempvalue {
left: 203px;
}
#oc3buttom #humidityvalue {
left: 291px;
}
#oc3buttom #temp {
left: 69px;
}
#oc3buttom #humidityicon {
left: 267px;
}
#oc3buttom #humidity {
left: 336px;
}
#oc3buttom #humidityvalue {
left: 459px;
}
#oc3buttom #windicon {
left: 513px;
}
#oc3buttom #wind {
left: 598px;
}
#oc3buttom #windvalue {
left: 727px;
}
#oc3buttom #rainicon {
left: 836px;
}
#oc3buttom #rain {
left: 926px;
}
#oc3buttom #rainvalue {
left: 1065px;
}
@import "compass/css3";
.logo {
width: 200px;
height: 164px;
}
.ground {
fill: #787f6a;
}
.ground:hover {
filter: url(#pictureFilter);
fill: #896d3d;
}
body {
padding: 20px;
}
Fertig dann bekommst Du die Variablen auch gleich in NEO angezeigt mit dem Nebeneffekt das Du sogar CSS nutzten kannst.
Sieht dann in NEO so aus. Unten die Werte über das IP-Symcon Modul in NEO.
Der Status ist nur in der Voransicht sichtbar.
Oben sind die Werte ohne IP-Symcon Modul über das Webseitenelement mit dem Code (s.o.) eingebunden.
Ist zwar etwas umständlicher aber dafür sieht man alles gleich in NEO, kann CSS, Javascript benutzten, die Schriftart variieren und Vektorgrafiken benutzten, was zur Zeit so in NEO ohne Webseitenelement nicht möglich ist.
Mein Vorschlag wäre zumindest einmalig den Status abzufragen und bei jeder Änderung an einem Element z.B. der Schriftgröße. Ansonsten muss man ständig zwischen NEO und der Vorschau wechseln. Mal sehen ob Mediola hier noch etwas nachbessert. Als Lösung für das Problem gibt es nur den Workarround ein Webseitenelement zu benutzten und das IP Symcon Modul zu umgehen.
Das Webseiten Element wird als iFrame in NEO dargestellt und der aktuelle Status ist dann auch in NEO sichtbar. Wenn man sich die Mühe macht dies selber zu machen hat man außerdem den Vorteil das man in dem Webseitenelement z.B. Javascript und CSS nutzen kann.
Hier ein einfaches Beispiel einer Seite und das Vorgehen:
- Unterhalb des IP Symcon Ordners unter webfront/user ein neues Verzeichnis anlegen z.B. neo
- In das Verzeichnis eine PHP Datei anlegen z.B. wetterdaten.php
- Zum Auslesen der Variablen wir die JSON API von IP Symcon genutzt
- Dann in die Datei wetterdaten.php folgenden Inhalt kopieren
PHP Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wetter OC3 Buttom</title>
<link href="css/oc3buttom.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6,n2,n4:default;acme:n4:default;
bilbo:n4:default.js" type="text/javascript"></script>
</head>
<body>
<?php
//Holt Variablen
$rpc = new JSONRPC("http://{user}:{passwort}@{IP}:{port}/api/");
$temp = $rpc->GetValueFormatted(37442 /*[Garten\Wetterstation\Temperatur]*/);
$temp1 = $rpc->GetValue(37442 /*[Garten\Wetterstation\Temperatur]*/);
$humidity = $rpc->GetValueFormatted(42624 /*[Garten\Wetterstation\Feuchtigkeit]*/);
$wind = $rpc->GetValueFormatted(33880 /*[Garten\Wetterstation\Windgeschwindigkeit]*/);
$rain = $rpc->GetValueFormatted(30716 /*[Homematic\HomeMatic Systemvariablen\Regen heute]*/);
?>
<section id="oc3buttom">
<div class="oc3icon" id="tempicon"><img src="images/svg/temperature27.svg" alt="temp" height="75"/></div>
<div class="oc3buttomtext" id="temp">Temperatur</div>
<div class="oc3buttomvalue" id="tempvalue"><?php echo utf8_encode($temp); ?></div>
<div class="oc3icon" id="humidityicon"><img src="images/svg/drop18.svg" alt="humidity" height="75"/></div>
<div class="oc3buttomtext" id="humidity">Luftfeuchte</div>
<div class="oc3buttomvalue" id="humidityvalue"><?php echo $humidity; ?></div>
<div class="oc3icon" id="windicon"><img src="images/svg/wind54.svg" alt="wind" height="75"/></div>
<div class="oc3buttomtext" id="wind">Windstärke</div>
<div class="oc3buttomvalue" id="windvalue"><?php echo $wind; ?></div>
<div class="oc3icon" id="rainicon"><img src="images/svg/rain101.svg" alt="rain" height="75"/></div>
<div class="oc3buttomtext" id="rain">Regen Heute</div><div class="oc3buttomvalue" id="rainvalue"><?php echo $rain; ?></div>
</section>
</body>
</html>
Wichtig sind folgende Zeilen:
$rpc = new JSONRPC("http://{user}:{passwort}@{IP}:{port}/api/");
user ist der Username von IP-Symcon Einzutragen
passwort ist das Passwort für den Fernzugriff
IP Die IP Adresse vom IP-Symcon Server
Port Der Port unter dem IP-Symcon Webserver erreichbar ist in der Regel 82
Dies sieht dann z.B. so aus
$rpc = new JSONRPC("http://max.mustermann@mail.de:superduperpasswort@192.168.55.10:82/api/
");
Die Variablen lesen wir mit GetValueFormatted aus und müssen dazu dann noch die ObjectID der Variable in IP-Symcon angeben.
$temp = $rpc->GetValueFormatted({ObjektID IPSymcon Variable});
Dann legen wir noch ein Unterverzeichnis unterhalb von dem neu erstellten Ordner neo an und nennen diesen css
In den Ordner css legen wir eine datei oc3buttom.css an mit dem Inhalt
code CSS:
@charset "utf-8";
#oc3buttom {
position: relative;
height: 100px;
border-radius: 25px;
width: 1173px;
-webkit-box-shadow: 2px 2px 5px rgba(83,76,76,1.00);
box-shadow: 2px 2px 5px rgba(83,76,76,1.00);
background-image: url(url), -webkit-linear-gradient(270deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
background-image: url(url), -moz-linear-gradient(270deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
background-image: url(url), -o-linear-gradient(270deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
background-image: url(url), linear-gradient(180deg,rgba(232,230,230,0.10) 0%,rgba(105,100,100,0.30) 100%);
}
.oc3icon {
position: absolute;
opacity: 1;
top: 9px;
}
.oc3buttomtext {
position: absolute;
top: 40px;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
color: rgba(242,242,247,1.00);
text-shadow: 1px 1px 1px rgba(55,52,53,1.00);
font-size: x-large;
}
.oc3buttomvalue {
position: absolute;
top: 40px;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
color: rgba(242,242,247,1.00);
text-shadow: 1px 1px 1px rgba(55,52,53,1.00);
font-size: x-large;
}
#oc3buttom #tempicon {
left: 5px;
}
#oc3buttom #tempvalue {
left: 203px;
}
#oc3buttom #humidityvalue {
left: 291px;
}
#oc3buttom #temp {
left: 69px;
}
#oc3buttom #humidityicon {
left: 267px;
}
#oc3buttom #humidity {
left: 336px;
}
#oc3buttom #humidityvalue {
left: 459px;
}
#oc3buttom #windicon {
left: 513px;
}
#oc3buttom #wind {
left: 598px;
}
#oc3buttom #windvalue {
left: 727px;
}
#oc3buttom #rainicon {
left: 836px;
}
#oc3buttom #rain {
left: 926px;
}
#oc3buttom #rainvalue {
left: 1065px;
}
@import "compass/css3";
.logo {
width: 200px;
height: 164px;
}
.ground {
fill: #787f6a;
}
.ground:hover {
filter: url(#pictureFilter);
fill: #896d3d;
}
body {
padding: 20px;
}
In NEO binden wir die Seite jetzt als Webseitenelement ein mit der Adresse: http://192.168.55.10:82/user/neo/wetterdaten.php
Fertig dann bekommst Du die Variablen auch gleich in NEO angezeigt mit dem Nebeneffekt das Du sogar CSS nutzten kannst.
Sieht dann in NEO so aus. Unten die Werte über das IP-Symcon Modul in NEO.
Der Status ist nur in der Voransicht sichtbar.
Oben sind die Werte ohne IP-Symcon Modul über das Webseitenelement mit dem Code (s.o.) eingebunden.
Ist zwar etwas umständlicher aber dafür sieht man alles gleich in NEO, kann CSS, Javascript benutzten, die Schriftart variieren und Vektorgrafiken benutzten, was zur Zeit so in NEO ohne Webseitenelement nicht möglich ist.
Neuen Kommentar hinzufügen