Autor Thema: FTUI version 3  (Gelesen 22869 mal)

Offline SirMarco

  • Full Member
  • ***
  • Beiträge: 158
Antw:FTUI version 3
« Antwort #585 am: 13 Januar 2021, 19:20:34 »
Ja genau, verstanden  ;)

Wollte eigentlich Label 3 ausblenden lassen. Mit hidden funktioniert das Bestens.
Weiss jemand warum "blink" nicht auf align-left reagiert in ftui-label Zeile 4?
<ftui-row>
<ftui-column>
    <ftui-label class="align-left" >{{name}}</ftui-label>
    <ftui-label class="align-left" [text]="{{device}}:actifity | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')"></ftui-label>
    <ftui-label class="align-left" >Letzter Verbindungserfolg:</ftui-label>
    <ftui-label class="align-left" [text]="{{device}}:connectionCheck | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')" [class-name]="{{device}}:actifity | map('dead:blink')"></ftui-label>
</ftui-column>
<ftui-column>
    <ftui-label></ftui-label>
</ftui-column>
<ftui-column>
   
</ftui-column>
</ftui-row> 


Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4110
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #586 am: 13 Januar 2021, 19:26:22 »
[class-name]="" überschreibt class komplett. Das align muss mit in das map.

Offline octek0815

  • Full Member
  • ***
  • Beiträge: 461
Antw:FTUI version 3
« Antwort #587 am: 13 Januar 2021, 19:31:31 »
[class-name]="" überschreibt class komplett. Das align muss mit in das map.

oder so...

<ftui-column align-items="left">
    <ftui-label>{{name}}</ftui-label>
    <ftui-label [text]="{{device}}:actifity | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')"></ftui-label>
    <ftui-label>Letzter Verbindungserfolg:</ftui-label>
    <ftui-label [text]="{{device}}:connectionCheck | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')" [class-name]="{{device}}:actifity | map('dead:blink')"></ftui-label>
</ftui-column>

Grüße
Olli
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline torte

  • Developer
  • Full Member
  • ****
  • Beiträge: 488
Antw:FTUI version 3
« Antwort #588 am: 14 Januar 2021, 13:18:12 »
Hallo,

hab heute weather ausprobiert, die ICONs werden nicht geladen da Weather Komponente das LoadIcon der ICON Komponente mit der Url aufruft aber
in der LoadIcon Function die Variable name dann nicht gesetzt ist.
Ich meine die Zeile 67
this.elementIcon.innerHTML = `<img src="${name}"></img>`;
kann es sein da es nicht so sein müsste
this.elementIcon.innerHTML = `<img src="${url}"></img>`;
Danach lädt er bei mir die ICONS, bei mir PNGs

Grüße
Torte

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4110
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #589 am: 14 Januar 2021, 14:14:29 »
danke, das war ein Fehler.

Offline torte

  • Developer
  • Full Member
  • ****
  • Beiträge: 488
Antw:FTUI version 3
« Antwort #590 am: 14 Januar 2021, 15:39:05 »
danke auch  :)
kurze nachfrage: einige Wetter <IMG> Icons sind rechteckig es bräuchte ein width: 100% mach ich das am besten im CSS oder gibt es da was für?
Grüße
Torte

Edit:
Habt die Variable dann auch gefunden :-)
style="--icon-width: 100%;"
« Letzte Änderung: 15 Januar 2021, 11:17:54 von torte »

Offline Eisix

  • Sr. Member
  • ****
  • Beiträge: 998
Antw:FTUI version 3
« Antwort #591 am: 14 Januar 2021, 16:30:15 »
Nutz Ihr alle nur line?

Gruß
Eisix

Kann mir immer noch keiner sagen wie ich steps im Chart hinkriege?

Gruß
Eisix

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3773
  • Online
Antw:FTUI version 3
« Antwort #592 am: 14 Januar 2021, 22:54:08 »
hat jemand von euch schon eine vernünftige Rollladensteuerung zusammen bekommen bzw. auch eine schöne Ansicht.
Ich weiß gar nicht wie ich das machen soll, er nimmt meine Icons gar nicht richtig an, dass steuern eines Rollladens habe ich probiert das ist kein Problem, aber eine vernünftige Iconansicht wäre schon toll.

Ich habe natürlich auch gemerkt wieviel ich davon beutze, soll heißen ein Circlemenü brauche ich gar nicht mehr, dass wäre im Screenshot direkt neben dem Namen POSITION, denn der Rollladen macht ja alles soweit alleine.
Eigentlich reichen die Beschattungspositionen und Hoch/Runter/Stop und die Modusumschaltungen vollkommen aus.
Ich hänge mal den Screenshot ran.

Intel-NUC i3: FHEM-Server 5.9 :: 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

Online OdfFhem

  • Sr. Member
  • ****
  • Beiträge: 663
Antw:FTUI version 3
« Antwort #593 am: 15 Januar 2021, 06:18:01 »
@setstate

In ftui.css fehlt bei size-5 ein r ...

Offline octek0815

  • Full Member
  • ***
  • Beiträge: 461
Antw:FTUI version 3
« Antwort #594 am: 15 Januar 2021, 06:39:07 »
hat jemand von euch schon eine vernünftige Rollladensteuerung zusammen bekommen bzw. auch eine schöne Ansicht.
Ich weiß gar nicht wie ich das machen soll, er nimmt meine Icons gar nicht richtig an, dass steuern eines Rollladens habe ich probiert das ist kein Problem, aber eine vernünftige Iconansicht wäre schon toll.

Ich habe natürlich auch gemerkt wieviel ich davon beutze, soll heißen ein Circlemenü brauche ich gar nicht mehr, dass wäre im Screenshot direkt neben dem Namen POSITION, denn der Rollladen macht ja alles soweit alleine.
Eigentlich reichen die Beschattungspositionen und Hoch/Runter/Stop und die Modusumschaltungen vollkommen aus.
Ich hänge mal den Screenshot ran.

Meinst Du so in etwa?

Hier der Code für ein Rollladen:

<ftui-row class="size-6">
<ftui-column align-items="left" style="margin-left:25px;" height="50%">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-row width="60%">
          <ftui-icon [name]="Badezimmer_EG_Fensterrollladen:state | map('0:_shutter_1w_l_0, 5:_shutter_1w_l_10, 10:_shutter_1w_l_20, 15:_shutter_1w_l_30, 20:_shutter_1w_l_40, 25:_shutter_1w_l_50, 30:_shutter_1w_l_60, 40:_shutter_1w_l_70, 53:_shutter_1w_l_80, 60:_shutter_1w_l_90, 70:_shutter_1w_l_100, opened:_shutter_1w_l_0, closed:_shutter_1w_l_100, Initialized:exclamation-triangle, MISSING.*:exclamation-triangle')" [color]="Badezimmer_EG_Fensterrollladen:state | map('0:white, 100:white, off:white, on:white, set.*:primary, MISSING.*:_rot1, Initialized:_rot1')" [class-name]="Badezimmer_EG_Fensterrollladen | map('set.*:spin, MISSING.*:blink, Initialized:blink')">
</ftui-icon>
                <ftui-column height="12%">
<ftui-icon class="size-0" name="sun" [color]="Badezimmer_EG_Fensterrollladen:ASC_ShuttersLastDrive | map('`shading in`:yellow, .*:gray')"></ftui-icon>
<ftui-icon [name]="Badezimmer_EG_Fensterrollladen:moving | map('up:chevron-circle-up, down:chevron-circle-down, stop:stop-circle')" [color]="Badezimmer_EG_Fensterrollladen:moving | map('up:primary, down:primary, stop:gray')"
 [class-name]="Badezimmer_EG_Fensterrollladen:moving | map('up:blink size-0, down:blink size-0, stop:size-0')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column style="margin-right:25px;">
<ftui-row>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen up">
<ftui-icon style="margin-top:-0.5em;" color="white" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen stop">
<ftui-icon color="white" name="minus"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen down">
<ftui-icon color="white" name="chevron-down"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 15">
<ftui-icon color="white" name="_shutter_1w_l_30"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 25">
<ftui-icon color="white" name="_shutter_1w_l_50"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 45">
<ftui-icon color="white" name="_shutter_1w_l_70"></ftui-icon>
</ftui-button>
<ftui-button class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen getStatus">
<ftui-icon color="white" name="refresh1"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
« Letzte Änderung: 15 Januar 2021, 09:12:53 von octek0815 »

Offline Eisix

  • Sr. Member
  • ****
  • Beiträge: 998
Antw:FTUI version 3
« Antwort #595 am: 15 Januar 2021, 08:56:40 »
@moonsorox

Ich habe alles in einem Icon aber noch mit Circlemenue, allerdings fährt eigentlich alles automatisch, somit zeigt das Icon den aktuellen Status an und wenn wirklich nötig kann man dann die Positionen anfahren.

Das ganze mit den animierten Icons von Thyraz sieht auch gut aus.

                <ftui-column>
                        <ftui-circlemenu direction="bottom-half">
                                <ftui-icon class="size-3" [name]="Rolladen_WZ_mitte:position | map('0:fts_window_2w, 25:fts_shutter_30, 50:fts_shutter_50, 75:fts_shutter_80, 100:fts_shutter_100')"></ftui-icon>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="opens">Auf</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="25">25</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="50">50</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="75">75</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="closes">Zu</ftui-button>
                        </ftui-circlemenu>
                        <ftui-label>Mitte</ftui-label>
                </ftui-column>


Gruß
Eisix

Offline grossmaggul

  • Full Member
  • ***
  • Beiträge: 442
    • Mein Blog
Antw:FTUI version 3
« Antwort #596 am: 15 Januar 2021, 10:24:14 »
Zitat von: Eisix
Kann mir immer noch keiner sagen wie ich steps im Chart hinkriege?
Ich habe das mal "outgesourced":
https://forum.fhem.de/index.php/topic,117779.0.html
FHEM auf Debian Server, 2 x nanoCUL868,Homematic,MAX,MiLight,HUE

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3773
  • Online
Antw:FTUI version 3
« Antwort #597 am: 15 Januar 2021, 12:31:04 »
Danke Olli und Danke Eisix

schaue mir beide Varianten mal an, hatte noch gar keinen Ansatz dazu. Den habe ich jetzt ;)
Intel-NUC i3: FHEM-Server 5.9 :: 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

Offline SirMarco

  • Full Member
  • ***
  • Beiträge: 158
Antw:FTUI version 3
« Antwort #598 am: 15 Januar 2021, 14:38:57 »
Hallo zusammen

In der Toolbar habe ich ein label eingefügt:

  <ftui-main>
    <ftui-view-toolbar class="fixed">
      <ftui-menu-button slot="start" align-items="left"></ftui-menu-button>
      <ftui-title  group="default" class="size-5 titleroom" slot="start"></ftui-title>
      <ftui-title slot="end">
        <ftui-tab view="content_klima" title="Klima" color="black">
        <ftui-weather class="size-1" [condition]="Controller_myProPlanta:fc0_weatherDay"></ftui-weather>
        <ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
      </ftui-tab>
      </ftui-title>
    </ftui-view-toolbar>
</ftui-main>

Wenn ich das label auf einer anderen Seite anzeigen lassen möchte, wird es nicht angezeigt - erst wenn ich das label in der Toolbar lösche.

Liegt das daran, das die 2. Seite ein Template ist?

Hier möchte ich es ebenfalls anzeigen lassen:
content_klima.html

<ftui-page>
    <ftui-column align-items="left" class="tabsection">
        <ftui-title style="padding-left: 10px" class="size-4">Klima</ftui-title>
      </ftui-column>
    <ftui-view-section>                     
        <ftui-content file="template/template_klima_2er.html" name="Lounge" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
    </ftui-view-section>
</ftui-page>

template_klima_2er.html


<ftui-row>
<ftui-column>
    <ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
    <ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:temperature" [color]="{{device}}:temperature | map('0=secondary,16=warning,30=danger')" class="size-5"><span slot="end">°C</span></ftui-label>
    <ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>

</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:humidity" [color]="{{device}}:humidity | map('0=secondary,50=warning,80=primary')" class="size-5"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row> 
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
            <ftui-row>
                <ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
                    <ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
                    <ftui-chart-data label="Luftfeuchtigkeit" point-radius="0" tension="0.3" fill color="#228ace" log="DBLogging" file="history" spec="{{device}}:humidity"></ftui-chart-data>
                    <ftui-chart-controls units="day, week"></ftui-chart-controls>
                  </ftui-chart>                           
            </ftui-row>

</ftui-popup>

Danke  8)

Grüsse


Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3773
  • Online
Antw:FTUI version 3
« Antwort #599 am: Heute um 14:47:51 »
wenn ich mit einem Button mehrere Geräte mit set steuern möchte kann ich das in FTUI machen oder musss ich mir in Fhem etwas basteln.?
Intel-NUC i3: FHEM-Server 5.9 :: 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

 

decade-submarginal