Difference between revisions of "Qml Ui"

From LinuxMCE
Jump to: navigation, search
(→‎Downloads & Initial setup)
m (→‎Setting it up)
 
(6 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
To get up and running, you need the following:
 
To get up and running, you need the following:
  
−
==Compiling from source===
+
===Compiling from source===
 
*Qt libraries for the version you are targeting
 
*Qt libraries for the version you are targeting
 
**'''QtSDK''' http://qt-project.org/downloads
 
**'''QtSDK''' http://qt-project.org/downloads
−
***KDE 10.04 and KDE 11.04 / 11.10 - '''Recommended'''
+
***KDE 10.04  
 +
***and KDE 11.04 / 11.10 - '''Recommended'''
 
***KDE 12.04 is currently unsupported by the SDK
 
***KDE 12.04 is currently unsupported by the SDK
 
OR
 
OR
Line 52: Line 53:
 
  svn co http://svn.linuxmce.org/svn/branches/LinuxMCE-1004/web
 
  svn co http://svn.linuxmce.org/svn/branches/LinuxMCE-1004/web
  
−
Next, we install the QTSDK you downloaded.
+
If you downloaded the SDK, please run
 +
sudo apt-get install build-essential
 +
before installing Qt SDK. It includes many packages needed
 +
 
 
*Install QT SDK as outlined
 
*Install QT SDK as outlined
−
 
+
*If building Qt libraries from source, you may run into dependency issues, but they are easily resolved.
−
 
+
−
You need a qtorbiter- do this by selecting "Orbiters" from within the webadmin pages and select "qOrbiter" from the drop down menu at the bottom.  A router reload is probably required.  Afterwards, run the qOrbiterGenerator script from a browser:
+
−
 
+
−
  http://dcerouter/lmce-admin/qOrbiterGenerator.php?d=<b>+iPK_Device</b>
+
−
 
+
−
where +iPK_Device is the device id of the orbiter you just generated.
+
  
 
After you've started QT SDK, some configuration is required to load the orbiter. First, you need to load the project itself. Navigate through your source tree to QOrbiter/Qorbiter_src. In this directory, you will find a .pro file named QOrbiter_src.pro. Open this and it will load the project into qt Creator. It should go without saying, but read the README!
 
After you've started QT SDK, some configuration is required to load the orbiter. First, you need to load the project itself. Navigate through your source tree to QOrbiter/Qorbiter_src. In this directory, you will find a .pro file named QOrbiter_src.pro. Open this and it will load the project into qt Creator. It should go without saying, but read the README!
Line 66: Line 64:
  
 
Next, open the qOrbiter project and setup the Build Settings.  Do this by clicking the "Projects" button from the left side menu.  You need to add to the "Additional arguments:" line for qmake under Build Steps.  Do this by clicking the "Details" button to the right of <b>qmake:</b> and additional arguments.  These are the current options:
 
Next, open the qOrbiter project and setup the Build Settings.  Do this by clicking the "Projects" button from the left side menu.  You need to add to the "Additional arguments:" line for qmake under Build Steps.  Do this by clicking the "Details" button to the right of <b>qmake:</b> and additional arguments.  These are the current options:
−
 
+
  "CONFIG+=opengl"         :: enables opengl
−
 
+
−
  "CONFIG+=for_desktop"   :: windows*, mac,linux desktop
+
−
"CONFIG+=for_freemantle" :: maemeo5 devices
+
−
"CONFIG+=for_harmattan"  :: harmattan based meego
+
 
  "CONFIG+=ANDROID"        :: android
 
  "CONFIG+=ANDROID"        :: android
  
Line 77: Line 71:
 
For example, after adding the above arguments, my "Effective qmake call:" box looks like this, where [username] is my ubuntu login name:
 
For example, after adding the above arguments, my "Effective qmake call:" box looks like this, where [username] is my ubuntu login name:
  
−
   qmake /home/[username]/src/qOrbiter/qObiter_src/qObiter_src.pro -r -spec linux-g++ "CONFIG+=for_desktop"
+
   qmake /home/[username]/src/qOrbiter/qObiter_src/qObiter_src.pro -r -spec linux-g++ "CONFIG+=opengl"
  
 
Next, ensure 'shadow build' is checked in this same menu. Then you need to set the path to '../build-output'  
 
Next, ensure 'shadow build' is checked in this same menu. Then you need to set the path to '../build-output'  
−
 
−
Next, add the PK_Device of your qOrbiter to the "Run Settings".  After clicking on "Projects", near the top will be options for the particular simulators you are using.  You will see a "Build" and a "Run" button.  Clicking on the "Run" button will display the "Run Settings" page.  In the "Arguments:" box, enter:
 
−
 
−
  -d <b>iPK_Device</b>
 
−
 
−
Where iPK_Device is the device id of your qOrbiter.
 
  
 
== Setting up for android development ==
 
== Setting up for android development ==
  
−
Download Necessitas from http://sourceforge.net/p/necessitas/home/necessitas/
+
Install necessitas as well as some java specific packages that it will ask you to install if not already installed. Once, done, open the project just like a normal Qt creator project and run it. '''NOTE''' you need to pay attention to the instructions in the necessitas installation guide on running your Qt project, specifically who and what Ministro is and does, and two how to configure the run options.
  
−
Open the project and set it up as above, using
+
== Notes From The Trenches ==
 +
While trying to get qOrbiter to build for Qt 4.7.4 I had two problems.
  
−
  "CONFIG+=ANDROID"       :: android
+
qOrbiter started, selection of qOrbiter device worked, but after the following errors were thrown out:
 +
(file:///usr/src/lmce-1004/qOrbiter/QOrbiter-build-4.7.4/qml/desktop/default/main.qml:2:1: plugin cannot be loaded for module
 +
"Qt.labs.shaders": The plugin '/usr/src/lmce-1004/qOrbiter/QOrbiter-build-4.7.4/imports/Qt/labs/shaders/libqmlshadersplugin.so'
 +
uses incompatible Qt library. (4.8.2) [release]
 +
    import Qt.labs.shaders 1.0
 +
    ^)
  
−
There is a bug in necessitas at present.  Starting the app as is will give an error - "can't find read elf information".
+
and/or there was a problem with libAudioVisual.so
  
−
To fix, click '''Projects''' -> '''Android''' -> '''Run'''
+
Both problems had the same reason. The svn contained shared object libraries which were build using 4.8.2 and automatically copied into the build output. '''MORE TO FOLLOW'''
  
−
Open the '''Package configurations''' section and choose the '''Application''' tab.  View/ slightly alter the '''Application Name'''.  This will fix the error.
+
=API Development=
−
 
+
Currently we are developing (actively) the api for the QML engine to utilize to communicate with the DCERouter backend. The purpose of this API is simply to abstract away the c++ from the user interface code, allowing for easily customized visual styles and user experiences.  
−
Lastly, choose 'Use devices qt libs' and use a real device for preference.
+
−
If you must use the SDK simulator, click 'Install  Ministro System Wide...' and download the APK from http://sourceforge.net/projects/ministro.necessitas.p/files/
+
−
 
+
−
==Special Notes==
+
−
 
+
−
via irc and TSCHAKeee Note, this was for bootstrapping an Archos 9 tablet. Desktops should not need to do this.
+
−
 
+
−
i literally just copy -ax /opt/QtSDK/Desktop/* to the core
+
−
either tarballing it up or otherwise
+
−
then export '''PATH=/opt/QtSDK/Desktop/Qt/473/gcc/bin:$PATH'''
+
−
then export '''LD_LIBRARY_PATH=/opt/QtSDK/Desktop/Qt/473/gcc/lib:$PATH'''
+
−
this can be placed in your .bash_profile
+
−
and you can then run qOrbiter
+
−
 
+
−
'''NOTE''' --[[User:Langstonius|Langstonius]] 08:13, 8 July 2011 (CEST)
+
−
You shouldnt have to manually tweak the connection parameters at all
+
−
 
+
−
You will also need to do a few things to make it interact with your LinuxMCE installation.
+
−
*If your installation is up to date, you can add it via the Orbiters page in the webadmin. Otherwise, go to the device tree and add it as a child of the core.
+
−
*Quick reload the router. Orbiter Generation is not done the normal way as explained in the next step
+
−
*Orbiter Generation is done by qOrbiterGen.php. You need to:
+
−
# copy qOrbiterGenerator.php from the web/lmce-admin/ directory in your svn checkout to the core (in /var/www/lmce-admin) you will be working with.
+
−
# visit this page http://dcerouter/lmce-admin/qOrbiterGenerator.php?d=deviceno (where deviceno should be replaced with the devicenumber of the orbiter in webadmin you want to use)
+
−
# if your device number is found and you entered everything properly, you will see a confirmation.
+
−
# you can regenerate the orbiter in the future from inside the orbiter, no need to visit the page after configuration.
+
−
 
+
−
*it should now run
+
−
 
+
−
You should then be able to compile / run / hack on qOrbiter
+
−
 
+
−
=Initial Findings=
+
−
All research is being done against the current branch of code in the svn. The Big Idea(tm) is do the following:
+
−
Create a new orbiter using qml as our ui both for its portability and skinning ease of use.
+
  
 
Initial experiments
 
Initial experiments
 
http://wiki.linuxmce.org/index.php/Qml
 
http://wiki.linuxmce.org/index.php/Qml
 
http://forum.linuxmce.org/index.php?topic=11722.0
 
http://forum.linuxmce.org/index.php?topic=11722.0
−
 
+
==QML==
 
If you are interested in playing with skinning only you can find the skinning document [http://wiki.linuxmce.org/index.php/QOrbiter QOrbiter Development Page].
 
If you are interested in playing with skinning only you can find the skinning document [http://wiki.linuxmce.org/index.php/QOrbiter QOrbiter Development Page].
  
−
==UI==
+
==DCE==
−
*Determine to what level we want QML to control the UI vs the c++ code.
+
Part of this process is finding the deficiencies in the DCE code / api itself and going back to the source so to speak to refine how data structures are passed. This is an involved process involving the LinuxMCE database, server code, and many other variables. The entire api for QOrbiter is generated by the DCEGen tool that is part of LinuxMCE. it literally reads device definitions from the LinuxMCE database and creates C++ stub code to be expanded later as the software device is completed. Part of the task of creating QOrbiter was talking to that api in an efficient manner.
−
*Provide a set of constant objects for UI designers to connect to for data
+
−
*Provide basic qml elements for some design objects. Think buttons specifically. These would be referred to as custom qml 'components'
+
−
*Develop a base template for styles to follow. This would allow changes to be made globally that would affect all qml objects loaded.
+
−
*determine animations sets for our custom qml objects
+
−
 
+
−
Following this idea further, its been decided to attempt to define the orbiter varables and data as a complex Data model. While the disadvantage is the complexity of the model, it will expose essentially a simple api to skin designers to access linuxMCE data in their skin, further removing programmatic responsibilities from the ui.
+
−
 
+
−
The initial work in this area includes
+
−
*creating the needed subclassed models from QAbstractListModel
+
−
*creating a purpose specific orbiter generator as the current orbiter gen does more than is needed and is too tightly coupled to the concept of deign_obj's something we wish to get away from.
+
  
 
==C++==
 
==C++==
−
There will need be be considerable time invested into understanding and picking apart certain functions of the existing orbiter to determine relevance in any new orbiter. These include not just the orbiter itself, but datagrids and how it interacts with other plugins. We will need to translate the functionality to new methods because of the inherent difference in the two ui toolkits. Things such as screen handlers and the callback system will be replaced with the signal and slots mechanisms of Qt and so must be understood to be replaced.  
+
In addition to the UI development, there is also an active effort to utilize c++ as much as possible to extend the functionality of QOrbiter. With this in mind, it should be understood that this is also something under active development.
 
*Datagrids - Custom DataModel has been implemented.  
 
*Datagrids - Custom DataModel has been implemented.  
 
*Screen Handlers - Handled by native qt functions
 
*Screen Handlers - Handled by native qt functions
 
*Mouse Handlers - Not needed as of yet
 
*Mouse Handlers - Not needed as of yet
 +
 +
==Current Architecture==
 +
A very high level overview is as follows:
 +
*QOrbiter is a c++ / QML based application capable of communicating with the DCERouter (server) over network sockets to control various aspects of the LinuxMCE home automation system.
 +
*It consists of
 +
** Statically compiled, threaded DCE code, normally produced as standalone libraries, but made static in this case for portability, comprised mainly of STL C++
 +
** Qt C++ serving as the 'translator' or bridge from the DCE code to the Qt Gui
 +
** QML Skinning engine that allows for dynamic changing of visual styles and user created styles without need for re-compilation
 +
**Multimedia player limited only by its platforms media abilities based on Phonon / Gstreamer
  
 
[[Category:Programmer's Guide]][[Category:QML]][[category:QOrbiter]]
 
[[Category:Programmer's Guide]][[Category:QML]][[category:QOrbiter]]

Latest revision as of 10:18, 27 October 2012

This page is intended to serve as an ongoing development guide in relation to using QML as the engine for LinuxMCE's user interface. We shall outline relevant documents relating to QML as well as specifics for designing a skin. Please note, if you are reading this, then this is in fact an ongoing guide and as such information is apt to change. Personal notes are to be kept in the discussion area of this page, please post only code, links, or other relevant data to UI development. This message will self-destruct in 10 seconds.

QML KnowledgeBase

An Overview of what QML is http://labs.qt.nokia.com/2009/05/13/qt-declarative-ui/ A document on styling and whats important, skinning - http://developer.qt.nokia.com/wiki/QmlStyling

Stay tuned to this development space

Downloads & Initial setup

Working with QOrbiter requires pre-requisites depending on platform and what you intend to do. To work on just the design aspect, please follow the 'Design Work' instructions To compile it yourself, check 'compiling from source' To get up and running, you need the following:

Compiling from source

  • Qt libraries for the version you are targeting

OR


Design Work

If you are looking to do design work on skins only, please use one of the pre-built binary packages to make your life easier.

Setting it up

I installed qt creator into home, although the default location is opt. Installing it into home will allow you get up and running right away but if installed into opt you will need to export some paths as described below.

  • SVN Checkout of the current /src tree from the svn
  • you need to install subversion 
sudo apt-get install subversion
  • you then check out the source tree by entering this:
svn co http://svn.linuxmce.org/svn/branches/LinuxMCE-1004/src

and the web part like this 

svn co http://svn.linuxmce.org/svn/branches/LinuxMCE-1004/web

If you downloaded the SDK, please run 

sudo apt-get install build-essential

before installing Qt SDK. It includes many packages needed

  • Install QT SDK as outlined
  • If building Qt libraries from source, you may run into dependency issues, but they are easily resolved.

After you've started QT SDK, some configuration is required to load the orbiter. First, you need to load the project itself. Navigate through your source tree to QOrbiter/Qorbiter_src. In this directory, you will find a .pro file named QOrbiter_src.pro. Open this and it will load the project into qt Creator. It should go without saying, but read the README!


Next, open the qOrbiter project and setup the Build Settings. Do this by clicking the "Projects" button from the left side menu. You need to add to the "Additional arguments:" line for qmake under Build Steps. Do this by clicking the "Details" button to the right of qmake: and additional arguments. These are the current options: 

"CONFIG+=opengl"         :: enables opengl
"CONFIG+=ANDROID"        :: android

Please ensure you include the quotes for the "CONFIG+= whatever"

For example, after adding the above arguments, my "Effective qmake call:" box looks like this, where [username] is my ubuntu login name: 

 qmake /home/[username]/src/qOrbiter/qObiter_src/qObiter_src.pro -r -spec linux-g++ "CONFIG+=opengl"

Next, ensure 'shadow build' is checked in this same menu. Then you need to set the path to '../build-output'

Setting up for android development

Install necessitas as well as some java specific packages that it will ask you to install if not already installed. Once, done, open the project just like a normal Qt creator project and run it. NOTE you need to pay attention to the instructions in the necessitas installation guide on running your Qt project, specifically who and what Ministro is and does, and two how to configure the run options.

Notes From The Trenches

While trying to get qOrbiter to build for Qt 4.7.4 I had two problems.

qOrbiter started, selection of qOrbiter device worked, but after the following errors were thrown out: 

(file:///usr/src/lmce-1004/qOrbiter/QOrbiter-build-4.7.4/qml/desktop/default/main.qml:2:1: plugin cannot be loaded for module
"Qt.labs.shaders": The plugin '/usr/src/lmce-1004/qOrbiter/QOrbiter-build-4.7.4/imports/Qt/labs/shaders/libqmlshadersplugin.so'
uses incompatible Qt library. (4.8.2) [release]
    import Qt.labs.shaders 1.0
    ^)

and/or there was a problem with libAudioVisual.so

Both problems had the same reason. The svn contained shared object libraries which were build using 4.8.2 and automatically copied into the build output. MORE TO FOLLOW

API Development

Currently we are developing (actively) the api for the QML engine to utilize to communicate with the DCERouter backend. The purpose of this API is simply to abstract away the c++ from the user interface code, allowing for easily customized visual styles and user experiences.

Initial experiments http://wiki.linuxmce.org/index.php/Qml http://forum.linuxmce.org/index.php?topic=11722.0

QML

If you are interested in playing with skinning only you can find the skinning document QOrbiter Development Page.

DCE

Part of this process is finding the deficiencies in the DCE code / api itself and going back to the source so to speak to refine how data structures are passed. This is an involved process involving the LinuxMCE database, server code, and many other variables. The entire api for QOrbiter is generated by the DCEGen tool that is part of LinuxMCE. it literally reads device definitions from the LinuxMCE database and creates C++ stub code to be expanded later as the software device is completed. Part of the task of creating QOrbiter was talking to that api in an efficient manner.

C++

In addition to the UI development, there is also an active effort to utilize c++ as much as possible to extend the functionality of QOrbiter. With this in mind, it should be understood that this is also something under active development.

  • Datagrids - Custom DataModel has been implemented.
  • Screen Handlers - Handled by native qt functions
  • Mouse Handlers - Not needed as of yet

Current Architecture

A very high level overview is as follows:

  • QOrbiter is a c++ / QML based application capable of communicating with the DCERouter (server) over network sockets to control various aspects of the LinuxMCE home automation system.
  • It consists of
    • Statically compiled, threaded DCE code, normally produced as standalone libraries, but made static in this case for portability, comprised mainly of STL C++
    • Qt C++ serving as the 'translator' or bridge from the DCE code to the Qt Gui
    • QML Skinning engine that allows for dynamic changing of visual styles and user created styles without need for re-compilation
    • Multimedia player limited only by its platforms media abilities based on Phonon / Gstreamer
Retrieved from "http://wiki.linuxmce.org/index.php?title=Qml_Ui&oldid=33321"