Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 227 228 229 230 231 ... 240
Benutzer-Aktionen

Jojo11

#3420
10 Juni 2023, 06:39:30
Super, vielen Dank! Genau danach habe ich gesucht.

h002

#3421
10 Juni 2023, 08:40:24
Vielen Dank für die Arbeit an ftui3.

So habe ich es aktuell umgesetzt, um FHEM auf mein Mobiltelefon zu bekommen. Vielleicht hilft es dem einen oder anderen als Basis für die eigene Umsetzung. Ich habe mich bewusst gegen
Code Auswählen
<ftui-content file=...> entschieden, da es mir zu umständlich war, bei Änderungen jede content-Seite im Firefox neu zu laden.

Code Auswählen
<!DOCTYPE html>
<html>

<head>
  <script>
    // Pipe-helper to set any Values lower than threshold to Zero
    const thresholdZero = value => input => Math.abs(Number(input)) <= value ? input * 0 : input;
  </script>
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/bright-theme.css" rel="stylesheet" />
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">
  <title>FHEM</title>
</head>

<body>

  <ftui-menu timeout="0" id="ftui_menu_1">
    <ftui-tab view="View1" title="Home" active>
      <ftui-icon name="home"></ftui-icon>
      <ftui-label margin="1" text-align="left">Home</ftui-label>
    </ftui-tab>
    <ftui-tab view="View2" title="E3DC">
      <ftui-icon name="sun2"></ftui-icon>
      <ftui-label margin="1" text-align="left">E3DC</ftui-label>
    </ftui-tab>
    <ftui-tab view="View3" title="Dimplex">
      <ftui-icon name="thermometer-3"></ftui-icon>
      <ftui-label margin="1" text-align="left">Dimplex</ftui-label>
    </ftui-tab>
  </ftui-menu>

  <!--

  Tab View Toolbar Header

-->
  <ftui-main>
    <ftui-view>
      <ftui-view-toolbar slot="header">
        <ftui-menu-button menu="ftui_menu_1" slot="start"></ftui-menu-button>
        <ftui-tab-title @click="javascript:window.location.reload(true);" color="dark" class="size-4" text-align="left">
        </ftui-tab-title>
      </ftui-view-toolbar>

      <!--

  Tab View 01

-->


      <ftui-tab-view id="View1">
        <ftui-view-section>

          <ftui-label class="size-3" margin="1" color="dark">Rollladen-Steuerung</ftui-label>

          <ftui-view-item>
            Wohnzimmer
            <ftui-button slot="end" class="size-3" [(value)]="Wohnzimmer.Rollladen.Nachtposition.Switch"
              states="hoch,runter"
              [fill]="Wohnzimmer.Rollladen.Nachtposition.Switch | map('hoch: outline, runter: solid')">
              <ftui-icon
                [name]="Wohnzimmer.Rollladen.Nachtposition.Switch | map('runter:window-shutter, hoch:window-shutter-open')">
              </ftui-icon>
            </ftui-button>
          </ftui-view-item>

          <ftui-view-item>
            Schlafzimmer
            <ftui-button slot="end" class="size-3" [(value)]="Schlafzimmer.Rollladen.Nachtposition.Switch"
              states="hoch,runter"
              [fill]="Schlafzimmer.Rollladen.Nachtposition.Switch | map('hoch: outline, runter: solid')">
              <ftui-icon
                [name]="Schlafzimmer.Rollladen.Nachtposition.Switch | map('runter:window-shutter, hoch:window-shutter-open')">
              </ftui-icon>
            </ftui-button>
          </ftui-view-item>

          <ftui-label class="size-3" margin="1" color="dark">Lichtschalter</ftui-label>

          <ftui-view-item>
            TV Lampe
            <ftui-button slot="end" class="size-3" [(value)]="HM_2C4DDE" states="on,off"
              [fill]="HM_2C4DDE:state | map('off: outline, on: solid')">
              <ftui-icon [name]="HM_2C4DDE:state | map('on:lightbulb-on, off:lightbulb')">
              </ftui-icon>
            </ftui-button>
          </ftui-view-item>

          <ftui-view-item>
            Flur EG
            <ftui-button slot="end" class="size-3" [(value)]="HM_2C474C" states="on,off"
              [fill]="HM_2C474C:state | map('off: outline, on: solid')">
              <ftui-icon [name]="HM_2C474C:state | map('on:lightbulb-on, off:lightbulb')">
              </ftui-icon>
            </ftui-button>
          </ftui-view-item>

          <ftui-view-item>
            Flur OG
            <ftui-button slot="end" class="size-3" [(value)]="HM_2DBC36_Sw" states="on,off"
              [fill]="HM_2DBC36_Sw:state | map('off: outline, on: solid')">
              <ftui-icon [name]="HM_2DBC36_Sw:state | map('on:lightbulb-on, off:lightbulb')">
              </ftui-icon>
            </ftui-button>
          </ftui-view-item>

        </ftui-view-section>
      </ftui-tab-view>

      <!--

  Tab View 02

-->
      <ftui-tab-view id="View2">
        <ftui-view-section>
          <ftui-label class="size-3" margin="1" color="dark">E3DC-Werte</ftui-label>

          <ftui-view-item>
            <ftui-icon slot="start" name="sun2" color="yellow"></ftui-icon>
            Solarproduktion heute
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_DC_POWER" unit="kWh"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="home" color="red"></ftui-icon>
            Hausverbrauch heute
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_CONSUMPTION" unit="kWh"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="battery-3" color="blue"></ftui-icon>
            Batterie-Level aktuell
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_BAT_CHARGE_LEVEL" unit="%"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="plug" color="primary"></ftui-icon>
            Autarkie aktuell
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_AUTARKY" unit="%"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="plug" color="primary"></ftui-icon>
            Autarkie 2023
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:2023_DB_AUTARKY" unit="%"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="plus" color="green"></ftui-icon>
            Einspeisung heute
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_GRID_POWER_IN" unit="kWh"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="minus" color="brown"></ftui-icon>
            Netzentnahme heute
            <ftui-label slot="end" color="blue" [text]="MQTT_S10Client:TODAY_DB_GRID_POWER_OUT" unit="kWh"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-pvvis pvmax=7000 [soc]="S10E:Batterieladezustand"
              [feed-receive]="S10E:Netzleistung | multiply (-1) | thresholdZero(30)"
              [charge-discharge]="S10E:Batterieleistung | thresholdZero(30)" [produce]="S10E:Solarleistung"
              grid-icon="pylon" width="300px" has-no-wallbox [home-consume-tdy]="MQTT_S10Client:TODAY_DB_CONSUMPTION"
              [grid-consume-tdy]="MQTT_S10Client:TODAY_DB_GRID_POWER_OUT"
              [pv-prod-tdy]="MQTT_S10Client:TODAY_DB_DC_POWER" unit-sum=" kWh" batmax="12600">
            </ftui-pvvis>
          </ftui-view-item>

          <ftui-view-item>           
          </ftui-view-item>         

        </ftui-view-section>

      </ftui-tab-view>

<!--

  Tab View 03

-->

      <ftui-tab-view id="View3">
        <ftui-view-section>
          <ftui-label class="size-3" margin="1" color="dark">Aktuelle Werte</ftui-label>

          <ftui-view-item>
            <ftui-icon slot="start" name="thermometer-3" color="blue"></ftui-icon>
            Außentemp.
            <ftui-label class="cell size-1" slot="end" color="blue" [text]="dim_Aussentemperatur:state_ftui3" unit="°C"></ftui-label>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="shower" color="brown"></ftui-icon>
            Warmwassertemperatur
            <ftui-label slot="end" color="blue" [text]="dim_Warmwassertemperatur:state" unit="°C"></ftui-label>
          </ftui-view-item>

          <ftui-label class="size-3" margin="1" color="dark">Dimplex Steuerung</ftui-label>

          <ftui-view-item>
            <ftui-icon slot="start" name="repeat" color="brown"></ftui-icon>
            WW-Umwälzung           
            <ftui-dropdown id="opt1" [value]="HM_2C4F29:state" (value)="set HM_2C4F29 ">
              <option value="on">An</option>
              <option value="off">Aus</option>
              <option value="on-for-timer 1800">30 Minuten</option>
              <option value="on-for-timer 3600">1 Stunde</option>
              <option value="on-for-timer 7200">2 Stunden</option>
              <option value="on-for-timer 10800">3 Stunden</option>
              <option value="on-for-timer 14400">4 Stunden</option>
              <option value="on-for-timer 18000">5 Stunden</option>
              <option value="on-for-timer 21600">6 Stunden</option>
              <option value="on-for-timer 25200">7 Stunden</option>
              <option value="on-for-timer 28800">8 Stunden</option>
            </ftui-dropdown>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="thermometer-3" color="brown"></ftui-icon>
            WW-Soll
            <ftui-dropdown id="opt2" [value]="dim_WarmwasserSollTemperatur:state"
              (value)="set dim_WarmwasserSollTemperatur ">
              <option value="15">15 Grad</option>
              <option value="48">48 Grad</option>
              <option value="49">49 Grad</option>
              <option value="50">50 Grad</option>
              <option value="55">55 Grad</option>
              <option value="60">60 Grad</option>
            </ftui-dropdown>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="retweet" color="brown"></ftui-icon>
            WW Hysterese           
            <ftui-dropdown id="opt3" [value]="dim_WarmwasserHysterese:state" (value)="set dim_WarmwasserHysterese ">
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="15">15</option>
            </ftui-dropdown>
          </ftui-view-item>

          <ftui-view-item>
            <ftui-icon slot="start" name="toggle-on" color="blue"></ftui-icon>
            Betriebsmodus
            <ftui-dropdown id="opt4" [value]="dim_Betriebsmodus" (value)="set dim_Betriebsmodus ">
              <option value="Sommer">Sommer</option>
              <option value="Auto">Auto</option>
              <option value="2teWaermeerzeuger">2 WE</option>
            </ftui-dropdown>
          </ftui-view-item>

        </ftui-view-section>
      </ftui-tab-view>

    </ftui-view>
  </ftui-main>

</body>

Jojo11

#3422
14 Juni 2023, 17:31:21
Mir ist aufgefallen, dass beim knob Widget mit Farbverlauf dieser Verlauf nicht mit der eingestellten Drehung mitskaliert/-dreht:


Code Auswählen
<ftui-knob value="500" color="ok-warning-alert" has-arc min="0" max="1000" start-angle="-210" end-angle="-90"></ftui-knob>
<ftui-knob value="500" color="ok-warning-alert" has-arc min="0" max="1000"></ftui-knob>
<ftui-knob value="500" color="ok-warning-alert" has-arc min="0" max="1000" start-angle="-90" end-angle="30"></ftui-knob>
Ist das so gewollt oder habe ich mir vielleicht doch unbewusst irgendwo etwas zerschossen?

Jojo11

#3423
15 Juni 2023, 21:28:44
Kann man eigentlich in map und/oder step auch RGB- oder html-Farbwerte angeben irgendwie?
Wenn ich in der user.css z.B. Folgendes angebe, wird das in map ignoriert  ::)

Code Auswählen
:root {
  --myred: #ad3333;
}
Code Auswählen
<ftui-icon name="battery" [color]="dummy | map('-1:myred, 0:black')" >

yersinia

#3424
16 Juni 2023, 07:36:54
Du definierst so "nur" eine Variable:
Zitat von: Jojo11 am 15 Juni 2023, 21:28:44Wenn ich in der user.css z.B. Folgendes angebe, wird das in map ignoriert  ::)

Code Auswählen
:root {
  --myred: #ad3333;
}

Du musst es allerdings noch einer Farbe hinzufügen, analog zu den color-attributes, in etwa so:
Code Auswählen
:root {
  --myredcolor: #ad3333;
}

[color="myread"] {
  --color-base: var(--myredcolor);
  --color-contrast: var(--primary-contrast-color);
}bzw einfacher wenn du myredcolor nicht mehrfach benötigst:
Code Auswählen
[color="myread"] {
  --color-base: #ad3333;
  --color-contrast: var(--primary-contrast-color);
}
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Jojo11

#3425
16 Juni 2023, 07:41:36
Jetzt habe ich es verstanden  :)
Vielen Dank!

Jojo11

#3426
16 Juni 2023, 11:36:43
Und das nächste Thema, was beim Umstieg auffällt:
Code Auswählen
data-fix="3"Bei FTUI2 führte ein 3,200 zu 3,200 - bei FTUI3 werden die Nullen nicht aufgefüllt, so dass aus 3,200 ein 3,2 wird. Kann ich das irgendwo ändern oder umgehen? Wenn man mehrere Zahlen untereinander stehen hat, sieht das so zerpflückt aus  ::)

yersinia

#3427
16 Juni 2023, 11:40:51
das müsste mit der pipe fix(n) gehen.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Jojo11

#3428
16 Juni 2023, 11:54:04
Zitat von: yersinia am 16 Juni 2023, 11:40:51das müsste mit der pipe fix(n) gehen.

Top! Funktioniert, danke. So langsam fange ich an, diese pipes zu verstehen  :)

Dracolein

#3429
06 Juli 2023, 20:24:26
Nachgefragt, weil es mir grade erst aufgefallen ist:
Hat sich bei den Popups etwas geändert, weil meine nicht mehr halbtransparent sind (Parameter opacity=0.7 zum Beispiel)
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

mr_petz

#3430
06 Juli 2023, 21:30:33
@Draco

Es wurde nichts geändert.
Das Attribute opacity ist für das drumherum (overlay) des popup zuständig und ist standardmäßig 0.5 und wird so angegeben:
Code Auswählen
opacity="0.6"
Das popup ansich ist nicht transparent oder teiltransparent.

LG mr_petz

Dracolein

#3431
06 Juli 2023, 21:46:43
Kopfkratz, ich könnte schwören, dass die Popups auch wahlweise leicht transparent waren  :o
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

mr_petz

#3432
06 Juli 2023, 22:01:20
Dann hast du eine CSS-Regel oder Styleeintrag.

megadodopublications

#3433
16 Juli 2023, 17:28:33
Hallo in die Runde,

ich suche eine Möglichkeit, bei den Step-Angaben auf Readings zB in einem Dummy zu zugreifen, also zB sowas:

Code Auswählen
<ftui-icon
    [name]="dummy1 | map('on: lightbulb-on, off: lightbulb')"
    [color]="ftuitest | step('[dummy:schwellwert_rot]: success, [dummy:schwellwert_warning]: warning, [dummy:schwellwert_danger]: danger')">
</ftui-icon>
Das hätte den Charme, die Farben ohne Änderung am HTML anpassen zu können.

Danke und Gruß
Ralph

mr_petz

#3434
16 Juli 2023, 18:34:21
@mega

Eine Option wäre über style zugehen. Bsp.:
Code Auswählen
[style]="dummy999 | map('schwellwert_rot:`color: var(--success);`, schwellwert_warning:`color: var(--warning);`')"
besser wäre da aber map.

Ich verstehe nur nicht ganz dein Anliegen? Mit:
Code Auswählen
[color]="dummy | map('schwellwert_rot: success, schwellwert_warning: warning, schwellwert_danger: danger')">
sollte es doch auch gehen...

LG
Drucken
Nach oben Seiten 1 ... 227 228 229 230 231 ... 240
Benutzer-Aktionen