Hallo zusammen,
ich versuche gerade auf eine für meine Frau kompatible Benutzeroberfläche zu schwenken. Bislang bin ich nämlich ihre "Fernbedienung" ;). Also hab ich mir TABLET-UI angeschaut und für gut befunden.
Nun habe ich aber folgendes Problem:
Das Circlemenu funktioniert prima in meinem Firefox oder auch Safari Browser auf dem MAC. Aber sobald ich das vom Handy oder Tablet probiere, kann ich zwar auf das Haupt-Symbol klicken, aber außer dass es kurz "aufleuchtet" passiert nichts. Es erscheinen also nicht die Schaltoptionen um den Kreis. Probiert habe ich es mit dem Silk-Browser (Kindle Fire), dem Google Chrome (Tablet) und dem Firefox (Handy). Überall das gleiche Problem.
Was könnte ich falsch gemacht haben?
schonmal vielen Dank im Voraus
Thomas
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>Rollo</header>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="Rollo_Arbeitszimmer"
data-set-on="100"
data-icon="">100</div></li>
<li><div data-type="push" data-device="Rollo_Arbeitszimmer"
data-set-on="50"
data-icon="">50</div></li>
<li><div data-type="push" data-device="Rollo_Arbeitszimmer"
data-set-on="0"
data-icon="">0</div></li>
</ul>
</div>
<div data-type="label" class="cell">Arbeitszimmer</div>
</div>
</li>
Änder mal die Zeilen....
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
in
<div data-type="circlemenu" class="cell">
<ul>
Bis auf die Parameter sieht es nämlich so aus wie bei mir....
Gruß
Gollum
PS: Hier das Beispiel das bei mir die Grundlage bildet....
https://github.com/knowthelist/fhem-tablet-ui#circle-menu
Hi Gollum,
das hat leider nichts gebracht.
Es gibt nur einen Unterschied zum vorherigen Verhalten: Im Firefox auf dem Handy wir nun noch nicht mal mehr das Schraubenschlüssel Symbol gezeigt. Sonst ist alles wie vorher. Also bei den Tablets drücke ich auf's Symbol, es leuchtet kurz auf und das war es dann auch schon wieder.
Trotzdem Danke!!
Viele Grüße
Thomas
Tja was soll ich sagen....
ich hab eben nochmal deinen code kopiert und bei mir eingefügt....das Menü geht auf und ich kann die Werte auswählen ???
also daran liegt es nicht ....
Gerät: Android Tablet mit Crome
Die Frage nach einer aktuellen FHEM Version und der Aktualisierung von Tablet UI brauche ich nicht stellen?
oder doch.....?
Hui...
ob du es glaubst oder nicht....
Hab gerade die Seite auf meinem Tablet aktualisiert....danach ging kein Circlemenu mehr.
Neustart Tablet...und es geht einmal....danach nur noch aufleuchten...scheint was generelles am widget zu sein.:-(
EDIT: Wenn ich den RING (also die Umrandung) des widgets treffe, dann geht es auf.
Das ist es tatsächlich!!
sobald ich den Ring Treffe funktioniert es!! :)
Na das nenne ich mal einen schön versteckten Bug! ;-)
Danke für's herausfinden!
Wem müssen wir nun bescheid geben? Ich hab von HTML leider nur sehr wenig Ahnung,
Viele Grüße und DANKE
Thomas
niemand,
setstate liest hier mit ;-)
Zitat von: n4rrOx am 14 Oktober 2016, 16:41:44
setstate liest hier mit ;-)
Woher wisst ihr das? 8)
Welche Größe habt ihr beim Circle Push Button? Mit meinem Zeigefinger treffe ich immer ein Stück Rand. Ich kann also garnicht testen, ob es in der Mitte gedrückt nicht geht.
Moin...
ich hab an der Größe nicht geändert ....also standard.
Wenn ich meine ganzen Finger auf das Widget packe leuchtet es nur auf....
Nähere ich mich von außen an den Kreis an, klappt es irgend wann.
Vielleicht hilft das als Beschreibung.
Was mich wundert....bis heute als ich den Code oben ausprobiert babe gingen die Menüs noch einwandfrei ....(Außer das Thema mit dem Swiper)
ggf. aber auch einfach noch im Cache gehabt..:-(
Also ich habe auch nichts an den Icon-Größen geändert.
Allerdings hatte ich Tablet-UI bereits vor Monaten mal installiert. Heute habe ich dann bevor ich mich ernsthaft damit befassen wollte ein Update von Fhem und vom TABLET-UI gemacht. Danach waren die Icons immer noch so groß wie vorher, die Werte von widget_base_width und widget_base_height waren aber plötzlich im 70'er Bereich. Somit passte das alles nicht mehr zusammen, also habe ich die Größe des widgets wieder auf 116 bzw 131 gesetzt.
Vom Verhalten her kann ich es nicht besser als Gollum beschreiben. Ein einfaches Klicken bringt überhaupt nichts. Erst wenn man sich mit wiederholtem langsamen annähern von außen auf den Kreis zu bewegt, schafft man es irgendwann den "richtigen Pixel" zu treffen. Das ist in der Nähe der äußeren Umrandung. Das Verhalten habe ich auf allen drei Plattformen (Handy, Kindle Fire und Android Tablet)
Ich hoffe das ich damit ein wenig weiter helfen konnte.
Viele Grüße
Thomas
Hallo zusammen,
ich hatte ähnliche Probleme. Seit dem widget_pagebutton Update von gestern funktionierten einige der Widgets auf dem Touchscreen nicht mehr (Swiper, Dropdown, Link). Auf dem PC gab es keine Probleme. Sobald ich folgenden Quellcode durch ein altes Backup ersetzt habe, funktioniert die Widgets auch auf dem Touchscreen wieder.
Version vom 14.10.2016
// start return timer after last activity
if ( me.elements.eq(0).data('return-time') > 0 ){
$('body').once('touchend mouseup', function(e) {
startReturnTimer(me.elements.eq(0));
e.preventDefault();
});
}
funktionierende Version
// start return timer after last activity
if ( me.elements.eq(0).data('return-time') > 0 ){
var releaseEventType=((document.ontouchend!==null)?'mouseup':'touchend');
$('body').once(releaseEventType, function() {
startReturnTimer(me.elements.eq(0));
});
}
Viele Grüße
Patrick
Hallo,
ich habe das selbe Problem mit einem Popup (ich muss quasi ganz an den Rand drücken)
<div class="top-space">
<div data-type="popup"
data-height="400px"
data-width="700px"
class="">
<div data-type="push"
data-icon="fa-paint-brush"
class="">
</div>
<div data-type="label"
class="cell narrow">Farbe
</div>
Bei mir tritt das obige Problem auch mit dem circlemenu auf Android-Tablets (fully browser) auf. Nur am Rand geht es auf, die Mitte gedrückt leuchtet es nur auf. Windows (versch. Browser) geht. Ein Löschen des Caches auf Andoid hat keine Verbesserung gebracht.
Hallo, ich hatte ein ähnliches Problem. Bei mir haben die Links und die Popups nicht mehr funktioniert ... links haben auch nur kurz geleuchtet!
Ich hatte im Code ein data-return-time="360" drin, habe es rausgenommen u siehe da die Popups/Links funktionieren wieder ... data-return-time (nach x sec auf die Homeseite wechseln!) war bei schon immer drin, hat aber glaube ich bei 2.2 nicht mehr funktioniert!
<div data-type="pagebutton" data-url="#page_home.html" data-load="#home" data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#CC7A00" data-on-color="#222222" data-active-pattern=".*#page_home.html" data-icon="fa-home" data-return-time="360" class="default bigger"></div>
vg Olaf
Moin..
Patrick:
Hab die Anpassung bei mir durch geführt...keine Änderung des Verhaltens oder ich hab was falsch gemacht.:-(
Geändert im JS Verzeichnis...Neustart FHEM....Browserspeicher gelöscht....Seite neu aufgerufen...Keine Änderung
Auf einem iPad konnte ich das Problem nachvollziehen. Ich suche eine Lösung ...
Zitat von: setstate am 14 Oktober 2016, 16:52:52
Woher wisst ihr das? 8)
.... da das FTUI wächst und gedeiht ;)
habe das Circlemenu jetzt beim Click Event Handler optimiert, so dass es nun auch mit den geänderten famultibutton (Push,Switch usw.) zusammenspielt.
Auf Android6-Fully kann ich das bestätigen - es geht wieder - DANKE!
Moin...
ich bestätige auch, das es wieder funktioniert (Android und Crome)
Vielen Dank für das schnelle fix :-)
Gollum
Auf iOS läuft es auch wieder
Gesendet von iPhone mit Tapatalk
Hallo,
ich habe das selbe Problem bei einem button, der ein popup öffnet.
Und bei einem switch, der das popup wieder schließt.
Kann das auch noch behoben werden?
guter Punkt ...
Wenn man mit preventDefault(); arbeitet, gibt es kein Click-Event mehr.
Habe ich jetzt nachgereicht.
Siehe Beispiel hier:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/test_popup.html
Hi,
am iPhone mit iOS 10 wird im Hochformat das Icon vom Circle Menü nicht dargestellt. Somit kann ich nicht schalten.
Im Querformat funktioniert es.
am iPad mit iOS 10 funktioniert alles Bestens!
An was kann dies liegen?
Da reicht der Platz vllt. nicht aus. Geht es, wenn man auf einer neuen Seite nur eine Circlemenu nimmt ohne Drumherum?
Nein, das funktioniert auch nicht.
Es fehlt das Symbol in der Mitte, auf das man klickt, dass das Menü aufgeht.
Ich hänge mal ein Bild an
Strange
Keine Ahnung ...
Wenn ich mal groß bin und ein iPhone 7 besitze, kann ich das ja mal checken ;)
Also beim iPhone 6 ist es so!
iPhone 4 mit iOS 7 gehts.
iPhone 5C mit iOS 10 gehts auch nicht. Aber da sieht man wo die Icons hin verschwunden sind. Ich häng dir dir das Foto wieder an
Im Code des Circlemenu darf es kein class="menu" und braucht es kein class="circlemenu" geben.
Ist das vllt. die Ursache?
hab ich entfernt. aber leider keine Besserung. Hier meine Config
<div data-type="circlemenu" data-direction="horizontal">
<ul class="menu">
<li><div data-type="push" data-icon="fa-windows"></div></li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 100"
data-icon="">100</div></li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 80"
data-icon="">80</div></li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 60"
data-icon="">60</div></li>
<li><div data-type="push" data-device="WzFenster"
data-set-on="position 40"
data-icon="">40</div></li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 20"
data-icon="">20</div></li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 0"
data-icon="">0</div></li>
</ul>
</div>
<div data-type="label" class="cell">WZFenster</div>
<ul class="menu"> :(
<div data-type="circlemenu" data-direction="horizontal"> :(
Super tolle Kommentare, aber hilft mir auch nicht
Zitat von: miche am 19 Oktober 2016, 20:36:31
Super tolle Kommentare, aber hilft mir auch nicht
Ich denke der Kommentar von Gollum2 bezieht sich darauf, dass setstate beschrieben hat, dass kein class="menu" im circlemenu vorkommen darf, in Deinem Code dies aber enthalten ist?
Generell ist die Vermutung, dass im Falle dass es bei einer Ausrichtung geht und bei anderer Ausrichtung nicht, vielleicht wirklich irgendwo PLatz fehlt oder spezielle Formatierungen nicht passen.
Sorry Miche,
wenn das falsch rübergekommen ist...
Wie setstate schon schrieb, bitte mal in dieser Zeile das "menu" entfernen :
<ul class="menu">
<ul class="">
Ansonsten glaube ich auch an "Platzprobleme".
Gruß
Gollum
Versuch mal den Code in Deiner Test Box:
<div class="container left inline">
<div data-type="circlemenu" data-direction="horizontal">
<ul class="cell">
<li><div data-type="push" data-icon="fa-windows"></div></li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 100"
data-icon="">100</div>
</li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 80"
data-icon="">80</div>
</li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 60"
data-icon="">60</div>
</li>
<li><div data-type="push" data-device="WzFenster"
data-set-on="position 40"
data-icon="">40</div>
</li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 20"
data-icon="">20</div>
</li>
<li><div data-type="push" data-device="WZFenster"
data-set-on="position 0"
data-icon="">0</div>
</li>
</ul>
</div>
<div data-type="label" class="cell">WZFenster</div>
</div>
Ich hab mein Menu mal auf horizontal umgestellt....und es geht beim iPhone 6 mit IOS 10.
Unterschied im Code:
Ich packe Elemente immer in Container
Ich habe kein "menu" in class stehen.
also bei class hab ich das Menü mal entfernt.
Jetzt schaut es gut aus. Ich glaub ich muss noch mehr lesen, warum dies so ist. Ich hab die Konfiguration nur aus einem Beispiel kopiert.
Warum machst du das in einem Container? Was hat dies für Vorteile?
....weil ich immer wieder Probleme mit der Positionierung und Ausrichtung der Elemente auf dem Grid hatte.
So funktioniert es bei mir besser.
Ist aber kein MUSS für Dich :-)
ALso ich kann nur für mich sprechen, aber es funktioniert auf allen Geräten gut. Darum poste ich mal meine Variante hier:<div class="inline">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push"
data-icon="fa-play-circle"></div></li>
<li><div data-type="push"
data-device="SZ_XBMC"
data-set="play all"
data-icon="fa-play"></div></li>
<li><div data-type="push"
data-device="SZ_XBMC"
data-set="pause all"
data-icon="fa-pause"></div></li>
<li><div data-type="push"
data-device="SZ_XBMC"
data-set="next all"
data-icon="fa-step-forward"></div></li>
<li><div data-type="push"
data-device="SZ_XBMC"
data-set="prev all"
data-icon="fa-step-backward"></div></li>
<li><div data-type="push"
data-device="SZ_XBMC"
data-set="stop all"
data-icon="fa-stop">
</div></li>
</ul>
</div>
<div data-type="label" class="cell"> Play-Menü
</div>
</div>
Ich hole den Thread mal wieder nach oben ....
Ich habe gestern ein Paar Pagebuttons zu Circlemenus umgebaut - funktionieren auf dem PC einwandfrei - die mir allerdings auf meinem Android Tablet Probleme bereiten.
Die Menüs gehen zwar auf, aber bei einem Click auf einen Button nicht automatisch zu !? Hier mal der Code, vielleicht hat jemand 'ne Idee ...
<div class="big noshade"
data-type="circlemenu"
data-transition="none"
data-border="square"
data-circle-radius="78"
data-direction="horizontal">
<ul>
<li><div data-type="pagebutton"
data-url=""
data-load=""
data-active-pattern="(.*#pageRooms.*.html)"
data-icon="fa-home"
data-on-color="Linen"
data-on-background-color="Transparent"
data-off-color="DimGray"
data-off-background-color="Transparent"></div></li>
<li><div data-type="pagebutton"
data-url="#pageRooms0.html"
data-load="#pageRooms0"
data-active-pattern="(.*#pageRooms0.*.html)"
data-icon="fs-rc_0"
data-on-color="Linen"
data-on-background-color="Transparent"
data-off-color="DimGray"
data-off-background-color="Transparent"></div></li>
<li><div data-type="pagebutton"
data-url="#pageRooms1.html"
data-load="#pageRooms1"
data-active-pattern="(.*#pageRooms1.*.html)"
data-icon="fs-rc_1"
data-on-color="Linen"
data-on-background-color="Transparent"
data-off-color="DimGray"
data-off-background-color="Transparent"></div></li>
<li><div data-type="pagebutton"
data-url="#pageRooms2.html"
data-load="#pageRooms2"
data-active-pattern="(.*#pageRooms2.*.html)"
data-icon="fs-rc_2"
data-on-color="Linen"
data-on-background-color="Transparent"
data-off-color="DimGray"
data-off-background-color="Transparent"></div></li>
</ul>
</div>
btw ... kann es sein, daß die Symbolgrößen bei Android und Windows unterschiedlich sind ? Die Icons auf den Pagebuttons werden auf dem Tablet zum Teil rechts abgeschnitten (z.B. beim Icon oa-fts_shutter_40)