HTML Tabelle für Shelly Device Übersicht

[liv-in-sky]

@dos1973 was für verbesserungen

[dos1973]

@liv-in-sky
das repariert wieder die Überschrift...

[liv-in-sky]

@dos1973 jup

[da_Woody]

@liv-in-sky so, sortieren funzt in iQontrol jetzt auch! siehe hier
so, noch ein bisschen rumgespielt. (schriftart, positionierung, farbe, ...) geht eigentlich kursiv auch? hab überall Garamond kursiv in iqontrol eingestellt...

jetzt wirds pingelig, i know.
bei der 2. tabelle sind die überschriften nicht umrahmt und mir würds gefallen, wenn rechts auch ein streifen wie links wäre. mit, oder ohne SHELLY. da geht die trennlinie in den rahmen über.
in der vergrösserung:

stiefel da bei zeile 116 rum, find aber keinen weg nach der überschrift eine leerzeile einzufügen. klebt etwas zu sehr an der tabelle...

[dos1973]

@da_woody
71 shellys. Wow.
Dachte mit meinen 40er wäre ich gut

[liv-in-sky]

@da_woody

• schriftart - ie kenn ich nicht, hast du die zusätzlich installiert ?du meinst dann: Garamond Italic ? ist die in linux enthalten? wo stellst du die in iqontrol ein ? kannst du die nicht im script eintragen

• linke seite, buttons, überschrift. ist eine änderung des scriptes - ich fand es irgendwie seltsam, die buttons in jede tabelle zu integrieren - siehe bild

• auf der rechten seite auch eine seitenleiste zu integrieren -so ?

[da_Woody]

@liv-in-sky mit der schriftart spiel ich mich noch rum... Garamond kann ich in iQontrol auswählen, betrifft aber anscheinend nicht so eine Tabelle.
ich meinte die buttons oben! links gerahmt, in der 2. spalte nicht.

das mit rechter seite meinte ich eher so. ich weis ja nicht wie das in vis ist. aber in iQontrol würde das auch bei einer spalte besser aussehn. (war jetzt ganz schönes gefummel in GIMP ) wie aufwändig das ist, musst du wissen...

[liv-in-sky]

@da_woody ok - die überschriften sind ja jetzt so, wie du die möchtest - ? umrahmt

mit der seitenleiste auf der rechten seite habe ich dich falsch verstanden -also mach ich die in der mitte wieder weg ? muss ich mal ansehen, wie ich am ende anhängen kann

[da_Woody]

@liv-in-sky said in HTML Tabelle für Shelly Device Übersicht:

ok - die überschriften sind ja jetzt so, wie du die möchtest - ? umrahmt

nope! links sinds ja button zum sortieren, in der rechten spalte nur überschriften. wäre ja OK, aber auch da ein rahmen drum würde meinem auge schmeicheln... i know, aber nach 35 jahren beim fernsehn im bereich licht, bin ich ein extrem optischer knabe...

den mittestreifen kannste knicken, den kann man ja easy breiter machen. habsch ja schon von 1px auf 2px gemacht

[liv-in-sky]

@da_woody

die rahmen um die überschreiften sind doch schon oben im bild drin - oder check ich das nicht

?

[da_Woody]

@liv-in-sky schau dir meine screenies an! bei mir nur links der rahmen!
OHA, siewo bei dir?

[liv-in-sky]

@da_woody warum soll ich deine anschauen - ich zeige dir doch die ganze zeit, wie du sie sehen willst - ich weiß ja, das im orginal die ränder nictt drin sind in der rechten tabelle

ist das jetzt das richjtige format ?????

[da_Woody]

@liv-in-sky jup, so siehts jut aus!
d - ö veständigungsprobleme...

[liv-in-sky]

@da_woody

noch ne sache - wenn du dir trennungs linie in der mitte mal auf 10 stellst, sieht das nicht mehr schön aus - da entsteht ein häßlicher balken in der mitte (const trennungsLinie)

daher z.b. mit einer solchen trennungslinie - kann ich aber wieder wegmachen, wenn's nicht gefällt

[da_Woody]

@liv-in-sky sieht hübsch aus!

[liv-in-sky]

@da_woody

(dich zu verstehen ist komplizierter als das programmieren )

was sieht hübsch aus ?

das - trennungslinie 10?

oder das - extra trennung mit verlaufshintergrund?

oder die normale linie mit 1-2px?

[da_Woody]

@liv-in-sky i c, die mojis gefallen dir...!
, meinte nummer 2!

oder das - extra trennung mit verlaufshintergrund?

mir fällt blöd reden leichter, als proggen!

[da_Woody]

@dos1973 sorry, total überlesen...
naja, 20 gehn ja schon für die heizung drauf. 10x shelly1PM für die infrarot panele, 10x shellyH&T zum steuern.
das ganze läuft aber über die app automatisch. hab noch keine lösung für ioBroker... kein DP für sollwert...
in iQontrol rein nur als anzeige.

wenn ich im mom nicht so faul wäre, hätt ich schon locker 80. stehn noch ein paar 1er am plan und die shelly-motion sind auch endlich da.

[liv-in-sky]

@da_woody

ich hoffe mal, du hast das letzte update - scheint so, da du ja die anzahl mit drin hast

das musst du einsetzen:

let htmlTabUeber2="" sollte ungefähr mit der zeilennummer bei 290 sein - dann sollte es funktionieren - ich werd das auch im ersten post updaten - aber so brauchst du deine settings nicht wieder kopieren oder angleichen

der code:

Spoiler

let langeSpalten=htmlSpalte1Weite.length;
for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { if (!schalterInSpaltenUeberschrift[ue] ) { 
                   htmlTabUeber2=htmlTabUeber2.concat("<td width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+" style=\"color:"+htmlFarbTableColorUber+"\">"+htmlFeld[ue]+"</td>")} 
                   else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue;
                    if(ue==htmlSpalte1Weite.length-1) {htmlTabUeber2=htmlTabUeber2.concat("<th width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+">"+""+
                                                                  "<button class=\"myButt"+dpVIS+"\" style=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "
                                                                  +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text\-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                  +htmlFeld[ue]+"</button>"+" <font style=\"; font-weight: normal; font-size :"+groesseUeberschrift+"; color: "+htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+";\" > &ensp;&ensp;&ensp;&ensp;("+aktiv+"\/"+(aktiv+inaktiv)+")</th>")} else{
                                       htmlTabUeber2=htmlTabUeber2.concat("<th width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+">"+""
                                                                   +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "
                                                                   +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                   +htmlFeld[ue]+"</button></th>")} } //symbolSchalter[ue]   
                      }
let testing="<td  style=\" background-color: "+htmlBackgroundFarbeSeitenliste+"; margin-top: 200px; color: "+htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center \" width=\""+breiteSeitenleiste+"\" rowspan=\""+(langeGesamt+1)+"\">"+seitenLeistenTest+"</td>"
let testing2="<td  style=\" background-color: "+htmlBackgroundFarbeSeitenliste+"; margin-top: 200px; color: "+htmlFarbSeiteSchrift+ ";font-size:"+schriftGroesseSeitenleiste+"px; vertical-align:top; text-align:center \" width=\""+((((Number(breiteSeitenleiste))/8).toFixed(0)))+"\" rowspan=\""+(langeGesamt+1)+"\">"+seitenLeistenTest+"</td>"
let  htmlTabUeber2_1=""
for (let ue=0;ue<htmlSpalte1Weite.length;ue++) { let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue;
   if(ue==htmlSpalte1Weite.length-1) {htmlTabUeber2_1=htmlTabUeber2_1.concat("<td width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+">"+""
                                                                   +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "
                                                                   +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                   +htmlFeld[ue]+"</button></td>"+testing)}
   else{ if(ue==0){htmlTabUeber2_1=htmlTabUeber2_1.concat(testing2+"<td width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+">"+""
                                                                   +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "
                                                                   +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                   +htmlFeld[ue]+"</button></td>")


   } else{
    htmlTabUeber2_1=htmlTabUeber2_1.concat("<td width="+htmlSpalte1Weite[ue]+" align="+Feld1lAlign[ue]+">"+""
                                                                   +"<button class=\"myButt"+dpVIS+"\" style\=\" border-radius: 4px; border:"+schalterUmrahmung+"px solid; background-color\: "+htmlBackgroundFarbeSeitenliste+"\; color: "
                                                                   +htmlFarbTableColorUber+"; font-family: "+htmlSchriftart+"; font-size :"+groesseUeberschrift+"px; text-align:left\" value=\"toggle\" onclick=\"setOnOtherValue\(\'"+valButton+"\')\">"
                                                                   +htmlFeld[ue]+"</button></td>")}}  }

[da_Woody]

@liv-in-sky funzt!
zeile 53 muss dann noch auf

const trennungsLinie="0";

umgefummelt werden. gibt sonst seltsamen strich...