Tablet UI -Icons mal da , mal nicht

[dadoc]

Hallo zusammen,
auch ich hatte, nachdem zuvor alles gut funktionierte, ab einem nicht mehr nachvollziehbaren Zeitpunkt die hier beschriebenen Symptome: Fehlende Icons, fehlende Werte, xmal Reloaden usw. - mit und ohne Pagetab, mit und ohne eingebundener menu.html. Daher wollte ich nach endlosem Ausprobieren und Analysieren auch mal die Apache-Option testen.
Zuvor habe ich mir aber ein letztes Mal die Dateien genau auf Fehler hin angeschaut und auch in den Konsolen der Browser geschecked. Das war sehr aufschlussreich.
Bei mir war der Hauptfehler, der anscheinend die Lade-, Werte- und Icon-Fehler verursacht hatte, ebenso simpel wie banal. Ich hatte im Head der index.html aus irgendwelchen Gründen stehen:

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
Dummerweise gab es diese Datei aber im Verzeichnis nicht. Zeile auskommentiert und bislang keinerlei Ladeprobleme mehr,
Andere Fehler waren, dass ich die Push-Buttons noch mit data-set=... statt, wie neuerdings erforderlich, mit data-set-on=... eingebunden hatte. Und dass durch das Updaten eine Reihe von Widgets (die von nesges) abhanden gekommen waren.
Es lohnt sich also wirklich, setstates Rat aus dem Anfang dieses Threads zu befolgen und genau zu checken, was geladen wird und was nicht - und warum. Denn wenn hier etwas nicht stimmt, dann wird das auch mit Apache nichts...
Grüße
Martin

[h3llsp4wn]

Hallo zusammen,

interessanter Ansatz. Ich habe eben mal die TabletUI auf den lighttpd geschwenkt, den ich ohnehin auf meine Raspberry laufen habe.
Was soll ich sagen - die Performance ist jetzt einsatztauglich für Frauchen - alles Seiten werden zügig und vor allem kpl. geladen.
Ich wollte eigentlich schon auf den Raspberry2 schwenken ...

Ich habe so ziemlich alle Geräte/Tables und Browser eben getestet, läuft prima - lediglich ganz selten hängt er. Das hat dann aber wohl noch mit den Request im Hintergrund auf den FHEM-Server (8083) zu tun (z.B. Charts, o.ä.), die ggf. nicht immer sofort beantwortet werden. Nur auf dem alten ipad2 will der Safari die Seite jetzt gar nicht mehr laden - hab da Chrome drauf gepackt, der tut's auch.

Danke für die Idee!

Hat eigentlich schon mal jemand FHEM kpl. über lighttpd oder Apache laufen?

[Depechem]

ich habe es nun doch noch soweit hinbekommen.

hatte vergessen in der fhem.cfg

Code Auswählen Erweitern

attr WEB CORS 1
einzubauen und

Code Auswählen Erweitern

<meta name="fhemweb_url" content="http://ip:port/fhem">
in die index.html zu packen.
Wichtig ist noch(wenn man wie ich das Tablet UI über Apache aus dem www bearbeiten und anzeigen lassen will)
das man statt der ip und port die Dyndns Adresse und den jeweiligen Port angibt.

ich werde nun erst mal testen.
beim ersten Aufruf lief schon alles etwas flüssiger und er hat alles geladen

[h3llsp4wn]

... die beiden Änderungen sind wichtig - sonst geht nix.

Habe gerade mal die Zeiten für einen kpl. Reload ohne Cache bei mir verglichen - ist sicherlich nicht representativ, da ja jede Startseite anders aussieht, aber ich bin damit von 5-7 Sek. im LAN auf 1-2 Sek. Und fast noch wichtiger - mit allen Elementen. Pagetab-Wechsel sind jetzt fast immer flüssig 

[mrfloppy]

Hallo zusammen,

interessanter Ansatz. Ich habe eben mal die TabletUI auf den lighttpd geschwenkt, den ich ohnehin auf meine Raspberry laufen habe.
Was soll ich sagen - die Performance ist jetzt einsatztauglich für Frauchen - alles Seiten werden zügig und vor allem kpl. geladen.
Ich wollte eigentlich schon auf den Raspberry2 schwenken ...

Könnte man da eine kleine Anleitung erstellen wie man das einrichtet über einen Webserver?

LG Thomas

[rasti]

Hallo,

ich habe nun nach ewig langem hin und her den Apache auf einem Raspi Pi installiert und Tablet UI ans Laufen bekommen.
Ich versuche mal, eine Anleitung zu schreiben, habe allerdings nur rudimentäre Linuxkenntnisse.....

Als Browser für Tablet UI geht unter Android anscheinend Chrome als einziger Browser völlig fehlerfrei.

Zum Apache installieren, mit ssh auf Raspi einloggen und folgendes eingeben

Code Auswählen Erweitern

sudo apt-get update
sudo apt-get install apache2

So nun kann man mit der IP des Raspis (bei mir  http://192.168.178.6 )  im Browser die Default-Seite aufrufen
"it works. This is the default web page for this server"

Diese liegt im Verzeichnis /var/www
Die Tablet UI Installation liegt aber in /opt/fhem/www/tablet

Das kann man ändern mit der Apache Config-Datei
Dazu gibt man unter ssh auf dem Raspi ein

Code Auswählen Erweitern

sudo nano /etc/apache2/sites-enabled/000-default


und ändert den Abschnitt ab DocumentRoot wie folgt ab:

Code Auswählen Erweitern


DocumentRoot /opt/fhem/www
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /opt/fhem/www/>



So. So nun kann man mit der IP des Raspis im Browser die Tablet UI aufrufen.
und zwar unter http://192.168.178.6/tablet/

Leider sieht man momentan nur eine Textseite, da die Standard-Tablet-UI-Installation
noch die CSS, JS usw. anders verlinkt hat. Dazu ändert man nun in der index.html,
die sich ja standardmäßig in /opt/fhem/www/tablet befindet einfach überall
"/fhem/tablet/"   ab in   "/tablet/" und setzt das Meta Tag fhemweb_url
<meta name="fhemweb_url" content="http://192.168.178.6:8083/fhem">


Also so :

Code Auswählen Erweitern

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
     <meta name="widget_base_width" content="145">
    <meta name="widget_base_height" content="145">
    <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=no output -->
      <meta name="fhemweb_url" content="http://192.168.178.6:8083/fhem">

    <link rel="stylesheet" href="/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/tablet/lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/tablet/css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

    <script src="/pgm2/jquery.min.js" defer></script>
    <script src="/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/tablet/js/fhem-tablet-ui.min.js" defer></script>


    <title>FHEM-Tablet-UI</title>
</head>

So nun kann man die Seite http://192.168.178.6/tablet/ nochmal aufrufen, bis auf die
eigentlichen Daten aus FHEM sollte man nun schon alles sehen

Nun noch die Config-Sys den folgenden Abschnitt wie folgt ändern  und speichern:

Code Auswählen Erweitern


define WEB FHEMWEB 8083 global
attr WEB editConfig 1
attr WEB longpoll 1
attr WEB refresh 300
attr WEB iconPath $styleSheetPrefix:default:fhemSVG:openautomation:tvmovie:weather
attr WEB CORS 1


Voila, Tablet UI läuft unter Apache unter http://192.168.178.6/tablet/  !

zur Info noch:

Bei mir läuft fhem eigentlich mit https und alle drei Ports 8083 8084 und 8085 waren
vorher per Portweiterleitung erreichbar.

Da ich nicht weiss, wie man dem Apache und/oder FHEM in dieser Konstellation https beibringt, ist von
außen  bei mir nur der Port 8084 als sicherer Port freigegeben. D.h. mit obiger Konfiguration
ist  http://192.168.178.6/tablet/ über 8083 ungeschützt nur im lokalen Netzwerk zuhause erreichbar,
die Standard-FHEM-Weboberflächen mit 8084,8085 gehen weiterhin lokal und aus dem Internet mit https

Vielleicht können die Experten hier die Anleitung mal begutachten und verbessern.

Schöne Grüße

Ralf

[Stril]

Hallo!

Ich habe es ähnlich gemacht, aber dabei bleibt ein Problem:

Von Extern funktioniert dann Tablet-UI nicht mehr, da ja:

Code Auswählen Erweitern

<meta name="fhemweb_url" content="http://192.168.178.6:8083/fhem">

--> Die interne IP ist nicht erreichbar von außen.

Gerade überlege ich, das irgendwie über eine zwischengeschaltete Prüfung umzusetzen, ob die Anfrage "von intern" kommt.

Gruß
Phil

[Depechem]

Hallo!

Ich habe es ähnlich gemacht, aber dabei bleibt ein Problem:

Von Extern funktioniert dann Tablet-UI nicht mehr, da ja:

Code Auswählen Erweitern

<meta name="fhemweb_url" content="http://192.168.178.6:8083/fhem">

--> Die interne IP ist nicht erreichbar von außen.

Gerade überlege ich, das irgendwie über eine zwischengeschaltete Prüfung umzusetzen, ob die Anfrage "von intern" kommt.

Gruß
Phil

Das gleiche Problem habe ich auch

[Depechem]

Das kann man ändern mit der Apache Config-Datei
Dazu gibt man unter ssh auf dem Raspi ein

Code Auswählen Erweitern

sudo nano /etc/apache2/sites-enabled/000-default


und ändert den Abschnitt ab DocumentRoot wie folgt ab:

Code Auswählen Erweitern


DocumentRoot /opt/fhem/www
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /opt/fhem/www/>


Kannst du das bitte noch mal genauer erklären?
wenn ich

Code Auswählen Erweitern

sudo nano /etc/apache2/sites-enabled/000-default
eingebe wird mir nur ein leeres Feld mit [ New File ] angezeigt

Ich habe damit links erzeugt

Code Auswählen Erweitern

sudo ln -s /opt/fhem/www/tablet /var/www/html/tablet

aber scheinbar wird mit deiner Anleitung der komplette Pfad geändert oder!? Kingt bald noch besser.

[rasti]

Kannst du das bitte noch mal genauer erklären?
wenn ich

Code Auswählen Erweitern

sudo nano /etc/apache2/sites-enabled/000-default
eingebe wird mir nur ein leeres Feld mit [ New File ] angezeigt

Ich habe damit links erzeugt

Code Auswählen Erweitern

sudo ln -s /opt/fhem/www/tablet /var/www/html/tablet

aber scheinbar wird mit deiner Anleitung der komplette Pfad geändert oder!? Kingt bald noch besser.

ja ich habe einfach das Default-Verzeichnis des Apache-Servers geändert.

wenn bei dir da ein neues File erzeugt wird, liegt die Datei bei dir woanders,
schau mal in dem Verzeichnis /etc/apache2/sites-enabled/ nach

Gruß

Ralf

[rasti]

Das gleiche Problem habe ich auch

Wenn man das unbedingt braucht, kann man sich die Dateien für den Zugriff von außen ja
noch vom Standard-FHEM-Server liefern lassen. Da kann man dann z.B. Port 8084 mit https absichern

Dazu erzeugt man einfach alle Dateien doppelt und passt die Links und fhemweb_url an.
Also z-B. eine Zusatzdatei index2.html mit

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
     <meta name="widget_base_width" content="145">
    <meta name="widget_base_height" content="145">
    <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=no output -->
      <meta name="fhemweb_url" content="https://YOURSERVER:8084/fhem">

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>


erreichbar dann über

https://YOURSERVER:8084/fhem/ftui/index2.html

Umständlich, geht aber.

Zu Hause hätte man so den schnellen Apache-Zugriff über http / 8083
und von aussen dann  den Standard-FHEM-Server über https / 8084

Gruß

Ralf

[dadoc]

Hi Ralf,
vielen Dank für die Anleitung.

So nun kann man die Seite http://192.168.178.6/tablet/ nochmal aufrufen, bis auf die
eigentlichen Daten aus FHEM sollte man nun schon alles sehen

Kann es sein, das das nicht funktioniert, wenn man das mit data-template und einem menu.html mit pagetabs aufgebaut hat? Bei mir wird jedenfalls bei Aufruf der index.html über Apache wirklich nur die reine index.html angezeigt und keine der eigentlichen htmls eingebunden. Aus dem Quelltext:

Code Auswählen Erweitern

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
        </ul>
    </div>
</body>
</html>
Normalerweise müsste ja da einerseits die menu.html eingebunden sein, andererseits die erste Seite, die aus menu.html referenziert wird.
Grüße
Martin

[rasti]

Hi Ralf,
vielen Dank für die Anleitung. Kann es sein, das das nicht funktioniert, wenn man das mit data-template und einem menu.html mit pagetabs aufgebaut hat? Bei mir wird jedenfalls bei Aufruf der index.html über Apache wirklich nur die reine index.html angezeigt und keine der eigentlichen htmls eingebunden. Aus dem Quelltext:

Code Auswählen Erweitern

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
        </ul>
    </div>
</body>
</html>
Normalerweise müsste ja da einerseits die menu.html eingebunden sein, andererseits die erste Seite, die aus menu.html referenziert wird.
Grüße
Martin

ich weiss zwar nicht wirklich  wie das mit Templates funktioniert aber eigentlich sollte das doch funktionieren....
da werden irgendwelche Links auf css,js etc nicht stimmen.
Läuft die Seite unter http://192.168.178.6:8083/fhem/ftui/   ?

Schau dir doch mal im Browser/Debugger an, ob da wirklich alles was du brauchst geladen wird

[dadoc]

Läuft die Seite unter http://192.168.178.6:8083/fhem/ftui/

Ja.
Irgendwie scheint jQuery nicht zum Laufen zu kommen. Die Konsole sagt:

Code Auswählen Erweitern

ReferenceError: jQuery is not defined
...
jquery.....min.js (Zeile 1, Spalte 105)
TypeError: t is undefined
...
jquery.....min.js (Zeile 1, Spalte 1239)
ReferenceError: $ is not defined

setstate hatte jemand anderem, der bei jedem 5. Reload dasselbe Problem hatte, dazu schonmal geantwortet: http://forum.fhem.de/index.php/topic,34233.msg373139/topicseen.html#msg373139
Kann mir aber nicht vorstellen, dass das in meinem Fall daran liegt.
Die Pfade scheinen zu stimmen, d.h. z.B. http://192.168.50.24/tablet/lib/jquery.toast.min.js wird korrekt gefunden. Ich habe es jetzt auch mal auf den (nicht pw-geschützten) Port 8085 gelegt - selbes Ergebnis.

[Depechem]

Also mein FTUI läuft über den Apache jetzt gefühlt etwas schneller. Dafür werden jetzt aber alle Widgets richtig und vollständig geladen.
Ein Problem habe ich aber noch! Ich möchte auf einem Tablet mit WebViewControl arbeiten. Die Seite wird korrekt angezeigt nur funktioniert die Sprachsteuerung, Helligkeitssteuerung sowie die Buttons(Batterieanzeige und Mikofonsymbol nicht mehr über den Apache.

Dies ist in meiner index.html drin:

Code Auswählen Erweitern

<!-- Enable this lines for usage with WebViewControl -->
        <script type="text/javascript" src="../pgm2/cordova-2.3.0.js" defer></script>
        <script type="text/javascript" src="../pgm2/webviewcontrol.js" defer></script>
        <script type="text/javascript">var wvcDevices = {'12345': 'androidTablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
        <!-- End for WebViewControl -->

diese Datei wird im pgm2 Ordner ja auch richtig geladen:

Code Auswählen Erweitern

<script type="text/javascript" src="../pgm2/jquery.min.js" defer></script>

oder muss ich hier auch einem Pfad ändern?

Code Auswählen Erweitern

<script type="text/javascript">var wvcDevices = {'12345': 'androidTablet'}; var wvcUserCssFile="webviewcontrol.css"</script>