Geofency auf Karte in Vis darstellen

mickym

@damrak2022 Nein lass die ruhig - aber zusätzlich natürlich noch mit der Latitude Node verbinden - Es muss nun natürlich eine durchgehende Verbindung von vorne bis hinten existieren.

Damrak2022

@mickym Ja, jetzt geht es

mickym

@damrak2022 Siehst Du also Deinen myHome Punkt auf der karte?

Damrak2022

@mickym Jepp

mickym

@damrak2022 Ok Deine Punkte haben wir nun dem layer Andy's Favoriten hinzugefügt.

Das Kartenmenü öffnest Du über den Papierstapel:

Dort kannst Du über die Checkbox nun Deinen Punkt ein- und ausblenden. Funktioniert das?

Damrak2022

@mickym Ja, das klappt auch

mickym

@damrak2022 So dann nähern wir uns dem Ende des Projektes, weil ich das nun im Großen und Ganzen nach meinem ästhetischem Empfinden gemacht habe - und falls Du das anders haben willst - dann empfehle ich Dir @OliverIO - der scheint mir hier der HTML Profi zu sein.

Erst mal unformatiert:

Bitte diese Node importieren und hinter die JOIN Node im unteren Flow hängen:

[
   {
       "id": "12838a4c3b5049ec",
       "type": "function",
       "z": "42e3c58ef661ea13",
       "name": "Erstelle HTML Tabelle V2 für WorldMap",
       "func": "/**********************************************************************************************************/\n/* Zweck:      Erstellt eine HTML Tabelle für Popup der World-Maps\n/* Datum:      31.08.2022\n/* Autor:      @mickym\n/*\n/**********************************************************************************************************/\n\nif (typeof msg.payload === \"object\") {\n  var table = '';\n  var tHeight = msg.payload.length > 10 ? \"height:265px\" : \"height:100%\";\n  var html_styles = `\n    <head>\n      <style>\n        table {\n          font-family: arial, sans-serif;\n          border-collapse: collapse;\n          display: block;\n          overflow-y: scroll;\n          scrollbar-width: none;  /* Firefox */\n        }\n\n      /* Hide scrollbar for Chrome, Safari and Opera */\n        table::-webkit-scrollbar {\n          display: none;\n        }\n\n       \n        th {\n          border: 1px solid #dddddd;\n          text-align: center;\n          padding: 4px;\n        }\n\n        td {\n          border: 1px solid #dddddd;\n          text-align: center;\n          padding: 4px;\n        }\n\n        tr:nth-child(even) {\n          background-color: #dddddd;\n        }\n      </style>\n    </head>`\n\n  /***          Formatierung ein und ausschalten            ***/\n  // table = html_styles;\n  \n  table += `\n    <table style=\"height:30px\"> \n      <tr> \n          <th style=\"width:55px\">Ereignis</th> \n          <th style=\"width:125px\">Zeitstempel</th>\n      </tr> \n    </table>\n    <table style=\"` + tHeight + `\">`\n\n  msg.payload.forEach(function(/** @type {{ ereignis: any; zeitstempel: any; }} */ element) {\n      table += `\n        \n          <tr>\n            <td style=\"width:55px\">` + element.ereignis + `</td>\n            <td style=\"width:125px\">` + element.zeitstempel +`</td>\n          </tr>`\n  });\n\n  table += `\n        </table>`;\n\n  // node.warn(table);\n  msg.table = table;\n}\n\nreturn msg;",
       "outputs": 1,
       "noerr": 0,
       "initialize": "",
       "finalize": "",
       "libs": [],
       "x": 2230,
       "y": 1040,
       "wires": [
           [
               "d368b3d692533f66"
           ]
       ]
   }
]

Damrak2022

@mickym Ja, habe ich

mickym

@damrak2022 Browser 2 mal refreshen auf den Ortspunkt in der Karte klicken und Screenshot der karte zeigen.

Damrak2022

@mickym Habe ich gemacht. Beim Klicken auf den Punkt auf der Karte passiert noch nichts. Ich kann aber mal einen anderen Browser versuchen - Moment

mickym

@damrak2022 Beim iPad musst Du mit dem Finger nur etwas länger auf dem Punkt bleiben.

Damrak2022

@mickym In Chrome am Mac sieht es so aus:
Bildschirmfoto 2022-08-31 um 17.40.25.png

mickym

@damrak2022 2 mal refreshen bitte. Und zeigen wohin Du die importierte Node gesteckt hast.

Damrak2022

@mickym Habe Chrome 3 mal refresht - Anzeige bleibt gleich. Eventuell sollte ich den Rechner mal neustarten . Bin gleich wieder da

mickym

@damrak2022 Nein Rechner brauchst nicht neu starten - zeig den Flow wohin Du die neue Node gepackt hast.

Damrak2022

@mickym Bildschirmfoto 2022-08-31 um 17.49.46.png

Damrak2022

@damrak2022 Habe den Fehler entdeckt

mickym

@damrak2022 Na wie soll denn bitte da was ankommen???? - die neue Node schmeisst ihren Output ja ins Nirwana.

Damrak2022

@mickym Nirwana ist schlecht, da hast Du recht.
In Chrome so:
Bildschirmfoto 2022-08-31 um 17.52.39.png
Mega gut

In Safari wird mir nicht angezeigt, obwohl da Inhaltsblocker und Popup deaktiviert sind, aber das kann ich ja nochmal in Ruhe prüfen

Bildschirmfoto 2022-08-31 um 17.55.03.png

mickym

@damrak2022 Du musst länger drauf bleiben. So nun habe ich als kleine Überraschung - das ganze auch noch in formatierter Form . Habe mich deshalb da heute bisschen mit beschäftigt. Wie gesagt auf dem Ipad musste ich den Punkt nur länger berühren.

Du siehst ja das die Tabelle lang wird - ich hab da - weil ich Scrollbalken störend fand das so gemacht, dass man trotzdem scrollen kann - ohne Scrollbalken einfach in die Tabelle klicken und dann am Mausrad drehen. - So wird das Popup nur unendlich groß.

Ich hab da bissi Code geklaut:

Also was Du machen musst ist, die Funktion Node, die Du importiert hast die Formatierung aktivieren:

/**********************************************************************************************************/
/* Zweck:      Erstellt eine HTML Tabelle für Popup der World-Maps
/* Datum:      31.08.2022
/* Autor:      @mickym
/*
/**********************************************************************************************************/

if (typeof msg.payload === "object") {
  var table = '';
  var tHeight = msg.payload.length > 10 ? "height:265px" : "height:100%";
  var html_styles = `
    <head>
      <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          display: block;
          overflow-y: scroll;
          scrollbar-width: none;  /* Firefox */
        }

      /* Hide scrollbar for Chrome, Safari and Opera */
        table::-webkit-scrollbar {
          display: none;
        }

       
        th {
          border: 1px solid #dddddd;
          text-align: center;
          padding: 4px;
        }

        td {
          border: 1px solid #dddddd;
          text-align: center;
          padding: 4px;
        }

        tr:nth-child(even) {
          background-color: #dddddd;
        }
      </style>
    </head>`

  /***          Formatierung ein und ausschalten            ***/
  // table = html_styles;
  
  table += `
    <table style="height:30px"> 
      <tr> 
          <th style="width:55px">Ereignis</th> 
          <th style="width:125px">Zeitstempel</th>
      </tr> 
    </table>
    <table style="` + tHeight + `">`

  msg.payload.forEach(function(/** @type {{ ereignis: any; zeitstempel: any; }} */ element) {
      table += `
        
          <tr>
            <td style="width:55px">` + element.ereignis + `</td>
            <td style="width:125px">` + element.zeitstempel +`</td>
          </tr>`
  });

  table += `
        </table>`;

  // node.warn(table);
  msg.table = table;
}

return msg;

Geh dann dort mal in Zeile 47 und mach die 2 // vorne weg und deploy das ganze nochmal - und das ist dann mein finales Ergebnis für DIch.

Community Forum

NEWS

Geofency auf Karte in Vis darstellen

Support us

547

32.8k

82.7k

1.3m