Autor Thema: Circlemenu, Menü Position  (Gelesen 2098 mal)

Offline Tweak

  • Full Member
  • ***
  • Beiträge: 156
Circlemenu, Menü Position
« 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!

Offline Tweak

  • Full Member
  • ***
  • Beiträge: 156
Antw:Circlemenu, Menü Position
« Antwort #1 am: 13 Januar 2017, 11:02:26 »
Niemand eine Idee ?

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3759
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Circlemenu, Menü Position
« Antwort #2 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.

Offline Tweak

  • Full Member
  • ***
  • Beiträge: 156
Antw:Circlemenu, Menü Position
« Antwort #3 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>

Offline Tweak

  • Full Member
  • ***
  • Beiträge: 156
Antw:Circlemenu, Menü Position
« Antwort #4 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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3759
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Circlemenu, Menü Position
« Antwort #5 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>

Offline Tweak

  • Full Member
  • ***
  • Beiträge: 156
Antw:Circlemenu, Menü Position
« Antwort #6 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
« Letzte Änderung: 14 Januar 2017, 19:06:22 von Tweak »

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3759
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Circlemenu, Menü Position
« Antwort #7 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?

Offline grossmaggul

  • Full Member
  • ***
  • Beiträge: 211
    • Mein Blog
Antw:Circlemenu, Menü Position
« Antwort #8 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.
FHEM auf Debian Server, 2 x nanoCUL868,Homematic,MAX,MiLight,HUE

Offline Tweak

  • Full Member
  • ***
  • Beiträge: 156
Antw:Circlemenu, Menü Position
« Antwort #9 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.

Offline yellowpinky

  • Jr. Member
  • **
  • Beiträge: 76
Antw:Circlemenu, Menü Position
« Antwort #10 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>

Offline grossmaggul

  • Full Member
  • ***
  • Beiträge: 211
    • Mein Blog
Antw:Circlemenu, Menü Position
« Antwort #11 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?
FHEM auf Debian Server, 2 x nanoCUL868,Homematic,MAX,MiLight,HUE

Offline CoZimO

  • New Member
  • *
  • Beiträge: 14
Antw:Circlemenu, Menü Position
« Antwort #12 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>


Offline yersinia

  • Jr. Member
  • **
  • Beiträge: 51
Antw:Circlemenu, Menü Position
« Antwort #13 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.
viele Grüße, yersinia
----
FHEM 5.8 on RPi 3B with Raspian Jessie (perl 5.20.2-3+deb8u11) | FTUI
nanoCUL@a-culfw -> 2x 868 (1x via ser2net) | 1x 433
VCCU -> 7x HM-CC-RT-DN | 5x HM-LC-Bl1PBU-FM | 14x HM-SEC-SCo | 1x HM-PB-2-WM55 | 1x HM-LC-Sw1PBU-FM | 1x HM-ES-PMSw1-Pl

Offline CoZimO

  • New Member
  • *
  • Beiträge: 14
Antw:Circlemenu, Menü Position
« Antwort #14 am: 03 August 2018, 11:47:11 »
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>

Offline yersinia

  • Jr. Member
  • **
  • Beiträge: 51
Antw:Circlemenu, Menü Position
« Antwort #15 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.
viele Grüße, yersinia
----
FHEM 5.8 on RPi 3B with Raspian Jessie (perl 5.20.2-3+deb8u11) | FTUI
nanoCUL@a-culfw -> 2x 868 (1x via ser2net) | 1x 433
VCCU -> 7x HM-CC-RT-DN | 5x HM-LC-Bl1PBU-FM | 14x HM-SEC-SCo | 1x HM-PB-2-WM55 | 1x HM-LC-Sw1PBU-FM | 1x HM-ES-PMSw1-Pl

Offline CoZimO

  • New Member
  • *
  • Beiträge: 14
Antw:Circlemenu, Menü Position
« Antwort #16 am: 03 August 2018, 13:43:29 »
Der Button ist nur kleiner geworden, die Position hat sich dadurch aber nicht geändert.

Offline yersinia

  • Jr. Member
  • **
  • Beiträge: 51
Antw:Circlemenu, Menü Position
« Antwort #17 am: 03 August 2018, 14:08:50 »
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 5.8 on RPi 3B with Raspian Jessie (perl 5.20.2-3+deb8u11) | FTUI
nanoCUL@a-culfw -> 2x 868 (1x via ser2net) | 1x 433
VCCU -> 7x HM-CC-RT-DN | 5x HM-LC-Bl1PBU-FM | 14x HM-SEC-SCo | 1x HM-PB-2-WM55 | 1x HM-LC-Sw1PBU-FM | 1x HM-ES-PMSw1-Pl

Offline CoZimO

  • New Member
  • *
  • Beiträge: 14
Antw:Circlemenu, Menü Position
« Antwort #18 am: 03 August 2018, 14:21:49 »

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>

Offline mani

  • Full Member
  • ***
  • Beiträge: 170
Antw:Circlemenu, Menü Position
« Antwort #19 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
RasPi B+,Onkyo_AVR,Luxtronik2,Logo7,Mpd,Arduino Uno mit Ethernet,KNX,Jablotron

Offline CoZimO

  • New Member
  • *
  • Beiträge: 14
Antw:Circlemenu, Menü Position
« Antwort #20 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.