Circle-Menü Problem mit bestimmten Browsern

rasti · 03 April 2016, 01:03:17

Danke Johannes

Zitat von: viegener am 03 April 2016, 00:10:00
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

Defer steht bei jeder JS Verlinkung dabei z.B.

Code Auswählen

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

Was meinst du mit "richtige Reihenfolge der JS-Dateien" ? Die Reihenfolge im "Header" der html-Datei ? Die sieht bei mir so aus :

Code Auswählen

<!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="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" />

   <link rel="stylesheet" href="/tablet/lib/openautomation.css" />
	<link rel="stylesheet" href="/tablet/lib/fhemSVG.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.js" defer></script>

Bitte nicht am Pfad stören (kein /fhem/tablet/ sondern /tablet/ ), das ist aufgrund meines Apache Doc-Root
Ach ja und in der letzten Zeile hatte ich zuerst fhem-tablet-ui-min.js und nicht fhem-tablet-ui.js,
aber das änder nix.

Zitat
- Einflussfaktoren ausschliessen, wenn es im Circelmenu nicht geht, dann ohne Circlemenu vielleicht, einfache bilder, etc (auch schonmal gesagt)

Wie meinst du das?
Wenn ich im Ciclemenu datatype=Button statt Image nehme, dann geht es, FHEM-Befehl wird dann ausgeführt.

Zitat
wenn es mit Apache auftritt dann ohne Apache testen.

Das habe ich auch gemacht, wenn ich den obigen HTML-Header für Standard-FHEM-FTUI anpasse,
also das ganze nicht über Apache sondern über http://192.168.178.6:8083/fhem/ftui/
aufrufe, habe ich genau dasselbe Problem (nur langsamer als Apache)

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

Done

Schöne Grüße und Danke nochmals.

Ralf

viegener · 03 April 2016, 01:38:01

Nur ganz kurz weil spät:

- Reihenfolge scheint ok
- Ich meinte den image button ohne circle menu geht das?
- Wenn das nicht geht dann vielleicht nochmal mit standard bildern

Aber eigentlich bin ich über den letzten Teil gestolpert: Wenn es mit Apache "schneller" geht, dann wird ja wohl offensichtlich gecached im Apache. Solange das passiert sind alle Tests sinnlos, da Du nicht sicher sein kannst, ob Änderungen wirklich verwendet werden...
Da sucht man unter Umständen tagelang nach Fehlern die keine sind oder umgekehrt. Wie oben schon passiert.

Hier wäre der Vorschlag ganz klar: Seite mit fhemweb zum Laufen bringen, bei jedem Test mit veränderten Dateien browser schliessen, wenn möglich caching ausschalten. Hier hilft ein wenig Paranoia und ein wenig mehr Zeit beim Testen durch Neustarts.

rasti · 03 April 2016, 11:47:20

Also nun folgendes unter fhemweb (kein Apache)

das hier

Code Auswählen

<li data-row="1" data-col="3" data-sizex="2" data-sizey="1" class="semitransparent">
<header>Webradio</header>
<div data-type="image"  data-url="enecuadorhaymusica.jpg" data-fhem-cmd="set mpdradiostation En Ecuador hay Musica"></div>
<div data-type="image" data-url="radiozaracay.png" data-fhem-cmd="set mpdradiostation Radio Zaracay"></div>

</li>

zeigt mir die 2 Bilder an aber Klick auf Bild führt den fhem-Befehl nicht aus

das hier

Code Auswählen

<div data-type="push"  data-icon="fa-fire" data-fhem-cmd="set mpdradiostation En Ecuador hay Musica"></div>
<div data-type="push" data-icon="fa-fire" data-fhem-cmd="set mpdradiostation Radio Zaracay"></div>

geht

Wenn ich das in Circlemenu hineinnehme, genau dasselbe, mit Image wird kein Befehl ausgeführt,
mit push und awesome-Icons geht es.

Und nun ?

Gruss
Ralf

rasti · 03 April 2016, 12:25:04

So ich habe jetzt zwar nicht den Fehler gefunden, aber eine andere Lösung die funktioniert

Das hier geht.

Code Auswählen

<li><div data-type="image" data-size="200%" data-url="enecuadorhaymusica.jpg" onclick="setFhemStatus('set mpdradiostation En Ecuador hay Musica')"></div></li>
<li><div data-type="image" data-size="200%" data-url="radiozaracay.png"  onclick="setFhemStatus('set mpdradiostation Radio Zaracay')"></div></li>

Sowohl alleinstehend als auch im Circlemenu.

Ich müsste jetzt insgesamt 4 html-Seiten ändern und 50-60 Code-Zeilen mit Fernseh- bzw Radiosendern umschreiben.

Frage : Ist das Codemäßig jetzt OK oder Zufall dass das so funzt....
Besteht die Gefahr, dass das bei einem künftigen fhem / Tablet UI-Update wieder nicht geht ?

Die andere Frage, warum das vorher anders ging und nun nicht mehr, ist nun eigentlich nicht mehr soooo wichtig

Schöne Grüße

Ralf

viegener · 03 April 2016, 13:40:04

Also ich habe jetzt mal folgendes ausprobiert:

Code Auswählen

    <div class="container">
    <div class="left"> 
        <div data-type="image"  data-size="200%" data-url="/fhem/images/default/weather/chance_of_rain.png" data-fhem-cmd="set roll_wz_1 on"></div>
        <div data-type="image"  data-size="200%" data-url="/fhem/images/default/weather/chance_of_snow.png" data-fhem-cmd="set roll_wz_2 on"></div>
    </div>
    </div>

Also so nah wie möglich an Deinem Beispiel. In meiner Installation läuft das problemlos (due Befehle werden auch ausgeführt), allerdings hat es danach nochmal Änderungen an tablet UI-Modulen gegeben, so dass es wirklich sein kann, dass hier ein Fehler hereingekommen ist.

Vielleicht kannst Du dazu mit der Beschreibung ein Issue in github aufmachen, denn ich möchte jetzt ungerne ein Update bei mir durchführen um zu überprüfen ob die letzte Änderung das Problem hereingebracht hat.

Wenn Du viele gleichartige Elemente hast, dann könnte vielleicht auch das Servermodul für FTUI etwas für Dich sein. Bei Änderungen gibt es dann nur eine Stelle an der etwas geändert werden muss und nicht ganz viele.

https://forum.fhem.de/index.php/topic,43110.0.html

rasti · 03 April 2016, 18:53:17

Hallo Johannes,

ich hab nun einfach alle Codezeilen auf onclick="setFhemStatus......" also so

Code Auswählen

<li><div data-type="image" data-size="200%" data-url="enecuadorhaymusica.jpg" onclick="setFhemStatus('set mpdradiostation En Ecuador hay Musica')"></div></li>

umgestellt.

Ob das sauberes html und/oder TabletUI-Konform ist weiss ich net,
aber es geht (jetzt zumindest und in allen meinen Browsern unter Win und Android).

Danke nochmals

Schöne Grüße

Ralf

setstate · 03 April 2016, 22:14:19

ich habe es gerade bei Konvertieren für FTUI 2.1 im Code gesehen: so wäre es nach FTUI Art.

Code Auswählen

<li><div data-type="image" data-size="200%" data-url="enecuadorhaymusica.jpg" data-fhem-cmd="set mpdradiostation En Ecuador hay Musica"></div></li>

rasti · 04 April 2016, 18:27:31

Zitat von: setstate am 03 April 2016, 22:14:19
ich habe es gerade bei Konvertieren für FTUI 2.1 im Code gesehen: so wäre es nach FTUI Art.

Code Auswählen Erweitern
<li><div data-type="image" data-size="200%" data-url="enecuadorhaymusica.jpg" data-fhem-cmd="set mpdradiostation En Ecuador hay Musica"></div></li>

das ist ja so wie ich es zuerst hatte - das geht bei mir nicht mehr

knopf_piano · 13 April 2016, 22:12:13

nachdem Markus mir die Erweiterung in YAMAHA_AVR eingebaut hat (danke nochmals!!)
https://forum.fhem.de/index.php/topic,51954.0.html
, sieht's bei mir so aus und funzt perfekt

Code Auswählen


<li data-row="5" data-col="5" data-sizex="2" data-sizey="1" class="semitransparent">
   <header><div data-type="label" class="large">Webradio</div></header> 
    <div data-type="circlemenu" data-border="square"
         data-item-width="145" data-item-height="60"
         data-circle-radius="420"
         data-direction="top-half"
         class="circlemenu centered noshade">
         
        <ul>
	  <li> <div data-type="button" data-icon="oa-it_radio" 
		      data-on-background-color="green" 
		      data-on-color="#ffffff"
		      class="big"></div></li>

	  <li><div  data-type="image" data-url="pics/br_bayern1.png" data-size="120%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 1')"
	  >
	  </div></li>
	  <li><div  data-type="image" data-url="pics/heimat.png" data-size="40%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 2')"
	  >
	  </div></li>
	  <li><div  data-type="image" data-url="pics/logo2-morow.png" data-size="120%" 
		    style="position: relative; top:10px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 3')"
	  >
	  </div></li>
	  <li><div  data-type="image" data-url="pics/liveireland.jpg" data-size="120%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 4')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/klassikradio.png" data-size="140%" 
		    style="position: relative; top:0px;  background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 5')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/rocknblues.png" data-size="40%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 6')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/rockliveradio.jpg" data-size="120%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 7')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/Salsa-logo.jpg" data-size="60%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 8')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/rockmax.jpeg" data-size="40%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 9')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/hairmetal.jpg" data-size="100%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 10')"
	  >
	  </div></li>	
	  <li><div  data-type="image" data-url="pics/knopfhome.jpeg" data-size="100%" 
		    style="position: relative; top:0px; background-color:#ffffff"
		    onclick="setFhemStatus('set AV_Receiver input netradio; set AV_Receiver preset 11')"
	  >
	  </div></li>	
        </ul>
  </div>
  <br><br>
  <div data-type="label" class="">Radiostation ausw&auml;hlen</div>
</li>

rasti · 16 April 2016, 22:36:41

ja das ist der Codequark mit

Code Auswählen

onclick="setFhemStatus('set .....
den ich mit mir ausgekaspert hatte

Aber laut setstate geht "FTUI Art" ja anders, siehe 3 Posts weiter oben.
Geht das bei dir auch nicht ?

Gruß

Ralf

knopf_piano · 19 April 2016, 09:22:40

jep, geht bei mir auch nicht, daher der schwenk auf onClick.
bin damit erstmal zufrieden