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 (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.
<ftui-label [text]="Pollenflug:Ambrosia | map('0:keine, 1:geringe, 2:erhöhte, 3:hohe')"></ftui-label>
Hier der ganze Code
<!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
@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
@mr.petz
danke das war der Hinweis
so sieht der Code jetzt aus:
<!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
@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
Hi,
so habe mal in mühsamer Kleinarbeit Icons erzeugt :o
Hier der Code zum Bild:
<!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
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.
also ich habe lediglich eine Übersicht für das maximum von heute + 2 Tage mit folgendem Code - ausgelagert in eine separate Datei:
Screenshot 2023-09-28 214224.png
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:
<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>
Screenshot 2023-09-28 215106.png
Das Popup selbst zeigt bei nur die Readingsgroup. Da sieht deine Tabelle deutlich schöner aus...
<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>
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
Und dann habe ich mal einen Scrollbalken eingebaut:
<!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
Entweder so im <table> Bsp.:
<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.:
<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
@ 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
Ps.
Wenn du das popup über die ganze Seite haben möchtest, musst du:
position="page"
mit in die popup def. rein schreiben...
LG
Hallo zusammen,
wie versprochen, das PopUp, nach dem langen Wochenende getestet und dank den Hinweisen von Mr. Petz in Funktion.
<!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
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.
<!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
Hi Gerhard,
sollte nun passen.
LG
RAlf