python-3.xqtqmlpyside6
Module not found even after installing it in Qt QML 6.2.4
I am making a Python application in QML with following env:
- OS: Ubuntu 22.04 LTS
- IDE: Qt Creator 9.0.2
- Qt 6.2.4
- Python 3.10.6
To further check I also made a qmake query according to Qt Forums and the output was:
QT_SYSROOT:
QT_INSTALL_PREFIX:/media/raghav/Apps/Qt/6.2.4/gcc_64
QT_INSTALL_ARCHDATA:/media/raghav/Apps/Qt/6.2.4/gcc_64
QT_INSTALL_DATA:/media/raghav/Apps/Qt/6.2.4/gcc_64
QT_INSTALL_DOCS:/media/raghav/Apps/Qt/Docs/Qt-6.2.4
QT_INSTALL_HEADERS:/media/raghav/Apps/Qt/6.2.4/gcc_64/include
QT_INSTALL_LIBS:/media/raghav/Apps/Qt/6.2.4/gcc_64/lib
QT_INSTALL_LIBEXECS:/media/raghav/Apps/Qt/6.2.4/gcc_64/libexec
QT_INSTALL_BINS:/media/raghav/Apps/Qt/6.2.4/gcc_64/bin
QT_INSTALL_TESTS:/media/raghav/Apps/Qt/6.2.4/gcc_64/tests
QT_INSTALL_PLUGINS:/media/raghav/Apps/Qt/6.2.4/gcc_64/plugins
QT_INSTALL_QML:/media/raghav/Apps/Qt/6.2.4/gcc_64/qml
QT_INSTALL_TRANSLATIONS:/media/raghav/Apps/Qt/6.2.4/gcc_64/translations
QT_INSTALL_CONFIGURATION:
QT_INSTALL_EXAMPLES:/media/raghav/Apps/Qt/Examples/Qt-6.2.4
QT_INSTALL_DEMOS:/media/raghav/Apps/Qt/Examples/Qt-6.2.4
QT_HOST_PREFIX:/media/raghav/Apps/Qt/6.2.4/gcc_64
QT_HOST_DATA:/media/raghav/Apps/Qt/6.2.4/gcc_64
QT_HOST_BINS:/media/raghav/Apps/Qt/6.2.4/gcc_64/bin
QT_HOST_LIBEXECS:/media/raghav/Apps/Qt/6.2.4/gcc_64/libexec
QT_HOST_LIBS:/media/raghav/Apps/Qt/6.2.4/gcc_64/lib
QMAKE_SPEC:linux-g++
QMAKE_XSPEC:linux-g++
QMAKE_VERSION:3.1
QT_VERSION:6.2.4
And below is my QML code:
import "../../widgets"
import QtQuick 2.15
import QtQuick.Layouts 6.0
import QtQuick.Controls 2.15
import QtWebView 1.1
Item{
id: settings_app
width: 1024 ;height: 600
/*
Image {
id: settings_bg
anchors.fill: parent
source: "../../wallpapers/sunset flowers.png"
fillMode: Image.PreserveAspectCrop
}
*/
Component.onCompleted: {
settingsApp.showName()
}
RowLayout {
id: settings_layout
anchors.fill: parent
spacing: 0
Rectangle {
id: side_menu
width: 200
height: 200
color: "#262626"
Layout.maximumWidth: 300
Layout.minimumWidth: 300
Layout.fillHeight: true
ColumnLayout {
id: side_menu_layout
anchors.fill: parent
spacing: 0
ColumnLayout {
id: side_menu_layout_up
height: 100
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
spacing: 0
Layout.maximumHeight: 200
Layout.minimumHeight: 200
Layout.fillWidth: true
WebView{
id: userImg
url: ('qrc:/files/widgets/Circular Image/CircularImage.html')
Layout.fillHeight: true
Layout.fillWidth: true
}
}
ColumnLayout {
id: side_menu_layout_down
width: 100
height: 100
spacing: -20
Layout.topMargin: 30
Layout.maximumHeight: 370
Layout.minimumHeight: 370
Layout.fillHeight: true
Layout.fillWidth: true
MenuOption {
id: option_account
Layout.fillWidth: true
Layout.leftMargin: 20
btnText: "Account"
btnIcon: "qrc:/Icons/icons/account.png"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
btnColor: "transparent"
btnIconHeight: 32
btnIconWidth: 32
MouseArea{
anchors.fill: option_account
onClicked: {
option_account.btnColor = "#1f2021"
settings_loader.source = "./AccountPage.qml"
}
}
}
MenuOption {
id: option_system
Layout.leftMargin: 20
Layout.fillWidth: true
btnText: "Notifications"
btnIcon: "qrc:/Icons/icons/monitor.png"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
btnColor: "transparent"
btnIconHeight: 32
btnIconWidth: 32
MouseArea{
anchors.fill: option_system
onClicked: {
option_system.btnColor = "#1f2021"
settings_loader.source = "./AccountPage.qml"
}
}
}
MenuOption {
id: option_devices
Layout.leftMargin: 20
Layout.fillWidth: true
btnText: "Devices"
btnIcon: "qrc:/Icons/icons/cdevices.png"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
btnColor: "transparent"
btnIconHeight: 32
btnIconWidth: 32
MouseArea{
anchors.fill: option_devices
onClicked: {
option_devices.btnColor = "#1f2021"
settings_loader.source = "./AccountPage.qml"
}
}
}
MenuOption {
id: option_security
Layout.leftMargin: 20
Layout.fillWidth: true
btnText: "Security"
btnIcon: "qrc:/Icons/icons/protect.png"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
btnColor: "transparent"
btnIconHeight: 32
btnIconWidth: 32
MouseArea{
anchors.fill: option_security
onClicked: {
option_security.btnColor = "#1f2021"
settings_loader.source = "./AccountPage.qml"
}
}
}
MenuOption {
id: option_help
Layout.leftMargin: 20
Layout.fillWidth: true
btnText: "Help"
btnIcon: "qrc:/Icons/icons/info.png"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
btnColor: "transparent"
btnIconHeight: 32
btnIconWidth: 32
MouseArea{
anchors.fill: option_help
onClicked: {
option_account.btnColor = "#1f2021"
settings_loader.source = "./AccountPage.qml"
}
}
}
}
}
}
ColumnLayout {
id: main_container_layout
width: 100
height: 100
Layout.maximumHeight: 600
Layout.minimumHeight: 600
Layout.fillHeight: true
Layout.maximumWidth: 774
Layout.minimumWidth: 774
Layout.fillWidth: true
spacing: 0
Loader {
id: settings_loader
width: 200
height: 200
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
Connections{
target: settingsApp
function onChangeDisplayName(stringText){
displayName.text = stringText
}
}
}
The main use of WebView in this application is to display an html page which contains a circular image as I am unable to make it in QML. Well, if their is any solution to go with QML itself please suggest. I tried many solution from the Qt Forum but they didn't work.
Solution
You can get a circular image by using Qt5Compat.GraphicalEffects OpacityMask. The source is the image and the mask is a Rectangle with a radius that makes it a circle. Have a look at the documentation.
Item {
width: 400
height: 400
Image {
id: image
source: "https://picsum.photos/id/63/400/400"
visible: false
}
Rectangle {
id: mask
width: parent.width
height: parent.height
radius: Math.min(parent.width, parent.height) / 2
visible: false
}
OpacityMask {
anchors.fill: image
source: image
maskSource: mask
}
}
