FTUI version 3

[Eisix]

vim direkt in der shell.

Danke, dachte schon ich bin das letzte Relikt einer aussterbenden Art. 

Nutze auch vi in der Shell.

Gruß
Eisix

[torte]

Wieso doppelt? Vererbt sich das hidden nicht auf die Kindelemente?

mh, ja weil ich das device auch in dem content file nutze welches auch für hidden Ausschlaggebend ist.


index.html

Code Auswählen Erweitern


<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle"></ftui-content>



content_system_door_status.html

Code Auswählen Erweitern


<ftui-view-section [hidden]="{{device}}:{{reading}} | map('close:true, open:false')" class="size-2">
<ftui-view-item>
<ftui-row class="size-2">
<ftui-column align-items="left" width="10%">
<ftui-icon class="size-0" name="{{displayicon}}" [color]="{{device}}:{{reading}} | map('`close`:green, .*:danger')"></ftui-icon></ftui-tab>
</ftui-column>
<ftui-column align-items="left" width="60%" >
<ftui-label class="size-p65" text="{{devicename}}"></ftui-label>
</ftui-column>
<ftui-column align-items="left" width="30%">
<ftui-label class="size-p65" [text]="{{device}}:{{reading}}:time | toDate() | ago() | timeFormat('mmmmmm minutes')" interval="60"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-view-item>
</ftui-view-section>


Das hidden müsste eigentlich auch in dem FTUI Content angegeben werden aber wie bekomme ich das dann in content_system_door_status.html genutzt? Klar kann ich das mit in der Zeile des FTUI Content eintragen aber dann ist ja doppelt einmal so wie oben und dann noch mal als Attribut hinter hidden

Hoffe du verstehst wie ich das meine.

Grüße
Torte

[yersinia]

Danke, dachte schon ich bin das letzte Relikt einer aussterbenden Art. 

Nutze auch vi in der Shell.

Vor allem, vi[m] ist auf fast jedem Linux/Unix-System zu finden und optimal fürs schnelle Edit von irgendwelchen Dateien in der shell, insb. via ssh.

Ich dachte, es ginge so:

Code Auswählen Erweitern

<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle" [hidden]="device:state | map('close:true, open:false')"></ftui-content>
Also das <ftui-content> auf hidden setzen.

[torte]

Ich dachte, es ginge so:

Code Auswählen Erweitern

<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle" [hidden]="device:state | map('close:true, open:false')"></ftui-content>
Also das <ftui-content> auf hidden setzen.

Ja so geht es klar, ist doch aber doof, weil ich zweimal das device und angeben muss. 

Code Auswählen Erweitern

<ftui-content file="content/content_system_door_status.html" device="device" devicename="tuer" reading="state" displayicon="circle" [hidden]="device:state | map('close:true, open:false')"></ftui-content>

[grossmaggul]

Vor allem, vi[m] ist auf fast jedem Linux/Unix-System zu finden und optimal fürs schnelle Edit von irgendwelchen Dateien in der shell, insb. via ssh.

Das ist schon richtig, trotzdem editiere ich größere Texte doch lieber mit Brackets auf dem Mac, da habe ich Syntax Highlighting direkt verfügbar und muß mir nicht tausend Shortcuts merken.

[Eisix]

Hab was gebastelt für homestatus. Geht bestimmt schöner wenn sich jemand damit auskennt

Code Auswählen Erweitern


<ftui-column>
<ftui-row align-items="top" width="100%" height="70%">
<ftui-column align-items="top" width="90%" class="homebox">
        <ftui-row>
                <ftui-button fill="" (value)="set rgr_Residents" states="gotosleep" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttonsok, absent:homebuttons, gone:homebuttons')">
                        <ftui-icon class="size-3" name="bed" color="mywhite"></ftui-icon>
                </ftui-button>
                <ftui-button fill="" (value)="set rgr_Residents" states="absent" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttons, absent:homebuttonsok, gone:homebuttons')">
                        <ftui-icon class="size-4 my-top-10" name="car" color="mywhite"></ftui-icon>
                </ftui-button>
                <ftui-button fill="" (value)="set rgr_Residents" states="gone" [class-name]="rgr_Residents:state | map('home:homebuttons, gotosleep:homebuttons, absent:homebuttons, gone:homebuttonsok')">
                        <ftui-icon class="size-1" name="suitcase" color="mywhite"></ftui-icon>
                </ftui-button>
        </ftui-row>
        <ftui-row>
                <ftui-button fill="" (value)="set rgr_Residents" states="home" [class-name]="rgr_Residents:state | map('home:homebuttonok, gotosleep:homebutton, absent:homebutton, gone:homebutton')">
                        <ftui-icon class="size-3" name="home1"
color="mywhite"
></ftui-icon>
                </ftui-button>
        </ftui-row>
</ftui-column>
</ftui-row>

<ftui-row fixed-bottom">
<ftui-image
src="../images/Minion-Hello-icon.png"
width="45px" height="45px"
[class-name]="rr_User5:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Girl-icon.png"
width="45px" height="45px"
[class-name]="rr_User4:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Kungfu-icon.png"
width="45px" height="45px"
[class-name]="rr_User3:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Dancing-icon.png"
width="45px" height="45px"
[class-name]="rr_User1:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
src="../images/Minion-Amazed-icon.png"
width="45px" height="45px"
[class-name]="rr_User2:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
</ftui-row>
</ftui-column>


custom.css

Code Auswählen Erweitern


ftui-column.homebox {
  width: 90%;
  height: 100px;
  border: 5px solid green;
  padding: 0px;
  border-radius: 10px 10px 10px 10px;
}

ftui-button.homebuttons {
       width: 100%;
       float: left;
       border-right: 3px solid green;
       border-left: 3px solid green;
}

ftui-button.homebuttonsok {
       width: 100%;
       float: left;
       border-right: 3px solid green;
       border-left: 3px solid green;
       background-color: green;
}
ftui-button.homebutton {
       width: 100%;
       float: left;
       height: 60px;
       border-right: 3px solid green;
       border-left: 3px solid green;
}

ftui-button.homebuttonok {
       width: 100%;
       float: left;
       height: 60px;
       border-right: 3px solid green;
       border-left: 3px solid green;
       background-color: green;
}

.myimage {
    opacity: 0.3;
}


Vielleicht kanns jemand brauchen oder teilt was besseres.

Gruß
Eisix

[khk123]

weitere Formatierungs Frage
Ich habe zwei Button mit denen ich Popups bediene linker Button in der index.html (nicht ausgelagert) rechts Button mit ausgelagert also nicht in der index vorhanden.
Der Button rutscht komplett an den linken Rand sollte default nicht immer "center" sein..?

Klappt bei mir mit folgender ausgelagerter Definition:

Code Auswählen Erweitern


ftui-column>
<ftui-icon name="trash-o"   
[name]="Abfall:next | map('Biotonne_.*:trash-o, Gartenabfaelle_.*:trash-o, GelberSack_.*:glass, Altapier_.*:trash-o, Restmuell_.*:trash-o, Sondermuell_.*:recycle')" popup-target="popup-abfall"
[color]="Abfall:next | map('Biotonne_.*:green, Gartenabfaelle_.*:green, GelberSack_.*:yellow, Altpapier_.*:blue, Restmuell_.*:gray, Sondermuell_.*:danger')">
</ftui-icon>
<ftui-badge color="danger" [text]="Abfall:next_days"></ftui-badge>

<ftui-label [text]="Abfall:next | replace(/_./g, '')"></ftui-label>
</ftui-column>


[moonsorrox]

ja danke für die Antwort, ich habe es jetzt auch schon komplett ohne alles drin... warum das nicht ging weiß ich jetzt auch nicht.
Icon ist mittig sollte eigentlich default center sein.

[setstate]

Tipp:

man kann sich eigene Pipe-Functions für häufig genutzte Anwendungen anlegen.

Direkt im HTML per Script-Tag oder in einem user.js Files

Code Auswählen Erweitern


<script >
  const minusBlue = () => input => Number(input) < 0 ? 'blue' : null;
</script>


Immer wenn der Wert unter 0 ist, dann Farbe das Labels in blau. Wenn man das häufig braucht, spart man sich viele gleiche, lange map().

Code Auswählen Erweitern


   <ftui-label [text]="AgroWeather:fc0_tempMin" [color]="AgroWeather:fc0_tempMin | minusBlue()" size="4" unit="°C"></ftui-label>


[khk123]

Wenn ich bei ftui-weather type="png" angebe, wird trotzdem das svg-icon gesucht. Was mache ich da falsch?

Code Auswählen Erweitern


<ftui-weather  class="size-4" icon-set="kleinklima" provider="proplanta" type="png" [condition]="Wetterext:fc1_weatherDay"></ftui-weather>


[setstate]

Wenn ich bei ftui-weather type="png" angebe, wird trotzdem das svg-icon gesucht. Was mache ich da falsch?

Code Auswählen Erweitern


<ftui-weather  class="size-4" icon-set="kleinklima" provider="proplanta" type="png" [condition]="Wetterext:fc1_weatherDay"></ftui-weather>


type greift bei weather nicht. Die Icon-Name wird komplett im weather.map.js festgelegt.

[khk123]

Hab jetzt die Definitionen in weather.map.js auf ,,png" geändert. Es wäre aber schön, wenn type hier auch ziehen würde, denn nach dem nächsten Update ist meine Änderung wahrscheinlich wieder obsolet.

[Mano]

Ich bin gerade dabei meine alte Version auf FTUI3 umzubauen. Tolles Framework!

Ist denn vorgesehen Schleifen (FOR, WHILE) und Bedingungen (IF ELSE, CASE) einzubauen?

[yersinia]

Direkt im HTML per Script-Tag oder in einem user.js Files

Coole Sache, nur findet die ftui.helper.js diese nicht wenn via script direkt im HTML eingebunden; die Konsole sagt:

Code Auswählen Erweitern

ReferenceError: minusBlue is not defined             ftui.helper.js:107:17

Über extener, eigener JS eingebunden funktioniert es.

[setstate]

Ich bin gerade dabei meine alte Version auf FTUI3 umzubauen. Tolles Framework!

Ist denn vorgesehen Schleifen (FOR, WHILE) und Bedingungen (IF ELSE, CASE) einzubauen?

Bis jetzt beinhaltet FTUI3 keine Render-Engine, die komplette Templates parsed und zyklisch oder eventbasiert den DOM neu rendert.
Es werden nur Attribute ausgelesen und der Dom einmalig beim Kreieren der Componenten erweitert.

Vielleicht wird es dann mal mit FTUI4 geben 

Also nein, Schleifen und Bedingungen wird es in absehbarer Zeit nicht geben.