Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. ioBroker Allgemein
    4. Geofency auf Karte in Vis darstellen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Geofency auf Karte in Vis darstellen

    This topic has been deleted. Only users with topic management privileges can see it.
    • Damrak2022
      Damrak2022 @mickym last edited by

      @mickym Ja, jetzt geht es

      mickym 1 Reply Last reply Reply Quote 0
      • mickym
        mickym Most Active @Damrak2022 last edited by

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

        Damrak2022 1 Reply Last reply Reply Quote 0
        • Damrak2022
          Damrak2022 @mickym last edited by

          @mickym Jepp

          mickym 1 Reply Last reply Reply Quote 0
          • mickym
            mickym Most Active @Damrak2022 last edited by

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

            Das Kartenmenü öffnest Du über den Papierstapel:

            d15e81a7-fd84-4aae-8f35-ef4ff5119652-image.png

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

            Damrak2022 1 Reply Last reply Reply Quote 0
            • Damrak2022
              Damrak2022 @mickym last edited by

              @mickym Ja, das klappt auch

              mickym 1 Reply Last reply Reply Quote 0
              • mickym
                mickym Most Active @Damrak2022 last edited by

                @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:

                caa5e142-7c37-43ad-9e8d-685c8ce80ed6-image.png

                [
                   {
                       "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 1 Reply Last reply Reply Quote 0
                • Damrak2022
                  Damrak2022 @mickym last edited by

                  @mickym Ja, habe ich

                  mickym 1 Reply Last reply Reply Quote 0
                  • mickym
                    mickym Most Active @Damrak2022 last edited by mickym

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

                    Damrak2022 1 Reply Last reply Reply Quote 0
                    • Damrak2022
                      Damrak2022 @mickym last edited by

                      @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 1 Reply Last reply Reply Quote 0
                      • mickym
                        mickym Most Active @Damrak2022 last edited by

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

                        Damrak2022 1 Reply Last reply Reply Quote 0
                        • Damrak2022
                          Damrak2022 @mickym last edited by

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

                          mickym 1 Reply Last reply Reply Quote 0
                          • mickym
                            mickym Most Active @Damrak2022 last edited by mickym

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

                            Damrak2022 1 Reply Last reply Reply Quote 0
                            • Damrak2022
                              Damrak2022 @mickym last edited by

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

                              mickym 1 Reply Last reply Reply Quote 0
                              • mickym
                                mickym Most Active @Damrak2022 last edited by

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

                                Damrak2022 1 Reply Last reply Reply Quote 0
                                • Damrak2022
                                  Damrak2022 @mickym last edited by

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

                                  Damrak2022 mickym 2 Replies Last reply Reply Quote 0
                                  • Damrak2022
                                    Damrak2022 @Damrak2022 last edited by

                                    @damrak2022 Habe den Fehler entdeckt

                                    1 Reply Last reply Reply Quote 0
                                    • mickym
                                      mickym Most Active @Damrak2022 last edited by mickym

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

                                      bfccce3b-2d7e-4733-bb72-d876ba7bb76d-image.png

                                      Damrak2022 1 Reply Last reply Reply Quote 0
                                      • Damrak2022
                                        Damrak2022 @mickym last edited by 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 1 Reply Last reply Reply Quote 0
                                        • mickym
                                          mickym Most Active @Damrak2022 last edited by

                                          @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:
                                          278fd6bc-1e0e-4007-8b8a-93d2eee253c2-image.png

                                          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.

                                          Damrak2022 1 Reply Last reply Reply Quote 0
                                          • Damrak2022
                                            Damrak2022 @mickym last edited by

                                            @mickym Okay, habe die zwei Flashs weggemacht - Sieht super aus, was Du da gemacht hast. Und jetzt kann ich die Farbe setzen Nodes wieder mit den My Query verbinden, damit ich auch alle anderen Orte auf der Karte sehe?
                                            Bildschirmfoto 2022-08-31 um 18.06.40.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate
                                            FAQ Cloud / IOT
                                            HowTo: Node.js-Update
                                            HowTo: Backup/Restore
                                            Downloads
                                            BLOG

                                            910
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            3
                                            698
                                            81852
                                            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