DHOB (IU5SGN)

giovedì 14 febbraio 2013

Rotazione di immagine in CSS3

Un altro metodo per ruotare una immagine e' quello di utilizzare CSS3 con le proprieta' di rotazione delle immagini.
Questo metodo ha il problema che non tutti i browser supportano il medesimo set di modificatori (nell'esempio e' stato usato il metodo per i browser derivanti da WebKit)

-----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:160px;
height:160px;
background-image:url('http://junefabrics.com/images/android160.jpg');

-webkit-transform:rotate(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div></div>

</body>
</html>
-------------------------------------------------

Accelerazioni in HTML5/PhoneGap

Un esempio di come registrare le accelerazioni su un dispositivo mobile senza utilizzare le API native

In questo caso e' stata usata la libreria PhoneGap ... la stessa cosa sarebbe stata possibile anche con il solo HTML5 con il problema di dover gestire le differenti implementazioni sui differenti browsers

-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Accelerazione</title>

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

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
var options = { frequency: 100 };
navigator.accelerometer.watchAcceleration(onSuccess, onError);
}

// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {

var accx = document.getElementById('accx');
var accy = document.getElementById('accy');
var accz = document.getElementById('accz');

accx.innerHTML = 'Accelerazione X : ' +acceleration.x;
accy.innerHTML = 'Accelerazione Y : ' +acceleration.y;
accz.innerHTML = 'Accelerazione Z : ' +acceleration.z;


}

// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}

</script>
</head>
<body>
<p id="accx">Accelerazione X : </p><br>
<p id="accy">Accelerazione Y : </p><br>
<p id="accz">Accelerazione Z : </p><br>


</body>
</html>

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

Angoli di tilt in HTML5

Anche con il solo utilizzo di HTML5 (con un browser moderno) e' possibile determinare gli angoli di tilt di un dispositivo mobile. Un esempio puo' essere trovato a questo link

Attenzione: questo metodo non funziona con il browser stock di Android 2.3.6 perche' il browser non gestisce queste API di HTML5

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>


<div align=center id="gamma">Left Right (Gamma) </div>
<div align=center id="beta">Front Back (Beta)</div>
<div align=center id="alpha">Direzione (Alpha)</div>

<script type="text/javascript">
if (window.DeviceOrientationEvent) {
console.log("DeviceOrientation is supported");
window.addEventListener('deviceorientation', function(eventData) {
var LR = eventData.gamma;
var FB = eventData.beta;
var DIR = eventData.alpha;
var gamma_element = document.getElementById('gamma');
var beta_element = document.getElementById('beta');
var alpha_element = document.getElementById('alpha');
gamma_element.innerHTML = 'Left Right (Gamma) : ' + LR;
beta_element.innerHTML = 'Front Back (Beta) : ' + FB;
alpha_element.innerHTML = 'Direzione (Alpha) ' + DIR;

}, false);
} else {
alert("Not supported on your device or browser. Sorry.");
}

</script>

</body>
</html>

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

DriveDroid

Ho provato ad usare DriveDroid, una applicazione per Android che maschera l'unita' di memorizzazione del telefono come una chiavetta USB con montata sopra una distribuzione Live di Linux

Puo' essere utile per avviare un livecd quando si e' dimenticata a casa la propria chiavetta USB ma ci sono un po' di problemi

1) la applicazione richiede privilegi di root per avviarsi
2) e' necessario il cavetto USB da telefono a PC e per esperienza e' piu' semplice dimenticare il cavetto che non una chiavetta USB (il telefono e' sempre in tasca...il cavo no)
3) ho provato su tre portatili ed in nessun caso sono riuscito ad avviarli da DriveDroid mentre il computer fisso si avvia normalmente...non ho capito bene il motivo ma sembra il bios dei portatili sia talmente veloce in partenza da non riuscire a vedere il telefono (che da quando sente la corrente sulla porta USB a quando rende disponibile il live cd ci mette piu' di un secondo)

DriveDroid in esecuzione su Samsung SG-5570i con Debian Testing Live

Esperimento interesssante ma sostanzialmente inutile

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