Archive

Posts Tagged ‘qml’

Future Versions of Ubuntu To Feature Mir Display Server Compatible With Android Graphics Drivers

March 5th, 2013 3 comments

The X server is getting old, and many developers complain it’s not an optimal solution anymore due to its (over) complexity, which was why Wayland was developed. However, it turns out Ubuntu will not use Wayland, but instead their own display server called Mir which will be used in all form factors from phones to desktops.

Mir on Android Drivers (Now and in May 2013)

Mir on Android Drivers (Now and in May 2013)

Phoronix has provided a quick summary about the key aspects of Mir:

  • Mir is a new display server being developed at Canonical and it is not based on X.Org or Wayland.
  • Android graphics drivers will be supported.
  • Existing DRM/KMS/Mesa/GBM (the open-source Linux graphics drivers) will work. Canonical is pressuring the binary blob vendors to make their drivers compatible.
  • There will be support for legacy X11 applications through an integrated root-less X.Org Server.
  • Canonical will natively support GTK3 and Qt/QML toolkits with Mir.
  • Mir will be used for all form factors from Ubuntu Phones to the Ubuntu Linux desktop.
  • Mir should be ready for Ubuntu Phone OS by this October while it should come to other form factors (and the desktop) within one year.

Canonical has not chose Wayland because it could not fulfill their requirements completely, but due to their design, it would still be possible to add Wayland support by implementing a Wayland-specific frontend for the Mir server or by providing a client-side implementation of libwayland that talks to Mir.

Mir will also run on the free drivers software stack, but it does not run on closed source drivers now, and Phoronix reports that Canonical is in talks with closed-source vendors (NVIDIA and AMD) about supporting Mir and a unified EGL-centric driver model. From the look of it, it seems only desktop platforms will support the free Linux graphics drivers, which means other platforms such as smartphones and tablets may have to rely exclusively on the Android drivers (TBC).

There are three milestones for Mir development:

  • May 2013 –  Finish the first step towards integrating Unity Next with Mir and provide enough facility to start iterating the actual shell development.
  • October 2013 – Unity Next & Mir window management are completely integrated with the rest of the system to support an Ubuntu Phone product. Desktops and laptops will have access to a legacy mode that allows to run legacy X clients against an on-demand rootless X server.
  • April 2014 – Complete convergence across the form factors is achieved, with Mir serving as the carrier across form factors.

That means Ubuntu 14.04 LTS will be the first release to fully take advantage of the new display server.

Thanks to Guillaume.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Categories: Graphics, Linux, Ubuntu Tags: kernel, mir, qml, qt, ubuntu, wayland, x11

Sailfish OS SDK Alpha Release Is Now Available for Linux

February 26th, 2013 No comments

Sailfish OS is a new mobile operating system based on the Qt platform that will soon end-up in mobile phone near you. Until now it was possible to build the SDK yourself, but it was pretty challenging since the documentation was lacking, as Jolla, the company behind Sailfish OS, focused on development. The good news is that you don’t need to build the SDK yourself anymore, since Jolla has just released Sailfish SDK Alpha for Linux 32-bit & 64-bit, and Windows & Mac OS versions will come later.

You’ll need a computer that meet the following requirements:

  • A host machine running a Linux operating system
  • Oracle’s VirtualBox version 4.1.18 or higher pre-installed on the host machine.
  • About 5GB of free disk space
  • 4GB of RAM or more is recommended
Sailfish OS UI Template

Sailfish OS UI Template

You can get started in two steps:

  1. Install the SDK – Download the 32 bit or 64 bit Linux installer. (~650 MB), change the permissions, and run it to complete the installation
  2. Run your first application – You can choose to start the IDE (Customized version of QtCreator) automatically right after the application, or launch it from a terminal window:
    ~/SailfishOS/bin/qtcreator

    Go to File-> New File or Project to start a new application based on a template that gives you a quick way to create your first Sailfish OS application. Detailed steps are available here.

Sailfish OS SDK is a collection of tools for developing Sailfish OS applications:

  • QtCreator integrated development environment (IDE)
  • Mer build engine for cross compilation
  • The Sailfish OS Emulator
  • Tutorial, Design and API Documentation
  • Repositories for additional libraries and open source code

If you’re used to develop Qt/QML applications for Symbian phones or other platforms (it seems most new mobile operating systems such as Ubuntu for Phone, Tizen,… are now using Qt/QML), you may feel comfortable developing apps for Sailfish because it makes use of familiar building blocks: Qt Quick, Qt Mobility 1.2, Qt Webkit 2.2. The SDK also adds “Sailfish Silica” QML module for Sailfish UI components.

For more information, check out sailfishos.org.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Qt on Embedded Systems – ELCE 2012

January 16th, 2013 No comments

Lars Knoll, chief maintainer for the Qt Project, gives a presentation about Qt on embedded systems, including a demo with the Raspberry Pi at the Embedded Linux Conference Europe 2012 in Barcelona, Spain.

Abstract:

Qt LogoFor well over 10 years, Qt has been used in many types of embedded devices, ranging from high-end medical systems, through mobile phones and smartphones, all the way to simple devices like coffee makers. This presentation will show some of the work that has been put in Qt throughout the years to support embedded devices, some of the challenges that the development team faced in order to bring a fully-featured desktop toolkit to resource-limited devices, along with solutions they came up with. Time permitting, the presenter will also show Qt demos running on an embedded device.

This session is intended for embedded application developers looking to make use of the capabilities of recent hardware, as well as decision makers looking for technology to enable their product solutions. The presenter is the Qt Chief Maintainer, having worked on and off embedded device development for a decade.

Here are the key sections of the talk:

  • Qt Introduction
  • A bit of Qt Embedded history – QWS, Qt Palmtop, Qtopia… used in industrial applications, VoIP phones,
  • Qt Quick – QML language, easy to bind and extend with C++
  • Project Lighthouse & Qt5
  • EGLFS & Wayland –  For graphics support. EGLFS: Great option for single process UIs if EGL and OpenGL is available. Wayland: Best solution for multi process environment, integrates with other frameworks
  • Qt Raspberry Pi Demo
  • Qt on Android

Presentation slides are not available for this talk, but you can download some other similar “Qt on Embedded Systems” slides for a speech by Lars given at Qt Developers Day Europe 2012.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Canonical Announces Ubuntu for Phones

January 3rd, 2013 4 comments

Canonical has just announced the Ubuntu for Phones platform that will allows users to have similar experience on desktops (Ubuntu Desktop),  TVs (Ubuntu TV) and smartphones, avoiding the need to learn 2 different platform for the desktop and mobile devices.

Ubuntu for PhonesThe user interface replaces the “Lock screen” with the “Welcome screen”  (As shown in the middle of the picture above), which shows notifications and user data as you turn on your device. The user interface mostly eliminate buttons, and you can access features by swiping the edge of the phone. A swipe on the left edge will show the dash bar, giving access to most used apps and dash search, a swipe on the right edge will cycle through your opened apps, a swipe at the top will give access to notifications and allow changing settings right from there, and a swipe at a button will allow you to customize controls. Global search is also part of the OS, as a single search will bring local and network search results.

The best way to experience the OS is to watch the virtual keynote by Mark Shuttleworth. In the first 5 minutes or so, he discusses they key milestones reached by Ubuntu on 2012, but the real discussion about Ubuntu for Phones takes place between 5:10 and 13:40.

I found this mobile OS pretty neat. From 13:40 onwards, some industry testimonies are shown, and some information is provided for developers. Ubuntu for Phone will support both Web/HTML5 apps and native apps written using QML/Javascript/C++ in Eclipse giving access to OpenGLES runtime. He explains that porting Web apps running in Android or iOS to Ubuntu should be straight forward. For native apps, you’ll need to install Qt 5 and Ubuntu QML toolkit preview. Developers can get further information on Ubuntu for Phones developers page.

Marc Shuttleworth said the platform would be truly open with the development following the processes used for Ubuntu desktop. There are 2 key markets for this new phone OS:

  • Enterprise. As companies may want to streamline their operations by using a single device to be used as a phone, thin client and desktop. Management should also be easier.
  • Consumer. For those who want a different user experience.

One last very interesting point brought by Marc Shuttleworth is that Ubuntu for Phones can work with Android kernel and drivers, which means if your phone can run Android, it can also run Ubuntu for Phones.

Arstechnica reports that although no carriers and handset makers were announced, Canonical is aiming for a phone to be released in Q4 2013/Q1 2014. If you have a Galaxy Nexus (based on TI OMAP 4460), you’ll be able to test Ubuntu for Phones on your device within a few weeks. Ubuntu 14.04 will be one image that works across phones, tablets, and desktops.

There will be several other Linux based mobile platforms (Tizen, Sailfish OS and Firefox OS) coming out this year, so we’ll have to see how this will pan out, but it should be pretty interesting.

Via: Liliputing

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Color Converter for Nokia Symbian Anna / Belle

January 9th, 2012 No comments

I’ve developed a small Qt Quick application called ColorConv that can convert RGB color to HEX color used in HTML pages (e.g. 255,255,255 -> #FFFFFF) and vice versa mainly to play with Qt Creator QML and test Nokia Ovi Store application submission process.

RGB to HEX Color Converter
HEX to RGB Color Converter

You can enter the Red, Green, Blue values manually by typing with the default numerical keypad in Symbian or use the slider to select the value. Alternatively you can enter the hexadecimal code to get the RGB value.

If you are interested, you can download it in Ovi Store and in case you have some requests please comment on the support page.

Nokia Ovi Store Submission Process

Nokia submission process is almost free (1 Euro) and it took about 2 weeks to get my application published. I basically followed the instructions given on submit Qt applications to the Ovi Store PDF.

The first thing you have to do is to register at Ovi Publish and pay 1 Euro.

You also need to ask for developer certificates and UID in order to be able to publish your application. It took about 48 hours to get the two certificate files (Developer Certificate Key Pair and Developer Certificate Installer) and 10 UID. I applied between Xmas and New Year, it may be even faster during the rest of the year.

After that you need to add the certificate files to your project, configure it to build the smart installer and change the UID in your .pro file.

After that you need to get proj_installer.sis, prepare some screenshots and logo and create a support page/website.

Then you go to Ovi Publish, create Content and follow all the instructions. Most of the time this is straightforward.  I selected all countries and all Symbian Anna/Belle smartphones. If for some reasons you need fast approval, you can target specific countries (avoid China) and limit the number of smartphones that need to be tested by QA.

Ovi Publish will inform you of the status of your app after your submission in case a critical part of your app fails QA (My support site failed) and when you app it getting published.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Categories: Uncategorized Tags: html, nokia, qml, qt, symbian

Qt Quick QML Digital Signage Demo Part 2

December 12th, 2011 4 comments

Following up on Qt Quick QML Digital Signage Demo Part 1, I’ve updated the digital signage demo to support the following:

  • Play 5 videos in a loop
  • Display 5 pictures in a loop where the picture is changed every 5 seconds
  • Use a (twitter) RSS feed for the scrolling text
Digital Signage Programmed with QtQuick/QML

QML Digital Signage Demo Screenshot

I initially planned to use QML to list the media files, but it is apparently not possible without using C/C++ and I may do it later on. So instead, I hard-coded the video and picture playlists in the QML files with the ListModel element. Videos are located in the video directory and pictures in the pic folder.

An index is needed to scroll thru the playlist, but QML does not support global variables, so I created a JavaScript file (globals.js) to store the video and picture index:

// Global variables in JavaScript file
var iVideoIndex = 0
var iPicIndex = 0

Then imported the script at the top of main.qml:

import "globals.js" as GlobalScript

Now the code to play 5 videos in a loop looks like:

Rectangle {
            id: video;
            width: 600;
            height: 432

            ListModel {
                    id: videoFiles
                     ListElement {
                             file: "video/video1.wmv"
                     }
                     ...
            }

            Video {
                id: videofile
                playing: true
                source: videoFiles.get(GlobalScript.iVideoIndex).file
                width: 600
                height: 432
                opacity: 0.9
                focus: true
                onStopped: { // To loop the video
                    source = videoFiles.get(GlobalScript.iVideoIndex).file
                    console.debug("Video: " + videoFiles.get(GlobalScript.iVideoIndex).file)
                    videofile.play()
                    GlobalScript.iVideoIndex =  (GlobalScript.iVideoIndex + 1) % 5;
                }

            }

I only used Windows Media (wmv), WebM and Mpeg video, as it seems the AVI and MP4 video I used made the emulator crash.

The picture zone uses a 5 files list (pic/pic1.jpg to pic/pic5.jpg) with a 5 second timer:

Rectangle {
            id: picture; width: 200; height: 432
            anchors.left: video.right
            ListModel {
                    id: picFiles
                     ListElement {
                             file: "pic/pic1.jpg"
                     }
                     ...
            }

            Image {
                source: picFiles.get(GlobalScript.iPicIndex).file
                Timer {
                    interval: 5000; // 5 Seconds
                    running: true;
                    repeat: true
                    onTriggered: {
                        parent.visible = false
                        parent.source = picFiles.get(GlobalScript.iPicIndex).file
                        parent.visible = true
                        console.debug("Picture: " + picFiles.get(GlobalScript.iPicIndex).file)
                        GlobalScript.iPicIndex =  (GlobalScript.iPicIndex + 1) % 5;
                    }
                }
            }

In the code above, I had to switch parent.visible between false and true or the picture would not be updated.

In the scrolling text zone, I used cnxsoft twitter feed, retrieved it, parsed it and displayed it with QML XmlListModel and ListView:

Rectangle {
            id: text
            width: 800; height: 48
            color: "blue"
            XmlListModel {
                 id: feedModel
                 source: "http://twitter.com/statuses/user_timeline/114751985.rss"
                 query: "/rss/channel/item"
                 XmlRole { name: "title"; query: "title/string()" }
            }
            ListView {
                 id: rss
                 width: 800; height: 48
                 model: feedModel
                 delegate: ScrollingText {
                     id:scrolltext
                     width: 800
                     height: 48
                     text: title // "Qt Quick Digital Signage Demo"
                 }
            }

Here’s what the Qt QML Digital Signage demo looks like when running in Qt Simulator (Nokia N900):

You can also download the source code (main.qml, ScrollingText.qml and global.js). You’ll need to create the video and pic directories in your project and add 5 videos and 5 pictures to test it.
The full QtQuick project is also available on Gitorious.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Qt Quick QML Digital Signage Demo Part 1

December 10th, 2011 No comments

I’ve recently started to play around with Qt and since I’d like to do a digital signage player running on Raspberry Pi, I’ve decided to try to make a simple digital signage demo application to evaluate the development platform.

Raspberry Pi Digital Signage

Screenshot of Digital Signage Demo Written with Qt Creator/QML

In Part 1, my goal was to make a 3 zones layout with a video zone, a picture zone and a scrolling text zone. I would just play one hard-coded media in each zone and the video and scrolling text would have to continuously loop.

I used Qt Creator to create  a “Pigital Signage” application (or should it be Πgital Signage ?).

To create the 3 zones I used the Gridview Element with 3 rectangles:

  • Video zone: 600×432
  • Picture zone: 200×432
  • Text zone: 800×48

Displaying the image is very easy with the Image Element:

Image {
    source: "pic/phone.jpg"
}

The video playback was also supposed to be easy with the Video Element but it can not work on Desktop, so I had to revert to used the Nokia N900 emulator to be able to play a short video (hence the 800×480 resolution of the demo).  It works fine but there is a transparency issue with the emulator (in my PC), so if I want to clearly see the video I have to open a black picture and move the emulator on top. Here’s the video playback code:

Video {
       id: videofile
       playing: true
       source: "video/Bear.wmv"
       width: 600
       height: 432
       opacity: 0.9
       focus: true
       onStopped: { /* To loop the video */
              videofile.play()
       }
}

The scrolling text should also have been easy since we can use  Webview  Element and html marquee, but I could not solve a problem with left and top margins that always left white border to the text zone.  Finally, I wrote the scrolling text code based on sample code provided by Kunal. I added a new file called ScrollingText.qml to the project:

import QtQuick 1.0

Item {
    id:marqueeText
    height: scrollingText.height
    clip: true
    property int tempX: marqueeText.width
    property alias text: scrollingText.text
    Text {
        x: tempX
        id:scrollingText
        color: "Yellow" /* Hard code text color for now */
        font.pixelSize: marqueeText.height - 6;
    }
    Timer {
        id:timer
        interval: 200; running: true; repeat: true
        onTriggered:{
            tempX = tempX - 5
            scrollingText.x = tempX;
            console.debug("Tempx = " + tempX + "Text Width = " + scrollingText.width, " Height = " + marqueeText.height)

            if( tempX < -scrollingText.width) {
                tempX = marqueeText.width;
                console.debug("Restart Scrolling Text")
            }
        }
    }
}

The code is modified to start scrolling the text from the right until it fully disappears on the left and continuously repeat it.

Here’s the full main.qml with the code for the 3 zones:

import QtQuick 1.0
import QtMultimediaKit 1.1
import QtWebKit 1.0

Rectangle {
    id: screen
    width: 800
    height: 480
    Grid {
        columns: 2
        spacing: 0

        Rectangle {
            id: video;
            color: "black";
            width: 600;
            height: 432
            Video {
                id: videofile
                playing: true
                source: "video/Bear.wmv"
                width: 600
                height: 432
                opacity: 0.9
                focus: true
                onStopped: { /* To loop the video */
                    videofile.play()
                }
            }
        }
        Rectangle {
            id: picture; width: 200; height: 432
            anchors.left: video.right
            Image {
                source: "pic/phone.jpg"
            }
        }
        Rectangle {
            id: text
            width: 800; height: 48
            color: "blue"
            ScrollingText {
                id:scrolltext
                width: 800
                height: 48
                text: "Qt Quick Digital Signage Demo"
            }
/* Method 2: Webview (issue with white border)
            WebView {
                    width: 800; height: 48
                    preferredWidth: 800; preferredHeight: 46
                    anchors.top: video.bottom
                    // Marquee code generated with http://www.quackit.com/html/html_generators/html_marquee_generator.cfm
                    html: "<style type=\"text/css\">
                    .html-marquee {height:48px;width:800px;background-color:3333FF;font-family:Verdana;font-size:24pt;color:FFFF33;font-weight:bold;}
                    </style>
                    <marquee class=\"html-marquee\" direction=\"left\" behavior=\"scroll\" scrollamount=\"6\" >Qt Quick Digital Signage Demo</marquee>"
             } */
        }
    }
}

In order for QtMultimediaKit to work properly, you also need to modify PigitalSignage.Pro since it is part of QtMobility:

CONFIG += mobility
MOBILITY += multimedia

Developing with Qt Creator and QML language seems relatively straightforward as this short demo could be written in one afternoon.

I’m not sure Qt 5 Video Element will be supported for the Raspberry Pi so QML Binding Element may have to be used to call an external video player that support R-Pi GPU.

In Part 2, I plan to list video and pictures file in a directory and play them continuously. For the scrolling text, the plan is to use a (twitter) RSS feed, scroll it and reload it each time the scroll is finished. I may also try to play online video (e.g. YouTube) and parse a config file to configure things like picture display duration, text color and scrolling speed etc…

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter