FTUI version 3

[setstate]

Mal kurz dazwischen, vor dem letzten Update sah das so aus wie auf dem ersten Bild, jetzt so wie auf dem zweiten Bild.
Wo muß ich da eingreifen um das wieder in die "Reihe" zu bekommen, bzw. was wurde da geändert?

Der Code dazu:

Da habe ich Quatsch bei den Aligment-Eigenschaften eingebaut. Ist jetzt wieder repariert.

[grossmaggul]

Supi, danke, daß Du mich vor dem Tag, dessen Namen man nicht nennen darf, bewahrt hast!

[Thyraz]

Besten Dank, funktioniert.
Ist es Möglich auch noch die Bezeichnung der Units die in Englisch angezeigt werden irgendwie in Deutsch umzumappen?

Da die Datumsangaben ja auch in Deutsch sind, hab ich mal nen PullRequest an setstate geschickt, dass die Zeiteinheiten in den Chart-Controls auch erstmal fix auf Deutsch sind, bis man irgendwann einen language-tag einbaut...

[setstate]

Da die Datumsangaben ja auch in Deutsch sind, hab ich mal nen PullRequest an setstate geschickt, dass die Zeiteinheiten in den Chart-Controls auch erstmal fix auf Deutsch sind, bis man irgendwann einen language-tag einbaut...

Die Spracheinstellung kann man per

Code Auswählen Erweitern

fhemService.config.lang bzw. per

Code Auswählen Erweitern

ftuiApp.config.lang abfragen.

Das liefert die Spracheinstellung des Browsers oder was der User per Meta-Tag 'lang' im HTML mitgegeben hat.

[moonsorrox]

in FTUI 2.x.y habe ich eine Anzeige für Termine genutzt die so aussah:

Code Auswählen Erweitern

<div class="card">
<div class="vbox" style="background-color:#1f222e;">
<div class="" style="margin-top:0px; font-size:100%; color:MediumSpringGreen">Termine</div>
<div class="card grow-2">
<div class="hbox" style="margin-top:10px;">
<div class="top-narrow" data-type="popup" data-height="260px" data-width="1200px" data-return-time="45" data-mode="fade"  data-draggable="true">
<div class="vbox">
<div class="hbox">
<div class="large" data-type="symbol" data-device="View_T" data-get-off="0"
data-get-on="(1|2|3|4|5|6|7|8|9)" data-get="c-tomorrow" data-warn="c-tomorrow" data-warn-background-color="crimson"
data-off-color="white" data-on-color="MediumSpringGreen" data-icon="oa-time_calendar">
</div>
</div>
</div>
<div class="dialog bg-darkgray">
<header style="background-color:#1f222e;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:MediumSpringGreen;">=== Nächste Termine ===</div>
<div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="card bg-darkgray" style="margin-left:15px; margin-top:0px">
<!--div class="crimson" style="font-size:130%" data-type="calview" data-device="View_T" data-get="today" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-showempty="false" data-max="3"></div-->
<!--div class="MediumSpringGreen" style="font-size:130%" data-type="calview" data-device="View_T" data-get="tomorrow" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-max="3"></div-->
<div class="MediumSpringGreen border-top-blue1" style="left-align; font-size:130%" data-type="calview" data-device="View_T" data-get="tomorrow" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-max="3"></div>
<div class="border-top-blue1" style="font-size:120%" data-type="calview" data-device="View_T" data-get="all" data-class='left-align' data-detailwidth='["10","8","8","5","30","39"]' data-detail='["daysleftLong","weekdayname","bdate","btime","summary","location"]' data-start="notomorrow" data-max="4"></div>    
</div>
</div>
</div>
</div>
</div>
</div>
</div>

kann ich das in der Version 3 schon umsetzen, oder ist es noch nicht möglich..?

2. Frage wie ist es möglich z.B. Icons ehemals FHEM_SVG einzubinden..?
Ich dachte es ist ganz einfach entweder ich mache einen Ordner /fs und schiebe die Icons dort hinein und gebe den Pfad an, oder ich schiebe die Icons mit in den Ordner von openautomation "path="../images/openautomation", jetzt kommt das Problem, weder die eine noch die andere Variante funktioniert.
Habe Fhem auch schon neu gestartet... aber kein neues Icon funktioniert.
Aber ein anderes Icon funktioniert aus dem selben Ordner "openautomation" funktioniert... 

Keine Ahnung warum das nicht funktioniert.... hat das auch noch jemand so.?
Ich habe das mit dem ring.svg und dem frost.svg ausprobiert die ich neu kopiert habe.

[LuGu]

2. Frage wie ist es möglich z.B. Icons ehemals FHEM_SVG einzubinden..?
Ich dachte es ist ganz einfach entweder ich mache einen Ordner /fs und schiebe die Icons dort hinein und gebe den Pfad an, oder ich schiebe die Icons mit in den Ordner von openautomation "path="../images/openautomation", jetzt kommt das Problem, weder die eine noch die andere Variante funktioniert.
Habe Fhem auch schon neu gestartet... aber kein neues Icon funktioniert.
Aber ein anderes Icon funktioniert aus dem selben Ordner "openautomation" funktioniert... 

Keine Ahnung warum das nicht funktioniert.... hat das auch noch jemand so.?
Ich habe das mit dem ring.svg und dem frost.svg ausprobiert die ich neu kopiert habe.

Bei mir funktioniert es ohne Probleme.

Code Auswählen Erweitern


<ftui-icon path="../images/openautomation" name="weather_cloudy_light"></ftui-icon></ftui-tab>


Code Auswählen Erweitern


<ftui-icon path="../images/fhemSVG" name="dustbin" color="yellow"
   [class-name]="dmy_Abfalltermine:Gelbe | map('-1:hop,1:spin,2:')">
</ftui-icon>


[Eisix]

Hallo,

Manche der alten Icon machen Probleme, das was die Farbe wechseln sollte bleibt schwarz. Habe alle die bei mir Probleme hatten mit Inkscape geöffnet und die schwarzen Bereiche nochmal gefüllt und dann im. /Icons gespeichert. Dann geht es auch ohne path.

Gruß
Eisix

[octek0815]

Hallo,

Manche der alten Icon machen Probleme, das was die Farbe wechseln sollte bleibt schwarz. Habe alle die bei mir Probleme hatten mit Inkscape geöffnet und die schwarzen Bereiche nochmal gefüllt und dann im. /Icons gespeichert. Dann geht es auch ohne path.

Gruß
Eisix

Oder Online mit IcoMoon. Da geht das auch prima...

https://icomoon.io/app/#/select

Grüße
Olli

[moonsorrox]

Hallo,

Manche der alten Icon machen Probleme, das was die Farbe wechseln sollte bleibt schwarz. Habe alle die bei mir Probleme hatten mit Inkscape geöffnet und die schwarzen Bereiche nochmal gefüllt und dann im. /Icons gespeichert. Dann geht es auch ohne path.

Gruß
Eisix

ja ganz genau ich wußte nur nicht mehr was man da machen muss, ich habe damals auch die Icons mit Inkscape geöffnet. Mir hatte aber mal jemand in einem anderen Forum (weiß leider nicht mehr welches) das man die svg Icons mit Notepad++ öffnen kann und da muss nur eine Kleinigkeit umgeändert werden, leider habe ich auch das nicht mehr auf dem Schirm...
Evtl. weiß es hier jemand.

Ich habe das Klingelzeichen welches sich ring.svg nennt genommen und es ist nur die kleine Glocke unten eingefärbt der Rest bleibt schwarz...
Anmerkung noch von mir:
klar kann ich das Icon in Notepad++ öffnen und meine Farbe eintragen die ich möchte, dass geht selbstverständlich.
Wenn ich es aber in schwarz mache bleibt es schwarz, keine Ahnung warum.

Das mit dem Icon habe ich jetzt gefunden wichtig für das einfärben ist, dass stroke und fill nicht als CSS-Style sondern als Attribute definiert wird z.B. <path fill="#fff" und nicht <path style="fill: #fff"
Ist mir aber zu aufwendig, wenn ich ein Icon habe einfach nur hier https://jakearchibald.github.io/svgomg/
hochladen und gleich wieder downloaden, dann funktioniertes auch mit der Farbe 

[blasterx]

Erstmal Danke für das neue FTUI3.
Kann es sein damit beim Circlemenu "circleRadius" nicht geht? Ich habe versucht mit

Code Auswählen Erweitern

<ftui-circlemenu direction="right-half" circleRadius="8" >
den Abstand zwischen den Buttons zu ändern leider ohne Erfolg.

Gruß BlasterX

[moonsorrox]

Ich habe mir eine Anruf Popup gebaut welches soweit funktioniert, aber...

1. mir gelingt es nicht das "Icon" mit dem "Badge" zurück zu setzen, ist das mometan schon möglich.
In FTUI 2.x. habe ich das mit dem data-fhem-cmd="set VerpassteAnrufe clear" gemacht

Code Auswählen Erweitern

<div style="font-size:150%;" data-type="switch" data-device="VerpassteAnrufe" data-states='["0","1"]' data-icons='["fa-phone","fa-phone fa-blink"]' data-colors='["white","crimson"]' data-on-background-color="#3d445c" data-off-background-color="#1f222e" data-warn-color="#ffffff" data-warn-on="!0" data-warn-off="0" data-warn="VerpassteAnrufe:state" data-fhem-cmd="set VerpassteAnrufe clear"></div>


2. ich bekomme es nicht hin die Größe zu ändern, ich habe verschieden Stellen probiert, aber es wird nicht größer

hier der Code, evtl kann jemand helfen..?

Code Auswählen Erweitern

<ftui-grid-tile row="16" col="9" height="2" width="2" class="semitransparent3d">
<ftui-icon popup-target="popup-vanruf" path="icons" class="size-3"
[name]="VerpassteAnrufe:state | map('1:phone1, 0:phone1')"
[color]="VerpassteAnrufe:state | map('1:Crimson, 0:royalblue1')"
[class-name]="VerpassteAnrufe:state | map('1:blink, 0:')">
</ftui-icon>
<ftui-badge color="crimson" [text]="VerpassteAnrufe:state"></ftui-badge>
<ftui-label class="size-1" text="Anrufe" color=""></ftui-label>
</ftui-grid-tile>

[octek0815]

Ich habe mir eine Anruf Popup gebaut welches soweit funktioniert, aber...

1. mir gelingt es nicht das "Icon" mit dem "Badge" zurück zu setzen, ist das mometan schon möglich.
In FTUI 2.x. habe ich das mit dem data-fhem-cmd="set VerpassteAnrufe clear" gemacht

Code Auswählen Erweitern

<div style="font-size:150%;" data-type="switch" data-device="VerpassteAnrufe" data-states='["0","1"]' data-icons='["fa-phone","fa-phone fa-blink"]' data-colors='["white","crimson"]' data-on-background-color="#3d445c" data-off-background-color="#1f222e" data-warn-color="#ffffff" data-warn-on="!0" data-warn-off="0" data-warn="VerpassteAnrufe:state" data-fhem-cmd="set VerpassteAnrufe clear"></div>


2. ich bekomme es nicht hin die Größe zu ändern, ich habe verschieden Stellen probiert, aber es wird nicht größer

hier der Code, evtl kann jemand helfen..?

Code Auswählen Erweitern

<ftui-grid-tile row="16" col="9" height="2" width="2" class="semitransparent3d">
<ftui-icon popup-target="popup-vanruf" path="icons" class="size-3"
[name]="VerpassteAnrufe:state | map('1:phone1, 0:phone1')"
[color]="VerpassteAnrufe:state | map('1:Crimson, 0:royalblue1')"
[class-name]="VerpassteAnrufe:state | map('1:blink, 0:')">
</ftui-icon>
<ftui-badge color="crimson" [text]="VerpassteAnrufe:state"></ftui-badge>
<ftui-label class="size-1" text="Anrufe" color=""></ftui-label>
</ftui-grid-tile>

Moin,

du musst ein Button nutzen und dann mit (value) das setzen was du möchtest.
Hier mein Code...

Code Auswählen Erweitern


<ftui-column [hidden]="System_Verpasste_Anrufe | map('0:true, 1:false')">
<ftui-button (value)="System_Verpasste_Anrufe" states='0'
[fill]="System_Verpasste_Anrufe | map('0:clear, 1:clear')">
<ftui-icon style="font-size:1em; margin-top:0.1em;"
[name]="System_Verpasste_Anrufe | map('0:phone1, 1:phone1')" class="hop" popup-target="popup-verpasste-anrufe"
[color]="System_Verpasste_Anrufe | map('0:white, 1:white')">
</ftui-icon>
<ftui-badge style="font-size:0.9em;"
[color]="System_Verpasste_Anrufe | map('0=gray, 1=gray')"
[text]="System_Verpasste_Anrufe">
</ftui-badge>
</ftui-button>
</ftui-column>


Grüße
Olli

[moonsorrox]

ich hatte das in deinem Code auch schon gefunden, nur ich möchte es in einem Popup nutzen. bei mir ist der Telefon Hörer auch immer zu sehen.
Mit Button hatte ich es und das funktioniert, nur im Popup einegebaut ging es nicht.

EDIT:// oh jetzt habe ich es gesehen das du da ein popup drin hast

[moonsorrox]

oh, ich bin aber auch blöd oder Code blind mittlerweile...!

Da ich den Hourcounter nutze muss ich natürlich bei states auch "clear" enigeben anstatt "0"
Das hatte ich schon, aber jetzt erst bin ich wach geworden... puuh 

[eppi]

Hallo zusammen
Ich habe mich an die Smartphone Ansicht gewagt (/examples/menu.html) und dabei habe ich festegstellt, dass die Checkboxes korrekt ausgerichtet werden, circlemenu und Button zu weit oben sind, respektive zu fest recht kleben (siehe Bild).
Mein Code sieht wie folgt aus:

Code Auswählen Erweitern

<ftui-view>

  <ftui-view-toolbar>
    <ftui-title>{{room}}</ftui-title>
  </ftui-view-toolbar>
 
  <ftui-view-section>
    <ftui-label slot="start">Alarmanlage</ftui-label>
    <ftui-checkbox slot="end" [(value)]="dummy1" color="success"></ftui-checkbox>
  </ftui-view-section>
  <ftui-view-section>
    <ftui-label slot="start">Kühlschublade</ftui-label>
    <ftui-checkbox slot="end" [(value)]="dummy2" color="success"></ftui-checkbox>
  </ftui-view-section>
  <ftui-view-section>
    <ftui-label slot="start">Boiler</ftui-label>
    <ftui-checkbox slot="end" [(value)]="dummy2" color="success"></ftui-checkbox>
  </ftui-view-section>
  <ftui-view-section>
    <ftui-label slot="start">Heizung</ftui-label>
    <ftui-checkbox slot="end" [(value)]="dummy2" color="success"></ftui-checkbox>
  </ftui-view-section>
  <ftui-view-section>
    <ftui-label slot="start">Pool</ftui-label>
<ftui-circlemenu direction="vertical" slot="end">
<ftui-icon name="home1" class="size-3"></ftui-icon>
            <ftui-button (value)="Poolpumpensteuerung" states="auto" color="blue">auto</ftui-button>
            <ftui-button (value)="Poolpumpensteuerung" states="ein" color="blue"><center>&nbsp;ein&nbsp;&nbsp;</center></ftui-button>
            <ftui-button (value)="Poolpumpensteuerung" states="aus" color="blue"><center>&nbsp;aus&nbsp;&nbsp;</center></ftui-button>
        </ftui-circlemenu>
  </ftui-view-section>
  <ftui-view-section>
    <ftui-label slot="start">Testschalter</ftui-label>
<ftui-button slot="end" shape="circle" states="on,off" [(value)]="dummy1" [fill]="dummy1 | map('off: outline, on: solid')">
          <ftui-icon name="power-off" [color]="dummy1 | map('off: white, on: white')"></ftui-icon>
        </ftui-button>
  </ftui-view-section>
  </ftui-view>
Danke für eure Hilfe. Viele Grüsse Eppi