Items:
/* mosquitto JC*/
String JCRawData "RawData %s" (persist) { mqtt="<[mosquitto:owntracks/jcid/jay-cell:state:default]" }
Number JCPosition "Position: [%s]" (persist)
Number JCLatitude "Lattitude: [%s]" (persist)
Number JCLongitude "Longitude: [%s]" (persist)
Location JCLocation "Location: [%s]" (persist)
Number JCAccuracy "Accuracy: [%s %%]" (persist)
Number JCBattery "Battery: [%s %%]" (persist)
Rules:
rule "MQTT Owntracks JC"
when
Item JCRawData changed
then
logInfo("MQTT", "MQTT Owntracks JCRawData data received")
val String json = (JCRawData.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)
logInfo("MQTT", "MQTT Updating values")
JCLatitude.postUpdate(lat)
JCLongitude.postUpdate(lon)
JCLocation.postUpdate(new PointType(lat + "," + lon))
JCAccuracy.postUpdate(new DecimalType(acc))
JCBattery.postUpdate(new PercentType(batt))
}
end
Sitemap:
Frame label="" {
Text label="Location" {
Webview url="http://....../static/map.html" height=9
Frame label="Jay's Data"
Text item=JCLatitude
Text item=JCLongitude
Text item=JCAccuracy
Text item=JCBattery
Frame label="Zach's Data"
Text item=ZCLatitude
Text item=ZCLongitude
Text item=ZCAccuracy
Text item=ZCBattery
}}
custom map.html: (dont forget to get and apply your API key!)
and copy the pins to /static/mapfiles. You can download them buy going into the mapfiles folder and then issuing the following:
wget http://maps.google.com/mapfiles/ms/icons/red-dot.png
wget http://maps.google.com/mapfiles/ms/icons/green-dot.png
wget http://maps.google.com/mapfiles/ms/icons/blue-dot.png
Then replace my “http://…” with your actual openhab fqdn host and port in 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?key=MY-API-KEY&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("42.7718", "-78.8346");
var latlngJay = new google.maps.LatLng("42.7718", "-78.8346"); // initialize to home ...
var latlngZach = new google.maps.LatLng("42.7718", "-78.8346"); // initialize to home ...
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://........../static/mapfiles/icon10.png',
title : "Home"
})
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 : "http://......../rest/items/JCLocation/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngJay = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngJay,
map : map,
icon : 'http://............../static/mapfiles/green-dot.png',
title : "Jay's Location"
}) // end of [Marker]
$.ajax({
url : "http://............/rest/items/JCAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngJay,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngJay);
map.fitBounds(bounds);
} // end of [function]
}) // end of [$.ajax]
} // end of [function]
}) // end of [$.ajax]
// ******************************************************************************
$.ajax({
url : "http://.............../rest/items/ZCLocation/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngZach = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngZach,
map : map,
icon : 'http://............/static/mapfiles/blue-dot.png',
title : "Zach's Location"
}) // end of [Marker]
$.ajax({
url : "http://.............../rest/items/ZCAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngZach,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngZach);
map.fitBounds(bounds);
} // end of [function]
}) // end of [$.ajax]
} // end of [function]
}) // end of [$.ajax]
// ******************************************************************************
}))
</script>
</head>
<body>
<div id="map_canvas" class="Flexible-container" />
</body>
</html>
You can fine tune the radius in the app and you want to be in “significant change mode” which is the single triangle that looks like a play button. The cool thing about owntracks is it maps and tracks all your family members or devices because they are all subscribed to the same mqtt broker… pretty neat…
