Thema 7" Tablet

moonsorrox · 26 März 2014, 18:11:43

@betateilchen

auf Grund deines interessanten Bildes http://forum.fhem.de/index.php/topic,21841.msg153029.html#msg153029 mit dem 7" Tablet interessiert es mich wie du das gemacht hast und ich bin gespannt ob ich das evtl. auf die Reihe bekomme...
Frage also was ist für ein Betriebssytem drauf oder geht das schon mit einem Android Tablet, denn ummuddeln wollte ich mein Tablet nicht...

betateilchen · 26 März 2014, 18:22:59

(http://up.picr.de/17769687ig.jpg)

das ist nix weiter als eine Webseite, die hier im lokalen Netz von einem apache bereitgestellt wird.

Die angezeigte Webseite hat folgenden Inhalt:

Code Auswählen



<html>

 <head>
  <link rel="stylesheet" type="text/css" href="panel.css">
 </head>

<body>
<div>
<table>

<tr>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wz_Licht_Sessel=set wz_Licht_Sessel toggle"><img src="licht_sessel.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wz_Licht_Sessel=set wz_Licht_Bild toggle"><img src="licht_bild.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wz_Licht_Sessel=set wz_Licht_Hifi toggle"><img src="licht_hifi.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.ez_Licht_Tisch=set ez_Licht_Tisch toggle"><img src="licht_tisch.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wek_lights=set wek_lights off"><img src="licht_alle_aus.svg"></img></a></td>
</tr>

<tr>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?cmd.ez_TV=set%20ez_TV%20on"><img src="essen_av_an.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?cmd.ez_TV=set%20ez_TV%20off"><img src="essen_av_aus.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?cmd.wz_AV=set%20wz_AV%20on"><img src="wohnen_av_an.svg"></img></a></td>
<td><a target="secret" href=""><img src="wohnen_av_aus.svg"></img></a></td>
<td><a target="secret" href=""><img src="blank.svg"></img></a></td></tr>

<tr>
<td><a href="wz_heizkurve.html" target="_top"><img src="wz_heizkurve.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wz_TC_Climate=set wz_TC_Climate desired-temp 20.5"><img src="temp_205.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wz_TC_Climate=set wz_TC_Climate desired-temp 16.0"><img src="temp_160.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?XHR=1&amp;cmd.wz_TC_Climate=set wz_TC_Climate desired-temp 23.0"><img src="temp_230.svg"></img></a></td>
<td><a target="secret" href=""><img src="blank.svg"></img></a></td>
</tr>

<tr>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?cmd.wz_Ventilator=set%20wz_Ventilator%20on"><img src="ventilator_an.svg"></img></a></td>
<td><a target="secret" href="http://192.168.123.241:8083/fhem?cmd.wz_Ventilator=set%20wz_Ventilator%20off"><img src="ventilator_aus.svg"></img></a></td>
<td><a target="secret" href=""><img src="blank.svg"></img></a></td>
<td><a href="esszimmer.html" target="_top"><img src="blank.svg"></img></a></td>
<td><a href="kueche.html" target="_top"><img src="blank.svg"></img></a></td>
</tr>
<tr>
     <td><a href="wek.html" target="_top"><img src="wek_a.svg"></img></a></td>
     <td><a href="as.html" target="_top"><img src="as.svg"></img></a></td>
     <td><a href="fb.html" target="_top"><img src="fb.svg"></img></a></td>
     <td><a href="sonstiges.html" target="_top"><img src="sonstiges.svg"></img></a></td>
     <td><a href="panel.html" target="_top"><img src="zurueck.svg"></img></a></td>
</tr>
</table>
</div>
<div id="hiddenDiv"><iframe id="secretFrame" name="secret" src=""></div>
</body>
</html>

Die bunten Schaltflächen sind also nichts weiter als einzelne Grafiken, die in einer html-Tabelle angeordnet sind und hinter denen jeweils ein Link liegt.

Als Webbrowser habe ich den von Dirk bereitgestellten Fullscreenbrowser (und nur diesen, ohne fhem Gegenstück) verwendet. Der wird beim Android-Start automatisch gestartet.

moonsorrox · 26 März 2014, 19:16:58

OK vielen Dank, dass schaue ich mir morgen mal in Ruhe an da ich jetzt los muss und dabei überlege ich mir wo ich die Webseite hinterlege. Da wäre ein Qnap NAS oder auch ein Webserver, mal schauen wie ich das mache.
Da du in einem Beitrag geschrieben hast das du deinen Cubietruck auch mit einem Apache ausgestattet hast denke ich ist der bei dir auf dem Cubietruck, dass könnte ich natürlich auch noch machen, aber der würde sich wohl mit der Webseite langweilen...!

Aber wer weiß zu was der alles noch zu gerbauchen ist..

betateilchen · 26 März 2014, 20:31:02

Tipp: das funktioniert sogar ganz ohne separaten Webserver, denn fhem hat selbst einen eingebaut, den Du für solche Zwecke auch benutzen kannst.

commandref -> HTTPSRV

moonsorrox · 27 März 2014, 18:15:18

so ich habe mir das mal ein wenig angeschaut, ganz so einfach läßt sich das jetzt nicht nachbauen, da sind ja noch ein paar html Seiten mehr und vorallem die panel.css. Dann noch z.B. die svg Img's die mal erst mal bauen muss und eben auch seine eigenen Links richtig umsetzen.
Damit will ich sagen einiges an Arbeit kommt da auf mich zu...!

betateilchen · 27 März 2014, 19:34:48

naja, an den SVG soll es nicht scheitern, da kann ich Dir gerne eine Vorlage zur Verfügung stellen, die Du mit einem SVG Editor (z.B. Inkscape) problemlos bearbeiten und duplizieren kannst.

Und die panel.css ist auch kein Geheimnis:

Code Auswählen


html, body 
{
margin: 0;
padding: 0;
}

table, tr, td 
{
border-collapse: collapse;
border: 0;
margin: 0;
padding: 0;
background-color: 000000;
cellpadding: 0;
cellspacing: 0;
}

#hiddenDiv
{
position:absolute; 
top:440px; 
left:0px; 
width:0px; 
height:0px; 
border:0; 
margin:0; 
padding:0;
}

#secretFrame
{
border-style:hidden; 
border:none;
width:0px; 
height:0px; 
border:0; 
margin:0; 
padding:0;
}

moonsorrox · 27 März 2014, 19:41:13

Oh vielen Dank, da mach ich mich dann mal an die Arbeit, svg kannte ich bisher nicht nur eben hier von fhem..
~~Mit Irvan geht das wohl nicht zu bearbeiten, denn er will mir die immer mit dem IE öffnen.~~

hat sich erledigt, jetzt habe ich Inkscape drauf und sehe das ist ja ein vollwertiges Programm, ähnlich wie Photoshop... da muss ich ja erst gehen lernen mit...!

@betateilchen:
hast du mal dran gedacht, die svg Buttons so zu gestalten das wenn du sie klickst sich die Farbe ändert so als ein Art Rückmeldung "jetzt bin ich An" oder "Aus"..?

betateilchen · 08 April 2014, 21:31:30

hab ich, brauch ich aber nicht, weil ich die Änderung auf der Statusseite ohnehin sehe.

Gunther · 14 April 2014, 15:28:35

Danke für das tolle Beispiel. Funktioniert super!
Habe mir nun ein sehr günstiges 7"-Tablett geordert anstelle eines HM-Tasters.

Zitat von: betateilchen am 08 April 2014, 21:31:30
hab ich, brauch ich aber nicht, weil ich die Änderung auf der Statusseite ohnehin sehe.

Was meinst Du mit Statusseite?
Hast Du da noch was schönes gebastelt?
Interessieren würden mich Status zu Fenstern, Temperaturen und Lampen, ggf. sogar etwas zu meiner Heizung (Graph).
Bekomme ich so etwas per HTML dargestellt?

Lädst Du das Pad zu bestimmten Zeiten oder hängt das immer am Strom? Habe da noch nicht die tolle Idee.

yogiflop · 14 April 2014, 20:03:44

Hallo und guten Abend,

habe mir das hier auch mal angeguckt und ausprobiert. Aber so wie es immer bei mir ist, ist irgendetwas wieder anders bei mir.

Bei mir werden nur kleine Fragezeichen angezeigt und ein leeres Feld. Die Bilder sind im gleichen Verzeichnis wie index.html und panel.css

Wenn ich auf eines der Fragezeichen klicke, werden aber die Schaltvorgänge durchgeführt. Das heißt für mich, das es ein Problem mit der Grafik ist.

Code Auswählen

define fhem.http HTTPSRV touch /usr/share/fhem Touchplay

Gunther · 14 April 2014, 21:35:40

Sind Deine Grafiken so benannt, wie im HTML-Code?

Kenne mich mit dem Webserver von FHEM nicht aus. Hast Du vielleicht ein Berechtigungsproblem bei den Bildern?

yogiflop · 14 April 2014, 21:37:38

Zitat von: Gunther am 14 April 2014, 21:35:40
Sind Deine Grafiken so benannt, wie im HTML-Code?

Kenne mich mit dem Webserver von FHEM nicht aus. Hast Du vielleicht ein Berechtigungsproblem bei den Bildern?

Groß- und Klein ist beachtet und die Bilder haben die selben Rechte wie die index.html
ich weiß nur nicht, wo der Server die Bilder erwartet.

die Adresse ist http://10.0.0.232:8087/fhem/touch da kommt das oben beschriebene Bild. Wenn ich z.b.: http://10.0.0.232:8087/fhem/touch/blank.svg aufrufe, wird das schwarze Bild gezeigt

Gunther · 14 April 2014, 21:39:24

Bei dem Beispielcoding von Betateilchen direkt auf der gleichen Ebene wie die HTML.
Poste doch mal Deinen Code und die Dateinamen. Auch von HTML und CSS.

yogiflop · 14 April 2014, 21:42:32

Zitat von: Gunther am 14 April 2014, 21:39:24
Bei dem Beispielcoding von Betateilchen direkt auf der gleichen Ebene wie die HTML.
Poste doch mal Deinen Code und die Dateinamen. Auch von HTML und CSS.

wie gewünscht:

Code Auswählen


<html>

 <head>
  <link rel="stylesheet" type="text/css" href="panel.css">
 </head>

<body>
<div>
<table>

<tr>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.wz.sd.Sofa=set%20wz.sd.Sofa%20on"><img src="sofakugel_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.fl.sd.Licht=set%20fl.sd.Licht%20on"><img src="flurlicht_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.wz.sd.Vitrine=set%20wz.sd.Vitrine%20on"><img src="vitrine_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.az.sd.Printer=set%20az.sd.Printer%20on"><img src="drucker_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.fl.sd.ArchosG101=set%20fl.sd.ArchosG101%20on"><img src="android_on.svg"></img></a></td>
</tr>

<tr>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.wz.sd.Sofa=set%20wz.sd.Sofa%20off"><img src="sofakugel_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.fl.sd.Licht=set%20fl.sd.Licht%20off"><img src="flurlicht_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.wz.sd.Vitrine=set%20wz.sd.Vitrine%20off"><img src="vitrine_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.az.sd.Printer=set%20az.sd.Printer%20off"><img src="drucker_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.fl.sd.ArchosG101=set%20fl.sd.ArchosG101%20off"><img src="android_off.svg"></img></a></td>

<tr>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.ku.sd.AirPlay=set%20ku.sd.AirPlay%20on"><img src="airplaykueche_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.bd.sd.AirPlay=set%20bd.sd.AirPlay%20on"><img src="airplaybad_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.az.sd.AirPlay=set%20az.sd.AirPlay%20on"><img src="airplayarbeit_on.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.bz.hz.display.cul.Clima=set%20bz.hz.display.cul.Clima%20controlMode%20auto"><img src="bad_temp_auto.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.bz.hz.display.cul.Clima=set%20bz.hz.display.cul.Clima%20desired-temp%2024.0"><img src="bad_temp_240.svg"></img></a></td>

<tr>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.ku.sd.AirPlay=set%20ku.sd.AirPlay%20off"><img src="airplaykueche_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.bd.sd.AirPlay=set%20bd.sd.AirPlay%20off"><img src="airplaybad_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.az.sd.AirPlay=set%20az.sd.AirPlay%20off"><img src="airplayarbeit_off.svg"></img></a></td>
<td><a target="secret" href="http://10.0.0.232:8087/fhem?cmd.bz.hz.display.cul.Clima=set%20bz.hz.display.cul.Clima%20controlManu%2027.0"><img src="bad_temp_manu_270.svg"></img></a></td>
<td><a target="secret" href=""><img src="blank.svg"></img></a></td></tr>

<tr>
     <td><a href="wek.html" target="_top"><img src="wek_a.svg"></img></a></td>
     <td><a href="as.html" target="_top"><img src="as.svg"></img></a></td>
     <td><a href="fb.html" target="_top"><img src="fb.svg"></img></a></td>
     <td><a href="sonstiges.html" target="_top"><img src="sonstiges.svg"></img></a></td>
     <td><a href="panel.html" target="_top"><img src="zurueck.svg"></img></a></td>
</tr>
</table>
</div>
<div id="hiddenDiv"><iframe id="secretFrame" name="secret" src=""></div>
</body>
</html>

und

Code Auswählen

html, body 
{
margin: 0;
padding: 0;
}

table, tr, td 
{
border-collapse: collapse;
border: 0;
margin: 0;
padding: 0;
background-color: 000000;
cellpadding: 0;
cellspacing: 0;
}

#hiddenDiv
{
position:absolute; 
top:440px; 
left:0px; 
width:0px; 
height:0px; 
border:0; 
margin:0; 
padding:0;
}

#secretFrame
{
border-style:hidden; 
border:none;
width:0px; 
height:0px; 
border:0; 
margin:0; 
padding:0;
}

betateilchen · 14 April 2014, 21:52:13

Zitat von: Gunther am 14 April 2014, 15:28:35
Was meinst Du mit Statusseite?
Hast Du da noch was schönes gebastelt?
Interessieren würden mich Status zu Fenstern, Temperaturen und Lampen, ggf. sogar etwas zu meiner Heizung (Graph).

(http://up.picr.de/17966931jv.jpg)

Sowas kann aber fhem von Haus aus - ich mach das mit dem Modul 02_RSS.pm. Das generiert mir diese Grafik und der Fullscreen-Browser auf dem Tablet zeigt das als "Einstiegsseite" an.

"Balkon (in rot)" bedeutet "Balkontür offen"
"KU re (in gelb)" bedeutet "rechtes Küchenfenster gekippt" (gelb = gekippt, rot = offen) Alle geschlossenen Fenster/Türen werden nicht angezeigt.

Die roten Einträge links besagen, dass im Schlafzimmer das rechte Bett (Wasserbett) geheizt wird und dass die Balkonbeleuchtung angeschaltet ist.