Map Widget reloaded - Neue Version des Map Widgets

speedAmaster · 30 Oktober 2021, 15:29:58

Hallo,
ich habe in meinem FTUI meinen Google API Key angegeben

<html>
<meta name="GoogleMapsApiKey" content="xxxxxxx">
<title>ReisHome</title>

und versucht über

Code Auswählen

<div data-type="gmaps" data-device="xxxx" data-latitude="48" data-map_type="Google" data-mapgroup="1" 	data-zoom="15"	data-stroke="#dd0033,7,70" data-longitude="11" style="height:100%; width:100%;"></div></div>

Eine Position in einer Google-Map darzustellen. Leider bekomme ich nur die Fehlermeldung: widget_gmaps.js:1 SyntaxError: unexpected token: identifier

Woran kann dies liegen? (habe es auch mit maps anstelle von gmaps versucht)

eki · 02 November 2021, 07:57:16

Also gmaps solltest Du auf keinen Fall mehr verwenden, das ist uralt und wurde durch maps ersetzt. Bitte ausschließlich maps verwenden.

Welche Version verwendest Du (die letzte aus dem Thread hier)?

Kommt bei Verwendung von maps auch die gleiche Fehlermeldung?

Poste mal dein gesamtes HTML file (wenn Du willst auch per PM und natürlich die Keys durch xxx ersetzt) dann kann ich versuchen das nachzuvollziehen.

Ulm32b · 31 Dezember 2021, 11:00:59

Hallo Eki,

seit unserer Korrespondenz vom August funktioniert die Kartendarstellung mit den Blitzern einwandfrei (und liefert mir den Hinweis, dass die Stadt heute, am 31.12., an einer umsatzträchtigen Stelle noch einmal ihr Kassenhäuschen aufgestellt hat).

Der Code lautet:

Code Auswählen


			<div id="Home_XXX"
				style="height:100%; width:100%;"
				data-type="maps"
				data-map_type="Google"				
				data-mapgroup="1"
				data-stroke="#0000FF,20,80"	
				data-traffic="true"				
				data-center="xxx,yyy"
				data-zoom="14"
				data-showdetails="false"
				data-style="Dark"	
				data-device="global"
				data-latitude="latitude"
				data-longitude="longitude"		
				data-icon="../images/Home2.png"
			></div>

			<div id="Radar_XXX"				
				data-type="maps"
				data-mapgroup="1"
				data-stroke="#0000FF,20,80"					
				data-blitzer="Radarkontrolle"
				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>

<div data-type="label" class="bigger bold" data-device="Verkehrslage" data-get="duration_in_traffic" data-pre-text="Fahrzeit nach ZZZ: " data-substitution='["mins","Min."]' style="color: #788A88; position: absolute; top: 10px; right: 100px;"></div>

Nun habe ich das Ganze auch mit OSM ausprobiert (vorher API-Key geholt, hat funktioniert). Im obigen Code wurde nur eine einzige Sache geändert:
data-map_type="OSM" statt data-map_type="Google"

Danach werden die Blitzer nicht mehr in der Karte angezeigt.
Testweise habe ich den Blitzer-Code in das erste <div> eingefügt, also auf data-mapgroup verzichtet. Danach wurden die Blitzer angezeigt, allerdings mit dem falschen data-icon, welches ich im ersten Teil für die Darstellung der Heimatadresse definiert habe. Diese Problematik hatte mich seinerzeit bewogen, mapgroup zu nutzen.

Meine Schlussfolgerung lautet, dass data-mapgroup mit OSM nicht einwandfrei arbeitet.

Das verwendete Widget hat 146.731 Byte und ist m.E. die aktuelle Version.

Eine zweite, hiervon unabhängige Beobachtung: Am Ende des Codes wird ein label erzeugt, welche eine bestimmte Fahrzeit ausgibt. Dies wird mittels "position: absolute ... " über die Karte gelegt. Das funktioniert mit Google einwandfrei. Bei OSM wird dieser Text in den Hintergrund gesetzt und damit verdeckt, unabhängig von der Reihenfolge der divs im Code. Bisher habe ich es nicht geschafft, den Text in den Vordergrund zu bringen.

Alles in allem sind das Luxusprobleme. Vielleicht ist die Lösung aber nicht weit. In diesem Fall würde ich mich hierüber freuen.

Mit den besten Wünschen für das neue Jahr
Ulm32b

Ulm32b · 04 Januar 2022, 13:22:06

Und noch 'ne Frage zu Blitzer:

Man kann mittels

Code Auswählen

"display_styles":{
		"vmax.10":{"label":"10","fontSize":"10px"},
		...}

die Schriftgröße der angezeigten Geschwindigkeitsbegrenzung einstellen. Wenn ich die ändere, muss auch die Größe des Icons (blitzer2.png) geändert werden. Aber wie? Nach erfolglosen Selbstversuchen frage ich hier bei Kundigen nach.

Viele Grüße
Ulm32b

xs3bt · 30 August 2022, 12:12:30

Erstmal viel lob !! Tolles Widget.

Hat sich mal jemand damit beschäftigt die Google Maps Control buttons +/- Karte/Sattelit/Verkehr auszublenden ?
ich bekomm es nicht hin, finde auch auf der Google cloud control seite nichts dergleichen.

eki · 14 September 2022, 08:13:51

Müsste per

Code Auswählen

data-hide-ui="true" gehen.

ReneR1986 · 18 Januar 2023, 10:44:49

Hallo zusammen,
das Widget läuft prima.
Ich nutze derzeit "noch" FTUI Version 2.6.*...
In der mobilen Variante bekomme ich es allerdings nicht zum laufen.

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_mobil.html

Der Google API Key wurde eingefügt.
Hier einmal der code. Bissher habe ich es nicht geschafft die Karte darzustellen. Es wird nichts angezeigt.
In der "normalen" index.html sieht es bis auf die Section Tags genau gleich aus und da klappt es.

Code Auswählen

<section>
            <div class="big col-1-2 left-align left-space">Karte</div>	  
			  <div
				 style="height:100%; width:100%"
				 data-type="maps" 
				 data-device="MQTT_Touran"
				 data-zoom="15"
				 data-label="fa-car"
				 data-icon="no-icon"
				 data-map_type="Google"
				 class="row right-align right-space">
			  </div>
        </section>

eki · 19 Januar 2023, 14:21:42

Was heißt denn nichts (siehst Du den grauen Hintergrund ohne Inhalt oder wirklich gar nichts).

ReneR1986 · 19 Januar 2023, 15:52:12

Tatsächlich garnichts. Auch keinen Hintergrund. Kann es sein, dass das ganze nur beim Grid Layout funktioniert. Wenn ich das richtig verstanden habe, nutzt die mobile Version kein Grid..

eki · 20 Januar 2023, 08:02:48

Eigentlich kann das mit Grid nichts zu tun haben, ich habe das zum Testen auch schon ohne Grid ausprobiert. Kannst Du mal Dein komplettes HTML File der mobilen Version hier posten (oder per PM schicken, wenn Du es hier nicht einstellen willst). Den Google API Key kannst Du ja rauslöschen.

ReneR1986 · 20 Januar 2023, 08:58:04

Hallo eki,

index_nav_mobil.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.6.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2018 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/index_nav_mobil.html
     */
    -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
	<meta name="GoogleMapsApiKey" content="xxxx">
	
	
    <link rel="stylesheet" href="css/fhem-darkblue-ui.css" />

    <script src="js/fhem-tablet-ui.js" defer></script>
	<script src="js/widget_maps.js" defer></script>
	
    <title>FHEM-Tablet-UI-mobil</title>
</head>
<body>

    <!-- Demo FTUI 2.6 mobil page with slideout navigation -->

    <nav id="menu">
        <div data-type="link" class="default large top-space-2x left-space-3x"
           data-width="150"
           data-icon-left="fa-home"
           data-color="white"
           data-text-align="right"
           data-load="#content1"
           data-url="#content_home.html"
           data-active-color="green"
           data-active-pattern="(.*index_nav_mobil.html|.*#content_home.html)">Home</div>
        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-lightbulb-o"
            data-color="white"
            data-text-align="right"
            data-load="#content2"
            data-url="#content_lights.html"
            data-active-color="green"
            data-active-pattern=".*#content_lights.html">Licht</div>       
        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa fa-video-camera"
            data-color="white"
            data-text-align="right"
            data-load="#content3"
            data-url="#content_kamera.html"
            data-active-color="green"
            data-active-pattern=".*#content_kamera.html">Kamera</div>
        <div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="oa-it_camera"
            data-color="white"
            data-text-align="right"
            data-load="#content4"
            data-url="#content_ueberwachung.html"
            data-active-color="green"
            data-active-pattern=".*#content_ueberwachung.html">Überwach.</div>
        <div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="oa-temp_temperature"
            data-color="white"
            data-text-align="right"
            data-load="#content5"
            data-url="#content_heizung.html"
            data-active-color="green"
            data-active-pattern=".*#content_heizung.html">Heizung</div>
		<div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-oil-can"
            data-color="white"
            data-text-align="right"
            data-load="#content6"
            data-url="#content_oel.html"
            data-active-color="green"
            data-active-pattern=".*#content_oel.html">Öl</div> 
		<div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-car-side"
            data-color="white"
            data-text-align="right"
            data-load="#content7"
            data-url="#content_auto.html"
            data-active-color="green"
            data-active-pattern=".*#content_auto.html">Auto</div> 
		<div data-type="link" class="prefetch large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="mi-local_pharmacy"
            data-color="white"
            data-text-align="right"
            data-load="#content8"
            data-url="#content_health.html"
            data-active-color="green"
            data-active-pattern=".*#content_health.html">Health</div>	
    </nav>

    <main id="panel" class="">
        <header id="header-nav" class="bg-lightgray row">
         <div data-type="slideout" class="col-1-8 bigger center-align notouch"></div>
         <div id="linkname" class="col-3-6 large bold center middle"></div>
         <div data-type="symbol" data-icon="fa-bell" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="col-1-6 right-align large black"></div>
         <div data-type="symbol" data-device="AlleFenster" data-icon="ftui-window" class="col-1-6 large"></div>
        </header>
        <div class="page" id="content1"></div>
        <div class="page" id="content2"></div>
        <div class="page" id="content3"></div>
        <div class="page" id="content4"></div>
        <div class="page" id="content5"></div>
        <div class="page" id="content5"></div>
		<div class="page" id="content6"></div>
		<div class="page" id="content7"></div>
		<div class="page" id="content8"></div>
    </main>

</body>
</html>

content_auto.html

Code Auswählen

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content7">
		<section>
            <div class="large col-1-1 bold">e-UP</div>			
        </section>
		<section>
            <div class="large col-1-2 left-align left-space bold">Aktualisiert</div>
				<div data-type="label" class="large"
				 data-device="MQTT_Touran"
				 data-get='letzteAktualisierung'
				 data-pre-text="am "
				 class="col-1-2 right-align right-space">		
				</div>
        </section>
        <section>
            <div class="large col-1-2 left-align left-space">Status</div>
			<div data-type="label"
			 data-device="MQTT_Touran"
			 data-get='currentSOC_pct'
			 data-post-text=" %"
			 class="col-1-2 right-align right-space">
			</div>
        </section>
        <section>
            <div class="large col-1-2 left-align left-space">Ladezeit</div>		
			<div class="col-2-2 right-align">
				<div data-type="symbol" 
				 data-device="MQTT_Touran"
				 data-get='remainingChargingTimeToComplete_min'
				 data-icons='["fa-clock-o"]'
				 class="inline">
				</div>	
				<div data-type="label" 
				 data-device="MQTT_Touran"
				 data-get='remainingChargingTimeToComplete_min'
				 data-post-text=" Minuten"
				 class="inline">
				</div>
			</div>
        </section>
         <section>
            <div class="large col-1-2 left-align left-space">Reichweite</div>
			<div class="col-2-2 right-align">
				<div data-type="symbol" 
				 data-device="MQTT_Touran"
				 data-get='cruisingRangeElectric_km'
				 data-icons='["fa-road"]'
				 class="inline">
				</div>
				<div data-type="label" 
				 data-device="MQTT_Touran"
				 data-get='cruisingRangeElectric_km'
				 data-post-text=" KM"
				 class="inline">
				</div>
			</div>
        </section>
		<section>
            <div class="large col-1-2 left-align left-space">Klima Status</div>
            <div data-type="label"
				 data-device="MQTT_Touran"
				 data-get='climatisationState'
				 data-pre-text="Klima Status "
				 class="col-1-2 right-align right-space">
			</div>
        </section>
		<section>
            <div class="large col-1-2 left-align left-space">Klima</div>
            <div data-type="select"
			   data-device="MQTT_Touran"
			   data-set="climatisation"
			   data-items='["start","stop"]'
			   data-alias='["Klima an","Klima aus"]'
			   data-get='climatisationState'
			   class="col-1-2 right-align right-space">
			</div>
        </section>
		
		
		<section>
            <div class="big col-1-2 left-align left-space">Karte</div>	  
			  <div
				 style="height:100%; width:100%"
				 data-type="maps" 
				 data-device="MQTT_Touran"
				 data-zoom="15"
				 data-label="fa-car"
				 data-icon="no-icon"
				 data-map_type="Google"
				 class="row right-align right-space">
			  </div>
        </section>
		
		
		<section>
            <div class="large col-1-1 bold">Wallbox</div>			
        </section>
		
		<section>
            <div class="large col-1-2 left-align left-space bold">Aktualisiert</div>
				<div data-type="label" class="large"
				 data-device="httpmod_ecb1"
				 data-get='letzteAktualisierung'
				 data-pre-text="am "
				 class="col-1-2 right-align right-space">		
				</div>
        </section>
		
		<section>
            <div class="large col-1-2 left-align left-space">Ampere</div>
			<div class="col-2-2 right-align">
				<div data-type="symbol" 
				 data-device="httpmod_ecb1"
				 data-get='chargecontrols_01_currentpwmamp'
				 data-icons='["oa-measure_power_meter"]'
				 data-limits='[0,6]'
				 data-colors='["#FF0000","green"]'
				 class="inline">
				</div>	
				<div data-type="label" 
					 data-device="httpmod_ecb1"
					 data-get='chargecontrols_01_currentpwmamp'
					 data-post-text=" A"
					 class="inline">
				</div>
			</div>
        </section>	
		<section>
            <div class="large col-1-2 left-align left-space">Ladung</div>
			<div class="col-2-2 right-align">
				<div data-type="symbol" 
				 data-device="httpmod_ecb1"
				 data-get='LadungAnAus'
				 data-icons='["mi-power"]'
				 data-states='["Wird nicht geladen","Wird geladen"]'
				 data-colors='["#FF0000","green"]'
				 class="inline">
				</div>	
				<div data-type="label" 
				 data-device="httpmod_ecb1"
				 data-get='LadungAnAus'
				 class="inline">
				</div>
			</div>
        </section>	
		<section>
            <div class="large col-1-2 left-align left-space">Gesamtverbr</div>
			<div class="col-2-2 right-align">
			<div data-type="symbol" 
				 data-device="Demo_at_j2r_nonjsnmap_sum"
				 data-get='Summe'
				 data-icons='["mi-show_chart"]'
				 class="inline">
			</div>	
				<div data-type="label" 
				 data-device="Demo_at_j2r_nonjsnmap_sum"
				 data-get='Summe'
				 data-post-text=" KWh"
				 data-fix="1"
				 class="inline">
				</div>
			</div>
        </section>	
		
		
</body>
</html>

In der content_auto.html ist das Maps Widget mit drin.

Gruß

eki · 24 Januar 2023, 11:57:48

Ich habe das jetzt mal bei mir ausprobiert. Das Problem ist dass die Höhe des Kartenfensters mit 100% angegeben ist (woher soll der Browser wissen, worauf sich die 100% beziehen. Wenn Du hier einen absoluten Wert angibst (300px oder so) dann wird die Karte sichtbar.

ReneR1986 · 24 Januar 2023, 14:10:48

Das war es!
Vielen Dank!

SimonHipp · 27 Januar 2024, 15:41:14

hi Leute,

ich bekomme es einfach nicht zum laufen, habe alle API-KEYS (Google & Tomtom) hinterlegt, trotzdem immer die Meldung.
Wo kann das Problem liegen?

Code Auswählen

<div data-type="maps"
data-map_type="OSM"
data-device="my_skoda"
data-latitude="position_latitude"
data-longitude"position_longitude"
data-language="de"
class="">
</div>

eki · 29 Januar 2024, 11:17:05

Poste mal bitte die komplette HTML Datei mit dem Header (die API Keys natürlich vorher löschen).