Visualizzazione post con etichetta QML. Mostra tutti i post
Visualizzazione post con etichetta QML. Mostra tutti i post

venerdì 10 aprile 2020

QML Mandelbrot in UBPorts / Ubuntu Touch (2)

Avevo gia' provato qui a creare l'insieme di Mandelbrot su UBPorts in QML ma il programma era scandalosamente lento ed ho provato a migliorare


In questo codice il risultato di calcolo per ogni pixel viene salvato in un array imgData che poi 
trasferito in un colpo sul Canvas. In questo modo il tempo di calcolo e' divenuto inferiore ad un terzo di quello della precedente prova

==============================================================
/*
 * Copyright (C) 2020  Luca Innocenit
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; version 3.
 *
 * ubuntu-calculator-app is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import QtQuick 2.7
import Ubuntu.Components 1.3
//import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
import QtQuick.Window 2.2

MainView {
    id: root
    objectName: 'mainView'
    applicationName: 'qtcpp.com.luca.innocenti'
    automaticOrientation: true

    visible: true
      width: Screen.width
      height: Screen.width
      Canvas {
          id: mycanvas
          anchors.centerIn: parent
          width: Screen.width
          height: Screen.width
          onPaint: {
              console.log("width "+ width.toString())
              console.log("height "+ height.toString())

              var ctx = getContext("2d");
              ctx.fillStyle = Qt.rgba(0, 0, 0, 1);
              ctx.fillRect(0, 0, width, height);
              var imgData = ctx.createImageData(height, width);

              ////////
              var re_min = -2.0;
             var im_min = -1.2;
             var re_max = 0.7;
             var im_max = 1.2;
             var iterazioni = 50;

             var r;
             var a,b;
             var x,y,x_new,y_new;
             var test;
             var re_factor = (re_max-re_min);
             var im_factor = (im_max-im_min);
             var indice = 0;

              for (var i=0;i<width;i++)
                          {
                          for (var j=0;j<height;j++)
                           {
                               a = re_min+(j*re_factor/height);
                               b = im_min+(i*im_factor/width);
                               x = 0;
                               y = 0;
                               test = 0;
                              imgData.data[indice+3]= 255;
                              //console.log(indice)

                               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)
                                          {
                                            if (k%2)
                                                {
                                                  // colora il punto
                                                  imgData.data[indice]=255;
                                                  imgData.data[indice+1]=255;
                                                  imgData.data[indice+2]=255;  
                                                }

                                            break;
                                          }
                                    x = x_new;
                                    y = y_new;
                                    }
                               indice = indice + 4;
                           }
              }
              ///////
              console.log("terminato")
              ctx.drawImage(imgData, 0, 0);

          }
      }
}

sabato 28 marzo 2020

QTSensors su Ubuntu Touch (UBPorts) in QML

Visto che sto imparando a programmare UBPorts ho voluto provare a convertire questo progetto Android/Kotlin per QML. In pratica si tratta di leggere i valori dell'accelerometro e, ad intervalli regolari, inviare i dati ad server web con una richiesta GET


Per abilitare l'utilizzo della rete nella app si deve modificare il file apparmor
apparmor
===========================================
{
    "policy_groups": ["networking"],
    "policy_version": 16.04
}

===========================================


Main.qml
===========================================
/*
 * Copyright (C) 2020  Your FullName
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; version 3.
 *
 * ubuntu-calculator-app is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import QtQuick 2.7
import Ubuntu.Components 1.3
//import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0

import QtSensors 5.0



MainView {
    id: root
    objectName: 'mainView'
    applicationName: 'acc2.luca.innocenti'
    automaticOrientation: true
   
    // variabili globali
    readonly property double radians_to_degrees: 180 / Math.PI
    property double pitch: 0.0
    property double roll: 0.0

    width: units.gu(45)
    height: units.gu(75)

    // un evento ogni 5 secondi
    Timer {
          interval: 5000
          running: true
          repeat: true
          onTriggered: {
            console.log("Timer")
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", "http://192.168.1.102/index.php?pitch="+pitch.toFixed(3)+"&roll="+roll.toFixed(3), true); // false for synchronous request
            xmlHttp.send();

          }
      }


    Accelerometer {
        id: accel
        dataRate: 100
        active:true

        onReadingChanged: {
            var x = accel.reading.x
            var y = accel.reading.y
            var z = accel.reading.z
            pitch = calcPitch(x,y,z)
            roll = calcRoll (x,y,z)
            //etichetta.text=""+accel.reading.x+"\n"+accel.reading.y+"\n"+accel.reading.z
            etichetta.text = "Pitch : "+pitch.toFixed(1)+"\nRoll : "+roll.toFixed(1)

            function calcPitch(x,y,z) {
                return Math.atan2(y, z)*radians_to_degrees;

                }
            function calcRoll(x,y,z) {
                return Math.atan2(-x, Math.sqrt((y*y)+(z*z)))*radians_to_degrees;
                }

          }


        }



    Page {
        anchors.fill: parent

        header: PageHeader {
            id: header
            title: i18n.tr('acc2')
        }


        Label {
            anchors {
                top: header.bottom
                left: parent.left
                right: parent.right
                bottom: parent.bottom
            }
            id: etichetta
            text: i18n.tr('Luca')

            verticalAlignment: Label.AlignVCenter
            horizontalAlignment: Label.AlignHCenter
        }

    }
}

QML Mandelbrot in UBPorts / Ubuntu Touch

Ovviamente, visto che mi sono messo a studiare UBPorts, non poteva mancare un porting di Mandelbrot. La prima scelta e' stata QML che in pratica e' un sottoinsieme di HTML5 per quanto riguarda il codice

Il progetto completo in Clickable si trova a questo link
https://github.com/c1p81/lucainnoc-gmail.com

Piccola nota: il progetto e' dannatamente lento


Le icone nel progetto sono in formato .svg (Gimp non supporta direttamente questo formato)


===================================================================
/*
 * Copyright (C) 2020  Your FullName
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; version 3.
 *
 * ubuntu-calculator-app is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import QtQuick 2.7
import Ubuntu.Components 1.3
//import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
import QtQuick.Window 2.2


MainView {
    id: root
    objectName: 'mainView'
    applicationName: 'pixel.luca.innocenti'
    automaticOrientation: true

    width: Screen.width
    height: Screen.height

    Page {
        anchors.fill: parent

        header: PageHeader {
            id: header
            title: i18n.tr('Mandelbrot QML')
        }

Canvas {
id: canvas
width:  Screen.width
height:  Screen.height
  onPaint: {
      var context=canvas.getContext("2d")
           context.fillStyle="rgb(0,0,0)";
           context.fillRect(0, 0, width, height);
           var re_min = -2.0;
           var im_min = -1.2;
           var re_max = 0.7;
           var im_max = 1.2;
           var iterazioni = 25;
           var colori = ["#FFFFFF","#FF0000","#00FF00","#0000FF","#FF00FF","#FFFF00","#00FFFF","#FFaa00","#abcedf","#fedc0a","#ab16dd","#d00fba","#edabcc","#ddacff"];

           var r;
           var a,b;
           var x,y,x_new,y_new;
           var test;
           var k,j,i;
           var re_factor = (re_max-re_min);
           var im_factor = (im_max-im_min);
           for (var i=0;i<width;i++)
            {
            for (var j=0;j<height;j++)
             {
                 a = re_min+(j*re_factor/height);
                 b = im_min+(i*im_factor/width);
                 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)
                            {
                              // colora il punto
                              r = k%12;
                              context.beginPath();
                              context.fillRect(i-1,j-1,1,1);
                              context.fillStyle=colori[r];
                              context.stroke();
                              break;
                            }
                      x = x_new;
                      y = y_new;
                      }
             }
           }
      }
}
}
}




venerdì 4 gennaio 2013

Ubuntu for Phone SDK

Per il nuovo SDk di Ubuntu Phone Canonical si e' basata su QML aggiungendo una propria estensione di componenti visuali (che in QML originale sono praticamente assenti)

Per poter iniziare a sviluppare e' necessario installare le QT5 Beta 1 mediante il comando

sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-beta1 && sudo apt-get update && sudo apt-get install qt5-meta-full && echo 'export PATH=/opt/qt5/bin:$PATH' >> ~/.bashrc

il repository di Ubuntu al momento riporta la versione Beta 1 mentre dal sito di Digia e' gia' disponibile la versione Beta 2 che puo' essere installata mediante il proprio installer

A questo punto si installano le estensioni dei componenti di Ubuntu a QML
sudo add-apt-repository ppa:ui-toolkit/ppa && sudo apt-get update && sudo apt-get install qt-components-ubuntu qt-components-ubuntu-demos qt-components-ubuntu-examples qt-components-ubuntu-doc notepad-qml


in maniera opzionale si puo' scaricare QtCreator per scrivere le applicazioni in QML ma in linea di principio si puo' usare qualsiasi editor di testo (anche perche', come scritto nel precedente post, l'editor visuale di QtCreator non funziona con QtQuick 2.0 ed in ogni caso non sono riconosciuto i componenti di Ubuntu)

apt-get install qtcreator

Per avere una panoramica dei componenti di Ubuntu si puo' lanciare il comando
qmlscene /usr/lib/qt-components-ubuntu/demos/ComponentShowcase.qmldsf

altrimenti degli esempi dei singoli componenti si trovano in
/usr/lib/qt-components-ubuntu/demos






giovedì 3 gennaio 2013

Hello World in QML

E' di oggi la notizia dell'uscita di Ubuntu for Phones e devo ammettere che la cosa mi incuriosisce soprattutto per l'SDK che inizia a venire distribuito

Il linguaggio di programmazione previsto per Ubuntu for Phones e' QML (Qt Modelling Language) che e' incluso nell'SDK di Qt

Con l'occasione mi sono scaricato anche l'ambiente di sviluppo delle Qt 5.0 Beta 2

Ho deciso quindi di fare qualche prova iniziando dal classico Hello World

Per prima cosa si deve creare un nuovo progetto dentro QtCreator selezionando QtQuick 2 UI (per usare le Qt 5.0) e si accede quindi alla finestra di programmazione che e' divisa come al solito in un editor ed in una interfaccia visuale

Editor del codice

Editor della parte visuale
e si inizia subito con un bug; infatti aprendo l'editor visual e dichiarando l'uso di QtQuick 2.0 (la versione legata a Qt 5.0) viene presentato un errore non risolvibile


Scriviamo un po' di codice..il programma mostra semplicemente la scritta Hello World quando si clicca sul pulsante rosso
------------------------------------------------------------

import QtQuick 1.0

Rectangle {
    width: 160; height: 160

    Rectangle {
            id: redSquare
            width: 80; height: 80
            anchors.top: parent.top; anchors.margins: 10; anchors.horizontalCenter: parent.horizontalCenter
            color: "red"

            Text { text: "Click Me"; font.pixelSize: 16; anchors.centerIn: parent }

            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.AllButtons
                onPressed: {
                    hello.text = 'Hello World'
               }
                onReleased: {
                    hello.text = ''
               }
            }
        }


    Text {
        id: hello
        anchors.bottom: parent.bottom; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20
        text: ""
    }

}




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


Ok tutto funziona ma.......c'e' un problemino. Per sviluppare sotto Ubuntu for Phones e' necessario importare la seguente libreria


import Ubuntu.Components 0.1

in conclusione si puo' sviluppare praticamente solo usando il sistema operativo Ubuntu (o meglio Ubuntu ToolKit)  e non impiegando il generico SDK di Qt (e di solito io non uso Ubuntu)


Debugger integrato ESP32S3

Aggiornamento In realta' il Jtag USB funziona anche sui moduli cinesi Il problema risiede  nell'ID USB della porta Jtag. Nel modulo...