Circle-Menü Problem mit bestimmten Browsern

[rasti]

Hallo,

ich habe seit kurzem Probleme mit dem Circle-Menü.

Ich habe ein FHEM- und FTUI-Update gemacht und auch Probleme mit dem Chart-Widget gehabt,
welches nun aber gelöst ist => https://forum.fhem.de/index.php/topic,51450.0.html

Folgenden Code habe ich im Circle-Menü :

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizex="2" data-sizey="1" class="semitransparent">
<header>Webradio</header><br>
<div data-type="circlemenu" data-border="square"
         data-item-width="145" data-item-height="50"
         data-circle-radius="400"
         data-direction="bottom-half"
         class="circlemenu centered">
        <ul>
          <li> <div data-type="symbol" data-icon="fa-volume-up" class="cell"></div></li>       

<li><div data-type="image"  data-url="/../images/default/enecuadorhaymusica.jpg" style="background-color:#99ffcc;" data-size="200%" data-fhem-cmd="set mpdradiostation En Ecuador hay Musica"></div></li>
<li><div data-type="image" data-url="/../images/default/radiozaracay.png" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation Radio Zaracay"></div></li>
<li><div data-type="image" data-url="/../images/default/radiopuntual.jpg" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation Radio Puntual"></div></li>
<li><div data-type="image" data-url="/../images/default/hcjb.png" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation HCJB Voz de los Andes"></div></li>
<li><div data-type="image" data-url="/../images/default/swr4.jpg" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation SWR 4"></div></li>
<li><div data-type="image" data-url="/../images/default/kiraka.jpg" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation Kiraka"></div></li>
<li><div data-type="image" data-url="/../images/default/cherie.png" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation Cherie FM"></div></li>
<li><div data-type="image" data-url="/../images/default/absolute60s.png" data-size="200%" style="background-color:#99ffcc" data-fhem-cmd="set mpdradiostation Absolute 60s"></div></li>
<li><div data-type="image" data-url="/../images/default/absolute70s.png" data-size="200%" style="background-color:#99ffcc" data-fhem-cmd="set mpdradiostation Absolute 70s"></div></li>
<li><div data-type="image" data-url="/../images/default/absolute80s.png" data-size="200%" style="background-color:#99ffcc" data-fhem-cmd="set mpdradiostation Absolute 80s"></div></li>
<li><div data-type="image" data-url="/../images/default/absolute90s.png" data-size="200%" style="background-color:#99ffcc" data-fhem-cmd="set mpdradiostation Absolute 90s"></div></li>
<li><div data-type="image" data-url="/../images/default/absolute00s.png" data-size="200%" style="background-color:#99ffcc" data-fhem-cmd="set mpdradiostation Absolute 00s"></div></li>
<li><div data-type="image" data-url="/../images/default/absoluteclassicrock.png" data-size="200%" style="background-color:#99ffcc" data-fhem-cmd="set mpdradiostation Absolute Classic Rock"></div></li>
<li><div data-type="image" data-url="/../images/default/audiophileclassic.png" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation Audiophile Classic"></div></li>
<li><div data-type="image" data-url="/../images/default/audiophilebaroque.png" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation Audiophile Baroque"></div></li>

        </ul>
     
</div><br><br>

<div data-type="label" class="">Radiostation ausw&auml;hlen</div>
</li>

In dem von mir bevorzugten Android-Tablet-Boat-Browser geht seither das Circlemenü nicht mehr.
Es erscheint zwar, aber wenn ich auf einen Button drücke, wird der Befehl (set mpdradiostation .....)
nicht abgesetzt. In den meisten geläufigen Browsern geht es hingegen einwandfrei.

Die Circlemenü Widget JS-Datei ist noch vom 8.2.16, wurde also gar nicht upgedatet. Muss also
an irgendwas anderem liegen. Hat jemand eine Idee warum das nicht mehr geht ?

Schöne Grüße

Ralf

[rasti]

keine Idee ?

[viegener]

Das einzige was mir auffällt ist, dass die URLs für Deine Bilder so eigentlich ungültig sind -->
/../ bezeichnet ein Verzeichnis noch eins weiter als das root Verzeichnis (/). Das kann natürlich schon zu unterschiedlichen Ergebnissen führen.

Da ich den Boat Browser aber nicht kenne und auch nicht sagen kann auf welcher Engine er aufsetzt fällt es schwer das nachzuvollziehen.
Zusatzfrage: Welche "geläufigen" Browser gehen denn --> und natürlich auf welcher PLattform.

[rasti]

Das einzige was mir auffällt ist, dass die URLs für Deine Bilder so eigentlich ungültig sind -->
/../ bezeichnet ein Verzeichnis noch eins weiter als das root Verzeichnis (/). Das kann natürlich schon zu unterschiedlichen Ergebnissen führen.

Ich lasse die Webseiten von einem Apache Server ausliefern...da ist bei mir das root-Verzeichnis anders.
Das passt schon....

Da ich den Boat Browser aber nicht kenne und auch nicht sagen kann auf welcher Engine er aufsetzt fällt es schwer das nachzuvollziehen.
Zusatzfrage: Welche "geläufigen" Browser gehen denn --> und natürlich auf welcher PLattform.

Windows 10: Firefox
Android 4.2.2 : Chrome, Opera, Maxthon

Warum ich den Boatbrowser nehme ? => guter Vollbildmodus und schnell
Chrome ist vieeel zu lahm,Opera auch (ausserdem weiss ich nicht wie da Fullscreen geht)

[viegener]

Ich lasse die Webseiten von einem Apache Server ausliefern...da ist bei mir das root-Verzeichnis anders.
Das passt schon....

Da würde ich jetz mal widersprechen wollen, solange die URLs nicht per JS modifiziert werden ist das Root-Verzeichnis / und kann in URLs nicht anders sein, da hilft auch Apache nicht  . Ein absoluter URL, der mit /.. anfängt ist normalerweise einfach ein URL der mit / anfängt, das .. ist zwar inkorrekt, wird aber einfach weggefiltert.

Zum Hintergrund vielleicht nochmals zu absoluten/relativen URLs nachlesen.
Aber wenn alles funktioniert gäbe es ja auch kein Problem...

[rasti]

Hmm,

meiner Meinung nach bezieht sich das root-Verzeichnis
doch auf den jeweiligen Serverroot und
den kann ich doch (beim Apache) einstellen wie ich will.

Bei mir ist das so konfiguriert, dass der Apache-Root
nicht das Standard-FHEM-Root ist, sondern /tablet/.
Also ruft unter Apache /../images/ schon die richtige Datei auf

Beispiel. Im Browser liefern

http://192.168.178.6/images/default/audiophilebaroque.png   (Apache)
http://192.168.178.6:8083/fhem/images/default/audiophilebaroque.png  (Standard-FHEM)

beide dieselbe Datei

Gruss

Ralf

[rasti]

wenn ich statt data-type="image" data-type="button" nehme geht es

Code Auswählen Erweitern

<li><div data-type="button" style="background-color:#99ffcc;" data-size="200%" data-fhem-cmd="set mpdradiostation swr3"></div></li>>

Hingegen geht das hier:

Code Auswählen Erweitern

<li><div data-type="image" data-url="/../images/default/swr3.jpg" style="background-color:#99ffcc" data-size="200%" data-fhem-cmd="set mpdradiostation swr3"></div></li>
nicht mehr .
Bild wird angezeigt aber ein Klick auf das Bild führt keinen Befehl aus.

[viegener]

Hmm,

meiner Meinung nach bezieht sich das root-Verzeichnis
doch auf den jeweiligen Serverroot und
den kann ich doch (beim Apache) einstellen wie ich will.

Bei mir ist das so konfiguriert, dass der Apache-Root
nicht das Standard-FHEM-Root ist, sondern /tablet/.
Also ruft unter Apache /../images/ schon die richtige Datei auf

Beispiel. Im Browser liefern

http://192.168.178.6/images/default/audiophilebaroque.png   (Apache)
http://192.168.178.6:8083/fhem/images/default/audiophilebaroque.png  (Standard-FHEM)

beide dieselbe Datei

Gruss

Ralf

Dann ist irgendwas faul, denn damit hast Du ja ein riesiges Sicherheitsloch auf Deinem Server. Dann kannst Du ja mit http://192.168.178.6/../../fhem.cfg Deine Konfiguration und mit http://192.168.178.6/../../../../etc/passwd  Deinen password-File lesen? Ich hoffe nicht 

Genau deshalb lassen Server keinen Zugriff unterhalb von Documentroot zu (es sei denn man konfiguriert entsprechend und erlaubt z.B. symbolische Links und dann muss man sehr genau wissen was man macht, es gibt da sehr schöne Angriffsvektoren insbesondere für Apache). ServerRoot sagt bei Apache eigentlich erstmal nur, wo Apache selbst mit Protokollen etc liegt. DocumentRoot ist der für URLs relevante Parameter.

Hier findest Du auch etwas Erklärung:
http://webmasters.stackexchange.com/questions/48390/is-it-possible-to-reference-images-outside-the-domain-root

[rasti]

Dann ist irgendwas faul, denn damit hast Du ja ein riesiges Sicherheitsloch auf Deinem Server. Dann kannst Du ja mit http://192.168.178.6/../../fhem.cfg Deine Konfiguration und mit http://192.168.178.6/../../../../etc/passwd  Deinen password-File lesen? Ich hoffe nicht 

Nein unterhalb des Server-Doc-Roots in Apache ist nichts aufrufbar. Also nichts mit http://192.168.178.6/../ geht.

Genau deshalb lassen Server keinen Zugriff unterhalb von Documentroot zu
DocumentRoot ist der für URLs relevante Parameter.

Ich glaub das ist mit klar - aber wo ist nun mein Problem ?

Das Circlemenü mit Images geht inzwischen auf keinem Browser mehr -
evtl. waren da noch funktionierende Dateien im Cache.

Und wie oben gesagt, nehme ich statt Images Buttons, geht es.

[rasti]

Unter Chrome (Prüfen) gibt er mir folgenden Fehler:

fhem-tablet-ui.js:177 Uncaught ReferenceError: $ is not defined(anonymous function) @ fhem-tablet-ui.js:177

Das ist die Zeile

Code Auswählen Erweitern

// event page is loaded
$(document).on('ready', function() {

Hilft das weiter oder hat das mit dem Fehler (Absetzen von fhem-Befehlen bei Images im Circlemenü geht nicht)
gar nichts zu tun ?

Gruss

Ralf

[rasti]

wenn ich im Cycle-Menü auf ein Image klicke, kommt in der Console (Chrome / Win10) die Meldung

" VM8844:61 Uncaught TypeError: ftui.setFhemStatus is not a function"

Code Auswählen Erweitern

Uncaught TypeError: ftui.setFhemStatus is not a function(anonymous function) @ VM8844:61m.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3
Hilft das bei der Diagnose weiter ?

Schöne Grüße

Ralf

[viegener]

Unter Chrome (Prüfen) gibt er mir folgenden Fehler:

fhem-tablet-ui.js:177 Uncaught ReferenceError: $ is not defined(anonymous function) @ fhem-tablet-ui.js:177

Das ist die Zeile

Code Auswählen Erweitern

// event page is loaded
$(document).on('ready', function() {

Hilft das weiter oder hat das mit dem Fehler (Absetzen von fhem-Befehlen bei Images im Circlemenü geht nicht)
gar nichts zu tun ?

Gruss

Ralf

$ is not defined Ist sehr elementar, denn dann ist jquery nicht geladen und nichts wird solange funktionieren. Danach kann alles mögliche passieren...
Kann es sein, dass die Reihenfolge der JS-Dateien nicht stimmt, under/oder defer nicht angegeben ist?

[viegener]

wenn ich im Cycle-Menü auf ein Image klicke, kommt in der Console (Chrome / Win10) die Meldung

" VM8844:61 Uncaught TypeError: ftui.setFhemStatus is not a function"

Code Auswählen Erweitern

Uncaught TypeError: ftui.setFhemStatus is not a function(anonymous function) @ VM8844:61m.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3
Hilft das bei der Diagnose weiter ?

Schöne Grüße

Ralf

OK, das deutet auf weitere Probleme hin, denn ftui.setFhemStatus wird in fhem-tablet-ui.js definiert, wenn das nicht aufrufbar ist, wundert nicht, dass das image auch nicht funktioniert. Aber im Prinzip deutet auch das daraufhin, dass grundsätzlich bestimmte Dinge in Deinem tablet ui schiefstehen.

Johannes

[rasti]

Puh... und was heisst das nun für mich ?

Vor der Zeitumstellung lief alles, dann gab es Probleme mit
dem Chart Widget und nun nach dem neuesten Update läuft alles
bis auf dieses Circle Menü...

Ich würde eigentlich lieber den Fehler finden anstatt FHEM und Tablet UI neu aufzusetzen...

Es ist ja nicht so, dass gar nichts geht, andere Widgets laufen ja.

Wo fange ich an zu suchen oder was fange ich an zu ersetzen?

Gruß

Ralf

[viegener]

Ich würde folgende Vorgehensweisen empfehlen (Neuaufsetzen bringt doch überhaupt nichts ...)

- Die problematische Seite erstmal überprüfen auf richtige Reihenfolge der JS-Dateien und die defers wie oben bereits gesagt

- Einflussfaktoren ausschliessen, wenn es im Circelmenu nicht geht, dann ohne Circlemenu vielleicht, einfache bilder, etc (auch schonmal gesagt)
   wenn es mit Apache auftritt dann ohne Apache testen. Mit so vielen Variablen wird es immer schwierig den Fehler einzukreisen (nachzustellen)

- Die Seiten auf korrekte Syntax (schliesende Elemente) und korrekte Pfade überprüfen