WIP: Use spinbox from QtQuick.Controls 2

Signed-off-by: Addisu Z. Taddese <[email protected]>

include/gz/gui/qml/GzSpinBox.qml

@@ -15,15 +15,59 @@
  *
 */
 import QtQuick 2.9
-import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.4
-
-SpinBox {
-  style: SpinBoxStyle{
-    background: Rectangle {
-      implicitWidth: 70
-      implicitHeight: 40
-      border.color: "gray"
-    }
+import QtQuick.Controls 2.15
+
+Control {
+  id: root
+  signal editingFinished(real _value)
+  property alias minimumValue: spinBox.minimumValue
+  property alias maximumValue: spinBox.maximumValue
+  property alias value: spinBox.value
+  property real stepSize: 1.0
+  property alias decimals: spinBox.decimals
+  anchors.fill : parent
+
+
+  function decimalToInt(decimal) {
+    return decimal * spinBox.decimalFactor
+  }
+  SpinBox {
+      id: spinBox
+      value: decimalToInt(1.1)
+  anchors.fill : parent
+
+      property real minimumValue: 0
+      property real maximumValue: 100
+
+      from: decimalToInt(minimumValue)
+      to: decimalToInt(maximumValue)
+
+      stepSize: decimalToInt(root.stepSize)
+      editable: true
+      anchors.centerIn: parent
+
+      signal editingFinished(real _value)
+
+      property int decimals: 2
+      property real realValue: value / decimalFactor
+      readonly property int decimalFactor: Math.pow(10, decimals)
+
+      validator: DoubleValidator {
+          bottom: Math.min(spinBox.from, spinBox.to)
+          top:  Math.max(spinBox.from, spinBox.to)
+          decimals: spinBox.decimals
+          notation: DoubleValidator.StandardNotation
+      }
+
+      textFromValue: function(value, locale) {
+          return Number(value / decimalFactor).toLocaleString(locale, 'f', spinBox.decimals)
+      }
+
+      valueFromText: function(text, locale) {
+          return Math.round(Number.fromLocaleString(locale, text) * decimalFactor)
+      }
+      // onValueChanged: function(_value) {
+      //   editingFinished(_value)
+      // }
   }
 }

spinbox_test.qml

@@ -0,0 +1,25 @@
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.3
+
+import "include/gz/gui/qml"
+
+ApplicationWindow {
+  width: 800
+  height: 800
+
+  Rectangle
+  {
+    width: 300
+    height: 300
+    GzSpinBox {
+      id: maxForwardVelField
+      maximumValue: 100.0
+      minimumValue: -100.0
+      decimals: 2
+      // stepSize: 0.1
+
+    }
+  }
+}