Update 2:
- inline svg icons für linke spalte der tagesansicht
- js / css cleanups
weatherdetail_default.png weatherdetail_color.png
[default] [parameter test]
weatherdetail.component.js
/*
* Weatherdetail component for FTUI version 3
* Shows a weather forcast for 1-7 days with detailed info of the selected day.
*
* (c) 2023 by jones
*
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* https://github.com/knowthelist/ftui
*/
import { FtuiElement } from '../element.component.js';
import { fhemService } from '../../modules/ftui/fhem.service.js';
import { dateFromString, dateFormat } from '../../modules/ftui/ftui.helper.js';
//////////////////////////////////////////////////////////////////////////////////////////////
// Weatherdetail class: Shows detailed weather forcast of the selected day
//////////////////////////////////////////////////////////////////////////////////////////////
export class FtuiWeatherdetail extends FtuiElement {
constructor(properties) {
super(Object.assign(FtuiWeatherdetail.properties, properties));
this.fhemIconPath = '../images/default/weather/'; // path of kleinklima icons
this.actDay = 0; // wich day-tab is selected (0:today, 1:tomorrow, ...)
this.maxDay = 7; // proplanta device limit of detailed data
this.minDay = 1;
this.lastUpdate = 0; // used for ignoring startup spam from onChangeReading()
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Reading of the fhem device has changed
//////////////////////////////////////////////////////////////////////////////////////////////
onChangeReading(read) {
if (!read) return;
let time = new Date().getTime();
if (time - this.lastUpdate > 4000) // MANY onChangeReading() events in first 4s after creating!?
{
this.lastUpdate = time;
this.fetchData();
}
}
//////////////////////////////////////////////////////////////////////////////////////////////
// The html/css part of this component
// A base part is defined here and will be extended later (access via id / class parameter)
//////////////////////////////////////////////////////////////////////////////////////////////
template() {
return `
<style> @import "components/weatherdetail/weatherdetail.component.css";</style>
<ftui-column>
<table><tr id="dayTabs"></tr></table>
<ftui-row id="dayTable">please wait...</ftui-row>
</ftui-column>
`;
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Default properties
// Will be overwritten by parameter in <ftui-weatherdetail> html element
//////////////////////////////////////////////////////////////////////////////////////////////
static get properties() {
return {
device: 'proplanta',
forecast: '4',
icondark: 'gray',
iconlight: 'silver',
bgactive: 'dark',
bginactive: '#222222',
bordercolor: 'gray',
txtlight: 'white',
};
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Convert properties to attributes
//////////////////////////////////////////////////////////////////////////////////////////////
static get observedAttributes() {
return [...this.convertToAttributes(FtuiWeatherdetail.properties), ...super.observedAttributes];
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Component has connected to fhem
//////////////////////////////////////////////////////////////////////////////////////////////
onConnected() { // fires 2 times (?) on reload
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Triggers on every attribute defined in <ftui-weatherdetail> html element
//////////////////////////////////////////////////////////////////////////////////////////////
onAttributeChanged(name) {
let hStyle = this.shadowRoot.host.style;
switch (name) {
case 'device':
fhemService.getReadingEvents(this.device).subscribe(read => this.onChangeReading(read));
break;
case 'forecast':
if (this.forecast < this.minDay || this.forecast > this.maxDay)
this.forecast = 4; // default: 4 days of weather forecast
break;
}
// Setting all css default values (todo: run only once, not on every attribute)
hStyle.setProperty('--icondark', this.icondark);
hStyle.setProperty('--iconlight', this.iconlight);
hStyle.setProperty('--bgactive', this.bgactive);
hStyle.setProperty('--bginactive', this.bginactive);
hStyle.setProperty('--bordercolor', this.bordercolor);
hStyle.setProperty('--txtlight', this.txtlight);
}
//////////////////////////////////////////////////////////////////////////////////////////////
// A day-tab was clicked -> update the detailed table
//////////////////////////////////////////////////////////////////////////////////////////////
onButtonClick(event, wDay)
{
this.actDay = wDay;
this.fetchData();
}
//////////////////////////////////////////////////////////////////////////////////////////////
// get kleinklima iconname
//////////////////////////////////////////////////////////////////////////////////////////////
getWeatherIcon(iconFilename) {
const weatherIcon = [
'sunny.png', // t1
'partly_cloudy.png', // t2
'partly_cloudy.png', // t3
'mostlycloudy.png', // t4
'cloudy.png', // t5
'chance_of_rain.png', // t6
'showers.png', // t7
'chance_of_storm.png', // t8
'chance_of_snow.png', // t9
'rainsnow.png', // t10
'snow.png', // t11
'haze.png', // t12
'haze.png', // t13
'rain.png', // t14
'sunny_night.png', // n1
'partlycloudy_night.png', // n2
'partlycloudy_night.png', // n3
'mostlycloudy_night.png', // n4
'overcast.png', // n5 (Bedeckt)
'chance_of_rain_night.png', // n6
'showers_night.png', // n7
'chance_of_storm_night.png',// n8
'sleet.png', // n9 (Graupel)
'rainsnow.png', // n10
'snow.png', // n11
'haze_night.png', // n12
'haze_night.png', // n13
'rain.png'] // n14
let filename = iconFilename.substring(iconFilename.lastIndexOf("/")+1, iconFilename.length-4); // w/o path and extension
let iconNr = filename.substring(1)-1;
if (iconNr > 14)
return "na.png"
return filename[0]=="t"?this.fhemIconPath + weatherIcon[iconNr]:this.fhemIconPath + weatherIcon[iconNr+14];
}
//////////////////////////////////////////////////////////////////////////////////////////////
// Get the whole data for this device from fhem
//////////////////////////////////////////////////////////////////////////////////////////////
fetchData(){
fhemService.sendCommand('jsonlist2 ' + this.device)
.then(response => response.json())
.then((response) => {
////////////////////////////////////////////////////////////////////////////////////////
// response-Object: Name, PossibleSets, PossibleAttrs, Internals, Readings, Attributes
// Internals -> of the fhem device (DEF, FUUID, ...)
// Readings -> of the fhem Device (fc0_cloud00, ...)
// Attributes -> of the fhem Device (devStateIcon, ...)
////////////////////////////////////////////////////////////////////////////////////////
if (response.Results[0])
{
const readings = response.Results[0].Readings;
// -----------------------------------------------------------------------------------
// Days overview (upper half of this html-object [displayed as tabs])
// -----------------------------------------------------------------------------------
this.elemDayTab = this.shadowRoot.getElementById('dayTabs');
this.elemDayTab.textContent = ''; // delete all children
for (let day = 0; day < this.forecast; day++) {
let strDay = "fc"+day+"_";
let elem = this.elemDayTab.insertCell(-1);
(this.forecast < 6)?elem.classList.add("fontBig"):elem.classList.add("fontMedium");
let date = readings[strDay+"date"].Value;
let wDay = dateFormat(dateFromString(date), "ee");
let content = '<td>'
content+= '<ftui-column class='+(day==this.actDay?"tabActive":"tabInactive")+'>';
content+= '<ftui-label class="date">'+ date +'</ftui-label>';
content+= '<ftui-label class="weekday">'+(!day?"Heute":wDay)+'</ftui-label>';
content+= '<img width="100%" src='+ this.getWeatherIcon(readings[strDay+"weatherDayIcon"].Value)+'>';
content+= '<ftui-label class="tempMin tabUnit"><ftui-label class="'+(this.forecast < 6?"fontBig":"fontMedium")+'" text="'+readings[strDay+"tempMin"].Value+'"></ftui-label>°C ';
content+= '<ftui-label class="tempMax tabUnit"><ftui-label class="'+(this.forecast < 6?"fontBig":"fontMedium")+'" text="'+readings[strDay+"tempMax"].Value+'"></ftui-label>°C</ftui-label></ftui-label>';
elem.innerHTML = content + '</ftui-column></td>';
elem.addEventListener("click", event => this.onButtonClick(event, day));
}
// when forecast is < 4: create dummy tabs (else tabs would be extremely huge)
for (let day = this.forecast; day < 4; day++) {
let elem = this.elemDayTab.insertCell(-1);
}
// -----------------------------------------------------------------------------------
// Day detailed (lower half of this html-object [displayed as table])
// -----------------------------------------------------------------------------------
const gfxSVG = [ // inline svg instructions: de.wikipedia.org/wiki/Scalable_Vector_Graphics
'<svg><path class="svg3" d="m 4 13 a 7 7 0 1 1 0 1z" /><path class="svg1" d="M 10.5 8 l 0 6 l 5.5 0" /></svg>', // clock
'<svg><path class="svg3" d="m 5 22 c -4.80 0.80, -4.80 7.20, 0 8 l 12, 0 c 3.20 -0.80, 3.2 -4.8, -0.4 -5.6 c 0 -3.6, -3.6 -3.6, -4 -2 c -0.4 -2.96, -5.84 -4.88, -7.76 -0.32"/></svg>', // cloud
'<svg><path class="svg1" d="M 7.50 16 A 5 5 0 1 0 12.50 16 m 0.5 0.5 l 0 -12 m -6 0.5 l 0 12 M 13 5 A 3 3 0 0 0 7 5" /><path class="svg4" d="M 10 17.5 A 3 3 0 1 0 10.05 17.50 m -1 1 h 2 v -8 h -2 v 8 "/></svg>', // thermometer
'<svg><path class="svg1" d="M 5 20 A 1 1 0 0 0 11 20 l 0 -18"/><path class="svg3" d="M 20 13 A 9 9 0 0 0 2 13"/><path class="svg5" d="M 7.5 13 A 2.5 2.5 0 0 0 2.5 13 M 14 13 A 3 3 0 0 0 8 13 M 19.5 13 A 2.5 2.5 0 0 0 14.5 13"/></svg>', // umbrella
'<svg><path class="svg3" d="M 5 16 A 1 1 0 0 0 11 16 l -3 -6 l -3 6.3 M 14 11 A 1 1 0 0 0 18 11 l -2 -4 l -2 4.5"/></svg>', //waterdrops
'<svg><path class="svg1" d="M 7 5 l 0 20" /><path class="svg3" d="M 9 5 l 10 5 -10 5 0 -10.1" />', // flag
];
this.elemDayAll = this.shadowRoot.getElementById('dayTable');
this.elemDayAll.textContent = ''; // delete all children
let content = '<table style="pointer-events: none">';
let strDay = "fc"+this.actDay+"_";
const row = ["","","","","",""];
const sumRows = row.length;
for (let hour = 0; hour < 8; hour++) {
let strHour = String("0" + hour*3).slice(-2);
row[0]+= '<td><ftui-label class="unit"><ftui-label class="amount" text="' + strHour +'"></ftui-label>Uhr</ftui-label></td>';
row[1]+= '<td><img height="50px" src='+ this.getWeatherIcon(readings[strDay+"weather"+strHour+"Icon"].Value) +'></td>';
row[2]+= '<td><ftui-label class="unit"><ftui-label class="amount" text="' + readings[strDay+"temp" +strHour].Value +'"></ftui-label>°C</ftui-label></td>';
row[3]+= '<td><ftui-label class="unit"><ftui-label class="amount" text="' + readings[strDay+"chOfRain"+strHour].Value +'"></ftui-label>%</ftui-label></td>';
row[4]+= '<td><ftui-label class="unit"><ftui-label class="amount" text="' + readings[strDay+"rain" +strHour].Value +'"></ftui-label>mm</ftui-label></td>';
row[5]+= '<td><ftui-label class="unit"><ftui-label class="amount" text="' + readings[strDay+"wind" +strHour].Value +'"></ftui-label>km/h</ftui-label></td>';
}
for (let y = 0; y < sumRows; y++) {
content+= '<tr><td style="width: 22px; vertical-align: top;">'+gfxSVG[y]+'</td>' +row[y] +'</tr>';
}
this.elemDayAll.innerHTML = content + '</table>';
}
})
}
}
window.customElements.define('ftui-weatherdetail', FtuiWeatherdetail);
weatherdetail.component.css
:host {
--icondark: setByJS;
--iconlight: setByJS;
--bgactive: setByJS;
--bginactive: setByJS;
--bordercolor: setByJS;
--txtlight: setByJS;
}
.fontBig {
font-size: 22px;
}
.fontMedium {
font-size: 18px;
}
.tabActive {
pointer-events: none;
border: thin solid white;
border-bottom: none;
border-radius: 15px 15px 0 0;
margin-left: -1px;
border-color: var(--bordercolor);
background-color: var(--bgactive);
}
.tabInactive {
pointer-events: none;
border-bottom: thin solid white;
border-radius: 15px 15px 0 0;
opacity: 0.55;
border-color: var(--bordercolor);
background-color: var(--bginactive);
}
.date {
font-size: 95%;
color: var(--txtlight);
}
.weekday {
font-size: 70%;
margin-top: -6px;
color: var(--bordercolor);
}
.tempMin {
font-size: 90%;
color: deepSkyBlue;
}
.tempMax {
font-size: 90%;
color: orange;
}
.amount {
font-size: 21px;
font-weight: normal;
}
.unit {
text-align: right;
font-size: 11px;
}
.pic {
margin-top: 4px;
height: 18px;
}
table, tr, td {
color: var(--txtlight);
background-color: var(--bgactive);
/* border: 1px solid white; */ /* Testing only */
table-layout: fixed;
padding: 0;
margin: 0;
text-align: center;
width: 100%;
}
svg {
position: absolute;
display: block;
}
.svg1 {
stroke: var(--icondark);
stroke-width: 2;
fill: transparent;
}
.svg2 {
stroke: var(--iconlight);
stroke-width: 1;
fill: transparent;
}
.svg3 {
stroke: var(--icondark);
stroke-width: 0.5;
fill: var(--iconlight);
}
.svg4 {
fill: var(--iconlight);
}
.svg5 {
stroke: var(--icondark);
stroke-width: 1.4;
fill: transparent;
}
demo farbenzauber
<ftui-grid base-width="128" base-height="113" margin="1" shape="square">
<ftui-grid-tile row="1" col="2" height="4" width="5">
<ftui-grid-header>Wettervorschau</ftui-grid-header>
<ftui-weatherdetail device="Proplanta" forecast="4" ></ftui-weatherdetail>
<!-- Color Demo
<ftui-weatherdetail device="Proplanta" forecast="7" icondark="orange" iconlight="pink" txtlight="black" bgactive="blue" bginactive="red" bordercolor="green"></ftui-weatherdetail>
-->
</ftui-grid-tile>
<ftui-grid>
[12.07.23]
moin,
bräuchte mal eure hilfe. möchte gerne ein weatherdetail.component.js erstellen aber verzweifel gerade an der fehlenden doku.
mein vorbild ist das teil von bruchbude aus ftui2. habe die ente gequält, aber die suche hat mir nicht weitergeholfen.
mein problem:
ich verstehe nicht wie die component funktioniert. zum testen habe ich folgende zeilen in weather.component.js in onAttributeChanged() eingefügt:
alert(fhemService.getReadingItem(getReadingID("Proplanta","fc0_weatherDayIcon")).data.value)
alert(fhemService.getReadingItem(getReadingID("Proplanta","fc1_weatherDayIcon")).data.value)der erste alert zeigt mir das reading aus fhem korrekt an, der 2. alert gibt nur ein undefined aus.
habe versucht mir die infos aus den vorhandenen components zusammenzusuchen, aber mein javascript-hintergrund reicht dafür einfach nicht.
habe zuerst versucht das ganze ohne component zu erstellen, aber das ist einfach viel zu langsam. ich möchte mindestens die geschwindigkeit von ftui2 haben.
[13.07.23]
sind wohl alle gerade im sommerurlaub, oder ich muss erklären warum ich die o.g. funktion nutzen möchte:
die "einfache" version geht für text, aber nicht für icons <ftui-label size="3" color="white" [text]="Proplanta:fc0_date"></ftui-label>weil ich das reading zum kleinklima iconname konvertieren muss:
// kleinklima icons
getWeatherIcon(iconFilename) {
const weatherIcon = ['CLOUDLESS', 'PARTLY_CLOUDY', 'MOSTLY_CLOUDY', 'CLOUDY', 'OVERCAST', 'LIGHT_SHOWERS', 'SHOWERS',
'SCATTERED_THUNDERSTORM', 'SNOW_SHOWER', 'SNOW', 'RAIN_SNOW', 'HAZE', 'FOGGY', 'DRIZZLE']
let filename = iconFilename.substring(iconFilename.lastIndexOf("/")+1, iconFilename.length-4); // w/o path and extension
let iconNr = filename.substring(1)-1;
if (iconNr > 14) {
return "na.png"
}
return filename[0]=="t"?weatherIcon[iconNr]:weatherIcon[iconNr] + "_NIGHT"
}Wäre echt froh über eine hilfestellung von euch.
Ich hab den Thread jetzt drei mal gelesen und verstehe immer noch nicht, was du vor hast.
Was stimmt mit dem Mapping nicht?
Proplanta-Icons werden doch erst interne Status (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js#L30) und dann in kleinklima-icons (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.map.js#L99) übersetzt.
Was funktioniert jetzt genau nicht für dich?
@yersinia
du meinst die weather.component.js.
ja, die funzt aber nur kriechend langsam weil ich mindestens 12 kleinklima icons brauche.
beim init siehst du wie jedes icon nach einander aufploppt und machmal erst nach einem reload.
war das gleich damals bei ftui2 bis zum modul von bruchbude was sich seither bei mir bewährt hat.
deshalb wollte ich sowas auch für ftui3 und scheitere an der fehlenden doku für die component
hatte im quellcode was mit fhemService (siehe oben) gefunden, was bei mir aber nur für ein reading funzt.
das muss man wohl irgendwie initialisieren!?
Neee, ich mein schon die map, weil genau hier von Proplanta nach internal states nach kleinklima icons gemapt (https://github.com/knowthelist/ftui/blob/master/www/ftui/components/weather/weather.component.js#L37) wird und du dies eigtl nicht (nochmals) tun müsstest.
12 icons zu laden sollte eigtl kein Thema sein - ich lade 20 icons (icon-set=basline; provider=proplanteICON_LONG) über templates und da merk ich keine (wesentlich unangenehme) Verzögerung. Hast du die Probleme mit anderen icon-sets auch?
Wenn du unbedingt eine eigene component bauen willst, schau dir mal das repo von mr_petz (https://github.com/mr-petz/ftui/tree/addons) an, vlt die Thermostat-Komponente (https://github.com/mr-petz/ftui/blob/addons/www/ftui/components/thermostat/thermostat.component.js). Wie du genau fhem.service.js einbindest und über Bindings die readings abfragst kann ich dir leider nicht sagen. Ggf kannst du im repo von setstate (https://github.com/knowthelist/ftui/tree/master/www/ftui) stöbern und dir input holen.
ZitatNeee, ich mein schon die map, weil genau hier von Proplanta nach internal states nach kleinklima icons gemapt wird und du dies eigtl nicht (nochmals) tun müsstest.
würde ich ja nicht nochmal tun. ich rufe ja weather.component.js gar nicht auf.
Zitat12 icons zu laden sollte eigtl kein Thema sein - ich lade 20 icons (icon-set=basline; provider=proplanteICON_LONG) über templates und da merk ich keine (wesentlich unangenehme) Verzögerung. Hast du die Probleme mit anderen icon-sets auch?
andere icon-sets habe ich nicht versucht. ein normales icon ist kein problem.
Zitatschau dir mal das repo von mr_petz an, vlt die Thermostat-Komponente. Ggf kannst du im repo von setstate stöbern und dir input holen.
da waren sie wieder, seine 3 probleme: ich verstehe nicht wie genau die daten von fhem geholt werden (s.o.)
ich dachte fhemService.getReadingItem(...) wäre die lösung, aber mir fehlt da ein wenig gehirnschmalz um mehr als 1 reading zu bekommen :'(
ZitatWie du genau fhem.service.js einbindest und über Bindings die readings abfragst kann ich dir leider nicht sagen.
danke für deine zeit und für das gefühl nicht ignoriert zu werden ;)
ich will das unbedingt in ein component packen damit es flüssig läuft. falls ich hier den richtigen "schubs" bekomme würde ich meine component auf jeden fall gut dokumentieren um anderen einen leichteren einstieg in das thema zu ermöglichen.
Eher hier schauen um ein ganzes Device auszulesen:
https://github.com/mr-petz/ftui/blob/addons/www/ftui/components/weekdaytimer/weekdaytimer.component.js#L209
LG
@mr_petz
die fetchData() funktion sieht genau nach dem aus was ich brauche.
damit ist die nachtschicht zum testen eingeleutet.
sobald ich was gescheites hinbekomme, kommentiere ich die einzelnen schritte und poste die component hier.
thx
@mr_petz
habe es zwar nicht geschafft es auf die geschwindigkeit von ftui2 zu bekommen, aber als component ist es schon deutlich schneller als ohne.
ohne die anregung mit deinem weekdaytime hätte ich es nicht geschafft.
falls dir ein paar grobe schnitzer im code auffallen würde ich mich sehr über weitere anregungen freuen...
Nice! Das wäre was fürs addons repo.
@yersinia
wenn du zugriff hast würde ich mich über eine einstellung ins repo freuen.
Ich kann ein pr stellen; lass uns erst mal mr_petz Antwort abwarten.
Edit: was mir noch einfällt: ich würde einen eigenen Namensraum für die CSS Klassen bilden; so unterbindest von vornherein, dass es Komplikationen mit anderen, zufällig gleichen, Klassen gibt.
Ok ich fange mal an.
(Bin aber auch kein Programmierer!)
Hinweise zum JS:
- die Schleifen würde ich immer mit geschweiften Klammern setzen (ich weis es gibt auch Einzeilerschleifen ohne Klammer)
- this.dayTab mit den getElementById und addEventListener würde ich mit in die Schleife vom this.arrDaySummary reinpacken weil du da eh this.sumDays = 4 Tage gesetzt hast
- was passiert wenn ich nur 3 Tage Anzeigen möchte?
- this.* als Variable/Attribute brauchst du nur bei einer globalen Verwendung
- var nimmt man nicht mehr bei ES2020, dafür const oder let nehmen, let ist wie var (veränderbar), const für eine nicht im Nachgang veränderbare bzw. feste Variable
- du setzt rein auf kleinklima-Iconset, damit grenzt du das stark ein und musst den User sagen er soll umswitchen oder selber mappen. Da kommen bestimmt noch Anfragen wegen anderen Icons?
zum css:
- Hintergrund/Schriftfarben würde ich anpassbar machen
- die fa_* Icons müssen bereitstehen und im richtigen Verzeichnis sein (Hinweis darauf fehlt)
Das ist alles meine subjektive Sichtweise und soll keine Kritik sein!
Es ist auch immer schwierig sich in vorhandene Codes reinzudenken (kostet Zeit) was der Ersteller wie erreicht...
ps. Alles ungetestet von mir. Habe noch keine Zeit gefunden...
LG
@mr_petz
vielen dank für deine zeit
Zitat(Bin aber auch kein Programmierer!)
aber du hast deutlich mehr erfahrung und kennst daher etliche stolpersteine
Zitatdie Schleifen würde ich immer mit geschweiften Klammern setzen (ich weis es gibt auch Einzeilerschleifen ohne Klammer)
ist wahrscheinlich besser, da ich ein kandidat für flüchtigkeitsfehler bin und so schnell mal ne 2. zeite einfüge die dann ausserhalb des loops ist.
die if/else dann wohl auch? code optik leidet dann aber...
Zitatthis.dayTab mit den getElementById und addEventListener würde ich mit in die Schleife vom this.arrDaySummary reinpacken weil du da eh this.sumDays = 4 Tage gesetzt hast
stimmt, werde nochmal was an der code optik ändern. da muss ich eh durchfegen wegen der variablen anzahl der tabs.
Zitatwas passiert wenn ich nur 3 Tage Anzeigen möchte?
dann sieht das scheiße aus, weil da ungenutzter raum ist. tag 4 stört doch niemanden, wer tag 4 nicht wissen will - klickt einfach nicht drauf.
aber egal, ich wollte ja deine anregungen... also habe ich damit schonmal angefangen.
wollte eigentlich auch nur 4 tage weil die experten sagen: "mehr aus 3 tage ist kristallkugel"
aber habe jetzt auch ne erweiterung auf mehr als 4 tage auf der todo.
Zitatthis.* als Variable/Attribute brauchst du nur bei einer globalen Verwendung
jo, ist so eine copy und paste geschichte. genau wie bei diesem einen var.
btw, wie setze ich this.myValue auf const? einfach const davor schreiben klappt nicht.
Zitatdu setzt rein auf kleinklima-Iconset, damit grenzt du das stark ein und musst den User sagen er soll umswitchen oder selber mappen. Da kommen bestimmt noch Anfragen wegen anderen Icons?
weil ich finde das die mit abstand am besten aussehen... da möchte ich eigentlich nix anderes.
aber wenn da jetzt ein shitstorm kommt von wegen monopol werde ich mich beugen ;D
Zitatdie fa_* Icons müssen bereitstehen und im richtigen Verzeichnis sein (Hinweis darauf fehlt)
hm, ich habe ftui3 komplett gelöscht und neu installiert, aber fhem nicht. bei mir waren die da drin und ich dachte das gehört zur standard installation.
gehören die nicht zu den standard icons? dann muss ich mal gucken ob ich da was aus dem ftui3 folder nehme. hatte ich zuerst, aber die haben problem gemacht (rumgezappel beim resizing - bei den icons aus dem fhem folder dagegen keine probleme)
ZitatHintergrund/Schriftfarben würde ich anpassbar machen
mit css habe ich 0 erfahrung, das kommt dann erst mit version 2.0
Zitat von: Jones am 21 Juli 2023, 22:38:23@mr_petz
vielen dank für deine zeit
Gerne.
Zitatjo, ist so eine copy und paste geschichte. genau wie bei diesem einen var.
btw, wie setze ich this.myValue auf const? einfach const davor schreiben klappt nicht.
Wo hast du denn this.myValue?
Wenn dann const myValue = XYZ;
oder wenn es im Nachgang nochmal geändert wird let myValue = XYZ;
Wenn du es in jeder Funktion brauchst, dann lass es this.myValue
Zitatmit css habe ich 0 erfahrung, das kommt dann erst mit version 2.0
mit z.Bsp.:
background: var(--weatherdetail-bg-color, var(--dark-color));
würdest du es mit dem ersten Eintrag vom var() ansprechbar machen und wenn es niemand in anspruch nimmt dann wird --dark-color vom ftui3 genommen.
es würde auch sowas gehen:
background: var(--weatherdetail-bg-color, #424949);
man kann das var() auch kombinieren.
LG mr_petz
neue version ist raus
@mr_petz
ZitatWo hast du denn this.myValue?
zb hier:
this.ftuiIconPath = './icons/';
wollte das als
const this.ftuiIconPath = './icons/'; deklarieren.
aber irgendwie will der ff das nicht.
Zitatwürdest du es mit dem ersten Eintrag vom var() ansprechbar machen und wenn es niemand in anspruch nimmt dann wird --dark-color vom ftui3 genommen.
weiss aber nicht wie ich das dann aus js anspreche. habe es jetzt anders gelöst.
ist gerade ziemlich viel neues zeug was da einprasselt...
Hi,
this.ftuiIconPath ist bei dir global im code. Also für alle deine functions abrufbar. Das musst du so lassen.
LG
Das sieht doch schon ganz gut aus. Für den pr in mr_petz' addon repo hab ich deine files übernommen: https://github.com/y3rs1n14/ftui-addons-pvvis/tree/addons/www/ftui/components/weatherdetail (https://github.com/y3rs1n14/ftui-addons-pvvis/tree/addons/www/ftui/components/weatherdetail). Schau mal ob dir das so passt bzw auch das copyright reicht.
ZitatDas musst du so lassen.
wir reden aneinander vorbei :D
ich wollte aus einem
this.xyz ein
const this.xyz machen.
die ente hat mir dafür nix angezeigt, entweder habe ich die suchanfrage falsch formuliert - oder es gibt einfach keine möglichkeit das als const zu deklarieren.
aber egal, wird schon keiner auf die idee kommen das als nicht const zu behandeln 8)
ZitatSchau mal ob dir das so passt bzw auch das copyright reicht
sieht gut aus, freue mich als benutzer von fhem/ftui was beisteuern zu können.
copyright ist mir egal, hatte gesehen das mr_petz dafür MIT License genommen hat also habe ich das einfach übernommen.
wenn da mal was anderes gewünscht wird... mir sind alle nicht rein kommerziellen lizenzen recht.
könnte ihr also ohne weitere nachfrage einfach ändern.
Zitat von: Jones am 23 Juli 2023, 14:42:28wir reden aneinander vorbei :D
Nein machen wir (ich) nicht ;) .
Wie oben geschrieben lass es, weil es im ganzen code zur Verfügung stehen soll/muss.
Du rufst es ja weiter unten in fetchData() wieder auf (das meine ich mit global).
Da lässt du am besten die this.* deklaration...
Das geht nicht mit const und schon garnicht mit
const this.* = xyz
Bsp.:
Hier:
let time = new Date().getTime();
könntest du const verwenden, da time nicht mehr verändert wird wie bei content+=
LG
so, sollten jetzt alle tips von mr_petz und yersinia eingeflossen sein.
viel spass mit dem teil.
Danke! :)
pr (https://github.com/mr-petz/ftui/pull/5) für das addon repo ist gestellt.
Hallo zusammen,
wollte das Ding testen, aber es erscheint immer nur "please wait ..."
Proplanta device ist natürlich vorhanden.
Irgendeine Idee, was das Problem sein könnte?
VG, Andreas
Ich denke du musst mehr infos liefern, nur dann kann dir Jones auch helfen
- wie hast du weatherdetail in ftui3 eingebunden?
- zeige ein anonymisiertes (!) list des proplanta-devices
- du hast die component und css aus #1 kopiert?
zu dem von yersinia schon angeführten punkten wäre es auch gut zu wissen was der browser dazu sagt.
zb unter windows:
F12 drücken
im ff auf konsole klicken, fehler und warnungen auswählen (wenn aktiv sind diese grau hinterlegt), alles andere ausschalten.
oder
im chrome auf console klicken, im combo default levels warnings und errors einschalten, alles andere ausschalten.
Danke @yersenia und @Jones, Eure Fragen haben es indirekt gelöst. Wie genau, kann ich zwar nicht sagen, aber als ich im F12 Debugging nochmals (mit Cache delete) refreshed habe, hat es ohne sonstige Änderungen funktioniert.
VG, Andreas
dann viel spass damit.
sag bescheid falls du verbesserungsvorschläge hast.
Zitat von: yersinia am 06 August 2023, 20:02:30Danke! :)
pr (https://github.com/mr-petz/ftui/pull/5) für das addon repo ist gestellt.
Habe es übernommen. Es ist jetzt über das addon-repo abrufbar.
Habe es selber aber noch nicht getestet... ::)
LG
@mr_pets, yersinia
danke euch
Danke erstmal für dieses coole Feauture.
Zitatdann sieht das scheiße aus, weil da ungenutzter raum ist. tag 4 stört doch niemanden, wer tag 4 nicht wissen will - klickt einfach nicht drauf.
aber egal, ich wollte ja deine anregungen... also habe ich damit schonmal angefangen.
wollte eigentlich auch nur 4 tage weil die experten sagen: "mehr aus 3 tage ist kristallkugel"
aber habe jetzt auch ne erweiterung auf mehr als 4 tage auf der todo.
Habe ich es richtig verstanden, dass man auf den "nächsten Tag" klicken könnte? Bei mir funktioniert es nämlich nicht.
Liebe Grüße
Ralf
Hi Ralf,
zum besseren Nachvollziehen bzw zur Fehlerbehebung deine Definition zeigen.
LG
Hi, habe den Code aus dem ersetn Post übernommen und die Dateien geupdatet
<!-- Wetter -->
<ftui-grid base-width="128" base-height="113" margin="1" shape="square">
<ftui-grid-tile row="2.3" col="1.65" height="4" width="5">
<ftui-grid-header>Wettervorschau</ftui-grid-header>
<ftui-weatherdetail device="WetterProplanta" forecast="4" ></ftui-weatherdetail>
</ftui-grid-tile>
</ftui-grid>
LG Ralf
Alles noch einmal kontrolliert und überarbeitet, CHECK!
Danke.
LG Ralf
Ich nochmal 8)
Da das "Sliden" der 4 Tage funktioniert ist eigentlich alles okay, aber nur eigentlich.
Wenn ich jetzt vom Startbildschirm auf das Wetter springe kommme ich nicht mehr zurück.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/ftui-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="toast_position" content="topLeft">
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>Storchenwiese 48a</title>
</head>
<body>
<ftui-grid base-width="78" base-height="70" margin="5" shape="round">
<ftui-grid-tile row="1" col="1" height="10" width="1">
<ftui-column>
<ftui-tab view="Übersicht" size="large" active>
<ftui-icon name="home"></ftui-icon>
</ftui-tab>
<ftui-tab view="Temperatur" direction="vertical">
<ftui-icon name="thermometer-0"></ftui-icon>
</ftui-tab>
<ftui-tab view="Tonnen">
<ftui-icon name="trash"></ftui-icon>
</ftui-tab>
<ftui-tab view="4">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="Übersicht">
<ftui-grid-tile row="1" col="2" height="2" width="2" shape="round" color="primary">
<ftui-row width="80%" height="10%">
<ftui-clock format="ee" size="6"></ftui-clock>
<ftui-clock format="DD" size="6"></ftui-clock>
</ftui-row>
<ftui-clock format="hh:mm" size="9"></ftui-clock>
</ftui-grid-tile>
<!-- Tonnen -->
<ftui-grid-tile row="1" col="4" height="2" width="2" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3">Abfall</ftui-label>
<ftui-icon name="trash" [color]="myAbfall:next_text | map (' `Gruenabfall`:brown, `Papiertonne`:blue, `Gelber Sack`:yellow, `Restmuell`:black, `Sperrmuell Altmetall`:red')" class="size-1" height="90%"></ftui-icon>
<ftui-badge color="danger" [text]="myAbfall:next_days"></ftui-badge>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:next_text"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:next_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:next_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
<!-- Markise -->
<ftui-grid-tile row="1" col="6" height="2" width="2" shape="round"
[color]="Markise:position | step('0:ok, 100:blue')">
<ftui-label size="3">Markise</ftui-label>
<ftui-row height="45%">
<ftui-button (value)="set Markise open" direction="vertical" color="current" fill="none"
margin="-1em">
<ftui-icon name="angle-up" class="size-1" height="90%"></ftui-icon>
<ftui-label>Raus</ftui-label>
</ftui-button>
<ftui-button (value)="set Markise stop" direction="vertical" color="current" fill="none"
margin="-1em">
<ftui-icon name="stop" class="size-1" height="90%"></ftui-icon>
<ftui-label>Stop</ftui-label>
</ftui-button>
<ftui-button (value)="set Markise close" direction="vertical" color="current" fill="none"
margin="-1em">
<ftui-icon name="angle-down" class="size-1" height="90%"></ftui-icon>
<ftui-label>Rein</ftui-label>
</ftui-button>
</ftui-row>
</ftui-grid-tile>
<!-- Bad -->
<ftui-grid-tile row="1" col="8" height="2" width="2"
[color]="tuya_local_65373041bcff4d091c9c:state | map('on:alert, off:ok')">
<ftui-label size="3">Bad</ftui-label>
<ftui-icon name="bath" size="1"></ftui-icon>
<ftui-cell width="80%">
<ftui-label [text]="tuya_local_65373041bcff4d091c9c:state | map('off:aus, on:an')"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="Bad:temperature" unit="°C"></ftui-label>
</ftui-grid-tile>
<!-- Eingangstuer -->
<ftui-grid-tile row="1" col="10" height="2" width="2" shape="round"
[color]="Haustuer:state | map('locked:ok, unlocked:yellow, unlatch:alert')">
<ftui-label size="3">Haustür</ftui-label>
<ftui-icon name="front-door" size="3">
<ftui-icon name="lock" size="2" top="1" right="3"
[hidden]="Haustuer:state | map('locked:false, unlocked:true, ')"></ftui-icon>
</ftui-icon>
<ftui-label [text]="Haustuer:state | map('locked:abgeschlossen, unlocked:nicht abgeschlossen, unlatch:offen')">
</ftui-label>
</ftui-grid-tile>
<!-- MähRobi -->
<ftui-grid-tile row="1" col="12" height="2" width="2"
[color]="MQTT_Worx_Robi:mowerErrorTxt | map('No error:ok, error:alert')">
<ftui-label size="3">Robi</ftui-label>
<ftui-icon name="mower" size="2"></ftui-icon>
<ftui-row>
<ftui-column align-items="right" margin="0">
<ftui-label text="Wo bin ich:"></ftui-label>
<ftui-label text="Akkupower:"></ftui-label>
<ftui-label text="Akkutemp:"></ftui-label>
</ftui-column>
<ftui-column align-items="left" margin="0">
<ftui-label [text]="MQTT_Worx_Robi:mowerStatusTxt | map('Stopped:gestoppt, Mowing:mähen, Home:Ladestation')"></ftui-label>
<ftui-label [text]="MQTT_Worx_Robi:batteryPercent" unit="%"></ftui-label>
<ftui-label [text]="MQTT_Worx_Robi:batteryTemperature" unit="°C"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-grid-tile>
<!--Wind -->
<ftui-grid-tile row="3.05" col="10.3" height="2.5" width="2" shape="round">
<header>Wind</header>
<ftui-row class="w-60 h-80">
<ftui-label text="W"></ftui-label>
<ftui-column>
<ftui-label text="N"></ftui-label>
<ftui-knob [(value)]="WetterProplanta:windDir" min="0" max="360" start-angle="-90" end-angle="270" offset-y="0" height="80" width="80" has-scale has-needle></ftui-knob>
<ftui-label text="S"></ftui-label>
</ftui-column>
<ftui-label text="O"></ftui-label>
</ftui-row>
</ftui-grid-tile>
<!--Mondphasen
<ftui-grid-tile row="5.05" col="10.3" height="2.5" width="2" shape="round">
<header>Mondphase</header>
<ftui-moon [value]="SonneMond:MoonAge | scale(0,360,0,100)" hasshadows hasblur opacity="90"
class="size-9"></ftui-moon>
<ftui-label [text]="SonneMond:MoonPhaseS"></ftui-label>
</ftui-grid-tile>
-->
<ftui-grid-tile row="5.5" col="10.3" height="4" width="2">
<header>Mondphase</header>
<ftui-image src="http://192.168.178.221:8083/fhem/Astro_moonwidget?name='Astronomie" height="200px" width="200px">
</ftui-image>
<ftui-label [text]="SonneMond:MoonPhaseS"></ftui-label>
</ftui-grid-tile>
</ftui-tab-view>
<!-- HomeStatus
<ftui-grid-tile row="10" col="2" height="1" width="6">
<ftui-segment [(value)]="HomeStatus">
<ftui-segment-button value="1">
<ftui-icon name="home"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="2">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="3">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="4">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>
-->
<!-- Tab Temperaturen -->
<ftui-tab-view id="Temperatur">
<!-- AussenTemp-->
<ftui-grid-tile row="1" col="2" height="3" width="2" shape="round">
<ftui-label size="3">Terrasse</ftui-label>
<ftui-knob [value]="Terrasse:temperature"
[color]="Terrasse:temperature | step('-99: primary, 15: ok, 25: warning, 35: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3"> </ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Bad-->
<ftui-grid-tile row="1" col="4" height="3" width="2" shape="round">
<ftui-label size="3">Bad</ftui-label>
<ftui-knob [value]="Bad:temperature"
[color]="Bad:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Bad:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Büro-->
<ftui-grid-tile row="1" col="6" height="3" width="2" shape="round">
<ftui-label size="3">Büro</ftui-label>
<ftui-knob [value]="Buero:temperature"
[color]="Buero:temperature | step('-99: primary, 15: ok, 23: warning, 30: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3"> </ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Esszimmer-->
<ftui-grid-tile row="1" col="8" height="3" width="2" shape="round">
<ftui-label size="3">Esszimmer</ftui-label>
<ftui-knob [value]="Essen:temperature"
[color]="Essen:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Essen:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Flur-->
<ftui-grid-tile row="1" col="10" height="3" width="2" shape="round">
<ftui-label size="3">Flur</ftui-label>
<ftui-knob [value]="Flur:temperature"
[color]="Flur:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Flur:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Gäste-WC-->
<ftui-grid-tile row="4" col="2" height="3" width="2" shape="round">
<ftui-label size="3">Gäste-WC</ftui-label>
<ftui-knob [value]="Gaeste_WC:temperature"
[color]="Gaeste_WC:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Gaeste_WC:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- HWR-->
<ftui-grid-tile row="4" col="4" height="3" width="2" shape="round">
<ftui-label size="3">HWR</ftui-label>
<ftui-knob [value]="HWR:temperature"
[color]="HWR:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="HWR:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Küche-->
<ftui-grid-tile row="4" col="6" height="3" width="2" shape="round">
<ftui-label size="3">Küche</ftui-label>
<ftui-knob [value]="Kueche:temperature"
[color]="Kueche:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Kueche:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Schlafzimmer -->
<ftui-grid-tile row="4" col="8" height="3" width="2" shape="round">
<ftui-label size="3">Schlafzimmer</ftui-label>
<ftui-knob [value]="Schlafen:temperature"
[color]="Schlafen:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Schlafen:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
<!-- Wohnzimmer -->
<ftui-grid-tile row="4" col="10" height="3" width="2" shape="round">
<ftui-label size="3">Wohnzimmer</ftui-label>
<ftui-knob [value]="Wohnen:temperature"
[color]="Wohnen:temperature | step('-99: primary, 15: ok, 23: warning, 25: danger')"0
width="130" height"80"
type="handle" min="-10" max="40" step="0.1" decimals="1" unit="°C" readonly has-value-text>
</ftui-knob>
<ftui-row>
<ftui-label size="3">Feuchte:</ftui-label>
<ftui-label size="3" [text]="Wohnen:humidity" unit="%">
</ftui-label>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>
<!-- Tonnen -->
<ftui-tab-view id="Tonnen">
<ftui-grid-tile row="1" col="2" height="2" width="2" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3">Aktuell</ftui-label>
<ftui-label size="3"[text]="myAbfall:next_text"></ftui-label>
<ftui-badge color="danger" [text]="myAbfall:next_days"></ftui-badge>
<ftui-icon name="trash" [color]="myAbfall:next_text | map (' `Gruenabfall`:green, `Papiertonne`:blue, `Gelber Sack`:yellow, `Restmuell`:black, `Sperrmuell Altmetall`:red')">
</ftui-icon>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:next_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:next_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="4" height="2" width="2" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3"[text]="myAbfall:Gruenabfall_text"></ftui-label>
<ftui-icon name="trash" color="brown" class="size-1" height="90%"></ftui-icon>
<ftui-badge color="danger" [text]="myAbfall:Gruenabfall_days"></ftui-badge>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:Gruenabfall_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:Gruenabfall_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="6" height="2" width="2" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3"[text]="myAbfall:Papiertonne_text"></ftui-label>
<ftui-icon name="trash" color="blue" class="size-1" height="90%"></ftui-icon>
<ftui-badge color="danger" [text]="myAbfall:Papiertonne_days"></ftui-badge>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:Papiertonne_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:Papiertonne_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="8" height="2" width="2" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3"[text]="myAbfall:Restmuell_text"></ftui-label>
<ftui-icon name="trash" color="black" class="size-1" height="90%"></ftui-icon>
<ftui-badge color="danger" [text]="myAbfall:Restmuell_days"></ftui-badge>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:Restmuell_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:Restmuell_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="10" height="2" width="2" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3"[text]="myAbfall:GelberSack_text"></ftui-label>
<ftui-icon name="trash" color="yellow" class="size-1" height="90%"></ftui-icon>
<ftui-badge color="danger" [text]="myAbfall:GelberSack_days"></ftui-badge>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:GelberSack_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:GelberSack_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="12" height="2" width="auto" [color]="myAbfall:next_days | step('0:alert, 1:green, 2:ok')">
<ftui-label size="3"[text]="myAbfall:SperrmuellAltmetall_text"></ftui-label>
<ftui-icon name="trash" color="red" class="size-1" height="90%"></ftui-icon>
<ftui-badge color="danger" [text]="myAbfall:SperrmuellAltmetall_days"></ftui-badge>
<ftui-row width="80%" height="10%">
<ftui-cell width="80%">
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:SperrmuellAltmetall_weekday"></ftui-label>
<ftui-cell width="80%">
<ftui-label [text]="myAbfall:SperrmuellAltmetall_date"></ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="4">
<!-- Wetter -->
<ftui-grid base-width="128" base-height="113" margin="1" shape="square">
<ftui-grid-tile row="2.3" col="1.65" height="4" width="5">
<ftui-grid-header>Wettervorschau</ftui-grid-header>
<ftui-weatherdetail device="WetterProplanta" forecast="4" ></ftui-weatherdetail>
</ftui-grid-tile>
</ftui-grid>
</ftui-tab-view>
<ftui-tab-view id="5">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab5</div>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>
Nun bin ich ein wenig ratlos.
LG Ralf
moin ralf,
- kannst du mal nur die weatherdetail zeile
<ftui-weatherdetail device="WetterProplanta" forecast="4" ></ftui-weatherdetail>auskommentieren und versuchen ob du dann zum startbildschirm zurückspringen kannst? - wenn dann die gleichen probleme auftreten versuchs mal mit z-index.
heute n8 bin ich wieder zuhause dann teste ich mal deine datei.
aber ein tip vorab schonmal:
deine config wird zwangsläufig immer weiter wachsen, weshalb du eine datei pro view anlegen solltest.
hier mal meine index.html als beispiel.
<!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>Fhem - FTUI</title>
</head>
<body>
<ftui-grid base-width="128" base-height="113" margin="1" shape="square"> <!-- shape: round | square -->
<!---------------------------------------------------------------------------------------------------->
<!-- Menue
<!---------------------------------------------------------------------------------------------------->
<!-- active = Definition der Defaultseite
<!-- timeout = Rückkehrzeit in Sekunden
<!-- z-index:1 = Menue bleibt klickbar wenn views in dateien ausgelagert werden
<!---------------------------------------------------------------------------------------------------->
<ftui-grid-tile row="1" col="1" height="7" width="1">
<ftui-grid-header>Menue</ftui-grid-header>
<ftui-clock format="hh:mm:ss" class="size-3" bold></ftui-clock>
<!-- <ftui-clock format="eeee" class="size-0"></ftui-clock> -->
<ftui-clock format="DD.MM.YYYY" class="size-0"></ftui-clock>
<ftui-column>
<ftui-tab view="View1" size="large" direction="vertical" style="z-index:1">
<ftui-icon name="home"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
</ftui-column>
<ftui-column>
<ftui-tab view="View2" size="large" direction="vertical" style="z-index:1" active>
<ftui-icon name="umbrella"></ftui-icon>
<ftui-label>Wetter</ftui-label>
</ftui-tab>
</ftui-column>
<ftui-column>
<ftui-tab view="View3" size="large" direction="vertical" style="z-index:1">
<ftui-icon name="calendar"></ftui-icon>
<ftui-label>Kalender</ftui-label>
</ftui-tab>
</ftui-column>
<ftui-column>
<ftui-tab view="View4" size="large" direction="vertical" style="z-index:1">
<ftui-icon name="desktop"></ftui-icon>
<ftui-label>TV/Radio</ftui-label>
</ftui-tab>
</ftui-column>
<ftui-column>
<ftui-tab view="View5" size="large" direction="vertical" style="z-index:1">
<ftui-icon name="rss-square"></ftui-icon>
<ftui-label>RSS</ftui-label>
</ftui-tab>
</ftui-column>
<ftui-column></ftui-column> <!-- Abstände verringern -->
<ftui-column></ftui-column> <!-- Abstände verringern -->
</ftui-grid-tile>
<!---------------------------------------------------------------------------------------------------->
<!-- Views -->
<!---------------------------------------------------------------------------------------------------->
<ftui-tab-view id="View1"><ftui-content file="view1.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View2"><ftui-content file="view2.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View3"><ftui-content file="view3.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View4"><ftui-content file="view4.html" ></ftui-content></ftui-tab-view>
<ftui-tab-view id="View5"><ftui-content file="view5.html" ></ftui-content></ftui-tab-view>
<!---------------------------------------------------------------------------------------------------->
</ftui-grid>
</body>
</html>
Hallo Jones, bin augenblicklich auf Dienstreise in Singapur. Ich kann erst morgen am Sonntag die Sachen testen, da wir hier 6 Stunden voraus sind.
Danke schon einmal für deine Nachricht und Mühe.
Melde mich dann umgehend.
LG Ralf
Hi, hatte nun etwas Zeit und habe ein bisschen gespielt.
Habe das z-index eingefügt und es funktioniert.
Ich habe auch mit einer "Aufteilung" der einzelnen TAB begonnen und die Seiten "ausgelagert".
Soweit funktioniert schon mal alles.
Danke nochmal für die schnelle Hilfe.
LG Grüße aus Singapur.
Ralf
ZitatIch habe auch mit einer "Aufteilung" der einzelnen TAB begonnen und die Seiten "ausgelagert".
sehr schön!
ZitatSoweit funktioniert schon mal alles.
aber natürlich. könnte es mir nicht leisten, wenn plötzlich alle nutzer ihr geld zurückfordern weil weatherdetail nicht funzt.
aber das war alles nur der erste schritt, du brauchst für die wetter view noch:
- wetterwarnung (funzt teils/teils, der kaputte swiper treibt mich in den wahnsinn. die tage mache ich mal ein update für auto switch option zwischen longText/shortText bei sehr langem text)
- mondphase (gibt hier 2 version. mit bildern und mit inline svg)
- unwetterkarte (klick toggelt brd/bundesland)
- pollenflug (habe die ente noch nicht gefragt - bin für demo dankbar)
- sonnenstürme/meteoriten/etc (habe die ente noch nicht gefragt - bin für demo dankbar)
- stauts ist nur lückenfüller, würde ihn gerne mit irgendwas wettermäßiges füllen - bin für demo dankbar
mein derzeitiger stand:
wetter.png
Zitat von: Jones am 27 August 2023, 21:52:41aber das war alles nur der erste schritt, du brauchst für die wetter view noch:
- wetterwarnung (funzt teils/teils, der kaputte swiper treibt mich in den wahnsinn. die tage mache ich mal ein update für auto switch option zwischen longText/shortText bei sehr langem text)
- mondphase (gibt hier 2 version. mit bildern und mit inline svg)
- unwetterkarte (klick toggelt brd/bundesland)
- pollenflug (habe die ente noch nicht gefragt - bin für demo dankbar)
- sonnenstürme/meteoriten/etc (habe die ente noch nicht gefragt - bin für demo dankbar)
- stauts ist nur lückenfüller, würde ihn gerne mit irgendwas wettermäßiges füllen - bin für demo dankbar
mein derzeitiger stand:
wetter.png
Deine Mondphase gefällt mir gut. Magst du den Code teilen?
Die Geschichte mit dem Unwetter gefällt mir, würde mich als Tester zur Verfügung stellen, wenn ich eine Anleitung bekomme.
LG Ralf
Hi Ralf,
OT on
Mond:
Bsp mit fhem Astro Modul:
https://forum.fhem.de/index.php?topic=115259.msg1272239#msg1272239
https://forum.fhem.de/index.php?topic=115259.msg1272444#msg1272444
und oder mit der-mond.de:
https://forum.fhem.de/index.php?topic=115259.msg1272221#msg1272221
https://forum.fhem.de/index.php?topic=115259.msg1272247#msg1272247
einfach mal drüber lesen...
OT off
LG
...auch wenn mr_petz dir jetzt schon die lösung zum mond gezeigt hat, werde ich trotzdem "zeitnah" mal index.html
und view2.html (wetter) im tabletUI channel posten (habe keine antwort von der ente bekommen, ob es hier irgendwo schon sowas wie einen subchannel "my ftui3 Config" gibt).
tester brauch ich eigentlich nicht für die unwetter geschichte, sondern erfahrene coder um den swiper zu fixen.
Zitat von: mr_petz am 28 August 2023, 17:56:20Hi Ralf,
OT on
Mond:
Bsp mit fhem Astro Modul:
https://forum.fhem.de/index.php?topic=115259.msg1272239#msg1272239
https://forum.fhem.de/index.php?topic=115259.msg1272444#msg1272444
und oder mit der-mond.de:
https://forum.fhem.de/index.php?topic=115259.msg1272221#msg1272221
https://forum.fhem.de/index.php?topic=115259.msg1272247#msg1272247
einfach mal drüber lesen...
OT off
LG
Danke, mal schauen ob ich in der Ferne noch Lust habe mich damit befassen.
LG aus Singapur
Hallo Jason,
kennst du das?
https://wiki.fhem.de/wiki/Pollenflug
Vielleicht kannst du ja was nettes drumherumbauen 8)
Liebe Grüße
Ralf
moin kuehnhackel,
habe zzt ein kleines zeitproblem und deshalb würde ich gerne fertige sachen einbauen, aber nichts selber coden.
sobald ich etwas leerlauf habe will ich erstmal weg von meiner funkgeschichte und muss dazu erstmal meine neuen geräte
mit tasmota flashen und mal sehen was da noch so für stricke auf mich lauern.
sobald das fertig ist werde ich endlich mal pi hole testen und sehen ob es nicht schon was schönes fertiges für ftui3 gibt.
falls nicht wäre das mein nächstes ftui3 projekt.
bis ich mir auf der wetter view noch was reinbaue wird also ne zeit dauern.
Zitat von: Kuehnhackel am 28 August 2023, 15:06:25Zitat von: Jones am 27 August 2023, 21:52:41aber das war alles nur der erste schritt, du brauchst für die wetter view noch:
- wetterwarnung (funzt teils/teils, der kaputte swiper treibt mich in den wahnsinn. die tage mache ich mal ein update für auto switch option zwischen longText/shortText bei sehr langem text)
- mondphase (gibt hier 2 version. mit bildern und mit inline svg)
- unwetterkarte (klick toggelt brd/bundesland)
- pollenflug (habe die ente noch nicht gefragt - bin für demo dankbar)
- sonnenstürme/meteoriten/etc (habe die ente noch nicht gefragt - bin für demo dankbar)
- stauts ist nur lückenfüller, würde ihn gerne mit irgendwas wettermäßiges füllen - bin für demo dankbar
mein derzeitiger stand:
wetter.png
Deine Mondphase gefällt mir gut. Magst du den Code teilen?
Die Geschichte mit dem Unwetter gefällt mir, würde mich als Tester zur Verfügung stellen, wenn ich eine Anleitung bekomme.
LG Ralf
Hi Jones,
wann hättest Du Zeit mal deine html-Seiten zu sharen?
Liebe Grüße
Ralf
moin ralf,
sry für die verzögerung, meine frau hat mir den remmler song beschert: "er hat den urlaub nicht gewollt, sie hat gesagt es müsste sein..."
ich versuche am mittwoch meine ftui3 config hochzuladen.
done
in den ftui haupt thread
https://forum.fhem.de/index.php?topic=135115.0