Hauptmenü

Update 2.7.2.

Begonnen von setstate, 01 September 2018, 00:24:54

Vorheriges Thema - Nächstes Thema

setstate

Zitat von: Eisix am 03 September 2018, 08:51:58

da es bei allen ist vermute ich es liegt an deiner Korrektur.


habe ich jetzt etwas optimiert


<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>
 
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="green" data-off-background-color="green" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>

<div data-type="button" data-icon="fa-cloud" data-on-background-color="blue" data-off-background-color="blue" class=""></div>

<div data-type="button"  data-on-background-color="red" data-off-background-color="red" class=""></div>

<div data-type="switch"  data-on-background-color="yellow" data-off-background-color="yellow" class=""></div>

Eisix

Danke, teste morgen früh.

Gruß
Eisix

Eisix

Hallo setstate,

der Versatz bei den Icons ist immer noch. Er kommt aber vom background Icon. (siehe screenshot mit dem Rahmen).

Beim widget Graph und Homestatus habe ich noch die boxen anstatt der Icons. Invert anzuhängen hat bei Homestatus nichts gebracht und bei Graph habe ich keine Möglichkeit.

Gruß
Eisix

moonsorrox

Den Versatz der Icons kann ich bestätigen, bei mir sieht es so aus als wenn bei meinen "Square-o" Icons der Bachground nach unten rutscht und die chevron-up und down teile gleich bleiben. Damit sind sie also nicht mehr zentriert sondern so als wenn sie hoch rutschen. Auch bei mir hat invert nichts gebracht.
Wenn gewünscht hänge ich auch Screenshots ran, sollte aber bei meinem ersten Screenshot zu erkennen sein.
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

setstate

Nur zur Info: invert ändert nichts an der Lage. Nur bei manchen Icons (siehe Fontawesome Webpage) gibt es zwei Varianten: normal und invertiert (wie beim Post#1: Uhr schwarze Zeiger / weiße Zeiger)

Zur Positionierung vom Hintergrund: schaue ich mir heute Abend an. Gut wäre eurer Code mit vielleicht 1-2 Parent-div drum herum, um zu sehen, ob die Verschiebung nur bei bestimmten Container-Konstellationen auftritt.

moonsorrox

#20
Zitat von: setstate am 04 September 2018, 10:16:10
Nur zur Info: invert ändert nichts an der Lage. Nur bei manchen Icons (siehe Fontawesome Webpage) gibt es zwei Varianten: normal und invertiert (wie beim Post#1: Uhr schwarze Zeiger / weiße Zeiger)
hätte mich auch gewundert... ;) war sicher nicht im Zusammenhang mit dem Versatz.

Wie schon geschrieben bei mir sieht es so aus als wenn data-background-icon="fa-square-o" nach unten rutscht und data-icon="fa-chevron-up" deshalb aus der Mitte raus ist und noch oben rutscht und eben nicht mehr so abgerundet ist in den Ecken...!

Zum Code ich hänge mal meine kompletten Code für einen Rollläden mit ran, der Screenshot dazu im Post ganz vorn von mir
<li data-row="4" data-col="1" data-sizex="16" data-sizey="16" style="height:98%; background-color:#3d445c">
<!-- ANFANG - Rollläden - ALLE -->
<div class="vbox" style="height:98%; background-color:#1f222e">
<div class="hbox grow-1">
<div class="hbox" style="height:75%; background-color:#3d445c">
<div class="card grow-2"><div class="left-align darkorange" style="margin-left:10px; font-size:150%">RAUM --- ZIMMER</div></div>
<div class="card"><div class="" style="font-size:150%">POSITION</div></div>
<div class="card"><div class="" style="font-size:150%">ZEITEN</div></div>
<div class="card"><div class="" style="font-size:150%">MODUS</div></div>
<div class="card left-space-2x">&nbsp;</div><!--Box 02-->
<div class="card grow-2"><div class="darkorange" style="margin-left:-20px !important;font-size:150%">STEUERUNG --- BESCHATTUNG</div></div>
</div>
</div>
<div class="hbox">
<div class="card grow-2"><div class="left-align" style="margin-left:10px !important; margin-top:0px !important; font-size:150%;">Wohnzimmer Garten - Osten</div></div>
<div class="card">
<div class="" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="WZ_Rollladen_O" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="WZ_Rollladen_O"></div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="35" data-icon="">35</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="">60</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="">80</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<!--Box 09-->
<div class="card">
<div data-type="popup" data-height="400px" data-width="600px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_RolloWZmodus" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-time_clock","oa-time_clock","oa-time_clock","oa-time_clock"]'></div>
<div style="margin-top:-15px !important; font-size:90%" data-type="label">Zeiten WZ alle</div>
<div class="dialog" style="overflow:hidden;">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Zeiten - Wohnzimmer - Alle Rollläden</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<!-- Öffnungszeiten Morgens -->
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="6" data-max="8" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Öffnen - Wochen - Tag</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_WoE" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="6" data-max="8" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_WoE" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="green" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Öffnen - Wochen - Ende</div>
</div>
<!-- Beschattungszeiten -->
<div class="cell">
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_B" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="14" data-max="19" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_hoch_B" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Zeit - Beschattung - 90%</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_offen_B" data-cmd="setreading" data-get="Stunde" data-set="Stunde" data-min="14" data-max="19" data-step="1" data-unit=" Uhr" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div class="inline">
<div class="valueonly circulate" data-type="spinner" data-device="du_RolloZeitWZ_offen_B" data-cmd="setreading" data-get="Minute" data-set="Minute" data-min="0" data-max="55" data-step="5" data-unit=" min" data-longdelay="800"
data-width="180" data-height="40" data-icon-left="fa-caret-down" data-icon-right="fa-caret-up" data-text-color="#7B68EE" data-icon-left-color="royalblue" data-icon-right-color="crimson">
</div>
</div>
<div style="margin-top:10px !important; font-size:120%" data-type="label">Beschattung - ENDE</div>
</div>
</div>
</div>
</div>
<div class="card">
<div data-type="popup" data-height="200px" data-width="400px" data-return-time="20" data-draggable="false">
<div class="big" style="margin-top:-15px" data-type="symbol" data-device="du_RolloWZmodus" data-states='["FHEM","Beschattung","Weihnachten","Aus"]' data-colors='["lightgreen","#4169e1","crimson","yellow"]' data-icons='["oa-fts_shutter_automatic","fs-fts_shutter_updown","oa-fts_shutter_automatic","oa-fts_shutter_manual"]'></div>
<div style="margin-top:-15px !important; font-size:90%" data-type="label">Wohnzimmer</div>
<div class="dialog">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:royalblue">Rollladen Modus - Wohnzimmer</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="state" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
</div>
</div>
<div class="card left-space-2x">&nbsp;</div><!--Box 11-->
<div class="card grow-2">
<div class="center">
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#DC143C" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-size="100%" data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="" data-off-background-color="MediumSpringGreen" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#DC143C" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="35" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">35</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">60</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">80</div>
</div>
</div>
</div>
.
.
.
.
.
.
<!--hier gehts dann weiter mit den anderen Rollläden-->
</li>
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

octek0815


setstate

Zitat von: octek0815 am 04 September 2018, 15:21:15
Kann dieses Problem auch nochmal angeschaut werden?

https://forum.fhem.de/index.php/topic,87241.msg814761.html

Spontan aus der Ferne betrachtet sieht das wieder nach Definitionsmix aus

Siehe meine Antwort von gestern hier: https://forum.fhem.de/index.php/topic,84302.msg832970.html#msg832970

Tabularasa

Hallo. Bei mir auch im Homestatus, bei den Batterie Symbol und bei anderen Symbolen ist was falsch.

Homestatus Viereck
<div data-type="homestatus" data-device="rr_Manuel"
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["ZuHause","Bett","Unterwegs","Urlaub","bettfertig"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase","fa-child"]'
data-version="roommate" class="top-space">
</div>


Batterie zu klein und leicht versetzt
<div class="inline">
<div data-type="symbol"
data-device="HZG_EG_WZ"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0 fa-blink"]'
data-colors='["green","yellow","orange","red","firebrick"]'
class="small">
</div>
<div data-type="label" data-device="HZG_EG_WZ" data-get="actuator" data-unit="%" class=""></div>
</div>


und die 2 Symbole in sich zu weit unten
<div class="container inline left-space">
<div data-type="push" data-device="str_EG_Lampen" data-cmd="set" data-set-on="off" class="cell"></div>
<div data-type="label">EG Lichter aus</div>
</div>

<div class="container inline left-space">
<div data-type="switch" data-icon="fa-lightbulb-o" data-device='Licht_OG_Bad'
data-get-on="on" data-get-off="off" class="cell"></div>
<div data-type="label">Bad OG</div>
</div>

octek0815

Zitat von: setstate am 04 September 2018, 15:49:30
Spontan aus der Ferne betrachtet sieht das wieder nach Definitionsmix aus

Siehe meine Antwort von gestern hier: https://forum.fhem.de/index.php/topic,84302.msg832970.html#msg832970

Das ist es leider nicht.

setstate


setstate

Zitat von: Tabularasa am 04 September 2018, 17:49:19
Hallo. Bei mir auch im Homestatus, bei den Batterie Symbol und bei anderen Symbolen ist was falsch.

Homestatus Viereck
<div data-type="homestatus" data-device="rr_Manuel"
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["ZuHause","Bett","Unterwegs","Urlaub","bettfertig"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase","fa-child"]'
data-version="roommate" class="top-space">
</div>




okay, das war browserabhängig. Konnte ich nur im FF nachvollziehen. Es war wieder das Font-Weight Thema.

Ist jetzt gefixed

octek0815

Zitat von: setstate am 05 September 2018, 07:31:01
doch, ist es  8)

Wo ist der fehler? Das Icon (bzw. die Seite) wird nicht als aktiv angezeigt.


<div data-type="pagebutton"
        data-url="#flur_content1.html"
        data-load="#flur_content1"
        data-active-pattern="(.*/||.*index_flur.html||.*#flur_content1.html)"
        data-device="Flur_EG_Haustuerschloss"
data-get="state"
data-states='["locked","unlocked","locked (uncertain)","unlocked (uncertain)"]'
data-icons='["mf1-home-locked","mf1-home-unlocked","mf1-home-locked-uncertain","mf1-home-unlocked-uncertain"]'
data-colors='["white","white","white","white"]'
data-fade-duration="fast"
data-background-icons='["fa-square","fa-square","fa-square","fa-square"]'
class="default"></div>

setstate

#28
Woran machst du "aktiv" fest? Was soll sich ändern?

Nur die Icons? Die ändern sich nicht?

Exit:
Ach, ich vermute: die background Farbe soll sich anhand des active-pattern ändern und die Icons anhand der States. Muss ich nochmal checken ...

Eisix

Genau das meint er. Tritt bei mir auch auf, die Hintergrundfarbe ändert sich nicht wenn aktiv. Bei meiner index.html Auswahlmenü der TV Button hat verschiedene subpages.

Gruß
Eisix