DHOB (IU5SGN)

mercoledì 13 febbraio 2013

Bussola in HTML5/PhoneGap

Usando il codice del post precedente e PhoneGap e' possibile realizzare una semplice applicazione in HTML5 per visualizzare una bussola su un dispositivo mobile

Il codice per generare l'esempio e' il seguente
------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Bussola</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" charset="utf-8">

var surface;
var android;
var angle = 0;

function drawCanvas() {
surface = document.getElementById("myCanvas");

if (surface.getContext) {
android = new Image();
android.onload = loadingComplete;
android.src = "./img/compass.jpg";
}
}

function loadingComplete(e) {
var surfaceContext = surface.getContext('2d');
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
surfaceContext.save();
surfaceContext.translate(android.width * 0.5, android.height * 0.5);
surfaceContext.rotate(angle* 0.0174532925199432957);
surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
surfaceContext.drawImage(android, 0, 0);
surfaceContext.restore();
}

var watchID = null;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
bussola();
}

function bussola() {
var options = { frequency: 300 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}

function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading.magneticHeading;
angle = heading.magneticHeading;
drawCanvas();

}

function onError(compassError) {
alert('Compass error: ' + compassError.code);
}
</script>
</head>

<body onload="drawCanvas();">
<div align=center>
<canvas id="myCanvas" width="256" height="256">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>

<div align=center id="heading">Waiting for heading...</div>

</body>
</html>

------------------------------------------------------------

Per visualizzare il comportamento dell'applicazione e' stato utilizzato Ripple

La cosa positiva e' che, essendo stata sviluppata con PhoneGap ,questa applicazione puo' essere utilizzata su Android, Iphone e molti altri dispositivi

Rotazione di immagine in HTML5

Di seguito in questo post viene descritto come e' possibile ruotare una immagine contenuta in un Canvas attorno al suo centro in HTML5
(il codice e' stato adattato da esempi che si trovano su forum)

-----------------------------------------------

<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="256" height="256">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>

<script type="text/javascript">
var surface;
var happy;
var angle = 0;

function drawCanvas() {
surface = document.getElementById("myCanvas");

if (surface.getContext) {
android = new Image();
android.onload = loadingComplete;
android.src = "./android.jpg";
}
}

function loadingComplete(e) {
var surfaceContext = surface.getContext('2d');
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
surfaceContext.save();
surfaceContext.translate(android.width * 0.5, android.height * 0.5);
surfaceContext.rotate(45* 0.0174532925199432957); //45 e' l'angolo di rotazione
surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
surfaceContext.drawImage(android, 0, 0);
surfaceContext.restore();
}

</script>

-----------------------------------------------

martedì 12 febbraio 2013

Grafici in HTML5

Sempre per sperimentare HTML5 ho provato la libreria FLOT

Si tratta di un metodo molto semplice di implementare nel Web grafici di gradevole visualizzazione ed anche dinamici con poche linee di codice

L'esempio che riporto di seguito e' per uno scatterplot XY in cui e' possibile zommare ed effettuare pan in modo dinamico

il codice completo che genera l'esempio e' il seguente
--------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="./lib/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./lib/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./lib/jquery.flot.navigate.js"></script>
</head>
<body>

<div id="placeholder" style="width:600px;height:300px;"></div>

<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

var options = {
series: { lines: { show: true }, shadowSize: 0 },
xaxis: { zoomRange: [0.1, 20], panRange: [-20, 20] },
yaxis: { zoomRange: [0.1, 20], panRange: [-20, 20] },
zoom: {
interactive: true
},
pan: {
interactive: true
}
};

$.plot($("#placeholder"), [ d1, d2],options);
});
</script>

</body>
</html>

---------------------------------------------------------------

il grafico e' definito dal div placeholder e qui sono descritte anche le dimensioni del grafico stesso.

Ci sono due serie di dati, una definita da una funzione e l'altra da punti, e sono descritte anche le caratteristiche del grafico mediante la variabile option.

La dinamicita' del grafico e' data dai settaggi di zoom e pan come interactive (per questa funzione si deve aggiungere il riferimento a jquery.flot.navigate.js)

semplice, veloce e di effetto

Impronte di lupo sulla neve

Questa foto non c'entra nulla con il contenuto di questo blog ma fotografare le impronte di lupo sulla neve sopra Vallombrosa non puo' lasciare indifferenti

Debugging HTML5

Una delle cose che ho sempre trovato fastidiose di Javascript era l'assenza di un metodo di debugging step by step

Attualmente la soluzione e' semplice ed integrata in Chrome
Attivando il menu' Strumenti/Strumenti per sviluppatori si apre una finestra al di sotto della pagina visualizzata nel quale sono riassunti i dettagli

In particolare andando al tab Scripts si osserva il codice Javascript ed e' possibile effettuare una sessione di debugging step by step inserendo dei breakpoint cosi' come il qualsiasi altra IDE moderna (ovvero cliccando sul numero di riga all'estrema sinistra del codice)

Veramente molto utile

Adb e Root su Mk808b

Ieri stavo cercando disperatamente di guadagnare i privilegi di root sull' MK808 usando tutte le informazioni sui vari forum
Per ottenere il risultato il primo passo era quello di ottenere un accesso alla macchina mediante Adb
Purtroppo tutti i consigli (tipo collegarsi mediante il cavo OTG scollegando il cavo di alimentazione e le altre Usb) non hanno portato i frutti desiderati... non sono mai riuscito ad ottenere un collegamento Adb

Alla disperazione ho provato a lanciare Root Checker e con mia grande sorpresa ho scoperto che non era necessario nessun unrooting perche' il sistema operativo gia' disponeva dei privilegi di amministratore

Debian su MK808

In questo post un breve video sull'utilizzo di una immagine Debian Complete in Linux Complete Installer su un MK808

come si puo' vedere il processore dual core da 1.2 Ghz fa la sua differenza rispetto alla precedente prova sul Samsung Galaxy Next Plus con processore da 800 MHz single Core

Per la cronaca l'MK808 e' collegato ad un televisore 720p con una risoluzione di 1024x768 che costringe a scrollare a mano in quanto lo schermo e' piu' grande della finestra reale del televisore