I have a very basic app that I believe should change the width of an image, but it does nothing... can anyone tell me why, when I click on the image, nothing happens to the image?
(note, the image itself doesnt really matter, Im just trying to figure out how to shrink and grow and image in JavaFX)
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.input.MouseEvent;
var w:Number = 250;
Frame {
title: "Image View Sample"
width: 500
height: 500
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
stage: Stage {
content: [
ImageView {
x: 200;
y: 200;
image: Image {
url: "{__DIR__}/c1.png"
width: bind w;
}
onMouseClicked: function( e: MouseEvent ):Void {
w = 100;
}
}
]
}
}
Thanks heaps!
Try to bind scale attributes:
import java.lang.System;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.input.MouseEvent;
var w:Number = 1;
Frame {
title: "Image View Sample"
width: 500
height: 500
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
stage: Stage {
content: [
ImageView {
x: 200
y: 200
anchorX:200
anchorY:200
scaleX:bind w
scaleY:bind w
image: Image {
url: "{__DIR__}/time.png"
}
onMouseClicked: function( e: MouseEvent ):Void {
w += 0.1;
}
}
]
}
}
Thanks for the reply, sorry for the delay getting back to you, but it turns out that all you need to do is to bind the image itself:
image: bind Image {
url: "{__DIR__}/time.png"
width: w;
}
And that seems to do the trick, which personally I find a bit missleading, but hey, it works
Related
There are several questions on this subject that are unrelated to my question and They did not produce any results for me.
Imagine I have a splash screen with AnimatedImage in QML that I want to display when my heavy components are loading in the background, so I use a Loader to load assets in background, but when the loader starts loading my UI freezes(i.e. that AnimatedImage), I can see that BusyIndicator not freezes.
I have provided the full source code in the github repository so that you may test it more easily.
my questions are:
Do Loaders really run in the background (for example, if I'm trying to connect to a server in my constructor, can Loader handle this situation or do I have to run it in another thread)?
How should such scenarios be handled so that I do not see any glitches?
window.qml
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts
Window {
id:mainWindow
y:100
width: 640
height: 480
visible: true
flags: Qt.FramelessWindowHint
//splash screen
Popup {
id: popup
width: mainWindow.width
height: mainWindow.height
modal: false
visible: true
Overlay.modeless: Rectangle {
color: "#00000000"
}
//Splash loader
Loader{
id: splash
anchors.fill: parent
source: "qrc:/Splashscreen.qml"
}
}
// Timer that will start the loading heavyObjects
Timer {
id: timer
interval: 2000
repeat: false
running: true
onTriggered: {
loader.source = "qrc:/heavyObjects.qml"
loader.active = true
}
}
//write a loader to load main.qml
Loader {
id: loader
anchors.fill: parent
asynchronous: true
active: false
//when loader is ready, hide the splashscreen
onLoaded: {
popup.visible = false
}
visible: status == Loader.Ready
}
}
SplashScreen.qml
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
Item {
Rectangle {
id: splashRect
anchors.fill: parent
color: "white"
border.width: 0
border.color: "black"
AnimatedImage {
id: splash
source: "qrc:/images/Rotating_earth_(large).gif"
anchors.fill: parent
}
}
}
heavyObject.qml
import QtQuick
Item {
function cumsum() {
for(var j=0;j<100;j++){
var p = 0
for (var i = 0; i < 1000000; i++) {
p *= i
}
}
return ""
}
// show dummy text that this is the main windows
Text {
text: "Main Window" + String(cumsum())
anchors.centerIn: parent
}
}
Most things you do in QML are handled in the QML engine thread. If you do something heavy in that thread, it will block everything else. I haven't checked your source code, but, in terms of heavy initialization, we can break it up with Qt.callLater() or similar so that the QML engine thread can catch up on UI/UX events.
For example, in the following:
I changed cumsum from a function to a property
I introduced calcStep for do a calculation for one j iteration
I use Qt.callLater to instantiate the next iteration
I kick off the calculation during Component.onCompleted
property string cumsum
function calcStep(j) {
if (j >= 100) {
cumsum = new Date();
return;
}
for (var i = 0; i < 1000000; i++) {
p *= i
}
Qt.callLater(calcStep, j+1);
}
Component.onCompleted: calcStep(0)
}
If your initialization is more sophisticated, you may want to give Promises a try. This allows you to write asynchronous routines in a synchronous type of way, e.g.
property string cumsum
function calc() {
_asyncToGenerator(function*() {
for(var j=0;j<100;j++){
var p = 0
status = "j: " + j;
yield pass();
for (var i = 0; i < 1000000; i++) {
p *= i
}
}
cumsum = new Date();
})();
}
function pass() {
return new Promise(function (resolve, reject) {
Qt.callLater(resolve);
} );
}
Component.onCompleted: calc()
In the above, the cumsum calculation has been using a derivative of the async/await pattern. For this, to work I make use of _asyncToGenerator provided by a transpiler on babeljs.io. This is required since the QML/JS does not support async/await pattern until Qt6.6.
The pass() function operates similarly to Python pass but has my implementation of Qt.callLater wrapped in a Promise. Invoking it with yield pass(); does nothing but allows your function to momentarily release control so that the UI/UX events can catch up.
import QtQuick
import QtQuick.Controls
Page {
property string cumsum
property string status
// show dummy text that this is the main windows
Text {
text: "Main Window: " + cumsum
anchors.centerIn: parent
}
Text {
text: status
anchors.horizontalCenter: parent.horizontalCenter
y: parent.height * 3 / 4
}
function calc() {
_asyncToGenerator(function*() {
for(var j=0;j<100;j++){
var p = 0
status = "j: " + j;
yield pass();
for (var i = 0; i < 1000000; i++) {
p *= i
}
}
cumsum = new Date();
})();
}
function pass() {
return new Promise(function (resolve, reject) {
Qt.callLater(resolve);
} );
}
function _asyncToGenerator(fn) {
return function() {
var self = this,
args = arguments
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args)
function _next(value) {
_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value)
}
function _throw(err) {
_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err)
}
_next(undefined)
})
}
}
function _asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg)
var value = info.value
} catch (error) {
reject(error)
return
}
if (info.done) {
resolve(value)
} else {
Promise.resolve(value).then(_next, _throw)
}
}
Component.onCompleted: calc()
}
You can Try it Online!
If you are interested in some of the work I've done with async and QML Promises refer to the following GitHub projects:
https://github.com/stephenquan/qt5-qml-promises
https://github.com/stephenquan/qt5-qml-promises-demo
I have this main.qml:
import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.5
ApplicationWindow {
...
Item {
// This Item is to provide needed properties for functionality in the original app that was elided out in this example.
// It was left in in case it's relevant to the problem.
...
Column {
...
Text {
text: qsTr("Masked text")
SlidingMask {
id: testMask
anchors.fill: parent
...
}
}
Row {
Button {
id: btnRevealText
text: qsTr("Reveal")
...
}
Button {
id: btnHideText
text: qsTr("Hide")
...
}
}
}
}
Connections {
target: btnRevealText
onPressed: testMask.reveal()
}
Connections {
target: btnHideText
onPressed: testMask.hide()
}
}
And this SlidingMask.qml that's registered in the qml.qrc:
import QtQuick 2.0
Rectangle {
...
function hide() {
...
}
function reveal() {
...
}
}
When I run the app and try to press the buttons, I get the following errors:
TypeError: Property 'hide' of object SlidingMask_QMLTYPE_7(0x19991132c50) is not a function
TypeError: Property 'reveal' of object SlidingMask_QMLTYPE_7(0x19991132c50) is not a function
However, if I try changing the Connections to alter a property of the SlidingMask instead of calling a function, it works fine.
I've also tested this component previously and didn't run into any problems then, although I wasn't using Connections in that test.
I've searched here and on Google for an answer, but nothing I've found seems relevant to my situation. How would I fix this?
Here is a simple example which works properly:
//main.qml
ApplicationWindow {
id: window
width: 640
height: 480
visible: true
Column{
ItemWithFunction{
id: sc
width: 100
height: 100
}
Button{
id: btn1
text: 'Test Connection'
}
}
Connections{
target: btn1
onPressed: sc.testFunction();
}
}
//ItemWithFunction.qml
Rectangle{
color: 'red'
function testFunction(){
console.log("SOMETHING HAPPENED")
}
}
It seems that you are not putting your functions in SlidingMask root but in one of its child components.
Below is a function from TimelinePresenter.qml which is a custom component I created.
function createMenu() {
var menuComp = Qt.createComponent("Menu.qml");
if( menuComp.status != Component.Ready )
{
if( menuComp.status == Component.Error )
console.debug("Error: " + menuComp.errorString());
return;
}
}
It gives the error:
Error: qrc:/qml/timeline/Menu.qml:-1 No such file or directory
TimelinePresenter.qml is a resource file specified in the .qrc file and its path is qml/timeline as shown in error message so qml engine is trying to find the Menu.qml there expectedly. How can I specify the path to create qt's Menu component?
Edit:
my resources.qrc file
<RCC>
<qresource prefix="/">
<file>qml/main_window.qml</file>
<file>qml/timeline/TimelineViewItem.qml</file>
<file>qml/timeline/HorizontalLine.qml</file>
<file>qml/timeline/TimelineView.qml</file>
<file>qml/timeline/VerticalLine.qml</file>
<file>qml/timeline/timeline-item/timeline_item.h</file>
<file>qml/timeline/TimelinePresenter.qml</file>
<file>qml/timeline/timeline-item/analog_timeline_item.h</file>
<file>qml/timeline/timeline-item/digital_timeline_item.h</file>
<file>qml/timeline/timeline_presenter_backend.h</file>
<file>qml/ControllableListPresenter.qml</file>
<file>qml/controllable_list_backend.h</file>
<file>qml/controllable-popup/AddControlUnitPopup.qml</file>
<file>qml/styled/CenteredPopup.qml</file>
<file>qml/styled/StyledTextField.qml</file>
</qresource>
</RCC>
You are confusing the creation of a component with the creation of an object that belongs to a component.
The Menu component already exists and is provided by Qt, what you must do is create the object using the Qt.createQmlObject() method.
Example:
var menuObj = Qt.createQmlObject('import QtQuick.Controls 2.0 ; Menu {
MenuItem { text: "Cut" }
MenuItem { text: "Copy" }
MenuItem { text: "Paste" } }', parentItem, "dynamicSnippet1");
Complete Example:
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
id: parentItem
Component.onCompleted: {
var menu = Qt.createQmlObject('import QtQuick.Controls 2.0 ; Menu {
MenuItem { text: "Cut" }
MenuItem { text: "Copy" }
MenuItem { text: "Paste" }
}', parentItem,"dynamicSnippet1");
// test: open menu
menu.open()
}
}
In the case you have described in your comments, I would suggest to only create one Menu and only popup() it at the place where you have clicked, setting it in a specific context.
I prepared a small example to illustrate how the Menu could be used:
import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls 2.3 // Necessary for the "Action" I used. Create the Menu otherwise if you are bound to older versions.
import QtQml 2.0
ApplicationWindow {
id: window
visible: true
width: 600
height: 600
Repeater {
model: ListModel {
ListElement { color: 'black'; x: 400; y: 50 }
ListElement { color: 'black'; x: 100; y: 190 }
ListElement { color: 'black'; x: 70; y: 80 }
ListElement { color: 'black'; x: 30; y: 0 }
ListElement { color: 'black'; x: 340; y: 500 }
ListElement { color: 'black'; x: 210; y: 10 }
}
delegate: MouseArea {
x: model.x
y: model.y
width: 50
height: 50
property QtObject modelItem: model
onClicked: menu.openMenu(x + mouse.x, y + mouse.y, modelItem)
Rectangle {
color: model.color
anchors.fill: parent
}
}
}
Menu {
id: menu
Action { text: "green" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "blue" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "pink" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "yellow" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "orchid" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "orange" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "teal" ; onTriggered: { menu.currentContext.color = text } }
Action { text: "steelblue"; onTriggered: { menu.currentContext.color = text } }
property QtObject currentContext
function openMenu(x, y, context) {
currentContext = context
popup(x, y)
}
}
}
Though I think this answer might solve your problem, I know that it is not really the answer to the question you stated initially.
For the Component-part: I think you misunderstood what a Component is - it is not an Item. It is a prestage in the creation of QtObjects and more something like a prototype or configured factory.
So your function - if it would work - would end at the creation of a invisible thing, from which you could create objects, by calling createObject().
Creating Components is the right thing to do, if you want to create an object at a later time and you might want to create similar objects multiple times, either by JavaScript or by other QML-types that expect Components as some input (e.g. delegates).
To create Components you have multiple possibilities, e.g.:
Qt.createComponent(url)
Component { SomeItem {} }
The first expects you to know the url, which in your case, you do not. To circumvent that, the easiest solution is, to create a new File, like MyMenu.qml
that only contains the Menu {} - then you can create a Component from this.
The second does not expects you to know the url, but it is not dynamically created.
Component {
id: myCmp
Menu {
}
}
onSomeSignal: myCmp.createObject({ prop1: val1 }, this)
Here the Component is automatically created when the object in the file is instantiated. This makes that (one time) initially a bit slower, since more code has to be processed, but you don't have to do it later.
Creating objects like eyllanesc shows with Qt.createQmlObject("Write a new QML-File here") might be also used to create a Component if the top-level element is a Component. If you don't have a Component as top-level, it will also first create a component that is once used to create a QtObject and then is discarded. It is the slowest but most flexible way to dynamically create objects.
I'm trying to get a Canvas to draw lines in the same order as presented in this xml-file:
<root>
<doc><nopeus>80.0</nopeus><aika>40.0</aika></doc>
<doc><nopeus>110.0</nopeus><aika>80.0</aika></doc>
<doc><nopeus>120.0</nopeus><aika>120.0</aika></doc>
<doc><nopeus>190.0</nopeus><aika>160.0</aika></doc><doc><nopeus>243.0</nopeus><aika>200.0</aika></doc><doc><nopeus>260.0</nopeus><aika>240.0</aika></doc><doc><nopeus>300.0</nopeus><aika>280.0</aika></doc><doc><nopeus>350.0</nopeus><aika>320.0</aika></doc>
</root>
QML-file with XmlListModel:
import QtQuick 2.0
import Sailfish.Silica 1.0
import QtQuick.XmlListModel 2.0
Page {
id: page
property alias startx : coords.mX
property alias starty : coords.mY
Item {
id: coords
property int mX: 0
property int mY: 0
}
XmlListModel {
id: myxml
source: "/home/nemo/filename.xml"
query: "/root/doc"
XmlRole { name: "nopeus"; query: "nopeus/string()" }
XmlRole { name: "aika"; query: "aika/string()" }
}
ListView {
model: myxml
anchors.fill: page
delegate:
Item {
Chart {
xc: coords.mX;
yc: coords.mY;
xd: aika;
yd: nopeus;
}
}
}
}
Chart.qml:
import QtQuick 2.0
Rectangle {
id: myrect
width: 540
height: 960
color: "transparent"
property int xd: 0
property int yd: 0
property int xc: 0
property int yc: 0
Canvas {
id: mycanvas
width: myrect.width; height: myrect.height;
onPaint: {
var context = getContext('2d')
context.strokeStyle = "#FF0000"
context.lineWidth = 2
context.beginPath()
context.moveTo(xc,yc)
context.lineTo(xd,yd)
context.stroke()
startx = xd
starty = yd
}
}
}
The question is why is the resulting path messed up when inserted in the ListView via delegates? I have tried to sort the path items separately, via a function and another ListModel but the result is the same.
Here is a screenshot:
Delegates are created for each item in a model. Your model contains eight items (as of your input). Hence, you create eight Canvases (each one as a ListView item, i.e. at (theoretical) increasing y w.r.t. ListView origin coordinates).
Combile these problems with the (probably wrongly set) starting points...and you get a random mess! You can't see that, since the Canvases tend to overlap due to sizing/constraints set on the component.
In this case you just need one Canvas on which each myxml item is painted. Here is a (naive) adaptation of your code which correctly shows the path stored in the xml file:
// main.qml
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.XmlListModel 2.0
Window {
visible: true
width: 600
height: 600
XmlListModel {
id: myxml
source: "qrc:/filename.xml" // added to the resources
query: "/root/doc"
XmlRole { name: "nopeus"; query: "nopeus/string()" }
XmlRole { name: "aika"; query: "aika/string()" }
onStatusChanged: {
if(status === XmlListModel.Ready)
comp.mod = myxml // set the model ASA it is ready to be used
}
}
Chart {
id: comp
anchors.fill: parent
mod: myxml
}
}
// Chart.qml
import QtQuick 2.4
import QtQuick.XmlListModel 2.0
Item {
property var mod: undefined
onModChanged: {
if(mod)
mycanvas.requestPaint() // repaint only when the model is available
}
Canvas {
id: mycanvas
width: parent.width; height: parent.height;
onPaint: {
var context = getContext('2d')
context.strokeStyle = "#FF0000"
context.lineWidth = 2
context.beginPath()
context.moveTo(0,0)
// iterate over all the point to print them
for(var i = 0; i < mod.count; i++)
{
var point = mod.get(i)
context.lineTo(point.aika, point.nopeus)
}
context.stroke()
}
}
}
The resulting path rendered:
I need a way to have a gray scale image in an ImageView and on mouse moved if the cursor position is in the ImageView bounds to show a colored spotlight on the mouse position.
I have created a sample to help you understand what I need. This sample negates the colors of a colored image on the onMouseMoved event.
package javafxapplication3;
import javafx.scene.effect.BlendMode;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
var spotlightX = 0.0;
var spotlightY = 0.0;
var visible = false;
var anImage = Image {
url: "{__DIR__}picture1.jpg"
}
Stage {
title: "Spotlighting"
scene: Scene {
fill: Color.WHITE
content: [
Group {
blendMode: BlendMode.EXCLUSION
content: [
ImageView {
image: anImage
onMouseMoved: function (me: MouseEvent) {
if (me.x > anImage.width - 10 or me.x < 10 or me.y > anImage.height - 10 or me.y < 10) {
visible = false;
} else {
visible = true;
}
spotlightX = me.x;
spotlightY = me.y;
}
},
Group {
id: "spotlight"
content: [
Circle {
visible: bind visible
translateX: bind spotlightX
translateY: bind spotlightY
radius: 60
fill: RadialGradient {
centerX: 0.5
centerY: 0.5
stops: [
Stop { offset: 0.1, color: Color.WHITE },
Stop { offset: 0.5, color: Color.BLACK },
]
}
}
]
}
]
},
]
},
}
To be more specific:
I want to display a colored image in grayscale mode
On mouseover I want a spotlight to be colored, in contrast with the rest of the image which is going to be rendered in grayscale mode(as mentioned in requirement no.1 above). The spotlight will move in the same direction as the mouse cursor
Here is how I would do it. Use 2 images, one colour and one grayscale. Use a clip on the grayscale. Below is a sample code
var color:ImageView = ImageView {
image: Image {
url: "{__DIR__}color.jpg"
}
}
var x:Number = 100;
var y:Number = 100;
var grayscale:ImageView = ImageView {
image: Image {
url: "{__DIR__}grayscale.jpg"
}
clip: Circle {
centerX: bind x
centerY: bind y
radius: 40
}
onMouseDragged: function (e: MouseEvent): Void {
x = e.sceneX;
y = e.sceneY;
}
}
Stage {
title: "Application title"
scene: Scene {
width: 500
height: 500
content: [
color, grayscale
]
}
}
Unfortunately I can't offer a direct answer to this, but I don't think you can achieve what you're after purely using Blend modes, hopefully someone will correct me if I'm wrong.
I would suggest exploring having both a grayscale and color version of the image, where the color image is "off-screen", then have the spotlight element refer to the portion of the color image corresponding to the same area as the on-screen grayscale image. That way it would appear as though the moveable spotlight was highlighting a portion of the grayscale image in colour. In other words, the spotlight is actually "over" the colour image, even though it's off-screen.