DHOB (IU5SGN)

martedì 18 dicembre 2012

Disegnare pixel in HTML5

In HTML5 non esiste una funzione per disegnare un pixel al di sopra di un Canvas per cui si deve ricorrere ad un paio di trucchi come

creare una linea di lunghezza 1
creare un rettangolo di lato 1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css">

            body { margin: 0; font-size: 2em; background-color: white; }

            #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }

        </style>

        <script type="text/javascript">

            window.onload = function()

            var canvas = document.getElementById("esempio");

                if (canvas.getContext) {

                  var context = canvas.getContext("2d");

                  //linea di lunghezza 1

                  context.beginPath();

                  context.moveTo(200,200);

                  context.lineTo(201,201);

                  context.stroke();

                  //rettangolo di lunghezza 1

                  context.beginPath();

                  context.fillRect(100,100,1,1);

                  context.stroke();

                document.getElementById("quit").onmousedown = function()

                    Qt.quit();

};

                toggleElement();

        </script>

    </head>

    <body>

        <a id="quit">X</a>

        <canvas id="esempio" height="200" width="350">

        <!-- Utile per inserire informazioni di default -->

        </canvas>

    </body>

</html>


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

Attenzione: se si fa girare il programma sembra che non si visualizza niente, si deve fare molta attenzione perche' i pixel sono ovviamente molto piccoli sui monitor moderni

In questo esempio e' stato impiegato QtCreator con le estensioni della Nokia in modo da poter utilizzare l'emulatore di telefono (nel caso specifico un Nokia N900)

Per creare l'insieme di Mandelbrot e' stato definito un Canvas di 400x800 e, direttamente dalla funzione OnLoad, e' stato il grafico basandosi sugli esempi gia scritti in C.

La trasformazione del codice da C a JavaScript e' stata sostanzialmente indolore

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css">

            body { margin: 0; font-size: 2em; background-color: white; }

            #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }

        </style>

        <script type="text/javascript">

            window.onload = function()

            var canvas = document.getElementById("esempio");

                if (canvas.getContext) {

                  var context = canvas.getContext("2d");

                    var re_min = -2.0;

                    var im_min = -1.2;

                    var re_max = 1.0;

                    var im_max = 1.2;

                    var iterazioni = 255;

                    var r;

                    var a,b;

                    var x,y,x_new,y_new;

                    var test;

                    var k,j,i;

                    var SCREEN_HEIGHT = 400;

                    var SCREEN_WIDTH = 800;

                    var re_factor = (re_max-re_min);

                    var im_factor = (im_max-im_min);

                    for (var i=0;i<SCREEN_HEIGHT;i++)

                     for (var j=0;j<SCREEN_WIDTH;j++)

                      a = re_min+(j*re_factor/SCREEN_WIDTH);

                      b = im_min+(i*im_factor/SCREEN_HEIGHT);

                      x = 0;

                      y = 0;

                      test = 0;

                      for (var k=0;k<iterazioni;k++)

                       x_new = (x*x)-(y*y)+a;

                       y_new = (2*x*y)+b;

                       if (((x_new*x_new)+(y_new*y_new))>4)

                        r = k%2;

                        if (r == 1)

                            context.beginPath();

                            context.fillRect(j,i,1,1);

                            context.stroke();

                        break;

                       x = x_new;

                       y = y_new;

                document.getElementById("quit").onmousedown = function()

                    Qt.quit();

};

        </script>

    </head>

    <body>

        <a id="quit">X</a>

        <canvas id="esempio" height="400" width="800">

        Il Browser non supporta HTML5.

        <!-- Utile per inserire informazioni di default -->

        </canvas>

    </body>

</html>

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

Il programma in funzione sull'emulatore Nokia N900

Il programma in funzione direttamente in Chrome

Sull'emulatore il codice e' piuttosto lento mentre in Chrome il risultato e' sostanzialmente istantaneo

lunedì 17 dicembre 2012

Firefox Os

e' uscita la possibilita' di testare il SO mobile basato su Firefox
il tutto e' possibile installando il plugin Firefox chiamato Firefox Os Simulator

per alcuni versi Firefox OS ed Android sono simili in quanto il software utente gira in un ambiente protetto e separato dal sistema operativo vero e proprio. Nel caso di Android la macchina virtuale e' Dalvik mentre in Firefox OS si chiama Gaia; il sistema operativo in entrambi i casi usa un kernel linux (in Firefox OS viene chiamato Gonk)

La differenza di programmazione principale e' che in Android le applicazioni sono scritte in un linguaggio simil-Java mentre in Firefox OS sono di fatto delle applicazione HTML5 dotate di un manifesto che permette l'installazione sul portatile

Plugin Firefox con emulatore in azione

Scivola dall'alto

Impostazioni

Home

Apps

Usare le librerie QWT in QtCreator

Per creare grafici in Qt e' comodo utilizzare Qt Widgets for Technical Application (QWT) che possono essere installate semplicamente mediante

apt-get install libqwt-dev

una volta aperto QtCreator troveremo il nuovo widget nella barra a sinistra

se si tenta di compilare il progetto a questo stadio si genera pero' un errore perche' si deve modificare il file .pro

aggiungendo
----------------------------------
INCLUDEPATH += /usr/include/qwt

LIBS += -l qwt
----------------------------------
il codice per generara un semplice grafico e' il seguente

----------------------------------
    ui->qwtPlot->setGeometry(0,0,380,180);
    ui->qwtPlot->setAxisScale(QwtPlot::xBottom,0.0,100.0);
    ui->qwtPlot->setAxisScale(QwtPlot::yLeft,0.0,10000.0);

    //genera i dati
    double x[100], y[100];
    for (int i=0; i<100;i++)
    {
        x[i] = i;
        y[i] = i*i;
    }
    //associa i dati ad una urve
    QwtPlotCurve *curve = new QwtPlotCurve("Dati");
    curve->setSamples(x,y,100);
    //associa la curve al grafico
    curve->attach(ui->qwtPlot);
    //redisegna il grafico
    ui->qwtPlot->replot(); ----------------------------------
che ha come risultato il seguente grafico

Cattura schermata con Shutter

Alcuni Desktop Environment usano un sistema integrato per la cattura dello schermata (vedi Gnome con il tasto Stamp)

In altri casi puo' essere utile impiegare un programma apposito come puo' essere Shutter

venerdì 14 dicembre 2012

Hello World in QT

Un esempio su come creare una semplice applicazione in Qt/Gui in Debian Linux

Per prima cosa si deve scaricare il pacchetto QtCreator con tutte le sue dipendenza

apt-get install qtcreator

poi si crea un nuovo progetto Qt/GUI

Si crea in modo visuale il form

e si genera uno slot ovvero si associa l'evento al codice

in questo caso sull'onclick del pulsante

si codifica l'evento

e si compila ed esegue mediante il pulsante verde in basso sulla barra di sinistra

giovedì 13 dicembre 2012

Debugging Android in VirtualBox

L'emulatore di Android e' decisamente troppo lento su alcune piattaforme e qualche volta per il debugging e' meglio utilizzare direttamente un telefono

Una soluzione per velocizzare lo sviluppo e' quello di non utilizzare l'emulatore contenuto nell'SDK ma impiegare una macchina virtuale Virtualbox

Per fare cio' si deve scaricare una versione di Android compilata per x86 e piu' in particolare una versione ottimizzata per VirtualBox. Una ottima macchina si puo' scaricare da questo link

In seguito si imposta la macchina virtuale come segue

non sono necessarie modifiche alla scheda di rete virtuale

Una volta avviata la macchina virtuale si deve formattare la partizione virtuale in ext3 tramite fdisk

Una volta lanciata la macchina virtuale questa puo' essere interrogata via adb (tutte le funzionalita' sono funzionanti). Per sviluppare si puo' indirizzare Eclipse ad utilizzare la macchina VirtualBox che viene vista come se fosse un telefono