FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Tweak am 08 Januar 2017, 16:17:45

Titel: Circlemenu, Menü Position
Beitrag von: Tweak am 08 Januar 2017, 16:17:45
Hallo,
als absoluter Neuling in Sachen CSS und HTML benötige ich ein wenig eure Hilfe, ich schaffe es einfach nicht, dass das Circlemenu richtig bei mir angezeigt wird.

Ich habe immer das Problem, das wenn der Button für das Menu zentriert ist, das Menü am oberen Ende des Fensters angezeigt wird und nicht bedienbar ist. Wenn ich nun ul class="menu" hinzufüge, passt zwar die Anzeige des Menüs um den Button herum, jedoch verliert der Button seine Zentrierung.

Wäre super wenn mir wer helfen könnte!

Hier der Code:

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li>
<div data-type="push"
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-icon="oa-control_building_modern_s_okg_all"
data-background-icon="fa-circle-thin">
</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="Wohnzimmer.html" data-icon="oa-scene_livingroom"</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="Schlafzimmer.html" data-icon="fa-bed"></div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="Bad.html" data-icon="oa-scene_bathroom"></div>
</li>
</ul>
</div>


Achja das FTUI basierd auf der Vorlage von h3llsp4wn. Danke dafür!
Titel: Antw:Circlemenu, Menü Position
Beitrag von: Tweak am 13 Januar 2017, 11:02:26
Niemand eine Idee ?
Titel: Antw:Circlemenu, Menü Position
Beitrag von: setstate am 13 Januar 2017, 12:13:35

<ul class="menu">


Ist eh ganz falsch. Nur <ul> reicht.

Wenn du nach Zentrierung fragst, ist es wichtig, dass du die Parent-DIVs mit postest. Am besten hinauf bis zum nächsten Gridster <li>. Dann kann man das in ein index_empty.html rein kopieren und selbst testen.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: Tweak am 13 Januar 2017, 19:18:52
Danke für den Hinweis,

die ul class habe ich bereits entfernen versucht, jedoch brachte mich das auch nicht weiter.

Hier mal der gewünschte Code:

<div data-type="pagetab"
data-url="PT_index_home.html"
data-on-color="#E6FF57"
  data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
  data-icon="fa-home"
  data-background-icon="fa-circle-thin"
  class="cell" >
</div>
<div data-type="label" class="narrow darker">Home</div>

<div data-type="pagetab"
data-url="PT_index_wetter.html"
data-icon="fa-cloud"
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
data-background-icon="fa-circle-thin"
class="cell">
</div>
<div data-type="label" class="narrow darker">Wetter</div>

<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li>
<div data-type="push"
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-icon="oa-control_building_modern_s_okg_all"
data-background-icon="fa-circle-thin">
</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="PT_index_R_Wohnzimmer.html" data-icon="oa-scene_livingroom"</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="PT_index_R_Schlafzimmer.html" data-icon="fa-bed"></div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="PT_index_R_Bad.html" data-icon="oa-scene_bathroom"></div>
</li>
</ul>
</div>
<div data-type="label" class="narrow darker">Heizung</div>

<div data-type="pagetab"
data-url="PT_index_heizung.html"
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
data-background-icon="fa-circle-thin"
data-icon="fa-fire"
class="cell small top-space" >
</div>
<div data-type="label" class="narrow darker">Heizung</div>

<div data-type="pagetab"
data-url="PT_index_server.html"
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
data-background-icon="fa-circle-thin"
data-icon="fa-server"
class="cell small top-space" >
</div>
<div data-type="label" class="narrow darker">System</div>
Titel: Antw:Circlemenu, Menü Position
Beitrag von: Tweak am 14 Januar 2017, 13:45:04
So hab nun im ul die class menu entfernt,
jetzt passt die Position des Icons, jedoch erscheint das Menü in der linken oberen Ecke, so das eine Menü Position nicht sichtbar ist und alle sich nicht bedienen lassen ;(

Vl. hilft das zur Fehlereingrenzung weiter.

mfg
Titel: Antw:Circlemenu, Menü Position
Beitrag von: setstate am 14 Januar 2017, 15:52:35
Fehler sehe und habe ich nicht mit diesem Code bei mir. Nur die Circle-Menu Buttons würde ich rechts ausklappen lassen. -> data-direction="right"


<div data-type="circlemenu" data-direction="right" class="cell keepopen">
<ul>
<li>
<div data-type="push"
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-icon="fa-bed"
data-background-icon="fa-circle-thin">
</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="#" data-icon="fa-bed"</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="#" data-icon="fa-bed"></div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="#" data-icon="fa-bed"></div>
</li>
</ul>
</div>
Titel: Antw:Circlemenu, Menü Position
Beitrag von: Tweak am 14 Januar 2017, 18:52:46
Ok,
Das Versuche ich.
Könnte es eventuell auch an einem CSS Eintrag liegen?

Oder daran das ich bei mir die widget_base_height und width geändert habe?

Mfg
Titel: Antw:Circlemenu, Menü Position
Beitrag von: setstate am 14 Januar 2017, 19:07:17
Das kann durchaus passieren, wenn du neben der Standard CSS noch eine User CSS eingebunden hast. Lasse diese testweise mal weg. Oder gibt es im HTML selbst im Header noch CSS Style Tags?
Titel: Antw:Circlemenu, Menü Position
Beitrag von: grossmaggul am 14 Januar 2017, 19:13:42
Ich klemme mich gerade mal dazwischen, gibt es eine Möglichkeit, daß nach Anwahl einer der Circlemenüpunkte, das Hauptcirclemenü-Icon aktiviert bleibt?
Bei mir geht das immer aus und man kann nicht sehen, daß die gerade geladene Seite zum entsprechenden Menüpunkt gehört.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: Tweak am 14 Januar 2017, 23:11:18
Auch wenn ich die Custom CSS deaktiviere wird das Problem nicht besser :-(

Keine Ahnung was ich hier falsch mache.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: yellowpinky am 23 Januar 2017, 00:24:25
Hallo;

Habe das selbe Problem, dass ich das Circlemenu nicht richtig positionieren kann.
Hat aber schon mal funkioniert. Ich kann nicht sagen warum es auf einmal nicht mehr geht... vielleicht durch ein Update passiert?
Habe mittlerweile auch schon einiges versucht (und auch den Code geändert). Das Öffnen des menüs passiert anscheinend immer von ganz oben links.
Das Icon zum Öffnen des Menüs ist zwar in der richtigen Höhe aber eben auch ganz links und nicht zentriert.
Die Circlemenu Beschriftung wir hingegen wieder richtig positioniert/zentriert.


<li data-row="1" data-col="4" data-sizex="2" data-sizey="2">
        <header>Einfahrt</header>
         
         <div data-type="switch" class="cell" data-device="A_Eingangstor" data-icon="fa-male" data-set-on="on-for-timer 1" class="cell" ></div>
         <div data-type="label" class="cell">Eingangstor</div>
         <div data-type="switch" class="cell" data-device="A_Einfahrtstor" data-icon="fa-truck" data-set-on="on-for-timer 1" class="cell" ></div>
         <div data-type="label" class="cell">Einfahrtstor</div>
         
         <div class="container">
         <div data-type="circlemenu" class="cell" data-circle-radius="50" data-direction="vertical">
             <ul>
                <li><div data-type="symbol" data-device="A_Garagentor_Status" data-get-on='open' data-get-off='closed' data-on-color='#a90000' data-off-color='#00a900' data-off-background-color='#a90000' data-icon="fa-car"></div></li>
                <li><div data-type="push" data-device="A_GaragentorAuf" data-set-on="on-for-timer 1" data-icon="">auf</div></li>
                <li><div data-type="push" data-device="A_GaragentorZu" data-set-on="on-for-timer 1" data-icon="">ab</div></li>
             </ul>
             <div>Garagentor</div>
          </div>
     
</li>
Titel: Antw:Circlemenu, Menü Position
Beitrag von: grossmaggul am 23 Januar 2017, 10:04:29
Wenn ich das richtig sehe, fehlt da ein abschließendes </div> für <div class="container">

Ich habe den Code bei mir mal ausprobiert, funktioniert aber eigentlich wie er soll, möglicherweise hast Du irgendwo anders noch einen Typo?
Titel: Antw:Circlemenu, Menü Position
Beitrag von: CoZimO am 03 August 2018, 09:36:24
Ich weiß der der Thread hier hat schon nen Bart, aber vielleicht kann mir ja dennoch jemand Helfen.

Ich habe das Problem, dass der Circle Menü Button bei mir Verschoben ist. Funktionieren tut alles, nur bekomme ich ihn nicht Zentriert und auch nicht Vollständig angezeigt.

Leider fehlt mir da noch der Durchblick. Und ich Hoffe auf ein wenig Hilfe :)

Ich Hänge mal den Kompletten Code hier an, vielleicht kann mir ja jemand sagen, wo der Fehler Begraben liegt.

<header style="border-top-left-radius:8px;border-top-right-radius:8px;">Men&uuml;</header>

<!-- ========= Wohnzimmer ==================== -->
<div data-type="pagetab"
data-url="PT_index_R_Wohnzimmer.html"
data-on-color="#808080"
        data-off-color="##E6FF57"
data-on-background-color="#808080"
data-off-background-color="#808080"
        data-icon="oa-scene_livingroom"
        data-background-icon="fa-circle-thin"
        class="cell large top-space">
</div>
<div data-type="label" class="narrow">Wohnzimmer</div>

<!-- ========= Schlafzimmer ==================== -->
<div data-type="pagetab"
data-url="PT_index_R_Schlafzimmer.html"
data-on-color="#808080"
        data-off-color="##E6FF57"
data-on-background-color="#808080"
data-off-background-color="#808080"
        data-icon="oa-scene_making_love"
        data-background-icon="fa-circle-thin"
        class="cell large top-space">
</div>
<div data-type="label" class="narrow">Schlafzimmer</div>

<!-- ========= Kinderzimmer ==================== -->
<div data-type="circlemenu" class="cell keepopen" data-direction="left-half" data-circle-radius="90">
<ul>
<li>
<div data-type="push"
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-icon="fa-bed"
data-background-icon="fa-circle-thin"
class="cell large top-space">
</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="XXX" data-icon="fa-bed"</div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="XXX" data-icon="fa-bed"></div>
</li>
<li>
<div data-type="pagetab" data-on-color="#E6FF57" data-url="XXX" data-icon="fa-bed"></div>
</li>
</ul>
</div>

<!-- ========= Esszimmer ==================== -->
<div data-type="pagetab"
data-url="PT_index_R_Buero.html"
data-on-color="#808080"
        data-off-color="##E6FF57"
data-on-background-color="#808080"
data-off-background-color="#808080"
        data-icon="oa-scene_office"
        data-background-icon="fa-circle-thin"
        class="cell large top-space">
</div>
<div data-type="label" class="narrow">Büro</div>

<!-- ========= Küche ==================== -->
<div data-type="pagetab"
data-url="PT_index_R_Kueche.html"
data-on-color="#808080"
        data-off-color="##E6FF57"
data-on-background-color="#808080"
data-off-background-color="#808080"
        data-icon="oa-scene_cooking"
        data-background-icon="fa-circle-thin"
        class="cell large top-space">
</div>
<div data-type="label" class="narrow">Küche</div>

<!-- ========= Bad ==================== -->
<div data-type="pagetab"
data-url="PT_index_R_Bad.html"
data-on-color="#808080"
        data-off-color="##E6FF57"
data-on-background-color="#808080"
data-off-background-color="#808080"
data-icon="oa-scene_bathroom"
data-background-icon="fa-circle-thin"
class="cell large top-space">
</div>
<div data-type="label" class="narrow">Bad</div>

<!-- ========= Flur ==================== -->
<div data-type="pagetab"
data-url="PT_index_R_Flur.html"
data-on-color="#808080"
        data-off-color="##E6FF57"
data-on-background-color="#808080"
data-off-background-color="#808080"
data-background-icon="fa-circle-thin"
data-icon="oa-scene_hall"
class="cell large top-space">
</div>
<div data-type="label" class="narrow">Flur</div>


Titel: Antw:Circlemenu, Menü Position
Beitrag von: yersinia am 03 August 2018, 11:18:30
Hi CoZimO,

mir ist folgendes aufgefallen, vielleicht hilft es dir - kann es sein, dass cell large topspace im class dies verursachen?
<div data-type="push"
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-icon="fa-bed"
data-background-icon="fa-circle-thin"
class="cell large top-space"> <!-- <==== HIER -->
</div>

Wie sieht es aus wenn du es wegnimmst oder aus dem large mal ein small machst?

Du hast dann auch eine cell in einer cell (durch data-type="circlemenu" class="cell keepopen").

Achja, wenn du nur Text anzeigst, brauchst du kein widget_label:
<div data-type="label" class="narrow">Schlafzimmer</div>
=>
<div class="narrow">Schlafzimmer</div>
Sollte reichen. Verkürzt Initialisierungszeiten.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: CoZimO am 03 August 2018, 11:47:11
Zitat von: yersinia am 03 August 2018, 11:18:30
kann es sein, dass cell large topspace im class dies verursachen?
<div data-type="push"
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-icon="fa-bed"
data-background-icon="fa-circle-thin"
class="cell large top-space"> <!-- <==== HIER -->
</div>


Hallo yersinia,

Ich hab jetzt mal einen anderen Code benutzt, mit dem ich wenigstens schon mal des Icon sehe. Leider verschiebt es sich aber immer noch.
Das entfernen von class="cell large top-space" führte leider nicht zum erfolg.


  <div data-type="circlemenu" class="cell large top-space" data-direction="left-half" data-circle-radius="80">
    <ul>
      <li><div data-type="symbol" data-on-color="#808080" data-off-color="##E6FF57" data-on-background-color="#808080" data-icon="fa-bed" data-background-icon="fa-circle-thin"></div></li>
      <li><div data-type="pagetab" data-on-color="#E6FF57" data-url="XXXl" data-icon="fa-bed"</div></li>
      <li><div data-type="pagetab" data-on-color="#E6FF57" data-url="XXX" data-icon="fa-bed"</div></li>
  <li><div data-type="pagetab" data-on-color="#E6FF57" data-url="XXX" data-icon="fa-bed"</div></li>
    </ul>
  </div>
<div class="narrow">Kinderzimmer</div>
Titel: Antw:Circlemenu, Menü Position
Beitrag von: yersinia am 03 August 2018, 13:39:21
wie sieht es aus wenn du
<div data-type="circlemenu" class="cell large top-space" data-direction="left-half" data-circle-radius="80">
mal nach
<div data-type="circlemenu" class="cell" data-direction="left-half" data-circle-radius="80">
änderst?

Es ist kurios, dass die cell hier so rausfällt.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: CoZimO am 03 August 2018, 13:43:29
Der Button ist nur kleiner geworden, die Position hat sich dadurch aber nicht geändert.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: yersinia am 03 August 2018, 14:08:50
hast du mal im wiki nachgeschaut? -> https://wiki.fhem.de/wiki/FTUI_Widget_Circlemenu (https://wiki.fhem.de/wiki/FTUI_Widget_Circlemenu)

class="keepopen" wird nur auf dem widget gesetzt.

möglicherweise brauchst du ein div für das cell und dann erst das widget; ungefähr so:
<div class="cell">
     <div data-type="circlemenu" class="">
       [..]
     </div>
</div>


ggf das circlemenu einrücken (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen))
<div class="cell">
     <div data-type="circlemenu" class="top-narrow-2x left-narrow-2x compressed">
       [..]
     </div>
</div>


Was ich beim FTUI auch beobachtet habe ist das wenn das symbol widget fehler hat, dass es dann unschön positioniert ist.
<li><div data-type="symbol" data-on-color="#808080" data-off-color="##E6FF57" data-on-background-color="#808080" data-icon="fa-bed" data-background-icon="fa-circle-thin"></div></li>
Laut Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Symbol#Attribute) fehlt das Attribut data-get, oder?
Denn laut deinem Code nutzt dies nur um das Icon anzuzeigen, oder?
Titel: Antw:Circlemenu, Menü Position
Beitrag von: CoZimO am 03 August 2018, 14:21:49
Zitat von: yersinia am 03 August 2018, 14:08:50

ggf das circlemenu einrücken (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen))
<div class="cell">
     <div data-type="circlemenu" class="top-narrow-2x left-narrow-2x compressed">
       [..]
     </div>
</div>


Das war es, vielen Dank =)

<!-- ========= Kinderzimmer ==================== -->

<div class="cell large">
     <div data-type="circlemenu" class="top-narrow-1x left-narrow-4x compressed" data-direction="left-half" data-circle-radius="90">
        <ul>
      <li><div data-type="symbol" data-on-color="#808080" data-off-color="##E6FF57" data-on-background-color="#808080" data-off-background-color="#808080" data-icon="fa-bed" data-background-icon="fa-circle-thin" data-url="PT_index_R_Kinderzimmer.html"</div></li>
      <li><div data-type="pagetab" data-on-color="#808080" data-off-color="##E6FF57" data-on-background-color="#808080" data-off-background-color="#808080" data-icon="fa-bed" data-background-icon="fa-circle-thin" data-url="PT_index_R_Kinderzimmer.html"</div></li>
      <li><div data-type="pagetab" data-on-color="#808080" data-off-color="##E6FF57" data-on-background-color="#808080" data-off-background-color="#808080" data-icon="fa-bed" data-background-icon="fa-circle-thin" data-url="PT_index_R_Kinderzimmer.html"</div></li>
  <li><div data-type="pagetab" data-on-color="#808080" data-off-color="##E6FF57" data-on-background-color="#808080" data-off-background-color="#808080" data-icon="fa-bed" data-background-icon="fa-circle-thin" data-url="PT_index_R_Kinderzimmer.html"</div></li>
    </ul>
     </div>
</div>

<div class="narrow">Kinderzimmer</div>
Titel: Antw:Circlemenu, Menü Position
Beitrag von: mani am 13 August 2018, 20:54:49
Hallo weiß hier jemand ob eine Möglichkeit gibt das Circlemenü immer in der Mitte der HTML anzeigen zu lassen?

MFG Mani
Titel: Antw:Circlemenu, Menü Position
Beitrag von: CoZimO am 13 August 2018, 20:58:02
Oder Vielleicht Horizontal - Links? :) Es Öffnet leider nur nach rechts. Vielleicht gibt es da ja ne Lösung.
Titel: Antw:Circlemenu, Menü Position
Beitrag von: mani am 03 Februar 2020, 17:07:15
Hallo,

habe ein Circlemenu in ein Popup eingebunden un möchte nun das sich das Circlemenu automatisch mit dem popup öffnet hat ja jemand einen Lösungsvorschlag?

<div class="hbox items-space-between"><i class="oa-sani_boiler_temp large icon-width"></i>
                <div class="grow-7 left-align">
                <div class="large thin">K&uuml;che</div>
                <div data-type="label" class="large left-align"></div>
                </div>
                <div data-type="popup" data-width="230px" data-height="230px" >
                <div data-type="symbol"  data-device="KNX_Baos" data-get="getG4"
                data-states= '["[0-9] %","1[0-9] %","2[0-9] %","3[0-9] %","4[0-9] %","5[0-9] %","6[0-9] %","7[0-9] %","8[0-9] %","9[0-9] %","100 %"]'
                data-icons='["oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_50", "oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts__shutter_90","oa-fts_shutter_100"]'
                data-colors='["green","#6495ED","#6495ED","#6495ED","#6495ED","#6495ED","#6495ED","#6495ED","#6495ED","yellow","green"]'></div>
                <div class="dialog">
                <div class="card halbTransparent">
                <div data-type="circlemenu" class="keepopen noshade top-space-6x">
                <ul>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="Stop" data-icon="oa-audio_stop" data-off-color="red" data-on-color="red"></div></li>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 100 g3" data-icon="fa-angle-down" data-off-color="green"data-on-color="green"></div></li>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 89 g3" data-icon=""onclick="$('.dialog-close').trigger('click');"><FONT SIZE=3>89%</FONT></div></li>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 74 g3" data-icon=""><FONT SIZE=3>74%</FONT></div></li>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 50 g3" data-icon=""><FONT SIZE=3>50%</FONT></div></li>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 39 g3" data-icon=""><FONT SIZE=3>39%</FONT></div></li>
                <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 11 g3" data-icon=""><FONT SIZE=3>11%</FONT></div></li>
  <li><div data-type="push" data-device="KNX_Baos" data-set-on="value 0 g3" data-icon="fa-angle-up" data-off-color="green" data-on-color="green"></div></li>
                </ul></div></div></div></div></div>





danke für hilfe

mfg Mani