VIS-Tabelle für WLAN Wetterstation

liv-in-sky

hat jmd lust mal dieses script zu testen

widgets:

[{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.Wetterstation.AuswahlJahr","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"0;2019;2020;2021;2022","texts":"All Years;2019;2020;2021;2022","height":"100","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"no_style":true},"style":{"left":"1142px","top":"70px"},"widgetSet":"jqui"},{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.Wetterstation.MonatAuswahl","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"1;2;3;4;5;6;7;8;9;10;11;12","texts":"JANUAR;FEBRUAR;MÄRZ;APRIL;MAI;JUNI;JULI;AUGUST;SEPTEMBER;OKTOBER;NOVEMBER;DEZEMBER","height":"100","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"no_style":true},"style":{"left":"1258px","top":"70px"},"widgetSet":"jqui"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"{javascript.0.Wetterstation.MonthlyDaten}"},"style":{"left":"1095px","top":"133px","width":"634px","height":"589px","font-family":"","color":"#f7f51d"},"widgetSet":"basic"}]

script:

// @liv-in-sky 5.11.2020 14:45


const dataInputPath="controll-own.0.AAATEST.Wetter.Data";  //SEHR WICHTIG !!!!!!!!!
const inhaltFarbe="black"
const inhaltHintergrund="lightgray"
const monatFarbe="yellow"
const hintergrund="gray"
const htmlFarbTableBorderColor="yellow";
const abstandZelle=6;
const htmlRahmenLinien="all"
const htmlSchriftgroessehtmlSchriftart=""  //nicht verwendbar!
const htmlFarbFelderschrift="red";         //nicht verwendbar!
const htmlSchriftgroesse="13px";
const htmlSchriftart="Ubuntu-Light"//"monospace";       //oder z.b. "Helvetica"
const weite="auto";                        //oder "500px"
let myTable="table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                      "; font-family:"+htmlSchriftart+";\"";
                      
const varData={  Tiefstwert:       { einheit:"°C", name:"Minimum Temperatur"},
               Hoechstwert:      { einheit:"°C", name:"Maximum Temperatur"},
               Temp_Durchschnitt:{ einheit:"°C", name:"Durchschnittstemperatur"},
               Max_Windboe:      { einheit:'km/h', name:"Max Windböe"},
               Max_Regenmenge:   { einheit:'l/m2', name:"Max. Regen/Tag"},
               Regenmenge_Monat: { einheit:'l/m2', name:"Regen"},
               warme_Tage:       { einheit:"", name:"Warme Tage (über 20°C)"},
               Sommertage:       { einheit:"", name:"Sommertage (über 25°C)"},
               heisse_Tage:      { einheit:"", name:'Heiße Tage (über 30°C)'},
               Frost_Tage:       { einheit:"", name:"Frosttage (Min. unter 0°C)"},
               kalte_Tage:       { einheit:"", name:"Kalte Tage (Max. unter 10°C)"},
               Eistage:          { einheit:"", name:"Eistage (Max. unter 0°C)"},
               sehr_kalte_Tage:  { einheit:"", name:"Sehr kalte Tage (Min. unter -10°C)"}
}  

const monate =["JANUAR","FEBRUAR","MÄRZ","APRIL","MAI","JUNI","JULI","AUGUST","SEPTEMBER","OKTOBER","NOVEMBER","DEZEMBER"];


//--------------------------nix mehr ändern ab hier--------------------------------------
let myObj;
let myArrAll=[]
let myArrErstellt=[]
let tableContent;
let monWahlVIS;
let lastThree;
//----------------------------------------------------------------------------------------
function dataStuff(){
let myArrAll=[]
let mySelector=dataInputPath+'.*.*'
$(mySelector).each(function(id, i) {
let ida=id.split("."); let lang=ida.length; let jahri=lang-2; let moni=lang-1;
let obj2 = { jahr: ida[jahri]};
let obj3 = { monat: ida[moni]};
let helper=JSON.parse(getState(id).val)
helper={ ...helper, ...obj2, ...obj3}
myArrAll.push(JSON.stringify(helper))
});

tableContent = ""  
myObj=JSON.parse("["+myArrAll.toString()+"]")

if (lastThree==0) {
//KOPFZEILE
let choseMonth=monate[monWahlVIS-1]
let choseMonthArr=choseMonth.split('')
let test=""
for (let i=0;i<choseMonthArr.length;i++){
  // log(choseMonthArr[i])
   test=test+choseMonthArr[i]+`
   `    
}

//log(test)
//tableContent+='<td  class=\"test-klein\"  rowspan=\"14\"\">'+choseMonth+'</td><td>Wetterwerte</td>'
tableContent+='<td class=\"myWetterStation\" width=\"25px\"  style=\"color:'+monatFarbe+';font-size:26px; background-color:'+hintergrund+' ; vertical-align:middle; text-align:center \"   rowspan=\"14\"\">'+test+'</td><td style=\"color:'+monatFarbe+'; background-color:'+hintergrund+'"\>Wetterwerte</td>'
for (let i=0;i<myObj.length;i++) {
   if(parseInt(myObj[i].monat)==monWahlVIS){
tableContent += '<td style=\"color:'+monatFarbe+'; background-color:'+hintergrund+'"\ align=center>'  + myObj[i].jahr+'</td>'}
}; tableContent="<tr style=\"font-weight\:bold\">"+tableContent+"</tr>"
//RESTZEILEN
for(var index in varData){
   tableContent+='<td style=\"color:'+inhaltFarbe+'; background-color:'+inhaltHintergrund+'\">'+varData[index].name+'</td>'
   for (let i=0;i<myObj.length;i++) {
      if(myObj[i].monat==monWahlVIS){
        tableContent += '<td style=\"color:'+inhaltFarbe+'; background-color:'+inhaltHintergrund+'\" align=right>' + myObj[i][index] + ' '+ varData[index].einheit+'</td>'}
                                    }; tableContent="<tr>"+tableContent+"</tr>"

}
} //lastThree
else {
//log(myObj[0].monat)
    myObj.sort(function (alpha, beta) {
             if (parseInt(alpha.monat) > parseInt(beta.monat))
                 return 1;
              if (parseInt(beta.monat) > parseInt(alpha.monat))
                 return -1;
              return 0;});
          //    log(myObj[0].monat)

//KOPFZEILE LASTTHREE

let choseJahr=lastThree.toString()//formatDate(getDateObject((new Date().getTime())), "JJJJ")//monate[monWahlVIS-1]
let choseMonthArr=choseJahr.split('')
let test=""
for (let i=0;i<choseMonthArr.length;i++){
  // log(choseMonthArr[i])
   test=test+choseMonthArr[i]+`
   `    
}

//log(test)
//tableContent+='<td  class=\"test-klein\"  rowspan=\"14\"\">'+choseMonth+'</td><td>Wetterwerte</td>'
tableContent+='<td class=\"myWetterStation\" width=\"25px\"  style=\"color:'+monatFarbe+';font-size:26px; background-color:'+hintergrund+' ; vertical-align:middle; text-align:center \"   rowspan=\"14\"\">'+test+'</td><td style=\"color:'+monatFarbe+'; background-color:'+hintergrund+'"\>Wetterwerte</td>'

for (let i=0;i<myObj.length;i++) {
   
   if( parseInt(myObj[i].jahr)==parseInt(choseJahr) && (parseInt(myObj[i].monat)==parseInt(monWahlVIS) || parseInt(myObj[i].monat)==parseInt(monWahlVIS)-1 || parseInt(myObj[i].monat)==parseInt(monWahlVIS)-2)){
tableContent += '<td style=\"color:'+monatFarbe+'; background-color:'+hintergrund+'"\ align=center>'  + monate[parseInt(myObj[i].monat)-1]+'</td>';}
}; tableContent="<tr style=\"font-weight\:bold\">"+tableContent+"</tr>"
//RESTZEILEN
for(var index in varData){
   tableContent+='<td style=\"color:'+inhaltFarbe+'; background-color:'+inhaltHintergrund+'\">'+varData[index].name+'</td>'
   for (let i=0;i<myObj.length;i++) {
    if( parseInt(myObj[i].jahr)==parseInt(choseJahr) && (parseInt(myObj[i].monat)==parseInt(monWahlVIS) || parseInt(myObj[i].monat)==parseInt(monWahlVIS)-1 || parseInt(myObj[i].monat)==parseInt(monWahlVIS)-2)){
        tableContent += '<td style=\"color:'+inhaltFarbe+'; background-color:'+inhaltHintergrund+'\" align=right>' + myObj[i][index] + ' '+ varData[index].einheit+'</td>'}
                                    }; tableContent="<tr>"+tableContent+"</tr>"

}


}

tableContent = '<'+myTable+' ><tbody>'+tableContent+'</tbody></table >'
//log(tableContent)

setState("javascript." + instance + ".Wetterstation.MonthlyDaten",tableContent)
}

//--------------------------------------------------------------------------------------------------
async function main() {
   if (!(await existsStateAsync("javascript." + instance + ".Wetterstation.MonthlyDaten"))) {
       await createStateAsync("Wetterstation.MonthlyDaten", "leer", {type: "string", name: "MonthlyDaten", role: "value", read: true, write: true, } ); }
   if (!(await existsStateAsync("javascript." + instance + ".Wetterstation.MonatAuswahl"))) {
       await createStateAsync("Wetterstation.MonatAuswahl", 10, {type: "number", name: "MonatAuswahl", role: "value", read: true, write: true, } ); } 
   if (!(await existsStateAsync("javascript." + instance + ".Wetterstation.AuswahlJahr"))) {
       await createStateAsync("Wetterstation.AuswahlJahr", 0, {type: "number", name: "AuswahlJahr", role: "value", read: true, write: true, } ); } 
   lastThree = (await getStateAsync("javascript." + instance + ".Wetterstation.AuswahlJahr")).val //? lastThree=true : lastThree=false;  
        
   monWahlVIS=((await getStateAsync("javascript." + instance + ".Wetterstation.MonatAuswahl")).val ) 
   dataStuff();

}

//-----------------------------------------------------------------------------------------------------
main()



on({id: "javascript." + instance + ".Wetterstation.MonatAuswahl", change: "any"}, async function (obj) {
main()

});

on({id: "javascript." + instance + ".Wetterstation.AuswahlJahr", change: "any"}, async function (obj) {
main()

});

schedule('  */30 * * * *', function() { 
   setState("javascript." + instance + ".Wetterstation.MonatAuswahl", parseInt(formatDate(getDateObject((new Date().getTime())), "MM"))) 
});

im script muss eigenlich nur der datenpunkt eingestellt werden
es kommt ein weiteres widget dazu
man kann das jahr abfragen und bekommt die letzten beiden monate und den gesuchten monat des jahres

da_Woody

@liv-in-sky mann, ich komm ja jetzt schon nicht mehr nach!

SBorg

@liv-in-sky Bin endlich auch mal dazu gekommen, sieht mit "echten" Daten gut aus
Bild 1.png

liv-in-sky

@SBorg

danke für's testen - die farben gehören wohl noch geändert - aber das kann man ja im script einfach machen

SBorg

@liv-in-sky Gelb ist auch nicht so meins, aber für einen 1. Test zuerst so wenig wie möglich ändern.
...und schön wenn man sich nicht um alles alleine kümmern muss. Doku dauert mittlerweile bald länger als das programmieren.

btw: Wetterstation im Angebot

liv-in-sky

@SBorg glaub ich - deshalb dachte ich mir, du hast so viel arbeit reingesteckt - da schadet es nicht, wenn man in der vis was zu spielen und sehen hat

Negalein

@liv-in-sky sagte in VIS-Tabelle für WLAN Wetterstation:

hat jmd lust mal dieses script zu testen

getestet, läuft und für sehr gut gefunden

MyMeyer

@liv-in-sky Na dann habe ich mir mal gleich eine bestellt...damit ich das Script testen kann..

Negalein

@liv-in-sky sagte in VIS-Tabelle für WLAN Wetterstation:

dieses script dient zur Wetterdaten-Anzeige für die WLAN Wetterstation

Hallo @liv-in-sky

Wo im Script kann ich die Zeilen umsortieren?

derzeit so:

möchte es mir so gestalten:

liv-in-sky

@negalein

ich denke, du mußt das array hier sortieren /in die richtige reihenfolge setzen- ist schon eine weile her - pass auf die kommas auf - nach dem letzten eintrag darf kein komma sein

Image 1.png

Negalein

@liv-in-sky sagte in VIS-Tabelle für WLAN Wetterstation:

ich denke, du mußt das array hier sortieren

Danke, funktioniert

vis (1).png

Nashra

Besteht die Möglichkeit das man auch alle Monate anzeigen lassen kann anstatt nur 3?

liv-in-sky

@nashra

in diesem änderungen werden immer alle monate, die für das jahr vorhanden sind angezeigt - teste doch mal - bei mir funktioniert es

du kannst auch dein existierendes script mal kopieren und dann folgende zeilen ändern - dann musst du deine settings nicht kopieren und das design bleibt, wie es ist

änderungen ab zeile 120

Image 1.png

Nashra

@liv-in-sky sagte in VIS-Tabelle für WLAN Wetterstation:

@nashra

in diesem änderungen werden immer alle monate, die für das jahr vorhanden sind angezeigt - teste doch mal - bei mir funktioniert es

du kannst auch dein existierendes script mal kopieren und dann folgende zeilen ändern - dann musst du deine settings nicht kopieren und das design bleibt, wie es ist

änderungen ab zeile 120

Funktioniert, danke

Chris76e

Hi, bei mir wird die Monatsansicht nicht richtig ausgefüllt. Die Tabelle bekommt keine richtigen Daten.

JSON sieht so aus:

[
  {
    "Tiefstwert": 5.27,
    "Hoechstwert": 33,
    "Temp_Durchschnitt": 18.79,
    "Max_Windboe": 21.88,
    "Max_Regenmenge": 8.1,
    "Regenmenge_Monat": 31.2,
    "warme_Tage": 22,
    "Sommertage": 14,
    "heisse_Tage": 2,
    "Frost_Tage": 0,
    "kalte_Tage": 0,
    "Eistage": 0,
    "sehr_kalte_Tage": 0
  }
]

Screenshot 2022-06-01 200028.jpg

Muss man noch irgendwas einstellen? DP ist bei mir 0_userdata.0.Statistik.Wetter.Data und javascript.0.Wetterstation.MonthlyDaten.

liv-in-sky

@chris76e

das ist aber sehr lange her - hasg du das script von hier https://forum.iobroker.net/post/515791 genutzt

man muss eigentlich nur (soweit ich mich erinnere) dieses setting im script setzen: dataInputPath ist ganz oben im script

Nashra

@liv-in-sky sagte in VIS-Tabelle für WLAN Wetterstation:

@chris76e

das ist aber sehr lange her - hasg du das script von hier https://forum.iobroker.net/post/515791 genutzt

man muss eigentlich nur (soweit ich mich erinnere) dieses setting im script setzen: dataInputPath ist ganz oben im script

Moin @liv-in-sky, das selbe Problem habe ich auch mit deinem Skript

liv-in-sky

@nashra

gibt es im log fehler ?
wurde etwas an den daten geändert ?

@SBorg hast du da eine idee ?

Nashra

@liv-in-sky sagte in VIS-Tabelle für WLAN Wetterstation:

@nashra

gibt es im log fehler ?
wurde etwas an den daten geändert ?

@SBorg hast du da eine idee ?

Log hatte ich hier gepostet Wetterstation

Nachtrag: werden die eckigen Klammern im json entfernt wird alles angezeigt

[
  {
    "Tiefstwert": 6.11,
    "Hoechstwert": 32,
    "Temp_Durchschnitt": 16.2,
    "Max_Windboe": 38.46,
    "Max_Regenmenge": 5,
    "Regenmenge_Monat": 21.4,
    "warme_Tage": 28,
    "Sommertage": 13,
    "heisse_Tage": 1,
    "Frost_Tage": 0,
    "kalte_Tage": 0,
    "Eistage": 0,
    "sehr_kalte_Tage": 0
  }
]

liv-in-sky

@nashra

denke mal , wenn es bis jetzt immer funktioniert hat, kann es entweder am hauptscript liegen - dann habe ich nix damit zu tun

oder durch ein update im javascriptadapter ist im code ein problem

soweit ich das testen kann - ist eine eckige klammer dabei, muss der dp als object und nicht als string definiert sein - als object geht es dann

Image 005.png

hier sieht man es -gleiche daten für die 2 monate - im april ist der dp vom typ object - im mai ist der dp ein typ string

NEWS

VIS-Tabelle für WLAN Wetterstation

Support us

497
Online

31.9k
Users

80.1k
Topics

1.3m
Posts

NEWS

VIS-Tabelle für WLAN Wetterstation

Support us

497Online

31.9kUsers

80.1kTopics

1.3mPosts

497
Online

31.9k
Users

80.1k
Topics

1.3m
Posts