Meine Fragen zum InfoPanel...?

Begonnen von moonsorrox, 28 Juli 2016, 10:21:06

Vorheriges Thema - Nächstes Thema

moonsorrox

ZitatAusserdem baue ich immer 4 Seiten in einem einzelnen InfoPanel zusammen, dann kann ich einfach mit scrollen nach oben bzw. rechts die anderen 3 Seiten sehen. D.h. das InfoPanel selbst ist in einer Größe von 1600x884 Pixel definiert, wovon immer eine "Viertelseite" angezeigt wird. Das reduziert die Belastung von fhem erheblich, ausserdem ist die Darstellung auf dem Tablet viel schneller, weil die drei anderen Seiten auch alle schon fertig geladen sind.
ja genau das hatte ich vor zu machen, aber dazu muss das eben der Browser machen und das macht meiner nicht
Evtl. liegt es auch an der Einstellung des Samsung Tablet... muss ich mal schauen wie ich das hinbekomme

Zitat von: Benni am 30 Juli 2016, 17:23:34
Bei mir macht das der "fully Fullscreen Browser" ebenfalls sehr gut!
davon gibt es einige, alle die ich hatte waren Mist.

Ich habe den mal gesucht, ist das jetzt der mit dem großen blauen W oder der mit dem kleinen f
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Benni

Zitat von: moonsorrox am 30 Juli 2016, 18:30:28
jch habe den mal gesucht, ist das jetzt der mit dem großen blauen W oder der mit dem kleinen f

Das ist der mit dem kleinen krakeliken f

Hier noch der Thread aus dem Forum dazu:

https://forum.fhem.de/index.php/topic,48862.0.html

moonsorrox

#17
OK das ist der Browser den ich meinte. Aber auch der zeigt mir nur ein kleines Bild meiner Hausautomation.
Mein Samsung Galaxy Tab 3 hat eine Auflösung von:
25,6 cm (10,1 Zoll)
1280 × 800 Pixel

Wenn ich jetzt eine Bildgröße einstelle von 2560x1600 um die doppelte Größe zu erreichen um nach rechts und nach unten zu scrollen ist der Teil der meine Anzeige betrifft sehr klein es fehlen rechts 5cm zum Tablet Rand und nach unten sind es 3,5.
Mache morgen mal ein Foto ist zu spät.

Das heißt für mich das Bild ist von der Größe her doppelt so groß, aber der angezeigte Bereich der Hausautomationsanzeige ist zu klein. Auch zeigt er mir nur eine Schriftart an, wird also vom Browser auch ignoriert.

Irgend eine Einstellung fehlt mir da noch.. :-\ oder ich muss einfach alles größer machen.
@Benni
wie groß hast du deine Schriften in der Anzeige.
Ich habe z.B. die blaue Überschrift in pt 24, das Wort Temperatur ist in pt 18 und die kleineren Schriften sind alle in pt 15, die sind also ohne Brille schon nicht mehr zu lesen. (hier auf dem großen Foto im Forum geht das noch)
Dabei wird mir auf dem PC im Firefox alles lesbar angezeigt.
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Benni

#18
Mein Haupt-Infopanel ist auch in 4 Quadranten unterteilt, die jeweils so groß sind wie die Auflösung des Tablets (1280x800) also insgesamt 2560x1600, wie bei dir auch.
Derzeit sind allerding nur 2 Quadranten belegt (links oben und links unten)
Das ganze ohne Hintergrundgrafik.

Ich verwende fast ausschließlich Arial als Schriftart. Die Schriftgrößen bei mir sind:

  • im Header: 28 pt
  • Bei den Infofeldern (Temperaturen, Licht): 18pt
  • Beim Beleuchtungszustand sind es 17pt (brauchte etwas mehr Platz :) )
  • Die Buttons inkl. Fenster und Beleuchtungszustand für OG und UG sind mit 32pt Beschriftet.
  • Der Sprachbefehl-Button mit 24pt
  • Die Schließzustände (unter der Anwesenheitsanzeige) hat 18pt
  • Der Ticker mit den Wetterwarnungen hat 20pt
  • Der Waschmaschinen-Status hat 22pt (warum ist der eigentlich anders?  :-\ )
  • Der Nachrichten-Ticker wird mit Courier / 16pt angezeigt (wieso muss ich eigentlich in Deutschland wissen, wenn in Texas ein Heißluftballon abstürzt?)
  • Die Buttons auf dem 2. Quadranten (links unten) sind in Arial / 24pt beschriftet.

Für die Positionierung verwende ich sehr viel die Turtle-Funtionalität (moveby) und positioniere häufig relativ (0.5 oder 0.25)




moonsorrox

OK vielen Dank für die ausführlichen Informationen.
Tja, so wie es aussieht muss ich alles komplett neu machen was die Schriftgrößen und die Ausrichtung betrifft.

Was mir noch auffällt, es werden nicht alle Schriften unterstützt (entweder der Browser oder mein Galaxy Tab 3 kann es nicht) ich habe mal ein Wort mehrmals untereinander geschrieben und verschieden Schriften zugeordnet.
Die von mir so gern genutzte DejaVu unterstützt er gar nicht und "georgia" sieht genauso aus wie "times". Hatte noch einige probiert die ich unter fonts gefunden habe, aber es ändert sich nichts.
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

betateilchen

#20
Zitat von: moonsorrox am 31 Juli 2016, 19:26:02
Was mir noch auffällt, es werden nicht alle Schriften unterstützt

Nochmal:

InfoPanel unterstützt alle Schriftarten dieser Welt, weil es überhaupt keine Schriftarten kennt (und auch nicht kennen muss). Aber die Schriftart muss auf dem Gerät vorhanden sein, auf dem die Seite angezeigt wird, nicht (wie bei RSS) auf dem fhem-Server!

Wenn also auf Deinem PC / Tablet / wasauchimmer keine Schriftart "Dejavu" vorhanden ist, kann Dein Browser sie auch nicht darstellen und wählt stattdessen - nach browsereigenen Regeln - eine andere Schriftart für die Anzeige. Mit InfoPanel hat das überhaupt nichts zu tun.


pt 24
font Dejavu Sans
text - 50 50 "Dejavu Sans"
font Arial
text - 50 100 "Arial"
font Georgia
text - 50 150 "Georgia"
font Helvetica
text - 50 200 "Helvetica"
font Germany
text - 50 250 "Germany"


liefert die im Anhang dargestellte Ausgabe.

Wobei ich die Schriftart Dejavu auf meinem Mac auch zuerst nachinstallieren musste, bevor sie von Safari verwendet wurde.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

moonsorrox

Zitat von: betateilchen am 31 Juli 2016, 19:48:26
Nochmal:

InfoPanel unterstützt alle Schriftarten dieser Welt, weil es überhaupt keine Schriftarten kennt (und auch nicht kennen muss). Aber die Schriftart muss auf dem Gerät vorhanden sein, auf dem die Seite angezeigt wird, nicht (wie bei RSS) auf dem fhem-Server!

war nicht meine Absicht dies auf InfoPanel zu schieben  ;)
deshalb ja mein Anmerkung in Klammern "entweder der Browser oder mein Galaxy Tab 3 kann es nicht"
Also ist es das Gerät, was mich wiederum wundert, sollte doch ein Samsung Tablet so einige Schriften drin haben.

Werde mal schauen was ich da nach installieren kann...
Meine Ausgabe sieht so aus, fast alles gleich
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

betateilchen

Zitat von: moonsorrox am 31 Juli 2016, 20:26:50
war nicht meine Absicht dies auf InfoPanel zu schieben

Schon klar. Mir war wichtig, noch einmal zu erklären, dass InfoPanel selbst überhaupt nichts von Schriftarten weiß. InfoPanel teilt einfach nur dem Browser mit: "Nimm mal die Schriftart xy und stelle den folgenden Text dar."

Wenn Du in den Seitenquelltext eines InfoPanels schaust, siehst Du das auch ganz genau.


pt 24
font Germany
text - 50 250 "Germany"


liefert als Ergebnis ein SVG-Element "text" mit den entsprechenden Eigenschaften font-size und font-family:


<text id="81a90f0aa76cbf0493f4aad57d66827f" x="50" y="250" fill="rgb(255,255,255)" fill-opacity="1" font-family="Germany" font-style="initial" font-size="24px" font-weight="normal" text-anchor="start" text-decoration="none" alignment-baseline="auto" >
Germany
</text>
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

moonsorrox

OK damit beschäftige ich mich später, vllt kann ich da was nachinstallieren, hab mich soweit nicht mit Android beschäftigt.

Aber ich finde das Hammer gut mit den vier Quadranten die ich beim InfoPanel darstellen kann, super Arbeit das Teil. Da verzichte ich erst einmal auf die Schriften  ;)
Aber ich muss natürlich alles ändern und da habe ich noch jede Menge Arbeit, werde mal schauen ob ich mich auf 4 Seiten beschränken kann, passt ja jede Menge mehr rauf dadurch das ich jetzt die richtige Pixelgröße einstellen kann.
Oder eben sogar die doppelte.
Vorher das von RSS generierte Bild hatte auf meinem 1280x800 Tablet eine reale Größe von 980x613 dann war das Bild auf dem 10" Tablet voll, jetzt habe ich die volle Größe  ;) oder eben noch größer
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

#24
Nun mal eine Frage zu einer Textbox, ich verzweifel hier echt  :-\
Ich habe ja im Demo Layout einiges gefunden, aber bei mir macht die Box was sie will  ;)

Es handelt sich um eine Warnbox die nur erscheint wenn es auch eine Warnung gibt, die Schrift ist in Rot und die Textformatierung ist "justify" als Link hatte ich mal mein Rss genommen zum Testen, weil die Infopanel Seite dafür noch nicht fertig ist
Ich habe das mit der Warnung und einem normalen Text probiert, dass funktioniert. Aktuell gibt es keine Warnung und das Reading kann ich grad nicht testen, aber gestern hat es nicht funktioniert

Problem ist folgendes:
ich bekomme den Link und das Reading nicht hintereinander, geht das in einer Textbox mit einem Reading
So funktioniert der Link aber das Reading nicht
textbox - 580 360 320 70 "http://resse.my-wan.de:8083/fhem/rss/warnrss.png" "{ReadingsVal("Unwetterzentrale","Warn_0_ShortText","")}"

Ich habe es mit und ohne Anführungszeichen probiert, aber kein Erfolg gehabt

Dann noch dieses die Linkschrift bleibt immer in lila..! das habe ich jetzt hinbekommen  ;)

EDITH://
Frage zu dem Befehl include
kann man das positionieren mit Angabe von 100 200
@include ./FHEM/btip_tpl_kopfzeile.layout

Frage zum img
1. Hintergrundbild
könnte man ein kleines Bild nutzen ich sage mal 80x80 welches dann wiederholt dargestellt wird bis das gesamte Layout (size 2560x1600) gefüllt ist..?

2. normales img im Layout
könnte ich mir ein Button (blank.png) fertigen auf dem dann Schrift und ein SVG dargestellt werden in der Art wie auf dem Screenshot

Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

#25
ich bin schon mal ein wenig weitergekommen, wobei noch nicht alles funktioniert wie es soll.
Beim erstellen der Buttonseite bekomme ich graue Haare, von den paar die noch da sind  ;) :-\

Ich habe da einen Button erstellt der auch funktioniert nur es öffnet sich immer zusätzlich eine weisse Seite  :-\
Bei meine Fragen weiter oben bin ich auch noch nicht weiter gekommen.

Bei dem Link mit dem Reading habe ich mich an die commandref gehalten, aber irgendwie geht das nicht, momentan gibt es auch keine Warnmeldungen so kann ich es nicht richtig testen. Mit einer Textbox die ich erstellt habe funktioniert es.

Kann man eigentlich bestimmen in welchen der Quadranten man zurück springen soll.?
Ich habe vom RSS Wetterkarten, die ich jetzt im InfoPanel umgeändert habe, bei diesen springe ich mit dem Link im Bild zurück zur Hauptseite, da springt er immer zurück auf den 1. Quadranten also oben links. Angeklickt habe ich aber ein Bereich im 2. Quadranten oben rechts.
Evtl. ist das ja mit einer Sprungmarke machbar.?
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Benni

Das mit der weißen Seite sollte sich erledigen, sobald du in deinem layout irgendwo ein


buttonpanel


einbaust. Ich habe das in meinen layouts mit Schaltfunktion immer einmal ganz oben drin.

Meine Buttons sind bspw. so definiert, im Endeffekt in sich, also alle gleich, das geht mit group:


#### Toilette #####
group - open x y
rgb "FF80C0ff"
rect - 1 1 168 98 5 5 1
rgb "000000ff"
#Text 1 - Zeilig
textdesign bold
text - 85 49 "Toilette"
textdesign clear
#Text 2 - Zeilig
#text - 85 36 "Bad"
#moveby 0 25
#text - x y "Spiegel"
area - 1 1 168 98 {devCmdLink('EG.TL.SW.Toilettenlicht','toggle')}
longpoll rp.EG.TL.SW.Toilettenlicht 10 10
group - close



betateilchen

Zitat von: moonsorrox am 03 August 2016, 14:19:28
Evtl. ist das ja mit einer Sprungmarke machbar.?

Sprungmarken funktionieren nur bei html, nicht innerhalb eines SVG-Elements.

Zitat von: moonsorrox am 02 August 2016, 15:41:31
Frage zu dem Befehl include
kann man das positionieren mit Angabe von 100 200
@include ./FHEM/btip_tpl_kopfzeile.layout

Im Prinzip ja. Position vor dem include absolut festlegen und innerhalb des inkludierten Elemente ausschließlich relativ positioniert arbeiten.

Zitat von: moonsorrox am 02 August 2016, 15:41:31
1. Hintergrundbild
könnte man ein kleines Bild nutzen ich sage mal 80x80 welches dann wiederholt dargestellt wird bis das gesamte Layout (size 2560x1600) gefüllt ist..?

Nein, weil das Hintergrundbild kein InfoPanel Element ist.

Zitat von: moonsorrox am 02 August 2016, 15:41:31
könnte ich mir ein Button (blank.png) fertigen auf dem dann Schrift und ein SVG dargestellt werden in der Art wie auf dem Screenshot

Wenn Du das Konzept hinter InfoPanel irgendwann verstanden hast, sollte Dir das keine Probleme bereiten.

-
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

moonsorrox

Zitat von: betateilchen am 03 August 2016, 19:09:18
Sprungmarken funktionieren nur bei html, nicht innerhalb eines SVG-Elements.
:-\

Zitat von: betateilchen am 03 August 2016, 19:09:18
Wenn Du das Konzept hinter InfoPanel irgendwann verstanden hast, sollte Dir das keine Probleme bereiten.

ich denke ich komme schon ganz gut klar habe von meiner 4 Quadranten Seite, zwei schon komplett fertig  ;)

Die Tage werde ich mich den Button widmen, damit habe ich allerdings noch so meine Probleme das ist ja nicht gleich den Button von RSS da wurde das ja in der HTML Seite gemacht, aber erst einmal anfangen und die Ergebnisse anschauen  :D
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

#29
ich habe mir jetzt mal mit der Beispieldatei für die Button etwas experimentiert und habe dabei verschiedene Varianten ausprobiert, einmal mit dem "button" und ein weiteres mal mit "Rechtecken" von der Funtion her funktionieren beide, nur er öffnet mir bei dem Code für die Rechtecke immer auf dem Tablet eine weitere Seite. Ich habe dies schon versucht mit "-" Zeichen vor dem http, aber auch das funktioniert nicht.

Im oberen Teil habe ich die button mal auskommentiert weil ich hier mit Rechtecken arbeiten wollte.
Wo ist jetzt der Fehler mit der neuen Seite..?

Hier mal der Code der beiden Varianten:
buttonpanel
group button open 121 803
rgb "4D4D4DFF"
thalign "start"

#boxcolor "2F4F4F88" #  Button Farbe Grau
#button 11   0  55 188 148 10 10 {"Button11Link"} {"Button11Text"}

pt 22
### Button 1.Reihe .1 Button
#boxcolor "2E64FE88"  # Button Farbe blau
#button 21   0 55 188 148 10 10 {"Button21Link"} {"Button21Text"}
rgb "2F4F4FFF"  # Button Farbe DarkSlateGray
#rgb "FF80C0ff"
rect - 0 55 188 148 10 10 1
rgb "FAEBD7ff"
#Text 1 - Zeilig
textdesign bold
text - 70 100 "TV - LED"
textdesign clear
#Text 2 - Zeilig
moveby 0 30
rgb "00FA9A" # MediumSpringGreen
text - x y "EIN"
textdesign clear
area - 0 55 188 148 {"http://10.0.0.50:8083/fhem?XHR=1&amp;cmd.LichtOG=set%20LichtOG%20on"} {""}
longpoll LichtOG 10 70

boxcolor "2E64FE88"  # Button Farbe blau
button 12 193  55 381 148 10 10 {"+http://www.google.de"} {"Google in new"}
boxcolor "2F4F4F" #  Button Farbe Grau
button 13 386  55 574 148 10 10 {"-http://www.google.de"} {"Google in same"}
boxcolor "2E64FE88"  # Button Farbe blau
button 14 579  55 767 148 10 10 {"http://www.google.de"} {"Google invisible"}
boxcolor "2F4F4F" #  Button Farbe Grau
button 15 772  55 960 148 10 10 {"http://10.0.0.50:8083/fhem?XHR=1&amp;cmd.LichtOG=set%20LichtOG%20toggle"} {"Licht OG"}
condition {ReadingsVal('LichtOG','state','off') eq 'on'}
rgb "FF0000FF"
circle - 700 75 6 1
rgb "4D4D4DFF"
#longpoll LichtOG 650 65
condition 1

pt 22
### Button 2.Reihe .1 Button
#boxcolor "2E64FE88"  # Button Farbe blau
#button 21   0 153 188 246 10 10 {"Button21Link"} {""}
rgb "2F4F4F88"  # Button Farbe DarkSlateGray
#rgb "FF80C0ff"
rect - 0 153 188 246 10 10 1
rgb "FAEBD7ff"
#Text 1 - Zeilig
textdesign bold
text - 70 190 "TV - LED"
textdesign clear
#Text 2 - Zeilig
moveby 0 30
rgb "DC143C" # Crimson
text - x y "AUS"
textdesign clear
area - 0 153 188 246 {"http://10.0.0.50:8083/fhem?XHR=1&amp;cmd.LichtOG=set%20LichtOG%20off"} {"Button1Text"}
#longpoll LichtOG 10 160

pt 20
boxcolor "999999FF" #  Button Farbe Grau
button 22 193 153 381 246 10 10 {"Button22Link"} {"Button22Text"}
boxcolor "2E64FE88"  # Button Farbe blau
button 23 386 153 574 246 10 10 {"Button23Link"} {"Button23Text"}
boxcolor "999999FF" #  Button Farbe Grau
button 24 579 153 767 246 10 10 {"Button24Link"} {"Button24Text"}
boxcolor "2E64FE88"  # Button Farbe blau
button 25 772 153 960 246 10 10 {"Button25Link"} {"Button25Text"}
boxcolor "999999FF" #  Button Farbe Grau
button 24 965 153 1153 246 10 10 {"Button24Link"} {"Button24Text"}

boxcolor "FF0000FF"
button 31   0 251 188 344 10 10 {"Button31Link"} {"Button31Text"}
boxcolor "00FF00FF"
button 32 193 251 381 344 10 10 {"Button32Link"} {"Button32Text"}
boxcolor "FF0000FF"
button 33 386 251 574 344 10 10 {"Button33Link"} {"Button33Text"}
boxcolor "00FF00FF"
button 34 579 251 767 344 10 10 {"Button34Link"} {"Button34Text"}
boxcolor "FF0000FF"
button 35 772 251 960 344 10 10 {"Button35Link"} {"Button35Text"}

boxcolor "00FF00FF"
button 41   0 349 188 442 10 10 {"Button41Link"} {"Button41Text"}
boxcolor "FF0000FF"
button 42 193 349 381 442 10 10 {"Button42Link"} {"Button42Text"}
boxcolor "00FF00FF"
button 43 386 349 574 442 10 10 {"Button43Link"} {"Button43Text"}
boxcolor "FF0000FF"
button 44 579 349 767 442 10 10 {"Button44Link"} {"Button44Text"}
boxcolor "00FF00FF"
button 45 772 349 960 442 10 10 {"Button45Link"} {"Button45Text"}

boxcolor "999999FF"
button 51   0 447 188 540 10 10 {"Button51Link"} {"Button51Text"}
boxcolor "CCCCCCFF"
button 52 193 447 381 540 10 10 {"Button52Link"} {"Button52Text"}
boxcolor "999999FF"
button 53 386 447 574 540 10 10 {"Button53Link"} {"Button53Text"}
boxcolor "CCCCCCFF"
button 54 579 447 767 540 10 10 {"Button54Link"} {"Button54Text"}
boxcolor "999999FF"
button 55 772 447 960 540 10 10 {"Button55Link"} {"Button55Text"}

group - close

Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM