goWay Map – GPS tracking fatto in casa!
goWay Map – GPS tracking fatto in casa!
Ho acquistato questo GPS tracking cinese e ne sono rimasto deluso, ma dopo il trattamento l’ho rivalutato come buon prodotto.
Andiamo a noi:
Avevo buttato in laboratorio questo piccolo tracking acquistato in cina per poco più di 30 euro, che purtroppo non utilizzavo più. L’ultima volta lo avevo riposto nella sua bella scatola originaria senza volerlo più vedere (considerandolo un brutto acquisto). L’aggeggino in questione doveva funzionare, una volta arrivato ed inserita la SIM, con un APP di nome AIBELIE; tramite l’utilizzo dell’IMEI e della password standard lo stesso avrebbe dovuto ritornarmi la posizione del GPS. Fin qui tutto bene.
Il problema è sorto quando, dopo averlo inserito nella mia auto, dopo poco tempo il GPS non comunicava più e andando anche sul portale gps365.com la posizione non veniva più rilevata. Ho preso tutto e riposto in laboratorio.
Fino a quando tempo fa, ho “riscoperto” questo affarino e mi sono messo con pazienza e buona volontà a capirne il funzionamento e, se, potevo svoltare con queste app realizzandone una tutta mia.
Cosi nasce… goWay.
Dopo vari tentativi di configurazione possibile sono arrivato a quella esatta.
PASSO 1:
Innanzi tutto dovevo riuscire a dirottare il traffico gprs del tracking su un mio indirizzo ip che funzionasse da server su una specifica porta tale da poter intercettare la stringa contenente le varie informazioni.
Per far ciò ho trovato in rete una piccola guida scialba che indicava alcuni comandi, ve la posto semmai servisse:
https://my.pcloud.com/publink/show?code=XZveUt7ZbxzOhHiDyqm2SJDsp021476lNHX7
tra le varie impostazioni trovo fortunatamente quella di mio interesse, ovvero:
- Set IP/Port(Surl)
Format1: ip,MIO.SERVER.PERSONAL.254,8083#
imposto finalmente l’indirizzo personale del mio server et voilà mi risponde sempre via SMS che l’aggiornamento è avvenuto con successo.
PASSO 2:
A questo punto urge un piccolo programmino in python che si metta in ascolto sulla porta 8083 ed intercetti la stringa che ogni minuto il tracking invia, cos’ mi metto all’opera ed ecco il risultato:
C’era solo un piccolo problema, in tutto questo non riuscivo a capire dove fosse la latitudine e la longitudine utili al riconoscimento della mia posizione.
Dopo qualche notte di incazz** ecco che finalmente spunta il risultato; si perchè dopo aver ricevuto la stringa (vedi figura) bisognava girarla (corretta, ovvero ridotta fino a LK) al tracking come una specie di riconoscimento (lasciapassare) e da questo intercettare nuovamente la risposta con tutte le informazioni sensibili alla posizione.
Vi posto il codice in questione:
import socket import threading import MySQLdb //effettuo la connessione al DB per salvarmi la posizione di volta in volta conn = MySQLdb.connect(host= "localhost", user="user", passwd="user", db="goWay") db = conn.cursor() //faccio il bind con ip e porta per mettermi in ascolto bind_ip = '0.0.0.0' bind_port = 8083 server = socket.socket(socket.AF_INET, socket.SOCK_STREAM) server.bind((bind_ip, bind_port)) server.listen(5) # max backlog of connections print 'Listening on {}:{}'.format(bind_ip, bind_port) //creo la funzione che riceve e invia le informazioni: def handle_client_connection(client_socket): //ricevo la prima stringa request = client_socket.recv(1024) print 'Received {}'.format(request) //splitto la prima stringa e prendo solo i primi 22 char x = (request[:22]+']').encode('ascii','ignore') btt = request.split(",") //prendo il valore della batteria, indicato nella prima stringa bt = btt[3].replace("]","") print bt //dopo aver richiuso la stringa la rinvio client_socket.send(x) request = client_socket.recv(1024) //ricevo su request finalmente le info necessarie. #print 'Received {}'.format(request) print request words = request.split(",") //faccio uno split delle virgole e prendo la posizione dei valori //corrispondenti alla latitudine e longitudine if len(words)>6: N = words[4] E = words[6] print "N:"+N print "E:"+E //inserisco su db wholeinsert=db.execute("insert into gps_data(gpstext,N,E,battery) VALUES(%s,%s,%s,%s)",(request,N,E,bt)) conn.commit() client_socket.close() //tengo il ciclo aperto finché vero, ovvero sempre. while True: client_sock, address = server.accept() print 'Accepted connection from {}:{}'.format(address[0], address[1]) client_handler = threading.Thread( target=handle_client_connection, args=(client_sock,) ) client_handler.start()A questo punto ho una bella tabella in mysql dove ogni minuto viene aggiornata la mia posizione con le informazioni necessarie, non mi resta che implementare una pagina che legga queste info e mi mostri la mia bella mappa.
PASSO 3:
Ho deciso di far funzionare il tutto con interfaccia ASP.NET, una bella paginetta che avesse insito nel codice il jvascript di google per la visualizzazione della mappa. Prima di procedere però è giusto rammentarvi che bisogna creare un API KEY GOOGLE che andrà inserita nelle richieste al server google per i risultati e che queste richieste ovviamente hanno un prezzo. Vi invito quindi a consultare la pagina in questione.
Detto questo, apriamo Visual Studio e creiamo un progetto WebApplication.
Una volta realizzato, creiamo una pagina Maps.aspx con questo codice:
<%@ Page Title="goWay" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Maps.aspx.cs" Inherits="goWay.Maps" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KEYGOOGLEAPI&callback=initMap"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("id") %>',
"lat": '<%# Eval("N") %>',
"lng": '<%# Eval("E") %>',
"description": '(<%# Eval("battery") %>)',
"icon": 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[markers.length-1].lat, markers[markers.length-1].lng),
zoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
],
{name: 'Styled Map'});
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//map.mapTypes.set('styled_map', styledMapType);
//map.setMapTypeId('styled_map');
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: data.icon,
description: data.description
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
<div id="gridview">
<asp:GridView ID="GridView1" EnableViewState="true" AllowSorting="True" AllowPaging="True" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" OnPageIndexChanging="OnPaging">
<Columns>
<asp:BoundField DataField = "id" HeaderText = "Markers" Visible ="true" />
<asp:TemplateField HeaderText = "Ora">
<ItemTemplate>
<asp:Label ID="tipo" runat="server" Text='<%# Eval("timestamp", "{0:d}")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "N">
<ItemTemplate>
<asp:Label ID="tipo" runat="server" Text='<%# Eval("N")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "E">
<ItemTemplate>
<asp:Label ID="tipo" runat="server" Text='<%# Eval("E")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Batteria">
<ItemTemplate>
<asp:Label ID="tipo" runat="server" Text='<%# Eval("battery")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
</asp:Content>E nella parte relativa al codice, ovvero Maps.aspx.cs inseriremo:
DataTable dt = this.CercaDT("select * from gps_data");
rptMarkers.DataSource = dt;
rptMarkers.DataBind();Dove CercaDT è una funzione che restituite la DataTable ovvero la tabella gpsdata direttamente dal database ( vi ricordo che su asp.net bisogna impostare la connectionString per la connessione al DB).
public DataTable CercaDT(String query)
{
MySqlConnection conn = new MySqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["goway"].ConnectionString);
conn.Open();
DataTable myTable = new DataTable();
MySqlCommand cmd = new MySqlCommand(query, conn);
//Create a data reader and Execute the command
MySqlDataReader dataReader = cmd.ExecuteReader();
//Read the data and store them in the list
myTable.Load(dataReader);
//close Data Reader
dataReader.Close();
//close Connection
conn.Close();
//return list to be displayed
return myTable;
}Il GPS tracking invia la posizione solo se è in movimento, risparmiando così la batteria. E se lo stesso è in movimento ogni minuto manderà la stringa. Spero l’articolo sia stato di vostro gradimento, ovviamente gli sviluppi a partire da qui sono infiniti, ma come sempre lascio a voi il resto.
A presto.
Commenti
Posta un commento