FTUI version 3

[grossmaggul]

Dann ist da aber irgendwas anderes bei Dir im Argen, ich nutze auf einem Android 8 Handy auch Fully und das klappt einwandfrei.

[moonsorrox]

Dann ist da aber irgendwas anderes bei Dir im Argen, ich nutze auf einem Android 8 Handy auch Fully und das klappt einwandfrei.

Ja.. glaube ich auch
momentan bin ich grad etwas verzweifelt, warum..?

Ich habe folgendes gemacht, alles mit der Original Demo dabei ist folgendes raus gekommen.
folgende Geräte habe ich zum Anzeigen mal getestet
Firefox, Edge, iPad, Lenovo Android Tablet, alle zeigen es richtig an, nur mein Samsung zeigt ne weiße Seite
Auf Android nutze ich den Fully Browser.


Jetzt habe ich meine Anpassungen genommen, heißt index.html, ftui.css, ftui-theme.css und der Firefox und mein Lenovo Tablet zeigen es richtig an, also kann da soviel nicht falsch sein, denke ich..!!
Alle anderen Geräte machen da irgendwelche Verschiebungen und das Samsung Tablet weigert sich wieder mit einer weißen Seite

Achso der Edge zeigt es auch richtig an, ist aber jetzt glaube ich ein Chromium Unterbau.
Wo fange ich jetzt am besten an.?

[octek0815]

Hallo,

wie kann ich bei chart nur einen bestimmten Bereich anzeigen lassen.
Das FHEM Modul Buienradar liefert die Readings rainDataStart und rainDataEnd im Format HH:mm
Ich weiß aber nicht wie ich die an Chart übergeben kann.
Leider geht als Anzeigezeitraum hour, day oder week.
Bei Day ist die Anzeige zu klein und nur der Bereich ausgefüllt den der Logproxy zurück liefert.
Und bei Hour ist das leider so das nur die aktuelle Stunde angezeigt wird auch wenn diese schon fast zu Ende ist.

Hier der FTUI3 Code...

Code Auswählen Erweitern


<ftui-chart title="Regenvorhersage" type="bar" unit="hour">
     <ftui-chart-data log="System_logProxy" spec='Func:FHEM::Buienradar::LogProxy("System_Regenvorhersage")' [update]="System_Regenvorhersage:rainDataStart:time"
          startDate="System_Regenvorhersage:rainDataStart:time" endDate="System_Regenvorhersage:rainDataEnd:time"></ftui-chart-data>
</ftui-chart>


Ich baue auf eure Hilfe. Danke!

VG
Olli

[Thyraz]

Die Chart Komponente unterstützt bisher nur die fixen Zeitbereiche.
Ich hab aber auf meiner Todo-Liste hier noch relative Zeitbereiche als PullRequest nachzuliefern.
Also die letzten x Tage, Stunden, ...

Das was du mit startDate und endDate versuchst klappt so nicht, da die angezeigte Zeitspanne über die Chart-Komponente gewählt wird und nicht über die Subkomponenten (Chart-Date).
(Es kann eben nur einen angezeigten Zeitraum geben.)

Chart setzt startDate und endDate in seinen Subkomponenten bevor der Datenabruf erfolgt,
damit diese wissen für welchen Zeitraum sie Daten laden müssen.
Wenn du da händisch einzugreifen versuchst, überschreibt die Chart-Komponente das wieder.

[octek0815]

Die Chart Komponente unterstützt bisher nur die fixen Zeitbereiche.
Ich hab aber auf meiner Todo-Liste hier noch relative Zeitbereiche als PullRequest nachzuliefern.
Also die letzten x Tage, Stunden, ...

Das was du mit startDate und endDate versuchst klappt so nicht, da die angezeigte Zeitspanne über die Chart-Komponente gewählt wird und nicht über die Subkomponenten (Chart-Date).
(Es kann eben nur einen angezeigten Zeitraum geben.)

Chart setzt startDate und endDate in seinen Subkomponenten bevor der Datenabruf erfolgt,
damit diese wissen für welchen Zeitraum sie Daten laden müssen.
Wenn du da händisch einzugreifen versuchst, überschreibt die Chart-Komponente das wieder.

Alles klar, vielen Dank für Deine ausführliche Antwort.
Dann freue ich mich auf die zukünftigen Ergänzungen.

VG

[octek0815]

@setstate

Mir ist heute beim ersten Schneefall aufgefallen, dass beim meteocons icon set N/A angezeigt wird.
In der weather.map.js scheinen noch ein paar Mappings zu fehlen, für die aber ja icons vorhanden sind.

Code Auswählen Erweitern


     'Schneefall': './icons/snowy2.svg',
     'Schneeschauer': './icons/snowy,svg',

und vielleicht auch noch

Code Auswählen Erweitern


     'Gewitter': './icons/lightning1.svg',
     'Nebel': './icons/lines,svg',


Könntest Du das bei Gelegenheit mal bitte ergänzen?

@setstate
Hier hat sich eine Fehler eingeschlichen. Da sind "," anstatt "." verwendet worden.
Dies verursacht einen unschönen Fehler (Die FHEM Webseite wird eingeblendet) bei Verwendung.

Bei...

Code Auswählen Erweitern


'Schneeschauer': './icons/snowy,svg',


müsste es snowy.svg heißen

und bei..

Code Auswählen Erweitern


'Nebel': './icons/lines,svg',


müsste es lines.svg heißen und das Komma am Ende muss weg.

VG
Olli

[setstate]

Danke, das habe ich gestern auch gefunden und schon gefixed. Muss ich nur noch hochladen.

[LuGu]

Hier hat sich eine Fehler eingeschlichen. Da sind "," anstatt "." verwendet worden.

@octek0815
Danke, muss ich wohl doch mal über eine Brille nachdenken.

Gruß
Lutz

[moonsorrox]

@setstate
@Thyraz
Ich möchte hier mal zwei Varianten von Tabellen zeigen und fragen, was läuft hier nicht richtig..?
Vorab noch im Screenshot rechts habe ich die Bezeichnung "Eingang Norden" absichtlich nciht ausgeschrieben, denn sobald ich das "e" dran setze ruscht das Wort Norden unter Eingang  weiß ich auch noch nicht warum das nicht geht, es sind ja in beiden 13 Buchstaben + Leerzeichen.

1. Screenshot ist auf dem Firefox und ebenfalls auf dem Microsoft Edge.
keine Probleme alles sieht gut aus

2. Screenshot auf meinem Lenovo Tablet mit dem Fully Browser, ich nutze dieses Tablet nur um die Anzeigen zu kontrollieren.
links passen die Abstände von Temperatur und Luftfeuchte nciht und es ragt nach unten heraus
rechts passen die ABstände gut, aber auch hier ragt es nach unten heraus.

3. Google Chrome geht gar nciht  da ist das gesamte Layout zerschossen

Hier die beiden Code Schnippsel zum drüber schauen, ich verzweifel hier an den Darstellungen, evtl. sieht jemand was hier falsch ist.

Code Auswählen Erweitern


<!-- Seite 1 - START -->
    <ftui-tab-view id="Temperaturen">
<ftui-grid-tile row="4" col="2" height="10" width="8" class="semitransparent3d">
<!--div class="size-10">Tab2</div-->
<!--table class="size-3" style="margin-left:4%; margin-right:4%; margin-bottom:4%; width:90%; height:95%; line-height:0.75em;"-->
<table class="size-3" style="margin-left:-1%; margin-right:1%; height:95%;">
<tr>
<td style="text-align:left;">
<div>Wohnzimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature" [color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)" [color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Küche</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Kueche:temperature" [color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>

</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)" [color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>HWR</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature" [color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)" [color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Gäste WC</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature" [color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)" [color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Badezimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp" [color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)" [color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Schlafzimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Schlafzimmer:temperature" [color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>

</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)" [color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Gästezimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature" [color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)" [color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')")><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Arbeitszimmer</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature" [color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)" [color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">
<div>Garage</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Garage:temperature" [color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)" [color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Eingang Norden</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Norden:temperature" [color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)" [color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td style="text-align:left;">
<div>Terrasse Süden</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:temperature" [color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)" [color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">
<div>Helligkeit</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;Lux</span></ftui-label>
</td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">
<div>Luftdruck</div>
</td>
<td style="text-align:right;">
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)" [color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;hPa</span></ftui-label>
</td>
<td></td>
</tr>
</table>

</ftui-grid-tile>
   
  <!---- ######################################## ------>  
  <ftui-grid-tile row="4" col="20" height="10" width="8" class="semitransparent3d">
            <ftui-row class="size-3">
                <ftui-column align-items="left" margin="1">
                    <ftui-label text="Wohnzimmer"></ftui-label>
                    <ftui-label text="Küche"></ftui-label>
<ftui-label text="HWR"></ftui-label>
                    <ftui-label text="Gäste WC"></ftui-label>
<ftui-label text="Badezimmer"></ftui-label>
<ftui-label text="Schlafzimmer"></ftui-label>
<ftui-label text="Gästezimmer"></ftui-label>
<ftui-label text="Arbeitszimmer"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Garage"></ftui-label>
<ftui-label text="Eingang Norde"></ftui-label>
<ftui-label text="Terrasse Süden"></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label text="Helligkeit"></ftui-label>
<ftui-label text="Luftdruck"></ftui-label>
                </ftui-column>
               
                <ftui-column align-items="right">
<ftui-label [text]="Temperatur_Wohnzimmer:temperature"
[color]="Temperatur_Wohnzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:temperature"
[color]="Temperatur_Kueche:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature"
[color]="Temperatur_HWR_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature"
[color]="Temperatur_GWC_Xiaomi:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp"
[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:temperature"
[color]="Temperatur_Schlafzimmer:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature"
[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature"
[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73: steelblue, 19: mediumpringreen, 25: crimson')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:temperature"
[color]="Temperatur_Garage:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:temperature"
[color]="Temperatur_Norden:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:temperature"
[color]="Temperatur_Terrasse:temperature | map('-73: steelblue, 0: mediumblue, 10: orange1, 15: danger, 24: crimson ')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;°C</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:luminosity | fix(1)"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;Lux</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)"
[color]="Temperatur_Terrasse:pressure | map(' 1015: crimson, 1005: mediumpringreen, 0: mediumblue')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;hPa</span></ftui-label>
                </ftui-column>
                   
                <ftui-column align-items="center">               
                    <ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)"
[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)"
[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)"
[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)"
[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)"
[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)"
[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:mediumpringreen, 40: danger, 10:orange1')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]="Temperatur_Garage:humidity | fix(0)"
[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Norden:humidity | fix(0)"
[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)"
[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0: mediumpringreen')"><span slot="end" style="margin-left:-0.5em;" class="size-1">&nbsp;%</span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
                </ftui-column>   
            </ftui-row>
      </ftui-grid-tile>

 
    </ftui-tab-view>
<!-- Seite 1 - ENDE -->

[grossmaggul]

Darf ich mal fragen warum Du <table> benutzt und nicht die von ftui3 bereitgestellten <ftui-row> und <ftui-column>?

Soweit ich weiß sind die <table> Konstrukte schon lange "böse". 

[moonsorrox]

Das habe ich nur zum ausprobieren erstellt..  , wollte ich aber nicht mehr nutzen, da ich es zuletzt noch in Version 2.7.x
Der Code zum rechten Bild besteht ja aus <ftui-row><ftui-column>, aber auch hier stellt er unter Android die Schrift nach unten raus.
Ich habe dort keine Formatierung mit css drin. Das hatte ich in deinem Code gesehen, wie diese 3 Spalten dargestellt werden und habe eben nur erweitert 

[grossmaggul]

Hast Du mal mit <ftui-grid base_x> experimentiert?

Vielleicht erst mal mit einfacherem Code anfangen und dann nach und nach erweitern.

Das habe ich nur zum ausprobieren erstellt..  , wollte ich aber nicht mehr nutzen, da ich es zuletzt noch in Version 2.7.x

O.K., dann erteile ich Dir hiermit Absolution, mein Sohn.

[SirMarco]

Hallo zusammen

Folgenden Effekt habe ich festgestellt - Möchte mir an 2 unterschiedlichen Pages die Temperatur von einem Device anzeigen lassen, es wird auf einer von den 2 Seiten nicht immer angezeigt. Lasse ich es nur auf einer Seite anzeigen funktioniert es ohne Probleme.

auf der index.html lasse ich mir im Header Temp anzeigen:

Code Auswählen Erweitern

<a class="navbar-brand"><ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature"><span slot="end">°C</span></ftui-label></a>
    <a class="navbar-brand"><ftui-label [text]="netatmo_D70_ee_50_06_78_96:temperature"><span slot="end">°C</span></ftui-label></a>

dann auf meiner content_klima.html auch noch einmal

Code Auswählen Erweitern


<ftui-view>
    <ftui-title>Klima</ftui-title>
    <ftui-page-section>   
          <ftui-content class="no-ftui-content" file="template/template_ klima_1er.html" name="Garten" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
        <div style="margin:8px;display:inline-block;height:1px;width:100%;background-color:#4F4F4E"></div>   
        <ftui-content class="no-ftui-content" file="template/template_ klima_1er.html" name="Wohnzimmer" device="netatmo_D70_ee_50_06_78_96"></ftui-content>
        <div style="margin:8px;display:inline-block;height:1px;width:100%;background-color:#4F4F4E"></div>             
    </ftui-page-section>           
</ftui-view>




template_ klima_1er.html

Code Auswählen Erweitern


<ftui-row height="43.875px">
<ftui-column>
    <ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
    <ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:temperature" ><span slot="end">°C</span></ftui-label>
</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:humidity"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row> 
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
    <header>{{name}}</header>
            <ftui-row>
                <ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
                    <ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
                    <ftui-chart-controls units="day, week"></ftui-chart-controls>
                  </ftui-chart>                           
            </ftui-row>

</ftui-popup>




Jemand eine Idee warum sich das so verhält?

Grüsse

[octek0815]

Hallo,

wie kann ich beim drücken eines Buttons den Wert eines Devices um eins addieren oder um eins subtrahieren?

Grüße
Olli

[moonsorrox]

O.K., dann erteile ich Dir hiermit Absolution, mein Sohn.

Hast Du mal mit <ftui-grid base_x> experimentiert?

Vielleicht erst mal mit einfacherem Code anfangen und dann nach und nach erweitern.

ich habe tatsächlich ganz klein angefangen und hatte dafür das Beispiel von dir mit dem Thermostat und den Batterieanzeigen genommen und war eigentlich damit zufrieden als ich es am Firefox angeschaut habe... dann aber eben auf dem Tablet war enttäuschend 

Das <ftui-grid base_x> hatte ich ausprobiert und werde ich nochmals versuchen, ich habe dafür bisher keine Erklärung im github gefunden was es genau bedeutet und deshalb habe ich dann gewechselt auf Reihen und Spalten

Code Auswählen Erweitern

<ftui-grid cols="32" rows="22" resize margin="2">
  <!--ftui-grid base-width="70" base-height="70" margin="5"-->
</ftui-grid>


aber trotzdem sollte doch in meinem Fall die gesamte Schrift der Temperaturen in dem Container/Block mit

Code Auswählen Erweitern

<ftui-grid-tile row="4" col="20" height="10" width="8" class="semitransparent3d">
.....
</ftui-grid-tile>

bleiben und nicht nach oben und unten ausbrechen..