[FHEM-Tablet-UI] Widgets for fhem-tablet-ui

chris1284 · 19 April 2015, 19:59:33

ich aktualisiere ja auch deine widget immer mit. läuft auch soweit.
allerdings muss ich immer (wenn nötigt) das weather widget in zeile 305 auf

Code Auswählen

var fhem = $("meta[name='fhemweb_url']").attr("content") || "../"; ändern und weiss nicht wo der unterschied zu deinem system liegt das der pfad nicht passt bei mir... hast du eine idee?
ohne die änderung bekomm ich kleinklima nicht gezeigt da der pfad nicht stimmt

und noch eine frage: wie kann ich die kleinklima bilder in der größe anpassen?

nesges · 19 April 2015, 20:29:02

Zitat von: chris1284 am 19 April 2015, 19:59:33
Code Auswählen Erweitern
var fhem = $("meta[name='fhemweb_url']").attr("content") || "../"; ändern und weiss nicht wo der unterschied zu deinem system liegt das der pfad nicht passt bei mir... hast du eine idee?

Ich frag mich vor allem wo der Unterschied zu fhem-tablet-ui.js Zeile 216, 250 und 333 ist - da wird der Fhem-Pfad exakt auf die gleiche Weise bestimmt. Wie sieht deine Verzeichnisstruktur aus, gib mir mal bitte deine konkreten Pfade für:

1.) Wo liegt Fhem? (Standard: /opt/fhem/)
2.) Wo liegt Fhem Tablet UI? (Standard: /opt/fhem/www/tablet/)
3.) Wo liegen die kleinklima-Images? (Standard: /opt/fhem/www/images/default/weather/)

Darüber hinaus:

4.) Wie wird FTUI gestartet, also wie sieht der URL aus? (Standard: http://host:8083/fhem/tablet/)
5.) Wie sieht der URL für das normale Fhem-UI aus? (Standard: http://host:8083/fhem)

Und kopier bitte den <head> Bereich deines HTML-Files. Ansonsten fällt mir grade nichts ein, das man prüfen könnte.

Zitatund noch eine frage: wie kann ich die kleinklima bilder in der größe anpassen?

Du kannst das <div> per CSS vergrößern/verkleinern. zB in aussen.html Zeile 164ff findest du ein Beispiel dafür. Das Image selbst strebt wegen style="width:100%" immer danach das <div> (in der Breite) komplett auszufüllen.

chris1284 · 19 April 2015, 20:57:43

Zitat1.) Wo liegt Fhem? (Standard: /opt/fhem/)

/opt/fhem

Zitat2.) Wo liegt Fhem Tablet UI? (Standard: /opt/fhem/www/tablet/)

/opt/fhem/www/tablet

Zitat3.) Wo liegen die kleinklima-Images? (Standard: /opt/fhem/www/images/default/weather/)

/opt/fhem/www/images/default/weather

Zitat4.) Wie wird FTUI gestartet, also wie sieht der URL aus? (Standard: http://host:8083/fhem/tablet/)

http://srv01.fritz.box:8083/fhem/tablet/index1.html

Zitat5.) Wie sieht der URL für das normale Fhem-UI aus? (Standard: http://host:8083/fhem)

http://srv01.fritz.box:8083/fhem

ZitatUnd kopier bitte den <head> Bereich deines HTML-Files. Ansonsten fällt mir grade nichts ein, das man prüfen könnte.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<title>FHEM</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="116">
	<meta name="widget_base_height" content="131">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui_lite.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
	
	<!-- Enable this lines for usage with WebViewControl --><!--
	<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 = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	--><!-- End for WebViewControl -->
</head>

nesges · 19 April 2015, 22:01:14

Danke für die Infos! Ich glaub ich hab's: Ändere mal die Zeile in widget_weather.js in:

Code Auswählen

var fhem = $("meta[name='fhemweb_url']").attr("content") || "/fhem/";

Damit sollte's funktionieren. FHEMWEB macht komische Sachen. Der relative Pfad wird bei http://srv01.fritz.box:8083/fhem/tablet/index1.html und http://srv01.fritz.box:8083/fhem/tablet intern unterschiedlich gesetzt. Bei .../fhem/tablet/index.html ist der interne Pfad .../fhem/tablet/, bei .../fhem/tablet ist er /fhem/. Daher passt die relative Angabe ../fhem nur, wenn man http://srv01.fritz.box:8083/fhem/tablet aufruft. Apache macht diesen Fehler nicht, daher ist's mir nie aufgefallen. Die absolute Pfadangabe /fhem/ sollte in allen Standardinstallationen passen. Wenn du das bestätigen kannst, werd ich die Änderung für widget_weather.js und fhem-tablet-ui.js vornehmen. Dass es dort trotzdem funktioniert liegt auch wieder an FHEMWEBs komischem Verhalten: http://srv01.fritz.box:8083/fhem/fhem?cmd=list%20.* wird genauso funktionieren wie http://srv01.fritz.box:8083/fhem/bli/bla/blo/fhem?cmd=list%20.*

chris1284 · 20 April 2015, 06:32:11

Code Auswählen

var fhem = $("meta[name='fhemweb_url']").attr("content") || "/fhem/";

geht!

chris1284 · 22 April 2015, 19:25:20

im updates ist es noch nicht oder?

nesges · 22 April 2015, 19:33:50

Zitat von: chris1284 am 22 April 2015, 19:25:20
im updates ist es noch nicht oder?

Nee, ich fürchte ich hab setstate mit pull request geflooded und nen deadlock verursacht - iow: müsste bald kommen

setstate · 22 April 2015, 19:57:33

Zitat von: nesges am 22 April 2015, 19:33:50
Nee, ich fürchte ich hab setstate mit pull request geflooded und nen deadlock verursacht - iow: müsste bald kommen

Kommt noch

Ich wollte heute morgen alle abarbeiten, aber an einer Stelle hin es noch bei mir. Muss ich mir erst noch ansehen. Geduld ...

nesges · 22 April 2015, 20:16:30

Zitat von: setstate am 22 April 2015, 19:57:33
Geduld ...

Jojo, kein Thema

nesges · 24 April 2015, 00:32:45

Neue Widget: iframe

Widget zum Einbinden externer Inhalte in einem Iframe. Vor der Anzeige des Iframes wird geprüft, ob die externe Seite erreichbar ist (HEAD Request). Während der Prüfung wird ein rotierendes Spinner-Icon angezeigt. Konnte die Seite geladen werden, wird der Iframe eingeblendet, ansonsten ein Error-Symbol.

Code Auswählen

<div data-type="iframe"
    data-src="http://server.intranet/externer/inhalt.html"
    data-fill="yes"
></div>

Dokumentation unter https://github.com/nesges/Widgets-for-fhem-tablet-ui#iframe

setstate · 24 April 2015, 16:35:42

Der Code ist eine Augenweide!!!

Ein Musterbeispiel für Übersichtlichkeit plus Funktionalität.
Gefällt mir sehr gut.

nesges · 24 April 2015, 17:21:50

Nu hör aber auf

Danke!

Ich habe noch ein weiteres Attribut "data-check-src" eingeführt. Um dessen Funktion zu erklären, muss ich ein wenig ausholen.

Die Same Origin Policy hat mir gestern doch noch einiges an Kopfzerbrechen bereitet. SOP bedeutet kurz gefasst: Ein Dienst wird auf einen XMLHTTPRequest ("Ajax") nicht ohne weiteres eine Antwort liefern, wenn der Request durch einen Browser ausgelöst wurde, der eine Seite eines anderen Servers aufgerufen hat. Man kann das zwar im Dienst zulassen, aber insbesondere die KODI Weboberfläche "Chorus" hat das nicht implementiert. Die naheliegendste Lösung dafür wäre die Weboberfläche per Apache Reverseproxy vom fhem-Server ausliefern zu lassen, allerdings habe ich's nicht hinbekommen den Reverseproxy so zu implementieren, dass dann auch noch KODIs JSONRPC funktioniert:

Code Auswählen

<Location /kodi/mcp>
            RequestHeader set Authorization "Basic bliblablo"
            ProxyPass http://192.168.178.34:80
            ProxyPassReverse http://192.168.178.34:80
            Order deny,allow
            Allow from all
</Location>

D.h. mein fhem-Server liefert zwar jetzt unter der Adresse /kodi/mcp/ einen Zugang zum KODI Webinterface, der ist nur nicht benutzbar. Für die Verfügbarkeitsprüfung reicht das allerdings aus. Daher habe ich jetzt die Iframes für die Chorus-Integration folgendermassen umgesetzt:

Code Auswählen

<div data-type="iframe"
            data-check-src="/kodi/mcp/addons/webinterface.chorus/"
            data-src="http://bli:bla@192.168.178.34:80/addons/webinterface.chorus/"
            data-fill="yes"></div>

/kodi/mcp/addons/webinterface.chorus/ wird geprüft, und wenn verfügbar wird ein Iframe mit http://bli:bla@192.168.178.34:80/addons/webinterface.chorus/ erzeugt. Das ist in meinen Augen ein dreckiger Hack, aber ich werde ihn solange benutzen müssen, bis mir mal jemand Apache Reverseproxy richtig erklärt

bjoernbo · 24 April 2015, 18:00:32

muss ich nur das iframe-Widget ins js Verzeichnis legen oder muss in der html-Datei noch ein Verweis hinterlegt werden? Ich frage weil mir nichts angezeigt wird.In der Konsole bekomme ich nur die Meldung:

ZitatSynchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/

... aber das hat ja nichts mit dem Widget zu tun.

nesges · 25 April 2015, 01:15:37

Zitat von: bjoernbo am 24 April 2015, 18:00:32
muss ich nur das iframe-Widget ins js Verzeichnis legen oder muss in der html-Datei noch ein Verweis hinterlegt werden?

Nein, kein weiterer Verweis. Ganz standardmässig ins JS-Verzeichnis damit, bzw. per Fhem-Update beziehen.

Hermann · 25 April 2015, 18:40:14

Hallo,
Ist es möglich mit dem widget iframe eine webcam anzeigen zu lassen ? Ich hab auf einen 2´ten Raspi zu Testzwecken "motion" mit ner Webcam laufen. Die wollte ich per iframe anzeigen lassen.
Mit data-src="http://192.168.2.5:8081" wollte ich das ganze einbinden. Klappt aber so nicht

Wo liegt mein Denkfehler oder geht das ganze gar nicht ?
Hermann