Skip to content
Permalink
Browse files
Added new files 
Added all the required files for 4009cem for the location tracker
  • Loading branch information
@omaram
omaram committed Feb 10, 2020
1 parent e93b98e commit d66ccb417ce626f4f3b909a4926f0aca2a205af4
Show file tree
Hide file tree
Showing 5 changed files with 426 additions and 0 deletions.
188 index.html
View file
@@ -0,0 +1,188 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Location Tracker</title>
<script>
var arrayColumn = (arr, n) => arr.map(x => x[n])
var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
'#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
'#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
'#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
'#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
'#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
'#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
'#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
</script>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
<link rel="stylesheet" href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fopenlayers%2Fopenlayers.github.io%40master%2Fen%2Fv6.1.1%2Fcss%2Fol.css&amp;data=02%7C01%7Crair19%40uni.coventry.ac.uk%7Cab61f4c4919e4ee5676408d7a64c90da%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637160720081495136&amp;sdata=ayQGq6iUJRn4qiEq1qxedI%2FLY7kfKrA1ty4%2FcHp4scg%3D&amp;reserved=0" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fopenlayers%2Fopenlayers.github.io%40master%2Fen%2Fv6.1.1%2Fbuild%2Fol.js&amp;data=02%7C01%7Crair19%40uni.coventry.ac.uk%7Cab61f4c4919e4ee5676408d7a64c90da%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637160720081495136&amp;sdata=yFIDZuJ6cQum8EzRv64SikPEGhVcrQxZSbvaZPXogY8%3D&amp;reserved=0"></script>
<script>
function initialize_map(longArray,latArray,dateArray,tidArray) {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
];
view: new ol.View({
center: ol.proj.fromLonLat([-1.5197, 52.4068]),
zoom: 12
})
});

var tidColor = colorDictionary(tidArray);
add_map_point(map,tidColor,longArray,latArray,dateArray,tidArray);
}
function add_map_point(map,tidColor,longArray,latArray,dateArray,tidArray) {
for (i=0; i<latArray.length; i++)
{
if ((tidArray[i] == tidArray[i+1] || tidArray[i]==tidArray[i-1]) && (dateArray[i] == dateArray[i+1] || dateArray[i]==dateArray[i-1]))
{
var marker1 = new ol.layer.Vector({
title: tidArray[i],
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([longArray[i],latArray[i]]))
})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
color: tidColor[tidArray[i]],
crossOrigin: 'anonymous',
//anchor: [0.5, 0.5],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
scale : 0.03,
//src: "https://image.flaticon.com/icons/svg/446/446075.svg",
src: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg",
//src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg" //get an image for our red dot
//src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/200px-Map_marker_font_awesome.svg.png',
//src:"https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fimage.flaticon.com%2Ficons%2Fsvg%2F1397%2F1397898.svg&amp;data=02%7C01%7Crair19%40uni.coventry.ac.uk%7Cab61f4c4919e4ee5676408d7a64c90da%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637160720081495136&amp;sdata=ILOTpuqrhe94M%2BMNexenwuxycoE73Ygy%2FkroSxzj7JM%3D&amp;reserved=0",
//src: "https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fe%2Fec%2FRedDot.svg&amp;data=02%7C01%7Crair19%40uni.coventry.ac.uk%7Cab61f4c4919e4ee5676408d7a64c90da%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637160720081495136&amp;sdata=D0cQ9nzdQBcHctQZxzScWs%2FtlPHq3Byvcgmo%2BkUgEEA%3D&amp;reserved=0",
}))
})
});
map.addLayer(marker1);
} else
{
continue;
}
}
map.on("singleclick", function (evt) {
this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
alert("tid: " + layer.get("title"));
evt.preventDefault();
});
});
add_lines(map,tidColor,longArray,latArray,dateArray,tidArray)
}

function add_lines(map,tidColor,longArray,latArray,dateArray,tidArray){
for (i=0; i<latArray.length-1; i++)
{
var loc1 = ol.proj.fromLonLat([longArray[i],latArray[i]]);
var loc2 = ol.proj.fromLonLat([longArray[i+1],latArray[i+1]]);
var lineStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: tidColor[tidArray[i]],
width: 2
})
})
];
if (tidArray[i]==tidArray[i+1] && dateArray[i]==dateArray[i+1])
{
var myLine = new ol.layer.Vector({
title: tidArray[i],
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString([loc1, loc2]),
name: 'Line',
})]
})
});
} else {
continue;
}
map.on("singleclick", function (evt) {
this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
alert("tid: " + layer.get("title"));
evt.preventDefault();
});
});
myLine.setStyle(lineStyle);
map.addLayer(myLine);
}
}

function colorDictionary(tidArray)
{
var tidColor = {};
var uniqueTid = [];
for (i=0; i<tidArray.length; i++)
{
if (tidArray[i] !== tidArray[i-1] && tidArray[i]==tidArray[i+1])
{
uniqueTid.push(tidArray[i]);
}
}
for (i=0; i<uniqueTid.length; i++)
{
tidColor[uniqueTid[i]] = colorArray[i];
}
return tidColor;
}
</script>
</head>
<body onload="initialize_map(arrayColumn({{locations}}, 0),arrayColumn({{locations}}, 1),arrayColumn({{locations}}, 2),arrayColumn({{locations}}, 4));">
<h2>My Map</h2>
<div id="map" class="map"></div>
<table width="100%" border="0">
<tbody>
<tr style="font-size:40px;">
<td style="font-family:Arial; text-align:center">Location Tracker</td>
</tr>
</tbody>
</table>
<table width="100%" border="0">
<tbody>
<tr style="font-size:16px; font-family:Arial; text-align:center">
<th>TID</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Date</th>
<th>Time</th>
</tr>
{% for item in locations %}
<tr>
<td style="font-size:18px;font-family:Arial; text-align:center"; width="5%">{{ item[4] }}</td>
<td style="font-size:18px;font-family:Arial; text-align:center"; width="25%">{{ item[0] }}</td>
<td style="font-size:18px;font-family:Arial; text-align:center"; width="25%">{{ item[1] }}</td>
<td style="font-size:18px;font-family:Arial; text-align:center"; width="15%">{{ item[2] }}</td>
<td style="font-size:18px;font-family:Arial; text-align:center"; width="20%">{{ item[3] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
84 locations-jinja.py
View file
@@ -0,0 +1,84 @@
import cherrypy
import jinja2
import sqlite3 as sql
import math, os
import time

JINJA_ENVIRONMENT = jinja2.Environment(loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__),'templates')),extensions=['jinja2.ext.autoescape'])

DB = 'locations.db'

class LocationsWebsite(object):
@cherrypy.expose
@cherrypy.tools.gzip()
def index(self):
template = JINJA_ENVIRONMENT.get_template('index.html')
template_values = {'locations': self.get_locations()} #template_values is a dict. key is 'locations', values is a list of lists of two items (long, lat)
return template.render(template_values) #make and serve the webpage

def get_locations(self):
locations = []
latitudes = self.get_latitudes()
longitudes = self.get_longitudes()
dates = self.get_dates()
#times = [time[:-7] for time in self.get_times()]
tids = self.get_tids()
times = self.get_report_times()
for i in range(len(latitudes)):
locations.append([longitudes[i],latitudes[i],dates[i],times[i],tids[i]]) #make list of lists to enable jinja render as columns
return locations

def get_latitudes(self):
latitudes = []
with sql.connect(DB) as cur:
results = cur.execute('''SELECT latitude FROM Location ORDER BY tid DESC;''')
for latitude, in results:
latitudes.append(str(latitude))
return latitudes

def get_longitudes(self):
longitudes = []
with sql.connect(DB) as cur:
results = cur.execute('''SELECT longitude FROM Location ORDER BY tid DESC;''')
for longitude, in results:
longitudes.append(str(longitude))
return longitudes

def get_dates(self):
dates = []
with sql.connect(DB) as cur:
results = cur.execute('''SELECT date FROM Location ORDER BY tid DESC;''')
for date, in results:
readabledate = time.strftime('%Y-%m-%d', time.localtime(date))
dates.append(str(readabledate))
return dates

def get_times(self):
times = []
with sql.connect(DB) as cur:
results = cur.execute('''SELECT time FROM Location ORDER BY tid DESC;''')
for time, in results:
times.append(str(time))
return times

def get_tids(self):
tids = []
with sql.connect(DB) as cur:
results = cur.execute('''SELECT tid FROM Location ORDER BY tid DESC;''')
for tid, in results:
tids.append(str(tid))
return tids

def get_report_times(self):
times = []
with sql.connect(DB) as cur:
results = cur.execute('''SELECT time FROM Location ORDER BY tid DESC;''')
for Time, in results:
readabletime = time.strftime('%H:%M:%S', time.localtime(Time))
times.append(str(readabletime))
return times

if __name__ == '__main__':
cherrypy.config.update({'server.socket_host': '0.0.0.0'})
cherrypy.config.update({'server.socket_port': 3000})
cherrypy.quickstart(LocationsWebsite(), '/', {'/': {'tools.gzip.on': True}})
76 map.html
View file
@@ -0,0 +1,76 @@
<!doctype html>

<html lang="en">
<head>
<link rel="stylesheet" href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fopenlayers%2Fopenlayers.github.io%40master%2Fen%2Fv6.1.1%2Fcss%2Fol.css&amp;data=02%7C01%7Comaram%40uni.coventry.ac.uk%7C5c447ecb1c5e4eadcd4508d7aafc062c%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637165871715852602&amp;sdata=VaQE95efn4WZmdx0KP5vdbNCeSm0ieVSPpux0W0e1bU%3D&amp;reserved=0" type="text/css">
<style>
.map {
height: 480px;
width: 100%;
}
</style>
<script src="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fopenlayers%2Fopenlayers.github.io%40master%2Fen%2Fv6.1.1%2Fbuild%2Fol.js&amp;data=02%7C01%7Comaram%40uni.coventry.ac.uk%7C5c447ecb1c5e4eadcd4508d7aafc062c%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637165871715852602&amp;sdata=4GQSFqe5bHe7tXx1PTFLDxEQdGZ%2FKotGCWVnA9dDx2I%3D&amp;reserved=0"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">

var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-1.499918, 52.405320]),
zoom: 13
})
});
var marker1 = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-1.499918, 52.405320]))

})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
//anchor: [0.5, 0.5],
//anchorXUnits: "fraction",
//anchorYUnits: "fraction",
scale: 0.04,
src:"https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fimage.flaticon.com%2Ficons%2Fsvg%2F1397%2F1397898.svg&amp;data=02%7C01%7Comaram%40uni.coventry.ac.uk%7C5c447ecb1c5e4eadcd4508d7aafc062c%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637165871715862594&amp;sdata=2MZQkK3qOrN9pcaurvZ%2F7Cqf8c2%2FOdMb0OZrjzrGv5U%3D&amp;reserved=0",
//src: "https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fe%2Fec%2FRedDot.svg&amp;data=02%7C01%7Comaram%40uni.coventry.ac.uk%7C5c447ecb1c5e4eadcd4508d7aafc062c%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637165871715862594&amp;sdata=Qx5LJWCdmQ8F8xGQm769PhCwrSvPHiP5ZJaIJUAWntU%3D&amp;reserved=0"
})
})
});


var layer2 = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-1.4743109, 52.4069807])),
})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
//anchor: [0.5, 0.5],
//anchorXUnits: "fraction",
//anchorYUnits: "fraction",
scale: 0.04,
src:"https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fimage.flaticon.com%2Ficons%2Fsvg%2F1397%2F1397898.svg&amp;data=02%7C01%7Comaram%40uni.coventry.ac.uk%7C5c447ecb1c5e4eadcd4508d7aafc062c%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637165871715862594&amp;sdata=2MZQkK3qOrN9pcaurvZ%2F7Cqf8c2%2FOdMb0OZrjzrGv5U%3D&amp;reserved=0",
//src: "https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fe%2Fec%2FRedDot.svg&amp;data=02%7C01%7Comaram%40uni.coventry.ac.uk%7C5c447ecb1c5e4eadcd4508d7aafc062c%7C4b18ab9a37654abeac7c0e0d398afd4f%7C0%7C0%7C637165871715862594&amp;sdata=Qx5LJWCdmQ8F8xGQm769PhCwrSvPHiP5ZJaIJUAWntU%3D&amp;reserved=0"
})
})
});
map.addLayer(layer1);
map.addLayer(layer2);
</script>
</body>
</html>
31 mqtt.coventry.ac.uk.crt
View file
@@ -0,0 +1,31 @@
-----BEGIN CERTIFICATE-----
MIIFYDCCA0igAwIBAgIURFc0JFuBiZs18s64KztbpybwdSgwDQYJKoZIhvcNAQEL
BQAwSDELMAkGA1UEBhMCQk0xGTAXBgNVBAoTEFF1b1ZhZGlzIExpbWl0ZWQxHjAc
BgNVBAMTFVF1b1ZhZGlzIFJvb3QgQ0EgMiBHMzAeFw0xMjAxMTIxODU5MzJaFw00
MjAxMTIxODU5MzJaMEgxCzAJBgNVBAYTAkJNMRkwFwYDVQQKExBRdW9WYWRpcyBM
aW1pdGVkMR4wHAYDVQQDExVRdW9WYWRpcyBSb290IENBIDIgRzMwggIiMA0GCSqG
SIb3DQEBAQUAA4ICDwAwggIKAoICAQChriWyARjcV4g/Ruv5r+LrI3HimtFhZiFf
qq8nUeVuGxbULX1QsFN3vXg6YOJkApt8hpvWGo6t/x8Vf9WVHhLL5hSEBMHfNrMW
n4rjyduYNM7YMxcoRvynyfDStNVNCXJJ+fKH46nafaF9a7I6JaltUkSs+L5u+9ym
c5GQYaYDFCDy54ejiK2toIz/pgslUiXnFgHVy7g1gQyjO/Dh4fxaXc6AcW34Sas+
O7q414AB+6XrW7PFXmAqMaCvN+ggOp+oMiwMzAkd056OXbxMmO7FGmh77FOm6RQ1
o9/NgJ8MSPsc9PG/Srj61YxxSscfrf5BmrODXfKEVu+lV0POKa2Mq1W/xPtbAd0j
IaFYAI7D0GoT7RPjEiuA3GfmlbLNHiJuKvhB1PLKFAeNilUSxmn1uIZoL1NesNKq
IcGY5jDjZ1XHm26sGahVpkUG0CM62+tlXSoREfA7T8pt9DTEceT/AFr2XK4jYIVz
8eQQsSWu1ZK7E8EM4DnatDlXtas1qnIhO4M15zHfeiFuuDIIfR0ykRVKYnLP43eh
vNURG3YBZwjgQQvD6xVu+KQZ2aKrr+InUlYrAoosFCT5v0ICvybIxo/gbjh9Uy3l
7ZizlWNof/k19N+IxWA1ksB8aRxhlRbQ694Lrz4EEEVlWFA4r0jyWbYW8jwNkALG
cC4BrTwV1wIDAQABo0IwQDAPBgNVHRMBAf8EBTADAQH/MA4GA1UdDwEB/wQEAwIB
BjAdBgNVHQ4EFgQU7edvdlq/YOxJW8ald7tyFnGbxD0wDQYJKoZIhvcNAQELBQAD
ggIBAJHfgD9DCX5xwvfrs4iP4VGyvD11+ShdyLyZm3tdquXK4Qr36LLTn91nMX66
AarHakE7kNQIXLJgapDwyM4DYvmL7ftuKtwGTTwpD4kWilhMSA/ohGHqPHKmd+RC
roijQ1h5fq7KpVMNqT1wvSAZYaRsOPxDMuHBR//47PERIjKWnML2W2mWeyAMQ0Ga
W/ZZGYjeVYg3UQt4XAoeo0L9x52ID8DyeAIkVJOviYeIyUqAHerQbj5hLja7NQ4n
lv1mNDthcnPxFlxHBlRJAHpYErAK74X9sbgzdWqTHBLmYF5vHX/JHyPLhGGfHoJE
+V+tYlUkmlKY7VHnoX6XOuYvHxHaU4AshZ6rNRDbIl9qxV6XU/IyAgkwo1jwDQHV
csaxfGl7w/U2Rcxhbl5MlMVerugOXou/983g7aEOGzPuVBj+D77vfoRrQ+NwmNtd
dbINWQeFFSM51vHfqSYP1kjHs6Yi9TM3WpVHn3u6GBVv/9YUZINJ0gpnIdsPNWNg
KCLjsZWDzYWm3S8P52dSbrsvhXz1SnPnxT7AvSESBT/8twNJAlvIJebiVDj1eYeM
HVOyToV7BjjHLPj4sHKNJeV3UvQDHEimUF+IIDBu8oJDqz2XhOdT+yHBTw8imoa4
WSr2Rz0ZiC3oheGe7IUIarFsNMkd7EgrO3jtZsSOeWmD3n+M
-----END CERTIFICATE-----

0 comments on commit d66ccb4

Please sign in to comment.