first look of ui

logic/include/viewModel/utils/Property.h

@@ -0,0 +1,4 @@
+#ifndef PROPERTY_H
+#define PROPERTY_H
+
+#endif // PROPERTY_H

ui/const/Const.qml

@@ -0,0 +1,28 @@
+pragma Singleton
+import QtQuick 2.13
+
+QtObject {
+    /**************************************************************************/
+    // General
+
+    property var widthRatio: 1
+    property var heightRatio: 1
+    property var ratio: Math.min(widthRatio , heightRatio)
+	property var windowAspectRatio: 16 / 6
+    property var windowWidth: 1920 // Do Not Change This Property
+	property var windowHeight: 860 // Do Not Change This Property
+
+	property var lightButton: 64
+	property var microButton: 32
+	property var macroButton: 64
+	property var margin: 6
+	property var microLightThickness: 10
+	property var macroLightThickness: 10
+	property var imageScale: 0.75
+	property var imageScalePressed: 0.65
+	property var rotateStep: 45
+
+	property var radiusLong: 44
+	property var radiusShort: 24
+
+}

ui/const/qmldir

@@ -0,0 +1 @@
+singleton Const Const.qml

ui/emulator/Emulator.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.13
+
+import "qrc:/emulator/components"
+import "qrc:/emulator/items"
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	width: Const.windowWidth
+	height: Const.windowHeight
+
+	NeuLight {
+		x: 70
+		y: 70
+		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
+				}
+			}
+		}
+	}
+
+	TopLeft {}
+
+	TopRight {}
+
+	BottomRight {}
+
+	CurveButtons {}
+
+	Joysticks {}
+
+	Encoders {}
+
+	JoystickCouple {}
+
+	TrackballGroup {}
+
+}

ui/emulator/components/HoverGlow.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+
+LinearGradient {
+    anchors.fill: parent
+	start: Qt.point(parent.width, parent.height/2)
+    end: Qt.point(0, 0)
+
+    gradient: Gradient {
+        GradientStop {
+            position: 0
+			color: Theme.current.isDarkTheme ? "#10FFFFFF" : "#4DFFFFFF"
+        }
+        GradientStop {
+            position: 0.08
+			color: Theme.current.isDarkTheme ? "#20FFFFFF" : "#80FFFFFF"
+        }
+        GradientStop {
+            position: 0.27
+			color: Theme.current.isDarkTheme ? "#05FFFFFF" : "#21FFFFFF"
+        }
+
+        GradientStop {
+            position: 1
+			color: Theme.current.isDarkTheme ? "#05FFFFFF" : "#21FFFFFF"
+        }
+    }
+}

ui/emulator/components/JoystickButton.qml

@@ -0,0 +1,257 @@
+import QtQuick 2.0
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: control
+
+	property bool leftButDown
+	property bool rightButDown
+	property bool topButDown
+	property bool bottomButDown
+
+	width: 2 * (Const.radiusLong + Const.margin)
+	height: 2 * (Const.radiusLong + Const.margin)
+
+	SegmentButton {
+		id: topBut
+		angle: 45
+		x: Const.margin
+	}
+
+	SegmentButton {
+		id: bottomBut
+		angle: -135
+		x: Const.margin
+		y: 2 * Const.margin
+	}
+
+	SegmentButton {
+		id: leftBut
+		angle: -45
+		y: Const.margin
+	}
+
+	SegmentButton {
+		id: rightBut
+		angle: 135
+		x: 2 * Const.margin
+		y: Const.margin
+	}
+
+	Rectangle {
+		color: "transparent"
+		anchors.fill: parent
+		MouseArea {
+			id: mouseArea
+			anchors.fill: parent
+			hoverEnabled: true
+			onPressed: {
+				if(beInCenter()) {
+					// inside
+				} else if (isOutside()) {
+					// outside
+				} else {
+					if(beInNorthOrWest()) {
+						if(beInNorthOrEast()) {
+							// top key
+							topButPressed()
+						} else {
+							// left key
+							leftButPressed()
+						}
+					} else {
+						if(beInNorthOrEast()) {
+							// right key
+							rightButPressed()
+						} else {
+							// bottom key
+							bottomButPressed()
+						}
+					}
+				}
+			}
+
+			onReleased: {
+				topButReleased()
+				leftButReleased()
+				rightButReleased()
+				bottomButReleased()
+			}
+			onMouseXChanged: {
+				if(!mouseArea.pressed) {
+					if(beInCenter()) {
+						// inside
+						topButExit()
+						leftButExit()
+						rightButExit()
+						bottomButExit()
+					} else if (isOutside()) {
+						// outside
+						topButExit()
+						leftButExit()
+						rightButExit()
+						bottomButExit()
+					} else {
+						if(beInNorthOrWest()) {
+							if(beInNorthOrEast()) {
+								// top key
+								topButHover()
+								leftButExit()
+								rightButExit()
+								bottomButExit()
+							} else {
+								// left key
+								leftButHover()
+								topButExit()
+								rightButExit()
+								bottomButExit()
+							}
+						} else {
+							if(beInNorthOrEast()) {
+								// right key
+								rightButHover()
+								topButExit()
+								leftButExit()
+								bottomButExit()
+							} else {
+								// bottom key
+								bottomButHover()
+								topButExit()
+								leftButExit()
+								rightButExit()
+							}
+						}
+					}
+				}
+			}
+
+			onExited: {
+				topButExit()
+				leftButExit()
+				rightButExit()
+				bottomButExit()
+			}
+
+			function beInNorthOrWest() {
+				var verDist = (Const.radiusLong + Const.margin) - mouseY
+				var horDist = mouseX - (Const.radiusLong + Const.margin)
+				var inNorthorWest = (verDist > horDist)
+				return inNorthorWest
+			}
+
+			function beInNorthOrEast() {
+				var verDist = (Const.radiusLong + Const.margin) - mouseY
+				var horDist = mouseX - (Const.radiusLong + Const.margin)
+				var inNorthorEast = (verDist > - horDist)
+				return inNorthorEast
+			}
+
+			function beInCenter() {
+				var verLength = (mouseY - (Const.radiusLong + Const.margin)) ** 2
+				var horLength = (mouseX - (Const.radiusLong + Const.margin)) ** 2
+				var inCenter = (verLength + horLength < ((Const.radiusShort + Const.margin) ** 2))
+				return inCenter
+			}
+
+			function isOutside() {
+				var verLength = (mouseY - (Const.radiusLong + Const.margin)) ** 2
+				var horLength = (mouseX - (Const.radiusLong + Const.margin)) ** 2
+				var isOut = (verLength + horLength > ((Const.radiusLong + Const.margin) ** 2))
+				return isOut
+			}
+		}
+	}
+
+
+	NeuButton {
+		width: 2 * (Const.radiusShort - Const.margin)
+		height: 2 * (Const.radiusShort - Const.margin)
+		anchors.centerIn: parent
+	}
+
+	/***********************************/
+	function leftButPressed() {
+		leftButDown = true
+		leftBut.state = "Pressed"
+		leftBut.pressed()
+	}
+
+	function leftButReleased() {
+		leftButDown = false
+		leftBut.released()
+		leftBut.state = ""
+	}
+
+	function leftButHover() {
+		leftBut.state = "Hovering"
+	}
+
+	function leftButExit() {
+		leftBut.state = ""
+	}
+
+	/***********************************/
+	function rightButPressed() {
+		rightButDown = true
+		rightBut.state = "Pressed"
+		rightBut.pressed()
+	}
+
+	function rightButReleased() {
+		rightButDown = false
+		rightBut.released()
+		rightBut.state = ""
+	}
+
+	function rightButHover() {
+		rightBut.state = "Hovering"
+	}
+
+	function rightButExit() {
+		rightBut.state = ""
+	}
+
+	/***********************************/
+	function topButPressed() {
+		topButDown = true
+		topBut.state = "Pressed"
+		topBut.pressed()
+	}
+
+	function topButReleased() {
+		topButDown = false
+		topBut.released()
+		topBut.state = ""
+	}
+
+	function topButHover() {
+		topBut.state = "Hovering"
+	}
+
+	function topButExit() {
+		topBut.state = ""
+	}
+
+	/***********************************/
+	function bottomButPressed() {
+		bottomButDown = true
+		bottomBut.state = "Pressed"
+		bottomBut.pressed()
+	}
+
+	function bottomButReleased() {
+		bottomButDown = false
+		bottomBut.released()
+		bottomBut.state = ""
+	}
+
+	function bottomButHover() {
+		bottomBut.state = "Hovering"
+	}
+
+	function bottomButExit() {
+		bottomBut.state = ""
+	}
+}

ui/emulator/components/Knob.qml

@@ -0,0 +1,254 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Button {
+	id: button
+	property var image: ""
+	property var radius: Math.min(width / 2, height / 2)
+	property var timeToPress: 100
+	property var border: 4
+
+	signal pressed
+	signal released
+
+	onPressed: { button.down = true }
+	onReleased: { button.down = false }
+
+	implicitWidth: Const.macroButton
+	implicitHeight: Const.macroButton
+
+	contentItem: Item {
+		id: content
+		anchors.fill: parent
+		z: 1
+
+		Item {
+			property var factor: button.state == "Pressed" ?
+									 Const.imageScalePressed : Const.imageScale
+			property var elevator: button.state == "Pressed" ? 3 : 0
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			y: (parent.height * (1-factor)) / 2 + elevator
+			width: parent.width * factor
+			height: parent.height * factor
+
+			Behavior on y {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on width {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on height {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Image {
+				id: img
+				anchors.fill: parent
+				source: image
+				fillMode: Image.PreserveAspectFit
+				antialiasing: true
+				smooth: true
+			}
+
+			ColorOverlay {
+				anchors.fill: img
+				source: img
+				color: button.state == "Pressed" ? Theme.current.textSelected : Theme.current.text
+				antialiasing: true
+				smooth: true
+			}
+		}
+	}
+
+	background: Item{
+		width: parent.implicitWidth
+		height: parent.implicitHeight
+
+		Rectangle {
+			id: background
+			anchors.fill: parent
+			radius: button.radius
+			color: Theme.current.button
+
+			Behavior on color {
+				ColorAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+		}
+
+		Item {
+			id: coloredRing
+			width: parent.width
+			height: parent.height
+
+			Rectangle {
+				id: lightRing
+				width: parent.width
+				height: parent.height
+				radius: width / 2
+				color: "transparent"
+				border{
+					color: background.color
+					width: button.border
+				}
+			}
+
+			Item {
+				id: borderGrad
+				implicitWidth: parent.implicitWidth
+				implicitHeight: parent.implicitHeight
+				anchors.fill: parent
+
+				layer.enabled: true
+				layer.effect:
+					OpacityMask {
+					maskSource: lightRing
+				}
+
+				Rectangle {
+					width: parent.width
+					height: parent.height
+					color: "transparent"
+
+					LinearGradient {
+						id: linGrad
+						anchors.fill: parent
+						start: Qt.point(0, parent.height)
+						end: Qt.point(0, 0)
+						gradient: Gradient {
+							GradientStop {
+								id: buttonDown
+								position: 0
+								color: Theme.current.shadow
+
+								Behavior on color {
+									ColorAnimation {
+										duration: timeToPress
+										easing.type: Easing.InOutQuad
+									}
+								}
+							}
+
+							GradientStop {
+								id: buttonUp
+								position: 1
+								color: Theme.current.light
+
+								Behavior on color {
+									ColorAnimation {
+										duration: timeToPress
+										easing.type: Easing.InOutQuad
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		MouseArea {
+			hoverEnabled: true
+			anchors.fill: background
+			onEntered: {
+				button.state = "Hovering"
+			}
+
+			onExited: {
+				button.state = ""
+			}
+
+			onPressed: {
+				button.state = "Pressed"
+				button.pressed()
+			}
+
+			onReleased: {
+				button.released()
+				if (containsMouse)
+					button.state = "Hovering"
+				else
+					button.state = ""
+			}
+		}
+	}
+
+	Item {
+		id: hoverLight
+		implicitWidth: parent.implicitWidth
+		implicitHeight: parent.implicitHeight
+		anchors.fill: parent
+
+		layer.enabled: true
+		layer.effect: OpacityMask {
+			maskSource: background
+		}
+
+		Rectangle {
+			id: hoverGlow
+			width: 2 * parent.width
+			height: parent.height
+			x: - 2 * parent.width
+			color: "transparent"
+
+			HoverGlow {}
+		}
+	}
+
+	states: [
+		State {
+			name: "Hovering"
+			PropertyChanges {
+				target: hoverGlow
+				x: 0
+			}
+		},
+
+		State {
+			name: "Pressed"
+			PropertyChanges {
+				target: background
+				color: Theme.current.buttonSelected
+			}
+
+			PropertyChanges {
+				target: buttonUp
+				color: Theme.current.shadow
+			}
+
+			PropertyChanges {
+				target: buttonDown
+				color: Theme.current.light
+			}
+		}
+	]
+
+	transitions: [
+		Transition {
+			from: ""; to: "Hovering"
+			NumberAnimation {
+				properties: "x"
+				duration: 500
+				easing.type: Easing.OutQuad
+			}
+		}
+	]
+}

ui/emulator/components/KnobImage.qml

@@ -0,0 +1,113 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: button
+
+	property var image: ""
+	property var radius: Math.min(width / 2, height / 2)
+	property var border: 4
+
+	implicitWidth: Const.macroButton
+	implicitHeight: Const.macroButton
+
+	Item {
+		width: parent.width
+		height: parent.height
+
+		Rectangle {
+			id: background
+			anchors.fill: parent
+			radius: button.radius
+			color: Theme.current.button
+		}
+
+		Item {
+			id: coloredRing
+			width: parent.width
+			height: parent.height
+
+			Rectangle {
+				id: lightRing
+				width: parent.width
+				height: parent.height
+				radius: Math.min(width / 2, height / 2)
+				color: "transparent"
+				border{
+					color: background.color
+					width: button.border
+				}
+			}
+
+			Item {
+				id: borderGrad
+				implicitWidth: parent.width
+				implicitHeight: parent.height
+				anchors.fill: parent
+
+				layer.enabled: true
+				layer.effect:
+					OpacityMask {
+					maskSource: lightRing
+				}
+
+				Rectangle {
+					width: parent.width
+					height: parent.height
+					color: "transparent"
+
+					LinearGradient {
+						id: linGrad
+						anchors.fill: parent
+						start: Qt.point(0, parent.height)
+						end: Qt.point(0, 0)
+						gradient: Gradient {
+							GradientStop {
+								id: buttonDown
+								position: 0
+								color: Theme.current.shadow
+							}
+
+							GradientStop {
+								id: buttonUp
+								position: 1
+								color: Theme.current.light
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	Item {
+		id: content
+		anchors.fill: parent
+
+		Item {
+			property var factor: Const.imageScale
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			y: (parent.height * (1-factor)) / 2
+			width: parent.width * factor
+			height: parent.height * factor
+
+			Image {
+				id: img
+				anchors.fill: parent
+				source: image
+				fillMode: Image.PreserveAspectFit
+			}
+
+			ColorOverlay {
+				anchors.fill: img
+				source: img
+				color: Theme.current.text
+			}
+		}
+	}
+}

ui/emulator/components/KnobLight.qml

@@ -0,0 +1,334 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Button {
+	id: button
+	property var image: ""
+	property var radius: Math.min(width / 2, height / 2)
+	property var timeToPress: 100
+	property var border: 6
+
+	property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow
+	property color lightColor: getColor()
+	property color lightGlow: getColorGlow()
+
+	signal pressed
+	signal released
+
+	implicitWidth: width
+	implicitHeight: height
+
+	onPressed: { button.down = true }
+	onReleased: { button.down = false }
+
+	function getColor() {
+		switch(colorMode) {
+		case(0): return Theme.current.none
+		case(1): return Theme.current.white
+		case(2): return Theme.current.green
+		case(3): return Theme.current.yellow
+		}
+	}
+
+	function getColorGlow() {
+		switch(colorMode) {
+		case(0): return Theme.current.noneGlow
+		case(1): return Theme.current.whiteGlow
+		case(2): return Theme.current.greenGlow
+		case(3): return Theme.current.yellowGlow
+		}
+	}
+
+	width: Const.macroButton
+	height: Const.macroButton
+
+	contentItem: Item {
+		id: content
+		anchors.fill: parent
+		z: 1
+
+		Item {
+			property var factor: button.state == "Pressed" ?
+									 Const.imageScalePressed : Const.imageScale
+			property var elevator: button.state == "Pressed" ? 3 : 0
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			y: (parent.height * (1-factor)) / 2 + elevator
+			width: parent.width * factor
+			height: parent.height * factor
+
+			Behavior on y {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on width {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on height {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Image {
+				id: img
+				anchors.fill: parent
+				source: image
+				fillMode: Image.PreserveAspectFit
+				antialiasing: true
+				smooth: true
+			}
+
+			ColorOverlay {
+				anchors.fill: img
+				source: img
+				color: button.state == "Pressed" ? Theme.current.textSelected : Theme.current.text
+				antialiasing: true
+				smooth: true
+			}
+		}
+	}
+
+	background: Item{
+		width: parent.width
+		height: parent.height
+
+		Rectangle {
+			id: backLightGlow
+			property var diffusion: Theme.current.glowRaduis
+			width: backLight.width + diffusion
+			height: backLight.height + diffusion
+			radius: width / 2
+			anchors.horizontalCenter: backLight.horizontalCenter
+			y: - diffusion / 4
+			color: Theme.current.background
+			border {
+				width: diffusion / 2
+				color: Theme.current.background
+			}
+		}
+
+		Rectangle {
+			anchors.fill: backLightGlow
+
+			color: "transparent"
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: backLightGlow
+			}
+
+			Rectangle {
+				width: parent.width
+				height: parent.height
+				radius: parent.radius
+				color: "transparent"
+
+				RadialGradient {
+					anchors.fill: parent
+					gradient: Gradient {
+						GradientStop { position: 0.0; color: lightGlow }
+						GradientStop {
+							position: 0.5 * (backLight.width - backLightGlow.diffusion / backLightGlow.width)
+							color: lightGlow
+						}
+						GradientStop { position: 0.5; color: "transparent" }
+						GradientStop { position: 1.0; color: "transparent" }
+					}
+				}
+			}
+		}
+
+		Rectangle {
+			id: backLight
+			width: parent.width + 4
+			height: parent.height + 4
+			radius: width / 2
+			color: lightColor
+			anchors.top: parent.top
+			anchors.horizontalCenter: parent.horizontalCenter
+		}
+
+		Rectangle {
+			id: background
+			anchors.fill: parent
+			radius: button.radius
+			color: Theme.current.button
+
+			Behavior on color {
+				ColorAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+		}
+
+		Item {
+			id: coloredRing
+			width: parent.width
+			height: parent.height
+
+			Rectangle {
+				id: lightRing
+				width: parent.width
+				height: parent.height
+				radius: width / 2
+				color: "transparent"
+				border{
+					color: background.color
+					width: button.border
+				}
+			}
+
+			Item {
+				id: borderGrad
+				implicitWidth: parent.width
+				implicitHeight: parent.height
+				anchors.fill: parent
+
+				layer.enabled: true
+				layer.effect:
+					OpacityMask {
+					maskSource: lightRing
+				}
+
+				Rectangle {
+					width: parent.width
+					height: parent.height
+					color: background.color
+
+					LinearGradient {
+						id: linGrad
+						anchors.fill: parent
+						start: Qt.point(0, parent.height)
+						end: Qt.point(0, 0)
+						gradient: Gradient {
+							GradientStop {
+								id: buttonDown
+								position: 0
+								color: Theme.current.shadow
+
+								Behavior on color {
+									ColorAnimation {
+										duration: timeToPress
+										easing.type: Easing.InOutQuad
+									}
+								}
+							}
+
+							GradientStop {
+								id: buttonUp
+								position: 1
+								color: Theme.current.light
+
+								Behavior on color {
+									ColorAnimation {
+										duration: timeToPress
+										easing.type: Easing.InOutQuad
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		MouseArea {
+			hoverEnabled: true
+			anchors.fill: background
+			onEntered: {
+				button.state = "Hovering"
+			}
+
+			onExited: {
+				button.state = ""
+			}
+
+			onPressed: {
+				button.state = "Pressed"
+				button.pressed()
+			}
+
+			onReleased: {
+				button.released()
+				if (containsMouse)
+					button.state = "Hovering"
+				else
+					button.state = ""
+			}
+		}
+	}
+
+	Item {
+		id: hoverLight
+		implicitWidth: parent.width
+		implicitHeight: parent.height
+		anchors.fill: parent
+
+		layer.enabled: true
+		layer.effect: OpacityMask {
+			maskSource: background
+		}
+
+		Rectangle {
+			id: hoverGlow
+			width: 2 * parent.width
+			height: parent.height
+			x: - 2 * parent.width
+			color: "transparent"
+
+			HoverGlow {}
+		}
+	}
+
+	states: [
+		State {
+			name: "Hovering"
+			PropertyChanges {
+				target: hoverGlow
+				x: 0
+			}
+		},
+
+		State {
+			name: "Pressed"
+			PropertyChanges {
+				target: background
+				color: Theme.current.buttonSelected
+			}
+
+			PropertyChanges {
+				target: buttonUp
+				color: Theme.current.shadow
+			}
+
+			PropertyChanges {
+				target: buttonDown
+				color: Theme.current.light
+			}
+		}
+	]
+
+	transitions: [
+		Transition {
+			from: ""; to: "Hovering"
+			NumberAnimation {
+				properties: "x"
+				duration: 500
+				easing.type: Easing.OutQuad
+			}
+		}
+	]
+}

ui/emulator/components/LightImage.qml

@@ -0,0 +1,29 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.13
+
+import "qrc:/const"
+
+Item {
+	property var image: ""
+	property var colorMode: 0
+	property var thickness: Const.macroLightThickness
+
+	implicitWidth: Const.lightButton
+	implicitHeight: Const.lightButton
+
+	LightRing {
+		id: lightRing
+		width: parent.width
+		height: parent.height
+		thickness: parent.thickness
+		colorMode: parent.colorMode
+	}
+
+	KnobImage {
+		id: knobImage
+		anchors.centerIn: lightRing
+		width: parent.width - 2 * lightRing.thickness
+		height: parent.height - 2 * lightRing.thickness
+		image: parent.image
+	}
+}

ui/emulator/components/LightRing.qml

@@ -0,0 +1,165 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: control
+
+	property var angle: 0
+	property var thickness: Const.macroLightThickness
+
+	property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow
+	property color lightColor: getColor()
+	property color lightDeep: getColorDeep()
+
+	width: Const.macroButton + 2 * thickness
+	height: Const.macroButton + 2 * thickness
+
+	function getColor() {
+		switch(colorMode) {
+		case(0): return Theme.current.none
+		case(1): return Theme.current.white
+		case(2): return Theme.current.green
+		case(3): return Theme.current.yellow
+		}
+	}
+
+	function getColorDeep() {
+		switch(colorMode) {
+		case(0): return Theme.current.noneDeep
+		case(1): return Theme.current.whiteDeep
+		case(2): return Theme.current.greenDeep
+		case(3): return Theme.current.yellowDeep
+		}
+	}
+
+	Item {
+		id: shadowedRing
+		anchors.fill: parent
+
+		Item {
+			id: coloredRing
+			width: parent.width
+			height: parent.height
+
+			Rectangle {
+				id: lightRing
+				width: parent.width
+				height: parent.height
+				radius: width / 2
+				color: "transparent"
+				border{
+					color: lightColor
+					width: thickness
+				}
+			}
+
+			Item {
+				id: borderGrad
+				implicitWidth: parent.implicitWidth
+				implicitHeight: parent.implicitHeight
+				anchors.fill: parent
+
+				layer.enabled: true
+				layer.effect: OpacityMask {
+					maskSource: lightRing
+				}
+
+				Rectangle {
+					width: parent.width
+					height: parent.height
+					color: "transparent"
+
+					LinearGradient {
+						id: linGrad
+						anchors.fill: parent
+						start: Qt.point(0, parent.height)
+						end: Qt.point(0, 0)
+						gradient: Gradient {
+							GradientStop {
+								position: 0
+								color: lightDeep
+							}
+
+							GradientStop {
+								position: 1
+								color: lightColor
+							}
+						}
+					}
+				}
+
+				transform: Rotation {
+					origin {
+						x: borderGrad.width / 2
+						y: borderGrad.height / 2
+					}
+
+					axis {
+						z: 1
+						x: 0
+						y: 0
+					}
+
+					angle: control.angle
+
+					Behavior on angle {
+						NumberAnimation {
+							duration: 200
+							easing.type: Easing.OutQuad
+						}
+					}
+				}
+			}
+		}
+
+
+		DropShadow {
+			id: dropDown
+			anchors.fill: coloredRing
+			source: coloredRing
+			horizontalOffset: 3
+			verticalOffset: 3
+			radius: 4
+			samples: 8
+			color: Theme.current.light
+		}
+
+		DropShadow {
+			id: dropUp
+			anchors.fill: coloredRing
+			source: coloredRing
+			horizontalOffset: - 3
+			verticalOffset: - 3
+			radius: 4
+			samples: 8
+			color: Theme.current.light
+		}
+
+		InnerShadow {
+			id: inner
+			anchors.fill: coloredRing
+			source: coloredRing
+			horizontalOffset: 3
+			verticalOffset: 3
+			radius: 3
+			samples: 6
+			smooth: true
+			color: Theme.current.lightShadow
+		}
+	}
+
+//	Glow {
+//		id: glow
+//		property var base: shadowedRing
+//		anchors.fill: base
+//		source: base
+//		radius: 10
+//		samples: 20
+//		color: Theme.current.light //orange ? "#FFEAA5" : (green ? "#B8E49B" : (white ? "white" : "transparent"))
+//		transparentBorder: true
+//	}
+}
+

ui/emulator/components/ModeBg.qml

@@ -0,0 +1,106 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: control
+	property var image: ""
+
+	width: coloredRing.width
+	height: coloredRing.height
+
+	property var additionalLength: 0
+
+	Item {
+		id: coloredRing
+		width: childrenRect.width
+		height: childrenRect.height
+
+		Item {
+			id: background
+			width: baseBackground.width
+			height: baseBackground.height
+
+			Rectangle {
+				id: baseBackground
+				width: Const.macroButton + Const.microButton + 2 * Const.margin + additionalLength
+				height: width
+				radius: width / 2
+				color: Theme.current.noneGlow
+			}
+		}
+
+		Item {
+			id: borderGrad
+			implicitWidth: parent.implicitWidth
+			implicitHeight: parent.implicitHeight
+			anchors.fill: parent
+
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: background
+			}
+
+			Rectangle {
+				width: parent.width
+				height: parent.height
+				color: "transparent"
+
+				LinearGradient {
+					id: linGrad
+					anchors.fill: parent
+					start: Qt.point(0, parent.height)
+					end: Qt.point(0, 0)
+					gradient: Gradient {
+						GradientStop {
+							position: 0
+							color: Theme.current.none
+						}
+
+						GradientStop {
+							position: 1
+							color: Theme.current.noneGlow
+						}
+					}
+				}
+			}
+		}
+	}
+
+	DropShadow {
+		id: dropDown
+		anchors.fill: coloredRing
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 4
+		samples: 8
+		color: Theme.current.light
+	}
+
+	DropShadow {
+		id: dropUp
+		anchors.fill: coloredRing
+		source: background
+		horizontalOffset: - 3
+		verticalOffset: - 3
+		radius: 4
+		samples: 8
+		color: Theme.current.light
+	}
+
+	InnerShadow {
+		id: inner
+		anchors.fill: coloredRing
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 3
+		samples: 6
+		smooth: true
+		color: Theme.current.lightShadow
+	}
+}

ui/emulator/components/ModeBgOption.qml

@@ -0,0 +1,124 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: control
+	property var image: ""
+
+	width: coloredRing.width
+	height: coloredRing.height
+
+	Item {
+		id: coloredRing
+		width: childrenRect.width
+		height: childrenRect.height
+
+		Item {
+			id: background
+			width: baseBackground.width + option.width / 2
+			height: baseBackground.height + option.height / 2
+
+			Rectangle {
+				id: baseBackground
+				width: Const.macroButton + Const.microButton + 2 * Const.margin
+				height: width
+				radius: width / 2
+				y: option.height / 2
+				color: Theme.current.noneGlow
+			}
+
+			Rectangle {
+				id: corner
+				width: baseBackground.width / 2
+				height: baseBackground.height / 2
+				y: option.height / 2
+				anchors.right: baseBackground.right
+				color: baseBackground.color
+			}
+
+			Rectangle {
+				id: option
+				width: Const.microButton + 2 * Const.microLightThickness
+				height: width
+				radius: width / 2
+				anchors.verticalCenter: corner.top
+				anchors.horizontalCenter: corner.right
+				color: baseBackground.color
+			}
+		}
+
+		Item {
+			id: borderGrad
+			implicitWidth: parent.implicitWidth
+			implicitHeight: parent.implicitHeight
+			anchors.fill: parent
+
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: background
+			}
+
+			Rectangle {
+				width: parent.width
+				height: parent.height
+				color: "transparent"
+
+				LinearGradient {
+					id: linGrad
+					anchors.fill: parent
+					start: Qt.point(0, parent.height)
+					end: Qt.point(0, 0)
+					gradient: Gradient {
+						GradientStop {
+							position: 0
+							color: Theme.current.none
+						}
+
+						GradientStop {
+							position: 1
+							color: Theme.current.noneGlow
+						}
+					}
+				}
+			}
+		}
+	}
+
+	DropShadow {
+		id: dropDown
+		anchors.fill: coloredRing
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 4
+		samples: 8
+		color: Theme.current.light
+	}
+
+	DropShadow {
+		id: dropUp
+		anchors.fill: coloredRing
+		source: background
+		horizontalOffset: - 3
+		verticalOffset: - 3
+		radius: 4
+		samples: 8
+		color: Theme.current.light
+	}
+
+	InnerShadow {
+		id: inner
+		anchors.fill: coloredRing
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 3
+		samples: 6
+		smooth: true
+		color: Theme.current.lightShadow
+	}
+}

ui/emulator/components/ModeButton.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/const"
+
+ModeBg {
+	id: modeBackground
+
+	property var image: "qrc:/icons/topLeft/utils.png"
+
+	property alias down: mainKnob.down
+	property alias increase: incButton.down
+	property alias decrease: decButton.down
+
+	property var led: 1
+
+	LightRing {
+		id: lightRing
+		colorMode: parent.led
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.horizontalCenter: mainKnob.horizontalCenter
+		width: Const.macroButton + 2 * thickness
+	}
+
+	Knob {
+		id: mainKnob
+		image: parent.image
+		x: Const.microButton / 2 + Const.margin
+		anchors.bottom: parent.bottom
+		anchors.bottomMargin: x
+	}
+
+	Knob {
+		id: decButton
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.right: mainKnob.left
+		anchors.rightMargin: Const.margin
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+		onPressed: lightRing.angle = lightRing.angle - Const.rotateStep
+	}
+
+	Knob {
+		id: incButton
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.left: mainKnob.right
+		anchors.leftMargin: Const.margin
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+		onPressed: lightRing.angle = lightRing.angle + Const.rotateStep
+	}
+}

ui/emulator/components/ModeOption.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/const"
+
+
+ModeBgOption {
+	id: modeBackground
+
+	property var image: "qrc:/icons/topLeft/utils.png"
+	property var imageOption: "qrc:/icons/topLeft/utils.png"
+
+	property alias down: mainKnob.down
+	property alias increase: incButton.down
+	property alias decrease: decButton.down
+
+	property var led: 1
+	property var ledOption: 0
+
+	LightRing {
+		id: lightRing
+		colorMode: parent.led
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.horizontalCenter: mainKnob.horizontalCenter
+		width: Const.macroButton + 2 * thickness
+	}
+
+	Knob {
+		id: mainKnob
+		image: parent.image
+		x: Const.microButton / 2 + Const.margin
+		anchors.bottom: parent.bottom
+		anchors.bottomMargin: x
+	}
+
+	NeuImage {
+		id: option
+		image: parent.imageOption
+		anchors.right: parent.right
+		anchors.rightMargin: Const.microLightThickness
+		y: Const.microLightThickness
+		colorMode: parent.ledOption
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+	}
+
+	Knob {
+		id: decButton
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.right: mainKnob.left
+		anchors.rightMargin: Const.margin
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+		onPressed: lightRing.angle = lightRing.angle - Const.rotateStep
+	}
+
+	Knob {
+		id: incButton
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.left: mainKnob.right
+		anchors.leftMargin: Const.margin
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+		onPressed: lightRing.angle = lightRing.angle + Const.rotateStep
+	}
+}

ui/emulator/components/NeuButton.qml

@@ -0,0 +1,272 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Button {
+	id: button
+	property var image: ""
+	property var radius: Math.min(width / 2, height / 2)
+	property var timeToPress: 100
+
+	signal pressed
+	signal released
+
+	onPressed: { button.down = true }
+	onReleased: { button.down = false }
+
+	implicitWidth: Const.macroButton
+	implicitHeight: Const.macroButton
+
+	contentItem: Item {
+		id: content
+		anchors.fill: parent
+		z: 1
+
+		Item {
+			property var factor: button.state == "Pressed" ?
+									 Const.imageScalePressed : Const.imageScale
+			property var elevator: button.state == "Pressed" ? 3 : 0
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			y: (parent.height * (1-factor)) / 2 + elevator
+			width: parent.width * factor
+			height: parent.height * factor
+
+			Behavior on y {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on width {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on height {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Image {
+				id: img
+				anchors.fill: parent
+				source: image
+				fillMode: Image.PreserveAspectFit
+				antialiasing: true
+				smooth: true
+			}
+
+			ColorOverlay {
+				anchors.fill: img
+				source: img
+				color: button.state == "Pressed" ? Theme.current.textSelected : Theme.current.text
+				antialiasing: true
+				smooth: true
+			}
+		}
+	}
+
+	background: Rectangle{
+		id: background
+		width: parent.implicitWidth
+		height: parent.implicitHeight
+		radius: button.radius
+		color: Theme.current.button
+		anchors.fill: parent
+
+//		Rectangle {
+//			anchors.fill: parent
+
+//			layer.enabled: true
+//			layer.effect: OpacityMask {
+//				maskSource: parent
+//			}
+//			color: Theme.current.button
+//			opacity: Theme.current.mergeOpacity
+
+//			RadialGradient {
+//				anchors.fill: parent
+//				gradient: Gradient {
+//					GradientStop { position: 0.0; color: backLightColor }
+//					GradientStop { position: 0.3; color: backLightColor }
+//					GradientStop { position: 0.5; color: "transparent" }
+//					GradientStop { position: 1.0; color: "transparent" }
+//				}
+//			}
+//		}
+
+		MouseArea {
+			hoverEnabled: true
+			anchors.fill: background
+			onEntered: {
+				button.state = "Hovering"
+			}
+
+			onExited: {
+				button.state = ""
+			}
+
+			onPressed: {
+				button.state = "Pressed"
+				button.pressed()
+			}
+
+			onReleased: {
+				button.released()
+				if (containsMouse)
+					button.state = "Hovering"
+				else
+					button.state = ""
+			}
+		}
+	}
+
+	DropShadow {
+		id: dropDown
+		anchors.fill: background
+		source: background
+		horizontalOffset: 6
+		verticalOffset: 6
+		radius: 10
+		samples: 16
+		color: Theme.current.shadow
+	}
+
+	DropShadow {
+		id: dropUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: -4
+		verticalOffset: -4
+		radius: 5
+		samples: 10
+		color: Theme.current.light
+	}
+
+
+	InnerShadow {
+		id: innerUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 2
+		samples: 6
+		smooth: true
+		color: Theme.current.shadow
+	}
+
+	Item {
+		id: hoverLight
+		implicitWidth: parent.implicitWidth
+		implicitHeight: parent.implicitHeight
+		anchors.fill: parent
+
+		layer.enabled: true
+		layer.effect: OpacityMask {
+			maskSource: background
+		}
+
+		Rectangle {
+			id: hoverGlow
+			width: 2 * parent.width
+			height: parent.height
+			x: - 2 * parent.width
+			color: "transparent"
+
+			HoverGlow {}
+		}
+	}
+
+	states: [
+		State {
+			name: "Hovering"
+			PropertyChanges {
+				target: hoverGlow
+				x: 0
+			}
+		},
+
+		State {
+			name: "Pressed"
+			PropertyChanges {
+				target: background
+				color: Theme.current.buttonSelected
+			}
+
+			PropertyChanges {
+				target: dropDown
+				horizontalOffset: 0
+				verticalOffset: 0
+				radius: 0
+				samples: 0
+			}
+
+			PropertyChanges {
+				target: dropUp
+				horizontalOffset: 0
+				verticalOffset: 0
+				radius: 0
+				samples: 0
+			}
+
+			PropertyChanges {
+				target: innerUp
+				horizontalOffset: 6
+				verticalOffset: 6
+				radius: 6
+				samples: 12
+			}
+		}
+	]
+
+	transitions: [
+		Transition {
+			from: ""; to: "Hovering"
+			NumberAnimation {
+				properties: "x"
+				duration: 500
+				easing.type: Easing.OutQuad
+			}
+		},
+
+		Transition {
+			from: "*"; to: "Pressed"
+
+			ColorAnimation {
+				properties: "color"
+				duration: timeToPress
+			}
+
+			NumberAnimation {
+				properties: "horizontalOffset, verticalOffset, radius, samples"
+				duration: timeToPress
+				easing.type: Easing.InOutQuad
+			}
+		},
+
+		Transition {
+			from: "Pressed"; to: "*"
+
+			ColorAnimation {
+				properties: "color"
+				duration: timeToPress
+			}
+
+			NumberAnimation {
+				properties: "horizontalOffset, verticalOffset, radius, samples"
+				duration: timeToPress
+				easing.type: Easing.InOutQuad
+			}
+		}
+	]
+}

ui/emulator/components/NeuImage.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: button
+	property var image: ""
+	property var radius: Math.min(width / 2, height / 2)
+
+	property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow
+	property color backLightColor: getColorMode()
+
+	implicitWidth: Const.microButton
+	implicitHeight: Const.microButton
+
+	function getColorMode() {
+		switch(colorMode) {
+		case(0): return Theme.current.none
+		case(1): return Theme.current.white
+		case(2): return Theme.current.green
+		case(3): return Theme.current.yellow
+		}
+	}
+
+	Item {
+		id: content
+		width: parent.implicitWidth
+		height: parent.implicitWidth
+		z: 1
+
+		Item {
+			property var factor: 0.8
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			y: (parent.height * (1-factor)) / 2
+			width: parent.width * factor
+			height: parent.height * factor
+
+			Image {
+				id: img
+				anchors.fill: parent
+				source: image
+				fillMode: Image.PreserveAspectFit
+				antialiasing: true
+				smooth: true
+			}
+
+			ColorOverlay {
+				anchors.fill: img
+				source: img
+				color: Theme.current.text
+				antialiasing: true
+				smooth: true
+			}
+		}
+	}
+
+	Rectangle{
+		id: background
+		width: parent.implicitWidth
+		height: parent.implicitHeight
+		radius: button.radius
+		color: Theme.current.button
+		anchors.fill: parent
+	}
+
+	DropShadow {
+		id: dropDown
+		anchors.fill: background
+		source: background
+		horizontalOffset: 6
+		verticalOffset: 6
+		radius: 10
+		samples: 16
+		color: Theme.current.shadow
+	}
+
+	DropShadow {
+		id: dropUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: -4
+		verticalOffset: -4
+		radius: 5
+		samples: 10
+		color: Theme.current.light
+	}
+
+	Glow {
+		id: glow
+		anchors.fill: background
+		source: background
+		radius: 10
+		samples: 20
+		color: backLightColor
+		transparentBorder: true
+	}
+}

ui/emulator/components/NeuLight.qml

@@ -0,0 +1,302 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Button {
+	id: button
+	property var image: ""
+	property var radius: Math.min(width / 2, height / 2)
+	property var timeToPress: 100
+	property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow
+	property color backLightColor: getColorMode()
+	property var specialScale: 1
+
+	signal pressed
+	signal released
+
+	onPressed: { button.down = true }
+	onReleased: { button.down = false }
+
+	implicitWidth: Const.macroButton
+	implicitHeight: Const.macroButton
+
+	function getColorMode() {
+		switch(colorMode) {
+		case(0): return Theme.current.none
+		case(1): return Theme.current.white
+		case(2): return Theme.current.green
+		case(3): return Theme.current.yellow
+		}
+	}
+
+	contentItem: Item {
+		id: content
+		anchors.fill: parent
+		z: 1
+
+		Item {
+			property var factor: specialScale * (button.state == "Pressed" ?
+									 Const.imageScalePressed : Const.imageScale)
+			property var elevator: button.state == "Pressed" ? 3 : 0
+
+			anchors.horizontalCenter: parent.horizontalCenter
+			y: (parent.height * (1-factor)) / 2 + elevator
+			width: parent.width * factor
+			height: parent.height * factor
+
+			Behavior on y {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on width {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Behavior on height {
+				NumberAnimation {
+					duration: timeToPress
+					easing.type: Easing.InOutQuad
+				}
+			}
+
+			Image {
+				id: img
+				anchors.fill: parent
+				source: image
+				fillMode: Image.PreserveAspectFit
+				antialiasing: true
+				smooth: true
+			}
+
+			ColorOverlay {
+				anchors.fill: img
+				source: img
+				color: button.state == "Pressed" ? Theme.current.textSelected : Theme.current.text
+				antialiasing: true
+				smooth: true
+			}
+		}
+	}
+
+	background: Rectangle{
+		id: background
+		width: parent.implicitWidth
+		height: parent.implicitHeight
+		radius: button.radius
+		color: Theme.current.button
+		anchors.fill: parent
+
+//		Rectangle {
+//			anchors.fill: parent
+
+//			layer.enabled: true
+//			layer.effect: OpacityMask {
+//				maskSource: parent
+//			}
+//			color: Theme.current.button
+//			opacity: Theme.current.mergeOpacity
+
+//			RadialGradient {
+//				anchors.fill: parent
+//				gradient: Gradient {
+//					GradientStop { position: 0.0; color: backLightColor }
+//					GradientStop { position: 0.3; color: backLightColor }
+//					GradientStop { position: 0.5; color: "transparent" }
+//					GradientStop { position: 1.0; color: "transparent" }
+//				}
+//			}
+//		}
+
+		MouseArea {
+			hoverEnabled: true
+			anchors.fill: background
+			onEntered: {
+				button.state = "Hovering"
+			}
+
+			onExited: {
+				button.state = ""
+			}
+
+			onPressed: {
+				button.state = "Pressed"
+				button.pressed()
+			}
+
+			onReleased: {
+				button.released()
+				if (containsMouse)
+					button.state = "Hovering"
+				else
+					button.state = ""
+			}
+		}
+	}
+
+	DropShadow {
+		id: dropDown
+		anchors.fill: background
+		source: background
+		horizontalOffset: 6
+		verticalOffset: 6
+		radius: 10
+		samples: 16
+		color: Theme.current.shadow
+	}
+
+	DropShadow {
+		id: dropUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: -4
+		verticalOffset: -4
+		radius: 5
+		samples: 10
+		color: Theme.current.light
+	}
+
+
+	InnerShadow {
+		id: innerUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 2
+		samples: 6
+		smooth: true
+		color: Theme.current.shadow
+	}
+
+	Glow {
+		id: glow
+		anchors.fill: background
+		source: background
+		radius: 10
+		samples: 20
+		color: backLightColor
+		transparentBorder: true
+	}
+
+	Item {
+		id: hoverLight
+		implicitWidth: parent.implicitWidth
+		implicitHeight: parent.implicitHeight
+		anchors.fill: parent
+
+		layer.enabled: true
+		layer.effect: OpacityMask {
+			maskSource: background
+		}
+
+		Rectangle {
+			id: hoverGlow
+			width: 2 * parent.width
+			height: parent.height
+			x: - 2 * parent.width
+			color: "transparent"
+
+			HoverGlow {}
+		}
+	}
+
+	states: [
+		State {
+			name: "Hovering"
+			PropertyChanges {
+				target: hoverGlow
+				x: 0
+			}
+		},
+
+		State {
+			name: "Pressed"
+			PropertyChanges {
+				target: background
+				color: Theme.current.buttonSelected
+			}
+
+			PropertyChanges {
+				target: dropDown
+				horizontalOffset: 0
+				verticalOffset: 0
+				radius: 0
+				samples: 0
+			}
+
+			PropertyChanges {
+				target: dropUp
+				horizontalOffset: 0
+				verticalOffset: 0
+				radius: 0
+				samples: 0
+			}
+
+			PropertyChanges {
+				target: innerUp
+				horizontalOffset: 6
+				verticalOffset: 6
+				radius: 6
+				samples: 12
+			}
+
+			//			PropertyChanges {
+			//				target: innerDown
+			//				horizontalOffset: - 4
+			//				verticalOffset: - 4
+			//				radius: 4
+			//				samples: 8
+			//			}
+		}
+	]
+
+	transitions: [
+		Transition {
+			from: ""; to: "Hovering"
+			NumberAnimation {
+				properties: "x"
+				duration: 500
+				easing.type: Easing.OutQuad
+			}
+		},
+
+		Transition {
+			from: "*"; to: "Pressed"
+
+			ColorAnimation {
+				properties: "color"
+				duration: timeToPress
+			}
+
+			NumberAnimation {
+				properties: "horizontalOffset, verticalOffset, radius, samples"
+				duration: timeToPress
+				easing.type: Easing.InOutQuad
+			}
+		},
+
+		Transition {
+			from: "Pressed"; to: "*"
+
+			ColorAnimation {
+				properties: "color"
+				duration: timeToPress
+			}
+
+			NumberAnimation {
+				properties: "horizontalOffset, verticalOffset, radius, samples"
+				duration: timeToPress
+				easing.type: Easing.InOutQuad
+			}
+		}
+	]
+}

ui/emulator/components/SegmentButton.qml

@@ -0,0 +1,186 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Button {
+	id: button
+	property var timeToPress: 100
+	property var angle: 45
+	signal pressed
+	signal released
+
+	onPressed: { button.down = true }
+	onReleased: { button.down = false }
+
+	background: SegmentCircle {
+		id: background
+
+		angle: button.angle
+
+		MouseArea {
+			hoverEnabled: true
+			anchors.fill: background
+			onEntered: {
+				button.state = "Hovering"
+			}
+
+			onExited: {
+				button.state = ""
+			}
+
+			onPressed: {
+				button.state = "Pressed"
+				button.pressed()
+			}
+
+			onReleased: {
+				button.released()
+				if (containsMouse)
+					button.state = "Hovering"
+				else
+					button.state = ""
+			}
+		}
+	}
+
+	DropShadow {
+		id: dropDown
+		anchors.fill: background
+		source: background
+		horizontalOffset: 6
+		verticalOffset: 6
+		radius: 10
+		samples: 16
+		color: Theme.current.shadow
+	}
+
+	DropShadow {
+		id: dropUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: -4
+		verticalOffset: -4
+		radius: 5
+		samples: 10
+		color: Theme.current.light
+	}
+
+
+	InnerShadow {
+		id: innerUp
+		anchors.fill: background
+		source: background
+		horizontalOffset: 3
+		verticalOffset: 3
+		radius: 2
+		samples: 6
+		smooth: true
+		color: Theme.current.shadow
+	}
+
+	Item {
+		id: hoverLight
+		anchors.fill: background
+
+		layer.enabled: true
+		layer.effect: OpacityMask {
+			maskSource: background
+		}
+
+		Rectangle {
+			id: hoverGlow
+			width: 2 * parent.width
+			height: parent.height
+			x: - 2 * parent.width
+			color: "transparent"
+
+			HoverGlow {}
+		}
+	}
+
+	states: [
+		State {
+			name: "Hovering"
+			PropertyChanges {
+				target: hoverGlow
+				x: 0
+			}
+		},
+
+		State {
+			name: "Pressed"
+			PropertyChanges {
+				target: background
+				color: Theme.current.buttonSelected
+			}
+
+			PropertyChanges {
+				target: dropDown
+				horizontalOffset: 0
+				verticalOffset: 0
+				radius: 0
+				samples: 0
+			}
+
+			PropertyChanges {
+				target: dropUp
+				horizontalOffset: 0
+				verticalOffset: 0
+				radius: 0
+				samples: 0
+			}
+
+			PropertyChanges {
+				target: innerUp
+				horizontalOffset: 6
+				verticalOffset: 6
+				radius: 6
+				samples: 12
+			}
+		}
+	]
+
+	transitions: [
+		Transition {
+			from: ""; to: "Hovering"
+			NumberAnimation {
+				properties: "x"
+				duration: 500
+				easing.type: Easing.OutQuad
+			}
+		},
+
+		Transition {
+			from: "*"; to: "Pressed"
+
+			ColorAnimation {
+				properties: "color"
+				duration: timeToPress
+			}
+
+			NumberAnimation {
+				properties: "horizontalOffset, verticalOffset, radius, samples"
+				duration: timeToPress
+				easing.type: Easing.InOutQuad
+			}
+		},
+
+		Transition {
+			from: "Pressed"; to: "*"
+
+			ColorAnimation {
+				properties: "color"
+				duration: timeToPress
+			}
+
+			NumberAnimation {
+				properties: "horizontalOffset, verticalOffset, radius, samples"
+				duration: timeToPress
+				easing.type: Easing.InOutQuad
+			}
+		}
+	]
+}

ui/emulator/components/SegmentCircle.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.13
+import QtQuick.Shapes 1.13
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: control
+	property var angle: 45
+	property var color: Theme.current.button
+
+	implicitWidth: Const.radiusLong * 2
+	implicitHeight: Const.radiusLong * 2
+
+	Rectangle {
+		id: innerShape
+
+		width: Const.radiusLong
+		height: Const.radiusLong
+		color: "transparent"
+		clip: true
+
+		Rectangle {
+			id: baseCircle
+			width: Const.radiusLong * 2
+			height: width
+			radius: width / 2
+			color: "transparent"
+			border.width: Const.radiusLong - Const.radiusShort
+			border.color: control.color
+		}
+
+		transform: Rotation {
+			angle: control.angle
+			origin {
+				x: Const.radiusLong
+				y: Const.radiusLong
+			}
+
+			axis {
+				z: 1
+				x: 0
+				y: 0
+			}
+		}
+	}
+}
+
+
+

ui/emulator/components/Trackball.qml

@@ -0,0 +1,108 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/const"
+
+Item {
+	id: control
+
+	property var longBut: Const.macroButton
+	property var shortBut: Const.microButton
+
+//	property alias increase: incButton.down
+//	property alias decrease: decButton.down
+
+//	LightRing {
+//		id: lightRing
+//		colorMode: parent.led
+//		anchors.verticalCenter: mainKnob.verticalCenter
+//		anchors.horizontalCenter: mainKnob.horizontalCenter
+//		width: Const.macroButton + 2 * thickness
+//	}
+
+//	ModeBg {
+//		additionalLength: 3 * shortBut
+//		anchors.centerIn: parent
+//	}
+
+//	ModeBg {
+//		additionalLength: - shortBut
+//		anchors.centerIn: parent
+//	}
+
+	width: Const.macroButton + Const.microButton + 2 * Const.margin
+	height: width
+
+	LightRing {
+		colorMode: 0
+		anchors.centerIn: parent
+		width: Const.macroButton + Const.microButton + 2 * Const.margin + 3 * shortBut
+		height: width
+		thickness: 60
+	}
+
+	Knob {
+		id: leftBut
+		anchors.right: parent.left
+		anchors.verticalCenter: parent.verticalCenter
+		implicitWidth: shortBut
+		implicitHeight: longBut
+	}
+
+	Knob {
+		id: rightBut
+		anchors.left: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		implicitWidth: shortBut
+		implicitHeight: longBut
+	}
+
+	Knob {
+		id: topBut
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.bottom: parent.top
+		implicitWidth: longBut
+		implicitHeight: shortBut
+	}
+
+	Knob {
+		id: bottomBut
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.bottom
+		implicitWidth: longBut
+		implicitHeight: shortBut
+	}
+
+	Knob {
+		id: topLeftBut
+		anchors.verticalCenter: parent.top
+		anchors.horizontalCenter: parent.left
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+	}
+
+	Knob {
+		id: topRightBut
+		anchors.verticalCenter: parent.top
+		anchors.horizontalCenter: parent.right
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+	}
+
+	Knob {
+		id: bottomLeftBut
+		anchors.verticalCenter: parent.bottom
+		anchors.horizontalCenter: parent.left
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+	}
+
+	Knob {
+		id: bottomRightBut
+		anchors.verticalCenter: parent.bottom
+		anchors.horizontalCenter: parent.right
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+	}
+}

ui/emulator/elements/JoystickButtonBind.qml

@@ -0,0 +1,13 @@
+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"
+
+JoystickButton {
+	property var name
+}

ui/emulator/elements/KnobLightBind.qml

@@ -0,0 +1,27 @@
+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"
+
+KnobLight {
+	id: knobLight
+	property var name
+	property var nameLed: name + "Led"
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "down"
+		viewModelProperty: name
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "colorMode"
+		viewModelProperty: nameLed
+	}
+}

ui/emulator/elements/LightImageBind.qml

@@ -0,0 +1,13 @@
+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"
+
+LightImage {
+	property var name
+}

ui/emulator/elements/ModeButtonBind.qml

@@ -0,0 +1,13 @@
+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"
+
+ModeButton {
+	property var name
+}

ui/emulator/elements/ModeOptionBind.qml

@@ -0,0 +1,13 @@
+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"
+
+ModeOption {
+	property var name
+}

ui/emulator/elements/TrackballBind.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/components"
+
+Trackball {
+
+}

ui/emulator/items/BottomRight.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+	width: 284
+	height: 284
+	x: 1433
+	y: 520
+
+	KnobLightBind {
+		name: "dual"
+		image: "qrc:/icons/bottomRight/dual.png"
+		x: 20
+	}
+
+	KnobLightBind {
+		name: "quad"
+		image: "qrc:/icons/bottomRight/quad.png"
+		x: 118
+	}
+
+	KnobLightBind {
+		name: "single"
+		image: "qrc:/icons/bottomRight/single.png"
+		x: 220
+	}
+
+	KnobLightBind {
+		name: "p2"
+		image: "qrc:/icons/bottomRight/p2.png"
+		y: 110
+	}
+
+	KnobLightBind {
+		name: "p3"
+		image: "qrc:/icons/bottomRight/p3.png"
+		x: 100
+		y: 110
+	}
+
+	KnobLightBind {
+		name: "p4"
+		image: "qrc:/icons/bottomRight/p4.png"
+		x: 200
+		y: 110
+	}
+
+	KnobLightBind {
+		name: "p1"
+		image: "qrc:/icons/bottomRight/p1.png"
+		width: 90
+		x: 154
+		y: 220
+	}
+}

ui/emulator/items/CurveButtons.qml

@@ -0,0 +1,84 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+	width: childrenRect.width
+	height: childrenRect.height
+
+	x: 600
+	y: 430
+
+	KnobLightBind {
+		name: "exit"
+		image: "qrc:/icons/curveButtons/exit.png"
+		width: 90
+		y: 310
+	}
+
+	KnobLightBind {
+		name: "freeze"
+		image: "qrc:/icons/curveButtons/freeze.png"
+		width: 140
+		x: 630
+		y: 310
+		colorMode: 2
+	}
+
+	KnobLightBind {
+		name: "pointer"
+		image: "qrc:/icons/curveButtons/pointer.png"
+		x: 58
+		y: 200
+	}
+
+	KnobLightBind {
+		name: "autoSet"
+		image: "qrc:/icons/curveButtons/auto.png"
+		x: 602
+		y: 200
+	}
+
+	KnobLightBind {
+		name: "abc"
+		image: "qrc:/icons/curveButtons/abc.png"
+		x: 106
+		y: 90
+	}
+
+	KnobLightBind {
+		name: "fourD"
+		image: "qrc:/icons/curveButtons/4d.png"
+		width: 90
+		x: 554
+		y: 90
+	}
+
+	KnobLightBind {
+		name: "clear"
+		image: "qrc:/icons/curveButtons/clear.png"
+		x: 202
+		y: 20
+	}
+
+	KnobLightBind {
+		name: "threeD"
+		image: "qrc:/icons/curveButtons/3d.png"
+		x: 458
+		y: 20
+	}
+
+	KnobLightBind {
+		name: "measure"
+		image: "qrc:/icons/curveButtons/meas.png"
+		width: 90
+		x: 317
+	}
+
+	KnobLightBind {
+		name: "bodyMark"
+		image: "qrc:/icons/curveButtons/bodyMark.png"
+		y: 90
+	}
+}

ui/emulator/items/Encoders.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+//	width: 670
+//	height: 240
+//	x: 891
+
+	width: childrenRect.width
+	height: childrenRect.height
+	anchors.horizontalCenter: parent.horizontalCenter
+	y: 210
+
+	Row {
+		spacing: 40
+		ModeOptionBind {
+			y: 130
+			name: "modePw"
+			imageOption: "qrc:/icons/encoder/x.png"
+			image: "qrc:/icons/encoder/modePw.png"
+		}
+
+		ModeOptionBind {
+			y: 41
+			name: "modeM"
+			//		tinyName: "y"
+			imageOption: "qrc:/icons/encoder/y.png"
+			image: "qrc:/icons/encoder/modeM.png"
+		}
+
+		ModeOptionBind {
+			name: "modePd"
+			//		tinyName: "z"
+			imageOption: "qrc:/icons/encoder/z.png"
+			image: "qrc:/icons/encoder/modePd.png"
+		}
+
+		ModeOptionBind {
+			y: 41
+			name: "modeC"
+			//		tinyName: "quadrat"
+			imageOption: "qrc:/icons/encoder/quadratic.png"
+			image: "qrc:/icons/encoder/modeC.png"
+		}
+
+		ModeButtonBind {
+			y: 130
+			name: "mode2D"
+			image: "qrc:/icons/encoder/mode2d.png"
+			led: 2
+		}
+	}
+}

ui/emulator/items/JoystickCouple.qml

@@ -0,0 +1,63 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+	y: 244
+
+	JoystickButtonBind {
+		id: leftJoy
+		name: "depth"
+		x: 1481
+	}
+
+	Row {
+		spacing: 10
+		anchors.top: leftJoy.bottom
+		anchors.topMargin: 10
+		anchors.horizontalCenter: leftJoy.horizontalCenter
+
+		LightImageBind {
+			name: "zoom"
+			image: "qrc:/icons/miniButton/zoom.png"
+		}
+
+		LightImageBind {
+			name: "depth"
+			image: "qrc:/icons/miniButton/depth.png"
+			colorMode: 2
+		}
+	}
+
+	JoystickButtonBind {
+		id: rightJoy
+		name: "focus"
+		x: 1711
+	}
+
+	Row {
+		spacing: 10
+		anchors.top: rightJoy.bottom
+		anchors.topMargin: 10
+		anchors.horizontalCenter: rightJoy.horizontalCenter
+
+		LightImageBind {
+			name: "angle"
+			image: "qrc:/icons/miniButton/angle.png"
+			colorMode: 1
+		}
+
+		LightImageBind {
+			name: "focusZone"
+			image: "qrc:/icons/miniButton/focusZone.png"
+			colorMode: 2
+		}
+
+		LightImageBind {
+			name: "focusDepth"
+			image: "qrc:/icons/miniButton/focusDepth.png"
+			colorMode: 3
+		}
+	}
+}

ui/emulator/items/Joysticks.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+//	width: 820
+//	height: 80
+	width: childrenRect.width
+	height: childrenRect.height
+	anchors.horizontalCenter: parent.horizontalCenter
+
+//	x: 550
+	y: 50
+
+	Row {
+		spacing: 64
+
+		JoystickButtonBind { name: "joystick1" }
+		JoystickButtonBind { name: "joystick2" }
+		JoystickButtonBind { name: "joystick3" }
+		JoystickButtonBind { name: "joystick4" }
+		JoystickButtonBind { name: "joystick5" }
+	}
+}

ui/emulator/items/MiniButtons.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import "qrc:/console/elements"
+import "qrc:/ui"
+
+Item {
+    width: 290 * UI.ratio
+    height: 46 * UI.ratio
+    x: 1590 * UI.ratio
+    y: 510 * UI.ratio
+
+    Row {
+        spacing: 10 * UI.ratio
+
+        MiniButton {
+            name: "zoom"
+            image: "qrc:/ui/Images/miniButton/zoom.png"
+        }
+
+        MiniButton {
+            name: "depth"
+            image: "qrc:/ui/Images/miniButton/depth.png"
+        }
+
+        Item {
+            width: 10 * UI.ratio
+            height: 46 * UI.ratio
+        }
+
+        MiniButton {
+            name: "angle"
+            image: "qrc:/ui/Images/miniButton/angle.png"
+        }
+
+        MiniButton {
+            name: "focusZone"
+            image: "qrc:/ui/Images/miniButton/focusZone.png"
+        }
+
+        MiniButton {
+            name: "focusDepth"
+            image: "qrc:/ui/Images/miniButton/focusDepth.png"
+        }
+    }
+}

ui/emulator/items/TopLeft.qml

@@ -0,0 +1,38 @@
+import QtQuick.Layouts 1.13
+
+import "qrc:/emulator/elements"
+import "qrc:/emulator/components"
+import "qrc:/const"
+
+GridLayout {
+	id: topLeft
+	x: 70
+	y: 200
+	rows: 3
+	columns: 4
+	rowSpacing: 36
+	columnSpacing: 36
+
+	NeuLight {
+		image: "qrc:/icons/topLeft/power.png"
+		Layout.column: 3
+		colorMode: 3
+//		enabled: false
+		// name: "power"
+	}
+
+	KnobLightBind { name: "patient" ; image: "qrc:/icons/topLeft/patient.png" }
+	KnobLightBind { name: "utils" ; image: "qrc:/icons/topLeft/utils.png" }
+	KnobLightBind { name: "dvd" ; image: "qrc:/icons/topLeft/dvd.png" }
+	KnobLightBind { name: "report" ; image: "qrc:/icons/topLeft/report.png" }
+	KnobLightBind { name: "probe" ; image: "qrc:/icons/topLeft/probe.png"
+		Layout.column: 1
+		Layout.row: 2
+	}
+
+	KnobLightBind { name: "archive" ; image: "qrc:/icons/topLeft/archive.png" }
+	KnobLightBind { name: "end" ; image: "qrc:/icons/topLeft/end.png" }
+}
+
+
+

ui/emulator/items/TopRight.qml

@@ -0,0 +1,39 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+	width: childrenRect.width
+	height: childrenRect.height
+	anchors.right: parent.right
+	anchors.rightMargin: 70
+	y: 70
+
+//	x: 1466
+//	y: 148
+
+	Row {
+		spacing: 36
+
+		KnobLightBind {
+			name: "xtd"
+			image: "qrc:/icons/topRight/xtd.png"
+		}
+
+		KnobLightBind {
+			name: "bf"
+			image: "qrc:/icons/topRight/bf.png"
+		}
+
+		KnobLightBind {
+			name: "p5"
+			image: "qrc:/icons/topRight/p5.png"
+		}
+
+		KnobLightBind {
+			name: "p6"
+			image: "qrc:/icons/topRight/p6.png"
+		}
+	}
+}

ui/emulator/items/Trackball.qml

@@ -0,0 +1,211 @@
+import QtQuick 2.0
+import de.skycoder42.QtMvvm.Core 1.0
+import de.skycoder42.QtMvvm.Quick 1.0
+import com.example.console 1.0
+import "qrc:/ui"
+
+Item {
+    width: 384 * UI.ratio
+    height: 384 * UI.ratio
+    x: 1036 * UI.ratio
+    y: 656 * UI.ratio
+    property bool tt: false
+    property bool tb: false
+    property bool tr: false
+    property bool tl: false
+    property bool ttr: false
+    property bool tbr: false
+    property bool ttl: false
+    property bool tbl: false
+
+
+    onTtChanged: {
+        if(tt) {
+            mainView.textLog = mainView.textLog + "Top trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Top trackball key released.\n"
+        }
+    }
+
+    onTbChanged: {
+        if(tb) {
+            mainView.textLog = mainView.textLog + "Bottom trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Bottom trackball key released.\n"
+        }
+    }
+
+    onTrChanged: {
+        if(tr) {
+            mainView.textLog = mainView.textLog + "Right trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Right trackball key released.\n"
+        }
+    }
+
+    onTlChanged: {
+        if(tl) {
+            mainView.textLog = mainView.textLog + "Left trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Left trackball key released.\n"
+        }
+    }
+
+    onTtrChanged: {
+        if(ttr) {
+            mainView.textLog = mainView.textLog + "Top Right trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Top Right trackball key released.\n"
+        }
+    }
+
+    onTbrChanged: {
+        if(tbr) {
+            mainView.textLog = mainView.textLog + "Bottom Right trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Bottom Right trackball key released.\n"
+        }
+    }
+
+    onTtlChanged: {
+        if(ttl) {
+            mainView.textLog = mainView.textLog + "Top Left trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Top Left trackball key released.\n"
+        }
+    }
+
+    onTblChanged: {
+        if(tbl) {
+            mainView.textLog = mainView.textLog + "Bottom Left trackball key pressed.\n"
+        }
+
+        else {
+            mainView.textLog = mainView.textLog + "Bottom Left trackball key released.\n"
+        }
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTT"
+        viewProperty: "tt"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTB"
+        viewProperty: "tb"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTR"
+        viewProperty: "tr"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTL"
+        viewProperty: "tl"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTTR"
+        viewProperty: "ttr"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTBR"
+        viewProperty: "tbr"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTTL"
+        viewProperty: "ttl"
+    }
+
+    MvvmBinding {
+        viewModel: mainView.viewModel
+        viewModelProperty: "trackballTBL"
+        viewProperty: "tbl"
+    }
+
+    Image {
+        visible: tt
+        source: "qrc:/ui/icons/trackball/TT.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: tb
+        source: "qrc:/ui/icons/trackball/TB.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: tr
+        source: "qrc:/ui/icons/trackball/TR.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: tl
+        source: "qrc:/ui/icons/trackball/TL.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: ttr
+        source: "qrc:/ui/icons/trackball/TTR.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: tbr
+        source: "qrc:/ui/icons/trackball/TBR.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: ttl
+        source: "qrc:/ui/icons/trackball/TTL.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        visible: tbl
+        source: "qrc:/ui/icons/trackball/TBL.svg"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        source: "qrc:/ui/icons/trackball/Trackball.png"
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+    }
+}

ui/emulator/items/TrackballGroup.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+
+TrackballBind {
+	anchors.horizontalCenter: parent.horizontalCenter
+	y: 650
+
+
+}

ui/icons/joystick/TT.svg

@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;fill:#E0E5EC;}
+	.st1{display:none;fill:url(#SVGID_1_);}
+	.st2{display:none;fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{display:none;fill:url(#SVGID_4_);}
+	.st5{display:none;fill:url(#SVGID_5_);}
+	.st6{display:none;fill:url(#SVGID_6_);}
+	.st7{display:none;fill:url(#SVGID_7_);}
+	.st8{display:none;fill:url(#SVGID_8_);}
+	.st9{display:none;}
+	.st10{display:inline;}
+</style>
+<rect class="st0" width="384" height="384"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="276.1932" y1="56.3482" x2="295.7905" y2="129.4863">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st1" d="M305.9,78.1c-8.5-8.5-17.8-16-27.8-22.3L250.3,104c5.8,3.9,11.3,8.3,16.3,13.4c5,5,9.5,10.5,13.4,16.3
+	l48.2-27.8C321.8,96,314.4,86.7,305.9,78.1z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="282.4123" y1="249.8962" x2="301.7557" y2="322.0867">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st2" d="M281,250.3c-3.9,5.8-8.3,11.3-13.4,16.3c-5,5-10.5,9.5-16.3,13.4l27.8,48.2c9.9-6.3,19.3-13.8,27.8-22.3
+	c8.5-8.5,16-17.9,22.3-27.8L281,250.3z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="185.9646" y1="26.8256" x2="207.1931" y2="106.0514">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st3" d="M192,31c-26.5,0-52.1,6.4-74.9,18.4l27.8,48.2c14.4-7.2,30.5-11,47.1-11s32.6,3.8,47.1,11l27.8-48.2
+	C244.1,37.3,218.5,31,192,31z"/>
+<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="177.8069" y1="277.9486" x2="199.0354" y2="357.1743">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st4" d="M240.1,286.5c-14.4,7.2-30.5,11-47.1,11s-32.6-3.8-47.1-11l-27.8,48.2c22.8,12,48.3,18.4,74.9,18.4
+	s52.1-6.4,74.9-18.4L240.1,286.5z"/>
+<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="83.2456" y1="61.9129" x2="102.589" y2="134.1034">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st5" d="M105.9,55.8C96,62.1,86.7,69.6,78.1,78.1c-8.5,8.5-16,17.8-22.3,27.8l48.2,27.8c3.9-5.8,8.3-11.3,13.4-16.3
+	c5-5,10.5-9.5,16.3-13.4L105.9,55.8z"/>
+<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="89.2102" y1="254.5162" x2="108.8068" y2="327.6517">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st6" d="M118.4,266.6c-5-5-9.5-10.5-13.4-16.3l-48.2,27.8c6.3,9.9,13.8,19.3,22.3,27.8c8.5,8.5,17.8,16,27.8,22.3
+	l27.8-48.2C128.9,276.1,123.4,271.6,118.4,266.6z"/>
+<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="47.7185" y1="117.5571" x2="85.1585" y2="257.2851">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st7" d="M97.5,144.9l-48.2-27.8C37.3,139.9,31,165.5,31,192c0,26.5,6.4,52.1,18.4,74.9l48.2-27.8
+	c-7.2-14.4-11-30.5-11-47.1S90.3,159.4,97.5,144.9z"/>
+<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="299.8415" y1="126.7149" x2="337.2815" y2="266.4429">
+	<stop  offset="0" style="stop-color:#32EC7B"/>
+	<stop  offset="1" style="stop-color:#17A58C"/>
+</linearGradient>
+<path class="st8" d="M354,192c0,26.5-6.4,52.1-18.4,74.9l-48.2-27.8c7.2-14.4,11-30.5,11-47.1s-3.8-32.6-11-47.1l48.2-27.8
+	C347.7,139.9,354,165.5,354,192z"/>
+<g class="st9">
+	
+		<image style="display:inline;overflow:visible;opacity:0.5;" width="390" height="390" xlink:href="E85434F6.png"  transform="matrix(1 0 0 1 -2 -3)">
+	</image>
+	<g class="st10">
+		
+			<image style="overflow:visible;opacity:0.5;" width="360" height="360" xlink:href="E85434FA.png"  transform="matrix(1 0 0 1 14 13)">
+		</image>
+		<g>
+			<g>
+				<path class="st0" d="M346.9,110.7l-6.5-11.2c-13.9-22.1-32.7-40.9-54.8-54.8c-3.6-2.3-7.4-4.5-11.2-6.5
+					C250.1,25.3,222.4,18,193,18s-57.1,7.3-81.3,20.1c-3.8,2-7.6,4.2-11.2,6.5C78.3,58.6,59.6,77.3,45.6,99.4
+					c-2.3,3.6-4.5,7.4-6.5,11.2C26.3,134.9,19,162.6,19,192s7.3,57.1,20.1,81.3c2,3.8,4.2,7.6,6.5,11.2
+					c13.9,22.1,32.7,40.9,54.8,54.8c3.6,2.3,7.4,4.5,11.2,6.5c24.3,12.9,52,20.1,81.3,20.1s57.1-7.3,81.3-20.1
+					c3.8-2,7.6-4.2,11.2-6.5c22.1-13.9,40.9-32.7,54.8-54.8c2.3-3.6,4.5-7.4,6.5-11.2c12.9-24.3,20.1-52,20.1-81.3
+					S359.7,134.9,346.9,110.7z M279.1,55.8c9.9,6.3,19.3,13.8,27.8,22.3c8.5,8.5,16,17.8,22.3,27.8L281,133.7
+					c-3.9-5.8-8.3-11.3-13.4-16.3c-5-5-10.5-9.5-16.3-13.4L279.1,55.8z M285.6,192c0,14.5-3.4,28.3-9.3,40.6
+					c-1.9,3.9-4.1,7.7-6.5,11.2c-6.6,9.8-15.1,18.3-24.9,24.9c-3.6,2.4-7.3,4.6-11.2,6.5c-12.2,6-26,9.3-40.6,9.3
+					s-28.3-3.4-40.6-9.3c-3.9-1.9-7.7-4.1-11.2-6.5c-9.8-6.6-18.3-15.1-24.9-24.9c-2.4-3.6-4.6-7.3-6.5-11.2
+					c-6-12.2-9.3-26-9.3-40.6c0-14.5,3.4-28.3,9.3-40.6c1.9-3.9,4.1-7.7,6.5-11.2c6.6-9.8,15.1-18.3,25-24.9
+					c3.6-2.4,7.3-4.6,11.2-6.5c12.2-6,26-9.3,40.6-9.3s28.3,3.4,40.6,9.3c3.9,1.9,7.7,4.1,11.2,6.5c9.8,6.6,18.3,15.1,24.9,25
+					c2.4,3.6,4.6,7.3,6.5,11.2C282.2,163.7,285.6,177.5,285.6,192z M193,31c26.5,0,52.1,6.4,74.9,18.4l-27.8,48.2
+					c-14.4-7.2-30.5-11-47.1-11s-32.6,3.8-47.1,11l-27.8-48.2C140.9,37.3,166.5,31,193,31z M79.1,78.1c8.5-8.5,17.8-16,27.8-22.3
+					l27.8,48.2c-5.8,3.9-11.3,8.3-16.3,13.4c-5,5-9.5,10.5-13.4,16.3l-48.2-27.8C63.1,96,70.6,86.7,79.1,78.1z M32,192
+					c0-26.5,6.4-52.1,18.4-74.9l48.2,27.8c-7.2,14.4-11,30.5-11,47.1s3.8,32.6,11,47.1l-48.2,27.8C38.3,244.1,32,218.5,32,192z
+					 M106.9,328.2c-9.9-6.3-19.3-13.8-27.8-22.3c-8.5-8.5-16-17.8-22.3-27.8l48.2-27.8c3.9,5.8,8.3,11.3,13.4,16.3
+					c5,5,10.5,9.5,16.3,13.4L106.9,328.2z M193,353c-26.5,0-52.1-6.4-74.9-18.4l27.8-48.2c14.4,7.2,30.5,11,47.1,11
+					s32.6-3.8,47.1-11l27.8,48.2C245.1,346.7,219.5,353,193,353z M306.9,305.9c-8.5,8.5-17.8,16-27.8,22.3L251.3,280
+					c5.8-3.9,11.3-8.3,16.3-13.4s9.5-10.5,13.4-16.3l48.2,27.8C322.9,288,315.4,297.3,306.9,305.9z M335.7,266.9l-48.2-27.8
+					c7.2-14.4,11-30.5,11-47.1s-3.8-32.6-11-47.1l48.2-27.8c12,22.8,18.4,48.4,18.4,74.9C354,218.5,347.7,244.1,335.7,266.9z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

ui/icons/uiMode/dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M23.9 40.65Q26.4 40.65 29.15 39.675Q31.9 38.7 34.6 36.55Q29.05 34.65 25.5 31.65Q21.95 28.65 20.1 24.95Q18.25 21.25 17.925 17.05Q17.6 12.85 18.45 8.5Q13.05 10.95 10.175 14.95Q7.3 18.95 7.3 24Q7.3 31.25 11.95 35.95Q16.6 40.65 23.9 40.65ZM23.9 45.4Q19.3 45.4 15.375 43.775Q11.45 42.15 8.625 39.3Q5.8 36.45 4.2 32.525Q2.6 28.6 2.6 24Q2.6 15.55 8.1 9.95Q13.6 4.35 21.05 3.15Q22.75 2.9 23.55 4Q24.35 5.1 23.75 6.85Q22.25 11.4 22.55 15.7Q22.85 20 24.8 23.525Q26.75 27.05 30.3 29.5Q33.85 31.95 38.95 32.75Q40.8 33.05 41.4 34.225Q42 35.4 40.95 36.75Q37.7 40.7 33.225 43.05Q28.75 45.4 23.9 45.4Z"/></svg>

ui/icons/uiMode/light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24 10.05Q23 10.05 22.325 9.375Q21.65 8.7 21.65 7.7V3.2Q21.65 2.2 22.325 1.525Q23 0.85 24 0.85Q25 0.85 25.675 1.525Q26.35 2.2 26.35 3.2V7.7Q26.35 8.7 25.675 9.375Q25 10.05 24 10.05ZM33.85 14.15Q33.15 13.45 33.15 12.5Q33.15 11.55 33.85 10.85L37 7.65Q37.65 7 38.65 7Q39.65 7 40.35 7.65Q41.05 8.35 41.05 9.3Q41.05 10.25 40.35 10.95L37.15 14.15Q36.45 14.85 35.5 14.85Q34.55 14.85 33.85 14.15ZM40.3 26.35Q39.3 26.35 38.625 25.675Q37.95 25 37.95 24Q37.95 23 38.625 22.325Q39.3 21.65 40.3 21.65H44.8Q45.8 21.65 46.475 22.325Q47.15 23 47.15 24Q47.15 25 46.475 25.675Q45.8 26.35 44.8 26.35ZM24 47.15Q23 47.15 22.325 46.475Q21.65 45.8 21.65 44.8V40.3Q21.65 39.3 22.325 38.625Q23 37.95 24 37.95Q25 37.95 25.675 38.625Q26.35 39.3 26.35 40.3V44.8Q26.35 45.8 25.675 46.475Q25 47.15 24 47.15ZM10.85 14.15 7.65 11Q6.95 10.35 6.95 9.375Q6.95 8.4 7.65 7.65Q8.4 6.95 9.325 6.95Q10.25 6.95 10.95 7.65L14.15 10.85Q14.9 11.6 14.9 12.55Q14.9 13.5 14.15 14.2Q13.5 14.85 12.5 14.85Q11.5 14.85 10.85 14.15ZM37 40.35 33.8 37.15Q33.1 36.45 33.125 35.475Q33.15 34.5 33.85 33.8Q34.5 33.15 35.475 33.15Q36.45 33.15 37.15 33.8L40.4 36.95Q41.1 37.65 41.075 38.625Q41.05 39.6 40.4 40.35Q39.7 41.05 38.7 41.05Q37.7 41.05 37 40.35ZM3.2 26.35Q2.2 26.35 1.525 25.675Q0.85 25 0.85 24Q0.85 23 1.525 22.325Q2.2 21.65 3.2 21.65H7.7Q8.7 21.65 9.375 22.325Q10.05 23 10.05 24Q10.05 25 9.375 25.675Q8.7 26.35 7.7 26.35ZM7.65 40.35Q6.95 39.65 6.95 38.675Q6.95 37.7 7.65 37L10.85 33.8Q11.55 33.15 12.525 33.15Q13.5 33.15 14.2 33.8Q14.9 34.5 14.9 35.5Q14.9 36.5 14.2 37.2L11.05 40.35Q10.35 41.05 9.375 41.05Q8.4 41.05 7.65 40.35ZM24 35.7Q19.1 35.7 15.7 32.3Q12.3 28.9 12.3 24Q12.3 19.1 15.7 15.7Q19.1 12.3 24 12.3Q28.9 12.3 32.3 15.7Q35.7 19.1 35.7 24Q35.7 28.9 32.3 32.3Q28.9 35.7 24 35.7ZM24 30.95Q26.9 30.95 28.95 28.925Q31 26.9 31 24Q31 21.1 28.95 19.05Q26.9 17 24 17Q21.1 17 19.075 19.05Q17.05 21.1 17.05 24Q17.05 26.9 19.075 28.925Q21.1 30.95 24 30.95Z"/></svg>

ui/theme/Dark.qml

@@ -0,0 +1,7 @@
+Palette {
+    id: dark
+    isDarkTheme: true
+//    shiny: "#B8E2FF"
+//    primary: "#62B5ED"
+//    selected: "#9BCDFF"
+}

ui/theme/Light.qml

@@ -0,0 +1,7 @@
+Palette {
+    id: light
+    isDarkTheme: false
+//    shiny: "#AEE9FF"
+//    primary: "#4CA9DF"
+//    selected: "#3D88D4"
+}

ui/theme/Palette.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+
+QtObject {
+    property bool isDarkTheme: false
+
+	property color shiny: "#D7DEE9"
+    property color primary
+	property color selected: isDarkTheme ? "#D1D7E3" : "#D1D7E3"
+
+	property color background: isDarkTheme ? "#181818" : "#B8C5D7"
+	property color light: isDarkTheme ? "#05FFFFFF" : "#80F1F2F5"
+	property color shadow: isDarkTheme ? "#C0000000" : "#95A4B9"
+	property color lightShadow: isDarkTheme ? "#80000000" : "#80C9D1DD"
+
+	property color button: isDarkTheme ? "#222222" : "#C6D1E1"
+	property color buttonSelected: isDarkTheme ? "#202020" : "#AAB7CA"
+
+	property color text: isDarkTheme ? "#656E85" : "#323B52"
+	property color textSelected: isDarkTheme ? "#656E85" : "#323B52"
+
+	property color none: isDarkTheme ? "#2D2F32" : "#A7B4C7"
+	property color noneGlow: isDarkTheme ? "#2D2F32" : "#A3B2C7"
+	property color noneDeep: isDarkTheme ? "#767F8C" : "#767F8C"
+
+	property color white: isDarkTheme ? "#FFFFFF" : "#FFFFFF"
+	property color whiteGlow: isDarkTheme ? "#F1F5FA" : "#F1F5FA"
+	property color whiteDeep: isDarkTheme ? "#A9CFFF" : "#A9CFFF"
+
+	property color green: isDarkTheme ? "#95CF6C" : "#95CF6C"
+	property color greenGlow: isDarkTheme ? "#B8E49B" : "#B8E49B"
+	property color greenDeep: isDarkTheme ? "#17A58C" : "#17A58C"
+
+	property color yellow: isDarkTheme ? "#F5CC3C" : "#F5CC3C"
+	property color yellowGlow: isDarkTheme ? "#F3DE96" : "#80F3DE96"
+	property color yellowDeep: isDarkTheme ? "#D37129" : "#D37129"
+
+	property var glowRaduis: isDarkTheme ? 15 : 30
+
+    property var disabledOpacity: 0.4
+	property var mergeOpacity: isDarkTheme ? 0.1 : 0.6
+    property var disabledTextOpacity: isDarkTheme ? 0.38 : 0.64
+//	 green "#32EC7B"
+}

ui/theme/Theme.qml

@@ -0,0 +1,10 @@
+pragma Singleton
+import QtQuick 2.13
+
+QtObject {
+
+    property Palette light: Light {}
+    property Palette dark: Dark {}
+    property Palette current: light
+
+}

ui/theme/qmldir

@@ -0,0 +1 @@
+singleton Theme Theme.qml