New FHEM Tablet UI

nesges · 01 April 2015, 00:42:52

Zitat von: setstate am 01 April 2015, 00:37:28
Mmmm, schade. Das ist für das notwendige div vor dem ul menu.

Japp, hatte das jetzt schon überschrieben und bei den Menü-divs von Hand eingefügt, funktioniert dann auch (bis auf ein seltsames Positionierungsproblem, das ich grade noch nicht verstehe). Vorschlag für den class-Name: "circlemenu"

Ein zweites Problem: Bei zwei sich überlappenden circleMenus erscheinen die ausgefahrenen Buttons des zweiten unter denen des ersten. <ul class="menu" style="z-index:1000"> behebt's.

Edit: Und sie erscheinen immer unter Widgets die im HTML nach dem Widget, das die circleMenus enthält, notiert worden sind. Egal wie hoch z-index gesetzt wird. Ändert man die Reihenfolge im HTML passt's wieder.

Edit2: Der Screenshot zeigt beide Probleme. Oben ist durch z-index:1000 lösbar, unten links durch Umstellung der HTML Reihenfolge

alex885 · 01 April 2015, 00:43:38

nach meinen Prog-kenntnissen fragt hoffentlich niemand...

dachte dass eben gridster oder ähnliche dynamische Layouts relativ einfach (

) solche Möglichkeiten bieten würden....

setstate · 01 April 2015, 00:46:44

@alex: ich finde deine Ideen auch sehr gut. Ich werde es im Auge behalten ....

alex885 · 01 April 2015, 00:58:21

Einen Vorschlag noch:

Nachdem das Projekt sich so rasant weiterentwickelt...

~35 Forums Seiten bisher

ich fände es richtig es im Forum aufzuteilen in

Entwicklung-fortschritt
Allgemeines (wie dies hier...) / Fragen / Hilfestellung

und dementsprechend auch zu bitten/drängen sich dran zu halten..

and now: good nite, A.

Edith: some

setstate · 01 April 2015, 01:08:19

@nesges: dann kann ich das so fix in der CSS einbauen?

Zeile 164:

Code Auswählen

.menu{
    position:absolute;
    z-index:1000;
}

nesges · 01 April 2015, 01:15:57

z-index:1000 ist leider auch noch nicht des Rätsels Lösung. Das funktioniert zwar für's zweite und dritte, aber dann überdecken diese wiederum das erste. Evtl. muss z-index dynamisch beim Klick auf den Auslösebutton erhöht werden - aber ich mach für heute Feierabend

setstate · 01 April 2015, 01:28:54

ja, besser ist. Nacht ...
~~kannst mir ja mal den Teil HTML Code per direkter Mitteilung schicken, zum vor Ort Testen für mich~~
Edit: ich kann es bei mir nachstellen, einfach zweimal circlemenu untereinander, dann gibt es Überdeckungen. Ich suche eine Lösung ...

bjoernbo · 01 April 2015, 08:26:25

Genial ....=> New Feature: "circleMenu"

Darüber werde ich meine Kamera steuern! GOIL, GOIL, GOIL

hotwebnet · 01 April 2015, 08:54:20

ja, auch ich sage wieder einmal Danke, was Ihr macht ist echt super..........
Aber auch ich würde Vorschlagen, alles neue im Ersten Beitrag immer auf dem neusten Stand zu halten, wir bekommen sonnst bei dieser Geschwindigheit nicht alles mit und das wäre schlecht.......Danke

Habe ein Tablet mit 1366 x 786 (Volkstablet) auf diesem tablet sind die Container sowie die Schalter ein wenig klein (ich sehe halt nicht mehr so gut

, kann ich das alles auch ein wenig größer darstellen, habe einmal etwas gelesen von Add 'big' or 'bigger' gelesen, finde aber keinen Ansatz..........

andreas_r · 01 April 2015, 10:00:02

Hallo zusammen,

auch von meiner Seite ein großes Kompliment für die Arbeit, die ihr hier macht. Meiner Meinung nach die beste Visualisierung, die es derzeit für FHEM gibt.

Ich hätte noch eine kleine Frage dazu: Ist es mit dem verwendeten Gridster Framwork denkbar, das ganze (für die alternative Verwendung mit dem Handy) auch responsive zu gestalten? Ich denke dabei an einen Ansatz wie ihn auch Pinterest oder andere Webseiten verfolgen. Hier werden immer so viele einzelne Kacheln nebeneinander dargestellt, wie sinnvoll auf das Gerät passen.

Beispiel dazu gibts hier (einfach den Browser breiter oder schmaler ziehen, dann sieht man, wie das Design umbricht):
http://media.kulturbanause.de/blog/2014/03/responsive-pinterest-style.html

Viele Grüße,
Andreas

Sky · 01 April 2015, 11:29:11

Hallo Usergmeinschaft ...
ich bin erst seit Anfang des Jahres FHEM-Infiziert , aber schon recht weit gekommen .
Ging los über RSS ,dann FLOORPLAN, dann INFOPANEL und nun zu diesem HAMMERTEIL !!
Ich bewundere diejenigen ,die dies ins Leben gerufen haben und immer noch fleißig betreuen und weiterentwickeln
Man versucht als " normaler" Anwender seine Vorstellungen umzusetzen , ist aber in manchen Punkten auf Hilfe angewiesen und das finde ich hier so großartig , kein böses Wort, kein "such doch selber"
einfach so wie es sein sollte !!!!

Nun aber zu meinem "Problem"
Ich würde gerne ein Webradio in mein UI integriere.
Im FHEM Forum und im Wki gibt es verschiedene Informationen und leider ist der Modul-Autor nicht mehr aktiv, das heißt , ich bekomme es nicht vernünftig zum "laufen" .

Gibt es nicht einen Weg über das UI , zB. einen Button der wiederum die URL des betreffenden Senders aufruft und einfach den Stream abspielt mit den Funktionen zB. PLAY,STOP ?

nesges · 01 April 2015, 12:27:50

Zitat von: Sky am 01 April 2015, 11:29:11
Ich würde gerne ein Webradio in mein UI integriere.
Im FHEM Forum und im Wki gibt es verschiedene Informationen und leider ist der Modul-Autor nicht mehr aktiv, das heißt , ich bekomme es nicht vernünftig zum "laufen" .

Welches Modul meinst du denn?

ZitatGibt es nicht einen Weg über das UI , zB. einen Button der wiederum die URL des betreffenden Senders aufruft und einfach den Stream abspielt mit den Funktionen zB. PLAY,STOP ?

Ich habe grade eine Änderung im button-Widget eingecheckt, holt dir mal die neuste Version von https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_button.js

Code Auswählen

<div data-type="button"
         data-url-xhr="http://webradio/?action=play"></div>

Ruft den URL http://webradio/?action=play (den musst du natürlich anpassen) im Hintergrund auf. Weitere Möglichkeiten sind in https://github.com/nesges/Widgets-for-fhem-tablet-ui/#button dokumentiert.

nesges · 01 April 2015, 12:55:05

Zitat von: nesges am 01 April 2015, 01:15:57
z-index:1000 ist leider auch noch nicht des Rätsels Lösung. Das funktioniert zwar für's zweite und dritte, aber dann überdecken diese wiederum das erste. Evtl. muss z-index dynamisch beim Klick auf den Auslösebutton erhöht werden - aber ich mach für heute Feierabend

So funktioniert's:

Code Auswählen

.menu {
    position:absolute    
}
.circleMenu-closed {
    z-index:1000 !important;
}
.circleMenu-open {
    z-index:1001 !important;
}

https://github.com/knowthelist/fhem-tablet-ui/pull/30

Sky · 01 April 2015, 13:21:23

Hallo ,
Danke für die schnelle Antwort .
Ich meinte folgendes Modul
http://www.fhemwiki.de/wiki/Modul_StreamRadio_Einrichtungshilfe
und der Thread aus :
http://forum.fhem.de/index.php?topic=18531.0

Werde heute haben mal Deinen Vorschlag versuchen

nesges · 01 April 2015, 13:59:03

Das circleMenu mit einem push-Widget als zentralem Button funktioniert im moment nur am Desktop, nicht aber auf mobilen Geräten (getestet mit iOS Safari+Chrome und Android Chrome, Firefox und Webviewcontrol). Grund dafür ist, dass famultibutton das Click-Event nicht durchreicht (Aufruf von e.preventDefault() in den Modus push und toggle). Oder kann jemand gegenteiliges berichten?

Workarround: symbol-Widget benutzen. Es hat zwar keinen Hintergrund und ist daher mMn nicht so chick, aber es funktioniert erstmal, bis eine bessere Lösung da ist.