Difference between revisions of "ECE497 Notes on Qt"

From eLinux.org
Jump to: navigation, search
m (Installs: Added uic ln)
m (Installation)
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category:ECE497]]
+
[[Category:ECE497 |Notes]]
 +
{{YoderHead}}
  
Here are some notes on using Qt on the Beagle.
+
[http://qt.nokia.com/ Qt] is one of the many UI frameworks that runs on the Beagle.  It also runs on many other platforms such as Microsoft Windows, Mac OS X, and Linux, and it appears to be one of the more popular choices for the Beagle. It even runs on [http://qt.nokia.com/products/qt-for-mobile-platforms dumb cell phones]. We'll be using it with X11, however there is an [http://developer.qt.nokia.com/wiki/Support_for_Embedded_Linux embedded version] that doesn't need X.
 +
 
 +
== Installation ==
 +
 
 +
[http://tigraphics.blogspot.com/2013/01/qt-500-final-dec-2012-available-on-ti.html TI Graphics site] has the latest version of QT.
 +
 
 +
Qt can be developed solely on the Beagle, but I suggest you install it on both your host and the Beagle. Compilations on the Beagle may only take 20 or 30 seconds, but run much faster on the host.
 +
 
 +
=== Installing v6 ===
 +
 
 +
I'm running with v6 since it's an easy download on both the host and Beagle.  You also get the sources for the examples this way.
 +
 
 +
==== Installing on the host ====
 +
 
 +
I think this is all I did on the host.  This assumes you have oe installed.
 +
 
 +
host$ '''source ~/.oe/environment-2008'''
 +
host$ '''bitbake qt4-x11-free-gles'''
 +
 
 +
 
 +
==== Installing on the Beagle ====
 +
 
 +
Here's what I've installed on the Beagle
 +
 
 +
beagle$ '''opkg update'''
 +
beagle$ '''opkg install qt4-x11-free'''    # 3 minutes
 +
beagle$ '''opkg install qmake2'''          # 1 minute
 +
beagle$ '''opkg install qt4-x11-free-dev''' # 4 minutes
 +
beagle$ '''opkg install qt4-x11-free-doc''' # 5 minutes
 +
 
 +
I had to hack a couple of things before running qmake.
 +
 
 +
beagle$ '''cd /usr/bin'''
 +
beagle$ '''ln -s moc moc-qt4'''
 +
beagle$ '''ln -s uic uic-qt4'''
 +
beagle$ '''ln -s qmake-qt4 qmake'''
 +
 
 +
beagle$ '''source /usr/share/qt4/environment-setup'''
 +
 
 +
Be sure to source the setup file before running qmake for the first time.
 +
 
 +
Check out the qt demos and documentation.
 +
 
 +
beagle$ '''qtdemo'''
 +
beagle$ '''midori file:///usr/share/doc/qt4/html/index.html'''
 +
 
 +
The following appears to load some qt examples with source code in /usr/share/ICS.  You'll also find examples in /usr/bin/qt4/examples.
 +
 
 +
beagle$ '''opkg install linuxtag-ics'''  # 1 minute
 +
 
 +
=== Installing v5 ===
 +
 
 +
Version 5 is what you get when you use the package managers.  I don't know how to get the source for the examples with this approach.
 +
 
 +
==== Installing on the host ====
 +
 
 +
Just run:
 +
 
 +
host$ '''sudo apt-get update'''
 +
host$ '''sudo apt-get install libqwt-dev'''      # 1 minute
 +
host$ '''opkg intall libqwt-examples'''          # 1 minute
 +
 
 +
==== Installing on the Beagle ====
 +
 
 +
Just run:
 +
 
 +
beagle$ '''opkg update'''
 +
beagle$ '''opkg intall libqwt-dev'''      # 1 minute
 +
beagle$ '''opkg intall libqwt-examples'''  # 1 minute
 +
 
 +
== Qt Tutorials ==
 +
 
 +
=== Widgets ===
 +
 
 +
There are several nice Qt Tutorials [http://doc.qt.nokia.com/4.7/tutorials.html here].  I suggest you start with the [http://doc.qt.nokia.com/4.7/widgets-tutorial.html Widgets Tutorial]. Here's how you can run the examples on the Beagle.
 +
 
 +
# Go to the [http://doc.qt.nokia.com/4.7/tutorials-widgets-toplevel.html Creating a Window] tutorial and download the '''main.cpp''' and '''toplevel.pro''' files. Put them in their own directory.
 +
# Run '''qmake'''.  (Be sure you have sourced the file noted above.) This will create a Makefile.
 +
# Run '''make'''.  This should compile the program.  It takes about 30 seconds for the first make.
 +
# Do an '''ls''' to see what files were created. You should see '''toplevel'''.  Run it.
 +
# Congratulations, you've just compiled and run your first Qt program.
 +
 
 +
Work through the rest of the widgets tutorials to learn about building at Qt from the bottom up.  The [http://doc.qt.nokia.com/4.7/tutorials-addressbook.html Address Book] tutorials look like they are also a good place to explore.
 +
 
 +
=== Qt Designer ===
 +
 
 +
It's possible to build a user interface from the command line, building a graphics user interface is more easily done with a graphical program. [http://doc.qt.nokia.com/4.7/designer-manual.html Qt Designer] is Qt's tool for designing and building graphical user interfaces (GUIs) from Qt components. The [http://doc.qt.nokia.com/4.7/designer-quick-start.html Qt Designer Tutorial] is a good overview of what Designer can do.  Designer runs on the host and the Beagle and should already be installed. 
 +
 
 +
The Qt Designer tutorial ends rather quickly.  I suggest you follow it up by looking at the [http://doc.qt.nokia.com/4.7/examples-designer.html Qt Designer Examples].  Here you will learn different ways to take the '''*.ui''' file created by Designer and use it with your other Qt code.
  
 
== Useful Links ==
 
== Useful Links ==
  
* The [http://qt.nokia.com/ Qt site]
+
Here are some usefule links I've found.
* It looks like the best way to get going is use bitbake.  I'm trying
+
<pre>
+
$ source ~/.oe/environment-2008
+
$ bitbake qt4-x11-free-gles
+
</pre>
+
  
* [http://doc.trolltech.com/4.6/index.html This] looks like a nice reference.
+
; [http://qt.nokia.com/ The Qt site]
* [http://labs.qt.nokia.com/2009/11/20/building-qt-to-make-use-of-the-beagle-boards-sgx-gpu/ Building Qt to make use of the Beagle board’s SGX GPU]
+
: It's a bit overwhelming at first, but gives a good idea what Qt can do, how it can do it, and where it's doing it.
* [http://processors.wiki.ti.com/index.php/Building_Qt Building Qt] from TI's site
+
 
* [http://qt.nokia.com/products/platform/qt-for-embedded-linux/ Embedded Linux Qt]
+
; [http://doc.trolltech.com/4.7/index.html Qt Reference Documenation]
* If you want recompile everything: [http://treyweaver.blogspot.com/2010/10/setting-up-qt-development-environment.html Setting Up Qt Development Environment for BeagleBoard-xM] has some nice instructions on getting QT going on the Beagle.  It's set up for using Qt embedded. This writes directly to the framebuffer and doesn't need (and interferes with) X windows. 
+
: This looks like a nice reference.
<pre>
+
 
./configure -opensource -confirm-license -prefix /opt/qt-arm -no-qt3support -x11 -little-endian -xplatform qws/linux-DM3730-g++ -qtlibinfix E
+
; [http://labs.qt.nokia.com/2009/11/20/building-qt-to-make-use-of-the-beagle-boards-sgx-gpu/ Building Qt to make use of the Beagle board’s SGX GPU]
</pre>
+
: There is a version of Qt that uses the Beagle's SGC to render the 3D stuff.  I'm not doing 3D right now, so I haven't looked into it.
 +
 
 +
; [http://processors.wiki.ti.com/index.php/Building_Qt Building Qt]  
 +
: This is  TI's site.
 +
 
 +
; [http://qt.nokia.com/products/platform/qt-for-embedded-linux/ Embedded Linux Qt]
 +
: If you are thinking small, maybe you don't want X running on your Beagle.  If so, look at  Qt Embedded. It write straight to the frame buffer.
 +
 
 +
; [http://treyweaver.blogspot.com/2010/10/setting-up-qt-development-environment.html Setting Up Qt Development Environment for BeagleBoard-xM]
 +
: This site has some nice instructions on getting QT going on the Beagle by recompiling everythingI don't think recompiling is really necessary. It's set up for using Qt embedded.
 +
 
 +
== Qt Quick and Qt Creator ==
 +
 
 +
Qt Quick is another way of building a UI. [http://qt.nokia.com/qtquick/ Qt Quick] is based on JavaScript, HTML and CSS. [http://qt.nokia.com/products/developer-tools Qt Creator] is a cross-platform integrated development environment (IDE) tailored to the needs of Qt  developers; however it doesn't appear to run on the Beagle.  I need to look into this some more.
  
 
I'm working through [http://doc.trolltech.com/qtcreator-2.2/creator-qml-application.html this] example. I can't change '''mousearea1''' to '''MouseArea''' to match the figure.  I think something is missing in the instructions.
 
I'm working through [http://doc.trolltech.com/qtcreator-2.2/creator-qml-application.html this] example. I can't change '''mousearea1''' to '''MouseArea''' to match the figure.  I think something is missing in the instructions.
Line 37: Line 134:
 
</pre>
 
</pre>
  
== QWT ==
+
== Real-time Plotting - QWT ==
  
QWT is short for Qt Widgets for Technical Applications. It is a collection of widgets and support classes for creating technical applications such as those created using, for example, LabView or Test Point.
+
QWT is short for Qt Widgets for Technical Applications. It is a collection of widgets and support classes for creating technical applications. I hope to use it to do real-time plotting on the Beagle.
  
[http://www.digitalfanatics.org/projects/qt_tutorial/chapter11.html Here] is some info on QWT.  I think it might be able to plot data as it comes in.
+
[http://qwt.sourceforge.net/ Here] is the main qwt site. [http://www.digitalfanatics.org/projects/qt_tutorial/chapter11.html Here] is some info on QWT.  I think it might be able to plot data as it comes in.
  
I'm trying to fix the include path with:
+
Here's how I think I installed it on the host.
<pre>
+
export CPLUS_INCLUDE_PATH=/usr/include/qt4/Qt
+
</pre>
+
  
== Installs ==
+
host$ '''svn co https://qwt.svn.sourceforge.net/svnroot/qwt/branches/qwt-6.0'''  # This is straight from the qwt site.
 +
host$ '''cd qwt-6.0'''
 +
host$ '''gedit qwtconfig.pri'''
  
Here's what I've installed on the Beagle
+
Around line 108, uncomment <code>QWT_CONFIG    += QwtExamples</code>.  This will compile the examples too.
<pre>
+
opkg install qt4-demos
+
opkg install linuxtag-ics
+
opkg install qt4-examples
+
opkg install qt4-x11-free qt4-x11-free-doc qt4-x11-free-dev
+
opkg install qmake2
+
</pre>
+
  
I think you need to do this before running qmake.
+
host$ '''qmake-qt4'''
 +
host$ '''make'''
  
<pre>
+
After a while it should be ready to run.  Explore the '''examples''' folder.  The Makefiles are setup to put all the binarys in examples/bin.  Try running them.
$ cd /usr/bin
+
$ ln -s moc moc-qt4
+
$ ln -s uic uic-qt4
+
$ ln -s qmake-qt4 qmake
+
  
$ source /usr/share/qt4/environment-setup
+
=== On the Beagle ===
</pre>
+
Here's what I did on the Beagle.
 +
 
 +
beagle$ '''svn co https://qwt.svn.sourceforge.net/svnroot/qwt/branches/qwt-6.0'''
 +
beagle$ '''source /usr/share/qt4/environment-setup'''
 +
beagle$ '''cd qwt-6.0'''
 +
beagle$ '''qmake'''
 +
beagle$ '''make'''
 +
 
 +
The compile took about 20 minutes without the examples. The examples took an additional 17 minutes. The lib files don't get copied to /usr/lib (even with make install), so I copied them by hand.
 +
 
 +
beagle$ '''cd lib'''
 +
beagle$ '''cp * /usr/lib'''
 +
 
 +
Now try an example.
 +
 
 +
beagle$ '''cd ../examples/bode'''
 +
beagle$ '''qmake'''
 +
beagle$ '''make'''
 +
beagle$ '''../bin/bode'''
 +
 
 +
You will now see a bode plot.  They the '''Zoom''' and '''Export''' buttons.
 +
 
 +
Note:  All the example Makefiles are set up to install the executable in the examples/bin directory.
 +
 
 +
{{YoderFoot}}

Revision as of 23:10, 6 January 2013

thumb‎ Embedded Linux Class by Mark A. Yoder


Qt is one of the many UI frameworks that runs on the Beagle. It also runs on many other platforms such as Microsoft Windows, Mac OS X, and Linux, and it appears to be one of the more popular choices for the Beagle. It even runs on dumb cell phones. We'll be using it with X11, however there is an embedded version that doesn't need X.

Installation

TI Graphics site has the latest version of QT.

Qt can be developed solely on the Beagle, but I suggest you install it on both your host and the Beagle. Compilations on the Beagle may only take 20 or 30 seconds, but run much faster on the host.

Installing v6

I'm running with v6 since it's an easy download on both the host and Beagle. You also get the sources for the examples this way.

Installing on the host

I think this is all I did on the host. This assumes you have oe installed.

host$ source ~/.oe/environment-2008
host$ bitbake qt4-x11-free-gles


Installing on the Beagle

Here's what I've installed on the Beagle

beagle$ opkg update
beagle$ opkg install qt4-x11-free     # 3 minutes
beagle$ opkg install qmake2           # 1 minute
beagle$ opkg install qt4-x11-free-dev # 4 minutes
beagle$ opkg install qt4-x11-free-doc # 5 minutes

I had to hack a couple of things before running qmake.

beagle$ cd /usr/bin
beagle$ ln -s moc moc-qt4
beagle$ ln -s uic uic-qt4
beagle$ ln -s qmake-qt4 qmake
beagle$ source /usr/share/qt4/environment-setup

Be sure to source the setup file before running qmake for the first time.

Check out the qt demos and documentation.

beagle$ qtdemo
beagle$ midori file:///usr/share/doc/qt4/html/index.html 

The following appears to load some qt examples with source code in /usr/share/ICS. You'll also find examples in /usr/bin/qt4/examples.

beagle$ opkg install linuxtag-ics  # 1 minute

Installing v5

Version 5 is what you get when you use the package managers. I don't know how to get the source for the examples with this approach.

Installing on the host

Just run:

host$ sudo apt-get update
host$ sudo apt-get install libqwt-dev       # 1 minute
host$ opkg intall libqwt-examples           # 1 minute

Installing on the Beagle

Just run:

beagle$ opkg update
beagle$ opkg intall libqwt-dev       # 1 minute
beagle$ opkg intall libqwt-examples  # 1 minute

Qt Tutorials

Widgets

There are several nice Qt Tutorials here. I suggest you start with the Widgets Tutorial. Here's how you can run the examples on the Beagle.

  1. Go to the Creating a Window tutorial and download the main.cpp and toplevel.pro files. Put them in their own directory.
  2. Run qmake. (Be sure you have sourced the file noted above.) This will create a Makefile.
  3. Run make. This should compile the program. It takes about 30 seconds for the first make.
  4. Do an ls to see what files were created. You should see toplevel. Run it.
  5. Congratulations, you've just compiled and run your first Qt program.

Work through the rest of the widgets tutorials to learn about building at Qt from the bottom up. The Address Book tutorials look like they are also a good place to explore.

Qt Designer

It's possible to build a user interface from the command line, building a graphics user interface is more easily done with a graphical program. Qt Designer is Qt's tool for designing and building graphical user interfaces (GUIs) from Qt components. The Qt Designer Tutorial is a good overview of what Designer can do. Designer runs on the host and the Beagle and should already be installed.

The Qt Designer tutorial ends rather quickly. I suggest you follow it up by looking at the Qt Designer Examples. Here you will learn different ways to take the *.ui file created by Designer and use it with your other Qt code.

Useful Links

Here are some usefule links I've found.

The Qt site
It's a bit overwhelming at first, but gives a good idea what Qt can do, how it can do it, and where it's doing it.
Qt Reference Documenation
This looks like a nice reference.
Building Qt to make use of the Beagle board’s SGX GPU
There is a version of Qt that uses the Beagle's SGC to render the 3D stuff. I'm not doing 3D right now, so I haven't looked into it.
Building Qt
This is TI's site.
Embedded Linux Qt
If you are thinking small, maybe you don't want X running on your Beagle. If so, look at Qt Embedded. It write straight to the frame buffer.
Setting Up Qt Development Environment for BeagleBoard-xM
This site has some nice instructions on getting QT going on the Beagle by recompiling everything. I don't think recompiling is really necessary. It's set up for using Qt embedded.

Qt Quick and Qt Creator

Qt Quick is another way of building a UI. Qt Quick is based on JavaScript, HTML and CSS. Qt Creator is a cross-platform integrated development environment (IDE) tailored to the needs of Qt developers; however it doesn't appear to run on the Beagle. I need to look into this some more.

I'm working through this example. I can't change mousearea1 to MouseArea to match the figure. I think something is missing in the instructions.

The Transitions section has some details missing:


   transitions: [
        Transition {
            from: "*"; to: "State1"
            NumberAnimation {
                properties: "x,y";
                duration: 1000
            }
        }
    ]

Real-time Plotting - QWT

QWT is short for Qt Widgets for Technical Applications. It is a collection of widgets and support classes for creating technical applications. I hope to use it to do real-time plotting on the Beagle.

Here is the main qwt site. Here is some info on QWT. I think it might be able to plot data as it comes in.

Here's how I think I installed it on the host.

host$ svn co https://qwt.svn.sourceforge.net/svnroot/qwt/branches/qwt-6.0  # This is straight from the qwt site.
host$ cd qwt-6.0
host$ gedit qwtconfig.pri

Around line 108, uncomment QWT_CONFIG += QwtExamples. This will compile the examples too.

host$ qmake-qt4
host$ make

After a while it should be ready to run. Explore the examples folder. The Makefiles are setup to put all the binarys in examples/bin. Try running them.

On the Beagle

Here's what I did on the Beagle.

beagle$ svn co https://qwt.svn.sourceforge.net/svnroot/qwt/branches/qwt-6.0
beagle$ source /usr/share/qt4/environment-setup
beagle$ cd qwt-6.0
beagle$ qmake
beagle$ make

The compile took about 20 minutes without the examples. The examples took an additional 17 minutes. The lib files don't get copied to /usr/lib (even with make install), so I copied them by hand.

beagle$ cd lib
beagle$ cp * /usr/lib

Now try an example.

beagle$ cd ../examples/bode
beagle$ qmake
beagle$ make
beagle$ ../bin/bode

You will now see a bode plot. They the Zoom and Export buttons.

Note: All the example Makefiles are set up to install the executable in the examples/bin directory.




thumb‎ Embedded Linux Class by Mark A. Yoder