FontAwesome not working in mac app using QT and QML - qt

I've included on my QT project the fontawesome font:
This one https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started
The problem is that it works well with windows system but not in MAC.
Below i'm going to show a sample app with all the code to illustrate the problem:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
QFile res2(":/resources/fonts/Font Awesome 5 Free-Solid-900.otf");
QFile res3(":/resources/fonts/Font Awesome 5 Free-Regular-400.otf");
QFile res4(":/resources/fonts/Font Awesome 5 Brands-Regular-400.otf");
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
main.qml
import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
FontLoader { id: fontAwesomeSolid; source: "fonts/Font Awesome 5 Free-Solid-900.otf" }
FontLoader { id: fontAwesomeRegular; source: "fonts/Font Awesome 5 Free-Regular-400.otf" }
FontLoader { id: fontAwesomeBrands; source: "fonts/Font Awesome 5 Brands-Regular-400.otf" }
Button {
id:buttonAbout
anchors.right: parent.right
anchors.rightMargin: 10
anchors.bottomMargin: 0
width:15
height: 15
text: "\uf129"
font.family: fontAwesomeRegular.name
contentItem: Text {
anchors.fill:buttonAbout
anchors.right:buttonAbout.right
anchors.bottomMargin: 3
text: buttonAbout.text
font: buttonAbout.font
color: "black"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
background:
Rectangle{
width:15
height: 15
anchors.top:parent.top
anchors.right: parent.right
radius:10
border.width: 1
border.color:"gray"
}
onClicked: popup.open()
}
Popup {
id: popup
x: 100
y: 100
width: 200
height: 300
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.close()
}
}
I've created a new .qrc file where i added the folder fonts of fontawesome
Font Awesome 5 Free-Solid-900.otf
Font Awesome 5 Free-Regular-400.otf
Font Awesome 5 Brands-Regular-400.otf
That screens that demonstrate what happens, in windows:
and in MAC:
This was done with QT 5.12
EDIT:
i provide the code for this app
https://drive.google.com/file/d/1ZSZBzg0fS9IUNpQ540M4cGlRQATV4NlU/view?usp=sharing
This way can anyone that uses MAC test this code please?

Related

Create Transparent Window in QtQuick to show external application through

I am trying to create a QtQuick application running under Linux (Lubuntu 20.04) with a transparent window that shows the desktop or any other application running in the background.I also require a couple of other windows which aren't transparent.
I have tried the suggestions here:
QtQuick 2 Transparent Window Background I just end up with either a grey or black background which doesn't show the desktop.
I have tried all combinations of opacity: 0.0 or color: "transparent", but none give the correct effect.
Here is a minimal non working example:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
id: transparentWindowTest
//flags: Qt.FramelessWindowHint
visible: true
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
opacity: 0.0
Rectangle {
id: transparentWindow
anchors.left: parent.left
anchors.top: parent.top
width: 300
height: 300
color: "transparent"
opacity: 0.0
}
Rectangle {
id: rightWindow
anchors.left: transparentWindow.right
anchors.top: parent.top
width: 200
height: parent.height
color: "blue"
}
Rectangle {
id: bottomWindow
anchors.left: parent.left
anchors.top: transparentWindow.bottom
width: parent.width
height: 200
color: "red"
}
}
Any suggestions on the best way of achieving this?
I have also tried the suggestions in:
How to make a transparent window with Qt Quick?, but these just show a dark background that is not transparent at all. Note that I had to modify the second example so that it would compile under Qt5.15.2, as show below:
transparent2.pro:
QT += quick
# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += \
main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
main.cpp:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
main.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
opacity: 0.0
color: "transparent"
Rectangle {
id: root
width: 250
height: 250
// completely transparent background
color: "#00FFFFFF"
border.color: "#F00"
border.width: 2
Rectangle {
id: ball
height: 50; width: 50
x: 100
color: "#990000FF"
radius: height / 2
}
SequentialAnimation {
running: true; loops: Animation.Infinite
NumberAnimation { target: ball; property: "y"; to: root.height - ball.height; duration: 1000; easing.type: Easing.OutBounce }
PauseAnimation { duration: 1000 }
NumberAnimation { target: ball; property: "y"; to: 0; duration: 700 }
PauseAnimation { duration: 1000 }
}
}
}
Here is a screenshot showing the output:

QT6.1 - Qml Why does the ProgressBar not have an animation corresponding to the indeterminate property?

As the title says, I set the indeterminate property of the ProgressBar to True, but he doesn't have any animation.
Just like this:
But:
I use the default project and the code is very simple.
I would like to know if the indeterminate itself does not have any animation or what is wrong with it?
Thanks for your help.
By the way, this is the first time I'm looking for answers here, so I hope it will be a pleasant experience :)
version:
Qt6.1.1 MinGW 64-bit (default Debug Version)
The code is as follows:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
ProgressBar{
id: proBar
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 20
from: 1
to: 1
indeterminate: true
}
}
Yes, that's all the code in my qml. The rest of the file did not change a word
I think it relates to your Qt version , I test your code in my Qt .
I use Qt5.14 and GCC compiler, the result is this :
For adding Style :
in main.cpp put this
QQuickStyle::setStyle("Universal");
like this :
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickStyle>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQuickStyle::setStyle("Universal");
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl)
{
if (!obj && (url == objUrl))
{
QCoreApplication::exit(-1);
}
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
and in .pro file add this :
QT += quick quickcontrols2
Edited code
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Universal.theme: Universal.Dark
Universal.accent: Universal.Red
ProgressBar{
id: proBar
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 70
from: 1
to: 1
indeterminate: true
}
}

Qml: Accessibility not working for all elements

I am adding accessibility to QML application. While using Windows Narrator or NVDA program, they are not able to read elements of ComboBox. They read ComboBox fine but not content of it.
Cannot post my project to posting example file here.
QML:
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
Item {
visible: true
width: 640
height: 480
ComboBox{
model: ["option1","option2","option3"]
Accessible.name: "ComboBox"
Accessible.description: "ComboBox"
}
}
Main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQuickView view;
const QUrl url(QStringLiteral("qrc:/main.qml"));
view.setSource(url);
view.show();
return app.exec();
}
Qt Version: 5.15.2, any help is appreciated
So, after browsing QT Bugs found out that QML is not fully supported for accessibility and QT is aware of it since 2016. This ticket is really helpful
https://bugreports.qt.io/browse/QTBUG-68465 and from comments
Qt should actually be setting focus to the menu's first child menu item, since this is thew behavior VoiceOver expects. We currently don't do this.
So by forcing focus this can be fixed, i am able to fix it.
Check focus:true that is most important part.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Item {
visible: true
width: 640
height: 480
ComboBox{
id: selectMe
model: ["selectMe1","selectMe2","selectMe3"]
focus: true
Accessible.role: Accessible.ComboBox
contentItem:
Text {
id: ld2
text: selectMe.currentText
}
hoverEnabled: true
popup: Popup {
y: selectMe.height - layoutRowHeight
width: selectMe.width
implicitHeight: contentItem.implicitHeight
padding: 1
focus: true
contentItem: ListView {
spacing: 2
focus: true
Accessible.role: Accessible.List
clip: true
implicitHeight: contentHeight
model: selectMe.popup.visible ? selectMe.delegateModel : null
delegate: ItemDelegate {
id: selectMeDelegate
width: selectMe.width
focus: true
contentItem:
Text {
text: modelData
color: "black"
font.pointSize: 12
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
focus: true
Accessible.name: "selectMe combobox"
Accessible.description: "selectMe"
}
background: Rectangle{
width: selectMe.width
height: selectMe.height
}
}
}
background: Rectangle {
color:"grey"
opacity: 0.5
radius: 10
}
}
}
}

QML Calendar not showing week day or month year (however it does seem to be there....)

I am using Qt 5.13 and in general Qt.Controls 2 however the calendar only exists in v1.0 or the labs version (which I can't get to work, so using V1).
My code is
import QtQuick 2.2
import QtQuick.Controls 1.4 as Old
import Tree 1.0
import "."
ApplicationWindow {
id: window
width: 800; height: 1000
title: "TreeView Example"
visible: true
Old.Calendar {
anchors.centerIn: parent
id: calendar
}
}
However when I do this, I don't see the day of the week, nor the month/year in the navivagation bar, although I can see where they should be:
I have tried to add a navigationBar delegate, but this then gets rid of the navigation arrows.
style: CalendarStyle {
navigationBar: Text {
text: "hello"
}
}
So, how do I have the nav arrows, show the month/year and show the days of week? The documentation seems to suggest I would get these out of the box...
Now... I thought I could add drop downs as a work around to choose month/year and place them in the nav bar... however when I do that I can actually see that the days of the week are there, just their text colour is white, so I feel I am missing a trick with regard to the navigation bar...?
Worth reading the comments in response to #Aleph0's post, but to get it working I had to copy the default styles and place them within my element. The final code (stripping out the bits that aren't specifically about the calendar then), looks like
import QtQuick.Controls 2.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick 2.2
import QtQuick.Controls 1.4 as Old
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Private 1.0
ApplicationWindow {
id: window
width: 300; height: 300
title: "Calendar Example"
visible: true
ColumnLayout {
anchors.fill: parent
Old.Calendar {
id: calendar
style: CalendarStyle {
gridVisible: true
dayOfWeekDelegate: Rectangle {
color: gridVisible ? "#fcfcfc" : "transparent"
implicitHeight: Math.round(TextSingleton.implicitHeight * 2.25)
Label {
text: control.locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
anchors.centerIn: parent
}
}
navigationBar: Rectangle {
height: Math.round(TextSingleton.implicitHeight * 2.73)
color: "#f9f9f9"
Rectangle {
color: Qt.rgba(1,1,1,0.6)
height: 1
width: parent.width
}
Rectangle {
anchors.bottom: parent.bottom
height: 1
width: parent.width
color: "#ddd"
}
HoverButton {
id: previousMonth
width: parent.height
height: width
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
source: "./assets/leftanglearrow.png"
onClicked: control.showPreviousMonth()
}
Label {
id: dateText
text: styleData.title
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter
font.pixelSize: TextSingleton.implicitHeight * 1.25
anchors.verticalCenter: parent.verticalCenter
anchors.left: previousMonth.right
anchors.leftMargin: 2
anchors.right: nextMonth.left
anchors.rightMargin: 2
}
HoverButton {
id: nextMonth
width: parent.height
height: width
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
source: "./assets/rightanglearrow.png"
onClicked: control.showNextMonth()
}
}
}
}
}
}
That results in
In an ideal world, there would be an alternative to a) using Private controls as that seems like I am using Qt internal modules, but thats an easy fix by using an Image with a mouse area, and if I didn't have to use any 1.x controls either, but there doesn't seem to be a 2.x way of graphically displaying dates etc. Anyway, hopefully this can be useful to someone - it's literally a copy paste job of the default styling so it can be simplified alot...
I'm also using Qt 5.13.0 and just tried you example. After removing some imports it was working with the following files:
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.4 as Old
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 800; height: 1000
title: "TreeView Example"
visible: true
Old.Calendar {
anchors.centerIn: parent
id: calendar
}
}
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char* argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
QQmlContext* context = engine.rootContext();
engine.load(QUrl("./data/main.qml"));
return app.exec();
}
I'll obtain the following:
I suggest, that you will try my code and compare it with your application.
I had the same problem - days of week and title were almost invisible, because they were written with white color on light gray background. In my case the problem was in desktop color theme in Ubuntu Studio. After I changed it from Dark to Light the text appeared in black as expected. It seems Qt5 can't handle dark themes well or implementation in Ubuntu Studio (22.04) is buggy. The same was true for text in Button-s.

QtQuick 2 Transparent Window Background

I've been searching how to make the background of my QtQuick 2.0 application transparent.
Most answers I've found use QtDeclarative which is ok for QtQuick 1.0 but not version 2.
Finally I found an answer that I will post but I would like to know if there is a better/simpler/smaller way to achieve this task.
Note*
I wanna make the Background of the window transparent.
Some people suggest to setOpacity but this makes all the qml elements transparent.
I found a solution in this post http://qt-project.org/forums/viewthread/18984/#106629 by billouparis. He uses the main application template that is being generated by QtCreator which is pretty convenient.
Note: I changed a little bit the original code to make it smaller.
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QSurface>
#include <QSurfaceFormat>
#include <QDebug>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QtQuick2ApplicationViewer viewer;
// Make Background Transparent Start
viewer.setSurfaceType(QSurface::OpenGLSurface);
QSurfaceFormat format;
format.setAlphaBufferSize(8);
format.setRenderableType(QSurfaceFormat::OpenGL);
viewer.setFormat(format);
viewer.setColor(QColor(Qt::transparent));
viewer.setClearBeforeRendering(true);
// Make Background Transparent Stop
viewer.setMainQmlFile(QStringLiteral("qml/myProject/main.qml"));
viewer.showExpanded();
return app.exec();
}
Also make sure that the root qml element has an alpha color (Qt.rgba)
here a example to get a frameless, transparent window in pure qml
import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
ApplicationWindow {
id: backlight
flags: Qt.FramelessWindowHint
visible: true
title: qsTr("backlight")
width: 500
height: 50
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
property real slideValue
signal onSlide(real value)
Rectangle {
anchors.centerIn: parent
width: parent.width
height: 50
color: "transparent"
Rectangle {
anchors.fill: parent
radius: 25
opacity: 0.3
color: "gray"
}
Slider {
anchors.centerIn: parent
width: backlight.width - 16
height: backlight.height
value: backlight.slideValue
focus: true
onValueChanged: backlight.onSlide(value)
Keys.onSpacePressed: Qt.quit()
Keys.onEscapePressed: Qt.quit()
style: SliderStyle {
groove: Rectangle {
implicitHeight: 8
radius: 4
color: "gray"
}
handle: Rectangle {
anchors.centerIn: parent
color: control.pressed ? "white" : "lightgray"
border.color: "gray"
border.width: 2
width: 34
height: 34
radius: 17
}
}
}
}
}
Try this
import QtQuick 2.2
import QtQuick.Window 2.0
Window {
id: backlight
visible: true
title: qsTr("backlight")
width: 500
height: 50
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
}

Resources