Wie komme ich zur optimalen Tablet-Grundlage für die Darstellung von FHEM?

Begonnen von Dr. Boris Neubert, 04 Juni 2015, 16:49:38

Vorheriges Thema - Nächstes Thema

CoolTux

Zitat von: Johannes am 30 Juni 2015, 18:40:02
Aus dem Kopf, müsste aber stimmen:

http://deinserver:8083/fhem?cmd=set%20lamp%20on
Jepp passt. Ich danke Dir
Du musst nicht wissen wie es geht! Du musst nur wissen wo es steht, wie es geht.
Support me to buy new test hardware for development: https://www.paypal.com/paypalme/MOldenburg
My FHEM Git: https://git.cooltux.net/FHEM/
Das TuxNet Wiki:
https://www.cooltux.net

Dr. Boris Neubert

Hallo Johannes,

Zitat von: Johannes am 30 Juni 2015, 18:48:32
Das Frontend sorgt für die Darstellung auf dem Tablet, daher ist genau auch das das "Problem".
Ein anderes Tablet schafft dir dabei keine Abhilfe, es ist ein reines Software Problem.
Hast du z.B. mal etwas mit FTUI rumprobiert? Das könnte dir bei deiner Frage sehr helfen..

vergessen wir bitte mal einen Moment, dass es sich bei der anzuzeigenden Seite um eine Ausgabe von FHEMWEB oder einem anderen FHEM-Frontend handelt und konzentrieren uns lediglich auf die verwendete Technologie. Es handelt sich um eine Seite in HTML, welche im wesentlichen neben einem Refresh-Tag im Header lediglich einen img-Tag und einen iFrame mit dem Videstream im Body beinhaltet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FrameRSS2</title>
<meta http-equiv="refresh" content="15"/>
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script><script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script><script type="text/javascript">var wvcDevices = {501: 'ControllerAcer', 3969: 'ControllerHTC'}</script><script type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.vticker.min.js"></script>
</head>
<body topmargin="0" leftmargin="0" margin="0" padding="0">
<div id="rss_FrameRSS2" style="z-index:1;" >
<img src="http://has:8083/fhem/rss/FrameRSS2.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect" coords="20,20,60,60" href="http://has:8083/fhem" target="_top"/>
</map>
</div>
<div id="cam1" style="position:absolute; left:970px; top:10px; z-index:2;">
<iframe with="320" height="240" frameborder="0" scrolling="no" seamless="seamless" src="http://cam:80/videostream.cgi?user=USER&pwd=PASSWORD&resolution=8&rate=0"></iframe>
</div>
</body>
</html>


Die Frage ist also: welchen anderen HTML-Kode würde irgendein anderes Frontend ausliefern, dass das gewünschte Ergebnis leistet? Anbei ein Screenshot, wie es im Firefox 38.0 auf KUbuntu 15.04 aussieht.

Nochmal zur Erinnerung die Anforderung: das beigefügte Bild wird dargestellt und automatisch alle 15 Sekunden aktualisiert, dabei wird im iFrame laufend das Video angezeigt. Das ganze läuft im Vollbild auf dem Tablet, ohne dass ich bei Browseranzeige die Adressleiste des Browsers nach jedem Update des Bildes wieder angezeigt bekomme.

Viele Grüße
Boris
Globaler Moderator, Developer, aktives Mitglied des FHEM e.V. (Marketing, Verwaltung)
Bitte keine unaufgeforderten privaten Nachrichten!

herrmannj

Hallo Boris

Die genannten Frontend verwenden ganz andere Techniken weil man das Ergebnis sonst gar nicht erreichen kann. Im Kern setzen die alle auf frameworks und die Darstellung wird clientseitig gemacht.

Vg
Joerg

herrmannj


Johannes

Zitat von: Dr. Boris Neubert am 04 Juli 2015, 16:55:09
Die Frage ist also: welchen anderen HTML-Kode würde irgendein anderes Frontend ausliefern, dass das gewünschte Ergebnis leistet?

Hallo,

Das funktioniert nicht mit HTML, sondern Javascript.
Hier ein einfaches Beispiel:
https://de.wikipedia.org/wiki/XMLHttpRequest#Codebeispiele_.28JavaScript.29

Dort kann, wo dezeit "alert(xmlHttp.responseText);" steht, beliebiger Code stehen, der dein Objekt im HTML aktualisiert mit den Daten, die als Antwort geliefert wurden.
Das würde z.B. gut für eine Datenanzeige klappen. Wenn ein neues Bild dargestellt werden soll, muss statt einem AJAX Request eher ein window.setTimeout helfen, der nach einem Intervall die img src ändert.
Das sind beides keine riesigen Schwierigkeiten, ich denke mit etwas einlesen und rumprobieren sollte man das schnell hinbekommen.
Es braucht dazu kein eigenes Frontend oder Framework, da dies noch recht einfache Anforderungen sind die sich mit nativem Javascript gut erschlagen lassen.

Dr. Boris Neubert

Hallo Jörg und Johannes,

Danke für Eure Antworten. Die Sache mit den AJAX-Techniken hatte ich schon verstanden. Da die trivialen Lösungen nicht funktionieren, werde ich es jetzt doch damit versuchen.

Ich werde also  ausgehend von den Tips von Johannes eine simple HTML-Seite aufsetzen, welche das eingebettete Bild alle 15 Sekunden per Javascript neu vom Server abholt und darstellt.

Was mir Sorgen macht, ist der überblendete iFrame mit dem Livestream von der Kamera. Zum Teil wird ja noch nicht einmal dieser iFrame dargestellt. Ich melde mich, wenn ich diesen Schritt getan habe.

Viele Grüße
Boris
Globaler Moderator, Developer, aktives Mitglied des FHEM e.V. (Marketing, Verwaltung)
Bitte keine unaufgeforderten privaten Nachrichten!

Klaus0815

Ich muss leider immer wieder sagen, schaut euch mal Netio an.
Ich bin weder verwandt, noch verschwägert , komme ganz aus der anderen Seite der BRD, aber es funktioniert, und schaut gut aus wenn man sich ein bisschen Mühe gibt.


herrmannj

Das liegt immer sehr im Auge des Betrachters und es stehen ja durchaus verschiedene Frontends zur Verfügung. Wenn Netio für Dich funktioniert ist das toll. Vielleicht darf ich bei dieser Gelegenheit aber auch auf eine SUPER(!) Artikelserie von Christoph (meintechblog.de) zum Thema smartVisu hinweisen um vielleicht auch andere Impulse zu setzen:

http://www.meintechblog.de/2015/06/smartvisu-mit-fhem-die-perfekte-visualisierung-teil-1-basics/
http://www.meintechblog.de/2015/07/smartvisu-mit-fhem-die-perfekte-visualisierung-teil-2-multimedia-steuerung-fuer-den-tv/

disclaimer: ich bin mit fronthem verwand :)
disclaimer 2: es gibt auch andere tolle frontends, FTUI zb. Und RSS hat auch seine Berechtigung. Und andere auch !

vg
joerg



Dr. Boris Neubert

Globaler Moderator, Developer, aktives Mitglied des FHEM e.V. (Marketing, Verwaltung)
Bitte keine unaufgeforderten privaten Nachrichten!

Dr. Boris Neubert

So, ich habe mal gebastelt, und hatte Erfolg.

Zitat von: Johannes am 04 Juli 2015, 19:17:23
Das funktioniert nicht mit HTML, sondern Javascript.

Anstelle eines refresh-Tags im Header aktualisiere ich jetzt das Bild mittels Javascript (DOM-Gymastik). Das vermeidet das Erscheinen der Adresszeile beim Aktualisieren in allen getesteten Browsern (Firefox, Chrome, Dolphin) unter Android 5.

Von diesen Browsern ist nur Firefox in der Lage, den Videostream im iframe anzuzeigen. Manchmal lädt er ihn trotzdem als Datei herunter.

Die Lösung sieht letztendlich so aus:
- Firefox mit dem Add-on Full Screen 3.4
- Aktualisierte Fassung von 02_RSS, die das Bild per Javascript automatisch aktualisiert.
- iframe mit src= Videostream der Kamera per embed-Kommando im Layout von RSS
- App "Stay Alive", um den Bildschirm anzulassen, wenn Firefox läuft und das Tablet eingesteckt ist.

Viele Grüße
Boris
Globaler Moderator, Developer, aktives Mitglied des FHEM e.V. (Marketing, Verwaltung)
Bitte keine unaufgeforderten privaten Nachrichten!

justme1968

der thread ist zwar schon alt aber vielleicht hilft es trotzdem noch auch wenn meine anforderungen waren ein klein wenig anders waren:

- das tablett soll automatisch bei bewegung an gehen: das funktioniert bei mir Motion Detector (https://play.google.com/store/apps/details?id=org.motion.detector) und automagic

- der browser soll alles andere sperren und fullscreen unterstützen: das mache ich mit Kiosk Browser (http://www.android-kiosk.com)

hier gibt es neben vielem anderen auch das nette feature nach Inaktivität automatisch auf den default screen zurück zurück zu kehren. d.h. der nächste der vorbei geht sieht auch wieder den status screen und nicht die ansicht die der letzte verlassen hatte.

es gibt auch ein rest/js api. eventuell kann man zukünftig damit auch das rfid feature mit fhem nutzen.

- die helligkeit wird zeit abhängig über das AMAD modul und automagic gesteuert, aufladen und text ansagen auch.

kostet zwar alles ein klein wenig funktioniert mit ftui aber bis jetzt sehr gut. (ich suche gerade günstige tablets für die anderen räume :) )

gruss
  andre
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

masterpete23

Wenn du ein Tablet empfehlen kannst. Bitte um Info

Gesendet von meinem Huawei Honor 7


CoolTux

Ich bin ja ein Freund von Nexus Geräten. Wenn 7 Zoll aus reichend sind passt ein Nexus 7 2013. Wird aktuell mit Android 6 versorgt.



Grüße
Du musst nicht wissen wie es geht! Du musst nur wissen wo es steht, wie es geht.
Support me to buy new test hardware for development: https://www.paypal.com/paypalme/MOldenburg
My FHEM Git: https://git.cooltux.net/FHEM/
Das TuxNet Wiki:
https://www.cooltux.net

justme1968

zum testen derzeit ein acer iconia one 7 hd mit 1280x800 auflösung. vor allem wegen dem ips display. das hatte ich bei amazon mal zum angebots preis gefunden.

das haupt tablet wird vermutlich ein iconia one 10 weil die 7 zoll version etwas zu klein für das haupt gerät ist. die 2 oder 3 anderen bleiben voraussichtlich die 7 zoll version. eventuell 8 zoll. ich muss es aber erst mal live sehen ob der unterschied ausschlaggebend ist.

und ich warte noch auf ein angebot :)

gruss
  andre
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

kvo1

Hallo Andre,

Zitatzum testen derzeit ein acer iconia one 7 hd mit 1280x800 auflösung. vor allem wegen dem Ios display. das hatte ich bei amazon mal zum angebots preis gefunden.

bin mal gespannt, wie Deine "Testergebnisse" ausfallen, überlege schon ne ganze Weile mir so´n Teil zuzulegen. Der Preis ist ganz okay dafür !

Gruss
klaus
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB