How to make QML window borderless? - c++

This is my QML file:
Rectangle {
width:640;
height:360;
Text {
text:qsTr("Agritrade");
anchors.centerIn:parent;
}//text
MouseArea {
anchors.fill:parent;
onClicked: {
Qt.quit();
}
}//mouse area
}
I wish to make the window borderless. How to set the properties for the Rectangle above?

It seems like impossible to set properties for Rectangle tag to make a borderless frame.
The only solution below is applicable (use 'setFlags' method):
//qml viewer
QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/agritrade/main.qml"));
viewer.setFlags(Qt::Window|Qt::FramelessWindowHint);
viewer.showExpanded();

Related

Why does my window not show?

I need to write a GrabWindow, so I derived my class GrabWindow from QQuickWindow:
#include <QtQuickWidgets/QtQuickWidgets>
#include <QString>
class GrabWindow : public QQuickWindow {
Q_OBJECT
public:
explicit GrabWindow(QQuickWindow *parent = nullptr);
public slots:
void capture(QString const &path);
};
// .CPP
#include "grab_window.h"
#include <QImage>
GrabWindow::GrabWindow(QQuickWindow *parent) : QQuickWindow(parent) {
}
void GrabWindow::capture(const QString &path) {
QImage img = this->grabWindow();
img.save(path);
}
After I registered it in QML: qmlRegisterType<GrabWindow>("myapp", 1, 0, "GrabWindow");
And after I defined my window in QML:
import QtQuick 2.4
import QtQuick.Controls 2.2
import QtQuick.Window 2.3
import myapp 1.0
GrabWindow {
id : translationWindow
width : 1024
height : 768
color: "transparent"
visibility: "FullScreen"
visible: true;
signal capture(string path)
MouseArea {
anchors.fill: parent
onClicked: translationWindow.capture("/home/user/saveTest.jpg")
}
}
But it doesn't show on start (I know it's transparent, I mean the grab window doesn't start to show). If instead of GrabWindow I use Window or ApplicationWindow then all works perfectly I am seeing a transparent full-screen window.
What's wrong?
Your GrabWindow is not shown because when you are setting the visible property it's not same as when you use Window's visible property.
Yours is just the visible property of QWindow.
Window does not directly instantiate QQuickWindow, it instantiates a private Qt class QQuickWindowImpl which overrides the visible property with a custom one.
It seems to delay the actual call of the QWindow::setVisible at a later time.
As such, I don't think QQuickWindow is meant to be inherited from. You could try doing visible = true in your Component.onCompleted but I'm not sure it will resolve your problem.
What I would advise you instead is not subclassing QQuickWindow but just creating a new type and pass it the existing Window.
Possible API could be :
Window {
id: myWindow
//...
MouseArea {
anchors.fill: parent
onClicked: WindowGrabber.grab(myWindow, path) //singleton type
}
}
or
Window {
id: myWindow
//...
WindowGrabber { // regular type
id: windowGrabber
window: myWindow
}
MouseArea {
anchors.fill: parent
onClicked: windowGrabber.grab(path) // you could even add a path property in WindowGrabber and not have it as a function parameter if that makes sense for your use case
}
}

Qt control OSM location from C++

In my Qt5.9 widget application project (Windows), I added a QQuickWidget in the ui and set the source file to a QML file.
My itention is to display open street maps in the QQuickWidget. By clicking a button, the center location of the map should change to specific lat/long coordinates.
The map gets displayed in the QQuickWidget as expected, however, I can't get the location change by button click to work.
I am using this QML file content to display the map:
//================================
// map.qml
//================================
import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
Item {
id: qmlMap
Plugin {
id: osmPlugin
name: "osm"
}
Map {
id: map
anchors.fill: parent
plugin: osmPlugin
center: QtPositioning.coordinate(59.91, 10.75)
zoomLevel: 10
objectName: "mainMap"
MapQuickItem {
id: marker
coordinate {latitude: 59.91
longitude: 10.75}
anchorPoint.x: image.width * 0.5
anchorPoint.y: image.height
sourceItem: Image {
id: image
height: 35
width: 35
source: "geotag.png"
}
function recenter(lat,lng) {
map.clearMapItems();
marker.coordinate.latitude = lat;
marker.coordinate.longitude = lng;
map.addMapItem(marker);
map.center.latitude = lat;
map.center.longitude = lng;
map.update();
}
}
}
}
On application start up, I can see the OSM centered on my specified location and I also can see the marker at the right location.
Loaded map on start up
However, when I click my button to call the function recenter(lat,lng) from C++, nothing seems to happen (no location change on map visible).
My C++ button code for location change is:
void mapproject::on_btnUpdatePos_clicked()
{
QQmlEngine engine;
QQmlComponent component(&engine, "qrc:/map.qml");
QObject *object = component.create();
QVariant returnedValue;
QVariant pos = QVariant(0);
if(object != NULL){
QMetaObject::invokeMethod(object, "recenter",
Q_RETURN_ARG(QVariant, returnedValue),
Q_ARG(QVariant, pos),
Q_ARG(QVariant, pos));
}
}
Why does the location change not work? Is there a mistake in my QML file or in my C++ code?
Assuming that the QQuickWidget has been added through Qt Designer and it is called quickWidget, so you can access it using ui->quickWidget.
To do a simple search you can set an objectName in the MapQuickItem:
MapQuickItem {
id: marker
objectName: "mapItem"
coordinate {latitude: 59.91
[...]
You should not create a new component, you should use the QQuickWidget, the first thing is to get the item that shows the QQuickWidget through the rootObject() method, then look for the child named mapItem and invoke the recenter method:
void MainWindow::on_btnUpdatePos_clicked()
{
QQuickItem *item = ui->quickWidget->rootObject();
QObject *object = item->findChild<QObject*>("mapItem");
QVariant posx = QVariant(-12.0464);
QVariant posy = QVariant(-77.0428);
if(object != NULL){
QMetaObject::invokeMethod(object, "recenter",
Q_ARG(QVariant, posx),
Q_ARG(QVariant, posy));
}
}
The complete example can be found in the following link

how pass TextField text from QString in C++?

Hi Guys, i need take the text of TextField QML then pass to QString in C++.
Firstpage.qml:
Component {
id: mainView
Row {
Image {
id: logo
anchors.fill: parent
source: "Imagens/jscalcadosLogo.png"
}
ColumnLayout {
id: layoutLogin
anchors.centerIn: parent
anchors.margins: 3
spacing: 3
TextField {
id: login
objectName: "login"
Layout.fillWidth: true
placeholderText: "Username"
}
Main.cpp:
int main(int argc, char *argv[]){
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
QQuickView *view = new QQuickView;
view->setSource(QUrl::fromLocalFile("FirstPage.qml"));
QObject *object = view->rootObject();
QObject *textin = object->findChild<QObject*>("login");
//QString input = textin->Property("text").toString(); // crash the program
return app.exec();
}
When i try convert Textin to QString the program crash
any idea ? i'm sorry for my bad english.
The general rule is: Don't read or write something in QML from C++
Instead, you shall create a QObject-derived instance in C++ that has a property for that text. You expose that QObject to QML, either by setting it as a context property or registering it as a singleton.
Then in QML you set afore-mentioned property - et voila - you have pushed the text from the QML world to the C++.
There are various questions on StackOverflow regarding the interaction of C++ and QML (I might search for them later, and probably flag your question as duplicate, for I am sure your question is not the first).
Also the documentation has more information on this.

QML object property changed from c++, but I can't see the result

So I could change the property of a certain QML object via C++ code, but I couldn't see the result on screen.
I have an item repeated 64 times, and I want a certain image to be displayed only for the 32nd item (from C++) so I used invokeMethod to access the object via C++ then I used setProperty to change the visibility, if I view it with qDebug the property "visible" did change, but I notice no difference on the screen I still cannot see the image, but if I change the visibility from qml, I can see it.
This is the C++ code:
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQuickView view;
view.setSource(QUrl("qrc:///main.qml"));
view.show();
QQuickItem* child;
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///Board.qml")));
QObject *rootObject = engine.rootObjects().first();
QQuickItem *qmlObject = rootObject->findChild<QQuickItem*>("grid")->findChild<QQuickItem*>("repeter");
QMetaObject::invokeMethod(qmlObject,"itemAt",Qt::DirectConnection, Q_RETURN_ARG (QQuickItem*,child), Q_ARG(int,32));
child=child->findChild<QQuickItem*>("pleaseWork");
qDebug() << child->property("visible");
child->setProperty("visible","true");
qDebug() << child->property("visible");
return app.exec();
}
I used qDebug to verify the property changed
This is the QML code :
Item
{
id: root
width: 8*45
height: 8*45
Grid
{
id: grid
objectName: "grid"
rows: 8
Repeater
{
objectName: "repeter"
model: 64
Image
{
objectName: "test"
width: 45; height: 45
source: "images/dark_square.png"
Image
{
id: isit
objectName: "pleaseWork"
visible: false
source: "images/avail_dark.png"
}
}
}
}
}
QQuickView and QQmlApplicationEngine are alternative ways to load and show QML views. What you are loading into QQmlApplicationEngine has nothing to do with the visible output of QQuickView.
In order to get things running, you need to change the top element of the QML file from Item to Window and show it on screen:
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:///Board.qml")));
// end of your code
QObject *rootObject = engine.rootObjects().first();
QQuickWindow *window = qobject_cast<QQuickWindow *>(rootObject);
if (!window) {
qDebug() << "Error: Your root item has to be a window.";
return -1;
}
window->show();
// continue with your code
QQuickItem *qmlObject = rootObject->findChild<QQuickItem*>("grid")->findChild<QQuickItem*>("repeter");

Animate Binding Change in Qt

I'm trying to find a way to do a transition on a QML element, when a binding changes. Say you have a Text element, with the text property bound to something. What I want is when the data in the binding changes, the element fades out (Still displaying old data), switches and fades back in with the new data (the actual transition occurring while the element isn't visible.)
I've been searching everywhere for a way to do this but I can figure it out. I've tried using Qt Quick animations within QML, but the data itself changes before the animation runs, leaving the animation unnecessary. I've tried creating a custom QDeclarativeItem object that calls an animation within the QDeclarativeItem::paint() but I can't figure out how to get it to actually run.
I should note here that I know my bindings are working fine as the displayed data changes, I just can't get these animations to run at the proper time.
Here is what I tried with QML:
Text {
id: focusText
text: somedata
Behavior on text {
SequentialAnimation {
NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 500 }
NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 500 }
}
}
}
And here is what I tried in implementing a custom QDeclarativeItem:
// PAINTER
void AnimatedBinding::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {
// Setup the pen
QPen pen(m_color, 2);
painter->setPen(pen);
painter->setOpacity(this->opacity());
// Draw the item
if (m_bindingType == QString("text")) {
QPropertyAnimation animation(this, "opacity");
animation.setDuration(1000);
animation.setStartValue(1);
if (drawn) {
animation.setStartValue(1);
animation.setEndValue(0);
animation.start();
} else drawn = true;
painter->drawText(boundingRect(), m_data.toString());
animation.setEndValue(0);
animation.start();
} else {
qCritical() << "Error unknown binding type!";
return;
}
}
But like I said, the animation that I start within the painter never actually fires.
Any tips? Anyone ever done this before? I've been banging my head on this for about a week.
How about doing it in qml only this ways :
Define a custom element of your own type, that behaves the way you want it to.
Use this element instead of traditional element to be animated.
eg. I have create a custom 'AnimatedText' type to have the fading in and fading out behavior on the text elements whenever text related to them changes.
File 1 : AnimatedText.qml
import QtQuick 1.0
Item
{
id: topParent
property string aText: ""
property string aTextColor: "black"
property int aTextFontSize: 10
property int aTextAnimationTime : 1000
Behavior on opacity { NumberAnimation { duration: aTextAnimationTime } }
onATextChanged:
{
topParent.opacity = 0
junkTimer.running = true
}
Timer
{
id: junkTimer
running: false
repeat: false
interval: aTextAnimationTime
onTriggered:
{
junkText.text = aText
topParent.opacity = 1
}
}
Text
{
id: junkText
anchors.centerIn: parent
text: ""
font.pixelSize: aTextFontSize
color: aTextColor
}
}
and in your main.qml
import QtQuick 1.0
Rectangle
{
id: topParent
width: 360
height: 360
AnimatedText
{
id: someText
anchors.centerIn: parent
aText: "Click Me to change!!!.."
aTextFontSize: 25
aTextColor: "green"
aTextAnimationTime: 500
}
MouseArea
{
anchors.fill: parent
onClicked:
{
someText.aText = "Some random junk"
}
}
}