Map Widget reloaded - Neue Version des Map Widgets

Stelaku · 11 Februar 2021, 14:24:59

Warum denn nicht. Der Dummy ist echt klasse.

Ich habe das attr. für die Polygone im Dummy einfach mal auf 1000000 gestellt.

Viele Grüsse

Stephan

eki · 11 Februar 2021, 14:59:34

Bin mal gespannt, wann Dein FHEM Server dann in die Knie geht

. Spätestens dann solltest Du Dich noch mal mit dem Thema Heatmap anfreunden. Für so einen Staubsauger fände ich in erster Linie interessant, ob er schön überall war und keine Ecken ausgelassen hat, wo sich dann doch die Wollmäuse tummeln. Ob er rechtsrum oder linksrum fährt wäre für mich eher nebensächlich. Und dafür ist eine Heatmap meines Erachtens sehr gut geeignet.

Stelaku · 11 Februar 2021, 15:14:43

Da gebe ich Dir recht. Der Wert ist bei zweiter Betrachtung wirklich sehr hoch. Mit 4000 sollte ich auch schon hinkommen. Aber ich lösche ja jeden Tag das Polygon und Headmap reading.

Zitat von: curt am 11 Februar 2021, 10:17:01
Kannst Dir mir mal bitte Deine aktuelle map.html zeigen?
Und kannst Du mir die Auflösung Deiner PNG-Datei sagen, also x mal y?

Mein Grundriss hat eine Pixelgrösse von 1920x1080 X Y habe ich da leider nicht.
Der Grundriss wird auch nicht über x y auf der Karte positioniert. Sondern über zwei durch jeweils Längen und Breitgraden festgelegte Punkte.
Wenn Du keine png Datei in dem ausgewählten Verzeichnis hast wird ein leeres Rechteck gezeichnet so wie in post #155 zu sehen. Die Grösse des Rechtecks wird Durch diese Zeile im .html Code bestimmt.

Code Auswählen

data-overlay="../images/default/fp_Grundriss.png,54.6351533, 8.358227,54.6350360, 8.358580,1,0,25"
54.6351533, 8.358227 ist da oben links
54.6350360, 8.358580 ist unten rechts.

Wenn Du eine .png im o.g. Pfad hast wird diese nach diesen Koordinaten auseinandergezogen oder zusammengeschrumpft.
Das ist das Frickelige hier die richtigen Koordinaten herauszufinden. Habe mich da auch sehr langsam durch ändern der 5 Stelle hinterm Punkt der längen und Breitengrade herangetastet bis
Der Reinigungsverlauf in meinen Grundriss abgebildet wurde.

Viele Grüsse

Stephan

curt · 12 Februar 2021, 18:05:00

Zitat von: eki am 11 Februar 2021, 12:51:55
Der Dummy war übrigens nur als Anregung für Euch gedacht, damit mal ein Start zum Ausprobieren da ist. Dass Ihr den direkt mit allen Parametern (inklusive Referenzpunkt etc.) unreflektiert übernehmt, hatte ich nicht gedacht

Irgendwie muss man ja anfangen. Kaputtmachen kann man es später ja immer noch ...

So, zu meinem aktuellen Stand:
Iss-ja-mal-schee ... ein kleines schwarzes Auto fährt auf einer weißen png-Karte rum (siehe Anhang).

Ich habe Fragen:
@Stelaku Du hast da in #145 jetzt ein DOIF "run_state", das setzt offenbar state(?) des Dummy testVCRobot. Welchem Zweck dient das?

@eki Du hast in #131 eine völlig andere Grafik, was hat es damit auf sich?

Doofe Frage: Es wäre ja schön, wenn das kleine Auto seine Farbe ändert: Wenn er putzt grün, wenn er lädt Orange, wenn er Störung hat rot ... ist das implementiert? Dient Stephans DOIF etwa dazu?

Ach, das wichtigste: Danke!

Stelaku · 12 Februar 2021, 18:59:23

Hallo curt

das sieht ja schon gut aus.

Das DOIF aus #145 run_state ist wie Du schon vermutet hast genau dafür da um das Icon und die Farbe im map_widget zu bestimmen.
aktuell habe ich mein DOIF so stehen.

Code Auswählen

defmod run_state DOIF ([Martha_1] eq "Fully charged")\
	(set testVCRobot voll)\
\
DOELSEIF\
([Martha_1] eq "Charging")\
	(\
	set testVCRobot laden\
	)\
	(\
	{fhem("setreading testVCRobot point -1.4,1.5")}\
	)\
	\
DOELSEIF\
([Martha_1] =~ "recharge")\
	(\
	set testVCRobot zwischenl\
	)\
		\
DOELSEIF\
([Martha_1] =~ "cleaning")\
	(set testVCRobot clean)\
	\
\

attr run_state room KARTE

Je nach dem welches state das dummy testVCRobot dadurch bekommt ändert sich das icon und die Farbe.
Das sieht dann in meiner aktuellen map.html so aus

Code Auswählen

  		data-readingstyles='[
								"voll:fa-home,,#000000,25,60",
								"clean:fa-circle,,#0c00a4,25,60",
								"zwischenl:fa-circle,,#ff0000,25,60",
								"laden:fa-home,,#ff0000,25,60"				
							]'
		data-stylereading="state">

data-readingstyles bewirkt je nach state des dummy testVCRobot bei mir

state dummy testVCRobot voll => es wird ein schwarzes Haus auf der Karte gezeigt.
state dummy testVCRobot clean => es wird ein blauer Punkt auf der Karte gezeigt.
state dummy testVCRobot zwischenl => es wird ein roter Punkt auf der Karte gezeigt.
state dummy testVCRobot laden => es wird ein rotes Haus auf der Karte gezeigt.

die Farben werden bei mir durch die erste 6 Stellige zahl hinter dem # definiert. Das ist der hex code für die jeweilige Farbe. den code dafür kannst Du z.B.
hier finden https://html-color-codes.info/webfarben_hexcodes/
die zweite Zahl bei mir 25 gibt die grösse des Icon wieder.
Die dritte zahl bei mir die 60 sagt etwas über die Transparenz des Icons aus.

viele Grüsse

Stephan

curt · 13 Februar 2021, 02:17:07

Bzgl. des Findens von Koordinaten vergaß ich einen Hinweis:
https://www.wikimapia.org hat ein Fadenkreuz. Luftbild als Overlay an und so weit wie möglich reinzoomen, Fadenkreuz durch Verschieben der Karte positionieren, Koordinate aus der URL kopieren. Fertig.

(das attr. für die Polygone im Dummy)

Zitat von: Stelaku am 12 Februar 2021, 18:59:23
Mit 4000 sollte ich auch schon hinkommen.

Spätestens beim Rubbel-Wischen reicht das nicht.

Zitat von: Stelaku am 12 Februar 2021, 18:59:23
das sieht ja schon gut aus.

Dank Deiner Vorarbeit und Hilfe wird das schrittweise immer besser!
Schrittweise ... es hakt hoch, vermutlich bei meinem Verständnis der Sache.

Zitat von: Stelaku am 12 Februar 2021, 18:59:23
Das DOIF aus #145 run_state ist wie Du schon vermutet hast genau dafür da um das Icon und die Farbe im map_widget zu bestimmen.
aktuell habe ich mein DOIF so stehen.
Das sieht dann in meiner aktuellen map.html so aus

Alles übernommen.
"{fhem("setreading testVCRobot point 1.2,1.2")}" dient der regelmäßigen Kalibrierung? Da müsste ich vermutlich noch den Winkel setzen; ich habe aktuell das Problem, dass er gern mal einen weiteren Durchlauf mit anderem Winkel macht.

Zitat von: Stelaku am 12 Februar 2021, 18:59:23
data-readingstyles bewirkt je nach state des dummy testVCRobot bei mir
state dummy testVCRobot voll => es wird ein schwarzes Haus auf der Karte gezeigt.

Aber nur sehr theoretisch:

Zitat von: Stelaku am 12 Februar 2021, 18:59:23
die Farben werden bei mir durch die erste 6 Stellige zahl hinter dem # definiert. Das ist der hex code für die jeweilige Farbe. den code dafür kannst Du z.B.
hier finden https://html-color-codes.info/webfarben_hexcodes/
die zweite Zahl bei mir 25 gibt die grösse des Icon wieder.
Die dritte zahl bei mir die 60 sagt etwas über die Transparenz des Icons aus.

Webcolors ist bekannt. Der Rest wackelt, jedenfalls bei mir. Oder muss derzeit so, keine Ahnung:
Also erstens ändert der aufgezeichnete Fahrweg (real: das Polygon) je nach aktuellem state komplett die Farbe. Also wenn er fährt, ist der komplette aufgezeichnete Weg grün, wenn er lädt, färbt sich der komplette aufgezeichnete Fahrweg in blau - muss das so?

Weiterhin hätte ich angenommen, dass der zweite Wert von data-stroke die Dicke des Strichs des Fahrwegs beeinflusst - dem ist aber nicht so. Sondern der Fahrweg ist irre dick. Wenn ich nun jeweils den zweiten Parameter von data-readingstyles von 25 auf 5 setze, macht das den Fahrweg "dünner".
Leider mit dem Seiteneffekt, dass ich das aktuelle Icon nie sehe - das hat damit ja auch nur 5px. Also da mache ich noch irgendwas falsch. Oder habe ich die falsche Version von widget_maps (146745 Byte)? Oder das muss derzeit so?

Abschließend, nur als Info:
Für state (und run_state) von Putzi sind mir bislang folgende (weiteren) Werte untergekommen:
* cleaning vacuum
* cleaning vacuum and mop
* cleaning mop
* paused (hängt fest oder wenn der Akku runter ist)
* ilde (fertig, findet Ladestation nicht) [Could not navigate to location]
* Low battery
* dock
* standby (keine Ladestation da, war Startpunkt, Putzi wieder dort)
* error (unsicher, meine ich gesehen zu haben)

eki · 13 Februar 2021, 11:17:43

Vielleicht postest Du hier mal Deine Definition (html) und ein List Deines Dummies, dann ist die Hilfe einfacher.

Wenn Du wirklich 2 Map divs mit dem gleichen Wert bei data-mapgroup so wie in meinem Beispiel verwendest, dann sollte die Darstellung des Pfades und des Icons komplett unabhängig voneinander steuerbar sein (aber so, wie Du das schilderst, hast Du alles in ein Map Div gepackt, dann geht das nicht).

Die Darstellung in #131 ist durch die Nutzung einer Heatmap erzeugt, das habe ich weiter oben auch erklärt. Dabei werden in den Dummy Einträge mit Position und Häufigkeit des Erreichens dieser Position im Reading heatmap eingetragen (wie fein das aufgelöst wird, hängt vom Attribut gridsize ab). Auf der Karte erfolgt dann eine Einfärbung der angefahrenen Punkte entsprechend der Häufigkeit. Damit könnte man sehen, wo der Staubsauger häufiger war und wo er eventuell Lücken lässt.

Stelaku · 13 Februar 2021, 11:20:44

Hallo curt

Zitat{fhem("setreading testVCRobot point 1.2,1.2")}

habe ich dafür das das Icon beim Laden von Martha auch auf der Position von der Ladestation ist. Wenn Martha zu Laden fährt passt das nicht immer. Dann war das rote Haus immer irgendwo auf der Karte und nicht in der Ladestation.

ZitatAlso erstens ändert der aufgezeichnete Fahrweg (real: das Polygon) je nach aktuellem state komplett die Farbe. Also wenn er fährt, ist der komplette aufgezeichnete Weg grün, wenn er lädt, färbt sich der komplette aufgezeichnete Fahrweg in blau - muss das so?

Ich glaube Du hast das attr. data-readingstyles in beiden definitionen ( id=Test1 und id=Test2 ) eingetragen. Das brauchst Du aber nur in der zweiten Definition. Vergleich das mal mit meinem html aus #145. Der ist immer noch aktuell.

ZitatWeiterhin hätte ich angenommen, dass der zweite Wert von data-stroke die Dicke des Strichs des Fahrwegs beeinflusst - dem ist aber nicht so. Sondern der Fahrweg ist irre dick. Wenn ich nun jeweils den zweiten Parameter von data-readingstyles von 25 auf 5 setze, macht das den Fahrweg "dünner".
Leider mit dem Seiteneffekt, dass ich das aktuelle Icon nie sehe - das hat damit ja auch nur 5px. Also da mache ich noch irgendwas falsch. Oder habe ich die falsche Version von widget_maps (146745 Byte)? Oder das muss derzeit so?

Die Farbe und dicke des Striches wird durch data_stroke der ersten definition bestimmt id="Test1". Das Icon wird in der zweiten definition bestimmt.
Der Strich wird bei mir zur Zeit so bestimmt

Code Auswählen

data-stroke="#0c00a4,2,60">

Verdammt jetzt war ich zu langsam eki hat auch schon was geschrieben.

Viele Grüsse

Stephan

curt · 14 Februar 2021, 19:17:25

Ganz herzlichen Dank Euch beiden - das hatte ich nicht verstanden. Jetzt habe ich es verstanden.

Bei dem setreading-Vorschlag muss ich noch üben, das läuft bei mir noch nicht richtig. Auch der Winkel stimmt noch nicht.

ReneR1986 · 03 April 2021, 13:21:03

Hallo zusammen,

gibt es eine Möglichkeit dem Attribut data-center die Werte von data-latitude und data-longitude zu geben?
Die Werte von data-latitude und data-longitude ändern sich bei mir häufig. Und ich würde gerne immer den aktuellen Kartenausschnitt sehen.

VG

ReneR1986 · 04 April 2021, 13:58:52

OK, hab es jetzt.
Da ich nicht das TRAFFIC Modul nutze und somit nicht automatisch das Reading GoogleMapsCenter habe, habe ich einfach ein userRading "GoogleMapsCenter" erstellt und da die Koordinaten reingeschrieben.

Dann einfach data-center weggelassen und es funktioniert.

Hier mein userReading:
GoogleMapsCenter {my $lat = ReadingsVal('carnet','position_lat',0);my $lng=ReadingsVal('carnet','position_lng',0); return $lat.','.$lng;}

Ulm32b · 18 August 2021, 12:29:31

Hallo Eki,

im grundsätzlich genialen MAP-Widget bin ich auf ein kleines Problemchen gestoßen:

Einwandfrei funktioniert die Einbindung einer Karte in eine Pagebutton-Umgebung:

Code Auswählen

<!DOCTYPE html>
<html>
<title>FHEM</title>

<body>
  <div class="page" id="content6_5">

    <div class="gridster">
      <ul>

		<li data-row="2" data-col="1" data-sizex="9" data-sizey="5" style="background: rgba(25,25,25,.9);">

			<div id="Karte_Umgebung"
				style="height:100%; width:100%;"
				data-type="maps"
				data-map_type="Google"
				data-mapgroup="1"
				data-stroke="#0000FF,20,80"	
				data-center="51.xxx,7.yyy"
				data-zoom="14"
				data-showdetails="false"
				data-style="Dark"	
				data-device="global"
				></div>

		</li>
	  </ul>
	</div>
  </div>
</body>
</html>

Siehe hierzu das erste Bild.

Um auch die Radarkontrollen in der Karte anzuzeigen, wird der Code erweitert:

Code Auswählen

<!DOCTYPE html>
<html>
<title>FHEM</title>

<body>
  <div class="page" id="content6_5">

    <div class="gridster">
      <ul>

		<li data-row="2" data-col="1" data-sizex="9" data-sizey="5" style="background: rgba(25,25,25,.9);">

			<div id="Karte_Umgebung"
				style="height:100%; width:100%;"
				data-type="maps"
				data-map_type="Google"
				data-mapgroup="1"
				data-stroke="#0000FF,20,80"	
				data-center="51.xxx,7.yyy"
				data-zoom="14"
				data-showdetails="false"
				data-style="Dark"	
				data-device="global"
				></div>

			<div id="Radar_Umgebung"
				style="height:100%; width:100%;"
				data-type="maps"
				data-map_type="Google"
				data-mapgroup="1"
				data-stroke="#0000FF,20,80"	
				data-center="51.xxx,7.yyy"
				data-zoom="14"
				data-showdetails="false"
				data-traffic="true"
				data-blitzer="Radarkontrolle"
				data-style="Dark"
				data-icon="../images/Blitzer3.png"		
					data-feature_style='{
					"popup_properties_click":"create_date",
					"popup_properties_move":"vmax street",
					"display_styles":{
						"vmax.10":{"label":"10","fontSize":"10px"},
						"vmax.20":{"label":"20","fontSize":"10px"},
						"vmax.30":{"label":"30","fontSize":"10px"},
						"vmax.40":{"label":"40","fontSize":"10px"},
						"vmax.50":{"label":"50","fontSize":"10px"},
						"vmax.60":{"label":"60","fontSize":"10px"},
						"vmax.70":{"label":"70","fontSize":"10px"},
						"vmax.80":{"label":"80","fontSize":"10px"},
						"vmax.90":{"label":"90","fontSize":"10px"},
						"vmax.100":{"label":"100","fontSize":"10px"},
						"vmax.110":{"label":"110","fontSize":"10px"},
						"vmax.120":{"label":"120","fontSize":"10px"},
						"vmax.130":{"label":"130","fontSize":"10px"}
					}
				}'>
				
			</div>

		</li>
	  </ul>
	</div>
  </div>
</body>
</html>

Auch das funktioniert weitgehend. Aber:

Die Karte wird außerhalb der vorgesehenen Kachel angezeigt. Mit dem Finger kann man die gesamte (!) Oberfläche vertikal verschieben. Mit zwei Fingern kann man innerhalb der Kachel die Position und den Zoom verstellen. Vgl. Screenshot 2.

Gewünscht ist, dass die Kachel festgenagelt ist, so wie bei der Darstellung ohne Blitzersymbole. Das unerwünschte Verhalten scheint mit der Darstellung der überlagerten Symbole zusammenzuhängen. Ich hoffe, dass mit diesen Angaben eine Eingrenzung der Ursache möglich ist.

Herzliche Grüße

eki · 20 August 2021, 12:14:05

Ich bin mir nicht sicher ob ich Dein Problem richtig verstanden habe. Für mich sieht es nach Deinen Beispielbildern so aus, als ob mit der zweiten Kartendefinition (da gleiche Mapgroup wird das ja alles in ein Kartenfenster gezeichnet), die Positionierung der Karte an eine andere Stelle wandert (nicht mehr in der Kachel). Das liegt wahrscheinlich aber nicht am Widget sondern an Deinem HTML, da muss irgenwo etwas anders sein. Versuch mal beim zweiten DIV den style wegzulassen oder setzte das auf 0% für width und height.

Ulm32b · 20 August 2021, 23:41:48

Zitat von: eki am 20 August 2021, 12:14:05
Ich bin mir nicht sicher ob ich Dein Problem richtig verstanden habe. Für mich sieht es nach Deinen Beispielbildern so aus, als ob mit der zweiten Kartendefinition (da gleiche Mapgroup wird das ja alles in ein Kartenfenster gezeichnet), die Positionierung der Karte an eine andere Stelle wandert (nicht mehr in der Kachel). Das liegt wahrscheinlich aber nicht am Widget sondern an Deinem HTML, da muss irgenwo etwas anders sein. Versuch mal beim zweiten DIV den style wegzulassen oder setzte das auf 0% für width und height.

In der Tat. Das war es. Vielen, vielen Dank.

Man kann im zweiten div sogar noch mehr weglassen:
Neben der Problemursache style auch
data-map_type
data-center
data-zoom
data-showdetails
data-style

eki · 21 August 2021, 10:18:47

Ja, alles was die Karte grundsätzlich betrifft, wird beim ersten gefundenen DIV mit data-type="maps" gesetzt. Kommt ein zweites DIV mit dem gleichen data-mapgroup Wert, dann werden Objekte, die dort definiert werden, in die gleiche Karte und damit in das erste DIV eingezeichnet. Das zweite DIV ist damit eigentlich unwichtig und dient nur zum Übergeben der Definition.