I did some tests and found out that there is a difference if the toppic starts with a leading slash / or not. The specs not openHAB related I found are saying toppics do not start with a leading /
And a single / seams to be a valid toppic too!
But most definition of topics related to the openHAB binding are beginning with a slash.
mytracks uses topic definition without a leading slash.
The correct items are:
Group location_Chris
Location locationChris (location_Chris)
String mqttPositionChrisRaw "Chris Raw Data [%s]" (location_Chris,MQTT) {mqtt="<[mosquitto:owntracks/chris/iPhone6:state:default]"}
Number mqttChrisLatitude "Chris's Lat [%.3f °]" (location_Chris)
Number mqttChrisLongitude "Chris's Lon [%.3f °]" (location_Chris)
Number mqttChrisAccuracy "Chris's Genauigkeit [%.1f m]" (location_Chris)
Number mqttChrisBattery "Chris's iPhone Akku [%s%%]" (location_Chris,Phone,MQTT,Battery)
The Sitemap (working with local and remote URL in the iOS App) :
Text label="Karte" {
Webview url="http://192.168.2.4:8080/static/map.html" height=5
Text item=mqttPositionChrisRaw
Text item=mqttChrisLatitude
Text item=mqttChrisLongitude
Text item=mqttChrisAccuracy
Text item=mqttChrisBattery
}
The Rule:
import org.openhab.core.library.types.*
import org.openhab.core.persistence.*
import org.openhab.model.script.actions.*
rule "MqttPostionParseChris"
when
Item mqttPositionChrisRaw changed
then
val String json = (mqttPositionChrisRaw.state as StringType).toString
val String type = transform("JSONPATH", "$._type", json)
if (type == "location") {
val String lat = transform("JSONPATH", "$.lat", json)
val String lon = transform("JSONPATH", "$.lon", json)
val String acc = transform("JSONPATH", "$.acc", json)
val String batt = transform("JSONPATH", "$.batt", json)
postUpdate(mqttChrisLatitude,new DecimalType(lat))
postUpdate(mqttChrisLongitude,new DecimalType(lon))
locationChris.postUpdate(new PointType(lat + "," + lon))
mqttChrisAccuracy.postUpdate(new DecimalType(acc))
mqttChrisBattery.postUpdate(new PercentType(batt))
}
logInfo("Location","New Location: Chris " + locationChris + "!")
end
(type conversions are a little bit messy but working) Waypoints can be easyly implemented here to trigger events when entering and leaving Waypoints - comming soon ;).
Don*t forget to reposte your location form the ownTracks app by manual mode and push publish button during testing and debuggingâŠ
Mapview is only working on the WebUI with a nice openStreetMap but I could not managed to get it working in the iOS app,
So I followed the guide found here: https://github.com/openhab/openhab/wiki/GoogleMap and used the webview item: Placed the html file in /webapp/satic/map.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.Flexible-container {
position: relative;
padding-bottom: 0px;
padding-top : 0px;
height : 345px ;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,drawing,geometry"></script>
<script type="text/javascript">
////////////////////////////////////////////////////////////////////////
// Google Maps JavaScript API:
// https://developers.google.com/maps/documentation/javascript/?hl=de
// Marker Icons:
// https://sites.google.com/site/gmapsdevelopment/
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
// JQuery
////////////////////////////////////////////////////////////////////////
var map = null;
//make an empty bounds variable
var bounds = new google.maps.LatLngBounds();
// LatLng's we want to show
var latlngHome = new google.maps.LatLng("XX.YYYY", "XX.YYYYY"); // use your home coordinates
var latlngChris = new google.maps.LatLng("XX.YYYY", "XX.YYYYY"); // initialize to home ...
var latlngUser2 = new google.maps.LatLng("XX.YYYY", "XX.YYYYY"); // initialize to home ...
// ad more users if nessesary
var map_options = { center : latlngHome,
zoom : 10,
mapTypeId : google.maps.MapTypeId.ROADMAP };
$( "#map_canvas" ).ready($(function() {
var map_canvas = document.getElementById('map_canvas');
map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position : latlngHome,
map : map,
icon : 'http://maps.google.com/mapfiles/kml/pal2/icon10.png',
title : "Schöneiche"
})
var circle = new google.maps.Circle({
center : latlngHome,
radius : 1500,
map : map,
strokeColor : '#050505',
strokeOpacity : 0.5,
strokeWeight : 2,
fillColor : '#000000',
fillOpacity : 0,
}); // end of [Circle]
bounds.extend(latlngHome);
}))
$( document ).ready($(function() {
// ******************************************************************************
$.ajax({
url : "../rest/items/locationChris/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngChris = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngChris,
map : map,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title : "Chris"
}) // end of [Marker]
$.ajax({
url : "../rest/items/mqttChrisAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngChris,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngChris);
map.fitBounds(bounds);
} // end of [function]
}) // end of [$.ajax]
} // end of [function]
}) // end of [$.ajax]
// ******************************************************************************
// Copy paste for each user
// ******************************************************************************
}))
</script>
</head>
<body>
<div id="map_canvas" class="Flexible-container" />
</body>
</html>
EDIT: Made a tiniy mistake. in the HTML there where 3 dots instead of 2 (get the location via rest-api and/or last updates of the ios app solved some issues too. Now everything work as expected.
