Qml : switch qml view - c++11

I'm a beginner in QML.
I have a Loading.qml and a main.qml
I want to display the loading.qml at the application starting, and when all my data are ready, I want to hide the loading.qml and display the main.qml
I want to do that from c++ code
How can I do that ?
Thank you
[UPDATE]
I have tried this
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
qmlRegisterType<MyWindow>("project.mywindow", 1, 0, "MyWindow");
engine.load(QUrl("qrc:/LoadingPage.qml"));
if(engine.rootObjects().isEmpty()) return -1;
// simulate preloading data
std::this_thread::sleep_for(std::chrono::seconds(5));
engine. ? -> switch to another view ?
/*engine.load(QUrl("qrc:/main.qml"));
if(engine.rootObjects().isEmpty()) return -1;*/
return app.exec();
}
My QML
LoadingPage.qml
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.0
ApplicationWindow {
id: loading
visible: true
width: Screen.desktopAvailableWidth
height: Screen.desktopAvailableHeight
title: qsTr("Board")
Loader {
id: pageLoader
}
Component.onCompleted: {
pageLoader.source = "qrc:/main.qml"
loading.visible = false
}
Image {
id: logo
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: 100
height: 100
source: "qrc:/img/download.jpeg"
}
Button {
id: btn
width: 250
height: 250
x: 250
y: 0
onClicked: {
pageLoader.source = "qrc:/main.qml"
loading.visible = false
}
}
}
I want to when my main.qml is ready (when c++ construction of my class MyWindow) is ok, I want to switch to them.

Related

How to highlight image on mouse hoover QML

I'm new to QML and I am trying to highlight an image on mouse hoover. I have a row of movie images, like this:
Here is my code for image number 4 (tarzan):
Rectangle{
id:rect4
width: parent.width/5-row.spacing/5
height:parent.height
color:'transparent'
Image{
id: tarzan
fillMode: Image.PreserveAspectFit
anchors.fill: parent
source:'qrc:tarzan.jpg'
MouseArea{
id:area
width:parent.width
height: parent.height
hoverEnabled: true
anchors.fill:parent
onClicked:tarzan.forceActiveFocus()
}
I tried different ways, but nothing happens. Any ideas? Help would be appreciated.
There are 2 ways to do this if you are using the qt quick version 2.15
import QtQuick 2.15
you can use the HoverHandler object something like this
Image{
id: tarzan
fillMode: Image.PreserveAspectFit
anchors.fill: parent
source:'qrc:tarzan.jpg'
HoverHandler{
onHoveredChanged: {
if(hovered){
tarzan.scale = 1.2
}
else{
tarzan.scale = 1
}
}
}
if you are using qtquick anything below 2.15 then your mousearea object should look something like this
Then it would be something like this the mouse area code
MouseArea{
id:area
width:parent.width
height: parent.height
hoverEnabled: true
anchors.fill:parent
onContainsMouseChanged: {
if(containsMouse){
tarzan.scale = 1.2
}
else{
tarzan.scale = 1
}
}
onClicked:tarzan.forceActiveFocus()
}

FAB Menu Nativescript with Angular

I'm building an app with angular and nativescript , and i want a fab button like this one fab menu vuejs
Does anyone have example or snippet for angular ?
I am not very good with css and i don't know how to something like on angular.
Note: I'm also very new to Nativescript/Angular. I might miss some details, feel free to edit this answer to correct me.
I used this so I would not have to make the FAB myself: https://market.nativescript.org/plugins/nativescript-floatingactionbutton. You can add it to your project by running tns plugin add nativescript-floatingactionbutton.
I don't feel like the documentation is very clear.. I went through those links to come up with something:
https://github.com/nstudio/nativescript-floatingactionbutton/issues/95 (your question basically)
https://github.com/jlooper/nativescript-snacks/blob/master/_posts/2016-06-05-fab-nav-angular.markdown (linked in the last answer of the previous link.. outdated.. removed from the doc)
https://docs.nativescript.org/angular/ui/animation
First, the layout of my page is a GridLayout. I feel like it won't work otherwise. I was testing with a StackLayout first.. no luck.
Inside this GridLayout, I have other stuff (in my case a ListView) and I added at the end another GridLayout.
<GridLayout rows="auto, *">
...
<GridLayout row="1", rows="auto, *">
<Fab row="1" #btna icon="res://first_option_icon" rippleColor="#f1f1f1" class="fab-button btna"></Fab>
<Fab row="1" #btnb icon="res://second_option_icon" rippleColor="#f1f1f1" class="fab-button btnb"></Fab>
<Fab row="1" #fab (tap)="displayOptions()" icon="res://add_icon" rippleColor="#f1f1f1" class="fab-button"></Fab>
</GridLayout>
</GridLayout>
In the exemple from github, buttons are used instead of fab for the "children". The only reason I replaced it with a fab here is because I download my icons from https://material.io/resources/icons and buttons don't accept icons (when downloading an icon from material.io, you can choose "android" (or iOS) in the download options, it gives different sizes of the icon).
Using fab instead of buttons, the css becomes a little easier as well (unless you want to make them smaller).
.fab-button {
height: 70;
/*width: 70; -- Needed for iOS only*/
margin: 15;
background-color: orangered;
horizontal-align: right;
vertical-align: bottom;
}
.btna {
background-color: #493DF8;
}
.btnb {
background-color: #1598F6;
}
And then all that's left is the javascript.
// Necessary imports
import { ..., ViewChild, ElementRef } from "#angular/core";
import { registerElement } from "#nativescript/angular/element-registry";
import { Fab } from "nativescript-floatingactionbutton";
import { View } from "tns-core-modules";
registerElement("Fab", () => Fab);
#Component(...)
export class YourComponent {
...
// Reference those fabs
public _isFabOpen: Boolean;
#ViewChild("btna") btna: ElementRef;
#ViewChild("btnb") btnb: ElementRef;
#ViewChild("fab") fab: ElementRef;
...
displayOptions() {
if (this._isFabOpen) {
// Rotate main fab
const fab = <View>this.fab.nativeElement;
fab.animate({rotate: 0, duration: 280, delay: 0});
// Show option 1
const btna = <View>this.btna.nativeElement;
btna.animate({translate: { x: 0, y: 0 }, opacity: 0, duration: 280, delay: 0});
// Show option 2
const btnb = <View>this.btnb.nativeElement;
btnb.animate({translate: { x: 0, y: 0 }, opacity: 0, duration: 280, delay: 0});
this._isFabOpen = false;
} else {
// Rotate main fab
const view = <View>this.fab.nativeElement;
view.animate({rotate: 45, duration: 280, delay: 0});
// Show option 1
const btna = <View>this.btna.nativeElement;
btna.animate({translate: { x: 0, y: -80 }, opacity: 1, duration: 280, delay: 0});
// Show option 2
const btnb = <View>this.btnb.nativeElement;
btnb.animate({translate: { x: 0, y: -145 }, opacity: 1, duration: 280, delay: 0});
this._isFabOpen = true;
}
}
}
Tada!

Particles with different images. [qml]

I am using particle systems. My particles come out from the center but I want different images to come out.
The file path of these images are stored in an array. I made a function to go through that arrangement and return what is in each position.
What returns is the path of each image to be sent to the source of the ImageParticle.
The problem is that if you scroll through the entire array but only return the path of the last image and logically I get a single image instead of the twenty that are stored in the array.
Someone could help me?
Help and suggestions are well accepted.
Here is my code:
import QtQuick 2.0
import QtQuick.Particles 2.0
Rectangle {
id: bg
width: 1920 //360
height: 1080 //360
color: "black"
ParticleSystem {
id: particleSys
}
Emitter{
id: particles
anchors.centerIn: parent
height: 1; width: 1
system: particleSys
emitRate: 30
lifeSpan: 4000
lifeSpanVariation: 500
maximumEmitted: 1000
size: 5
endSize: 200
velocity: TargetDirection{
targetX: 100; targetY: 100
targetVariation: 360
magnitude: 250
}
}
property var picturesList: [
"images/Image1.png", "images/Image2.png", "images/Image3.png", "images/Image4.png", "images/Image5.png", "images/Image6.png", "images/Image7.png", "images/Image8.png", "images/Image9.png", "images/Image10.png",
"images/Image11.png", "images/Image12.png", "images/Image13.png", "images/Image14.png", "images/Image15.png", "images/Image16.png", "images/Image17.png", "images/Image18.png", "images/Image19.png", "images/Image20.png"
]
function getImage(arr){
var flag = "";
for(var i = 0; i < arr.length ; i++){
flag = arr[i];
console.log("Image: " + arr[i] + " flag: " + flag ) //To check if array is traversing.
}
return flag;
}
ImageParticle{
property var link: getImage(picturesList)
source: link
system: particleSys
}
// To check which image is returned.
MouseArea {
anchors.fill: parent
onClicked: {
console.log(getImage(picturesList))
}
}
}
I am the person who asked the previous question and here I bring the answer.
I know very well that there can be several ways that solve the problem, if you know another way I invite you to share it.
Suggestions about the response are welcome.
Here I share the code:
import QtQuick 2.0
import QtQuick.Particles 2.0
Rectangle {
id: bg
width: 1920
height: 1080
color: "black"
ParticleSystem {
id: particleSys
}
Emitter{
id: particles
anchors.centerIn: parent
height: 1; width: 1
system: particleSys
emitRate: 30
lifeSpan: 4000
lifeSpanVariation: 500
maximumEmitted: 1000
size: 5
endSize: 200
velocity: TargetDirection{ //4
targetX: 100; targetY: 100
targetVariation: 360
magnitude: 250
}
}
property var picturesList: [
"images/Image1.png", "images/Image2.png", "images/Image3.png", "images/Image4.png", "images/Image5.png", "images/Image6.png", "images/Image7.png", "images/Image8.png", "images/Image9.png", "images/Image10.png",
"images/Image11.png", "images/Image12.png", "images/Image13.png", "images/Image14.png", "images/Image15.png", "images/Image16.png", "images/Image17.png", "images/Image18.png", "images/Image19.png", "images/Image20.png"
]
ItemParticle {
id: particle
system: particleSys
delegate: itemDelegate
}
Component {
id: itemDelegate
Rectangle {
id: container
width: 26*Math.ceil(Math.random()*3); height: width
color: 'white'
Image {
anchors.fill: parent
anchors.margins: 3
source: 'images/Image'+Math.ceil(Math.random()*20)+'.png'
}
}
}
}
As you can see, all the images in the folder will be output.
I simply change the "ImageParticle" to "ItemParticle" and I add a "Component" as a delegate where the desired image will be.
So we would not use the array (omit it in the previous code) since now only the path of the image is concatenated and a random number (to select the image).
I hope you serve them, and if you have a better implementation, please let them know.

Qml Qt Quick Control 2: Font size difference between Text and ComboBox

Let's look at this very simple sample application, built with QT 5.9 on a Windows 10:
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout {
anchors.left: parent.left
anchors.leftMargin: 20
anchors.right: parent.right
anchors.rightMargin: 20
Text {
id: text
text: "This is a sample Text"
}
ComboBox {
model: [
"A",
"B",
"C"
]
}
Text {
text: "Another Text"
}
TextField {
anchors.left: parent.left
anchors.right: parent.right
text: "User Input"
}
}
}
If I run it without any further modifications from the QT Creator, I get a very weird relationship between the Font-Size of the Text and the ComboBox and TextField blocks. It looks like this:
The text is too small, and the ComboBoxes (and their Fonts) are HUGE.
If I change the main function to set the default font size explicitely to the system font size using this code (It's the same when I hardcode the setPointSizeF to 12, which is the supposed standard size on windows):
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
auto font = app.font();
QFontInfo fi(font.defaultFamily());
font.setPointSizeF(fi.pointSizeF());
app.setFont(font);
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
It looks like this:
Now the "Relative Dimensions" are more balanced, but overall everything is just "too big". Additionally, if I'm opening the ComboBox, I get again very small text:
Did I miss to set some default here? How can I achieve a more balanced look that fit's better into the Operating Systems' native font sizes?
The combobox delegates use a different font to the application default.
Delegate font can be changed to match the rest of the application as follows:
ComboBox {
id: control
delegate: ItemDelegate {
width: control.width
text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
font.family: control.font.family
font.pointSize: control.font.pointSize
highlighted: control.highlightedIndex === index
hoverEnabled: control.hoverEnabled
}
}
Leave the font sizes as defaults and instead set the widths of your items. You could explicitly set the width of the ComboBox and TextField, or if you want to use the ColumnLayout to have consistent sizing of all the items, see example below,
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ColumnLayout {
anchors.left: parent.left
anchors.leftMargin: 20
width: text.width
Text {
id: text
text: "This is a sample Text"
}
ComboBox {
Layout.fillWidth: true
model: [
"A",
"B",
"C"
]
}
Text {
text: "Another Text"
}
TextField {
Layout.fillWidth: true
text: "User Input"
}
}
}
You can simply try setting: font.pointSize: 12 in both the combobox and text fields. This works for me on Qt 5.9 in Windows 10. I am still trying to figure how to change the font size inside the combobox drop down; will expand this answer when I know.

Use MenuBar component in a QQuickView on Windows

I am building a QML application that must work on Windows and Mac OS X. I want to manage the menus in QML so I started using the MenuBar component in my application. I am using a QQuickView in C++ to display my QML elements. My menus appear properly on Mac OS X but I get nothing displayed on Windows and no errors in the logs.
The documentation speaks about this component being linked to ApplicationWindow but as it was working fine on Mac OS I was hoping it would work the same anywhere.
Is there a way to fix this on Windows ?
It seems that QQuickView is not able to contain ApplicationWindow as a root object.
Have you tried to use QQmlApplicationEngine instead of QQuickView?
#include <QtGui/QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine("qml/untitled/main.qml");
QObject* root = engine.rootObjects().at(0);
static_cast<QWindow*>(root)->show();
return app.exec();
}
I faced with the same issue on Windows, and it helped me.
I had a look at the way this is done in the QML ApplicationWindow component and found a way to display my menu on Windows. The idea/hack is to use the property __contentItem of the MenuBar component and attach it to the root element. I also do this only if the menu is not native so that it works as it did before on Mac OS X.
TopMenu.qml
import QtQuick 2.1
import QtQuick.Controls 1.0
MenuBar {
Menu {
title: "Window"
MenuItem {
text: "SubMenu3"
shortcut: "Ctrl+s"
}
MenuItem {
text: "SubMenu2"
shortcut: "Ctrl+p"
}
MenuItem {
text: "Preferences"
shortcut: "Ctrl+,"
}
}
}
RootElement.qml
import QtQuick 2.1
Rectangle {
id: rootWindow
width: 400
height: 400
Item {
id: menuWrapper
anchors.fill: parent
TopMenu {
id: myTopMenu
}
states: State {
name: "hasMenuBar"
when: myTopMenu && !myTopMenu.__isNative
ParentChange {
target: myTopMenu.__contentItem
parent: rootWindow
}
PropertyChanges {
target: myTopMenu.__contentItem
x: 0
y: 0
width: menuWrapper.width
}
}
}
}

Resources