diff --git a/logic/include/viewModel/MainViewModel.h b/logic/include/viewModel/MainViewModel.h index 6dc7ed9..7549d70 100644 --- a/logic/include/viewModel/MainViewModel.h +++ b/logic/include/viewModel/MainViewModel.h @@ -134,6 +134,19 @@ class MainViewModel : public QtMvvm::ViewModel JOYSTICK_PROPERTY(js4, Js4) JOYSTICK_PROPERTY(js5, Js5) + //Probes +//BUTTON_LED_PROPERTY(probe1, Probe1, false, LED_OFF) +//BUTTON_LED_PROPERTY(probe2, Probe2, false, LED_OFF) +//BUTTON_LED_PROPERTY(probe3, Probe3, false, LED_OFF) +//BUTTON_LED_PROPERTY(probe4, Probe4, false, LED_OFF) + + MVVM_PROPERTY(QList, probeList, QList()) + + MVVM_PROPERTY(int, currentSelectedProbe1, 0) + MVVM_PROPERTY(int, currentSelectedProbe2, 0) + MVVM_PROPERTY(int, currentSelectedProbe3, 0) + MVVM_PROPERTY(int, currentSelectedProbe4, 0) + public: Q_INVOKABLE explicit MainViewModel(QObject* parent = nullptr); diff --git a/logic/src/viewModel/MainViewModel.cpp b/logic/src/viewModel/MainViewModel.cpp index 0b3c689..6f6319b 100644 --- a/logic/src/viewModel/MainViewModel.cpp +++ b/logic/src/viewModel/MainViewModel.cpp @@ -84,5 +84,5 @@ MainViewModel::MainViewModel(QObject* parent) : CONNECT_LED(depthCenter) CONNECT_LED(focusCenter) CONNECT_LED(depthBottom) - CONNECT_LED(focusBottom) + CONNECT_LED(focusBottom) } diff --git a/ui/emulator/Emulator.qml b/ui/emulator/Emulator.qml index 3e4cffb..0b54b8e 100755 --- a/ui/emulator/Emulator.qml +++ b/ui/emulator/Emulator.qml @@ -14,6 +14,9 @@ Item { anchors.top: topLeft.bottom anchors.topMargin: 120 } + TopLeftTop { + + } TopLeft { id: topLeft diff --git a/ui/emulator/elements/ProbeButton.qml b/ui/emulator/elements/ProbeButton.qml new file mode 100644 index 0000000..aa84609 --- /dev/null +++ b/ui/emulator/elements/ProbeButton.qml @@ -0,0 +1,361 @@ +import QtQuick 2.0 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 + +import "qrc:/theme" +import "qrc:/const" +import "qrc:/emulator/components" + + +import de.skycoder42.QtMvvm.Core 1.0 +import de.skycoder42.QtMvvm.Quick 1.0 +import com.example.consoleemulator 1.0 + +Button { + id: button + + //========================================= + 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 + } + //========================================= + + + 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*2 + + 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 + } + } + ] +} + diff --git a/ui/emulator/items/TopLeft.qml b/ui/emulator/items/TopLeft.qml index 6afa1e1..3ac8d45 100755 --- a/ui/emulator/items/TopLeft.qml +++ b/ui/emulator/items/TopLeft.qml @@ -5,33 +5,33 @@ 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 + id: topLeft + x: 70 + y: 270 + 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" } + // 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" } } diff --git a/ui/emulator/items/TopLeftTop.qml b/ui/emulator/items/TopLeftTop.qml new file mode 100644 index 0000000..151e32e --- /dev/null +++ b/ui/emulator/items/TopLeftTop.qml @@ -0,0 +1,28 @@ +import QtQuick 2.0 +import QtQuick.Layouts 1.13 + +import "qrc:/emulator/elements" +import "qrc:/emulator/components" +import "qrc:/const" + +RowLayout { + x: 70 + y: 50 + spacing: 36 + ProbeButton { + name: "probe" + image: "qrc:/icons/topLeft/probe.png" + } + ProbeButton { + name: "probe" + image: "qrc:/icons/topLeft/probe.png" + } + ProbeButton { + name: "probe" + image: "qrc:/icons/topLeft/probe.png" + } + ProbeButton { + name: "probe" + image: "qrc:/icons/topLeft/probe.png" + } +} diff --git a/ui/ui.qrc b/ui/ui.qrc index b0f1949..d7f0fdb 100644 --- a/ui/ui.qrc +++ b/ui/ui.qrc @@ -95,6 +95,8 @@ emulator/components/SliderBar.qml emulator/elements/SliderBarBind.qml emulator/items/Setting.qml + emulator/items/TopLeftTop.qml + emulator/elements/ProbeButton.qml MainView.qml