DHOB (IU5SGN)

martedì 18 dicembre 2012

Pico TTS vs Ivona TTS

Il motore Text To Speech di default per Android e' Pico ma esistono molte soluzioni alternative; particolarmente interessante e' Ivona TTS che ha una qualita' del parlato nettamente superiore e meno metalliche di Pico.

Il motore Ivona puo' essere scaricato gratuitamente da Google Play ed ha come unico difetto una occupazione di circa 10 volte superiore rispetto a quella di Pico

Di seguito due esempi in italiano

Ivona TTS

Esempio GUI con HTML5

Seguendo la strada gia' impostata tempo fa ecco un esempio di come realizzare l'esempio GUI con HTML 5

L'impaginazione e' bruttina ma il tutto funziona

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

<!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; }
.containter{width: 150px; margin: 0 auto;}
.containter div{width: 150px;margin: 0 auto;}
</style>

<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
document.getElementById("progress").value=newValue;
}

</script>
</head>

<body>
<div class="containter">
<div>
<input type="range" min="0" max="100" onchange="showValue(this.value)" /></input>
</div>
<div>
<span id="range">50</span>
</div>
<div>
<progress id="progress" value="50" max="100">50%</progress>
</div>
</div>
</body>
</html>

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

Mandelbrot in HTML5

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