mercoledì 13 febbraio 2013

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">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <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

giovedì 7 febbraio 2013

Autenticazione su Linux con chiave USB

Ognuno di noi ha qualche chiavetta USB vecchia e poco capiente abbandonata in qualche cassetto ... perche' non usarla??




Nel mio caso ho usato una vetusta chiave Lexar Media da 32 Mb (!!!!) per usare una autenticazione automatica su Linux

per prima cosa si devono scarica i pacchetti pam

apt-get install pamusb-tools libpam-usb

successivamente si inserisce la chiave che si intende configure e si lancia

pamusb-conf --add-device my-usb-stick

seguito da 

pamusb-conf --add-user luca

(dove luca e' il nome dell'utente da configurare)

gia' finito almeno usando una Debian Testing....si puo' vedere il video allegato per verificare il funzionamento. In pratica alla finestra di login si inserisce la chiavetta e si digita il solo username (nel caso in cui non si ha la chiavetta il login e' automatico)



Eventualmente (se si usa Gnome) si puo' settare il comando che all'estrazione della chiavetta fa partire lo screensaver con il lock del monitor modificando il file /etc/pamusb.conf come segue
----------------------------------------------------------------------
<user id="ubuntu-user">
 <device> my-usb-stick </device> 
<agent event="lock">gnome-screensaver-command -l</agent> 
<agent event="unlock">gnome-screensaver-command -d</agent> 
</user>
----------------------------------------------------------------------

Pandas su serie tempo

Problema: hai un csv che riporta una serie tempo datetime/valore di un sensore Effettuare calcoli, ordina le righe, ricampiona il passo temp...