Circlemenu, Menü Position

Begonnen von Tweak, 08 Januar 2017, 16:17:45

Vorheriges Thema - Nächstes Thema

Tweak

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!

Tweak


setstate


<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.

Tweak

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>

Tweak

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

setstate

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>

Tweak

#6
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

setstate

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?

grossmaggul

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.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

Tweak

Auch wenn ich die Custom CSS deaktiviere wird das Problem nicht besser :-(

Keine Ahnung was ich hier falsch mache.

yellowpinky

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>

grossmaggul

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?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

CoZimO

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>



yersinia

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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

CoZimO

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>

yersinia

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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

CoZimO

Der Button ist nur kleiner geworden, die Position hat sich dadurch aber nicht geändert.

yersinia

hast du mal im wiki nachgeschaut? -> 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)
<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?
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

CoZimO

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)
<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>

mani

Hallo weiß hier jemand ob eine Möglichkeit gibt das Circlemenü immer in der Mitte der HTML anzeigen zu lassen?

MFG Mani
RasPi B+,Onkyo_AVR,Luxtronik2,Logo7,Mpd,Arduino Uno mit Ethernet,KNX,Jablotron

CoZimO

Oder Vielleicht Horizontal - Links? :) Es Öffnet leider nur nach rechts. Vielleicht gibt es da ja ne Lösung.

mani

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
RasPi B+,Onkyo_AVR,Luxtronik2,Logo7,Mpd,Arduino Uno mit Ethernet,KNX,Jablotron