Map Widget reloaded - Neue Version des Map Widgets

[eki]

Na dann schick mir erst mal Deine Konfiguration (html der Widget Definition, list des Blitzer Devices, Installierte Versionen von FTUI und FHEM, ...)

[somansch]

Hier mal eine widget_map Version, die die Variante "direkte Implementierung im Widget" realisiert hat. Was auf der Blitzer Modul Seite Voraussetzung ist, ist das Attribut createAllReadings auf 1 zu setzen, damit die Detailreadings erzeugt werden.

Um das zu aktivieren, muss bei der Definition auf FTUI Seite data-blitzer="<device>" definiert werden. <device> muss dabei der Name des Blitzer Devices sein. Wenn kein Attribut data-feature_style gesetzt ist, dann werden "Warndreiecke" angezeigt, bei mouseover poppt ein Fenster mit der Maximalgeschwindigkeit hoch, bei Klick der Name (00display_name). Falls Ihr eine andere Darstellung wollt, muss das über data-feature_style gesetzt werden, dort kann dann alles konfiguriert werden.
Beispiel (Kreis als Darstellung, zusätzlich date und street parameter bei den Popups bzw. Klickinfos):

Code Auswählen Erweitern


data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"strokeWeight":"2"
}
}
}'


Hallo @eki,

habe gerade mal das angepasste Widget mit Google-Maps getestet. Leider kommt weder ein PoP-Up noch eine Beschreibung auf den Blitzern?! Habe ich was falsch gemacht? Hier die FTUI Def:

Code Auswählen Erweitern

<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-center="xx.xxxxxx,xx.xxxxxx"
data-zoom="10"
data-blitzer="myBlitzer"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"strokeWeight":"2"
}
}
}'
></div>

Wenn ich data-feature_style weglasse, komme ich auf dieselbe Darstellung (ohne PopUps).

Viele Grüße
Andreas

[eki]

habe gerade mal das angepasste Widget mit Google-Maps getestet. Leider kommt weder ein PoP-Up noch eine Beschreibung auf den Blitzern?! Habe ich was falsch gemacht? Hier die FTUI Def:

Nein, bei mir entsteht mit der gleichen Definition (nur anderes Zentrum) die angehängte Karte. Hast Du irgendwelche Fehler auf der Browserkonsole?

[somansch]

Jetzt kommt leider gar kein Symbol mehr 

In FHEM werden zur Zeit 7 Blitzer angezeigt, in FTUI "Error:0"

Anbei das Konsolen-Log und die einfache HTML zum Testen.

PS: Ich nutze Google Chrome ohne nenneswerte Add-Ins.

[somansch]

Jetzt kommt leider gar kein Symbol mehr 

In FHEM werden zur Zeit 7 Blitzer angezeigt, in FTUI "Error:0"

Anbei das Konsolen-Log und die einfache HTML zum Testen.

PS: Ich nutze Google Chrome ohne nenneswerte Add-Ins.

Eine Stunde später gibt es 8 Blitzer (eventuell geänderte Positionsdaten?!) und nun wird die Seite ohne Fehler geladen. Die Konfig ist 100% identisch. Leider aber immer noch ohne PopUps...

[somansch]

@eki,

seit zwei Tagen läuft jetzt das Laden der Map sauber durch, jedoch werden nach wie vor keine Infos als Popup angezeigt  . Was kann ich noch Testen?

PS: Mir ist noch ein weiteres Problem aufgefallen. Wenn nachts keine Blitzer mehr aktiv sind, also das Reading "count=0", wird trotzdem der letzte Blitzer noch angezeigt, da die Readings "00..." noch existieren.

[eki]

Du brauchst nichts mehr zu machen,  ich kann das Problem mit Deinem Minimalbeispiel nachstellen und bin an der Lösung dran. Hab nur gerade ein paar andere Dinge zu tun, deshalb etwas Geduld.

[eki]

Hier jetzt mal eine neue Version, die hoffentlich die Probleme beseitigt. Um die Größe der Symbole detailliert festzulegen, muss noch fontSize verwendet werden. Es ist jetzt aber auch hoffentlich alles schon per Default so, dass es ganz OK aussehen sollte.

Code Auswählen Erweitern


data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"fontSize":"20px",
"strokeWeight":"20"
}
}
}'


Edit: noch mal eine leicht korrigierte Version.

[Sailor]

Hi eki

Hier jetzt mal eine neue Version, die hoffentlich die Probleme beseitigt.

Stellst du das noch ins Repository für Update bereit?

Gruß
    Sailor

[eki]

Wenn ich Feedback bekomme dass es soweit funktioniert, auf jeden Fall.

[eki]

Hier noch mal ein Beispiel, wie die Blitzerdarstellung auch aussehen kann (direkte Darstellung der Maximalgeschwindigkeit als Label auf der Karte). Das Ganze ist mit folgender Definition gemacht und braucht noch das angehängte png file im entsprechenden Directory (normalerweise www/images).

Code Auswählen Erweitern


<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="OSMs"
data-mapgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>


[eki]

Die neue Version mit Blitzerdarstellung ist jetzt auch im ersten Beitrag dieses Threads als neue Version eingefügt. Wiki ist auch entsprechend angepasst.

[somansch]

@eki,

ich war leider zwei Wochen außer Gefecht, habe mir aber jetzt am Wochenende die neue Version geladen und getestet. Es funktioniert bestens mit Google-Maps. Perfekte Arbeit - vielen Dank!

Kannst du dir noch das Problem mit der Anzeige von historischen Blitzern anschauen, wenn das Reading "count=0"? Eventuell eine Abfrage einbauen, dass dann nichts angezeigt wird.

PS: Mir ist noch ein weiteres Problem aufgefallen. Wenn nachts keine Blitzer mehr aktiv sind, also das Reading "count=0", wird trotzdem der letzte Blitzer noch angezeigt, da die Readings "00..." noch existieren.

[eki]

In der angehängten Version prüft das Widget neben den Readings auch, falls vorhanden (ist nämlich nur dann wenn man createCountReading auf 1 setzt), auf das "count" reading und lässt nicht mehr Readings als dort angegeben zu (anfangend bei 00...). Wenn also count auf 0 steht, sollte auch nichts mehr angezeigt werden.

In der Version is auch ein neues Feature enthalten. Damit kann man, falls man mehrere Chart Widgets mit unterschiedlichen Mapgroups (data-mapgroup) definiert, diese koppeln. Das bedeutet, dass die Karten beim Ausschnitt und beim Zoom immer synchron laufen, wenn man also in einer Karte zoomt, zoomt die andere auch mit und das Gleiche gilt für das Verschieben. Um dieses Verhalten zu bekommen, muss man den Parameter data-srcollgroup für alle zu koppelnden Karten auf den gleichen Wer setzen. Hier mal eine Beispieldefinition.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
<title>FHEM-Tablet-UI</title>
<script src="js/fhem-tablet-ui.js" defer></script>
<meta name="gridster_cols" content="20"/>
<meta name="gridster_rows" content="20"/>
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/fhem-tablet-ui-user.css" />
<meta name="GoogleMapsApiKey" content="xxx">
<meta name="TomTomApiKey" content="xxx">
</head>

<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="10" data-sizey="20">
<header>Test Map</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div id="TravelTimesMap"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="Google"
data-cfg-other="0"
data-showdetails="false"
data-device="trfAngelaArbeitsweg"
data-traffic="true"
data-mapgroup="1"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#33dd00,20,60">
</div>
<div id="TravelTimesMapHidden"
style="height:100%; width:100%; position: absolute"
data-type="maps"
data-map_type="Google"
data-cfg-other="1"
data-language="en"
data-showdetails="false"
data-device="trfKurtArbeitsweg"
data-traffic="true"
data-mapgroup="1"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#dd3300,20,60">
</div>
<div
style="height:100%; width:100%; position: absolute"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-scrollgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest:state"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax":{"icon":"no-icon","label":"fa-home","fontSize":"20px"},
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>
</div>
</div>
</div>
</li>
<li data-row="1" data-col="11" data-sizex="10" data-sizey="20">
<header>Test Map</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div id="TravelTimesMap"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="Google"
data-cfg-other="0"
data-showdetails="false"
data-device="global"
data-traffic="true"
data-mapgroup="2"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#33dd00,20,60">
</div>
</div>
</div>
</div>
</li>

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


[Sailor]

Hallo eki

Hier mal eine Beispieldefinition.

Magst du mir die Definition von

trfAngelaArbeitsweg
trfKurtArbeitsweg
und
blitztest

dazustellen?

Danke!

Gruß
    Sailor