Difference between revisions of "Template:FriendlyCoreRK3399QtDev"

From FriendlyELEC WiKi
Jump to: navigation, search
(Develop Qt Application)
(Qt 双USB摄像头示例)
 
(7 intermediate revisions by 2 users not shown)
Line 62: Line 62:
 
* 2:Setup a local cross-compiler. You need to run a Ubuntu 18.04 64-bit OS and you can refer to :[[How to Build and Install Qt Application for FriendlyELEC Boards/zh]]
 
* 2:Setup a local cross-compiler. You need to run a Ubuntu 18.04 64-bit OS and you can refer to :[[How to Build and Install Qt Application for FriendlyELEC Boards/zh]]
  
====Qt示例演示====
+
====Qt Demo====
FriendlyCore系统内置了几个很有特色的Qt演示程序,方便测试Qt5的特性,下面分别介绍它们:
+
FriendlyCore has several Qt demo programs:
* <b>Qt QML示例:CinematicExperience</b>
+
* <b>Qt QML: CinematicExperience</b>
CinematicExperience是一个用Qt QML实现的影片选择界面。<br />
+
CinematicExperience is a utility for selecting a video file and it is developed with Qt QML.<br />
该例子使用了Qt QML中的界面动态转换、粒子模拟和着色器特效,所以这个示例能体现RK3399的硬件性能与软件优化,在RK3399平台上非常流畅。<br />
+
This demo uses Qt QML's various features and runs very smoothly on RK3399. This performance is achieved by hardware and software optimization.<br />
在命令行执行以下命令启动该示例:<br />
+
You can start it in a commandline utility by running the following commands:<br />
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
cd /opt/Qt5_CinematicExperience
 
cd /opt/Qt5_CinematicExperience
 
./run.sh
 
./run.sh
 
</syntaxhighlight>
 
</syntaxhighlight>
界面如下所示:<br />
+
Here is what it looks like:<br />
 
[[File:Cinematicsexperience.jpg|frameless|480px]]<br />
 
[[File:Cinematicsexperience.jpg|frameless|480px]]<br />
  
* <b>QQt WebEngine示例:网页浏览器</b>
+
* <b>QQt WebEngine: web browser</b>
Qt WebEngine使用了Chromium作为渲染引挚,对HTML5支持完美。<br />
+
Qt WebEngine uses Chromium and supports HTML5.<br />
示例展示的网页浏览器是 Qt5 自带的Demo,运行命令如下:<br />
+
You can start it by running the following commands:<br />
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
cd /opt/qt5-brower
 
cd /opt/qt5-brower
Line 83: Line 83:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
界面如下所示:<br />
+
Here is what it looks like:<br />
 
[[File:qt5-brower.jpg|frameless|480px]]<br />
 
[[File:qt5-brower.jpg|frameless|480px]]<br />
  
注:Qt WebEngine在FriendlyCore平台上需要使用Xcb插件来运行。
+
Note:Qt WebEngine depends on the Xcb plug-in.
  
* <b>Qt 双屏异显示例</b>
+
* <b>Qt Different Display</b>
这是一个比较简单的DEMO,演示了在同时连接HDMI和eDP LCD屏的情况下,用Qt实现两个屏幕显示不同的内容, 用以下命令启动:
+
This demo shows that when a board is connected to an HDMI monitor and an eDP LCD these two devices display differently. You can start it by running the following commands:
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
cd /opt/qt5-multi-screen-demo
 
cd /opt/qt5-multi-screen-demo
 
./run.sh
 
./run.sh
 
</syntaxhighlight>
 
</syntaxhighlight>
双屏异显的效果如下所示:<br />
+
Here is what it looks like:<br />
 
[[File:qt5-multi-screen.jpg|frameless|480px]]<br />
 
[[File:qt5-multi-screen.jpg|frameless|480px]]<br />
  
* <b>Qt Multimedia: 硬解播放器qt5-player</b>
+
* <b>Qt Multimedia: qt5-player with hard decoding</b>
qt5-player播放器已经适配Rockchip的gstreamer插件,支持4K视频的硬解播放,由于Rockchip提供的插件只支持输出图像到X11窗口,因此 Qt 播放器程序需要使用 XCB 的显示插件来运行。<br />
+
The qt5-player works with Rockchip's gstreamer plug-in and supports 4K video playing. Since Rockchip's plug-in only supports output images to an X11 window the qt5-player needs to use XCB for display.<br />
在命令行执行以下命令启动该示例:<br />
+
You can start the demo by running the following commands:<br />
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
cd /opt/qt5-player
 
cd /opt/qt5-player
 
./run.sh
 
./run.sh
 
</syntaxhighlight>
 
</syntaxhighlight>
播放器的界面如下所示,可以设置全屏播放,也可以调节音量:<br />
+
Here is what it looks like. You can set it to display in full-screen and adjust the voice's volume:<br />
 
[[File:qt5-player.gif|frameless|480px]]<br />
 
[[File:qt5-player.gif|frameless|480px]]<br />
  
* <b>Qt WebGL示例: nmapper</b>
+
* <b>Qt WebGL demo: nmapper</b>
Qt WebGL允许你在其他设备的网页游览器查看并远程操作运行在开发板上的Qt程序,这个特性使得实现远程控制变得简单。<br />
+
Qt WebGL allows you to remotely access a Qt program running on your board.<br />
在运行示例之前,你的开发板需要先连接网络,然后在开发版本执行以下命令:<br />
+
Before you run the demo you need to connect your board to the internet and run the following commands:<br />
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
cd /opt/qt5-nmapper
 
cd /opt/qt5-nmapper
 
./run-with-webgl.sh
 
./run-with-webgl.sh
 
</syntaxhighlight>
 
</syntaxhighlight>
然后在电脑或者手机上打开网页游览器,在浏览器的地址栏输入开发板的IP地址,应该就能看到Qt界面了,效果如下所示:<br />
+
You can open a browser on another device, type the IP address of your board on the browser's address bar, enter and you will be able to see a Qt GUI. Here is what it looks like:<br />
 
[[File:qtwebgl.gif|frameless|480px]]<br />
 
[[File:qtwebgl.gif|frameless|480px]]<br />
  
* <b>Qt VNC示例: 智能家居控制界面</b>
+
* <b>Qt VNC demo: Smart home applicance GUI</b>
Qt VNC允许你将一个应用程序以VNC Server的形式运行,在其他设备上可以使用VNC Client来连接和控制,用QtWidgets或者QML编写的应用都是支持的。<br />
+
Qt VNC allows you to run a program as a VNC Server on your board and you can access the program from a VNC client on another device. This program can be developed with either QtWidgets or QML.<br />
执行以下命令启动:<br />
+
You can start it by running the following commands:<br />
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
cd /opt/qt5-smarthome
 
cd /opt/qt5-smarthome
 
./run-with-vnc.sh
 
./run-with-vnc.sh
 
</syntaxhighlight>
 
</syntaxhighlight>
然后在电脑或者手机上安装并打开VNC viewer软件,输入开发板的IP地址加端口号5900,例如开发板的地址是192.168.1.100,就输入192.168.1.100:5900,连接后应该就能看到界面了,如下图所示:<br />
+
Start a VNC viewer on a smart phone or mobile device and type your board's IP address and port number 5900. For instance if your board's IP address is 192.168.1.100 you can type "192.168.1.100:5900", enter and you will see the following GUI:<br />
 
[[File:qt5smarthomevnc.png|frameless|480px]]<br />
 
[[File:qt5smarthomevnc.png|frameless|480px]]<br />
 +
 +
====Play with Dual Cameras under Qt====
 +
This sample shows how to connect dual cameras to the board and play with them. Before run the sample make sure you connect dual cameras and an LCD to your board. In general popular UVC cameras should work however we suggest users use the following modules which we have tested:<br />
 +
::{| class="wikitable"
 +
|-
 +
|Index||Model     
 +
|-
 +
|1  ||  Logitech C270 
 +
|-
 +
|2  ||  Logitech C270i
 +
|-
 +
|3  ||  Logitech C922 Pro
 +
|}
 +
Run the following commands:<br />
 +
<syntaxhighlight lang="bash">
 +
cd /opt/dual-camera
 +
./run.sh
 +
</syntaxhighlight>
 +
Here is what you expect to observe:<br />
 +
[[File:qt5dualcamera.jpg|frameless|480px]]<br />

Latest revision as of 06:31, 10 October 2018

1 Develop Qt Application

The Qt 5.10.0 FriendlyELEC ported for RK3399 supports the following plug-ins:KMS, EGLFS and XCB. All these three plug-ins support OpenGL ES and GPU hardware acceleration but in different ways:

  • KMS - it calls Linux kernel's DRM interface to display
  • EGLFS - it calls OpenGL ES interface to display
  • XCB - it runs on X11 server and is integrated in X11 windows system


Three plug-ins support different Qt features and here is a table:

Plug-in OpenGL ES QtWebEngine QtMultimedia Video Playing with Hardware Decoding Different Display
KMS Yes No Yes No Yes
EGLFS Yes No Yes No No
XCB Yes Yes Yes Yes Yes

We recommend to use KMS or XCB.

FriendlyCore has four scripts for setting Qt environmental variables for users and here is a table:

Script Comment
/usr/bin/setqt5env-kms set kms' environmental variables
/usr/bin/setqt5env-eglfs set eglfs' environmental variables
/usr/bin/setqt5env-xcb set xcb's environmental variables
/usr/bin/setqt5env-nogui set environmental variables for a system without a Qt GUI

For instance, if you want to use KMS to display you can run the following commands:

. setqt5env-kms
./apps

(Note:there is a space between '.' and 's')

1.1 Setup Qt Development Envronment

FriendlyELEC developed two methods for RK3399 to cross-compile a Qt program:

1.2 Qt Demo

FriendlyCore has several Qt demo programs:

  • Qt QML: CinematicExperience

CinematicExperience is a utility for selecting a video file and it is developed with Qt QML.
This demo uses Qt QML's various features and runs very smoothly on RK3399. This performance is achieved by hardware and software optimization.
You can start it in a commandline utility by running the following commands:

cd /opt/Qt5_CinematicExperience
./run.sh

Here is what it looks like:
Cinematicsexperience.jpg

  • QQt WebEngine: web browser

Qt WebEngine uses Chromium and supports HTML5.
You can start it by running the following commands:

cd /opt/qt5-brower
./run.sh

Here is what it looks like:
Qt5-brower.jpg

Note:Qt WebEngine depends on the Xcb plug-in.

  • Qt Different Display

This demo shows that when a board is connected to an HDMI monitor and an eDP LCD these two devices display differently. You can start it by running the following commands:

cd /opt/qt5-multi-screen-demo
./run.sh

Here is what it looks like:
Qt5-multi-screen.jpg

  • Qt Multimedia: qt5-player with hard decoding

The qt5-player works with Rockchip's gstreamer plug-in and supports 4K video playing. Since Rockchip's plug-in only supports output images to an X11 window the qt5-player needs to use XCB for display.
You can start the demo by running the following commands:

cd /opt/qt5-player
./run.sh

Here is what it looks like. You can set it to display in full-screen and adjust the voice's volume:
Qt5-player.gif

  • Qt WebGL demo: nmapper

Qt WebGL allows you to remotely access a Qt program running on your board.
Before you run the demo you need to connect your board to the internet and run the following commands:

cd /opt/qt5-nmapper
./run-with-webgl.sh

You can open a browser on another device, type the IP address of your board on the browser's address bar, enter and you will be able to see a Qt GUI. Here is what it looks like:
Qtwebgl.gif

  • Qt VNC demo: Smart home applicance GUI

Qt VNC allows you to run a program as a VNC Server on your board and you can access the program from a VNC client on another device. This program can be developed with either QtWidgets or QML.
You can start it by running the following commands:

cd /opt/qt5-smarthome
./run-with-vnc.sh

Start a VNC viewer on a smart phone or mobile device and type your board's IP address and port number 5900. For instance if your board's IP address is 192.168.1.100 you can type "192.168.1.100:5900", enter and you will see the following GUI:
Qt5smarthomevnc.png

1.3 Play with Dual Cameras under Qt

This sample shows how to connect dual cameras to the board and play with them. Before run the sample make sure you connect dual cameras and an LCD to your board. In general popular UVC cameras should work however we suggest users use the following modules which we have tested:

Index Model
1 Logitech C270
2 Logitech C270i
3 Logitech C922 Pro

Run the following commands:

cd /opt/dual-camera
./run.sh

Here is what you expect to observe:
Qt5dualcamera.jpg