qml desktop components scaling - c++

I want to create a user interface qtquick2 that can be scaled and includes some desktop components. As mentioned in this blogpost the default rendering for qml/qtquick2 should use distance fields and not native text rendering. I tried to scale qt quick controls. The result is rather disappointing. I was testing on ubuntu 64 and qt-5.1.1. The text on the controls is looking bad but all text in standard qml elements (Text/TextEdit) is looking good when scaled.
This leads me to think that native rendering is the default now for desktop components. Can this be turned of?

Setting render types of Qt Quick Controls will be available in Qt 5.2 using styles, e.g. in TextArea:
TextArea {
/* ... */
style: TextAreaStyle {
renderType: Text.QtRendering
}
}
Supported render types are:
Text.QtRendering
Text.NativeRendering (default)
See TextArea.qml, TextAreaStyle.qml.
For Button and ButtonStyle there is no public interface to set the render type directly in Qt 5.2. But what you can do, is overwrite the label with your own text component:
Button {
id: theButton
/* ... */
style: ButtonStyle {
label: Item {
implicitWidth: row.implicitWidth
implicitHeight: row.implicitHeight
property var __syspal: SystemPalette {
colorGroup: theButton.enabled ?
SystemPalette.Active : SystemPalette.Disabled
}
Row {
id: row
anchors.centerIn: parent
spacing: 2
Image {
source: theButton.iconSource
anchors.verticalCenter: parent.verticalCenter
}
Text {
renderType: Text.NativeRendering /* Change me */
anchors.verticalCenter: parent.verticalCenter
text: theButton.text
color: __syspal.text
}
}
}
}
This code is inspired by the default label component of ButtonStyle.qml, modified and untested.

I don't think you can change text rendering in Qt Components since they are explicitly made for the use in desktop applications.
In TextArea for example there is no renderType like in TextEdit.
On the QtDesktopComponents page I another hint:
You have to change QGuiApplication to a QApplication. This is because the components rely on certain widget-specific classes such as QStyle to do native rendering.

Related

Qt/QML: WebEngineView and ScrollView

I have desktop app in which I have a ScrollView that contains a ListView, in which the delegates each contain multiple widgets, including a WebEngineView:
ScrollView
{
id: myScrollView
anchors.fill: parent;
ListView
{
id: myListView
delegate: Item
{
Rectangle
{
Text ...
Text ...
// other stuff
WebEngineView
{
id: myWebEngineView
Component.onCompleted:
{
loadHtml(model.modelData.someHTMLData);
}
}
}
}
}
}
The problem I am having is with scrolling. On Mac, if I use the touchpad to scroll, the ListView only scrolls if the mouse is hovered over one of the non-WebEngineView widgets.
I suspect the WebEngineView widgets are trapping the mouse messages but I cannot find a way stop this from happening. How can I do this?
One thing that I know about Qt Quick is that it has input focus.
According to this, you can play with FocusScopes and focus property.
For example set ListView's focus to true, lay delegate into FocusScope with focus: false. Or set WebEngineView's focus to false.
Hope this helps =)

How to change the color of text in a declarative way in Qt QML

I have a really basic GUI that I am making using Qt Quick Designer. When a button is clicked I want some text to change color. So here is what I have for the code:
onClicked: {
if(displayText.color == "#ff0000") {
displayText.color = "Black";
}
else if(displayText.color == "#000000"){
displayText.color = "Red";
}
}
So this works when I run it, yet when I try to go to the Qt design view it says that "Imperative code is not supported in the Qt Quick Designer". Am I doing something wrong or is this just a Qt quirk that I am encountering? I know that there are ways to handle this in C++ but I was hoping to do it all in QML.
Just ignore the warning. Your code is okay, only that Qt Quick Designer can't yet run scripts or properly handle some script bindings. I suggest though that you use states instead of scripting the property changes. It will result in much cleaner and less redundant code:
onClicked: state = (state !== 'clicked' ? 'clicked' : '')
color: '#ff0000' // or #000000, if that's your default color
states: State [
name: 'clicked'
PropertyChanges {
target: displayText
color: '#000000'
}
]
Qt Quick Designer handles states very well (it shows them at the top), where you can select a state and change property values within the designer.
You case just use simple boolean flag indicating color:
property bool colorFlag: false
...
color: colorFlag ? "black" : "red"
...
onClicked: colorFlag = !colorFlag
Or you can use something like this:
MouseArea {
id: myMa
}
...
color: myMa.clicked ? "black" : "red"
This way is much cheaper than with states.

Qt Creator: Button Click Signal to make a window pop- up

I’m using Qt Creator's Qt Quick and as suggested in the tutorial I made different .qml for every button.
I want when the button is clicked to make a window pop- up. What should I write after
onClicked:
in the mouseArea.
Also how to make a second window (the pop- up one), what should I add to the project so I can design it like the main one?
I read that I have to make a class that inherits with QWidget but I need a bit more information.
A short example would be great.
as suggested in the tutorial I made different .qml for every button
Surely you mean "for every button type"!?
To launch a second window:
// Main.qml
Window {
id: win
width: 640
height: 480
Button {
text: qsTr( "Open" )
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
onClicked: {
var factory = Qt.createComponent( "Popup.qml" );
factory.createObject( win );
}
}
}
// Popup.qml
Window {
height: 240
width: 320
title: qsTr( "Popup" )
visible: true
Text {
text: qsTr( "Hello" )
anchors.centerIn: parent
}
}
I read that I have to make a class that inherits with QWidget
Do not mix QML and the Qt Widgets module unless you are extending/converting a legacy system, QML has been designed to replace Qt Widgets (at some point).

Create a button on Cascades with background image, BB-10

I want to create a button using Cascades on Black Berry 10 development which has an image as a background and also possibly a text with white color. I found this class button, but it seems to not support setting an image as a background on the button. What can I do? What are the alternate ways?
Maybe I should consider another library than Cascades for creating my UI??? any suggestions?
Container {
id:account
signal buttonClicked()
layout: DockLayout {
}
preferredWidth: 768.0
topMargin: 40.0
bottomMargin: 40.0
ImageButton {
id: addButton
defaultImageSource: "image/button_normal.png"
pressedImageSource: "image/button_press.png"
horizontalAlignment: HorizontalAlignment.Center
onClicked: {
buttonClicked();
}
}
Label {
text: "Add"
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
textStyle {
base: SystemDefaults.TextStyles.BodyText
fontSize: FontSize.Small
color: Color.create("#ffffff")
}
touchPropagationMode: TouchPropagationMode.None
}
}
You can have a button with both text and image by using the default Button class: cascades_button.html">https://developer.blackberry.com/cascades/reference/bb_cascades_button.html
Having a background image on the button with text over top is not really recommended. A button should be clear and easy to read. See the BlackBerry 10 UI Guidelines here: https://developer.blackberry.com/devzone/files/design/bb10/UI_Guidelines_BlackBerry_10.pdf
If you really want to do it, you can always build a custom component in Cascades that has an image with a label over top.
I've faced the same issue.
At the end, as PBernhardt said, I created a custom Container with an ImageView or a background image, and added a Label inside.
Then, I overrided onTouch to catch the different touch states (event.isDown(), event.isMove(), event.isUp()) and update the button graphics accordingly (text color and background image).
I'm using a Q_INVOKABLE method to bind with my C++ files.

Option style (Dropdown, RadioGroup, etc) in QML or C++ (Cascades)

I'm trying to set a custom style to a group of options belonging to a dropdown or a Radio Group. I'm searching all over and it seems impossible. At least I would like to decrease the size of the letters in the text of each option because is too big! and crashes my UI.
Here's and example of what I need:
RadioGroup {
id: groupOrigin
objectName: "groupOrigin"
Option{
text: "text to display"
//This text default style is what I'm trying to change. Please help!.
}
}
thanks!
for Radio group you can achieve this using custom implementation. Take a label and place it after the radio group did not provide text inside the options tag. So whatever style you want to apply can be done using label.
On label you can set the font size, color and other style parameter you want to apply.
Please check the source code below for this custom radio button. I did this in the QML you can achieve same in C++.
// The Component title.
Label {
id: titleLabel
text: ""
textStyle {
base: SystemDefaults.TextStyles.SmallText
alignment: TextAlignment.Center
}
layoutProperties: StackLayoutProperties {
horizontalAlignment: HorizontalAlignment.Fill
}
}
// The radio group presenting the different curves.
RadioGroup {
id: radioGroup
Option {
text: "Height"
}
}