I have a QML Item with some Text fields in it, which should have all the same font. Do achieve this i introduce a new property myFont of type font. Do initialize this property I use the Qt.font function, which creates a font object. But I have to specify at least one property (either family or pointSize).
My Question is now: How can I retrieve the default font for the myFont property?
If I create only a Text{} item, it has already a default font attached, how can I get the same font for the myFont property? (Meanwhile I use a hidden Text field and create an alias to it's font property, but I want a better solution).
Item {
property font myFont: Qt.font({pointSize: 10})
Text {
id: header
font: myFont
text: "My Header"
}
Text {
id: subject
font: myFont
text: "My Subject"
}
Text {
id: message
font: myFont
text: "Some meassage!"
}
}
I think the right way to solve this is to create your own object type with the font you need to use.
In the following example, the new object would be MyText.qml. I don't know your whole code, but I suppose you have a ListView with the delegate you posted in your question.
MyText.qml
import QtQuick 2.0
Text {
font: Qt.font({pointSize: 10})
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
ListModel {
id: myModel
ListElement {
header: "header xxx"
subject: "subject xxx"
message: "message xxx"
}
ListElement {
header: "header yyy"
subject: "subject yyy"
message: "message yyy"
}
ListElement {
header: "header zzz"
subject: "subject zzz"
message: "message zzz"
}
}
ListView {
anchors.fill: parent
model: myModel
delegate: Item {
width: 300; height: 80
Column {
MyText {
id: myheader
text: header + " - family: " + font.family + " size: " + font.pointSize
}
MyText {
id: mysubject
text: subject + " - family: " + font.family + " size: " + font.pointSize
}
MyText {
id: mymessage
text: message + " - family: " + font.family + " size: " + font.pointSize
}
}
}
}
}
Now, I've digged into Qt source code.
And it turns out that Qt uses a registered private TextSingleton which is defined (Qt 5.6) as:
pragma Singleton
import QtQuick 2.2
Text {
}
The font property of various qml controls is initialized:
font: TextSingleton.font
Digging further into C++ code reveals that for the Text item, the font property is a default initialized QFont, which gives the QFont object retrieved from QGuiApplication::font().
As I mentioned here, FontMetrics is the way to go since it's configurable and without using Qt.font(). You can declare it in your parent item or in a SIngleton type and the you can bind the property to it.
Here there's an example
Item {
id: root
FontMetrics {
id: fontMetrics
font.family: "Arial"
font.pixelSize: 24
}
property alias font: fontMetrics.font
Text { font: root.font }
Text { font: root.font }
}
You can access the default font in QML with Qt.application.font.
You can get and set this font in C++ using
QFont font = QApplication::font();
font.setPointSize(12); //make various other changes or get a completely new QFont
QApplication::setFont(font);
Related
I'm looking for a simple way to make widgets for a touch-screen that will allow users to set the time and IP address on the computer running the code and provide a simple (uppercase Latin-alphabetic) name.
This question is not about how to actually set the system time or IP address; I'm just looking for information about how to make the graphical widgets themselves.
What I want is for each editable property (time, address, and name) to be divided into "scrollable" fields, where the fields for "time" are hours, minutes, possibly seconds, and AM/PM/24-hr, and the fields for address/name are the individual characters. Each field would have an arrow above and below it, and touching on an arrow would scroll through the valid values for that field.
I think this is a pretty common UX pattern, especially in meatspace (e.g. on alarm clocks), but just in case it's not clear what I'm trying to describe, here's an example with a user editing the "name" property:
^^^
BN
vvv
User presses "down" below the "N":
^^^
BO
vvv
User presses "down" below the empty space:
^^^^
BOA
vvvv
...and again on the same down-arrow:
^^^^
BOB
vvvv
I'm writing this using C++14 with Qt 5. (If worst comes to worst, I'd be open to writing a separate app using a different language and/or framework, but I'm not asking for framework suggestions here; if you have one, let me know and I'll open a corresponding question on Software Recommendations SE.)
I don't see anything in the Qt 5 widget library like this; most of the input widgets are text fields. QSpinBox looks somewhat promising, but the arrows are probably too small for my touchscreen, and using a separate spinbox for each letter would probably be confusing and ugly.
I don't really know enough about Qt or GUI-programming in general to feel confident trying to write my own widgets from scratch, but this interface looks simple enough that I would expect a couple lines of QML would get me well on my way.
ListView as well as PathView can produce the desired result with slightly different behaviors and slightly different performances. Differently from ListView, PathView is circular, i.e. elements can be iterated continuously by using just one of the selection controls. It is also easier to fully customize the behavior of the path in PathView via the PathAttribute type. Anyhow path customization seems not to be a required feature, according to the question.
If you implement the solution via a ListView you should ensure that just one element is shown and that any model is processed.
Component {
id: spinnnnnnnner
Column {
width: 100
height: 110
property alias model: list.model
property string textRole: ''
spacing: 10
Item {
width: 100
height: 25
Text { anchors.centerIn: parent; text: "-"; font.pixelSize: 25; font.bold: true }
MouseArea {anchors.fill: parent; onClicked: list.decrementCurrentIndex() }
}
ListView {
id: list
clip: true
width: 100
height: 55
enabled: false // <--- remove to activate mouse/touch grab
highlightRangeMode: ListView.StrictlyEnforceRange // <--- ensures that ListView shows current item
delegate: Text {
width: ListView.view.width
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 50
font.bold: true
text: textRole === "" ? modelData :
((list.model.constructor === Array ? modelData[textRole] : model[textRole]) || "")
}
}
Item {
width: 100
height: 25
Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 25; font.bold: true }
MouseArea {anchors.fill: parent; onClicked: list.incrementCurrentIndex() }
}
}
}
The checks over the model ensure that any type of model can be passed to the component. Here is an example using three very different models:
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 400
height: 300
ListModel {
id: mod
ListElement {texty: "it1"}
ListElement {texty: "it2"}
ListElement {texty: "it3"}
}
Row {
Repeater {
id: rep
model: 3
delegate: spinnnnnnnner
Component.onCompleted: {
rep.itemAt(0).model = mod // listmodel
rep.itemAt(0).textRole = "texty"
rep.itemAt(1).model = 10 // number model
//
rep.itemAt(2).model = ["foo", "bar", "baz"] // array model
}
}
}
}
PathView implementation is not so different from the ListView one. In this case it is sufficient to define a vertical path and specify that just one one element is visible at a time via pathItemCount. Finally, setting preferredHighlightBegin/preferredHighlightEnd ensures that the visible element is centered in the view. The revisited component is the following:
Component {
id: spinnnnnnnner
Column {
width: 100
height: 110
property alias model: list.model
property string textRole: ''
spacing: 10
Item {
width: 100
height: 25
Text { anchors.centerIn: parent; text: "-"; font.pixelSize: 25; font.bold: true }
MouseArea {anchors.fill: parent; onClicked: list.decrementCurrentIndex() }
}
PathView {
id: list
clip: true
width: 100
height: 55
enabled: false // <--- remove to activate mouse/touch grab
pathItemCount: 1
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
path: Path {
startX: list.width / 2; startY: 0
PathLine { x: list.width / 2; y: list.height }
}
delegate: Text {
width: PathView.view.width
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 50
font.bold: true
text: textRole === "" ? modelData :
((list.model.constructor === Array ? modelData[textRole] : model[textRole]) || "")
}
}
Item {
width: 100
height: 25
Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 25; font.bold: true }
MouseArea {anchors.fill: parent; onClicked: list.incrementCurrentIndex() }
}
}
}
Whole project can be found here:
QML Video Test Project
I have made an example application with three buttons one image and one video player. When pressing the buttons a video is supposed to play. This is what distinguishes the buttons:
Access a video file in the same folder as the applications executable file.
Access a video file added to the Qt Resource file.
Access a video file from an external binary Qt Resource file with no compression.
Only button 1. work in my application and the reason for this post is that I have run out of idea on why button 2. and 3. can not make the video play.
The image included in the application is an image that is packed together with a video file in the external binary Qt Resource file. This image is successfully read from the external resource file. This means that access to the external resource file is not the problem.
Here is the main.qml file:
import QtQuick 2.4
import QtQuick.Window 2.2
import com.qml.externalresourcemanager 1.0
import QtMultimedia 5.4
import QtQuick.Controls 1.2
Window {
visible: true
minimumHeight: 700
minimumWidth: 400
property string imageSelected: ""
property string videoSelected: ""
ExternalResourceManager {
id: externalResourceManager
Component.onCompleted: {
console.log("External resource registered: " + registerExternalResource("file:/../../VideoTest/binaryExpansionFile.rcc"))
imageSelected = "externalImage.jpg"
}
}
Button {
id: button0
width: parent.width
height: parent.height / 7
anchors.top: parent.top
text: "Click me to play as local file"
onClicked: {
console.log(installPath + "local.mp4")
videoSelected = installPath + "local.mp4"
}
}
Button {
id: button1
width: parent.width
height: parent.height / 7
anchors.top: button0.bottom
text: "Click me to play local resource file"
onClicked: {
videoSelected = "local.mp4"
}
}
Button {
id: button2
width: parent.width
height: parent.height / 7
anchors.top: button1.bottom
text: "Click me to play external resource file"
onClicked: {
videoSelected = "external.mp4"
}
}
Image {
id: image
source: imageSelected
width: parent.width
height: parent.height * 2 / 7
anchors.top: button2.bottom
}
Video {
id: video
source: videoSelected
height: parent.height * 2 / 7
width: parent.width
anchors.top: image.bottom
fillMode: VideoOutput.PreserveAspectFit
onStatusChanged: {
var temp
switch (playbackState)
{
case MediaPlayer.NoMedia:
temp = "MediaPlayer.NoMedia"
break;
case MediaPlayer.Loading:
temp = "MediaPlayer.Loading"
break;
case MediaPlayer.Loaded:
temp = "MediaPlayer.Loaded"
break;
case MediaPlayer.Buffering:
temp = "MediaPlayer.Buffering"
break;
case MediaPlayer.Stalled:
temp = "MediaPlayer.Stalled"
break;
case MediaPlayer.Buffered:
temp = "MediaPlayer.Buffered"
break;
case MediaPlayer.EndOfMedia:
temp = "MediaPlayer.EndOfMedia"
break;
case MediaPlayer.InvalidMedia:
temp = "MediaPlayer.InvalidMedia"
break;
case MediaPlayer.UnknownStatus:
temp = "MediaPlayer.UnknownStatus"
break;
}
console.log(temp)
if (status === MediaPlayer.Loaded)
{
video.play()
}
}
onBufferProgressChanged: {
console.log("Buffering: " + bufferProgress * 100)
}
onSourceChanged: {
console.log("Source: " + source)
}
onAvailabilityChanged: {
console.log("Availability: " + availability)
}
onErrorChanged: {
console.log("Error: " + error)
}
onErrorStringChanged: {
console.log("Error String: " + errorString.toString())
}
onHasVideoChanged: {
console.log("Has video: " + hasVideo)
}
onPlaybackStateChanged: {
var temp
switch (playbackState)
{
case MediaPlayer.PlayingState:
temp = "MediaPlayer.PlayingState"
break;
case MediaPlayer.PausedState:
temp = "MediaPlayer.PausedState"
break;
case MediaPlayer.StoppedState:
temp = "MediaPlayer.StoppedState"
break;
}
console.log(temp)
}
}
}
Pressing button 1 my application outputs this:
Resource path: "file:/../../VideoTest/binaryExpansionFile.rcc"
qml: External resource registered: true
qml: file:/C:/Users/MisterX/Documents/QtProjects/build-VideoTest-Desktop_Qt_5_4_2_MinGW_32bit-Debug/debug/local.mp4
qml: Source: file:///C:/Users/MisterX/Documents/QtProjects/build-VideoTest-Desktop_Qt_5_4_2_MinGW_32bit-Debug/debug/local.mp4
qml: MediaPlayer.UnknownStatus
qml: Has video: true
qml: MediaPlayer.UnknownStatus
qml: MediaPlayer.NoMedia
qml: MediaPlayer.PlayingState
Pressing button 2 my application outputs this:
Resource path: "file:/../../VideoTest/binaryExpansionFile.rcc"
qml: External resource registered: true
qml: Source: qrc:/local.mp4
qml: MediaPlayer.UnknownStatus
qml: Has video: false
qml: MediaPlayer.UnknownStatus
qml: MediaPlayer.NoMedia
qml: MediaPlayer.PlayingState
Whole project can be found here:
QML Video Test Project
This is a bug when using the MinGW compiler that uses the DirectShow backend. See this bug report link for more information.
I'm pretty new to C++ and QML, so sort of trying to teach myself the way! I am trying to change the "title" property of a QML Header object. I am currently developing my app off the back off the pushCollector cascades example on GitHub.
I've read elsewhere that I can assign a property alias and do it that way;
NavigationPane {
id: navPane
property alias connectionText:connectionStatus.title
Page {
Container {
Header {
id: connectionStatus
title: "Connection Status:"
verticalAlignment: VerticalAlignment.Bottom
bottomMargin: 0.0
topMargin: 0.0
visible: true
subtitle: ""
}
My question is, how do I make a void function that can dynamically change the title whenever I call the function. I need something like;
void App:changeConnectionText(const QString new Text)
{
//change object title in QML
}
Thanks!
Add this in .cpp
#include <bb/cascades/Header>
You access like this:
void ApplicationUI::changeConnectionText(QString Text) {
Header* myheader = Application::instance()->scene()->findChild<Header*>("connectionStatus");
myheader->setTitle(Text);
}
And you call it like this (in cpp):
changeConnectionText("Yay, connected!");
And QML
Header {
id: connectionStatus
objectName: "connectionStatus" //add this!!!
title: "Connection Status:"
verticalAlignment: VerticalAlignment.Bottom
bottomMargin: 0.0
topMargin: 0.0
visible: true
subtitle: ""
}
Tested, it works
I want to use qml with master-detail interface, but i don't know how to pass current item to detail view right way. The ListView in master view uses C++ model (add-on of QSQLTableModel, it's work fine) and I see two ways to pass item:
Create C++ classes with fields with static name like QSqlRecord field names and pass it to qml with w->rootContext()->setContextProperty() (w is QDeclarativeView *), but now i don't use any classes like this and can change my database and qml views without changing c++ code, I would like to save it
Create a lot of properties in any detail qml like
Rectangle {
id: mainRect
property alias myFieldName: txt_nominal.text
Column {
width: parent.width
Text {
id: txt_nominal
font.bold: true
}
}
}
and set this properties from c++ code by setting w->rootContext()->setContextProperty(record.fieldName(i),record.field(i).value()); (record - QSqlRecort at current row)
Is there any easier way to solve my problem?
PS The code I wrote above is not checked for accuracy, and is written to make it more clear what I mean
UPD
Maybe it will be useful for somebody, I discovered 3-rd way, rather, the modification of second - you can wrap fields into QVariantMap and pass only one object to qml. This is exactly what I wanted
in cpp:
QVariantMap testObject;
testObject["testField"]="first string from cpp";
testObject["testField2"]="second string from cpp";
rootContext()->setContextProperty("testObject",testObject);
in qml:
Text {
id: simpleTextt
text: testObject.testField
anchors.centerIn: parent
}
You could use the isCurrentItem property of the delegate to pass the data from ListView delegate to your details qml. That way you could get away without have to add additional c++ code. This is basically your second approach but without c++. You also do not need to add many properties as long as each of your QML elements that you want to change have an id.
If you have a number of different QML for different details views you would also have to use the Loader to load the appropriate details QML.
Just a toy example assuming that you have only one details template for all of your elements in the list (as mentioned above if that is not the case than you can use loader instead of detailsRect):
Rectangle {
width: 300; height: 400
Rectangle {
id: detailsRect
anchors.right: parent.right
width: 100
height: 500
color: "blue"
Text {
id: detailsText
text: ""
}
}
ListView {
id: list
anchors.fill: parent
model: 20
delegate: Rectangle {
color: ListView.isCurrentItem ? "red" : "green"
width: 40
height: 40
Text {
text: index
}
ListView.onIsCurrentItemChanged: {
if(ListView.isCurrentItem)
{
detailsRect.color = "yellow"
detailsText.text = index
}
}
MouseArea {
anchors.fill: parent
onClicked: {
list.currentIndex = index
}
}
}
}
}
I have a widget specified through a QML file. This widget contains a top levelRectangle which contains two Columns. Each of these Columns contains many Text-elements. This QML widget is wrapped in a subclass of QDeclarativeView in C++.
I want to specify the font for each of these Text-elements. Today I do this by specifying top-level properties:
property string fontfamily: "Arial"
property bool fontbold: false
property bool fontitalic: false
property int fontpixelsize: 11
property string fontcolor: "White"
and bind each Text-elements to these properties:
Text
{
color: fontcolor
font.family: fontfamily
font.bold: fontbold
font.italic: fontitalic
font.pixelSize: fontpixelsize
...
}
This isn't very elegant and new fields needs to be added every time I need support for something new (e.g. underlined fonts). I have not been able to declare a property of type font and bind to this instead (widget is blank and qmlviewer warns about "expected type after property").
Is there a better way to specify a font for all Text-elements?
Note! I'm handwriting the QML files.
In Qt 5.6 (at least, probably earlier too), you can use Qt.font() to dynamically allocate a font object and refer to it elsewhere. So, this works:
property font myFont: Qt.font({
family: fontfamily,
bold: fontbold,
italic: fontitalic,
pixelSize: fontpixelsize
});
Text
{
color: fontcolor
font: parent.myFont
}
More info on Qt.font() here: https://doc.qt.io/qt-5/qml-qtqml-qt.html#font-method
Another possibility is to write a new QML component, that inherits from Text an sets some properties by default:
StyledText.qml
import QtQuick 1.0
Text {
// set default values
color: "blue"
font.family: "Arial"
font.bold: true
font.italic: true
font.pixelSize: 12
}
main.qml
import QtQuick 1.0
Rectangle {
Row {
spacing: 10
Column {
StyledText {
text: "Foo1"
}
StyledText {
text: "Bar1"
}
StyledText {
text: "Baz1"
}
}
Column {
StyledText {
text: "Foo2"
}
StyledText {
text: "Bar2"
}
StyledText {
text: "Baz2"
}
}
}
}
One possible solution is to write a function, that iterates over the children of a passed element (for example a Column). In this function all the properties can be set:
import QtQuick 1.0
Rectangle {
Row {
spacing: 10
Column {
id: col1
Text {
property bool useStyle: true
text: "Foo1"
}
Text {
property bool useStyle: true
text: "Bar1"
}
Text {
property bool useStyle: true
text: "Baz1"
}
}
Column {
id: col2
Text {
property bool useStyle: true
text: "Foo2"
}
Text {
text: "not styled"
}
Text {
property bool useStyle: true
text: "Baz2"
}
}
}
function setTextStyle(parentElement) {
for (var i = 0; i < parentElement.children.length; ++i) {
console.log("t", typeof parentElement.children[i]);
if (parentElement.children[i].useStyle) { // apply style?
parentElement.children[i].color = "blue";
parentElement.children[i].font.family = "Arial"
parentElement.children[i].font.bold = true;
parentElement.children[i].font.italic = true;
parentElement.children[i].font.pixelSize = 12;
}
}
}
// set style
Component.onCompleted: {
setTextStyle(col1);
setTextStyle(col2);
}
}
Each element, that contains the property useStyle that is set to true, gets styled. This is shorter, than assigning the style manually, but you can still define which elements should get styled or not.
Necro posting, but I feel it's still missing an up-to-date solution.
FontMetrics will do the trick without using Qt.font(). You can declare it in your parent item or in a Singleton type, and then you can bind the property to it.
Here there's an example
Item {
id: root
FontMetrics {
id: fontMetrics
font.family: "Arial"
font.pixelSize: 24
}
property alias font: fontMetrics.font
Text { font: root.font }
Text { font: root.font }
}
Some useful workarounds here, but I'm stuck being able to define some base fonts while still being able to specify details later, for more than a few fonts. In particular, because:
FontLoader sets the same name for every font of the same family. Ref
If Qt.font() (or FontMetrics) is used, it's all or nothing for the font property.
Defining new Text Components requires one file per font. Update: maybe not true since 5.15.
Triggering a function is difficult to manage effectively across a whole application.
I think there's room for one more solution:
In my main.qml I used one FontLoader per font file, but only bothered setting an id when the family changes:
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-Bk.otf"; id: flAvantGarde; }
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-BkObl.otf"; }
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-BoldCn.otf"; }
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-Md.otf"; }
FontLoader { source: "qrc:/fonts/ADAM.CG PRO.otf"; id: flAdam; }
and then, and here's the significant part, defined one property var per base font like so:
property var fontAgBk: { "family": flAvantGarde.name, "styleName": "Book" }
property var fontAgBkObl: { "family": flAvantGarde.name, "styleName": "Book Oblique" }
property var fontAgBoldCn: { "family": flAvantGarde.name, "styleName": "Bold Condensed" }
property var fontAgMd: { "family": flAvantGarde.name, "styleName": "Medium" }
property var fontAdam: { "family": flAdam.name }
The var is key being able to specify a dictionary that can be defined once, but pulled apart later.
Elsewhere in any qml, I can do something like:
Text {
id: myText
color: "#123456"
font.family: fontBoldCn.family
font.styleName: fontBoldCn.styleName
font.pixelSize: 24
font.letterSpacing: 5
}
Still requires some repetitive code, but at least the magic strings are only defined once.