add rotary's step

logic/include/viewModel/MainViewModel.h

@@ -16,8 +16,8 @@ class MainViewModel : public QtMvvm::ViewModel
 
 	Console * panel;
 
-	MVVM_PROPERTY(int, dialStepInc, 1)
+	MVVM_PROPERTY(int, stepInc, 1)
-	MVVM_PROPERTY(int, dialStepDec, -1)
+	MVVM_PROPERTY(int, stepDec, -1)
 
 	//Top Left
 	BUTTON_LED_PROPERTY(patient, Patient, false, LedOFF)
@@ -94,8 +94,8 @@ class MainViewModel : public QtMvvm::ViewModel
 	LED_PROPERTY(depthCenter, LedOFF) //zoom -> depthCenterLed
 	LED_PROPERTY(depthBottom, LedOFF) //depth -> depthBottomLed
 	LED_PROPERTY(focus, LedOFF) //angle -> focusLed
-	LED_PROPERTY(focusCenter, LedOFF) //focus zone -> focusCenterLed
+	LED_PROPERTY(focusCenter, LedOFF) //focusZone -> focusCenterLed
-	LED_PROPERTY(focusBottom, LedOFF) //focus-depth -> focusBottomLed
+	LED_PROPERTY(focusBottom, LedOFF) //focusDepth -> focusBottomLed
 
 	BUTTON_PROPERTY(depthCenter, DepthCenter, false)
 	BUTTON_PROPERTY(focusCenter, FocusCenter, false)

logic/include/viewModel/utils/Property.h

@@ -63,14 +63,14 @@
 	void NAME ## LeftHandle() { \
 		if(NAME ## Left()) \
 		{ \
-			panel->rotate ## CAP_NAME(dialStepDec()); \
+			panel->rotate ## CAP_NAME(stepDec()); \
 			qDebug() << #NAME << "decresed"; \
 		} \
 	} \
 	void NAME ## RightHandle() { \
 		if(NAME ## Right()) \
 		{ \
-			panel->rotate ## CAP_NAME(dialStepInc()); \
+			panel->rotate ## CAP_NAME(stepInc()); \
 			qDebug() << #NAME << "incresed"; \
 		} \
 	}

ui/const/Const.qml

@@ -25,4 +25,11 @@ QtObject {
 	property var radiusLong: 44
 	property var radiusShort: 24
 
+	property var sliderWidth: 250
+	property var sliderHeight: 50
+	property var sliderThickness: 20
+
+	property var textWidth: 250
+	property var textHeight: 30
+
 }

ui/emulator/Emulator.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.0
 import QtGraphicalEffects 1.13
 
-import "qrc:/emulator/components"
 import "qrc:/emulator/items"
 import "qrc:/theme"
 import "qrc:/const"
@@ -10,27 +9,15 @@ Item {
 	width: Const.windowWidth
 	height: Const.windowHeight
 
-	NeuLight {
+	Setting {
-		x: 70
+		anchors.horizontalCenter: topLeft.horizontalCenter
-		y: 70
+		anchors.top: topLeft.bottom
-		colorMode: 0
+		anchors.topMargin: 120
-		width: Const.microButton
-		height: Const.microButton
-		image: Theme.current=== Theme.dark ? "qrc:/icons/uiMode/light.svg" :
-											 "qrc:/icons/uiMode/dark.svg"
-		MouseArea{
-			anchors.fill: parent
-			onClicked: {
-				if(Theme.current=== Theme.dark) {
-					Theme.current = Theme.light
-				} else {
-					Theme.current = Theme.dark
-				}
-			}
-		}
 	}
 
-	TopLeft {}
+	TopLeft {
+		id: topLeft
+	}
 
 	TopRight {}
 

ui/emulator/components/LightRing.qml

@@ -13,6 +13,8 @@ Item {
 	property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow
 	property color lightColor: getColor()
 	property color lightDeep: getColorDeep()
+	property var timeFactor: 1
+	property bool indicator: false
 
 	width: Const.macroButton + 2 * thickness
 	height: Const.macroButton + 2 * thickness
@@ -91,6 +93,30 @@ Item {
 					}
 				}
 
+				Rectangle {
+					id: indic
+					width: thickness * 2
+					height: width
+					color: lightDeep
+					y: 0.5 * thickness
+					anchors.horizontalCenter: parent.horizontalCenter
+					visible: indicator
+
+					transform: Rotation {
+						angle: 45
+						origin {
+							x: indic.width / 2
+							y: indic.height / 2
+						}
+
+						axis {
+							z: 1
+							x: 0
+							y: 0
+						}
+					}
+				}
+
 				transform: Rotation {
 					origin {
 						x: borderGrad.width / 2
@@ -107,7 +133,7 @@ Item {
 
 					Behavior on angle {
 						NumberAnimation {
-							duration: 200
+							duration: 200 * timeFactor
 							easing.type: Easing.OutQuad
 						}
 					}
@@ -115,7 +141,6 @@ Item {
 			}
 		}
 
-
 		DropShadow {
 			id: dropDown
 			anchors.fill: coloredRing

ui/emulator/components/ModeButton.qml

@@ -15,12 +15,16 @@ ModeBg {
 
 	property var led: 1
 
+	property var stepInc
+	property var stepDec
+
 	LightRing {
 		id: lightRing
 		colorMode: parent.led
 		anchors.verticalCenter: mainKnob.verticalCenter
 		anchors.horizontalCenter: mainKnob.horizontalCenter
 		width: Const.macroButton + 2 * thickness
+		indicator: true
 	}
 
 	Knob {
@@ -38,7 +42,10 @@ ModeBg {
 		anchors.rightMargin: Const.margin
 		implicitWidth: Const.microButton
 		implicitHeight: Const.microButton
-		onPressed: lightRing.angle = lightRing.angle - Const.rotateStep
+		onPressed: {
+			lightRing.timeFactor = - stepDec
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepDec
+		}
 	}
 
 	Knob {
@@ -48,6 +55,9 @@ ModeBg {
 		anchors.leftMargin: Const.margin
 		implicitWidth: Const.microButton
 		implicitHeight: Const.microButton
-		onPressed: lightRing.angle = lightRing.angle + Const.rotateStep
+		onPressed: {
+			lightRing.timeFactor = stepInc
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepInc
+		}
 	}
 }

ui/emulator/components/ModeOption.qml

@@ -18,12 +18,16 @@ ModeBgOption {
 	property var led: 1
 	property var ledOption: 0
 
+	property var stepInc
+	property var stepDec
+
 	LightRing {
 		id: lightRing
 		colorMode: parent.led
 		anchors.verticalCenter: mainKnob.verticalCenter
 		anchors.horizontalCenter: mainKnob.horizontalCenter
 		width: Const.macroButton + 2 * thickness
+		indicator: true
 	}
 
 	Knob {
@@ -52,7 +56,10 @@ ModeBgOption {
 		anchors.rightMargin: Const.margin
 		implicitWidth: Const.microButton
 		implicitHeight: Const.microButton
-		onPressed: lightRing.angle = lightRing.angle - Const.rotateStep
+		onPressed: {
+			lightRing.timeFactor = - stepDec
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepDec
+		}
 	}
 
 	Knob {
@@ -62,6 +69,9 @@ ModeBgOption {
 		anchors.leftMargin: Const.margin
 		implicitWidth: Const.microButton
 		implicitHeight: Const.microButton
-		onPressed: lightRing.angle = lightRing.angle + Const.rotateStep
+		onPressed: {
+			lightRing.timeFactor = stepInc
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepInc
+		}
 	}
 }

ui/emulator/components/SliderBar.qml

@@ -0,0 +1,219 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: main
+	property var color: Theme.current.green
+	property var colorDeep: Theme.current.greenDeep
+	property var sliderSize: Const.sliderHeight
+	property var backgroundLenght: Const.sliderWidth
+	property bool flip: false
+	property var value: control.value
+
+	implicitHeight: sliderSize
+	width: backgroundLenght
+
+	Slider {
+		id: control
+		width: (4 / 5) * parent.width
+		height: Const.sliderThickness
+		x: parent.width - width
+		y: 0
+
+		from: flip ? -1 : 1
+		to: flip ? -5 : 5
+		stepSize: 1
+		value: flip ? -1 : 1
+		snapMode: Slider.SnapOnRelease
+
+		transform: Rotation {
+			origin {
+				x: control.width / 2 - main.width / 10
+				y: control.height / 2
+			}
+
+			axis {
+				z: 0
+				x: 0
+				y: 1
+			}
+
+			angle: flip ? 180 : 0
+		}
+
+		background: Item {
+			id: controlBackground
+			width: main.width
+			height: parent.height
+			x:  - parent.x
+
+			Item {
+				id: backgroundObject
+				width: parent.width
+				height: parent.height
+
+				Rectangle {
+					id: backgroundArea
+					width: parent.width
+					height: parent.height
+					radius: height / 2
+					color: "pink"
+				}
+
+				Item {
+					id: backgroundGrad
+					implicitWidth: parent.implicitWidth
+					implicitHeight: parent.implicitHeight
+					anchors.fill: parent
+
+					layer.enabled: true
+					layer.effect: OpacityMask {
+						maskSource: backgroundArea
+					}
+
+					Rectangle {
+						width: parent.width
+						height: parent.height
+						color: "transparent"
+
+						LinearGradient {
+							anchors.fill: parent
+							start: Qt.point(parent.width / 2 , parent.height)
+							end: Qt.point(0, 0)
+							gradient: Gradient {
+								GradientStop {
+									position: 0
+									color: Theme.current.none
+								}
+
+								GradientStop {
+									position: 1
+									color: Theme.current.noneDeep
+								}
+							}
+						}
+					}
+				}
+
+				Rectangle {
+					id: progressArea
+					width: (control.visualPosition * parent.width * 4 / 5) + (parent.width / 5)
+					height: parent.height
+					radius: height / 2
+					color: "pink"
+				}
+
+				Item {
+					id: progressGrad
+					anchors.fill: progressArea
+
+					layer.enabled: true
+					layer.effect: OpacityMask {
+						maskSource: progressArea
+					}
+
+					Rectangle {
+						width: parent.width
+						height: parent.height
+						color: "transparent"
+
+						LinearGradient {
+							anchors.fill: parent
+							start: Qt.point(parent.width / 2 , parent.height)
+							end: Qt.point(0, 0)
+							gradient: Gradient {
+								GradientStop {
+									position: 0
+									color: main.color
+								}
+
+								GradientStop {
+									position: 1
+									color: main.colorDeep
+								}
+							}
+						}
+					}
+				}
+			}
+
+			DropShadow {
+				id: dropDown
+				anchors.fill: backgroundObject
+				source: backgroundObject
+				horizontalOffset: 3
+				verticalOffset: 3
+				radius: 4
+				samples: 8
+				color: Theme.current.light
+			}
+
+			DropShadow {
+				id: dropUp
+				anchors.fill: backgroundObject
+				source: backgroundObject
+				horizontalOffset: - 3
+				verticalOffset: - 3
+				radius: 4
+				samples: 8
+				color: Theme.current.light
+			}
+
+			InnerShadow {
+				id: inner
+				anchors.fill: backgroundObject
+				source: backgroundObject
+				horizontalOffset: 3
+				verticalOffset: 3
+				radius: 3
+				samples: 6
+				smooth: true
+				color: Theme.current.lightShadow
+			}
+		}
+
+		handle: KnobImage {
+			id: knob
+			x: control.leftPadding + (control.visualPosition * control.availableWidth) - width / 2
+			y: control.topPadding + control.availableHeight / 2 - height / 2
+			implicitWidth: sliderSize
+			implicitHeight: sliderSize
+			radius: implicitHeight / 2
+
+			Item {
+				width: parent.width
+				height: parent.height
+				anchors.centerIn: knob
+
+				Text {
+					horizontalAlignment: Text.horizontalCenter
+					text: control.value
+					color: Theme.current.text
+					anchors.verticalCenter: parent.verticalCenter
+					anchors.horizontalCenter: parent.horizontalCenter
+				}
+
+				transform: Rotation {
+					origin {
+						x: knob.width / 2
+						y: knob.height / 2
+					}
+
+					axis {
+						z: 0
+						x: 0
+						y: 1
+					}
+
+					angle: flip ? 180 : 0
+				}
+			}
+		}
+	}
+}
+
+

ui/emulator/elements/ModeButtonBind.qml

@@ -14,6 +14,18 @@ ModeButton {
 	property var nameDecrease: ""
 	property var nameLed: ""
 
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "stepInc"
+		viewModelProperty: "stepInc"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "stepDec"
+		viewModelProperty: "stepDec"
+	}
+
 	MvvmBinding {
 		viewModel: mainView.viewModel
 		viewProperty: "down"

ui/emulator/elements/ModeOptionBind.qml

@@ -17,9 +17,14 @@ ModeOption {
 
 	MvvmBinding {
 		viewModel: mainView.viewModel
-		viewProperty: "down"
+		viewProperty: "stepInc"
-		viewModelProperty: name
+		viewModelProperty: "stepInc"
-		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "stepDec"
+		viewModelProperty: "stepDec"
 	}
 
 	MvvmBinding {

ui/emulator/elements/SliderBarBind.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.0
+
+import de.skycoder42.QtMvvm.Core 1.0
+import de.skycoder42.QtMvvm.Quick 1.0
+import com.example.consoleemulator 1.0
+
+import "qrc:/qtmvvm/views"
+import "qrc:/const"
+import "qrc:/emulator/components"
+
+SliderBar {
+	property var name: ""
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "value"
+		viewModelProperty: name
+	}
+}

ui/emulator/items/Setting.qml

@@ -0,0 +1,85 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/components"
+import "qrc:/emulator/elements"
+import "qrc:/const"
+import "qrc:/theme"
+
+Item {
+	width: childrenRect.width
+	height: childrenRect.height
+
+	Column {
+		spacing: 15
+
+		Item {
+			width: Const.textWidth
+			implicitHeight: Const.textHeight
+
+			Text {
+				horizontalAlignment: Text.horizontalCenter
+				text: "Incremental step"
+				color: Theme.current.text
+				anchors.verticalCenter: parent.verticalCenter
+			}
+		}
+
+		SliderBarBind {
+			name: "stepInc"
+		}
+
+		Item {
+			width: Const.textWidth
+			implicitHeight: Const.textHeight
+
+			Text {
+				horizontalAlignment: Text.horizontalCenter
+				text: "Decremental step"
+				color: Theme.current.text
+			}
+		}
+
+		SliderBarBind {
+			name: "stepDec"
+			color: Theme.current.yellow
+			colorDeep: Theme.current.yellowDeep
+			flip: true
+		}
+
+		Row {
+			width: Const.sliderWidth
+			height: Const.sliderHeight
+
+			Item {
+				width: Const.textWidth / 3
+				height: Const.textHeight
+				anchors.verticalCenter: parent.verticalCenter
+				Text {
+					anchors.verticalCenter: parent.verticalCenter
+					horizontalAlignment: Text.horizontalCenter
+					text: "Theme"
+					color: Theme.current.text
+				}
+			}
+
+			NeuLight {
+				anchors.verticalCenter: parent.verticalCenter
+				colorMode: 0
+				width: Const.microButton
+				height: Const.microButton
+				image: Theme.current=== Theme.dark ? "qrc:/icons/uiMode/light.svg" :
+													 "qrc:/icons/uiMode/dark.svg"
+				MouseArea{
+					anchors.fill: parent
+					onClicked: {
+						if(Theme.current=== Theme.dark) {
+							Theme.current = Theme.light
+						} else {
+							Theme.current = Theme.dark
+						}
+					}
+				}
+			}
+		}
+	}
+}

ui/emulator/items/TopLeft.qml

@@ -7,7 +7,7 @@ import "qrc:/const"
 GridLayout {
 	id: topLeft
 	x: 70
-	y: 200
+	y: 120
 	rows: 3
 	columns: 4
 	rowSpacing: 36

ui/theme/Palette.qml

@@ -25,7 +25,7 @@ QtObject {
 
 	property color white: isDarkTheme ? "#FFFFFF" : "#FFFFFF"
 	property color whiteGlow: isDarkTheme ? "#F1F5FA" : "#F1F5FA"
-	property color whiteDeep: isDarkTheme ? "#A9CFFF" : "#A9CFFF"
+	property color whiteDeep: isDarkTheme ? "#A4C5EF" : "#A4C5EF"
 
 	property color green: isDarkTheme ? "#95CF6C" : "#95CF6C"
 	property color greenGlow: isDarkTheme ? "#B8E49B" : "#B8E49B"

ui/ui.qrc

@@ -92,6 +92,9 @@
         <file>theme/Palette.qml</file>
         <file>theme/qmldir</file>
         <file>theme/Theme.qml</file>
+        <file>emulator/components/SliderBar.qml</file>
+        <file>emulator/elements/SliderBarBind.qml</file>
+        <file>emulator/items/Setting.qml</file>
     </qresource>
     <qresource prefix="/qtmvvm/views">
         <file>MainView.qml</file>