Hauptmenü

FTUI version 3

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

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 70 71 72 73 74 ... 241
Benutzer-Aktionen

Sailor

#1065
13 März 2021, 10:33:36
Hallo Eisix

Zitat von: Eisix am 12 März 2021, 23:06:23
Die Beispiele im /examples Ordner hast du gesehen?
Auf github https://github.com/knowthelist/ftui ist auch was.

Perfect - Gleich einen Favoriten Schortcut gesetzt.  :)

Gruß
    Sailor
******************************
Man wird immer besser...

Sailor

#1066
13 März 2021, 18:14:23
Hallo Mr. Petz

Zitat von: mr_petz am 13 März 2021, 09:52:10
Hier ist ein gutes Beispiel für dich:

https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/menu.html


Das ist es nicht ganz...
Ich wollte die Buttons wie in der originalen Index - Datei auf der linken Seite in Spalte 1.
Der erste Button Home verweist auf page_home.html in welcher wieder ein Gridster aufgemacht werden soll.

Dein Beispiel zielt auf die Mobil-Variante mit Toolbar ab...

Gruss
    Sailor
******************************
Man wird immer besser...

grossmaggul

#1067
13 März 2021, 19:12:06 Letzte Bearbeitung: 13 März 2021, 19:14:28 von grossmaggul
In FTUI3 funktioniert das etwas anders, als in FTUI2, Du nimmst das Beispiel aus der index.html und lagerst die Seiten mittels <content> aus.

Das kann dann z.B. so aussehen wie hier.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

#1068
14 März 2021, 00:24:36
Zitat von: Sailor am 13 März 2021, 18:14:23
Hallo Mr. Petz

Das ist es nicht ganz...
Ich wollte die Buttons wie in der originalen Index - Datei auf der linken Seite in Spalte 1.
Der erste Button Home verweist auf page_home.html in welcher wieder ein Gridster aufgemacht werden soll.

Dein Beispiel zielt auf die Mobil-Variante mit Toolbar ab...

Gruss
    Sailor

Ok.
Dann so. Menü und ext. html.
(Steht in der index https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html )
Bsp.
Code Auswählen

<ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
<ftui-column>
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>

<ftui-tab-view id="View1">
<ftui-grid-tile row="1" col="2" height="10" width="10" shape="round">
<ftui-content file="examples/contents/content-weather.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>


Gruß Thomas

rallye

#1069
14 März 2021, 11:00:07 Letzte Bearbeitung: 01 April 2021, 09:51:02 von rallye
Guten Morgen !

Ich verwende seit mehreren Wochen problemlos "kleinklima". Seit 1-2 Tagen jedoch werden die Icons nur manchmal (kann leider kein Pattern feststellen) angezeigt. Ist da irgendetwas geändert worden was ich beachten muss ?

Danke
RaspiPi v4, HM-LGW, 6x HM-TC-IT-WM-W-EU, 11x HM-CC-RT-DN, 1x HUE Bridge, 4x HUE-RC, 5x HUE White&Color, 15xHUE White, 3xHM-LC-SW1-FM, 1xHM-LC-SW2-FM, 1x ConBeeII, 15x Shelly1, 5xShellyplug, Aquara: 2x Temp-Sensor, 1x Vibrationssensor, 2x Lichtsensor, 19x Tür/Fenstersensor

ekur

#1070
14 März 2021, 18:21:51
Hallo zusammen,

aufgrund einer Überarbeitung meines FTUI habe ich mir die Version 3 angesehen und bekomme leider das Menü nicht so hin wie ich es gerne haben würde. Wobei ich nicht weiß ob ich einfach einen Bock in meinen Dateien habe oder ob die geforderte Funktionalität vielleicht noch gar nicht möglich ist.

Ich möchte gerne ein TAB Menü in einem TAB Menü darstellen, das bedeutet das je nach Anwahl des oberen Menüs unterschiedliche Unterpunkte aufgerufen werden können. In FTUI2 habe ich das über das Pagebutton Widget gelöst (siehe Bilder Menu1_alt und Menu2_alt), in FTUI sehe ich derzeit eine ähnliche Funktionalität im TAB Widget.

In FTUI 3 habe ich das mit einer einfachen Struktur mit je zwei Menüpunkten aufgebaut, das Prinzip ist sichtbar, aber es werden keine Seiteninhalte dargestellt (siehe Bilder menu1_neu und menu2_neu; der Versatz im Menu1 ist Absicht zur einfacheren Darstellung).

hier die Code Blöcke

index.html
Code Auswählen

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-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">

  <!-- when serving the page with other web servers, e.g. lighttpd -->
  <!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->

  <!-- verbose level 0-4 -->
  <meta name="debug" content="2">

  <title>FTUI3 Tab in Tab</title>
</head>

<body>


  <ftui-grid base-width="70" base-height="70" margin="5">

    <ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
      <ftui-column>
        <ftui-tab view="Index_Start_View1" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="Index_Start_View2" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather</ftui-label>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

    <ftui-tab-view id="Index_Start_View1">
      <ftui-grid-tile row="1" col="2" height="9" width="2" shape="round">
        <ftui-content file="index_1.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

      <ftui-tab-view id="Index_Start_View2">
      <ftui-grid-tile row="1" col="2" height="9" width="2" shape="round">
        <ftui-content file="index_2.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

  </ftui-grid>

</body>

</html>


index1.html (erste Unterseite)
Code Auswählen
<ftui-grid base-width="70" base-height="70" margin="5">

  <ftui-grid-tile row="1" col="2" height=8 width="1" shape="round">
     <ftui-column>
       <ftui-tab view="Index_1_View1" direction="vertical" active >
         <ftui-icon name="home1"></ftui-icon>
         <ftui-label>A1</ftui-label>
       </ftui-tab>
       <ftui-tab view="Index_1_View2" direction="vertical">
         <ftui-icon name="music"></ftui-icon>
         <ftui-label>B1</ftui-label>
       </ftui-tab>
     </ftui-column>
  </ftui-grid-tile>

   <ftui-tab-view id="Index_1_View1">
     <ftui-grid-tile row="1" col="3" height="5" width="5" shape="round">
       <div class="size-10">Tab11</div>
     </ftui-grid-tile>     
   </ftui-tab-view>

   <ftui-tab-view id="Index_1_View2">
     <ftui-grid-tile row="1" col="3" height="6" width="6" shape="round">
       <div class="size-10">Tab12</div>
     </ftui-grid-tile>
   </ftui-tab-view>
 
</ftui-grid>


index2.html
Code Auswählen
<ftui-grid base-width="70" base-height="70" margin="5">

  <ftui-grid-tile row="1" col="1" height=8 width="1" shape="round">
     <ftui-column>
       <ftui-tab view="Index_2_View1" direction="vertical">
         <ftui-icon name="home1"></ftui-icon>
         <ftui-label>A2</ftui-label>
       </ftui-tab>
       <ftui-tab view="Index_2_View2" direction="vertical">
         <ftui-icon name="music"></ftui-icon>
         <ftui-label>B2</ftui-label>
       </ftui-tab>
     </ftui-column>
  </ftui-grid-tile>

   <ftui-tab-view id="Index_2_View1">
     <ftui-grid-tile row="1" col="2" height="4" width="4" shape="round">
       <div class="size-10">Tab21</div>
     </ftui-grid-tile>     
   </ftui-tab-view>

   <ftui-tab-view id="Index_2_View2">
     <ftui-grid-tile row="1" col="2" height="7" width="7" shape="round">
       <div class="size-10">Tab22</div>
     </ftui-grid-tile>
   </ftui-tab-view>
 
</ftui-grid>


Jetzt die Frage, habe ich einen Fehler in den Dateien oder erwarte ich hier eine noch nicht vorhandene Funktionalität?

Einen schönen Abend

ekur
FHEM 5.8 auf Intel NUC, Visualisierung TabletUI auf Lenovo Tab10, Datenlogging MySQL
CUL_HM  HM-CC-RT-DN, HM-RC, HM-LC-BL1-FM, HM-PBI-4-FM, HM-SEC-SD, HM-SEC-SCo
ZWave
OWDevice:DS1420,DS18B20 an Intel NUC

mr_petz

#1071
15 März 2021, 18:24:03
@ekur

Ich denke so meinst du, oder??

Code Auswählen

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-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">

  <!-- when serving the page with other web servers, e.g. lighttpd -->
  <!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->

  <!-- verbose level 0-4 -->
  <meta name="debug" content="2">

  <title>FTUI3 Tab in Tab</title>
</head>

<body>


  <ftui-grid base-width="70" base-height="70" margin="5">

    <ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
      <ftui-column>
        <ftui-tab view="Index_Start_View1" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="Index_Start_View2" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather</ftui-label>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

<ftui-tab-view id="Index_Start_View1">
  <ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
        <ftui-tab view="Index_Start_View3" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home2</ftui-label>
        </ftui-tab>
<ftui-tab view="Index_Start_View4" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather2</ftui-label>
        </ftui-tab>
</ftui-column>
  </ftui-grid-tile>
</ftui-tab-view>

<ftui-tab-view id="Index_Start_View2">
  <ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View3" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home3</ftui-label>
        </ftui-tab>
        <ftui-tab view="Index_Start_View4" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather3</ftui-label>
        </ftui-tab>
    </ftui-column>
  </ftui-grid-tile>
</ftui-tab-view>
 
  <ftui-tab-view id="Index_Start_View3">
      <ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
        <ftui-content file="index_1.html"></ftui-content>
  </ftui-grid-tile>
  </ftui-tab-view>
  <ftui-tab-view id="Index_Start_View4">
      <ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
        <ftui-content file="index_2.html"></ftui-content>
      </ftui-grid-tile>
  </ftui-tab-view>
  </ftui-grid>
 

</body>

</html>



Das zweite Menü verschwindet aber wieder durch das "ftui-tab-view".
Anders habe ich es erstmal auf die schnelle auch nicht hinbekommen...

ekur

#1072
15 März 2021, 21:03:32
ZitatAutor: mr_petz  Ich denke so meinst du, oder??

Im Prinzip ja, mit einer kleinen Änderung, Tab1 verzweigt auf Tab1_1 und 1_2, Tab2 auf Tab 2_1 und Tab 2_2, und in den Tabs der zweiten Ordnung erfolgt dann der Seitenaufbau oder Verweis auf getrennte Dateien
siehe hier (nur der eigentliche codeblock)
Code Auswählen
<ftui-grid base-width="70" base-height="70" margin="5">

    <ftui-grid-tile row="1" col="1" height="10" width="1" shape="round">
      <ftui-column>
        <ftui-tab view="Index_Start_View1" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="Index_Start_View2" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather</ftui-label>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

<ftui-tab-view id="Index_Start_View1">
  <ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
        <ftui-tab view="Index_Start_View1_1" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home2</ftui-label>
        </ftui-tab>
<ftui-tab view="Index_Start_View1_2" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather2</ftui-label>
        </ftui-tab>
</ftui-column>
  </ftui-grid-tile>
</ftui-tab-view>

<ftui-tab-view id="Index_Start_View1_1">
  <ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
    <ftui-content file="datei_1_1.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="Index_Start_View1_2">
  <ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
    <ftui-content file="datei_1_2.html"></ftui-content>
  </ftui-grid-tile>
</ftui-tab-view>

<ftui-tab-view id="Index_Start_View2">
  <ftui-grid-tile row="1" col="2" height="9" width="1" shape="round">
<ftui-column>
<ftui-tab view="Index_Start_View2_1" direction="vertical">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home3</ftui-label>
        </ftui-tab>
        <ftui-tab view="Index_Start_View2_2" direction="vertical">
          <ftui-icon name="sun"></ftui-icon>
          <ftui-label>Weather3</ftui-label>
        </ftui-tab>
    </ftui-column>
  </ftui-grid-tile>
</ftui-tab-view>

  <ftui-tab-view id="Index_Start_View2_1">
      <ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
        <ftui-content file="datei_2_1.html"></ftui-content>
  </ftui-grid-tile>
  </ftui-tab-view>
  <ftui-tab-view id="Index_Start_View2_2">
      <ftui-grid-tile row="1" col="3" height="9" width="5" shape="round">
        <ftui-content file="datei_2_2.html"></ftui-content>
      </ftui-grid-tile>
  </ftui-tab-view>
  </ftui-grid>

Mit Deiner Struktur hast Du mir schon mal den Weg gezeigt das Menü in einer Indexdatei zu strukturieren, danke dafür.
Aber wie Du schon richtig gesehen hast ist das Problem dass die Menüstruktur zweiter Ordnung verschwindet.
Es wäre schön wenn diese Funktionalität einer Menüstruktur integriert werden könnte, ich bin leider nicht mit den Programmierkenntnisse bewandert um das selber zu machen. Oder es geht doch schon und wir wissen aktuell nur nicht wie.
FHEM 5.8 auf Intel NUC, Visualisierung TabletUI auf Lenovo Tab10, Datenlogging MySQL
CUL_HM  HM-CC-RT-DN, HM-RC, HM-LC-BL1-FM, HM-PBI-4-FM, HM-SEC-SD, HM-SEC-SCo
ZWave
OWDevice:DS1420,DS18B20 an Intel NUC

Sailor

#1073
15 März 2021, 22:20:02
Moinsen

Hat Jemand in ftui ein Reading - abhängiges Stylesheet zum ändern des Hintergrunds hinbekommen?

In ftui 2 hatte ich das so gelöst:
index.html:
Code Auswählen

<!-- Different Stylesheet depending on daylight conditions calculated by the astro module -->
<link rel="stylesheet" href="css/lightscene-0.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/lightscene-1.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/lightscene-2.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="2" data-get-off="!2" />
<link rel="stylesheet" href="css/lightscene-3.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="3" data-get-off="!3" />
<link rel="stylesheet" href="css/lightscene-4.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="4" data-get-off="!4" />
<link rel="stylesheet" href="css/lightscene-5.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="5" data-get-off="!5" />
<link rel="stylesheet" href="css/lightscene-6.css" data-type="theme" data-device="OS_Astro" data-get="light" data-get-on="6" data-get-off="!6" />


lightscene-0.css:
Code Auswählen

body {
    background-color: transparent;
    background-image: url('../images/Background-0.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
background-size: cover;
background-clip: border-box;
}
.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}


Danke und Gruß
    Sailor
******************************
Man wird immer besser...

andies

#1074
15 März 2021, 22:24:01
Danke für das tolle Tool, das Ihr bereitstellt. Ich hatte ein wenig Anlaufschwierigkeiten, aber dank der examples ist das sehr eingängig (die github-Seite ist auch informativ).
FHEM 6.1 auf RaspPi4 (Raspbian:  6.6.28+; Perl: v5.36.0)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

yersinia

#1075
16 März 2021, 08:30:02
Zitat von: Sailor am 15 März 2021, 22:20:02Hat Jemand in ftui ein Reading - abhängiges Stylesheet zum ändern des Hintergrunds hinbekommen?
Interessante Frage. Ich wüsste adhoc nicht, ob dies derzeit geht.

Ich würde versuchen, den style des body elements via ftui-binding zu ändern. Ich vermute (!), dass sich nur der Hintergrund ändert?
Eine Lösungsansatz wäre zum Beispiel
Code Auswählen
<!-- html header kram -->
<body ftui-binding [style]="OS_Astro:light | map('`0`:`background-image: url('../images/Background-0.png');`, `1`:`background-image: url('../images/Background-1.png');`, `2`:`background-image: url('../images/Background-2.png');`, `3`:`background-image: url('../images/Background-3.png');`, `4`:`background-image: url('../images/Background-4.png');`, `5`:`background-image: url('../images/Background-5.png');`, `6`:`background-image: url('../images/Background-6.png');`')">
<!-- content -->
</body>
</html>
Oder so:
Code Auswählen
<!-- html header kram -->
<body ftui-binding [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">
<!-- content -->
</body>
</html>
mit diesem CSS:
Code Auswählen
body {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-clip: border-box;
}
body.background-0 { background-image: url('../images/Background-0.png'); }
body.background-1 { background-image: url('../images/Background-1.png'); }
body.background-2 { background-image: url('../images/Background-2.png'); }
body.background-3 { background-image: url('../images/Background-3.png'); }
body.background-4 { background-image: url('../images/Background-4.png'); }
body.background-5 { background-image: url('../images/Background-5.png'); }
body.background-6 { background-image: url('../images/Background-6.png'); }

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}


Ansonsten kannst du das ftui-binding auch im link element versuchen - kann aber leider nicht sagen ob das funktioniert:
Code Auswählen
<link ftui-binding rel="stylesheet" [link]="OS_Astro:light | map('`0`:`css/lightscene-0.css`, `1`:`css/lightscene-1.css`, `2`:`css/lightscene-2.css`, `3`:`css/lightscene-3.css`, `4`:`css/lightscene-4.css`, `5`:`css/lightscene-5.css`, `6`:`css/lightscene-6.css`')" />
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

Sailor

#1076
16 März 2021, 12:57:20
Zitat von: yersinia am 16 März 2021, 08:30:02
Interessante Frage. Ich wüsste adhoc nicht, ob dies derzeit geht.

Habe alle drei nicht zum Laufen gebracht.

Der Code
Code Auswählen

<body style="background-image: url('./images/Background-6.png');">

zeigt mir brav das Bild an.

Der Code
Code Auswählen

<body ftui-binding [style]="OS_Astro:light | map('`0`:`"background-image: url('./images/Background-0.png');"`, `1`:`"background-image: url('./images/Background-1.png');"`, `2`:`"background-image: url('./images/Background-2.png');"`, `3`:`"background-image: url('./images/Background-3.png');"`, `4`:`"background-image: url('./images/Background-4.png');"`, `5`:`"background-image: url('./images/Background-5.png');"`, `6`:`"background-image: url('./images/Background-6.png');`')">

zeigt mir nur einen roten gestrichelten Rahmen, wo eigentlich das Bild sein sollte.
Immerhin etwas...

Hast Du noch eine Idee?

Gruß
    Sailor
******************************
Man wird immer besser...

grossmaggul

#1077
16 März 2021, 13:27:27 Letzte Bearbeitung: 16 März 2021, 13:34:59 von grossmaggul
Zitat
Code Auswählen
map('`0`:`[b]"[/b]background-image: url('./images/Background-0.png');[b]"[/b]`,
Ist das richtig mit den Anführungszeichen?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

moonsorrox

#1078
16 März 2021, 13:48:16
gestrichelter Rahmen bedeutet "Fehler im Code"
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

yersinia

#1079
16 März 2021, 13:55:28
Zitat von: grossmaggul am 16 März 2021, 13:27:27Ist das richtig mit den Anführungszeichen?
Das ist definitiv falsch.
Falsch ist auch
Code Auswählen
`0`:`background-image: url('../images/Background-0.png');`,
man müsste die zweiten ' maskieren, vlt klappt das ja so:
Code Auswählen
`0`:`background-image: url(\'../images/Background-0.png\');`,
Aber bevor man das -^ versucht, würde ich es eher über einen Selektor versuchen. Möglicherweise habe ich auch ftui-binding falsch benutzt (ftui-binding vs ftui-binding="class").
Code Auswählen
<body ftui-binding="class" [class]="OS_Astro:light | map('`0`:`background-0`, `1`:`background-1`, `2`:`background-2`, `3`:`background-3`, `4`:`background-4`, `5`:`background-5`, `6`:`background-6`')">
zusammen mit einer CSS Definition:
Code Auswählen
body {
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-clip: border-box;
}
body.background-0 { background-image: url('../images/Background-0.png'); }
body.background-1 { background-image: url('../images/Background-1.png'); }
body.background-2 { background-image: url('../images/Background-2.png'); }
body.background-3 { background-image: url('../images/Background-3.png'); }
body.background-4 { background-image: url('../images/Background-4.png'); }
body.background-5 { background-image: url('../images/Background-5.png'); }
body.background-6 { background-image: url('../images/Background-6.png'); }

.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}

Ich weiss nicht, ob und wie du das .semitransparent nutzt.
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
Drucken
Nach oben Seiten 1 ... 70 71 72 73 74 ... 241
Benutzer-Aktionen