goWay Map – GPS tracking fatto in casa!

GPS Tracking TS8

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:

  1. 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()

Ed ecco il risultato:

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 gioco è fatto, la pagina è stata realizzata e alla visualizzazione attraverso browser questo sarà il risultato:

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.

2 thoughts on “goWay Map – GPS tracking fatto in casa!”

  1. Beneficial Location Hi gentleman the following transpire a number of web page link with the aim of represses information that will a person may possibly acquire positive yourselves. The Significance Verifying away from home. kbddaaccedbf

Leave a Reply

Your email address will not be published. Required fields are marked *