FHEMWEB Fullscreen auf Tablet ?

Begonnen von jksd, 10 Oktober 2014, 13:44:41

Vorheriges Thema - Nächstes Thema

jksd

Hallo,
ich beisse mir gerade die Zähne daran aus, dass ich FHEMWEB in der Darstellung nicht beim Laden der Seite auf Fullscreen bekomme. Ich verwende den darkstyle. Wenn ich die Seite lade, hängt der nutzbringende Seiteninhalt in der oberen linke Ecke und rechts und unten ist viel grauer Hintergrund zu sehen.

Habe mit div. Size-Parametern probiert - bisher ohne Erfolg.

Brauche dringend einen Hinweis, um auf den richtigen Weg zu kommen.
Danke im Voraus !

-----------

Code-Ausschnitt:

define WEBtablet FHEMWEB 8090 global
attr WEBtablet allowfrom ^192\.168\.1\.([1-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-4]))$|127\.0\.0\.1
attr WEBtablet hiddengroup FileLog,at,notify,hidden
attr WEBtablet hiddenroom input,detail,Edit files,save,Favourites,CUL_WS,FS20,Unsorted,Everything,Logfile,Plots,Commandref,Select style,Remote doc,Event monitor,DashboardRoom
attr WEBtablet stylesheetPrefix darktouchpad
## Mit Style dark gleiches Problem
#attr WEBtablet stylesheetPrefix dark


# Dashboard für Tablet
define anyViewsTablet Dashboard
attr anyViewsTablet dashboard_activetab 1
attr anyViewsTablet dashboard_colcount 1
attr anyViewsTablet dashboard_row center
attr anyViewsTablet dashboard_rowbottomheight 50
attr anyViewsTablet dashboard_rowcentercolwidth 50
attr anyViewsTablet dashboard_rowcenterheight 600
attr anyViewsTablet dashboard_rowtopheight 50
attr anyViewsTablet dashboard_showfullsize 1
attr anyViewsTablet dashboard_tab1groups Garagentore,Fenster-Status,Wetterdaten,Regensensor,Abwesenheit
attr anyViewsTablet dashboard_tab1name Start
attr anyViewsTablet dashboard_tab1sorting t0c0,Garagentore,true,473,132:t0c0,Fenster-Status,true,473,90:t0c0,Wetterdaten,true,280,111:t0c0,Regensensor,true,191,90:t0c0,Abwesenheit,true,475,83:
attr anyViewsTablet dashboard_tab2groups Fenster-Status,Fenster
attr anyViewsTablet dashboard_tab2name Fenster
attr anyViewsTablet dashboard_tab2sorting t1c0,Fenster-Status,true,448,95:t1c0,Fenster,true,448,258:
attr anyViewsTablet dashboard_tab3groups Heizkörper-Schlafzimmer,Heizkörper-Bad,Heizkörper-Gästebad,Heizkörper-Küche,Heizkörper-Wohnzimmer
attr anyViewsTablet dashboard_tab3name Heizung
attr anyViewsTablet dashboard_tab3sorting t2c0,Heizkörper-Schlafzimmer,true,483,118:t2c0,Heizkörper-Bad,true,484,118:t2c0,Heizkörper-Gästebad,true,483,118:t2c0,Heizkörper-Küche,true,484,118:t2c0,Heizkörper-Wohnzimmer,true,484,90:
attr anyViewsTablet dashboard_tab4groups Rolladen-Schlafzimmer,Rolladen-Wohnzimmer
attr anyViewsTablet dashboard_tab4name Rolladen
attr anyViewsTablet dashboard_tab4sorting t3c0,Rolladen-Schlafzimmer,true,628,90:t3c0,Rolladen-Wohnzimmer,true,624,174:
attr anyViewsTablet dashboard_tab5groups Steuerung
attr anyViewsTablet dashboard_tab5name Steuerung
attr anyViewsTablet dashboard_tab5sorting t4c0,Steuerung,true,402,300:
attr anyViewsTablet dashboard_tab6groups Einstellungen
attr anyViewsTablet dashboard_tab6name Parameter
attr anyViewsTablet dashboard_tab6sorting Einstellungen:t5c0,Einstellungen,true,0,0:
attr anyViewsTablet dashboard_tabcount 6
attr anyViewsTablet dashboard_webfrontendfilter WEBtablet
# Auch hier div. Versuche unternommen#
attr anyViewsTablet dashboard_width 60%
#attr anyViewsTablet dashboard_debug 1


define anyViewsTablet_weblink weblink htmlCode {DashboardAsHtml("anyViewsTablet")}
attr anyViewsTablet_weblink room DashboardRoom
#Hatte hier auch experimentiert: #
attr anyViewsTablet_weblink htmlattr width="320" height="240" frameborder="0" marginheight="0"


UliM

Hi,
welches Gerät?
Welches OS?
Welcher Browser?
Welche Webinstanz mit welchen Attributen?

Bei iOS zB kriegt man fullscreen, indem man die fhem-Seite in Safari aufruft und dann "zur Startseite hinzufügen" (o.ä.) aus dem Menü aufruft. Mit dashboard kenn ich mich allerdings nich aus.

Gruß, Uli
RPi4/Raspbian, CUL V3 (ca. 30 HomeMatic-devices), LAN (HarmonyHub, alexa etc.).  Fördermitglied des FHEM e.V.

svenson08

Screenshot wäre evtl auch hilfreich.

jksd

#3
Hier die gewünschten Zusatzinfos:

Tablet: Acer Iconia A1-830
OS: Android 4.4.2   
Browser: Habe Opera, Dolphin und Chrome versucht

(auf meinem iPad Air / iOS 8.0.2 / Safari aber genauso)

Web-Instanz:

define WEBtablet FHEMWEB 8090 global
attr WEBtablet allowfrom ^192\.168\.1\.([1-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-4]))$|127\.0\.0\.1
attr WEBtablet hiddengroup FileLog,at,notify,hidden
attr WEBtablet hiddenroom input,detail,Edit files,save,Favourites,CUL_WS,FS20,Unsorted,Everything,Logfile,Plots,Commandref,Select style,Remote doc,Event monitor,DashboardRoom
attr WEBtablet stylesheetPrefix darktouchpad


Bei Verwendung des Styles "dark" (ohne touchpad) gibt es das gleiche Problem, dass die Darstellung nicht bildfüllend ist.

Screenshot, s.Anhang (dass man "Datei anhängen" in "Erweiterte Optionen" findet war nicht so intuitiv ..).
Screenshot ist vom iPad, sieht auf dem Android aber genauso aus.

Habe zum Vergleich auch noch einen Screenshot vom Mac-Book angehängt.

Gruß und danke,
Jörg

svenson08

Bei dir scheint es um das Dashboard und nicht um FHEMWEB zu gehen. Daher ist der Titel deines Threads mißverständlich.

Kurz:
Das Dashboard scalliert sich nicht. D.h. je nach Auflösung benötigst du ein eigenes dafür angepasstes Dashbaord und eine FHEMWEB Instanz

Lang:
http://forum.fhem.de/index.php/topic,16503.msg205901.html#msg205901, und einige Posts davor.

Wenn es bei dir ums Dashboard geht häng das an den Dashboard Thread an, den bekomme ich besser mit.

jksd

Ja,des geht um das Dashboard. Den anderen Thread kenne ich - der hat mir jedoch bisher nicht weiterhelfen können, da dort nur steht, dass das Dashboard eine fixe Größe hat, nicht jedoch, wie man eine spezifische Größe passend zum Endgerät erreichen kann, ohne dass trotzdem noch auf dem Endgerät gezoomt werden muss.

Da mir bewusst ist, dass das Dashboard für feste Auflösungen gemacht werden muss, habe ich meine neue Instanz auf Port 8090 angelegt.

VG und danke
Jörg

PS: Wie bekomme ich diesen Thread an den anderen angehängt ? Neu einstellen als Antwort ?

svenson08

dashboard_width,dashboard_rowcenterheight,dashboard_rowcentercolwidth,dashboard_rowtopheight,dashboard_rowbottomheight,dashboard_showfullsize,
dashboard_webfrontendfilter

sind die Attribute die dir zum Ziel helfen sollten

ZitatNeu einstellen als Antwort ?
Ist nicht notwendig. Es geht mir nur darum das ich nicht in alle Posts reinschaue. Über den Dashboard Thread bekomm ich eine Info-Mail und kann dann gezielt reinschauen.

jksd

Die Parameter kenne ich (siehe auch mein Code oben).

Wenn ich dashboard_width wieder auf 100% zurück setze, verlängern sich die Überschriften wieder auf die volle Seitenbreite -- aber das Schriftbild bleibt genauso klein wie zuvor.
Ich hatte die dashboard_width auf 60% gesetzt und den Parameter "dashboard_showfullsize 1", in der Hoffnung, dass damit das Gesamtbild durch das Strecken auf Fullscreen größer wird.

Geht das irgendwie ? Ich möchte wenige Infos pro Tab - die dafür aber möglichst groß auf dem Tablet dargestellt. Sonst tippt man immer 3x daneben ...

svenson08

Dashboard_width kannst du auch mit Pixel statt % angeben.

Zitatverlängern sich die Überschriften wieder auf die volle Seitenbreite -- aber das Schriftbild bleibt genauso klein wie zuvor
Sorry, das versteh ich so nicht. Kannst du mir das in einem Screenshot mal zeigen?

jksd

Ja, siehe Anhang. Jetzt ist die volle Breite genutzt, aber die Inhalte sind noch genauso klein, wie bei der dashboard_width 60% zuvor.

Ich brauche ein größer skaliertes Bild, damit die Bedienung nicht so fummelig ist.

svenson08

Genau das geht so nicht. Da keine Skallierung vorgenommen wird. Du kannst aber die CSS Dateien des Darkstyles inkl. Dashboard anpassen, bzw. eine Kopie davon. Und diesen "eigenen" Style dann im FHEMWEB zuweisen das du nur fürs Tablett verwendest. Das fällt dann aber unter CSS Bearbeitung und da kann ich dir nur bedingt weiterhelfen.

jksd

Danke für die Bestätigung. In der css war ich auch schon versuchsweise unterwegs. Bisher jedoch mit mäßigem Erfolg...Hast Du einen Tipp, an welcher Stelle ich drehen muss ?

Gäbe es einen Alternativ-Ansatz über Floorplan ?

PS: Der Vollständigkeit halber habe ich noch einmal mein Wunschbild angehängt (manuell gezoomt). Für Gleichgesinnte ...

svenson08

ZitatHast Du einen Tipp, an welcher Stelle ich drehen muss ?
Leider nein.

ZitatGäbe es einen Alternativ-Ansatz über Floorplan ?
Ist mir nicht bekannt

jksd

Schade. Trotzdem vielen Dank für die Unterstützung !

fiedel

Noch ein Tipp zum weiterforschen: Mit den Entwicklertools der Browser, wie z.B. Firebug (F12 drücken) kannst du einfach herausfinden, welche Einstellung in welcher CSS- Datei zuständig ist. Ich hab hier mal irgendwann eine Kurzanleitug gepostet, aber ein youtube- Video gibt es bestimmt auch dazu. Dann findest du die "Schraube" selbst.

Gruß

Frank
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423