.: HosiriS :.

Informatica e non solo

Archive for the ‘Javascript’ Category

MeteArduino

Posted by hosiris su dicembre 1, 2011

Analisi iniziale
Il modulo meteo che verrà progettato dovrà soddisfare alcune semplici specifiche:

  • misurarazione di temperatura, pressione e umidità
  • inseririmento automatico dei dati misurati in un database
  • presentazione dei dati in maniera semplice ed intuitiva

La piattaforma di prototipazione che verrà utilizzata sarà Arduino con l’aggiunta di un piccola breadboard per le prime connessioni. La comunicazione tra Arduino e PC avverrà tramite USB.
Sono specifiche di massima, non restrittive, ma scritte solo per dare una linea guida al progetto.

Scelta dei sensori
Per la scelta dei sensori mi sono concentrato maggiormente sul costo degli stessi, in quanto per un progetto casalingo non è richiesta né una grande precisione né molta accuratezza.
Leggi il seguito di questo post »

Annunci

Posted in Arduino, C/C++, IHSys, Javascript, PHP, Progetti Personali, Python, SQL | 1 Comment »

Misuriamo la temperatura tramite Arduino

Posted by hosiris su ottobre 3, 2011

Dopo aver introdotto il mio progettino (IHSys) cominciamo con il progettare e realizzare il primo modulo: un misuratore di temperatura.
Leggi il seguito di questo post »

Posted in Arduino, C/C++, Hardware, IHSys, Javascript, PHP, Progetti Personali, Python, temparduino | 1 Comment »

Capire JSON

Posted by hosiris su aprile 1, 2011

Credo che non sia necessario spiegare cosa sia JSON, ma voglio raccogliere le tecniche di accesso a questo tipo di dato da diversi tipi di linguaggio.
Essendo derivato da javascript il metodo più semplice di accedere agli oggetti JSON è attraverso uno script js come mostrato di seguito:

var myvarJSON = { "persone":[
    {"nome":"giovanni",
     "cognome":"ruta",
     "sito":"https://hosiris.wordpress.com"},
    {"nome":"carlo",
     "cognome":"denaro",
     "sito":"http://www.grayhats.org"}
     ]
  }

Per accedere ai dati si utilizza la seguente notazione:

document.writeln(myvarJSON.persone[0].nome) // restituisce giovanni

E’ facile capire che un metodo così compatto di presentare i dati torna utilissimo in AJAX. Un esempio utilizzando jQuery potrebbe essere:

$.ajax({
  url: 'json.php',
  type: 'GET',
  dataType: 'json',
  success: function(oggetto) {
        var sito = $(oggetto).home;
        var url = $(oggetto).link;
        var aree = $(oggetto).aree;
        //...
    }
});

Adesso vediamo come generare ed interpretare questo tipo di dato utilizzando un linguaggio lato server (a cui arrivano le richieste asincrone): PHP, Python.

JSON in PHP
PHP dalle versione 5.2 viene distribuito con il supporto nativo a JSON. I metodi messi a disposizione sono 2:

  • json_encode( mixed value )
  • json_decode( string json [, bool assoc] )

Vediamo un esempio di trasferimento di dati, creiamo il file fruits.php:

<?php
$dsn = "mysql:host=localhost;dbname=[DATABASE NAME HERE]";
$username = "[USERNAME HERE]";
$password = "[PASSWORD HERE]";
$pdo = new PDO($dsn, $username, $password);
$rows = array();
if(isset($_GET['fruitName'])) {
    $stmt = $pdo->prepare("SELECT variety FROM fruit WHERE name = ? ORDER BY variety");
    $stmt->execute(array($_GET['fruitName']));
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>

Scriviamo il codice javascript che gestirà questi dati:

function populateFruitVariety() {
    $.getJSON('/fruit-varities.php', {fruitName:$('#fruitName').val()}, function(data) {
        var select = $('#fruitVariety');
        var options = select.attr('options');
        $('option', select).remove();
        $.each(data, function(index, array) {
            options[options.length] = new Option(array['variety']);
        });
    });
}
$(document).ready(function() {
    populateFruitVariety();
    $('#fruitName').change(function() {
            populateFruitVariety();
    });
});

Python e JSON
Anche Python offre supporto al JSON, tramite una miriade di package (qui potete trovare un confronto). Io preferisco simplejson che elabora il JSON tramite le seguenti funzioni:

  • simplejson.dumps( python_object )
  • simplejson.loads( json_object )

Un possibile esempio di utilizzo è il seguente:

import simplejson, urllib
APP_ID = 'YahooAPIKey'
SEARCH_BASE = 'http://search.yahooapis.com/WebSearchService/V1/webSearch'
    
class YahooSearchError(Exception):
    pass
    
def search(query, results=20, start=1, **kwargs):
    kwargs.update({
        'appid': APP_ID,
        'query': query,
        'results': results,
        'start': start,
        'output': 'json'
    })
    url = SEARCH_BASE + '?' + urllib.urlencode(kwargs)
    result = simplejson.load(urllib.urlopen(url))
    if 'Error' in result:
        raise YahooSearchError, result['Error']
    return result['ResultSet']

Si può intuire la funzionalità del metodo: tramite Yahoo effettua delle ricerche che vengono restituite nel formato json.

Posted in Javascript, Programmazione | 1 Comment »

Disegnare grafici dinamici con javascript: JSCharts

Posted by hosiris su marzo 18, 2011

Inizialmente non facevo molto uso di javascript, affidavo tutti i compiti a PHP e di conseguenza il server soffriva molto… poi ho scoperto che potevo alleggerire pesantemente il lavoro del server, sfruttando le potenti macchine che oggi vengono usate come client.
Oggi mi occuperò di come generare grafici senza caricare minimamente il server, usando quindi javascript.
JSChart è una libreria javascript per generare in maniera semplice e con poco codice dei grafici.

Una volta scaricato il file js, inseriamolo nella cartella del nostro sito, ed includiamo il codice nella pagina html:

<script type="text/javascript" src="jscharts.js"></script>

Successivamente è necessario inserire un div da utilizzare come contenitore per il grafico:

<div id="chart"></div>

Infine, creiamo un grafico:

<script type="text/javascript">
  var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
  var myChart = new JSChart('chart', 'line');
  myChart.setDataArray(myData);
  myChart.draw();
</script>

E’ possibile scegliere la tipologia di grafico da disegnare, in questo caso una linea, e di utilizzare un file esterno XML che contiene i dati.

Buon divertimento!

Posted in Javascript, Programmazione | 1 Comment »

Meteo… a portata di click!

Posted by hosiris su ottobre 1, 2010

Tony Stark ogni mattina viene svegliato da Jarvis, che oltre orari e appuntamenti lo informa sulla situazione meteo della giornata… Io lo voglio pure! Lungi da avere a disposizione un sistema come Jarvis (ma prima o poi ci riesco) ho cominciato a studiare una soluzione che per il momento mi permetta di acquisire info riguardo la situazione meteorologica.
Dopo varie ricerche ho scoperto che Google ha una sorta di API che fornisce un file XML con le informazioni richieste: weather google.
Perchè non usare questo allora?

Cominciamo con il prelevare li informazioni:

$ch = curl_init("http://www.google.com/ig/api?weather=Roma&hl=it");
$fp = fopen("weather.xml", "w");
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1");
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

A questo punto abbiamo a disposione un file XML che dovremmo elaborare. Io ho utilizzato il seguente script:

$xml = simplexml_load_file("weather.xml");
$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

Infine, per mostrare i file:

<h2>Roma - Oggi</h2>
<div class="weather">
  <img src="<?php echo 'http://www.google.com' . $current[0]->icon['data']?>" alt="weather"/>
  <br/><?php echo $current[0]->temp_c['data'] ?>° C<br/>
  <?php echo $current[0]->condition['data'] ?>
</div>
<h2>Previsioni Prossimi Giorni</h2>
<?php foreach ($forecast_list as $forecast) : ?>
<div class="weather">
  <img src="<?php echo 'http://www.google.com' . $forecast->icon['data']?>" alt="weather"/>
  <div><?php echo ucfirst($forecast->day_of_week['data']); ?></div>
  <?php echo $forecast->low['data'] ?>° C - <?php echo $forecast->high['data'] ?>° C<br/>
  <?php echo $forecast->condition['data'] ?>
</div>
<br/>
<?php endforeach ?>

La soluzione è molto semplice no? Il risultato è visibile qui.

Per il momento: buon divertimento!

Posted in Javascript, PHP, Programmazione | Leave a Comment »

Convertire un indirizzo in coordinate

Posted by hosiris su settembre 28, 2010

Nel corso di un progetto, ho avuto la necessità di inserire le coordinate geografiche di un dato indirizzo nel DB contentente le informazioni di una azienda. Questa necessità era dovuta al fatto che bisognava creare una mappa con dei marker a segnalare la posizione della aziende.
Un metodo è quello che ci vede inserire l’indirizzo in Google Maps e tramite la voce “LINK” selezioniamo le coordinate. Oppure possiamo, sempre da Google Maps, incollare nella barra degli indirizzi del browser il seguente codice:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Entrambi sono metodi validi, ma un tantino macchinosi, allora ho deciso di realizzarmi un interfaccetta che ha richiesto 5 min tra lettura della documentazione e realizzazione.
Ho usato le API di Google che, giunte alla terza versione, offrono innumerevoli opportunità.
Cominciamo con il creare la mappa, oggetto su cui effettueremo le ricerche:

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(41.442, 12.392);
  var myOptions = {
    zoom: 6,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Se inserite questo codice tra i tag SCRIPT e nel body inserite <div id=”map_canvas”></div> all’apertura della pagina vedrete apparire una mappa. La documentazione vi darà maggiori informazioni sulle possibili scelte nel creare i vari oggetti.
Terminata questa operazione, creiamo la funzione che ci permetterà di convertire l’indirizzo da noi inserito in una coppia di coordinate:

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      document.getElementById("coo").innerHTML = results[0].geometry.location;
    } else {
      alert("ERRORE: " + status);
    }
  });
}

L’utilizzo di questo codice prevede l’esistenza di alcuni div:

<div>
  <input id="address" type="textbox" value="Roma">
  <input type="button" value="CERCA" onclick="codeAddress()">
</div><div id="coo"></div>
<div id="map_canvas" style="width: 200px; height: 200px;"></div>

All’apertura vi si presenterà una pagina come la seguente:

dopo la ricerca verrà visualizzata la coppia di coordinate:

Questo risultato ci permette di selezionare latitudine e longitudine sia manualmente che tramite un parser, successivamente si potrebbe usare il metodo innerHTML per modificare il valore di un campo input.
Come sempre, l’unico limite alle operazione è la fantasia.

Buon divertimento

Posted in Informatica, Javascript, Programmazione | 9 Comments »

Lavorare con le API di google

Posted by hosiris su settembre 19, 2010

Per un progetto mi si è presentata la necessità di dover sviluppare un frontend che presenti, su una mappa, dei punti di interesse e delle informazioni relative a quai punti.
Ho deciso di usare le API che mette a disposizione Google e PHP con MySQL per la gestione delle informazioni.

Le API ci danno la possibilità di creare delle mappe in maniera molto semplice:

<!DOCTYPE html>
<html>
<head>
<title>Costumer Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 10px; padding: 0px }
 #map_canvas { height: 100%; width: 100%; border: 1px black solid }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=true_or_false&key=key_by_gmap" type="text/javascript">
</script>
<script type="text/javascript">
 function initialize() {
  var latlng = new google.maps.LatLng(41.442, 12.392);
  var myLatlng = new google.maps.LatLng(41.442, 12.392);
  var myOptions = {zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN};
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }
</script>
</head>
<body onload="initialize();">
 <div id="map_canvas"></div>
</body>
</html>

Tramite questo semplice codice il nostro browser ci mostrerà una mappa centrata sull’Italia.
A questo è semplicissimo aggiungere dei “marker”, cioè dei puntatori a delle coordinate esatte. Aggiungiamo il seguente codice alla funzione di inizializzazione:

var myLatlng = new google.maps.LatLng(41.442, 12.392);
var marker = new google.maps.Marker({position: myLatlng, map: map, title:"Punto 1"});

Adesso trattiamo i dati che avremo memorizzato in un DB. Come accennato per far questo utilizzeremo PHP e MySQL, ma per poter interfacciare questo mondo con il linguaggio Javascript usato dalle API dovremmo utilizzare un file di appoggio nel formato XML.
Il DB che useremo avrà una struttura semplicissima, atta a contenere solo le coordinate e il nome del punto, ma possiamo immagazzinare e mostrare una quantità di dati a piacere:

map(id, denominazione, latitudine, longitudine)

Per creare il file xml faremo uso del seguente codice:

<?php
$dbinfo = 'mysql:host=localhost;dbname=dbmap';
$dblink = new PDO($dbinfo, 'user', 'pass');
$query_marker = " SELECT * FROM map ";
if($file = fopen("markers.xml", "w")){
  $_xml ="<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
  $_xml .="<markers>\r\n";
  foreach($markers=$dblink->query($query_marker) as $marker){
    $_xml .= "\t<marker id='".$marker['id']."'>".$marker["denominazione"]."\r\n";
    $_xml .= "\t\t<lat>".$marker["latitudine"]."</lat>\r\n";
    $_xml .= "\t\t<lon>".$marker["longitudine"]."</lon>\r\n";
    $_xml .= "\t</marker>\r\n";
  }
  $_xml .="</markers>\r\n";
  fwrite($file, $_xml);
  fclose($file);
}
?>

In questo modo ci ritroviamo a disposizione un file contenente le informazioni necessarie alla creazione i marker sulla mappa. A questo punto carichiamo il file e tramite l’uso del DOM preleviamo i dati:

var xmlDoc;
if (window.ActiveXObject){
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation && document.implementation.createDocument){
  xmlDoc=document.implementation.createDocument("ns","root",null);
}
else{
  alert('cannot handle this');
}
xmlDoc.async=false;
xmlDoc.load("markers.xml");
var markers = xmlDoc.getElementsByTagName('marker');
var lat = xmlDoc.getElementsByTagName('lat');
var lon = xmlDoc.getElementsByTagName('lon');
for(i=0;i<markers.length;i++){
  punto[i] = new google.maps.LatLng(lat[i].childNodes[0].nodeValue, lon[i].childNodes[0].nodeValue);
  mark[i] = new google.maps.Marker({
                    position:punto[i],
                    clickable:true,
                    visible:true,
                    map:map,
                    title:markers[i].childNodes[0].nodeValue
  });
  google.maps.event.addListener(mark[i], 'click', function() {
    window.open();
  });
}

Quindi dopo aver caricato il file e prelevate le informazioni, richiamo la API per la creazione dei marker passando i parametri. Il codice è di semplicissima lettura e direi che è inutile descrivere riga per riga tutto quanto. Naturalmente questa è solo una possibile applicazione, ad esempio nalla mia versione sto preparando una mappa per visualizzare i luoghi in cui sono stato. Oltre la possibilità di mostrare i punti, se clicco su il marker si apre una pagina che mostra tutte le informazioni utili per quella località (hotel, ristoranti...)

Buon divertimento

PS: [23/09/2010] Mi è stato fatto notare che la parte javascript non sempre funziona; purtroppo non sono riuscito a riprodurre il problema, ma a breve posterò una soluzione alternativa!

Posted in Javascript, Programmazione | Contrassegnato da tag: | Leave a Comment »