Wofür FHEM? Tablet als Wand-Infodisplay mit FLOORPLAN

[Tommy82]

Hab sie dann mal so geändert, Logo ist aber immer noch da

Code Auswählen Erweitern

body     { background-color: #444444; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; }
body[id~=Media]     { background-color: #A5A5A5; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; }

#backimg {position:absolute; top:15px; left:190px;}
#logo { display:none;}
#fpmenu.fp_arrange   { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; }

#menu    { position:absolute; top:180px; left:30px; width:128px; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding-bottom: 6px; padding-top: 6px;}
#menu.floorplan  { position:absolute; top:180px; left:30px; width:128px; font-size:13px; border:1px solid #CCCCCC; background: #111111; box-shadow:5px 5px 5px #000; padding: 6px;}

#hdr     { position:absolute; top:15px; left:190px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; margin-bottom: 10px;}
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#startcontent {position:absolute; top:20px; left:200px; text-align:left; font-size: 16px; color:gray; }
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }

a { color:#CCCCCC; text-decoration:none;}
td {padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px;}

img { -moz-border-radius:8px; border-radius:8px;}

table { -moz-border-radius:8px; border-radius:8px; }
table tr.sel { backround: #333333;}
table a:hover {color: #ffffff;}

.devicename     { font-size: 14px; text-align:center; color: #111111; }
.devicestate    { text-align:center; color: #111111; }
.devicecommands { font-size:14px; text-align:center; color: #111111; }
        .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }


#sz_Rollo.devicename     {font-size:14px;}
#sz_Rollo.devicecommands {font-size:12px; text-align:center; }
#ez_Aussentemperatur_dummy.devicestate  {color:green; font-size:30px; }
#HomeStatus.devicestate  {color:green; font-size:30px; }
table.dummy              {min-width:100px;}
table.FHT                {min-width:100px; }
#wakeup.devicestate      {color:green; font-size:11px; }
#ez_FHT.devicestate      {color:green; font-size:30px; }
#Home.fp_Grundriss       {font-size:14px; width:100px; }
#Home.fp_Media           {font-size:14px; text-align:left; }
#Media                   {font-size:14px; }
#Grundriss               {font-size:14px; text-align:left; }
#w_MucWeather            {font-size:16px; color:#D4D4D4}
#w_WertListe1            {font-size:20px; color:gray}
.fp_tempvalue            {color:red; font-size:20px; }
.fp_humvalue             {color:blue; font-size:20px; }


h2,h3,h4 { color:#52865D; line-height:1.3; margin-top:1.5em; font-family:Verdana; }


/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#101010; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px; height:20px;
          line-height:20px; border:2px solid; color:white; text-align:center; }
.downText { margin-top:2px; }

/* next lines are for openautomation-svg */
svg { height:32px; width:32px; fill:#fff; vertical-align:middle; margin:2px 0; }
g.on { fill:red; }

/* next lines are for remotecontrol */
.rc_body              { border-style: solid; border-color: gray; border-width: 2px;
                        padding: 5px; background: #101010; font-size:6px;}
.rc_button            { padding: 5px 7px;}
.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }


[Blackcat]

Hab sie dann mal so geändert, Logo ist aber immer noch da

Code Auswählen Erweitern

body     { background-color: #444444; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; }
body[id~=Media]     { background-color: #A5A5A5; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; }

#backimg {position:absolute; top:15px; left:190px;}
#logo { display:none !important;}
#fpmenu.fp_arrange   { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; }

#menu    { position:absolute; top:180px; left:30px; width:128px; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding-bottom: 6px; padding-top: 6px;}
#menu.floorplan  { position:absolute; top:180px; left:30px; width:128px; font-size:13px; border:1px solid #CCCCCC; background: #111111; box-shadow:5px 5px 5px #000; padding: 6px;}

#hdr     { position:absolute; top:15px; left:190px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; margin-bottom: 10px;}
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#startcontent {position:absolute; top:20px; left:200px; text-align:left; font-size: 16px; color:gray; }
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }

a { color:#CCCCCC; text-decoration:none;}
td {padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px;}

img { -moz-border-radius:8px; border-radius:8px;}

table { -moz-border-radius:8px; border-radius:8px; }
table tr.sel { backround: #333333;}
table a:hover {color: #ffffff;}

.devicename     { font-size: 14px; text-align:center; color: #111111; }
.devicestate    { text-align:center; color: #111111; }
.devicecommands { font-size:14px; text-align:center; color: #111111; }
        .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }


#sz_Rollo.devicename     {font-size:14px;}
#sz_Rollo.devicecommands {font-size:12px; text-align:center; }
#ez_Aussentemperatur_dummy.devicestate  {color:green; font-size:30px; }
#HomeStatus.devicestate  {color:green; font-size:30px; }
table.dummy              {min-width:100px;}
table.FHT                {min-width:100px; }
#wakeup.devicestate      {color:green; font-size:11px; }
#ez_FHT.devicestate      {color:green; font-size:30px; }
#Home.fp_Grundriss       {font-size:14px; width:100px; }
#Home.fp_Media           {font-size:14px; text-align:left; }
#Media                   {font-size:14px; }
#Grundriss               {font-size:14px; text-align:left; }
#w_MucWeather            {font-size:16px; color:#D4D4D4}
#w_WertListe1            {font-size:20px; color:gray}
.fp_tempvalue            {color:red; font-size:20px; }
.fp_humvalue             {color:blue; font-size:20px; }


h2,h3,h4 { color:#52865D; line-height:1.3; margin-top:1.5em; font-family:Verdana; }


/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#101010; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px; height:20px;
          line-height:20px; border:2px solid; color:white; text-align:center; }
.downText { margin-top:2px; }

/* next lines are for openautomation-svg */
svg { height:32px; width:32px; fill:#fff; vertical-align:middle; margin:2px 0; }
g.on { fill:red; }

/* next lines are for remotecontrol */
.rc_body              { border-style: solid; border-color: gray; border-width: 2px;
                        padding: 5px; background: #101010; font-size:6px;}
.rc_button            { padding: 5px 7px;}
.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }


Und so?

[Tommy82]

leider auch nicht, auch nicht nach einem shutdown restart....
Muss ich die darkstylefloorplan.css dem Floorplan noch irgendwie explizit zuweisen?

[franky08]

Die geänderte darkstylefloorplan.css gehört als Attribut nach FLOORPLANS:

so:
stylesheet
darkfloorplanstyle_original.css

Die kirk1 gehört als Attribut nach WEBtablet
so:
stylesheetPrefix
kirk1

P.S. An dem fhem Logo habe ich auch lange herumgewerkelt, ehe es weg war

[franky08]

Dann ein reload icons machen oder server neu starten

[Tommy82]

Die geänderte darkstylefloorplan.css gehört als Attribut nach FLOORPLANS:

so:
stylesheet
darkfloorplanstyle_original.css

Die kirk1 gehört als Attribut nach WEBtablet
so:
stylesheetPrefix
kirk1

P.S. An dem fhem Logo habe ich auch lange herumgewerkelt, ehe es weg war

Na das freud mich das ich mich nicht nur blöd anstelle

Aber verstanden hab ich das noch nicht so ganz.
Also die kirk1 muss/kann ich einfach in mein Fhem (wohin dort) kopieren?
Dann setz ich in der fhem.cfg über attr WEBtablet stylesheetPrefix kirk1

oder wie?


Was soll ich hier

so:
stylesheet
darkfloorplanstyle_original.css

genau machen?

[franky08]

Die Dateien gehören nach /opt/fhem/www/pgm2 auf einem Linux System. Die Rechte sowie Besitzer und Gruppe anpassen!! (so wie alle anderen Dateien in dem Verzeichnis)

Die geänderte darkstylefloorplan.css gehört als Attribut nach FLOORPLANS:

so:
stylesheet
darkfloorplanstyle_original.css

Mann, mann mal ein bischen mit der Struktur von fhem beschäftigen!
Unter FLOORPLANS gibt es Internals, Attributes und ...

Und unter Attributes gibst du mit dem attr Button die css als stylesheet Attribut an!

[Tommy82]

So, hab die WEBtablet mal so geändert:

Code Auswählen Erweitern

define WEBtablet FHEMWEB 8085 global
attr WEBtablet hiddenroom DashboardRoom,AlarmRoom
attr WEBtablet stylesheetPrefix kirk1svg_style

und im Floorplan das Atribut gesetzt, ein list sieht jetzt so aus:

Code Auswählen Erweitern

Internals:
   NAME       Home
   NR         140
   STATE      Home
   TYPE       FLOORPLAN
Attributes:
   commandfield 1
   fp_arrange 1
   fp_noMenu  1
   stylesheet darkfloorplanstyle

Jetzt ist das Logo weg, aber das Bild zu klein....

Hab dann mal in die Status Seite das Wetter von yahoo eingebunden, allerdings hätte ich das lieber wie bei euch quer und die Schrift in der gleichen Schrift wie der rest, also Lcars, und eine andere Schrift farbe, da die im Moment scharz ist und das sieht man ja bei schwarzem Hintergrund nicht

dann habe ich über einen Dummy versucht, die Bezeichnung dynamisch zu gestalten, dafür hab ich folgenden Dummy angelegt

Code Auswählen Erweitern

Internals:
   CFGFN
   NAME       Status
   NR         160
   STATE      ???
   TYPE       dummy
Attributes:
   fp_Home    130,66,1,
   icon       none
   webCmd     Home

über das icon=none hatte ich versucht das Icon, was als angezeigt wird zu deaktivieren, aber das klappt leider nicht, und sieht wie man auf dem Screen sehen kann schei... aus.
Kann ich auch da Lcars verwenden? Wenn ja wie?

[Tommy82]

Wie habt ihr das mit der Bezeichnung und den Links gemacht? Wenn ich die Bezeichnung direkt in die Hintergrund Grafik schreien wie mache ich diese dann anklickbar als Link auf die nächste fp Ebene? Oder habt ihr das als weblink eingefügt und die Schrift über die .css geändert?

[Tommy82]

Ich habe per PN eine Frage bekommen, die ich gern hier öffentlich beantworten möchte.
Es wurde der Code aus http://forum.fhem.de/index.php/topic,22336.msg158613.html#msg158613 (Posting 8 dieses Threads) genommen.
Allerdings erscheinen keine Bilder, sondern nur zum Beispiel "Wettervorhersage1_Symbol.27".

In dem genannten Posting wurde es angedeutet: Es werden alle Wetterbilder jeweils je Icon-Dummy benötigt.
Bei Yahoo sind das knapp 50 Bilder. Allein das Bild 27 muss mehrmals kopiert werden und dann müssen folgende Dateien (mit gleichem Inhalt) vorhanden sein:
Wettervorhersage1_Symbol.27.png
Wettervorhersage2_Symbol.27.png
Wettervorhersage3_Symbol.27.png
Wettervorhersage4_Symbol.27.png
Wettervorhersage5_Symbol.27.png

Genauso auch mit allen anderen Bildern.

Hallo,
ich habe versucht genau das nachzubauen, und bin nach obenstehendem Link vorgegangen, dann bekomme ich aber als Status nur

Code Auswählen Erweitern

??? Was habe ich falsch gemacht? Woher kommen die Icons überhaupt?

Danke

[Puschel74]

Tommy mach doch erstmal eine Baustelle fertig.
Du verzettelst dich und weisst dann nicht mehr ob du gestern links gegangen bist oder doch wieder zurück.
Beiträge vor deinem liest du ja eh nicht oder du überfliegst sie nur und weisst dann nicht was relevant gewesen wäre.
Reicht dir das IF-Problem nicht?
Wobei das keines gewesen wäre wenn du die Beispiele in der commandref verstanden hättest oder auf DOIF ausgewichen wärst.
Aber das hab ich ja gestern schon geschrieben - bei dir ist der "Spieltrieb" nicht nur eingerostet, du hast keinen Spieltrieb.
Du versuchst was - es klappt nicht also Beitrag schreiben.
Lesen und auf dich abwandeln - Fehlanzeige.
Bist du dir sicher das FHEM DAS ist was du möchtest/verstehst?
Wenn das Forum mal down ist - was machst du dann? Den Elektriker rufen?

[Bubbles71]

Hallo,

erst mal vielen Dank an Tion und DerJens für Eure Anregungen zu LCARS Darstellungen.

Ich möchte hier nun mal meinen aktuellen Stand vorstellen, aus einer Kombination aus .css und spezifischen SVG Grafiken.

Für die Slider habe ich svg Grafiken erstellt und als Hintergrund in den entsprechenden Elementen in der .css definiert.

Uneinig mit mir selber bin ich noch mit den Rahmen um oder über Funktionseinheiten (siehe bild2 vs bild3).

Vielleicht gefällt es ja dem einen oder anderen.

Liebe Grüße,

Roland

[Tommy82]

Ich habe per PN eine Frage bekommen, die ich gern hier öffentlich beantworten möchte.
Es wurde der Code aus http://forum.fhem.de/index.php/topic,22336.msg158613.html#msg158613 (Posting 8 dieses Threads) genommen.
Allerdings erscheinen keine Bilder, sondern nur zum Beispiel "Wettervorhersage1_Symbol.27".

In dem genannten Posting wurde es angedeutet: Es werden alle Wetterbilder jeweils je Icon-Dummy benötigt.
Bei Yahoo sind das knapp 50 Bilder. Allein das Bild 27 muss mehrmals kopiert werden und dann müssen folgende Dateien (mit gleichem Inhalt) vorhanden sein:
Wettervorhersage1_Symbol.27.png
Wettervorhersage2_Symbol.27.png
Wettervorhersage3_Symbol.27.png
Wettervorhersage4_Symbol.27.png
Wettervorhersage5_Symbol.27.png

Genauso auch mit allen anderen Bildern.

Ich habe den Floorplan bei mir jedoch umgestellt und den Code erheblich vereinfacht, das macht die Anordnung bzw. eine Änderung der Lage auf dem Bildschirm erheblich einfacher.
Ich habe nun das Modul Readingsgroup verwendet.

Code Auswählen Erweitern

define Wetter readingsGroup schreibhierirgendwasrein

danach in der Readingsgroup bei DEF das folgende eintragen (und "schreibhierirgendwasrein" natürlich löschen):

Code Auswählen Erweitern


YahooWetter:<heute>,fc2_day_of_week,fc3_day_of_week,fc4_day_of_week,fc5_day_of_week
YahooWetter:fc1_code,fc2_code,fc3_code,fc4_code,fc5_code
YahooWetter:fc1_high_c,fc2_high_c,fc3_high_c,fc4_high_c,fc5_high_c
YahooWetter:fc1_low_c,fc2_low_c,fc3_low_c,fc4_low_c,fc5_low_c

danach noch die gewünschten der folgenden Attribute im Readingsgroup auswählen oder über die Befehlszeile setzen:

Code Auswählen Erweitern


attr Wetter nameStyle style="text-align:center"     #damit der Name zentriert ist
attr Wetter noheading 1                                 #damit die Überschrift ausgeblendet wird
attr Wetter nolinks 1                                 #Die Namen nicht als Links
attr Wetter nonames 1                      #den Namen "YahooWetter" ausblenden

attr Wetter valueFormat {"fc1_low_c" => "%.0f°C", "fc1_high_c" => "%.0f°C", "fc2_low_c" => "%.0f°C", "fc2_high_c" => "%.0f°C", "fc3_low_c" => "%.0f°C", "fc3_high_c" => "%.0f°C", "fc4_low_c" => "%.0f°C", "fc4_high_c" => "%.0f°C", "fc5_low_c" => "%.0f°C", "fc5_high_c" => "%.0f°C" }
#damit wird den Temperaturwerten noch "°C" angefügt

attr Wetter valueIcon {'fc1_code' => 'Wetter.%VALUE', 'fc2_code' => 'Wetter.%VALUE', 'fc3_code' => 'Wetter.%VALUE', 'fc4_code' => 'Wetter.%VALUE', 'fc5_code' => 'Wetter.%VALUE'}
#damit werden die Bilder nur noch jeweils einmal benötigt. In meinem Fall muss es dann "Wetter.27.png" etc. heißen.

attr Wetter valueStyle style="text-align:center"       #damit die Werte zentriert sind

Wem's gefällt: Viel Spaß beim Nachbauen

Hallo,
hab bei mir jetzt auch mal diie readinggroup wie von dir beschrieben angelegt.  Allerdings ist die Schrift jetzt Scharz im Floorplan, so das man (bei schwarzem Hintergrund) nichts lesen kann. In meiner darkflorrplan.css hab ich

Code Auswählen Erweitern

#Wetter {font-size:28px; color: #FF00FF; } eingefügt, allerdings ist die Schrift trotzdem noch schwarz, was könnte noch falsch sein? Bekomme auch noch keine icons angezeigt, was muss ich dafür tun?

Danke

[micomat]

Hallo,

erst mal vielen Dank an Tion und DerJens für Eure Anregungen zu LCARS Darstellungen.

Ich möchte hier nun mal meinen aktuellen Stand vorstellen, aus einer Kombination aus .css und spezifischen SVG Grafiken.

Für die Slider habe ich svg Grafiken erstellt und als Hintergrund in den entsprechenden Elementen in der .css definiert.

Uneinig mit mir selber bin ich noch mit den Rahmen um oder über Funktionseinheiten (siehe bild2 vs bild3).

Vielleicht gefällt es ja dem einen oder anderen.

Liebe Grüße,

Roland

also ich finds klasse
wenn ich mal viel zeit hab werde ich mir auch sowas basteln.

[robertPI]

Hallo,

nachdem ich schon eine ganze Weile "passiv" im Forum unterwegs bin und mir bislang alle Fragen quasi selbst beantworten konnte, mein erster Post. Also bitte nicht gleich hauen

Ich möchte mir ein Wanddisplay für fhem basteln, folgendes schwebt mir vor:

• Nexus 7 (2012) im IKEA Bilderrahmen
• permanente Spannungsversorgung über den USB Port mittels 5V Steckernetzteil.
• PIR Bewegungsmelder

Der PIR Bewegungsmelder ist sicherlich der interessante Teil.
Damit das Display nicht den ganzen Tag einsam vor sich hin leuchtet und sinnlos Strom verbrät: Das 2012er Nexus hat einen Docking Port, beim andocken wird Display permanent eingeschaltet, bzw. es lassen sich über Tasker und Konsorten definierte Aktionen ausführen ( http://www.android-hilfe.de/zubehoer-fuer-google-nexus-7-2012/376729-inside-nexus7-dock.html )

Den +5V Port des Docks möchte ich durch den Ausgang eines PIRs ansteuern, z.B. http://www.amazon.de/dp/B008U1JR1Y ggf. über eine Transistor Schaltung, da der PIR 3.3V ausgibt und die Schaltschwelle des Nexus möglicherweise höher liegt. Nähert sich jemand dem Tablet, sollte das Display eingeschaltet werden.

Gibt es zu so einer Schaltung Erfahrungen? Lässt sich sicherlich auf die meisten Tablets mit Docking Port übertragen.

Robert