I compiled and installed QtWebEngine + QML plugins on Raspberry Pi 2 with Yocto recipes using information in this tutorial using Yocto dizzy branch and run the following script:
root#raspberrypi2:~# more chromium.qml
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 0.9
ApplicationWindow {
width: 1280
height: 720
color: "lightgray"
visible: true
WebEngineView {
id: webview
url: "file:///home/root/hello.html"
anchors.fill: parent
}
}
Note that the IMPORT VERSION 0.9, not 1.0
I have tried both url: "file:///home/root/hello.html" and url: "https://duckduckgo.com" but all I am getting is a red screen with the black square mouse pointer.
root#raspberrypi2:~# more hello.html
<html>
<header><title>This is title</title></header>
<body>
Hello world
</body>
</html>
On the console:
root#raspberrypi2:~# /usr/bin/qt5/qmlscene -v -platform eglfs chromium.qml
[0605/163256:WARNING:resource_bundle.cc(280)] locale_file_path.empty()
[0605/163257:WARNING:proxy_service.cc(890)] PAC support disabled because there is no system implementation
[0605/163257:WARNING:resource_bundle.cc(280)] locale_file_path.empty()
PAC support disabled ... seems to be a none issue read here
UPDATE
I have followed this step-by-step tutorial (Poky fido branch) and then added qtwebengine (import QtWebEngine 1.0 this time) and qtwebengine-qmlplugins in my Yocto Image and created again my image with bitbake
When I booted and ran /usr/bin/qt5/qmlscene -v -platform eglfs chromium.qml I could see my HTML page.
I have tested a couple of dozen of websites and not all page show. So their might be a little more to it.
e.g.
http://wikipedia.com shows!!!
http://google.com doesn't show ???
http://https://stackoverflow.com/ shows!!!
http://facebook.com doesn't
Any further pointers are welcome
UPDATE 20160309
root#raspberrypi2:~/app# uname -a
Linux raspberrypi2 4.1.10 #1 SMP PREEMPT Wed Feb 17 16:51:44 CET 2016 armv7l GNU/Linux
root#raspberrypi2:~/app# lsb_release -a
LSB Version: core-4.1-noarch:core-4.1-arm
Distributor ID: poky
Description: Poky (Yocto Project Reference Distro) 2.0.1
Release: 2.0.1
Codename: jethro
QML
root#raspberrypi2:~/app# more chromium.qml
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 1.0
ApplicationWindow {
width: 800
height: 600
color: "lightgray"
visible: true
WebEngineView {
id: webview
//url: "http://raspberrypi.stackexchange.com/" // PASS
//url: "http://google.com" // FAIL
//url: "http://video.webmfiles.org/big-buck-bunny_trailer.webm" // PASS but no Sound
//url: "https://youtube.com/" // FAIL
//url: "https://opentokrtc.com/anybots" // FAIL
//url: "http://speedof.me/" // PASS
url: "http://facebook.com" // FAIL
anchors.fill: parent
}
}
Maybe it is a little late but I tried to build QtWebEngine in Qt 5.6 alpha and it works properly for me on Raspberry Pi 2 for all the URLs you listed. This is a demo. Maybe they fixed something in QtWebEngine, so you can try 5.6-alpha.
Unfortunately, the branch jethro for meta-qt5 the qtwebengine caused many problems.
I was happy to see that in this branch master with chromium 45:
Branch jethro:
QT_MODULE BRANCH CHROMIUM = "40.0.2214-based"
Branch master:
QT_MODULE BRANCH CHROMIUM = "45-based"
I will try to build;)
Related
I'm using the Intellij IDE for Kotlin. I was trying the compose UI tutorial and when I ran a basic program I get this message 'Failed to choose DirectX12 Adapter. The window opens and appears to be working. What do I need to do to choose the adapter?
import androidx.compose.material.MaterialTheme
import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
#Composable
#Preview
fun App() {
var text by remember { mutableStateOf("Hello, World!") }
MaterialTheme {
Button(onClick = {
text = "Hello, Desktop!"
}) {
Text(text)
}
}
}
I used the dxdiag command and it appears DirectX 12 is installed.
System Information
Time of this report: 2/9/2023, 22:18:43
Machine name: DESKTOP-JQ7CR2F
Machine Id: {B31A9997-C49B-4C8D-84B7-67A3C21C6D33}
Operating System: Windows 10 Home 64-bit (10.0, Build 19044) (19041.vb_release.191206-1406)
Language: English (Regional Setting: English)
System Manufacturer: To Be Filled By O.E.M.
System Model: To Be Filled By O.E.M.
BIOS: BIOS Date: 07/27/15 17:53:10 Ver: 04.06.05 (type: BIOS)
Processor: Intel(R) Core(TM) i5-4590 CPU # 3.30GHz (4 CPUs), ~3.3GHz
Memory: 8192MB RAM
Available OS Memory: 8128MB RAM
Page File: 14425MB used, 8359MB available
Windows Dir: C:\Windows
DirectX Version: DirectX 12
DX Setup Parameters: Not found
User DPI Setting: 96 DPI (100 percent)
System DPI Setting: 96 DPI (100 percent)
DWM DPI Scaling: Disabled
Miracast: Not Available
Microsoft Graphics Hybrid: Not Supported
DirectX Database Version: 1.0.8
DxDiag Version: 10.00.19041.2075 64bit Unicode
DxDiag Notes
Display Tab 1: No problems found.
Display Tab 2: No problems found.
Sound Tab 1: No problems found.
Sound Tab 2: No problems found.
Sound Tab 3: No problems found.
Sound Tab 4: No problems found.
Input Tab: No problems found.
DirectX Debug Levels
Direct3D: 0/4 (retail)
DirectDraw: 0/4 (retail)
DirectInput: 0/5 (retail)
DirectMusic: 0/5 (retail)
DirectPlay: 0/9 (retail)
DirectSound: 0/5 (retail)
DirectShow: 0/6 (retail)
Display Devices
Card name: NVIDIA GeForce 210
Manufacturer: NVIDIA
Chip type: GeForce 210
DAC type: Integrated RAMDAC
Device Type: Full Device (POST)
Device Key: Enum\PCI\VEN_10DE&DEV_0A65&SUBSYS_082E196E&REV_A2
Device Status: 0180200A
The same approach using stylesheet works normally
Environment
System:
OS: macOS 11.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU # 2.60GHz
Memory: 1.03 GB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v16.6.0/bin/yarn
npm: 6.14.4 - ~/Projects/design-system/typography/node_modules/.bin/npm
Watchman: 2021.09.13.00 - /usr/local/bin/watchman
npmPackages:
styled-components: 5.1.0 => 5.1.0
Reproduction
import React from 'react';
import styled from 'styled-components/native';
import { View } from 'react-native';
const CustomText = styled.Text(({ theme }) => ({
fontFamily: 'Zapf Humanist 601',
}));
export default App = () => (
<View>
<CustomText>Your Text<CustomText>
</View>
);
Steps to reproduce
Copy ZapfHumanist601BT-Roman.ttf in your fonts folder (./src/assets/fonts)
Make a link font using npx react-native link
Apply a linked font in your text component
Expected Behavior
The font is expected to be applied in the style
Actual Behavior
Error: Failed to parse declaration "fontFamily: Zapf Humanist 601"
The font-weight property will not work fine in this situation.
You can put your fonts in src/assets/fonts directory:
src
|_ assets
|_ Montserrat-Bold.ttf
|_ Montserrat-Regular.ttf
// and so on for the rest of fonts file
And define the assets properties in the react-native.config.js file which is at the root of your project in this way:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};
Now, you can use the fonts in the styles like this (without define the weight property):
title : {
fontFamily: Montserrat-Regular
}
I am using Qt Opensource 5.10.0 with Qt Creator 4.5.0 based on ArchLinux 64bit. and the docs for ApplicationWindow states it requires QtQuick.Controls 1.4:
import QtQuick 2.10
import QtQuick.Controls 1.4
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
} // ApplicationWindow
which compiles and runs ok. Now, I want to add SwipeView to upper ApplicationWindow, however QtQuickControls 1.4 does not recognize it, as it also states in SwipeView's docs and requires import QtQuick.Controls 2.3, so if I let import QtQuick.Controls 1.4 in main.qml:
import QtQuick 2.10
import QtQuick.Controls 1.4
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
SwipeView
{
} // SwipeView
} // ApplicationWindow
I get error:
Starting /mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:15 SwipeView is not a type
/mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12 exited with code 255
and if use import QtQuick.Controls 2.3:
import QtQuick 2.10
import QtQuick.Controls 2.3
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
SwipeView
{
} // SwipeView
} // ApplicationWindow
I get following error:
Starting /mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:11 Cannot assign to non-existent property "toolBar"
/mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12 exited with code 255
Now, if I include both imports:
import QtQuick 2.10
import QtQuick.Controls 1.4
import QtQuick.Controls 2.3
ApplicationWindow
{
width: 640
height: 480
visible: true
toolBar: ToolBar
{
} // ToolBar
SwipeView
{
} // SwipeView
} // ApplicationWindow
I still get:
Starting /mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12...
QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:12 Cannot assign to non-existent property "toolBar"
/mnt/projects/build-test12-Desktop_Qt_5_10_0_GCC_64bit-Debug/test12 exited with code 255
as in second case.
The first error is logical, since in version 1.4 there was not SwipeView, however, why QtQuick.Controls 2.3 does not recognize ApplicationWindow's member/property ApplicationWindow.toolbar in second case?
Ok, this duality arose from the fact that there are 2 ApplicationWindow, one came from import QtQuick.Controls 1.4 and the second one come from import QtQuick.Controls 2.3. The new one have no toolBar so you get the error.
If you still want to use the old one you can use aliasing as following:
import QtQuick.Controls 1.4 as Old
Old.ApplicationWindow {
toolBar: ToolBar
{
}
}
or you should use ApplicationWindow.header instead in the new one:
ApplicationWindow {
header: TabBar {
// ...
}
}
I don't know why Qt changed the name from toolBar to header. For me it looks illogical.
After installing PyQt5.5.1 together with Qt5.5.1 on my Ubuntu 14.04 successfully, I ran my simple pyqt file using QtQuick and met this error:
libQt5Network.so.5: undefined symbol: _Z24qt_subtract_from_timeoutii
Anyone has run into this before?
Thanks.
Python.py:
# Main Function
if __name__ == '__main__':
# Create main app
myApp = QApplication(sys.argv)
# Create a label and set its properties
appLabel = QQuickView()
appLabel.setSource(QUrl('basic.qml'))
# Show the Label
appLabel.show()
# Execute the Application and Exit
myApp.exec_()
sys.exit()
Basic.qml:
Grid {
id: colorPicker
rows: 2; columns: 3; spacing: 3
Rectangle { color: "white";}
Rectangle { color: "green";}
Rectangle { color: "blue"; }
Rectangle { color: "yellow";}
Rectangle { color: "steelblue";}
Rectangle { color: "black";}
}
The reason is i also installed python-Qt5, which is based on older Qt5 version.
With
find / -name libQt*
I could see some old qt lib residing in /usr/lib folder:
/usr/lib/i386-linux-gnu/libQt5Network.so
/usr/lib/i386-linux-gnu/libQt5Network.so.5
/usr/lib/i386-linux-gnu/libQt5Network.so.5.2
/usr/lib/i386-linux-gnu/libQt5Network.so.5.2.1
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5.5
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5.5.1
/home/tad/Qt5.5.1/gcc/lib/libQt5Network.so.5
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5.5.1
/home/tad/Qt5.5.1/Tools/QtCreator/lib/qtcreator/libQt5Network.so.5
The problem maybe inconsistent qt libs, so I remove all qt libs in /usr/lib and replace them with the ones in my home folder. It worked!However this is not recommended since some built-in Ubuntu components may use libQt* in /usr/lib folders. So, just remove python-qt5 and reinstall pyqt5 all over again!
By the way, for the error relating to Sip API version, we just have to run to remove all sip-related packages then reinstall sip again:
dpkg -l | grep sip
then
sudo apt-get purge python3-sip python3-sip-dev
I create a QtQuick app and replace the main.qml with the code below. I try to show all files and dirs in my home path in a Mac OS X system. But nothing shows up. How can I figure out what I did wrong?
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 2.1
ApplicationWindow {
visible: true
title: "Test"
width: 200
height: 400
ListView {
anchors.fill: parent
FolderListModel {
id: folderModel
showDirs: true
showDirsFirst: true
rootFolder: "file:///Users/enderson"
nameFilters: ["*.*"]
}
Component {
id: fileDelegate
Text { text: fileName }
}
model: folderModel
delegate: fileDelegate
}
}
b.t.w.:
Qt5.5
and .pro file:
TEMPLATE = app
QT += qml quick widgets
SOURCES += main.cpp \
UiBridge.cpp
RESOURCES += qml.qrc
LIBS += -framework CoreFoundation -framework Foundation
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Default rules for deployment.
include(deployment.pri)
I found the problem. Using rootFolder is wrong. Use 'folder' property like below
folder: "file:///Users/enderson"