Thumb wheel control?
Solved
QML and Qt Quick
-
Has anyone implemented a thumb-wheel type of control?
Something like this:
https://www.winccoa.com/documentation/WinCCOA/latest/en_US/Native_GEDI/Thumb_wheel.htmlIt's a bit like a tumbler but it would have no limits per se and it could have a horizontal or vertical orientation.
My goal is to tie the movement to an edit box so you could quickly get an arbitrary number in there.
Starting with a mouse area probably makes sense but the drawing aspect is more difficult. A three step gradient would give the appearance of it being round but there are also tick marks that would need to be drawn and ideally animated so it looks like you're rolling a wheel.
-
import QtQuick 2.6 import Sailfish.Silica 1.0 //probably use QtQuick.Controls instead import QtGraphicalEffects 1.0 import QtFeedback 5.0 Page { id: page allowedOrientations: Orientation.All // sailfishOS stuff // feedback - vibra HapticsEffect { id: vibrate attackIntensity: 10 attackTime: 10 intensity: 0.1 fadeIntensity: 0.1 fadeTime: 1 period: 1 duration: 100 running: false } // path rectangle - make it look like synth hardware Rectangle { id: root width: 220 height: 1200 color: "black" radius: 22 border { width: 11; color: "grey" } anchors.centerIn: parent clip: true // path PathView { id: path model: 100 width: parent.width height: parent.height anchors.centerIn: parent path: Path { id: pathView startX: root.width / 2 startY: 0 // play with this lot!! PathAttribute { name: "itemZ"; value: 0 } PathAttribute { name: "itemOpacity"; value: 0.25 } //PathAttribute { name: "itemAngle"; value: -90.0; } PathAttribute { name: "itemScale"; value: 0.5; } PathLine { x: root.width / 2; y: root.height * 0.4; } //PathPercent { value: 0.48; } PathLine { x: root.width / 2; y: root.height * 0.5; } //PathAttribute { name: "itemAngle"; value: 0.0; } PathAttribute { name: "itemScale"; value: 0.7; } PathAttribute { name: "itemOpacity"; value: 1.0 } PathAttribute { name: "itemZ"; value: 100 } PathLine { x: root.width / 2; y: root.height * 0.6; } //PathPercent { value: 0.52; } PathLine { x: root.width / 2; y: root.height; } //PathAttribute { name: "itemAngle"; value: 90.0; } PathAttribute { name: "itemScale"; value: 0.5; } PathAttribute { name: "itemOpacity"; value: 0.25 } PathAttribute { name: "itemZ"; value: 0 } } clip: true pathItemCount: 19 flickDeceleration: 50000 preferredHighlightBegin: 0.5 preferredHighlightEnd: 0.5 delegate: flipCardDelegate } // delegate Component { id: flipCardDelegate // this rectangle makes up scroll wheel color and shape Rectangle { id: wrapper width: 200 height: width/2 z: PathView.itemZ antialiasing: true visible: PathView.onPath scale: PathView.itemScale opacity: PathView.itemOpacity gradient: Gradient { GradientStop { position: 0.0; color: "#292929" } GradientStop { position: 0.5; color: "#494949" } GradientStop { position: 1.0; color: "#292929" } } border { width: 4; color: "black" } Label { text: index+1 visible: false anchors.centerIn: parent color: wrapper.PathView.isCurrentItem ? "green" : "red" } } } } // percentage label and percent icon Label { id: percentLabel font.pixelSize: 86 text: path.currentIndex + " %" anchors { top: root.bottom; topMargin: Theme.horizontalPageMargin; horizontalCenter: root.horizontalCenter } } }
-
Thank you so much! This gets me 95% of the way there.
-