I am building a simple QML application that makes use of the ArcGIS SDK, the purpose right now is just to learn the SDK features.
What I'd like to do is have a zoomable map and a text box that displays the current map scale. Below is the code I have written for this, based upon the samples on the ArcGIS website.
import QtQuick 2.6
import QtQuick.Controls 1.4
import Esri.ArcGISRuntime 100.1
ApplicationWindow {
id: appWindow
width: 800
height: 600
title: "Untitled"
MapView {
id: mainmapview
attributionTextVisible: false
anchors.topMargin: 0
anchors.rightMargin: 0
anchors.fill: parent
focus: true
Map {
id: mainmap
BasemapLightGrayCanvasVector {}
}
onMapScaleChanged: scaletext.text=mainmapview.scale.toString()
Text {
id: scaletext
x: 10
y: 10
width: 285
height: 45
text: qsTr("Text")
font.pixelSize: 12
}
}
}
The map loads and I can see it OK, but the scale textbox doesn't work: it always shows the scale as '1', no matter how much I zoom in or out. Obviously this isn't correct. Am I messing up the type conversion to text?
Any pointers as to how to resolve this would be great. Thanks.
Actually I figured it out myself. This line:
onMapScaleChanged: scaletext.text=mainmapview.scale.toString()
Should be:
onMapScaleChanged: scaletext.text=mainmapview.mapScale.toString()
Rather than delete the question I've answered it in case anyone else has the same problem and can find this through google.
Related
I just made the change from Qt 5.12.3 to 6.1.2. Having done this I went ahead and compiled a very simple QML App:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
ApplicationWindow {
id: mainWindow
visible: true
//visibility: Window.Maximized
width: 1000
height: 800
title: qsTr("Hello World")
Button {
id: myTestButton
width: 100
height: 50
text: "Click Me!"
anchors.centerIn: parent
//hoverEnabled: false
onClicked: {
console.log("Button Was clicked")
}
}
}
When I hover over the button now, it slowñy gets covered by a slight blue tranparent overlay while the mouse is over the button. I can disable this by setting hoverEnabled to false, but I much rather change it to something that I can use. How can change the color of this hover overlay?
Within Button {} try adding
flat: true
The default value is false and highlights the background of the button when hovered over.
This seemed like something that was imposed by the default style used on Windows (this was changed in Qt6). Probably from https://github.com/qt/qtdeclarative/blob/d6961c09de36e15c57f29109edf5fbfef53ef4d4/src/quickcontrols2/windows/Button.qml#L19 (but I'm not completely certain).
I couldn't find any obvious way of customizing this, therefore I switched the style QML was using (in my case globally, in C++, before loading anything):
QQuickStyle::setStyle("Fusion");
(Other ways of selecting styles exist)
Obviously this does change the overall appearance of the application, but that may not matter if you're heavily customizing all your components.
If you do want to customize the effect instead of disabling it, then you're probably still better switching styles, and then customizing your background item as proposed in one of the other answers. Otherwise it'll almost certainly fight with whatever customization you add in background. The Qt documentation discourages customization of the Windows style and advises you to base a customized control on "a style that's available on all platforms".
This is an example with the help of qt documentation:
Button {
id: control
text: "First"
Layout.fillWidth: true
hoverEnabled: true
background: Rectangle {
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
border.color: control.down ? "#ff0000" : (control.hovered ? "#0000ff" : "#00ff00")
border.width: 1
radius: 2
}
}
I want to have a rectangle that has a background animation.
take a look at this
codepen.io/shshaw/pen/DxJka
How can I set this as my rectangle background so that it shows this animation in my application?
I want to be able to "load" premade css animations like the one in the link.
If you think to use css, you can use a WebView and in this WebView you can load a html file from resource that read css file from resources too
Within QML there is the possibility to use particle emitters, see Qt Docs for some information. The following should get you going a bit.
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Particles 2.0
Item {
Rectangle {
color: "#F9A72B"
anchors.fill: parent
}
ParticleSystem { id: particles }
ImageParticle {
system: particles
source: "qrc:/cloud.svg"
alpha: 0.4
alphaVariation: 0.2
}
Emitter {
system: particles
emitRate: 1
lifeSpan: 70000
velocity: PointDirection { x: -10; xVariation: -5; }
size: 20
sizeVariation: 10
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 5
}
}
Obviously, you will have to play with the parameters to get it to your liking.
I'm learning to use Qt and QML. Right now, I'm trying to use a ListView, and I mostly got it to work, except for this one little visual bug.
When I run the code, at first it looks fine. But if I scroll a little bit, the top item disappears completely. It only appears again when scrolling back enough so that it is entirely within bounds. In the mean time, there's only a ugly blank spot in the list. That happens with every item when it goes over the top bound.
I want the items to be partially drawn. The library is clearly capable of doing this, since this problem doesn't happen in the lower bound, but I simply cannot figure out how to do it.
Here's a simplified version of my code:
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qml.Net"
ListView {
anchors.fill: parent
spacing: 100
model: ["#111111", "#222222", "#333333", "#444444", "#555555", "#666666"]
delegate: Item {
Rectangle {
width: 400
height: 100
color: modelData
Text {
anchors.centerIn: parent
text: modelData
}
}
}
}
}
And here are some pictures of the problem. First image is correct, second image shows the error. Also, notice how the bottom item is correctly drawn.
Correct at first
Wrong after a little bit of scrolling
Qt 5.12
The problem is caused by the "spacing" property that is unnecessary in your case. The solution is to remove that property and rewrite the logic as follows:
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qml.Net"
ListView {
anchors.fill: parent
model: ["#111111", "#222222", "#333333", "#444444", "#555555", "#666666"]
delegate: Rectangle {
width: parent.width
height: 100
color: modelData
Text {
anchors.centerIn: parent
text: modelData
}
}
}
}
I can use AnimatedImage in Qt 5.9 which works on GIFs like this;
import QtQuick 2.7
import QtQuick.Controls 2.2
ApplicationWindow
{
visible: true
width: 640
height: 480
Rectangle
{
width: animation.width;
height: animation.height + 8
AnimatedImage
{
id: animation;
source: "myanimation.gif"
}
Rectangle {
height: 8
width: animation.currentFrame/animation.frameCount * animation.width
y: animation.height
color: "red"
Component.onCompleted: console.log("framecount ", animation.frameCount);
}
}
}
I get a lot of error messages too. This is printed over and over;
QQmlExpression: Expression qrc:/main.qml:26:20 depends on non-NOTIFYable properties:
QQuickAnimatedImage::frameCount
I took my example code from here; http://doc.qt.io/qt-5/qml-qtquick-animatedimage.html
which doen't work at all, something wrong with putting frameCount into a property, so i changed that in my version.
I would like to animate a png like an apng. Apparently there used to be mng support, but it is not there anymore.
So i call QMovie::supportedFormats which returns only GIF (on Windows).
My question:
How can i either use AnimatedImage on a format that supports non-palettised color (eg png etc) or is there another way to animate an image that would work?
Thanks for any info.
It seems like those image formats are not shipped with the standard installation of Qt/QML. You can however install them as a plugin.
See:
Documentation: Qt Image Formats
Code/GitRepository
I am new to QT and want to develop a QT Quick app for the raspberry pi and its touch LCD display. The app should have several screens (sorry, not sure what the right terminology is, with screen I mean a state of the app which fills the whole display of the Raspberry Pi) and there should be buttons to switch between those screens. How is it possible to switch to a different screen when I press a button?
I tried using loader but (right now I am testing on the Desktop not the Raspberry) it opens the qml file in a new window, but I would like to have the content of the original window replaced.
Edit:
Yes, I plan using EGLFS. I enclose some code which does in principle what I want. However, I am not sure if this is the right way to do things: I put the screens I want to have into their own qml file, and toggle their visibility through buttons our mouse areas:
main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 800
height: 460
title: qsTr("Hello World")
Page1 {
id: page1
visible: true
}
Page2 {
id: page2
visible: false
}
}
Page1.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
Item {
Button {
id: button1
width: 200
height: 40
text: qsTr("To second page")
onClicked: {
page2.visible=true
page1.visible=false
}
}
}
Page2.qml
import QtQuick 2.3
import QtQuick.Window 2.2
Item {
Text {
id: text1
x: 181
y: 153
text: qsTr("Second Page")
font.pixelSize: 12
}
Rectangle {
id: rectangle
x: 252
y: 222
width: 200
height: 200
color: "#000000"
border.color: "#f12525"
}
MouseArea {
id: mouseArea
x: 234
y: 209
width: 244
height: 225
onClicked:{
page1.visible=true
page2.visible=false
}
}
}
I would venture to guess that most likely you want to use Qt5's eglfs mode on the raspberry pi. This gets rid of the normal desktop and runs your Qt5 (regular or QML) app full screen. When I last did this, I needed to compile Qt5 myself. That is something you will either want to figure out cross compiling for, or use a RaspberryPi 3 (the results can then be copied to slower Raspberry Pis if desired). I worked from the guide at https://wiki.qt.io/RaspberryPi2EGLFS
It was pretty trivial to run the program then in a window on a linux desktop or full screen on a Raspberry Pi with touch screen (both the special 7" screen or a generic 22" touch display).
A newer looking alternative to using eglfs is apparently the QtWayland Compositor. I haven't used it, but there is an interesting presentation on using it for full screen embedded applications from the most recent (2017) FOSDEM, available here: https://fosdem.org/2017/schedule/event/device_specific_compositors/