First release

First fullt functional release with some bugs

consoleEmulator.pro

@@ -1,11 +1,9 @@
-TEMPLATE = subdirs
-
-SUBDIRS += \
-	logic \
-	network \
-	test \
-	ui
-
-logic.depends += network
-ui.depends += logic
-test.depends += logic
+TEMPLATE = subdirs
+
+SUBDIRS += \
+	logic \
+	test \
+	ui
+
+ui.depends += logic
+test.depends += logic

logic/include/logger/ConsoleLogger.h

@@ -0,0 +1,13 @@
+#ifndef CONSOLELOGGER_H
+#define CONSOLELOGGER_H
+
+#include "model/Logger.h"
+
+class ConsoleLogger : public Logger
+{
+public:
+    void log(QString message) override;
+    ~ConsoleLogger() override;
+};
+
+#endif //CONSOLELOGGER_H

logic/include/model/ButtonHelper.h

@@ -0,0 +1,81 @@
+#ifndef BUTTONHELPER_H
+#define BUTTONHELPER_H
+
+#define PUSH_BUTTON(CAPITAL_NAME, SMALL_NAME, FUNC_CODE, LED_FUNC_CODE) \
+    private:    \
+    PushButton _ ## SMALL_NAME{FUNC_CODE, LED_FUNC_CODE}; \
+    void init ## CAPITAL_NAME()    \
+    {   \
+    connect(this, &Console::dataReady, _ ## SMALL_NAME.getLed(), &Led::newData);\
+    connect(_ ## SMALL_NAME.getLed(), SIGNAL(ledChanged(char)), this, SIGNAL(SMALL_NAME ## LedChanged(char)));\
+    } \
+    public: \
+    void press ## CAPITAL_NAME()    \
+    {   \
+    auto arr = _ ## SMALL_NAME.press(); \
+    _dataSender->send(arr); \
+    } \
+    void release ## CAPITAL_NAME()  \
+    {     \
+    auto arr = _ ## SMALL_NAME.release(); \
+    _dataSender->send(arr); \
+    } \
+    Q_SIGNAL void SMALL_NAME ## LedChanged(char value)
+
+/*************************************************************************************************/
+#define PUSH_BUTTON_NO_LED(CAPITAL_NAME, SMALL_NAME, FUNC_CODE) \
+    private:    \
+    PushButton _ ## SMALL_NAME{FUNC_CODE}; \
+    void init ## CAPITAL_NAME()    \
+    {   \
+    connect(this, &Console::dataReady, _ ## SMALL_NAME.getLed(), &Led::newData);\
+    connect(_ ## SMALL_NAME.getLed(), SIGNAL(ledChanged(char)), this, SIGNAL(SMALL_NAME ## LedChanged(char)));\
+    } \
+    public: \
+    void press ## CAPITAL_NAME()    \
+    {   \
+    auto arr = _ ## SMALL_NAME.press(); \
+    _dataSender->send(arr); \
+    } \
+    void release ## CAPITAL_NAME()  \
+    {   \
+    auto arr = _ ## SMALL_NAME.release(); \
+    _dataSender->send(arr); \
+    } \
+    Q_SIGNAL void SMALL_NAME ## LedChanged(char value)
+
+/*************************************************************************************************/
+#define ROTARY_BUTTON(CAPITAL_NAME, SMALL_NAME, FUNC_CODE, LED_FUNC_CODE) \
+    private:    \
+    RotaryButton _ ## SMALL_NAME{FUNC_CODE, LED_FUNC_CODE}; \
+    void init ## CAPITAL_NAME()    \
+    {   \
+    connect(this, &Console::dataReady, _ ## SMALL_NAME.getLed(), &Led::newData);\
+    connect(_ ## SMALL_NAME.getLed(), SIGNAL(ledChanged(char)), this, SIGNAL(SMALL_NAME ## LedChanged(char)));\
+    } \
+    public: \
+    void rotate ## CAPITAL_NAME(int value)    \
+    {   \
+    auto arr = _ ## SMALL_NAME.rotate(value); \
+    _dataSender->send(arr); \
+    } \
+    Q_SIGNAL void SMALL_NAME ## LedChanged(char value)
+
+/*************************************************************************************************/
+#define ROTARY_BUTTON_NO_LED(CAPITAL_NAME, SMALL_NAME, FUNC_CODE) \
+    private:    \
+    RotaryButton _ ## SMALL_NAME{FUNC_CODE}; \
+    void init ## CAPITAL_NAME()    \
+    {   \
+    connect(this, &Console::dataReady, _ ## SMALL_NAME.getLed(), &Led::newData);\
+    connect(_ ## SMALL_NAME.getLed(), SIGNAL(ledChanged(char)), this, SIGNAL(SMALL_NAME ## LedChanged(char)));\
+    } \
+    public: \
+    void rotate ## CAPITAL_NAME(int value)    \
+    {   \
+    auto arr = _ ## SMALL_NAME.rotate(value); \
+    _dataSender->send(arr); \
+    } \
+    Q_SIGNAL void SMALL_NAME ## LedChanged(char value)
+
+#endif //BUTTONHELPER_H

logic/include/model/Console.h

@@ -1,18 +1,129 @@
 #ifndef CONSOLE_H
 #define CONSOLE_H
 
+#define PROTOCOL_LENGTH 8
+#define PacketAppDirection 0x01
+#define EchoDataLength 0x02
+#define EchoType 0x06
+#define EchoFunctionCode 0xA4
+#define ZeroValue 0x00
 
-class DataSender;
+#include <QObject>
 
-class Console
+#include "ButtonHelper.h"
+#include "FunctionCodes.h"
+#include "PushButton.h"
+#include "RotaryButton.h"
+
+#include "DataSender.h"
+#include "Logger.h"
+
+class Console : public QObject
 {
+	Q_OBJECT
+
+	//PushButton with LED
+	PUSH_BUTTON(Dual, dual, DUAL_FC, static_cast<char>(DUAL_LED_FC));
+	PUSH_BUTTON(Quad, quad, QUAD_FC, static_cast<char>(QUAD_LED_FC));
+	PUSH_BUTTON(Single, single, SINGLE_FC, static_cast<char>(SINGLE_LED_FC));
+	PUSH_BUTTON(P1, p1, P1_FC, static_cast<char>(P1_LED_FC));
+	PUSH_BUTTON(P2, p2, P2_FC, static_cast<char>(P2_LED_FC));
+	PUSH_BUTTON(P3, p3, P3_FC, static_cast<char>(P3_LED_FC));
+	PUSH_BUTTON(P4, p4, P4_FC, static_cast<char>(P4_LED_FC));
+	PUSH_BUTTON(P5, p5, P5_FC, static_cast<char>(P5_LED_FC));
+	PUSH_BUTTON(P6, p6, P6_FC, static_cast<char>(P6_LED_FC));
+	PUSH_BUTTON(Exit, exit, EXIT_FC, static_cast<char>(EXIT_LED_FC));
+	PUSH_BUTTON(Freeze, freeze, FREEZE_FC, static_cast<char>(FREEZE_LED_FC));
+	PUSH_BUTTON(Pointer, pointer, POINTER_FC, static_cast<char>(POINTER_LED_FC));
+	PUSH_BUTTON(AutoSet, autoSet, AUTOSET_FC, static_cast<char>(AUTOSET_LED_FC));
+	PUSH_BUTTON(Abc, abc, ABC_FC, static_cast<char>(ABC_LED_FC));
+	PUSH_BUTTON(FourD, fourD, FOUR_D_FC, static_cast<char>(FOUR_D_LED_FC));
+	PUSH_BUTTON(Clear, clear, CLEAR_FC, static_cast<char>(CLEAR_LED_FC));
+	PUSH_BUTTON(ThreeD, threeD, THREE_D_FC, static_cast<char>(THREE_D_LED_FC));
+	PUSH_BUTTON(Measure, measure, MEASURE_FC, static_cast<char>(MEASURE_LED_FC));
+	PUSH_BUTTON(BodyMark, bodyMark, BODY_MARK_FC, static_cast<char>(BODY_MARK_LED_FC));
+	PUSH_BUTTON(Patient, patient, PATIENT_FC, static_cast<char>(PATIENT_LED_FC));
+	PUSH_BUTTON(Utils, utils, UTILS_FC, static_cast<char>(UTILS_LED_FC));
+	PUSH_BUTTON(Dvd, dvd, DVD_FC, static_cast<char>(DVD_LED_FC));
+	PUSH_BUTTON(Report, report, REPORT_FC, static_cast<char>(REPORT_LED_FC));
+	PUSH_BUTTON(Probe, probe, PROBE_FC, static_cast<char>(PROBE_LED_FC));
+	PUSH_BUTTON(Archive, archive, ARCHIVE_FC, static_cast<char>(ARCHIVE_LED_FC));
+	PUSH_BUTTON(End, end, END_FC, static_cast<char>(END_LED_FC));
+	PUSH_BUTTON(Xtd, xtd, XTD_FC, static_cast<char>(XTD_LED_FC));
+	PUSH_BUTTON(Bf, bf, BF_FC, static_cast<char>(BF_LED_FC));
+	PUSH_BUTTON(DepthCenter, depthCenter, DEPTH_CENTER_FC, static_cast<char>(ZOOM_LED_FC));
+	PUSH_BUTTON(FocusCenter, focusCenter, FOCUS_CENTER_FC, static_cast<char>(FOCUS_ZONE_LED_FC));
+	PUSH_BUTTON(ModePwCenter, modePwCenter, MODE_PW_CENTER_FC, static_cast<char>(MODE_PW_LED_FC));
+	PUSH_BUTTON(ModeMCenter, modeMCenter, MODE_M_CENTER_FC, static_cast<char>(MODE_M_LED_FC));
+	PUSH_BUTTON(ModePdCenter, modePdCenter, MODE_PD_CENTER_FC, static_cast<char>(MODE_PD_LED_FC));
+	PUSH_BUTTON(ModeCCenter, modeCCenter, MODE_C_CENTER_FC, static_cast<char>(MODE_C_LED_FC));
+	PUSH_BUTTON(ModeBCenter, modeBCenter, MODE_2D_CENTER_FC, static_cast<char>(MODE_2D_LED_FC));
+	PUSH_BUTTON(DepthBottom, depthBottom, DEPTH_BOTTOM_FC, static_cast<char>(DEPTH_LED_FC));
+	PUSH_BUTTON(FocusBottom, focusBottom, FOCUS_BOTTOM_FC, static_cast<char>(FOCUS_DEPTH_LED_FC));
+
+	//PushButton with No LED
+	PUSH_BUTTON_NO_LED(Js1Top, js1Top, JOYSTICK1_TOP_FC);
+	PUSH_BUTTON_NO_LED(Js2Top, js2Top, JOYSTICK2_TOP_FC);
+	PUSH_BUTTON_NO_LED(Js3Top, js3Top, JOYSTICK3_TOP_FC);
+	PUSH_BUTTON_NO_LED(Js4Top, js4Top, JOYSTICK4_TOP_FC);
+	PUSH_BUTTON_NO_LED(Js5Top, js5Top, JOYSTICK5_TOP_FC);
+	PUSH_BUTTON_NO_LED(DepthTop, depthTop, DEPTHTOP_FC);
+	PUSH_BUTTON_NO_LED(FocusTop, focusTop, FOCUSTOP_FC);
+	PUSH_BUTTON_NO_LED(Js1Center, js1Center, JOYSTICK1_CENTER_FC);
+	PUSH_BUTTON_NO_LED(Js2Center, js2Center, JOYSTICK2_CENTER_FC);
+	PUSH_BUTTON_NO_LED(Js3Center, js3Center, JOYSTICK3_CENTER_FC);
+	PUSH_BUTTON_NO_LED(Js4Center, js4Center, JOYSTICK4_CENTER_FC);
+	PUSH_BUTTON_NO_LED(Js5Center, js5Center, JOYSTICK5_CENTER_FC);
+	PUSH_BUTTON_NO_LED(Js1Bottom, js1Bottom, JOYSTICK1_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(Js2Bottom, js2Bottom, JOYSTICK2_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(Js3Bottom, js3Bottom, JOYSTICK3_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(Js4Bottom, js4Bottom, JOYSTICK4_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(Js5Bottom, js5Bottom, JOYSTICK5_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(TrackballTop, trackballTop, TRACKBALL_TOP_FC);
+	PUSH_BUTTON_NO_LED(TrackballTopRight, trackballTopRight, TRACKBALL_TOP_RIGHT_FC);
+	PUSH_BUTTON_NO_LED(TrackballRight, trackballRight, TRACKBALL_RIGHT_FC);
+	PUSH_BUTTON_NO_LED(TrackballBottomRight, trackballBottomRight, TRACKBALL_BOTTOM_RIGHT_FC);
+	PUSH_BUTTON_NO_LED(TrackballBottom, trackballBottom, TRACKBALL_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(TrackballBottomLeft, trackballBottomLeft, TRACKBALL_TOP_BOTTOM_FC);
+	PUSH_BUTTON_NO_LED(TrackballLeft, trackballLeft, TRACKBALL_LEFT_FC);
+	PUSH_BUTTON_NO_LED(TrackballTopLeft, trackballTopLeft, TRACKBALL_TOP_LEFT_FC);
+
+	//ROTAY_BUTTON with LED
+	ROTARY_BUTTON(Focus, focus, FOCUS_FC, static_cast<char>(ANGLE_LED_FC));
+	ROTARY_BUTTON(ModeM, modeM, MODE_M_FC, static_cast<char>(QUADRAT_LED_FC));
+	ROTARY_BUTTON(ModePd, modePd, MODE_PD_FC, static_cast<char>(Z_LED_FC));
+	ROTARY_BUTTON(ModeC, modeC, MODE_C_FC, static_cast<char>(Y_LED_FC));
+	ROTARY_BUTTON(ModeB, modeB, MODE_2D_FC, static_cast<char>(X_LED_FC));
+
+	//ROTAY_BUTTON with No LED
+	ROTARY_BUTTON_NO_LED(Js1, js1, JOYSTICK1_FC);
+	ROTARY_BUTTON_NO_LED(Js2, js2, JOYSTICK2_FC);
+	ROTARY_BUTTON_NO_LED(Js3, js3, JOYSTICK3_FC);
+	ROTARY_BUTTON_NO_LED(Js4, js4, JOYSTICK4_FC);
+	ROTARY_BUTTON_NO_LED(Js5, js5, JOYSTICK5_FC);
+	ROTARY_BUTTON_NO_LED(Depth, depth, DEPTH_FC);
+	ROTARY_BUTTON_NO_LED(ModePw, modePw, MODE_PW_FC);
+
 private:
-    DataSender* _dataSender;
+	DataSender* _dataSender;
+	Logger* _logger;
 
 public:
-    Console();
-    void injectDataSender(DataSender* sender);
-    void test();
+	Console();
+
+	void injectDataSender(DataSender* sender);
+	void injectLogger(Logger* logger);
+	void hasValidDataFormat(const QByteArray& data);
+	bool isEchoPacket(const QByteArray& data);
+	void initializeButtons();
+
+signals:
+	void dataReady(QByteArray data, Logger* log);
+
+//uncrustify off
+public slots:
+//uncrustify on
+    void newData(QByteArray data);
 };
 
-#endif // CONSOLE_H
+#endif //CONSOLE_H

logic/include/model/DataSender.h

@@ -1,13 +1,21 @@
 #ifndef DATASENDER_H
 #define DATASENDER_H
 
+#include <QObject>
 #include <QByteArray>
 
-class DataSender
+class DataSender : public QObject
 {
+    Q_OBJECT
+
 public:
-    virtual int send(const QByteArray& data) = 0;
-    virtual ~DataSender(){}
+    virtual void send(const QByteArray& data) = 0;
+    virtual ~DataSender()
+    {
+    }
+
+signals:
+    void dataReady(const QByteArray& data);
 };
 
-#endif // DATASENDER_H
+#endif //DATASENDER_H

logic/include/model/FunctionCodes.h

@@ -0,0 +1,134 @@
+#ifndef FUNCTIONCODES_H
+#define FUNCTIONCODES_H
+
+//Buttons
+#define DUAL_FC 0x1D
+#define QUAD_FC 0x1C
+#define SINGLE_FC 0x1B
+#define P1_FC 0x21
+#define P2_FC 0x22
+#define P3_FC 0x23
+#define P4_FC 0x24
+#define EXIT_FC 0x0C
+#define FREEZE_FC 0x15
+#define POINTER_FC 0x0D
+#define AUTOSET_FC 0x14
+#define ABC_FC 0x0E
+#define FOUR_D_FC 0x13
+#define CLEAR_FC 0x10
+#define THREE_D_FC 0x12
+#define MEASURE_FC 0x11
+#define BODY_MARK_FC 0x0F
+#define PATIENT_FC 0x02
+#define UTILS_FC 0x03
+#define DVD_FC 0x04
+#define REPORT_FC 0x05
+#define PROBE_FC 0x06
+#define ARCHIVE_FC 0x07
+#define END_FC 0x08
+#define XTD_FC 0x16
+#define BF_FC 0x17
+#define P5_FC 0x25
+#define P6_FC 0x26
+
+#define JOYSTICK1_TOP_FC 0x39
+#define JOYSTICK2_TOP_FC 0x3C
+#define JOYSTICK3_TOP_FC 0x3F
+#define JOYSTICK4_TOP_FC 0x42
+#define JOYSTICK5_TOP_FC 0x45
+#define DEPTHTOP_FC 0x33
+#define FOCUSTOP_FC 0x36
+
+#define JOYSTICK1_CENTER_FC 0x38
+#define JOYSTICK2_CENTER_FC 0x3B
+#define JOYSTICK3_CENTER_FC 0x3E
+#define JOYSTICK4_CENTER_FC 0x41
+#define JOYSTICK5_CENTER_FC 0x44
+#define DEPTH_CENTER_FC 0x32
+#define FOCUS_CENTER_FC 0x35
+#define MODE_PW_CENTER_FC 0x49
+#define MODE_M_CENTER_FC 0x4A
+#define MODE_PD_CENTER_FC 0x4B
+#define MODE_C_CENTER_FC 0x4C
+#define MODE_2D_CENTER_FC 0x4D
+
+#define JOYSTICK1_BOTTOM_FC 0x37
+#define JOYSTICK2_BOTTOM_FC 0x3A
+#define JOYSTICK3_BOTTOM_FC 0x3D
+#define JOYSTICK4_BOTTOM_FC 0x40
+#define JOYSTICK5_BOTTOM_FC 0x43
+#define DEPTH_BOTTOM_FC 0x31
+#define FOCUS_BOTTOM_FC 0x34
+
+//Trackball
+#define TRACKBALL_TOP_FC 0x2A
+#define TRACKBALL_BOTTOM_FC 0x2B
+#define TRACKBALL_RIGHT_FC 0x2C
+#define TRACKBALL_LEFT_FC 0x2D
+#define TRACKBALL_TOP_RIGHT_FC 0x2E
+#define TRACKBALL_BOTTOM_RIGHT_FC 0x28
+#define TRACKBALL_TOP_LEFT_FC 0x2F
+#define TRACKBALL_TOP_BOTTOM_FC 0x29
+
+//Joystick
+#define JOYSTICK1_FC 0x56
+#define JOYSTICK2_FC 0x57
+#define JOYSTICK3_FC 0x58
+#define JOYSTICK4_FC 0x59
+#define JOYSTICK5_FC 0x5A
+#define DEPTH_FC 0x52
+#define FOCUS_FC 0x51
+#define MODE_PW_FC 0x5E
+#define MODE_M_FC 0x5F
+#define MODE_PD_FC 0x60
+#define MODE_C_FC 0x61
+#define MODE_2D_FC 0x62
+
+//Leds
+#define DUAL_LED_FC 0X82
+#define QUAD_LED_FC 0X81
+#define SINGLE_LED_FC 0X80
+#define P1_LED_FC 0X86
+#define P2_LED_FC 0X87
+#define P3_LED_FC 0X88
+#define P4_LED_FC 0X89
+#define EXIT_LED_FC 0X71
+#define FREEZE_LED_FC 0X7A
+#define POINTER_LED_FC 0X72
+#define AUTOSET_LED_FC 0X79
+#define ABC_LED_FC 0X73
+#define FOUR_D_LED_FC 0X78
+#define CLEAR_LED_FC 0X75
+#define THREE_D_LED_FC 0X77
+#define MEASURE_LED_FC 0X76
+#define BODY_MARK_LED_FC 0X74
+#define POWER_LED_FC 0X66
+#define PATIENT_LED_FC 0X67
+#define UTILS_LED_FC 0X68
+#define DVD_LED_FC 0X69
+#define REPORT_LED_FC 0X6A
+#define PROBE_LED_FC 0X6B
+#define ARCHIVE_LED_FC 0X6C
+#define END_LED_FC 0X6D
+#define XTD_LED_FC 0X7B
+#define BF_LED_FC 0X7C
+#define P5_LED_FC 0X8A
+#define P6_LED_FC 0X8B
+
+#define MODE_PW_LED_FC 0X98
+#define MODE_2D_LED_FC 0X9A
+#define MODE_M_LED_FC 0X9C
+#define MODE_C_LED_FC 0X9E
+#define MODE_PD_LED_FC 0X9F
+#define QUADRAT_LED_FC 0X9D
+#define X_LED_FC 0X9B
+#define Y_LED_FC 0X99
+#define Z_LED_FC 0X97
+
+#define ZOOM_LED_FC 0X8F
+#define DEPTH_LED_FC 0X90
+#define ANGLE_LED_FC 0X91
+#define FOCUS_ZONE_LED_FC 0X92
+#define FOCUS_DEPTH_LED_FC 0X93
+
+#endif //FUNCTIONCODES_H

logic/include/model/Led.h

@@ -0,0 +1,35 @@
+#ifndef LED_H
+#define LED_H
+
+#define LED_OFF 0x00
+#define LED_COLOR_WHITE 0x01
+#define LED_COLOR_GREEN 0x02
+#define FUNCTION_CODE 3
+#define LED_COLOR 4
+
+#include <QObject>
+
+#include "Logger.h"
+
+class Led : public QObject
+{
+    Q_OBJECT
+
+private:
+    char _functionCode;
+    bool _hasLed;
+
+public:
+    Led();
+    Led(char functionCode);
+
+signals:
+    void ledChanged(char value);
+
+//uncrustify off
+public slots:
+//uncrustify on
+    void newData(QByteArray data, Logger* log);
+};
+
+#endif //LED_H

logic/include/model/Logger.h

@@ -0,0 +1,12 @@
+#ifndef LOGGER_H
+#define LOGGER_H
+#include "QString"
+
+class Logger
+{
+public:
+    virtual void log(QString  message) = 0;
+    virtual ~Logger(){}
+};
+
+#endif // LOGGER_H

logic/include/model/PushButton.h

@@ -0,0 +1,31 @@
+#ifndef PUSHBUTTON_H
+#define PUSHBUTTON_H
+
+#define PROTOCOL_LENGTH 8
+#define MESSAGE_DIRECTION 0x00
+#define PushButtonDataLength 0x01
+#define PushButtonType 0x04
+#define PushButtonPush 0x01
+#define PushButtonRelease 0x00
+#define TIME_TAG 0x00
+
+#include "Led.h"
+
+class PushButton
+{
+private:
+	char _functionCode;
+	Led _led;
+
+	QByteArray generateCode(bool isPressed);
+
+public:
+	PushButton(char functionCode);
+	PushButton(char functionCode, char ledFunctionCode);
+
+	QByteArray press();
+	QByteArray release();
+	Led* getLed();
+};
+
+#endif //PUSHBUTTON_H

logic/include/model/RotaryButton.h

@@ -0,0 +1,26 @@
+#ifndef RotaryButton_H
+#define RotaryButton_H
+
+#define PROTOCOL_LENGTH 8
+#define MESSAGE_DIRECTION 0x00
+#define ROTARY_DATA_LENGTH 0X02
+#define ROTARY_TYPE 0x05
+#define TIME_TAG 0x00
+
+#include "Led.h"
+
+class RotaryButton
+{
+private:
+	char _functionCode;
+	Led _led;
+
+public:
+    RotaryButton(char functionCode);
+    RotaryButton(char functionCode, char ledFunctionCode);
+
+	Led* getLed();
+	QByteArray rotate(int value);
+};
+
+#endif //RotaryButton_H

logic/include/network/UdpDataSender.h

@@ -0,0 +1,27 @@
+#ifndef UDPDATASENDER_H
+#define UDPDATASENDER_H
+
+#include <QUdpSocket>
+
+#include "model/DataSender.h"
+
+class UdpDataSender : public DataSender
+{
+    Q_OBJECT
+
+private:
+    QUdpSocket* _socket;
+
+public:
+    UdpDataSender();
+    ~UdpDataSender() override;
+
+    void send(const QByteArray& data) override;
+
+//uncrustify off
+public slots:
+//uncrustify on
+    void read();
+};
+
+#endif //UDPDATASENDER_H

logic/include/viewModel/MainViewModel.h

@@ -2,28 +2,215 @@
 #define MAINVIEWMODEL_H
 
 #include <QtMvvmCore/ViewModel>
+#include "utils/Property.h"
+#include "model/Console.h"
+
+#define LED_OFF 0x00
+#define LED_COLOR_WHITE 0x01
+#define LED_COLOR_GREEN 0x02
+#define LedColorYellow 0x03
 
 class MainViewModel : public QtMvvm::ViewModel
 {
-    Q_OBJECT
+	Q_OBJECT
 
-    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
+	Console * panel;
 
-public:
-    Q_INVOKABLE explicit MainViewModel(QObject *parent = nullptr);
+	MVVM_PROPERTY(int, stepInc, 1)
+	MVVM_PROPERTY(int, stepDec, -1)
+
+	//Top Left
+    BUTTON_LED_PROPERTY(patient, Patient, false, LED_OFF)
+    BUTTON_LED_PROPERTY(utils, Utils, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(dvd, Dvd, false, LED_COLOR_GREEN)
+	BUTTON_LED_PROPERTY(report, Report, false, LedColorYellow)
+    BUTTON_LED_PROPERTY(probe, Probe, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(archive, Archive, false, LED_COLOR_GREEN)
+	BUTTON_LED_PROPERTY(end, End, false, LedColorYellow)
+
+	//TopRight
+    BUTTON_LED_PROPERTY(xtd, Xtd, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(bf, Bf, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(p5, P5, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(p6, P6, false, LED_COLOR_WHITE)
+
+	//BottomRight
+    BUTTON_LED_PROPERTY(dual, Dual, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(quad, Quad, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(single, Single, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(p1, P1, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(p2, P2, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(p3, P3, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(p4, P4, false, LED_COLOR_WHITE)
+
+	//CurveButtons
+    BUTTON_LED_PROPERTY(exit, Exit, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(freeze, Freeze, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(pointer, Pointer, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(autoSet, AutoSet, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(abc, Abc, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(fourD, FourD, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(clear, Clear, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(threeD, ThreeD, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(measure, Measure, false, LED_COLOR_WHITE)
+    BUTTON_LED_PROPERTY(bodyMark, BodyMark, false, LED_COLOR_WHITE)
+
+	//TrackballGroup
+    BUTTON_LED_PROPERTY(trackballLeft, TrackballLeft, false, LED_OFF)
+    BUTTON_LED_PROPERTY(trackballRight, TrackballRight, false, LED_OFF)
+    BUTTON_LED_PROPERTY(trackballTop, TrackballTop, false, LED_OFF)
+    BUTTON_LED_PROPERTY(trackballBottom, TrackballBottom, false, LED_OFF)
+
+    BUTTON_LED_PROPERTY(trackballTopLeft, TrackballTopLeft, false, LED_OFF)
+    BUTTON_LED_PROPERTY(trackballTopRight, TrackballTopRight, false, LED_OFF)
+    BUTTON_LED_PROPERTY(trackballBottomLeft, TrackballBottomLeft, false, LED_OFF)
+    BUTTON_LED_PROPERTY(trackballBottomRight, TrackballBottomRight, false, LED_OFF)
+
+	//Encoders
+    LED_PROPERTY(modeM, LED_OFF) //quadrat -> modeMLed
+    LED_PROPERTY(modePd, LED_OFF) //z -> modePdLed
+    LED_PROPERTY(modeC, LED_OFF) //y -> modeCLed
+    LED_PROPERTY(modeB, LED_OFF) //x -> modeBLed
+
+    LED_PROPERTY(modePwCenter, LED_OFF) //modePw -> modePwCenterLed
+    LED_PROPERTY(modeMCenter, LED_OFF) //modeM -> modeMCenterLed
+    LED_PROPERTY(modePdCenter, LED_OFF) //modePd -> modePdCenterLed
+    LED_PROPERTY(modeCCenter, LED_OFF) //modeC -> modeCCenterLed
+    LED_PROPERTY(modeBCenter, LED_OFF) //modeB -> modeBCenterLed
+
+	BUTTON_PROPERTY(modePwCenter, ModePwCenter, false)
+	BUTTON_PROPERTY(modeMCenter, ModeMCenter, false)
+	BUTTON_PROPERTY(modePdCenter, ModePdCenter, false)
+	BUTTON_PROPERTY(modeCCenter, ModeCCenter, false)
+	BUTTON_PROPERTY(modeBCenter, ModeBCenter, false)
+
+	JOYSTICK_PROPERTY(modePw, ModePw)
+	JOYSTICK_PROPERTY(modePd, ModePd)
+	JOYSTICK_PROPERTY(modeC, ModeC)
+	JOYSTICK_PROPERTY(modeM, ModeM)
+	JOYSTICK_PROPERTY(modeB, ModeB)
+
+	//JoystickCouple
+    LED_PROPERTY(depthCenter, LED_OFF) //zoom -> depthCenterLed
+    LED_PROPERTY(depthBottom, LED_OFF) //depth -> depthBottomLed
+    LED_PROPERTY(focus, LED_OFF) //angle -> focusLed
+    LED_PROPERTY(focusCenter, LED_OFF) //focusZone -> focusCenterLed
+    LED_PROPERTY(focusBottom, LED_OFF) //focusDepth -> focusBottomLed
+
+	BUTTON_PROPERTY(depthCenter, DepthCenter, false)
+	BUTTON_PROPERTY(focusCenter, FocusCenter, false)
+
+	BUTTON_PROPERTY(depthBottom, DepthBottom, false)
+	BUTTON_PROPERTY(focusBottom, FocusBottom, false)
 
-    QString text() const;
+	BUTTON_PROPERTY(depthTop, DepthTop, false)
+	BUTTON_PROPERTY(focusTop, FocusTop, false)
 
-public Q_SLOTS:
-    void showSettings();
+	JOYSTICK_PROPERTY(depth, Depth)
+	JOYSTICK_PROPERTY(focus, Focus)
 
-    void setText(const QString &text);
+	//Joysticks
+	BUTTON_PROPERTY(js1Top, Js1Top, false)
+	BUTTON_PROPERTY(js2Top, Js2Top, false)
+	BUTTON_PROPERTY(js3Top, Js3Top, false)
+	BUTTON_PROPERTY(js4Top, Js4Top, false)
+	BUTTON_PROPERTY(js5Top, Js5Top, false)
 
-Q_SIGNALS:
-    void textChanged(const QString &text);
+	BUTTON_PROPERTY(js1Center, Js1Center, false)
+	BUTTON_PROPERTY(js2Center, Js2Center, false)
+	BUTTON_PROPERTY(js3Center, Js3Center, false)
+	BUTTON_PROPERTY(js4Center, Js4Center, false)
+	BUTTON_PROPERTY(js5Center, Js5Center, false)
+
+	BUTTON_PROPERTY(js1Bottom, Js1Bottom, false)
+	BUTTON_PROPERTY(js2Bottom, Js2Bottom, false)
+	BUTTON_PROPERTY(js3Bottom, Js3Bottom, false)
+	BUTTON_PROPERTY(js4Bottom, Js4Bottom, false)
+	BUTTON_PROPERTY(js5Bottom, Js5Bottom, false)
+
+	JOYSTICK_PROPERTY(js1, Js1)
+	JOYSTICK_PROPERTY(js2, Js2)
+	JOYSTICK_PROPERTY(js3, Js3)
+	JOYSTICK_PROPERTY(js4, Js4)
+	JOYSTICK_PROPERTY(js5, Js5)
+
+public:
+	Q_INVOKABLE explicit MainViewModel(QObject* parent = nullptr);
 
 private:
-    QString _text;
+
+signals:
+	void ledChanged(char value);
+
+//uncrustify off
+public slots:
+	//Top Left
+	LED_SLOT(patient)
+	LED_SLOT(utils)
+	LED_SLOT(dvd)
+	LED_SLOT(report)
+	LED_SLOT(probe)
+	LED_SLOT(archive)
+	LED_SLOT(end)
+
+	//	TopRight
+	LED_SLOT(xtd)
+	LED_SLOT(bf)
+	LED_SLOT(p5)
+	LED_SLOT(p6)
+
+	//	BottomRight
+	LED_SLOT(dual)
+	LED_SLOT(quad)
+	LED_SLOT(single)
+	LED_SLOT(p1)
+	LED_SLOT(p2)
+	LED_SLOT(p3)
+	LED_SLOT(p4)
+
+	//	CurveButtons
+	LED_SLOT(exit)
+	LED_SLOT(freeze)
+	LED_SLOT(pointer)
+	LED_SLOT(autoSet)
+	LED_SLOT(abc)
+	LED_SLOT(fourD)
+	LED_SLOT(clear)
+	LED_SLOT(threeD)
+	LED_SLOT(measure)
+	LED_SLOT(bodyMark)
+
+	//TrackballGroup
+	LED_SLOT(trackballLeft)
+	LED_SLOT(trackballRight)
+	LED_SLOT(trackballTop)
+	LED_SLOT(trackballBottom)
+
+	LED_SLOT(trackballTopLeft)
+	LED_SLOT(trackballTopRight)
+	LED_SLOT(trackballBottomLeft)
+	LED_SLOT(trackballBottomRight)
+
+	//Encoders
+	LED_SLOT(modeM)
+	LED_SLOT(modePd)
+	LED_SLOT(modeC)
+	LED_SLOT(modeB)
+
+	LED_SLOT(modePwCenter)
+	LED_SLOT(modeMCenter)
+	LED_SLOT(modePdCenter)
+	LED_SLOT(modeCCenter)
+	LED_SLOT(modeBCenter)
+
+	//JoystickCouple
+	LED_SLOT(focus)
+	LED_SLOT(depthCenter)
+	LED_SLOT(focusCenter)
+	LED_SLOT(depthBottom)
+	LED_SLOT(focusBottom)
+
+//uncrustify on
 };
 
-#endif // MAINVIEWMODEL_H
+#endif //MAINVIEWMODEL_H

logic/include/viewModel/utils/Property.h

@@ -0,0 +1,82 @@
+#ifndef PROPERTY_H
+#define PROPERTY_H
+
+#include <QObject>
+#include <QDebug>
+
+//uncrustify off
+#define MVVM_PROPERTY(TYPE, NAME, DEFAULT_VALUE) \
+	Q_PROPERTY(TYPE NAME READ NAME WRITE NAME NOTIFY NAME ## Changed ) \
+	public: \
+		TYPE NAME() const { return _ ## NAME ; } \
+		void NAME(TYPE value) { \
+			if (_ ## NAME == value)  return; \
+				_ ## NAME = value; \
+			emit NAME ## Changed(value); \
+		} \
+		Q_SIGNAL void NAME ## Changed(TYPE value);\
+	private: \
+		TYPE _ ## NAME = DEFAULT_VALUE; \
+
+/**************************************************************************************************/
+#define MVVM_PROPERTY_CUSTOM(TYPE, NAME, DEFAULT_VALUE) \
+	Q_PROPERTY(TYPE NAME READ NAME WRITE NAME NOTIFY NAME ## Changed ) \
+	public: \
+	TYPE NAME() const { return _ ## NAME ; } \
+	void NAME(TYPE value) { \
+	if (_ ## NAME == value)  return; \
+		_ ## NAME = value; \
+		emit NAME ## Changed(value); \
+		NAME ## Handle(); \
+	} \
+	Q_SIGNAL void NAME ## Changed(TYPE value);\
+	private: \
+	TYPE _ ## NAME = DEFAULT_VALUE; \
+
+/**************************************************************************************************/
+#define BUTTON_LED_PROPERTY(NAME, CAP_NAME, DEFAULT_VALUE, LED_DEF_VAL) \
+	LED_PROPERTY(NAME, LED_DEF_VAL) \
+	BUTTON_PROPERTY(NAME, CAP_NAME, DEFAULT_VALUE)
+
+/**************************************************************************************************/
+#define BUTTON_PROPERTY(NAME, CAP_NAME, DEFAULT_VALUE) \
+	MVVM_PROPERTY_CUSTOM(bool, NAME, DEFAULT_VALUE) \
+	void NAME ## Handle() { \
+		if(_ ## NAME){ \
+			panel->press ## CAP_NAME(); \
+		} \
+		else { \
+			panel->release ## CAP_NAME(); \
+		} \
+	} \
+
+/**************************************************************************************************/
+#define LED_PROPERTY(NAME, LED_DEF_VAL) \
+	MVVM_PROPERTY(int, NAME ## Led, LED_DEF_VAL) \
+
+/**************************************************************************************************/
+#define JOYSTICK_PROPERTY(NAME, CAP_NAME) \
+	MVVM_PROPERTY_CUSTOM(bool, NAME ## Left, false) \
+	MVVM_PROPERTY_CUSTOM(bool, NAME ## Right, false) \
+	void NAME ## LeftHandle() { \
+		if(NAME ## Left()) \
+		{ \
+			panel->rotate ## CAP_NAME(stepDec()); \
+		} \
+	} \
+	void NAME ## RightHandle() { \
+		if(NAME ## Right()) \
+		{ \
+			panel->rotate ## CAP_NAME(stepInc()); \
+		} \
+	}
+
+/**************************************************************************************************/
+#define LED_SLOT(NAME) \
+	void NAME ## LedHandle(char value) { \
+			NAME ## Led(static_cast<int>(value)); \
+		} \
+
+//uncrustify on
+
+#endif //PROPERTY_H

logic/logic.pro

@@ -1,20 +1,19 @@
-TEMPLATE = lib
-
-QT += mvvmcore
-# Creating a static library is typically more efficient. You can still create a shared library if you want to
-CONFIG += c++14 static
-
-TARGET = logic
-
-DEFINES += QT_DEPRECATED_WARNINGS
-
-SOURCES += $$files(src/*.cpp, true)
-
-HEADERS += $$files(include/*.h, true)
-
-INCLUDEPATH += $$PWD/include/
-INCLUDEPATH += $$PWD/../network/
-
-_never_true_condition: SOURCES += $$files($$PWD/.ts-dummy/*)
-# Uncomment the following line to automatically generated and update settings translations when building
-#PRE_TARGETDEPS += qtmvvm-tsgen
+TEMPLATE = lib
+
+QT += mvvmcore network
+# Creating a static library is typically more efficient. You can still create a shared library if you want to
+CONFIG += c++14 static
+
+TARGET = logic
+
+DEFINES += QT_DEPRECATED_WARNINGS
+
+SOURCES += $$files(src/*.cpp, true)
+
+HEADERS += $$files(include/*.h, true)
+
+INCLUDEPATH += $$PWD/include/
+
+_never_true_condition: SOURCES += $$files($$PWD/.ts-dummy/*)
+# Uncomment the following line to automatically generated and update settings translations when building
+#PRE_TARGETDEPS += qtmvvm-tsgen

logic/src/logger/Consolelogger.cpp

@@ -0,0 +1,12 @@
+#include "logger/ConsoleLogger.h"
+
+#include <QDebug>
+
+void ConsoleLogger::log(QString message)
+{
+    qDebug() << "[LOG] :: " << message;
+}
+
+ConsoleLogger::~ConsoleLogger()
+{
+}

logic/src/model/Console.cpp

@@ -1,22 +1,161 @@
 #include "model/Console.h"
 
-#include <model/DataSender.h>
+#include "model/DataSender.h"
+#include "QByteArray"
 
 Console::Console()
 {
-
+    initializeButtons();
 }
 
-void Console::injectDataSender(DataSender *sender)
+/*************************************************************************************************/
+void Console::injectDataSender(DataSender* sender)
 {
     _dataSender = sender;
 }
 
-void Console::test()
+/*************************************************************************************************/
+void Console::injectLogger(Logger* logger)
+{
+    _logger = logger;
+}
+
+/*************************************************************************************************/
+void Console::newData(QByteArray data)
+{
+    try
+    {
+        hasValidDataFormat(data);
+        if(isEchoPacket(data))
+        {
+            _dataSender->send(data);
+        }
+        else
+        {
+            emit dataReady(data, _logger);
+        }
+    }
+    catch(const std::exception& e)
+    {
+        _logger->log(e.what());
+    }
+}
+
+/*************************************************************************************************/
+void Console::hasValidDataFormat(const QByteArray& data)
+{
+    if(data.size() != PROTOCOL_LENGTH)
+    {
+        throw std::runtime_error(("Data length is not Correct, expected 8 got " + QString::number(
+                                      data.size())).toStdString());
+    }
+    if(data[0] != static_cast<char>(PacketAppDirection))
+    {
+        throw std::runtime_error("Data direction is not From App");
+    }
+}
+
+/*************************************************************************************************/
+bool Console::isEchoPacket(const QByteArray& data)
+{
+    QByteArray echoPacket;
+
+    echoPacket.resize(PROTOCOL_LENGTH);
+    echoPacket[0] = PacketAppDirection;
+    echoPacket[1] = EchoDataLength;
+    echoPacket[2] = EchoType;
+    echoPacket[3] = static_cast<char>(EchoFunctionCode);
+    echoPacket[4] = ZeroValue;
+    echoPacket[5] = ZeroValue;
+    echoPacket[6] = ZeroValue;
+    echoPacket[7] = ZeroValue;
+
+    for(int i = 0; i < data.length(); i++)
+    {
+        if(data[i] != echoPacket[i])
+        {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+/*************************************************************************************************/
+void Console::initializeButtons()
 {
-    QByteArray arr;
-    arr.append(0x01);
-    arr.append(0x03);
-    arr.append(0x05);
-    _dataSender->send(arr);
+    initDual();
+    initQuad();
+    initSingle();
+    initP1();
+    initP2();
+    initP3();
+    initP4();
+    initP5();
+    initP6();
+    initExit();
+    initFreeze();
+    initPointer();
+    initAutoSet();
+    initAbc();
+    initFourD();
+    initClear();
+    initThreeD();
+    initMeasure();
+    initBodyMark();
+    initPatient();
+    initUtils();
+    initDvd();
+    initReport();
+    initProbe();
+    initArchive();
+    initEnd();
+    initXtd();
+    initBf();
+    initJs1Top();
+    initJs2Top();
+    initJs3Top();
+    initJs4Top();
+    initJs5Top();
+    initDepthTop();
+    initFocusTop();
+    initJs1Center();
+    initJs2Center();
+    initJs3Center();
+    initJs4Center();
+    initJs5Center();
+    initDepthCenter();
+    initFocusCenter();
+    initModePwCenter();
+    initModeMCenter();
+    initModePdCenter();
+    initModeCCenter();
+    initModeBCenter();
+    initJs1Bottom();
+    initJs2Bottom();
+    initJs3Bottom();
+    initJs4Bottom();
+    initJs5Bottom();
+    initDepthBottom();
+    initFocusBottom();
+    initTrackballTop();
+    initTrackballTopRight();
+    initTrackballRight();
+    initTrackballBottomRight();
+    initTrackballBottom();
+    initTrackballBottomLeft();
+    initTrackballLeft();
+    initTrackballTopLeft();
+    initJs1();
+    initJs2();
+    initJs3();
+    initJs4();
+    initJs5();
+    initDepth();
+    initFocus();
+    initModePw();
+    initModeM();
+    initModePd();
+    initModeC();
+    initModeB();
 }

logic/src/model/Led.cpp

@@ -0,0 +1,39 @@
+#include "model/Led.h"
+#include "QDebug"
+
+Led::Led()
+{
+    _hasLed = false;
+}
+
+/*************************************************************************************************/
+Led::Led(char functionCode)
+{
+    _functionCode = functionCode;
+    _hasLed = true;
+}
+
+/*************************************************************************************************/
+void Led::newData(QByteArray data, Logger* _logger)
+{
+    if(data[FUNCTION_CODE] != _functionCode)
+    {
+        return;
+    }
+    try {
+        if(!(data[LED_COLOR] == static_cast<char>(LED_OFF) ||
+             data[LED_COLOR] == static_cast<char>(LED_COLOR_WHITE) ||
+             data[LED_COLOR] == static_cast<char>(LED_COLOR_GREEN)))
+        {
+            throw std::runtime_error("Led state color is not correct");
+        }
+        if(data[FUNCTION_CODE] == _functionCode)
+        {
+            emit ledChanged(data[LED_COLOR]);
+        }
+    }
+    catch(const std::exception& e)
+    {
+        _logger->log(e.what());
+    }
+}

logic/src/model/PushButton.cpp

@@ -0,0 +1,51 @@
+#include "model/PushButton.h"
+
+/*************************************************************************************************/
+QByteArray PushButton::generateCode(bool isPressed)
+{
+    QByteArray arr;
+
+    arr.resize(PROTOCOL_LENGTH);
+    arr[0] = MESSAGE_DIRECTION;
+    arr[1] = PushButtonDataLength;
+    arr[2] = PushButtonType;
+    arr[3] = _functionCode;
+    arr[4] = isPressed ? PushButtonPush : PushButtonRelease;
+    arr[5] = TIME_TAG;
+    arr[6] = TIME_TAG;
+    arr[7] = TIME_TAG;
+
+    return arr;
+}
+
+/*************************************************************************************************/
+PushButton::PushButton(char functionCode)
+{
+	_functionCode = functionCode;
+}
+
+/*************************************************************************************************/
+PushButton::PushButton(char functionCode, char ledFunctionCode) :
+	_led(ledFunctionCode)
+{
+	_functionCode = functionCode;
+}
+
+/*************************************************************************************************/
+QByteArray PushButton::press()
+{
+	return generateCode(true);
+}
+
+/*************************************************************************************************/
+QByteArray PushButton::release()
+{
+	return generateCode(false);
+}
+
+/*************************************************************************************************/
+Led* PushButton::getLed()
+
+{
+	return &_led;
+}

logic/src/model/RotaryButton.cpp

@@ -0,0 +1,37 @@
+#include "model/RotaryButton.h"
+
+RotaryButton::RotaryButton(char functionCode)
+{
+	_functionCode = functionCode;
+}
+
+/*************************************************************************************************/
+RotaryButton::RotaryButton(char functionCode, char ledFunctionCode) :
+	_led(ledFunctionCode)
+{
+	_functionCode = functionCode;
+}
+
+/*************************************************************************************************/
+Led* RotaryButton::getLed()
+{
+	return &_led;
+}
+
+/*************************************************************************************************/
+QByteArray RotaryButton::rotate(int value)
+{
+	QByteArray arr;
+
+    arr.resize(PROTOCOL_LENGTH);
+    arr[0] = MESSAGE_DIRECTION;
+    arr[1] = ROTARY_DATA_LENGTH;
+    arr[2] = ROTARY_TYPE;
+	arr[3] = _functionCode;
+    arr[4] = static_cast<char>(value >> PROTOCOL_LENGTH);
+    arr[5] = static_cast<char>(value);
+    arr[6] = TIME_TAG;
+    arr[7] = TIME_TAG;
+
+	return arr;
+}

logic/src/network/UdpDataSender.cpp

@@ -0,0 +1,34 @@
+#include "network/UdpDataSender.h"
+
+#define DATAGRAM_SIZE 8
+
+void UdpDataSender::send(const QByteArray& data)
+{
+    _socket->writeDatagram(data, QHostAddress::LocalHost, 5446);
+}
+
+/*************************************************************************************************/
+void UdpDataSender::read()
+{
+    char data[DATAGRAM_SIZE];
+    int cnt = _socket->readDatagram(data, DATAGRAM_SIZE);
+    QByteArray a(data, cnt);
+    emit dataReady(a);
+}
+
+/*************************************************************************************************/
+UdpDataSender::UdpDataSender()
+{
+    _socket = new QUdpSocket();
+
+    _socket->bind(QHostAddress::Any, 5445);
+
+    connect(_socket, SIGNAL(readyRead()), this, SLOT(read()));
+}
+
+/*************************************************************************************************/
+UdpDataSender::~UdpDataSender()
+{
+    _socket->close();
+    delete _socket;
+}

logic/src/viewModel/MainViewModel.cpp

@@ -3,33 +3,86 @@
 #include <QtMvvmCore/SettingsViewModel>
 
 #include "model/Console.h"
-#include "UdpDataSender.h"
+#include "logger/ConsoleLogger.h"
+#include "network/UdpDataSender.h"
 
-MainViewModel::MainViewModel(QObject *parent) :
-    ViewModel(parent),
-    _text(QStringLiteral("hello world"))
-{
-    Console c;
-    auto u = new UdpDataSender;
-    c.injectDataSender(u);
-    c.test();
-}
+#define CONNECT_LED(NAME) \
+	connect(panel, SIGNAL(NAME ## LedChanged(char)), this, SLOT(NAME ## LedHandle(char)));
 
-QString MainViewModel::text() const
+MainViewModel::MainViewModel(QObject* parent) :
+	ViewModel(parent)
 {
-    return _text;
-}
+	panel = new Console;
+    auto network = new UdpDataSender;
+    panel->injectDataSender(network);
+    auto logger = new ConsoleLogger;
+    panel->injectLogger(logger);
 
-void MainViewModel::showSettings()
-{
-    show<QtMvvm::SettingsViewModel>();
-}
+    connect(network, &UdpDataSender::dataReady, panel, &Console::newData);
 
-void MainViewModel::setText(const QString &text)
-{
-    if (_text == text)
-        return;
+	//Top Left
+	CONNECT_LED(patient)
+	CONNECT_LED(utils)
+	CONNECT_LED(dvd)
+	CONNECT_LED(report)
+	CONNECT_LED(probe)
+	CONNECT_LED(archive)
+	CONNECT_LED(end)
+
+	//TopRight
+	CONNECT_LED(xtd)
+	CONNECT_LED(bf)
+	CONNECT_LED(p5)
+	CONNECT_LED(p6)
+
+	//BottomRight
+	CONNECT_LED(dual)
+	CONNECT_LED(quad)
+	CONNECT_LED(single)
+	CONNECT_LED(p1)
+	CONNECT_LED(p2)
+	CONNECT_LED(p3)
+	CONNECT_LED(p4)
+
+	//CurveButtons
+	CONNECT_LED(exit)
+	CONNECT_LED(freeze)
+	CONNECT_LED(pointer)
+	CONNECT_LED(autoSet)
+	CONNECT_LED(abc)
+	CONNECT_LED(fourD)
+	CONNECT_LED(clear)
+	CONNECT_LED(threeD)
+	CONNECT_LED(measure)
+	CONNECT_LED(bodyMark)
+
+	//TrackballGroup
+	CONNECT_LED(trackballLeft)
+	CONNECT_LED(trackballRight)
+	CONNECT_LED(trackballTop)
+	CONNECT_LED(trackballBottom)
+
+	CONNECT_LED(trackballTopLeft)
+	CONNECT_LED(trackballTopRight)
+	CONNECT_LED(trackballBottomLeft)
+	CONNECT_LED(trackballBottomRight)
+
+	//Encoders
+	CONNECT_LED(modeM)
+	CONNECT_LED(modePd)
+	CONNECT_LED(modeC)
+	CONNECT_LED(modeB)
+
+	CONNECT_LED(modePwCenter)
+	CONNECT_LED(modeMCenter)
+	CONNECT_LED(modePdCenter)
+	CONNECT_LED(modeCCenter)
+	CONNECT_LED(modeBCenter)
 
-    _text = text;
-    emit textChanged(_text);
+	//JoystickCouple
+	CONNECT_LED(focus)
+	CONNECT_LED(depthCenter)
+	CONNECT_LED(focusCenter)
+	CONNECT_LED(depthBottom)
+	CONNECT_LED(focusBottom)
 }

network/Network.cpp

@@ -1,5 +0,0 @@
-#include "Network.h"
-
-Network::Network()
-{
-}

network/Network.h

@@ -1,10 +0,0 @@
-#ifndef NETWORK_H
-#define NETWORK_H
-
-class Network
-{
-public:
-    Network();
-};
-
-#endif // NETWORK_H

network/UdpDataSender.cpp

@@ -1,12 +0,0 @@
-#include "UdpDataSender.h"
-#include <QDebug>
-
-int UdpDataSender::send(const QByteArray &data)
-{
-    qDebug() << "Just a little test";
-}
-
-UdpDataSender::~UdpDataSender()
-{
-
-}

network/UdpDataSender.h

@@ -1,13 +0,0 @@
-#ifndef UDPDATASENDER_H
-#define UDPDATASENDER_H
-
-#include "model/DataSender.h"
-
-class UdpDataSender : public DataSender
-{
-public:
-    int send(const QByteArray &data) override;
-    ~UdpDataSender() override;
-};
-
-#endif // UDPDATASENDER_H

network/network.pro

@@ -1,30 +0,0 @@
-QT -= gui
-
-TEMPLATE = lib
-CONFIG += staticlib
-
-CONFIG += c++11
-
-TARGET = network
-
-# The following define makes your compiler emit warnings if you use
-# any Qt feature that has been marked deprecated (the exact warnings
-# depend on your compiler). Please consult the documentation of the
-# deprecated API in order to know how to port your code away from it.
-DEFINES += QT_DEPRECATED_WARNINGS
-
-# You can also make your code fail to compile if it uses deprecated APIs.
-# In order to do so, uncomment the following line.
-# You can also select to disable deprecated APIs only up to a certain version of Qt.
-#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
-
-SOURCES += \
-    Network.cpp \
-    UdpDataSender.cpp
-
-HEADERS += \
-    Network.h \
-    UdpDataSender.h
-
-INCLUDEPATH += $$PWD/../logic/include
-DEPENDPATH += $$PWD/../logic/include

test/TestDataSender.h

@@ -8,11 +8,10 @@ class TestDataSender : public DataSender
 public:
     QByteArray consoleData;
 
-    int send(const QByteArray &data) override
+    void send(const QByteArray& data) override
     {
         consoleData = data;
-        return data.length();
     }
 };
 
-#endif // TESTDATASENDER_H
+#endif //TESTDATASENDER_H

test/TestLogger.h

@@ -0,0 +1,25 @@
+#ifndef TESTLOGGER_H
+#define TESTLOGGER_H
+
+#include <QObject>
+
+#include "model/Logger.h"
+
+class TestLogger : public QObject, public Logger
+{
+    Q_OBJECT
+
+public:
+    QString message;
+
+    void log(QString message) override
+    {
+        this->message = message;
+        emit isCalled();
+    }
+
+signals:
+    void isCalled();
+};
+
+#endif //TESTLOGGER_H

test/test.pro

@@ -11,6 +11,21 @@ SOURCES +=  tst_console.cpp
 INCLUDEPATH += $$PWD/../logic/include
 DEPENDPATH += $$PWD/../logic/include
 
+INCLUDEPATH += $$PWD/../logger
+DEPENDPATH += $$PWD/../logger
+
+
+# Link with core project
+win32:CONFIG(release, debug|release): LIBS += -L$$OUT_PWD/../logger/release/ -llogger
+else:win32:CONFIG(debug, debug|release): LIBS += -L$$OUT_PWD/../logger/debug/ -llogger
+else:unix: LIBS += -L$$OUT_PWD/../logger/ -llogger
+
+win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../logger/release/liblogger.a
+else:win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../logger/debug/liblogger.a
+else:win32:!win32-g++:CONFIG(release, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../logger/release/logger.lib
+else:win32:!win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$OUT_PWD/../logger/debug/logger.lib
+else:unix: PRE_TARGETDEPS += $$OUT_PWD/../logger/liblogger.a
+
 # Link with core project
 win32:CONFIG(release, debug|release): LIBS += -L$$OUT_PWD/../logic/release/ -llogic
 else:win32:CONFIG(debug, debug|release): LIBS += -L$$OUT_PWD/../logic/debug/ -llogic
@@ -23,4 +38,5 @@ else:win32:!win32-g++:CONFIG(debug, debug|release): PRE_TARGETDEPS += $$OUT_PWD/
 else:unix: PRE_TARGETDEPS += $$OUT_PWD/../logic/liblogic.a
 
 HEADERS += \
-    TestDataSender.h
+    TestDataSender.h \
+    TestLogger.h

test/tst_console.cpp

@@ -2,44 +2,283 @@
 
 #include "TestDataSender.h"
 #include "model/Console.h"
+#include "TestLogger.h"
+
+#include <QSignalSpy>
 
 class ConsoleTest : public QObject
 {
     Q_OBJECT
 
+private:
+    Console c;
+    TestDataSender t;
+    TestLogger log;
+
 public:
     ConsoleTest();
     ~ConsoleTest();
 
+    //uncrustify off
 private slots:
-    void test_case1();
+    //uncrustify on
+    void pressDual_test_case();
+    void releaseDual_test_case();
+    void dualLedChange_test_case();
+
+    void pressQuad_test_case();
+    void releaseQuad_test_case();
+
+    void rotateJs1_test_case();
+    void rotatFocus_test_case();
 
+    void echo_test_case();
+    void wrongProtocol_test_case();
+    void wrongMessageDirection_test_case();
+    void ledWrongColor_test_case();
 };
 
+/*************************************************************************************************/
 ConsoleTest::ConsoleTest()
 {
-
+    c.injectDataSender(&t);
+    c.injectLogger(&log);
 }
 
+/*************************************************************************************************/
 ConsoleTest::~ConsoleTest()
 {
+}
+
+/*************************************************************************************************/
+void ConsoleTest::pressDual_test_case()
+{
+    c.pressDual();
+
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x01;
+    arr[2] = 0x04;
+    arr[3] = 0x1D;
+    arr[4] = 0x01;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QCOMPARE(t.consoleData, arr);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::releaseDual_test_case()
+{
+    c.releaseDual();
 
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x01;
+    arr[2] = 0x04;
+    arr[3] = 0x1D;
+    arr[4] = 0x00;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QCOMPARE(t.consoleData, arr);
 }
 
-void ConsoleTest::test_case1()
+/*************************************************************************************************/
+void ConsoleTest::dualLedChange_test_case()
 {
-    Console c;
-    auto t = new TestDataSender;
-    c.injectDataSender(t);
-    c.test();
+    QSignalSpy spy(&c, SIGNAL(dualLedChanged(char)));
+
+    char ledValue = 0x01;
+
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x01;
+    arr[1] = 0x01;
+    arr[2] = 0x03;
+    arr[3] = static_cast<char>(0x82);
+    arr[4] = ledValue;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    c.newData(arr);
+
+    auto result = spy.takeFirst()[0].value<QByteArray>();
+
+    QCOMPARE(result[0], ledValue);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::pressQuad_test_case()
+{
+    c.pressQuad();
+
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x01;
+    arr[2] = 0x04;
+    arr[3] = 0x1C;
+    arr[4] = 0x01;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QCOMPARE(t.consoleData, arr);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::releaseQuad_test_case()
+{
+    c.releaseQuad();
+
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x01;
+    arr[2] = 0x04;
+    arr[3] = 0x1C;
+    arr[4] = 0x00;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QCOMPARE(t.consoleData, arr);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::rotateJs1_test_case()
+{
+    auto value = 0;
+    c.rotateJs1(value);
 
     QByteArray arr;
-    arr.append(0x01);
-    arr.append(0x04);
-    arr.append(0x05);
-    QCOMPARE(t->consoleData, arr);
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x02;
+    arr[2] = 0x05;
+    arr[3] = 0x56;
+    arr[4] = static_cast<char>(value >> 8);
+    arr[5] = static_cast<char>(value);
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QCOMPARE(t.consoleData, arr);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::rotatFocus_test_case()
+{
+    auto value = 40000;
+    c.rotateFocus(value);
+
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x02;
+    arr[2] = 0x05;
+    arr[3] = 0x51;
+    arr[4] = static_cast<char>(value >> 8);
+    arr[5] = static_cast<char>(value);
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QCOMPARE(t.consoleData, arr);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::echo_test_case()
+{
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x01;
+    arr[1] = 0x02;
+    arr[2] = 0x06;
+    arr[3] = static_cast<char>(0xA4);
+    arr[4] = 0x00;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    c.newData(arr);
+
+    QCOMPARE(t.consoleData, arr);
 }
 
+/*************************************************************************************************/
+void ConsoleTest::wrongProtocol_test_case()
+{
+    char ledValue = 0x01;
+
+    QByteArray arr;
+    arr.resize(5);
+    arr[0] = 0x01;
+    arr[1] = 0x01;
+    arr[2] = 0x03;
+    arr[3] = static_cast<char>(0x82);
+    arr[4] = ledValue;
+
+    QSignalSpy spy(&log, SIGNAL(isCalled()));
+
+    c.newData(arr);
+
+    QCOMPARE(spy.count(), 1);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::wrongMessageDirection_test_case()
+{
+    char ledValue = 0x01;
+
+    QByteArray arr;
+    arr.resize(8);
+    arr[0] = 0x00;
+    arr[1] = 0x01;
+    arr[2] = 0x03;
+    arr[3] = static_cast<char>(0x82);
+    arr[4] = ledValue;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QSignalSpy spy(&log, SIGNAL(isCalled()));
+
+    c.newData(arr);
+
+    QCOMPARE(spy.count(), 1);
+}
+
+/*************************************************************************************************/
+void ConsoleTest::ledWrongColor_test_case()
+{
+    QByteArray arr;
+
+    char ledValue = 0x05;
+
+    arr.resize(8);
+    arr[0] = 0x01;
+    arr[1] = 0x01;
+    arr[2] = 0x04;
+    arr[3] = static_cast<char>(0x82);
+    arr[4] = ledValue;
+    arr[5] = 0x00;
+    arr[6] = 0x00;
+    arr[7] = 0x00;
+
+    QSignalSpy spy(&log, SIGNAL(isCalled()));
+
+    c.newData(arr);
+
+    QCOMPARE(spy.count(), 1);
+}
+
+/*************************************************************************************************/
+
 QTEST_APPLESS_MAIN(ConsoleTest)
 
 #include "tst_console.moc"

ui/App.qml

@@ -1,6 +1,20 @@
 import QtQuick 2.10
+import QtQuick.Window 2.13
 import de.skycoder42.QtMvvm.Quick 1.0
+import "qrc:/const/"
+import "qrc:/theme/"
 
 QtMvvmApp {
     title: qsTr("consoleEmulator")
+    id: mvvmApp
+
+    onWidthChanged: Const.widthRatio = mvvmApp.width / Const.windowWidth
+    onHeightChanged: Const.heightRatio = mvvmApp.height / Const.windowHeight
+
+    Component.onCompleted: {
+		width =  Const.windowWidth
+		height = Const.windowHeight
+        x = (Screen.width - width) / 2
+		y = (Screen.height - height)
+    }
 }

ui/MainView.qml

@@ -1,70 +1,32 @@
 import QtQuick 2.10
 import QtQuick.Controls 2.3
+import QtQuick.Window 2.13
 import QtQuick.Layouts 1.3
 import de.skycoder42.QtMvvm.Core 1.0
 import de.skycoder42.QtMvvm.Quick 1.0
 import com.example.consoleemulator 1.0
+import "qrc:/emulator/"
+import "qrc:/theme/"
+import "qrc:/const/"
 
 Page {
     id: mainView
     property MainViewModel viewModel: null
 
-    header: ContrastToolBar {
-        RowLayout {
-            anchors.fill: parent
-            spacing: 0
-
-            ToolBarLabel {
-                text: qsTr("MainViewModel")
-                Layout.fillWidth: true
-            }
-
-            MenuButton {
-                MenuItem {
-                    id: settings
-                    text: qsTr("Settings")
-                    onClicked: viewModel.showSettings()
-                }
-            }
-        }
-    }
-
-    PresenterProgress {}
-
-    Pane {
+    Rectangle{
         anchors.fill: parent
+        color: Theme.current.background
+    }
 
-        ColumnLayout {
-            anchors.fill: parent
-
-            TextField {
-                id: textEdit
-                Layout.fillWidth: true
-
-                MvvmBinding {
-                    viewModel: mainView.viewModel
-                    viewModelProperty: "text"
-                    view: textEdit
-                    viewProperty: "text"
-                }
-            }
-
-            Label {
-                id: textLabel
-                Layout.fillWidth: true
-
-                MvvmBinding {
-                    viewModel: mainView.viewModel
-                    viewModelProperty: "text"
-                    view: textLabel
-                    viewProperty: "text"
-                    type: MvvmBinding.OneWayToView
-                }
-            }
+    Rectangle {
+        id: correctedPosition
+        width: Const.windowWidth
+        height: Const.windowHeight
+        scale: Const.ratio
+        color: Theme.current.background
+        x: (mainView.width - width) / 2
+        y: (mainView.height - height) / 2
 
-            Item {
-                Layout.fillHeight: true
-            }
-        }
+        Emulator {}
     }
 }

ui/const/Const.qml

@@ -0,0 +1,35 @@
+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
+
+	property var sliderWidth: 250
+	property var sliderHeight: 50
+	property var sliderThickness: 20
+
+	property var textWidth: 250
+	property var textHeight: 30
+
+}

ui/const/qmldir

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

ui/emulator/Emulator.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.13
+
+import "qrc:/emulator/items"
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	width: Const.windowWidth
+	height: Const.windowHeight
+
+	Setting {
+		anchors.horizontalCenter: topLeft.horizontalCenter
+		anchors.top: topLeft.bottom
+		anchors.topMargin: 120
+	}
+
+	TopLeft {
+		id: 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,259 @@
+import QtQuick 2.0
+
+import "qrc:/theme"
+import "qrc:/const"
+
+Item {
+	id: control
+
+	property bool centerButDown: centerBut.down
+	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 {
+		id: centerBut
+		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,190 @@
+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()
+	property var timeFactor: 1
+	property bool indicator: false
+
+	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
+							}
+						}
+					}
+				}
+
+				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
+						y: borderGrad.height / 2
+					}
+
+					axis {
+						z: 1
+						x: 0
+						y: 0
+					}
+
+					angle: control.angle
+
+					Behavior on angle {
+						NumberAnimation {
+							duration: 200 * timeFactor
+							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,63 @@
+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 var down: mainKnob.down
+	property var increase: incButton.down
+	property var decrease: decButton.down
+
+	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 {
+		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.timeFactor = - stepDec
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepDec
+		}
+	}
+
+	Knob {
+		id: incButton
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.left: mainKnob.right
+		anchors.leftMargin: Const.margin
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+		onPressed: {
+			lightRing.timeFactor = stepInc
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepInc
+		}
+	}
+}

ui/emulator/components/ModeOption.qml

@@ -0,0 +1,77 @@
+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 bool down: mainKnob.down
+	property bool increase: incButton.down
+	property bool decrease: decButton.down
+
+	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 {
+		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.timeFactor = - stepDec
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepDec
+		}
+	}
+
+	Knob {
+		id: incButton
+		anchors.verticalCenter: mainKnob.verticalCenter
+		anchors.left: mainKnob.right
+		anchors.leftMargin: Const.margin
+		implicitWidth: Const.microButton
+		implicitHeight: Const.microButton
+		onPressed: {
+			lightRing.timeFactor = stepInc
+			lightRing.angle = lightRing.angle + Const.rotateStep * stepInc
+		}
+	}
+}

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,304 @@
+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
+	property var visibleGlow: true
+
+	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
+		visible: visibleGlow
+	}
+
+	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/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/components/Trackball.qml

@@ -0,0 +1,133 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+
+import "qrc:/const"
+
+Item {
+	id: control
+
+	property var longBut: 70 //Const.macroButton
+	property var shortBut: 32 //Const.microButton
+	property var margin: 10 //Const.margin
+
+	property alias leftDown: leftBut.down
+	property alias rightDown: rightBut.down
+	property alias topDown: topBut.down
+	property alias bottomDown: bottomBut.down
+
+	property alias topLeftDown: topLeftBut.down
+	property alias topRightDown: topRightBut.down
+	property alias bottomLeftDown: bottomLeftBut.down
+	property alias bottomRightDown: bottomRightBut.down
+
+	property var leftColor
+	property var rightColor
+	property var topColor
+	property var bottomColor
+
+	property var topLeftColor
+	property var topRightColor
+	property var bottomLeftColor
+	property var bottomRightColor
+
+	width: longBut + shortBut + 2 * margin
+	height: width
+
+
+	NeuButton {
+		enabled: false
+		anchors.centerIn: parent
+		width: longBut + shortBut + 2 * margin + 115
+		height: width
+	}
+
+	LightRing {
+		colorMode: 0
+		anchors.centerIn: parent
+		width: longBut + shortBut - margin
+		height: width
+		thickness: 10
+	}
+
+	NeuLight {
+		id: leftBut
+		anchors.right: parent.left
+		anchors.verticalCenter: parent.verticalCenter
+		implicitWidth: shortBut
+		implicitHeight: longBut
+		colorMode: leftColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: rightBut
+		anchors.left: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		implicitWidth: shortBut
+		implicitHeight: longBut
+		colorMode: rightColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: topBut
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.bottom: parent.top
+		implicitWidth: longBut
+		implicitHeight: shortBut
+		colorMode: topColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: bottomBut
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.bottom
+		implicitWidth: longBut
+		implicitHeight: shortBut
+		colorMode: bottomColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: topLeftBut
+		anchors.verticalCenter: parent.top
+		anchors.horizontalCenter: parent.left
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+		colorMode: topLeftColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: topRightBut
+		anchors.verticalCenter: parent.top
+		anchors.horizontalCenter: parent.right
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+		colorMode: topRightColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: bottomLeftBut
+		anchors.verticalCenter: parent.bottom
+		anchors.horizontalCenter: parent.left
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+		colorMode: bottomLeftColor
+		visibleGlow: false
+	}
+
+	NeuLight {
+		id: bottomRightBut
+		anchors.verticalCenter: parent.bottom
+		anchors.horizontalCenter: parent.right
+		implicitWidth: shortBut
+		implicitHeight: shortBut
+		colorMode: bottomRightColor
+		visibleGlow: false
+	}
+}
+

ui/emulator/elements/JoystickButtonBind.qml

@@ -0,0 +1,52 @@
+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 nameCenter
+	property var nameLeft
+	property var nameRight
+	property var nameTop
+	property var nameBottom
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "centerButDown"
+		viewModelProperty: nameCenter
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "leftButDown"
+		viewModelProperty: nameLeft
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "rightButDown"
+		viewModelProperty: nameRight
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topButDown"
+		viewModelProperty: nameTop
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomButDown"
+		viewModelProperty: nameBottom
+		type: MvvmBinding.OneWayToViewModel
+	}
+}

ui/emulator/elements/KnobLightBind.qml

@@ -0,0 +1,28 @@
+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
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "colorMode"
+		viewModelProperty: nameLed
+	}
+}

ui/emulator/elements/LightImageBind.qml

@@ -0,0 +1,19 @@
+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 nameLed
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "colorMode"
+		viewModelProperty: nameLed
+	}
+}

ui/emulator/elements/ModeButtonBind.qml

@@ -0,0 +1,55 @@
+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: ""
+	property var nameIncrease: ""
+	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"
+		viewModelProperty: name
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "increase"
+		viewModelProperty: nameIncrease
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "decrease"
+		viewModelProperty: nameDecrease
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "led"
+		viewModelProperty: nameLed
+	}
+}

ui/emulator/elements/ModeOptionBind.qml

@@ -0,0 +1,55 @@
+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: ""
+	property var nameIncrease: ""
+	property var nameDecrease: ""
+	property var nameLed: ""
+	property var nameLedOption: ""
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "stepInc"
+		viewModelProperty: "stepInc"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "stepDec"
+		viewModelProperty: "stepDec"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "increase"
+		viewModelProperty: nameIncrease
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "decrease"
+		viewModelProperty: nameDecrease
+		type: MvvmBinding.OneWayToViewModel
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "led"
+		viewModelProperty: nameLed
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "ledOption"
+		viewModelProperty: nameLedOption
+	}
+}

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/elements/TrackballBind.qml

@@ -0,0 +1,127 @@
+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:/emulator/components"
+
+Trackball {
+	property bool leftPressed: leftDown
+	property bool rightPressed: rightDown
+	property bool topPressed: topDown
+	property bool bottomPressed: bottomDown
+
+	property bool topLeftPressed: topLeftDown
+	property bool topRightPressed: topRightDown
+	property bool bottomLeftPressed: bottomLeftDown
+	property bool bottomRightPressed: bottomRightDown
+
+	onLeftDownChanged: leftPressed = leftDown
+	onRightDownChanged: rightPressed = rightDown
+	onTopDownChanged: topPressed = topDown
+	onBottomDownChanged: bottomPressed = bottomDown
+
+	onTopLeftDownChanged: topLeftPressed = topLeftDown
+	onTopRightDownChanged: topRightPressed = topRightDown
+	onBottomLeftDownChanged: bottomLeftPressed = bottomLeftDown
+	onBottomRightDownChanged: bottomRightPressed = bottomRightDown
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "leftPressed"
+		viewModelProperty: "trackballLeft"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "rightPressed"
+		viewModelProperty: "trackballRight"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topPressed"
+		viewModelProperty: "trackballTop"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomPressed"
+		viewModelProperty: "trackballBottom"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topLeftPressed"
+		viewModelProperty: "trackballTopLeft"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topRightPressed"
+		viewModelProperty: "trackballTopRight"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomLeftPressed"
+		viewModelProperty: "trackballBottomLeft"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomRightPressed"
+		viewModelProperty: "trackballBottomRight"
+	}
+
+	// Leds
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "leftColor"
+		viewModelProperty: "trackballLeft" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "rightColor"
+		viewModelProperty: "trackballRight" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topColor"
+		viewModelProperty: "trackballTop" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomColor"
+		viewModelProperty: "trackballBottom" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topLeftColor"
+		viewModelProperty: "trackballTopLeft" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "topRightColor"
+		viewModelProperty: "trackballTopRight" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomLeftColor"
+		viewModelProperty: "trackballBottomLeft" + "Led"
+	}
+
+	MvvmBinding {
+		viewModel: mainView.viewModel
+		viewProperty: "bottomRightColor"
+		viewModelProperty: "trackballBottomRight" + "Led"
+	}
+}

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,76 @@
+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 {
+			id: modePw
+			y: 130
+			name: "modePwCenter"
+			nameLed: "modePwCenterLed"
+			nameLedOption: "modeBLed" // x name
+			nameIncrease: "modePwRight"
+			nameDecrease: "modePwLeft"
+			image: "qrc:/icons/encoder/modePw.png"
+			imageOption: "qrc:/icons/encoder/x.png"
+		}
+
+		ModeOptionBind {
+			id: modeM
+			y: 41
+			name: "modeMCenter"
+			nameLed: "modeMCenterLed"
+			nameLedOption: "modeCLed" // y name
+			nameIncrease: "modeMRight"
+			nameDecrease: "modeMLeft"
+			image: "qrc:/icons/encoder/modeM.png"
+			imageOption: "qrc:/icons/encoder/y.png"
+		}
+
+		ModeOptionBind {
+			id: modePd
+			name: "modePdCenter"
+			nameLed: "modePdCenterLed"
+			nameLedOption: "modePdLed" // z name
+			nameIncrease: "modePdRight"
+			nameDecrease: "modePdLeft"
+			imageOption: "qrc:/icons/encoder/z.png"
+			image: "qrc:/icons/encoder/modePd.png"
+		}
+
+		ModeOptionBind {
+			id: modeC
+			y: 41
+			name: "modeCCenter"
+			nameLed: "modeCCenterLed"
+			nameLedOption: "modeMLed" // quadrat name
+			nameIncrease: "modeCRight"
+			nameDecrease: "modeCLeft"
+			imageOption: "qrc:/icons/encoder/quadratic.png"
+			image: "qrc:/icons/encoder/modeC.png"
+		}
+
+		ModeButtonBind {
+			id: modeB
+			y: 130
+			name: "modeBCenter"
+			nameIncrease: "modeBRight"
+			nameDecrease: "modeBLeft"
+			nameLed: "modeBCenterLed"
+			image: "qrc:/icons/encoder/mode2d.png"
+			led: 2
+		}
+	}
+}

ui/emulator/items/JoystickCouple.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+	y: 244
+
+	JoystickButtonBind {
+		id: leftJoy
+//		name: "depth"
+		nameCenter: "depthCenter"
+		nameLeft: "depthLeft"
+		nameRight: "depthRight"
+		nameTop: "depthTop"
+		nameBottom: "depthBottom"
+		x: 1481
+	}
+
+	Row {
+		spacing: 10
+		anchors.top: leftJoy.bottom
+		anchors.topMargin: 10
+		anchors.horizontalCenter: leftJoy.horizontalCenter
+
+		LightImageBind {
+			nameLed: "depthCenterLed"
+			image: "qrc:/icons/miniButton/zoom.png"
+		}
+
+		LightImageBind {
+			nameLed: "depthBottomLed"
+			image: "qrc:/icons/miniButton/depth.png"
+		}
+	}
+
+	JoystickButtonBind {
+		id: rightJoy
+//		name: "focus"
+		nameCenter: "focusCenter"
+		nameLeft: "focusLeft"
+		nameRight: "focusRight"
+		nameTop: "focusTop"
+		nameBottom: "focusBottom"
+		x: 1711
+	}
+
+	Row {
+		spacing: 10
+		anchors.top: rightJoy.bottom
+		anchors.topMargin: 10
+		anchors.horizontalCenter: rightJoy.horizontalCenter
+
+		LightImageBind {
+			nameLed: "focusLed"
+			image: "qrc:/icons/miniButton/angle.png"
+		}
+
+		LightImageBind {
+			nameLed: "focusCenterLed"
+			image: "qrc:/icons/miniButton/focusZone.png"
+		}
+
+		LightImageBind {
+			nameLed: "focusBottomLed"
+			image: "qrc:/icons/miniButton/focusDepth.png"
+		}
+	}
+}

ui/emulator/items/Joysticks.qml

@@ -0,0 +1,65 @@
+import QtQuick 2.0
+
+import "qrc:/emulator/elements"
+import "qrc:/const"
+
+Item {
+	width: childrenRect.width
+	height: childrenRect.height
+	anchors.horizontalCenter: parent.horizontalCenter
+
+	//	width: 820
+	//	height: 80
+	//	x: 550
+
+	y: 50
+
+	Row {
+		spacing: 64
+
+		JoystickButtonBind {
+			id: joystick1
+			nameCenter: "js1Center"
+			nameLeft: "js1Left"
+			nameRight: "js1Right"
+			nameTop: "js1Top"
+			nameBottom: "js1Bottom"
+		}
+
+		JoystickButtonBind {
+			id: joystick2
+			nameCenter: "js2Center"
+			nameLeft: "js2Left"
+			nameRight: "js2Right"
+			nameTop: "js2Top"
+			nameBottom: "js2Bottom"
+		}
+
+		JoystickButtonBind {
+			id: joystick3
+			nameCenter: "js3Center"
+			nameLeft: "js3Left"
+			nameRight: "js3Right"
+			nameTop: "js3Top"
+			nameBottom: "js3Bottom"
+		}
+
+		JoystickButtonBind {
+			id: joystick4
+			nameCenter: "js4Center"
+			nameLeft: "js4Left"
+			nameRight: "js4Right"
+			nameTop: "js4Top"
+			nameBottom: "js4Bottom"
+		}
+
+		JoystickButtonBind {
+			id: joystick5
+			nameCenter: "js5Center"
+			nameLeft: "js5Left"
+			nameRight: "js5Right"
+			nameTop: "js5Top"
+			nameBottom: "js5Bottom"
+		}
+	}
+}

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

@@ -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: 120
+	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/TrackballGroup.qml

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

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>