Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. HTML-Table für VIS oder Iqontrol (js und blockly)

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    HTML-Table für VIS oder Iqontrol (js und blockly)

    This topic has been deleted. Only users with topic management privileges can see it.
    • liv-in-sky
      liv-in-sky @mrfloppy last edited by

      @mrfloppy

      nur mal zum überlegen - wenn man die koordinaten direkt von einer tanke raussucht, bekommt man doch einen dp dazu - dann könnte man doch eine genaue liste mit seinen gebrauchten tankstellen machen - oder ist dir das mit dem umkreis und den vielen tanken lieber ?

      ich kenn das so vom tankerkönig

      hängt evtl davon ab, in welcher region man lebt - ich bin hier auf dem land - da habe ich nicht viele tankstellen auf meinen wegen

      M 1 Reply Last reply Reply Quote 0
      • M
        mrfloppy @liv-in-sky last edited by mrfloppy

        @liv-in-sky
        Nein das funktioniert bei Uns in Ö nicht so., leider.
        Das ganze beruht auf spritpreisrechner.at.
        Da gibt die API nur die ersten 5 Tankstellen den Preis her, daher der Umkreis.

        liv-in-sky 1 Reply Last reply Reply Quote 0
        • liv-in-sky
          liv-in-sky @mrfloppy last edited by

          @mrfloppy ich schaue es mir am WE an - vorher geht es zeitlich nicht

          M 1 Reply Last reply Reply Quote 0
          • M
            mrfloppy @liv-in-sky last edited by

            @liv-in-sky
            Danke absolut keine Eile

            liv-in-sky 1 Reply Last reply Reply Quote 0
            • liv-in-sky
              liv-in-sky @mrfloppy last edited by liv-in-sky

              @mrfloppy

              ich bräuchte von dir noch die bilder und die zuteilung - wir müssen wohl anhand eines teils des namen das bild zuteilen

              hoofe du verstehst, was ich meine

              es gibt z. b.

              Turmöl-Klaffenböck - da wäre dann Turmöl der namenswert, dem ich ein bild zuteile

              die bilder bitte alle im selben formt - evtl quadratisch wäre wohl am besten

              M 1 Reply Last reply Reply Quote 0
              • M
                mrfloppy @liv-in-sky last edited by mrfloppy

                @liv-in-sky
                Wenn du zum Test irgendein Pic nimmst. und man dieses kopiert und umbenennt, ginge das?
                Namen wären zb. Avanti, Lohberger, Turmöl, Shell, BP, Jet, Diskont Tanktstelle, Eni. Also eh so wie in den DP.
                Pics müsste ich mir erst komplett raussuchen und alle gleich anpassen. und zuschneiden.
                SO wie in der Trashschedule Liste da sind ja auch alle gleich groß oder?

                LG

                liv-in-sky 2 Replies Last reply Reply Quote 0
                • liv-in-sky
                  liv-in-sky @mrfloppy last edited by

                  @mrfloppy

                  wichtig ist, dass sie quadratisch sind - dann kann man das einfacher anzeigen - eilt nicht - ich brauch noch etwas

                  sind sie quadratisch, ist die größe schnell und simple gleichzubringen

                  1 Reply Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @mrfloppy last edited by

                    @mrfloppy

                    einfach sowas:

                    Logo_Turmoel.png

                    M 1 Reply Last reply Reply Quote 0
                    • M
                      mrfloppy @liv-in-sky last edited by

                      @liv-in-sky Treibstoffparadies.png JET.png Genol.png BP.png
                      Hier sind mal ein paar Pics zum testen
                      Passen die so?
                      LG

                      liv-in-sky 2 Replies Last reply Reply Quote 1
                      • liv-in-sky
                        liv-in-sky @mrfloppy last edited by

                        @mrfloppy

                        ja paßt so

                        und ein default logo - wenn keine zuteilung gefunden wird

                        M 1 Reply Last reply Reply Quote 0
                        • M
                          mrfloppy @liv-in-sky last edited by

                          @liv-in-sky SE&Fa.png MundS.png Lohberger.png Eni.png Diskont tanken.png defaulttanke.png

                          liv-in-sky 1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @mrfloppy last edited by liv-in-sky

                            @mrfloppy

                            hast du noch avia und omv und turmöl?

                            M 1 Reply Last reply Reply Quote 0
                            • M
                              mrfloppy @liv-in-sky last edited by

                              @liv-in-sky Turmoel.png OMV.png Avia.png

                              liv-in-sky 1 Reply Last reply Reply Quote 1
                              • liv-in-sky
                                liv-in-sky @mrfloppy last edited by liv-in-sky

                                @mrfloppy

                                kleiner zwischenstand:

                                die karte nimmt meinen standort (bayern) - daher ist die karte soweit gezogen - die farben der tabelle können eingestellt werden

                                telegram muss ich mal schauen, wann wieder zeit ist - evtl morgen

                                hoffe du nutzt die vis mit browser und nicht vis app - sonst funktioniert das widget nicht 😞

                                Image 171.png

                                Negalein 1 Reply Last reply Reply Quote 0
                                • liv-in-sky
                                  liv-in-sky @mrfloppy last edited by liv-in-sky

                                  @mrfloppy

                                  zum testen - ist noch nicht fertig - aber evtl findest du schon fehler

                                  für die widget muss das map- und inventwo widget-set installiert sein

                                  das script wird zum ersten mal geschrieben, wenn die dp aktualisiert werden (also von der instanz abhängig - alle 0/20/40 min)

                                  
                                  let anzahlAnzeige=7;
                                  let mySprit="SUP"; //GAS, DIE
                                  
                                  const config = getObject('system.config');
                                  const mylat =  (config.common.latitude).replace(/(.*\..+?.+?.+?.+?.+?.+?).+/,"$1"); //*/"48.427656" //
                                  const mylong = config.common.longitude.replace(/(.*\..+?.+?.+?.+?.+?.+?).+/,"$1");
                                  const defaultPic="/vis.0/Tankstellen/default.png"
                                  const pictures=[{"firma":"BP","pic":"/vis.0/Tankstellen/bp.png"},
                                                 {"firma":"Genol","pic":"/vis.0/Tankstellen/genol.png"},
                                                 {"firma":"eni","pic":"/vis.0/Tankstellen/bp.png"},
                                                 {"firma":"Diskont","pic":"/vis.0/Tankstellen/diskont.png"},
                                                 {"firma":"Turmöl","pic":"/vis.0/Tankstellen/turmoel.png"},
                                                 {"firma":"paradies","pic":"/vis.0/Tankstellen/treibstoffparadies.png"},
                                                 {"firma":"Lohberger","pic":"/vis.0/Tankstellen/lohberger.png"},
                                                 {"firma":"SB-Tankstelle","pic":"/vis.0/Tankstellen/sb.jpg"},
                                                 {"firma":"Hofer","pic":"/vis.0/Tankstellen/hofer.png"},
                                                 {"firma":"AVIA","pic":"/vis.0/Tankstellen/avia.png"},
                                                ]
                                  
                                  if(!existsState('0_userdata.0.FUELPRICEMONITOR.JsonAnzeige')) createState('0_userdata.0.FUELPRICEMONITOR.JsonAnzeige', "", { name: "JsonAnzeige", type:'string' }); 
                                  if ( existsState("javascript." + instance + ".FUELPRICEMONITOR.Targets.home"))  setState("javascript." + instance + ".FUELPRICEMONITOR.Targets.home",mylat+','+mylong);
                                        else  createState("javascript." + instance + ".FUELPRICEMONITOR.Targets.home", mylat+','+mylong, {type: "string", name: "Koordinaten FPM HOME", role: "value", read: true, write: true, } ); 
                                  on({id: "fuelpricemonitor.0.cheapestOverAll_"+mySprit+".0.amount", change: "any"}, async function (obj) {
                                   //var value = obj.state.val;
                                   //var oldValue = obj.oldState.val;
                                   //log(value);
                                  let unserJsonArray=[];
                                  
                                  $('fuelpricemonitor.*.cheapestOverAll_'+mySprit+'.*.address').each(function(id, i) {   
                                          let indexArr=id.split('.');
                                          let index=Number(indexArr[3]);
                                          let val0=getState(id).val; if(val0==null) val0="nicht angegeben"
                                          let val1=getState(id.replace("address","amount")).val;
                                          let val2=getState(id.replace("address","name")).val; if(val2==null) val2="nicht angegeben"
                                          let val3=getState(id.replace("address","id")).val;               
                                          let val4=searchLoc(val3);
                                      // hier noch die anderen dp
                                  
                                  
                                  //jetzt das json schreiben
                                  if(val1!=null && index<anzahlAnzeige){
                                  unserJsonArray.push({ "Index":    index,
                                                       "Logo":     getPic(val2),
                                                       "Adresse":  val0,
                                                       "Preis":    val1,
                                                       "Name":     val2,
                                                       "ID":       val3,
                                                       "Koordinaten": val4  })
                                  
                                  
                                  //if(existsState('0_userdata.0.FUELPRICEMONITOR.Targets.'+index+"er")) setState('0_userdata.0.FUELPRICEMONITOR.Targets.'+index+"er",val4.toString());
                                  //        else createState('0_userdata.0.FUELPRICEMONITOR.Targets.'+index+"er", val4.toString(), {type: "string", name: "Koordinaten FPM "+ index, role: "value", read: true, write: true,  }); 
                                  
                                  if ( existsState("javascript." + instance + ".FUELPRICEMONITOR.Targets."+index+"er"))  setState("javascript." + instance + ".FUELPRICEMONITOR.Targets."+index+"er",val4.toString());
                                        else  createState("javascript." + instance + ".FUELPRICEMONITOR.Targets."+index+"er", val4.toString(), {type: "string", name: "Koordinaten FPM "+ index, role: "value", read: true, write: true, } ); }
                                  
                                  
                                  
                                  })
                                  
                                  //log(JSON.stringify(unserJsonArray));
                                  
                                  // in eigenen dp speichern - type zeichenkette
                                  setState("0_userdata.0.FUELPRICEMONITOR.JsonAnzeige",JSON.stringify(unserJsonArray))
                                  });
                                  
                                  function searchLoc(theId){
                                  let  ergebnis="";
                                  $('fuelpricemonitor.0.*.*.location.latitude').each(function(id, i) {
                                     let indexArr=id.split('.');
                                     let indexId=indexArr[3];
                                     
                                    // log(theId +"  "+indexId )
                                     if(indexId==theId ){
                                                                                      //log(getState(id).val+","+getState(id.replace("latitude","longitude")).val)
                                                                                      ergebnis= (getState(id).val+","+getState(id.replace("latitude","longitude")).val).toString()
                                                                                      }
                                                                                      
                                  })
                                  //log (ergebnis)
                                  return ergebnis;
                                  
                                  }
                                  
                                  function getPic(nameTanke){
                                  let defaultTanke=defaultPic
                                  
                                  for(let i=0;i<pictures.length;i++){//log(nameTanke+"   -  "+pictures[i].firma+"  -  "+nameTanke.indexOf(pictures[i].firma))
                                   // if(pictures[i].firma.includes(nameTanke)) {defaultTanke=pictures[i].pic }
                                    if(nameTanke.indexOf(pictures[i].firma)>-1) {defaultTanke=pictures[i].pic; break }
                                  }
                                  //log(defaultTanke)
                                  return defaultTanke
                                  
                                  }
                                  
                                  
                                  
                                  
                                  
                                  
                                  

                                  widgets

                                  [{"tpl":"i-vis-jsontable","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","iTblRowLimit":"20","iTableRefreshRate":"0","iTblSortOrder":"asc","iColCount":"6","iColShow1":false,"iTblHeadTextAlign1":"center","iTblTextAlign1":"center","iTblCellFormat1":"normal","iTblCellImageSize1":"200","iTblCellBooleanCheckbox1":"false","iTblCellBooleanColorFalse1":"#ff0000","iTblCellBooleanColorTrue1":"#00ff00","iTblCellNumberDecimals1":"2","iTblCellNumberDecimalSeperator1":".","iTblCellNumberThousandSeperator1":",","iTblCellThresholdsDp1":"","iTblCellThresholdsText1":"","iOpacityAll":"1","iTblRowEvenColor":"#479de6","iTblRowUnevenColor":"#8dadb9","iTblHeaderColor":"#204565","iRowSpacing":"3.8","iTblRowEvenTextColor":"#ffffff","iTblRowUnevenTextColor":"#ffffff","iTblHeaderTextColor":"#ffffff","iBorderSize":"0","iBorderStyleLeft":"none","iBorderStyleRight":"none","iBorderStyleUp":"none","iBorderStyleDown":"none","iBorderColor":"#ffffff","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,"oid":"0_userdata.0.FUELPRICEMONITOR.JsonAnzeige","iTblShowHead":true,"iColShow2":"true","iTblHeadTextAlign2":"left","iTblTextAlign2":"left","iTblCellFormat2":"image","iTblCellImageSize2":"35","iTblCellBooleanCheckbox2":"false","iTblCellBooleanColorFalse2":"#ff0000","iTblCellBooleanColorTrue2":"#00ff00","iTblCellNumberDecimals2":"2","iTblCellNumberDecimalSeperator2":".","iTblCellNumberThousandSeperator2":",","iTblCellThresholdsDp2":"","iTblCellThresholdsText2":"","iColShow3":"true","iTblHeadTextAlign3":"center","iTblTextAlign3":"center","iTblCellFormat3":"normal","iTblCellImageSize3":"200","iTblCellBooleanCheckbox3":"false","iTblCellBooleanColorFalse3":"#ff0000","iTblCellBooleanColorTrue3":"#00ff00","iTblCellNumberDecimals3":"2","iTblCellNumberDecimalSeperator3":".","iTblCellNumberThousandSeperator3":",","iTblCellThresholdsDp3":"","iTblCellThresholdsText3":"","iColShow4":"true","iTblHeadTextAlign4":"left","iTblTextAlign4":"left","iTblCellFormat4":"normal","iTblCellImageSize4":"200","iTblCellBooleanCheckbox4":"false","iTblCellBooleanColorFalse4":"#ff0000","iTblCellBooleanColorTrue4":"#00ff00","iTblCellNumberDecimals4":"2","iTblCellNumberDecimalSeperator4":".","iTblCellNumberThousandSeperator4":",","iTblCellThresholdsDp4":"","iTblCellThresholdsText4":"","iColShow5":true,"iTblHeadTextAlign5":"center","iTblTextAlign5":"center","iTblCellFormat5":"normal","iTblCellImageSize5":"200","iTblCellBooleanCheckbox5":"false","iTblCellBooleanColorFalse5":"#ff0000","iTblCellBooleanColorTrue5":"#00ff00","iTblCellNumberDecimals5":"2","iTblCellNumberDecimalSeperator5":".","iTblCellNumberThousandSeperator5":",","iTblCellThresholdsDp5":"","iTblCellThresholdsText5":"","iColShow6":false,"iTblHeadTextAlign6":"center","iTblTextAlign6":"center","iTblCellFormat6":"normal","iTblCellImageSize6":"200","iTblCellBooleanCheckbox6":"false","iTblCellBooleanColorFalse6":"#ff0000","iTblCellBooleanColorTrue6":"#00ff00","iTblCellNumberDecimals6":"2","iTblCellNumberDecimalSeperator6":".","iTblCellNumberThousandSeperator6":",","iTblCellThresholdsDp6":"","iTblCellThresholdsText6":"","iColShow7":"true","iTblHeadTextAlign7":"center","iTblTextAlign7":"center","iTblCellFormat7":"normal","iTblCellImageSize7":"200","iTblCellBooleanCheckbox7":"false","iTblCellBooleanColorFalse7":"#ff0000","iTblCellBooleanColorTrue7":"#00ff00","iTblCellNumberDecimals7":"2","iTblCellNumberDecimalSeperator7":".","iTblCellNumberThousandSeperator7":",","iTblCellThresholdsDp7":"","iTblCellThresholdsText7":"","iColShow8":"true","iTblHeadTextAlign8":"center","iTblTextAlign8":"center","iTblCellFormat8":"normal","iTblCellImageSize8":"200","iTblCellBooleanCheckbox8":"false","iTblCellBooleanColorFalse8":"#ff0000","iTblCellBooleanColorTrue8":"#00ff00","iTblCellNumberDecimals8":"2","iTblCellNumberDecimalSeperator8":".","iTblCellNumberThousandSeperator8":",","iTblCellThresholdsDp8":"","iTblCellThresholdsText8":"","iColShow9":"true","iTblHeadTextAlign9":"center","iTblTextAlign9":"center","iTblCellFormat9":"normal","iTblCellImageSize9":"200","iTblCellBooleanCheckbox9":"false","iTblCellBooleanColorFalse9":"#ff0000","iTblCellBooleanColorTrue9":"#00ff00","iTblCellNumberDecimals9":"2","iTblCellNumberDecimalSeperator9":".","iTblCellNumberThousandSeperator9":",","iTblCellThresholdsDp9":"","iTblCellThresholdsText9":"","iTblFixedHead":true,"iTblSortAttr":"","iColName1":"","iColName2":"","iColWidth2":""},"style":{"left":"228px","top":"770px","width":"641px","height":"339px","font-size":"small","overflow-y":"scroll","z-index":"100"},"widgetSet":"vis-inventwo"},{"tpl":"tplOsm","data":{"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","mCount":"6","maxZoom":"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,"hideControls":true,"markersSwap1":true,"markersLon-oid1":"javascript.0.FUELPRICEMONITOR.Targets.0er","markersLat-oid1":"","markersWidth1":"15","markersHeight1":"15","markersOffsetX1":"","markersOffsetY1":"","markersImage1":"/vis.0/armin/img/zahl/1-green.png","markersLon-oid2":"javascript.0.FUELPRICEMONITOR.Targets.1er","markersSwap2":true,"markersLon-oid3":"javascript.0.FUELPRICEMONITOR.Targets.2er","markersSwap3":true,"markersLon-oid4":"javascript.0.FUELPRICEMONITOR.Targets.3er","markersSwap4":true,"markersImage4":"/vis.0/armin/img/zahl/4-green.png","markersImage3":"/vis.0/armin/img/zahl/3-green.png","markersImage2":"/vis.0/armin/img/zahl/2-green.png","markersLon-oid6":"javascript.0.FUELPRICEMONITOR.Targets.home","markersSwap6":true,"markersImage6":"/vis.0/armin/img/haus2.png","g_markers_§4":false,"markersWidth2":"15","markersHeight2":"15","markersWidth3":"15","markersHeight3":"15","markersWidth4":"15","markersHeight4":"15","markersWidth6":"15","markersHeight6":"15"},"style":{"left":"907px","top":"856px","width":"380px","height":"273px"},"widgetSet":"map"}]
                                  

                                  die bilder müssen unter /vis.0/Tankstellen/ gespeichert werden !! über den dateimanager und genau so heißen

                                  bilder.7z

                                  die bilder für die map kannst du selbst wählen im widget - ich kann dir auch gerne meine geben

                                  M Chaot 3 Replies Last reply Reply Quote 0
                                  • Negalein
                                    Negalein Global Moderator @liv-in-sky last edited by

                                    @liv-in-sky sagte in HTML-Table für VIS oder Iqontrol (js und blockly):

                                    die karte nimmt meinen standort (bayern)

                                    und die Tankstellen sind alles meine Nachbargemeinden! 😁
                                    Ich bin ca. mittig von denen!

                                    liv-in-sky 1 Reply Last reply Reply Quote 0
                                    • M
                                      mrfloppy @liv-in-sky last edited by

                                      @liv-in-sky
                                      thx mal werde ich später testen

                                      1 Reply Last reply Reply Quote 0
                                      • liv-in-sky
                                        liv-in-sky @Negalein last edited by

                                        @negalein dann weiß ich, wo ich dich suchen muss 😈

                                        1 Reply Last reply Reply Quote 1
                                        • Chaot
                                          Chaot @liv-in-sky last edited by

                                          @liv-in-sky hast du eventuell noch Bilder für Aral, Ultsch und DEA

                                          liv-in-sky 1 Reply Last reply Reply Quote 0
                                          • liv-in-sky
                                            liv-in-sky @Chaot last edited by

                                            @chaot nee - habe ich nicht zusammengesucht - ich code nur 🙂

                                            aber wenn jmd welche hat - bitte posten, damit ich die einbinden kann

                                            M 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            519
                                            Online

                                            31.6k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            blockly javascript template
                                            19
                                            295
                                            48027
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo