onClicked to repeat when held - maemo.org

Active Topics

[Announce] genwall a simple iptables firewall (90)
to Applications by paoletto - 1 day, 1 hr ago
N9 as WiFi repeater/extender? (1)
to Nokia N9 / N950 by paoletto - 1 day, 2 hrs ago
Sailfish OS flashing files (89)
to SailfishOS by monkeyisland - 2 days, 2 hrs ago
more...

Thread Tools

	Markkyboy	2019-08-18 , 10:27
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#1

Hi all,

I've struggled to find any hints on how to do this, so I ask here.

I have made a remote control app to control my LED RGBW lighting strips. The remote app has 40 buttons. 4 of these 40 buttons could do with being repeatable, so I can either single click or hold for multiple clicks. NOTE: I'm not actually using buttons, but instead, I'm using rectangles with a mouse area.

I would then use this for say, controlling brightness of my RGBW strip, just holding "Bright +" will go all the way and vice-versa.

How to achieve this please?

Thanks,

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Last edited by Markkyboy; 2019-08-18 at 12:17.

Quote & Reply |

The Following 2 Users Say Thank You to Markkyboy For This Useful Post:
imaginaryenemy, juiceme

Fuzzillogic	2019-08-18 , 11:34
Posts: 479 \| Thanked: 1,284 times \| Joined on Jan 2012 @ Enschede, The Netherlands	#2

Buttons have a "down" property. IIRC you can set a onDownChanged event handler. If down == true, set an interval using javascript's setInterval, in which you increase/decrease the brightness every x milliseconds. Clear the interval when down gets false.

The documentation refers to MouseArea, which give you the "pressed" property, and thus onPressed and onReleased. I'm not sure whether Button inherits these tho.

Incidentally, Qt 5.9 introduced "pressAndHold"...

Quote & Reply |

The Following 4 Users Say Thank You to Fuzzillogic For This Useful Post:
imaginaryenemy, Jordi, juiceme, taixzo

	Markkyboy	2019-08-18 , 12:16
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#3

Thanks for replying, but I've neglected a key piece of information: I'm not using buttons but rectangles with a mouse area.

I have played with onPressed/onReleased, but to no avail. I am also aware of press and hold but couldn't find a working example or even something I could adapt, it's not urgent, but I'd like to solve it.

@Fuzzillogic - I've updated my original question to reflect your comments, thanks.

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Quote & Reply |

The Following 2 Users Say Thank You to Markkyboy For This Useful Post:
imaginaryenemy, juiceme

Fuzzillogic	2019-08-18 , 13:05
Posts: 479 \| Thanked: 1,284 times \| Joined on Jan 2012 @ Enschede, The Netherlands	#4

Code:

Rectangle {
  width: 100; height: 100
  color: "green"

  Timer {
      interval: 200
      repeat: true
      id: timer
      onTriggered: counter.text = counter.count++
  }

  MouseArea {
      anchors.fill: parent
      onPressed: timer.start()
      onReleased: timer.stop()
  }
}

where the onTriggered here increases a counter (not in this snippet), but can do whatever you need it to do.

edit: it's QtQuick, so declarative all the things! I like this more:

Code:

  Timer {
      interval: 200
      repeat: true
      running: area.pressed
      onTriggered: counter.text = counter.count++
  }

  MouseArea {
      anchors.fill: parent
      id: area
  }

Quote & Reply |

The Following 6 Users Say Thank You to Fuzzillogic For This Useful Post:
coderus, imaginaryenemy, Jordi, juiceme, lal, taixzo

	Markkyboy	2019-08-18 , 16:32
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#5

Okay, thanks Fuzzi for your input, with a few glasses of wine and a couple of neatly rolled magical smoking sticks, I have arrived at a place where the code works, it ain't pretty, but hey, for now, this is for personal use

Right, taking some of your advice and code, I came up with this (this is a snippet of a very long single page);

This works, although it's bulky, untidy and repetitive, but my UI now has 40 fully functioning buttons (rectangles)

Code:

            // First row of 10, consists of rectangle, mouse and label
                Row { id: row; anchors.horizontalCenter: parent.horizontalCenter; spacing: 45
                    Rectangle { id: brightUp; width: 80; height: 80; radius: 40; color: "white"
                    MouseArea {
                        id: mouse
                        anchors.fill: brightUp
                        onClicked: {
                            getData()
                            function getData(url) {
                                var xhttp = new XMLHttpRequest()
                                xhttp.onreadystatechange = function(myxhttp) {
                                    if (xhttp.readyState == 4 && xhttp.status == 200) {
                                        led.opacity = 1.0
                                        timer.start()
                                    }
                                    return function() {
                                        if(myxhttp.readyState === 4) callback(myxhttp)
                                    }
                                }
                                xhttp.open("GET", "http://192.168.4.1/ir?code=16726725")
                                xhttp.send('')
                            }
                        }
                        // Stop/start the repeater
                        onPressed: {
                            console.log("Repeat triggered")
                            pressTimer.start()
                    }
                    // This timer is purely to time the flashing of a virtual LED on my app's UI
                    Timer {
                        id: timer
                        interval: 50
                        repeat: true
                        running: false
                        onTriggered: {
                            led.opacity = 0.0
                        }
                    } // This timer is for repeating a held mouse click
                    Timer {
                        id: pressTimer
                        interval: 200
                        running: mouse.pressed
                        repeat: true
                        onTriggered: {
                            timer.start()
                            mouse.clicked(mouse)
                            console.log("Repeat started")
                        }
                    }

                    // Other stuff . . .

Now, it is time to look at slimming down this 1000 line page into modules/other files.

I also note that there is a github page for RGB IR WIFI control, but it meant uploading new unknown code to my NodeMCU and for now, I'm happy with the way my set up works, albeit, as previously stated; bulky, untidy....in dire need or refinement, but for who?, it works!