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>
-----------------------------------------------
mercoledì 13 febbraio 2013
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>
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
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
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
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
pamusb-conf --add-device my-usb-stick
pamusb-conf --add-user luca
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
seguito da
(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>
----------------------------------------------------------------------
Iscriviti a:
Post (Atom)
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...
-
In questo post viene indicato come creare uno scatterplot dinamico basato da dati ripresi da un file csv (nel dettaglio il file csv e' c...
-
La scheda ESP32-2432S028R monta un Esp Dev Module con uno schermo TFT a driver ILI9341 di 320x240 pixels 16 bit colore.Il sito di riferiment...
-
Questo post e' a seguito di quanto gia' visto nella precedente prova Lo scopo e' sempre il solito: creare un sistema che permet...