Pollenflug für FTUI3

Begonnen von Kuehnhackel, 21 September 2023, 09:29:16

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Kuehnhackel

21 September 2023, 09:29:16
Hallo zusammen,

da meine bessere Hälfte unter den Pollen sehr leidet, habe ich mich mal hingesetzt und was produktives daraus gemacht.

Grundlage war diese Thema https://forum.fhem.de/index.php?topic=128586.0

Habe es dann inkl. bunte Icons ins FTUI 3 umgesetzt.

Würde jedoch gerne noch entsprechend der Belastung die "Ergebnisse" zur besseren Übesicht einfärben.

Code Auswählen
<ftui-label [text]="Pollenflug:Ambrosia | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label>
Hier der ganze Code
Code Auswählen
<!DOCTYPE html>
<html>
<head>
  <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">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <!-- verbose level 0-4 -->
  <meta name="debug" content="4">
  <meta name='viewport' content='width=device-width'>
  <title>Home FTUI</title>
</head>
<body>


 
    <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top;border:no}
</style>

<ftui-grid base-width="150" base-height="120" margin="1" shape="round">
      <ftui-grid-tile row="2.3" col="2.05" height="4" width="5">
      <ftui-grid-header size="8">Belastung durch Pollenflug</ftui-grid-header>
      <ftui-label size="6" [text]="Pollenflug:message"></ftui-label>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-baqh"><ftui-icon name="ambrosia_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="ampfer_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="beifuss_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="birke_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="buche_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="erle_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="esche_neu" size="6"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ambrosia | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ampfer | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Beifuss | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Birke | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Buche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Erle | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Esche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
  </tr> 
</tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-baqh"><ftui-icon name="graeser_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="hasel_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="pappel_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="roggen_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="ulme_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="wegerich_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="weide_neu" size="6"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Gräser | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Hasel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Pappel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Roggen | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ulme | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Wegerich | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Weide | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label></td>
  </tr>
</tbody>
</table>

</ftui-grid>
</body>
</html>
Vielleicht hat ja jemand einen Tipp.
Darüber würde ich mich freuen.

LG Ralf

mr_petz

#1
21 September 2023, 17:49:12 Letzte Bearbeitung: 21 September 2023, 18:39:11 von mr_petz
@Kuehnhackel

Texte einfärben geht mit einem color-binding.
Bsp:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/label.html#L51

Edit:
Oder halt nur color ohne binding.
Geht bei den meisten Komponenten.

LG

Kuehnhackel

#2
22 September 2023, 08:50:14
@mr.petz

danke das war der Hinweis

so sieht der Code jetzt aus:
Code Auswählen
<!DOCTYPE html>
<html>
<head>
  <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">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <!-- verbose level 0-4 -->
  <meta name="debug" content="4">
  <meta name='viewport' content='width=device-width'>
  <title>Home FTUI</title>
</head>
<body>


 
    <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top;border:no}
</style>

<ftui-grid base-width="150" base-height="120" margin="1" shape="round">
      <ftui-grid-tile row="2.3" col="2.05" height="4" width="5">
      <ftui-grid-header size="8">Belastung durch Pollenflug</ftui-grid-header>
      <ftui-label size="6" [text]="Pollenflug:message"></ftui-label>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-baqh"><ftui-icon name="ambrosia_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="ampfer_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="beifuss_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="birke_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="buche_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="erle_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="esche_neu" size="6"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ambrosia | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ampfer | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Beifuss | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Birke | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Buche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Erle | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Esche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
  </tr> 
</tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-baqh"><ftui-icon name="graeser_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="hasel_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="pappel_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="roggen_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="ulme_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="wegerich_neu" size="6"></td>
    <td class="tg-baqh"><ftui-icon name="weide_neu" size="6"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Gräser | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Hasel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Pappel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Roggen | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"><ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ulme | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Wegerich | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Weide | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
  </tr>
</tbody>
</table>

</ftui-grid>
</body>
</html>
Vielleicht sieht jemand noch Verbesserungsbedarf.

LG

Jones

#3
27 September 2023, 15:22:36
@ralf
sieht gut aus!
ein link um die fotos runterzuladen fehlt.

Zitat von: Kuehnhackel am 22 September 2023, 08:50:14Vielleicht sieht jemand noch Verbesserungsbedarf.
die anzeige ist mir zu groß als default, deshalb wäre mein verbesserungsvorschlag:
- eine kleine vorschau mit icons der pflanzen (gefärbt wie bei deinem pollenbelastung-text)
- bei klick auf die vorschau: deine tabelle vom obigen screenshot als popup.

LG
[FTUI3] Addons: https://github.com/mr-petz/ftui/tree/addons
Manchmal habe ich Angst, dass ich euch nerve, aber dann fällt mir ein: Ihr seid ja freiwillig hier!

Kuehnhackel

#4
28 September 2023, 16:27:06
Hi,

so habe mal in mühsamer Kleinarbeit Icons erzeugt  :o

Hier der Code zum Bild:
Code Auswählen
<!DOCTYPE html>
<html>
<head>

  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="user.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">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <!-- verbose level 0-4 -->
  <meta name="debug" content="4">
  <meta name='viewport' content='width=device-width'>
  <title>Home FTUI</title>
</head>
<body>

 <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:5px 2px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:5px 2px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top;border:no}
</style>

<ftui-grid base-width="110" base-height="65" margin="1" shape="round">
      <ftui-grid-tile row="2.3" col="2.05" height="4" width="5">
      <ftui-grid-header size="8">Belastung durch Pollenflug</ftui-grid-header>
     
     
   


<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
 </thead>
  <tr>
    <td><ftui-icon name="ambrosia_ink" size="5" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ampfer_ink" size="5" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="beifuss_ink" size="5"[color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="birke_ink" size="5"[color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="buche_ink" size="5" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="erle_ink" size="5" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="esche_ink" size="5" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>
<tbody>

  <tr>
    <td><ftui-icon name="graeser_ink" size="5" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="hasel_ink" size="5" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="pappel_ink" size="5" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="roggen_ink" size="5" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ulme_ink" size="5" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="wegerich_ink" size="5" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="weide_ink" size="5" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </table>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>
Beim PopUp breche ich mir gerade die Ohren. Vielleicht hat da jemand den entsprechenden Tipp  8)

Wenn PopUp eingebaut, stelle ich die Icons natürlich zur Verfügung.

Liebe Grüße

Ralf

mr_petz

#5
28 September 2023, 18:48:22 Letzte Bearbeitung: 28 September 2023, 19:11:46 von mr_petz
Hi Ralf, erkläre bitte kurz wie/was/wo passieren soll bzgl popup und was da rein soll bzw was du erreichen willst
Oder sag was nicht funktioniert im popup.

LG

Edit:
ich glaube ich weis was du möchtest.
wenn du das @click fürs popup in der <table> haben möchtest muss ftui-binding mit rein und das ganze muss 2 mal passieren.
besser wäre alles in eine <ftui-cell> zu packen und da das @click fürs popup rein.

tobi01001

#6
28 September 2023, 21:52:28
also ich habe lediglich eine Übersicht für das maximum von heute + 2 Tage mit folgendem Code - ausgelagert in eine separate Datei:
Du darfst diesen Dateianhang nicht ansehen.
Code Auswählen
ftui-column>
<ftui-icon name="../../images/openautomation/weather_pollen"
[color]="Pollenflug:fc1_maximum  | map('none:dark, low:ok, mod:warning, high:alert')"
[class-name]="Pollenflug:fc1_maximum   | map('high=`hop`')"
>
</ftui-icon>
<ftui-label>heute</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="../../images/openautomation/weather_pollen"

[color]="Pollenflug:fc2_maximum  | map('none:dark, low:ok, mod:warning, high:alert')"
[class-name]="Pollenflug:fc2_maximum   | map('high=`hop`')"
>
</ftui-icon>
<ftui-label>morgen</ftui-label>
</ftui-column>
<ftui-column>
<ftui-icon name="../../images/openautomation/weather_pollen"
[color]="Pollenflug:fc3_maximum  | map('none:dark, low:ok, mod:warning, high:alert')"
[class-name]="Pollenflug:f3_maximum   | map('high=`hop`')"
>
</ftui-icon>
<ftui-label>übermorgen</ftui-label>
</ftui-column>
Ich brauche eigentlich nur "Gräser".
Übergeordnet wird dann mit Klick auf das Grid (egal wohin) ein Popup geöffnet:
Code Auswählen
<ftui-grid-tile row="7"  col="1"  height="2"  width="5" @click="Pollenflug.open()"> <!-- Pollen -->
  <ftui-grid-header [color]="Pollenflug:fc1_maximum  | map('none:dark, mod:warning, high:alert')">Pollenflug</ftui-grid-header>
  <ftui-row>
    <ftui-content lazy file="./content/content-pollen-ftui-column.html"></ftui-content>
  </ftui-row>
</ftui-grid-tile>
Du darfst diesen Dateianhang nicht ansehen.
Das Popup selbst zeigt bei nur die Readingsgroup. Da sieht deine Tabelle deutlich schöner aus...
Code Auswählen
<ftui-popup id="Pollenflug" height="70%" timeout="30">
<!-- Pollen Popup? -->
<style>
  #readings_group svg {
    width: 25%;
    height: 25%;
  }
</style>
<header>Pollenflug</header>
  <ftui-row>
    <ftui-cell>
      <ftui-content lazy id="readings_group" [content]="rgPollenvorhersage | getHTML('rgPollenvorhersage')"></ftui-content>
    </ftui-cell>
  </ftui-row>
</ftui-popup>
FHEM@UbuntuServer on Lenovo ThinkCentre M900 [i5-6500T / 8GB RAM] MySQL-DbLog, Grafana, FTUI3 / HmIP incl. CCU3 / LGESS / Wärempumpe über TA CMI und CANoE / Shellies u.v.m.

Kuehnhackel

#7
29 September 2023, 10:14:20
Zitat von: mr_petz am 28 September 2023, 18:48:22Hi Ralf, erkläre bitte kurz wie/was/wo passieren soll bzgl popup und was da rein soll bzw was du erreichen willst
Oder sag was nicht funktioniert im popup.

LG

Edit:
ich glaube ich weis was du möchtest.
wenn du das @click fürs popup in der <table> haben möchtest muss ftui-binding mit rein und das ganze muss 2 mal passieren.
besser wäre alles in eine <ftui-cell> zu packen und da das @click fürs popup rein.

Hi Mr. Petz,

ich bekomme den Anfang schon nicht hin, trotz allem was ich bisher gelesen habe. Wahrscheinlich etwas überlesen oder nicht verstanden.

Also, ich würde gerne meine "bunte Icons mit der Pollenvorhersage" per Klick öffnen. Diese befinden sich in meiner "view4.html"

LG Ralf

Kuehnhackel

#8
29 September 2023, 10:17:38
Und dann habe ich mal einen Scrollbalken eingebaut:

Code Auswählen
<!DOCTYPE html>
<html>
<head>
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="user.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">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <!-- verbose level 0-4 -->
  <meta name="debug" content="4">
  <meta name='viewport' content='width=device-width'>
  <title>Home FTUI</title>
</head>
<body>

  <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top;border:no}
</style>

<ftui-grid base-width="120" base-height="110" margin="1" shape="round">
      <ftui-grid-tile row="2.3" col="2.05" height="4" width="5">
      <ftui-grid-header size="8">Belastung durch Pollenflug</ftui-grid-header>

<table style="width:120 height:50" >
<thead>
  <tr>
    <th><ftui-row class="marquee"><ftui-label size="6" [text]="Pollenflug:message" class="marquee"></ftui-label></ftui-row></th>
  </tr>
</thead>
</tbody>
</table>
           
<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
 </thead>
  <tr>
    <td><ftui-icon name="ambrosia_ink" size="5" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ampfer_ink" size="5" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="beifuss_ink" size="5"[color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="birke_ink" size="5"[color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="buche_ink" size="5" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="erle_ink" size="5" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="esche_ink" size="5" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ambrosia"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ampfer"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Beifuss"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Birke"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Buche"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Erle"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Esche"></ftui-label></td>
  </tr>
</tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>
<tbody>

  <tr>
    <td><ftui-icon name="graeser_ink" size="5" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="hasel_ink" size="5" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="pappel_ink" size="5" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="roggen_ink" size="5" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ulme_ink" size="5" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="wegerich_ink" size="5" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="weide_ink" size="5" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
   <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Gräser"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Hasel"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Pappel"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Roggen"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ulme"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Wegerich"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Weide"></ftui-label></td>
  </tr>
</table>
</ftui-grid-tile>

 </ftui-grid>

</body>
</html>
Siehe Foto

LG Ralf

mr_petz

#9
29 September 2023, 15:44:43
Entweder so im <table> Bsp.:
Code Auswählen
<table class="tg" ftui-binding @click="pop_graeser.open()">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
 </thead>
  <tr>
    <td><ftui-icon name="ambrosia_ink" size="5" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ampfer_ink" size="5" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="beifuss_ink" size="5"[color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="birke_ink" size="5"[color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="buche_ink" size="5" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="erle_ink" size="5" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="esche_ink" size="5" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
</table>

<table class="tg" ftui-binding @click="pop_graeser.open()">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>
<tbody>

  <tr>
    <td><ftui-icon name="graeser_ink" size="5" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="hasel_ink" size="5" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="pappel_ink" size="5" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="roggen_ink" size="5" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ulme_ink" size="5" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="wegerich_ink" size="5" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="weide_ink" size="5" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </table>
 
 <ftui-popup id="pop_graeser">
 Deine großer View
 </ftui-popup>

oder so mit <ftui-cell>Bsp.:
Code Auswählen
<ftui-cell @click="pop_graeser.open()">
<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
 </thead>
  <tr>
    <td><ftui-icon name="ambrosia_ink" size="5" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ampfer_ink" size="5" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="beifuss_ink" size="5"[color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="birke_ink" size="5"[color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="buche_ink" size="5" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="erle_ink" size="5" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="esche_ink" size="5" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>
<tbody>

  <tr>
    <td><ftui-icon name="graeser_ink" size="5" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="hasel_ink" size="5" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="pappel_ink" size="5" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="roggen_ink" size="5" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ulme_ink" size="5" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="wegerich_ink" size="5" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="weide_ink" size="5" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </table>
</ftui-cell>

 <ftui-popup id="pop_graeser">
 Deine großer View
 </ftui-popup>

LG

Kuehnhackel

#10
30 September 2023, 10:02:49
@ Mr.Petz, danke werde ich testen. Wahrscheinlich erst nach dem langen Wochenende.

Ich werde berichten.

Schönes Wochenende.

Sonnige Grüße von der Ostsee

Ralf

mr_petz

#11
30 September 2023, 10:15:33
Ps.
Wenn du das popup über die ganze Seite haben möchtest, musst du:
position="page"
mit in die popup def. rein schreiben...

LG

Kuehnhackel

#12
04 Oktober 2023, 11:48:52
Hallo zusammen,

wie versprochen, das PopUp, nach dem langen Wochenende getestet und dank den Hinweisen von Mr. Petz in Funktion.

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

  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="user.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">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <!-- verbose level 0-4 -->
  <meta name="debug" content="4">
  <meta name='viewport' content='width=device-width'>
  <title>Pollenflug</title>
</head>
<body>

 <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:5px 2px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:5px 2px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top;border:no}
</style>

<ftui-grid base-width="110" base-height="65" margin="1" shape="round">
      <ftui-grid-tile row="2.3" col="2.05" height="4" width="5">
      <ftui-grid-header size="8">Belastung durch Pollenflug</ftui-grid-header>
     
     
   

<ftui-cell @click="pop_graeser.open()">

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
 </thead>
  <tr>
    <td><ftui-icon name="ambrosia_ink" size="5" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ampfer_ink" size="5" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="beifuss_ink" size="5"[color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="birke_ink" size="5"[color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="buche_ink" size="5" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="erle_ink" size="5" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="esche_ink" size="5" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>

<tbody>
  <tr>
    <td><ftui-icon name="graeser_ink" size="5" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="hasel_ink" size="5" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="pappel_ink" size="5" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="roggen_ink" size="5" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ulme_ink" size="5" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="wegerich_ink" size="5" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="weide_ink" size="5" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
 </table>
</ftui-cell>

<ftui-popup id="pop_graeser" timeout="0" position="page" width="900px" height="450px">

<table>
<thead>
  <tr>
    <th><ftui-row class="marquee"><ftui-label size="6" [text]="Pollenflug:message" class="marquee"></ftui-label></ftui-row></th>
  </tr>
</thead>
</table>


<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
</thead>
<tbody>
  <tr>
    <td><ftui-icon name="ambrosia_neu" size="8"></td>
    <td><ftui-icon name="ampfer_neu" size="8"></td>
    <td><ftui-icon name="beifuss_neu" size="8"></td>
    <td><ftui-icon name="birke_neu" size="8"></td>
    <td><ftui-icon name="buche_neu" size="8"></td>
    <td><ftui-icon name="erle_neu" size="8"></td>
    <td><ftui-icon name="esche_neu" size="8"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ambrosia | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ampfer | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Beifuss | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Birke | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Buche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Erle | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Esche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
  </tr> 
</tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>

<tbody>
  <tr>
    <td><ftui-icon name="graeser_neu" size="8"></td>
    <td><ftui-icon name="hasel_neu" size="8"></td>
    <td><ftui-icon name="pappel_neu" size="8"></td>
    <td><ftui-icon name="roggen_neu" size="8"></td>
    <td><ftui-icon name="ulme_neu" size="8"></td>
    <td><ftui-icon name="wegerich_neu" size="8"></td>
    <td><ftui-icon name="weide_neu" size="8"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Gräser | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Hasel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Pappel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Roggen | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"><ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ulme | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Wegerich | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Weide | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
  </tr>
</tbody>
</table>
</ftui-popup>

</ftui-grid-tile>
</ftui-grid>
</body>
</html>

Ich habe zusätzlich für den PopUp noch die "Abmessungen" mit angegeben.

Zusätzlich habe ich noch ein Marquee eingebaut, damit es etwas "bewegter" ist.

Den "timeout="0"" habe ich gewählt, damit das Fenster manuell geschlossen werden muss.

Bei Fragen gerne fragen  8)

Liebe Grüße

Ralf

BigGB

#13
04 Oktober 2023, 19:34:43
Zitat von: Kuehnhackel am 04 Oktober 2023, 11:48:52Hallo zusammen,

wie versprochen, das PopUp, nach dem langen Wochenende getestet und dank den Hinweisen von Mr. Petz in Funktion.

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

  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="user.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">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <!-- verbose level 0-4 -->
  <meta name="debug" content="4">
  <meta name='viewport' content='width=device-width'>
  <title>Pollenflug</title>
</head>
<body>

 <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:5px 2px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:5px 2px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top;border:no}
</style>

<ftui-grid base-width="110" base-height="65" margin="1" shape="round">
      <ftui-grid-tile row="2.3" col="2.05" height="4" width="5">
      <ftui-grid-header size="8">Belastung durch Pollenflug</ftui-grid-header>
    
    
  

<ftui-cell @click="pop_graeser.open()">

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
 </thead>
  <tr>
    <td><ftui-icon name="ambrosia_ink" size="5" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ampfer_ink" size="5" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="beifuss_ink" size="5"[color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="birke_ink" size="5"[color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="buche_ink" size="5" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="erle_ink" size="5" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="esche_ink" size="5" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>

<tbody>
  <tr>
    <td><ftui-icon name="graeser_ink" size="5" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="hasel_ink" size="5" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="pappel_ink" size="5" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="roggen_ink" size="5" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="ulme_ink" size="5" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="wegerich_ink" size="5" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
    <td><ftui-icon name="weide_ink" size="5" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-icon></td>
  </tr>
 </tbody>
 </table>
</ftui-cell>

<ftui-popup id="pop_graeser" timeout="0" position="page" width="900px" height="450px">

<table>
<thead>
  <tr>
    <th><ftui-row class="marquee"><ftui-label size="6" [text]="Pollenflug:message" class="marquee"></ftui-label></ftui-row></th>
  </tr>
</thead>
</table>


<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Ambrosia"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ampfer"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Beifuss"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Birke"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Buche"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Erle"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Esche"></ftui-label></th>
   </tr>
</thead>
<tbody>
  <tr>
    <td><ftui-icon name="ambrosia_neu" size="8"></td>
    <td><ftui-icon name="ampfer_neu" size="8"></td>
    <td><ftui-icon name="beifuss_neu" size="8"></td>
    <td><ftui-icon name="birke_neu" size="8"></td>
    <td><ftui-icon name="buche_neu" size="8"></td>
    <td><ftui-icon name="erle_neu" size="8"></td>
    <td><ftui-icon name="esche_neu" size="8"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ambrosia | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ambrosia | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ampfer | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ampfer | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Beifuss | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Beifuss | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Birke | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Birke | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Buche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Buche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Erle | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Erle | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Esche | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Esche | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
  </tr> 
</tbody>
</table>

<table class="tg">
<thead>
  <tr>
    <th class="tg-baqh"><ftui-label text="Gräser"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Hasel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Pappel"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Roggen"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Ulme"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Wegerich"></ftui-label></th>
    <th class="tg-baqh"><ftui-label text="Weide"></ftui-label></th>
   </tr>
</thead>

<tbody>
  <tr>
    <td><ftui-icon name="graeser_neu" size="8"></td>
    <td><ftui-icon name="hasel_neu" size="8"></td>
    <td><ftui-icon name="pappel_neu" size="8"></td>
    <td><ftui-icon name="roggen_neu" size="8"></td>
    <td><ftui-icon name="ulme_neu" size="8"></td>
    <td><ftui-icon name="wegerich_neu" size="8"></td>
    <td><ftui-icon name="weide_neu" size="8"></td>
  </tr>
  <tr>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Gräser | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Gräser | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Hasel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Hasel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Pappel | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Pappel | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Roggen | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Roggen | map('0:white, 1:yellow, 2:orange, 3:red')"><ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Ulme | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Ulme | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Wegerich | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Wegerich | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
    <td class="tg-baqh"><ftui-label [text]="Pollenflug:Weide | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')" [color]="Pollenflug:Weide | map('0:white, 1:yellow, 2:orange, 3:red')"></ftui-label></td>
  </tr>
</tbody>
</table>
</ftui-popup>

</ftui-grid-tile>
</ftui-grid>
</body>
</html>

Ich habe zusätzlich für den PopUp noch die "Abmessungen" mit angegeben.

Zusätzlich habe ich noch ein Marquee eingebaut, damit es etwas "bewegter" ist.

Den "timeout="0"" habe ich gewählt, damit das Fenster manuell geschlossen werden muss.

Bei Fragen gerne fragen  8)

Liebe Grüße

Ralf

Hi Ralf,
gute Arbeit, gefällt mir. Leider hast in der Datei "icon_bilder_bunt.zip" die Datei "wegerich_neu.svg" vergessen ;D .
VG Gerald
FHEM 6.2 auf NUC6CAYH, Fritzbox,
MAX-, Homematic-Komponenten, WLAN-Steckdosen mit Tasmota u. MQTT
Tablet UI3

Kuehnhackel

#14
05 Oktober 2023, 08:09:27
Hi Gerhard,

sollte nun passen.

LG
RAlf
Drucken
Nach oben Seiten1
Benutzer-Aktionen