maemo.org - Talk

maemo.org - Talk (https://talk.maemo.org/index.php)
-   SailfishOS (https://talk.maemo.org/forumdisplay.php?f=52)
-   -   onClicked to repeat when held (https://talk.maemo.org/showthread.php?t=100816)

Markkyboy 2019-08-18 10:27
onClicked to repeat when held
 
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,

Fuzzillogic 2019-08-18 11:34
Re: onClicked to repeat when held
 
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"...

Markkyboy 2019-08-18 12:16
Re: onClicked to repeat when held
 
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.

Fuzzillogic 2019-08-18 13:05
Re: onClicked to repeat when held
 
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
  }

Markkyboy 2019-08-18 16:32
Re: onClicked to repeat when held
 
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! :D

Thanks for your input Fuzzillogic, much appreciated.

Regards,


All times are GMT. The time now is 03:47.

vBulletin® Version 3.8.8