forked from Sepanta/console-emulator
Alireza
3 years ago
94 changed files with 3519 additions and 0 deletions
@ -0,0 +1,4 @@ |
|||||
|
#ifndef PROPERTY_H |
||||
|
#define PROPERTY_H |
||||
|
|
||||
|
#endif // PROPERTY_H
|
||||
@ -0,0 +1,28 @@ |
|||||
|
pragma Singleton |
||||
|
import QtQuick 2.13 |
||||
|
|
||||
|
QtObject { |
||||
|
/**************************************************************************/ |
||||
|
// General |
||||
|
|
||||
|
property var widthRatio: 1 |
||||
|
property var heightRatio: 1 |
||||
|
property var ratio: Math.min(widthRatio , heightRatio) |
||||
|
property var windowAspectRatio: 16 / 6 |
||||
|
property var windowWidth: 1920 // Do Not Change This Property |
||||
|
property var windowHeight: 860 // Do Not Change This Property |
||||
|
|
||||
|
property var lightButton: 64 |
||||
|
property var microButton: 32 |
||||
|
property var macroButton: 64 |
||||
|
property var margin: 6 |
||||
|
property var microLightThickness: 10 |
||||
|
property var macroLightThickness: 10 |
||||
|
property var imageScale: 0.75 |
||||
|
property var imageScalePressed: 0.65 |
||||
|
property var rotateStep: 45 |
||||
|
|
||||
|
property var radiusLong: 44 |
||||
|
property var radiusShort: 24 |
||||
|
|
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
singleton Const Const.qml |
||||
@ -0,0 +1,49 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
import "qrc:/emulator/components" |
||||
|
import "qrc:/emulator/items" |
||||
|
import "qrc:/theme" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
width: Const.windowWidth |
||||
|
height: Const.windowHeight |
||||
|
|
||||
|
NeuLight { |
||||
|
x: 70 |
||||
|
y: 70 |
||||
|
colorMode: 0 |
||||
|
width: Const.microButton |
||||
|
height: Const.microButton |
||||
|
image: Theme.current=== Theme.dark ? "qrc:/icons/uiMode/light.svg" : |
||||
|
"qrc:/icons/uiMode/dark.svg" |
||||
|
MouseArea{ |
||||
|
anchors.fill: parent |
||||
|
onClicked: { |
||||
|
if(Theme.current=== Theme.dark) { |
||||
|
Theme.current = Theme.light |
||||
|
} else { |
||||
|
Theme.current = Theme.dark |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
TopLeft {} |
||||
|
|
||||
|
TopRight {} |
||||
|
|
||||
|
BottomRight {} |
||||
|
|
||||
|
CurveButtons {} |
||||
|
|
||||
|
Joysticks {} |
||||
|
|
||||
|
Encoders {} |
||||
|
|
||||
|
JoystickCouple {} |
||||
|
|
||||
|
TrackballGroup {} |
||||
|
|
||||
|
} |
||||
@ -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" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,257 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import "qrc:/theme" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
id: control |
||||
|
|
||||
|
property bool leftButDown |
||||
|
property bool rightButDown |
||||
|
property bool topButDown |
||||
|
property bool bottomButDown |
||||
|
|
||||
|
width: 2 * (Const.radiusLong + Const.margin) |
||||
|
height: 2 * (Const.radiusLong + Const.margin) |
||||
|
|
||||
|
SegmentButton { |
||||
|
id: topBut |
||||
|
angle: 45 |
||||
|
x: Const.margin |
||||
|
} |
||||
|
|
||||
|
SegmentButton { |
||||
|
id: bottomBut |
||||
|
angle: -135 |
||||
|
x: Const.margin |
||||
|
y: 2 * Const.margin |
||||
|
} |
||||
|
|
||||
|
SegmentButton { |
||||
|
id: leftBut |
||||
|
angle: -45 |
||||
|
y: Const.margin |
||||
|
} |
||||
|
|
||||
|
SegmentButton { |
||||
|
id: rightBut |
||||
|
angle: 135 |
||||
|
x: 2 * Const.margin |
||||
|
y: Const.margin |
||||
|
} |
||||
|
|
||||
|
Rectangle { |
||||
|
color: "transparent" |
||||
|
anchors.fill: parent |
||||
|
MouseArea { |
||||
|
id: mouseArea |
||||
|
anchors.fill: parent |
||||
|
hoverEnabled: true |
||||
|
onPressed: { |
||||
|
if(beInCenter()) { |
||||
|
// inside |
||||
|
} else if (isOutside()) { |
||||
|
// outside |
||||
|
} else { |
||||
|
if(beInNorthOrWest()) { |
||||
|
if(beInNorthOrEast()) { |
||||
|
// top key |
||||
|
topButPressed() |
||||
|
} else { |
||||
|
// left key |
||||
|
leftButPressed() |
||||
|
} |
||||
|
} else { |
||||
|
if(beInNorthOrEast()) { |
||||
|
// right key |
||||
|
rightButPressed() |
||||
|
} else { |
||||
|
// bottom key |
||||
|
bottomButPressed() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onReleased: { |
||||
|
topButReleased() |
||||
|
leftButReleased() |
||||
|
rightButReleased() |
||||
|
bottomButReleased() |
||||
|
} |
||||
|
onMouseXChanged: { |
||||
|
if(!mouseArea.pressed) { |
||||
|
if(beInCenter()) { |
||||
|
// inside |
||||
|
topButExit() |
||||
|
leftButExit() |
||||
|
rightButExit() |
||||
|
bottomButExit() |
||||
|
} else if (isOutside()) { |
||||
|
// outside |
||||
|
topButExit() |
||||
|
leftButExit() |
||||
|
rightButExit() |
||||
|
bottomButExit() |
||||
|
} else { |
||||
|
if(beInNorthOrWest()) { |
||||
|
if(beInNorthOrEast()) { |
||||
|
// top key |
||||
|
topButHover() |
||||
|
leftButExit() |
||||
|
rightButExit() |
||||
|
bottomButExit() |
||||
|
} else { |
||||
|
// left key |
||||
|
leftButHover() |
||||
|
topButExit() |
||||
|
rightButExit() |
||||
|
bottomButExit() |
||||
|
} |
||||
|
} else { |
||||
|
if(beInNorthOrEast()) { |
||||
|
// right key |
||||
|
rightButHover() |
||||
|
topButExit() |
||||
|
leftButExit() |
||||
|
bottomButExit() |
||||
|
} else { |
||||
|
// bottom key |
||||
|
bottomButHover() |
||||
|
topButExit() |
||||
|
leftButExit() |
||||
|
rightButExit() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onExited: { |
||||
|
topButExit() |
||||
|
leftButExit() |
||||
|
rightButExit() |
||||
|
bottomButExit() |
||||
|
} |
||||
|
|
||||
|
function beInNorthOrWest() { |
||||
|
var verDist = (Const.radiusLong + Const.margin) - mouseY |
||||
|
var horDist = mouseX - (Const.radiusLong + Const.margin) |
||||
|
var inNorthorWest = (verDist > horDist) |
||||
|
return inNorthorWest |
||||
|
} |
||||
|
|
||||
|
function beInNorthOrEast() { |
||||
|
var verDist = (Const.radiusLong + Const.margin) - mouseY |
||||
|
var horDist = mouseX - (Const.radiusLong + Const.margin) |
||||
|
var inNorthorEast = (verDist > - horDist) |
||||
|
return inNorthorEast |
||||
|
} |
||||
|
|
||||
|
function beInCenter() { |
||||
|
var verLength = (mouseY - (Const.radiusLong + Const.margin)) ** 2 |
||||
|
var horLength = (mouseX - (Const.radiusLong + Const.margin)) ** 2 |
||||
|
var inCenter = (verLength + horLength < ((Const.radiusShort + Const.margin) ** 2)) |
||||
|
return inCenter |
||||
|
} |
||||
|
|
||||
|
function isOutside() { |
||||
|
var verLength = (mouseY - (Const.radiusLong + Const.margin)) ** 2 |
||||
|
var horLength = (mouseX - (Const.radiusLong + Const.margin)) ** 2 |
||||
|
var isOut = (verLength + horLength > ((Const.radiusLong + Const.margin) ** 2)) |
||||
|
return isOut |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
NeuButton { |
||||
|
width: 2 * (Const.radiusShort - Const.margin) |
||||
|
height: 2 * (Const.radiusShort - Const.margin) |
||||
|
anchors.centerIn: parent |
||||
|
} |
||||
|
|
||||
|
/***********************************/ |
||||
|
function leftButPressed() { |
||||
|
leftButDown = true |
||||
|
leftBut.state = "Pressed" |
||||
|
leftBut.pressed() |
||||
|
} |
||||
|
|
||||
|
function leftButReleased() { |
||||
|
leftButDown = false |
||||
|
leftBut.released() |
||||
|
leftBut.state = "" |
||||
|
} |
||||
|
|
||||
|
function leftButHover() { |
||||
|
leftBut.state = "Hovering" |
||||
|
} |
||||
|
|
||||
|
function leftButExit() { |
||||
|
leftBut.state = "" |
||||
|
} |
||||
|
|
||||
|
/***********************************/ |
||||
|
function rightButPressed() { |
||||
|
rightButDown = true |
||||
|
rightBut.state = "Pressed" |
||||
|
rightBut.pressed() |
||||
|
} |
||||
|
|
||||
|
function rightButReleased() { |
||||
|
rightButDown = false |
||||
|
rightBut.released() |
||||
|
rightBut.state = "" |
||||
|
} |
||||
|
|
||||
|
function rightButHover() { |
||||
|
rightBut.state = "Hovering" |
||||
|
} |
||||
|
|
||||
|
function rightButExit() { |
||||
|
rightBut.state = "" |
||||
|
} |
||||
|
|
||||
|
/***********************************/ |
||||
|
function topButPressed() { |
||||
|
topButDown = true |
||||
|
topBut.state = "Pressed" |
||||
|
topBut.pressed() |
||||
|
} |
||||
|
|
||||
|
function topButReleased() { |
||||
|
topButDown = false |
||||
|
topBut.released() |
||||
|
topBut.state = "" |
||||
|
} |
||||
|
|
||||
|
function topButHover() { |
||||
|
topBut.state = "Hovering" |
||||
|
} |
||||
|
|
||||
|
function topButExit() { |
||||
|
topBut.state = "" |
||||
|
} |
||||
|
|
||||
|
/***********************************/ |
||||
|
function bottomButPressed() { |
||||
|
bottomButDown = true |
||||
|
bottomBut.state = "Pressed" |
||||
|
bottomBut.pressed() |
||||
|
} |
||||
|
|
||||
|
function bottomButReleased() { |
||||
|
bottomButDown = false |
||||
|
bottomBut.released() |
||||
|
bottomBut.state = "" |
||||
|
} |
||||
|
|
||||
|
function bottomButHover() { |
||||
|
bottomBut.state = "Hovering" |
||||
|
} |
||||
|
|
||||
|
function bottomButExit() { |
||||
|
bottomBut.state = "" |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,165 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
import "qrc:/theme" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
id: control |
||||
|
|
||||
|
property var angle: 0 |
||||
|
property var thickness: Const.macroLightThickness |
||||
|
|
||||
|
property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow |
||||
|
property color lightColor: getColor() |
||||
|
property color lightDeep: getColorDeep() |
||||
|
|
||||
|
width: Const.macroButton + 2 * thickness |
||||
|
height: Const.macroButton + 2 * thickness |
||||
|
|
||||
|
function getColor() { |
||||
|
switch(colorMode) { |
||||
|
case(0): return Theme.current.none |
||||
|
case(1): return Theme.current.white |
||||
|
case(2): return Theme.current.green |
||||
|
case(3): return Theme.current.yellow |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function getColorDeep() { |
||||
|
switch(colorMode) { |
||||
|
case(0): return Theme.current.noneDeep |
||||
|
case(1): return Theme.current.whiteDeep |
||||
|
case(2): return Theme.current.greenDeep |
||||
|
case(3): return Theme.current.yellowDeep |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Item { |
||||
|
id: shadowedRing |
||||
|
anchors.fill: parent |
||||
|
|
||||
|
Item { |
||||
|
id: coloredRing |
||||
|
width: parent.width |
||||
|
height: parent.height |
||||
|
|
||||
|
Rectangle { |
||||
|
id: lightRing |
||||
|
width: parent.width |
||||
|
height: parent.height |
||||
|
radius: width / 2 |
||||
|
color: "transparent" |
||||
|
border{ |
||||
|
color: lightColor |
||||
|
width: thickness |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Item { |
||||
|
id: borderGrad |
||||
|
implicitWidth: parent.implicitWidth |
||||
|
implicitHeight: parent.implicitHeight |
||||
|
anchors.fill: parent |
||||
|
|
||||
|
layer.enabled: true |
||||
|
layer.effect: OpacityMask { |
||||
|
maskSource: lightRing |
||||
|
} |
||||
|
|
||||
|
Rectangle { |
||||
|
width: parent.width |
||||
|
height: parent.height |
||||
|
color: "transparent" |
||||
|
|
||||
|
LinearGradient { |
||||
|
id: linGrad |
||||
|
anchors.fill: parent |
||||
|
start: Qt.point(0, parent.height) |
||||
|
end: Qt.point(0, 0) |
||||
|
gradient: Gradient { |
||||
|
GradientStop { |
||||
|
position: 0 |
||||
|
color: lightDeep |
||||
|
} |
||||
|
|
||||
|
GradientStop { |
||||
|
position: 1 |
||||
|
color: lightColor |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
transform: Rotation { |
||||
|
origin { |
||||
|
x: borderGrad.width / 2 |
||||
|
y: borderGrad.height / 2 |
||||
|
} |
||||
|
|
||||
|
axis { |
||||
|
z: 1 |
||||
|
x: 0 |
||||
|
y: 0 |
||||
|
} |
||||
|
|
||||
|
angle: control.angle |
||||
|
|
||||
|
Behavior on angle { |
||||
|
NumberAnimation { |
||||
|
duration: 200 |
||||
|
easing.type: Easing.OutQuad |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
DropShadow { |
||||
|
id: dropDown |
||||
|
anchors.fill: coloredRing |
||||
|
source: coloredRing |
||||
|
horizontalOffset: 3 |
||||
|
verticalOffset: 3 |
||||
|
radius: 4 |
||||
|
samples: 8 |
||||
|
color: Theme.current.light |
||||
|
} |
||||
|
|
||||
|
DropShadow { |
||||
|
id: dropUp |
||||
|
anchors.fill: coloredRing |
||||
|
source: coloredRing |
||||
|
horizontalOffset: - 3 |
||||
|
verticalOffset: - 3 |
||||
|
radius: 4 |
||||
|
samples: 8 |
||||
|
color: Theme.current.light |
||||
|
} |
||||
|
|
||||
|
InnerShadow { |
||||
|
id: inner |
||||
|
anchors.fill: coloredRing |
||||
|
source: coloredRing |
||||
|
horizontalOffset: 3 |
||||
|
verticalOffset: 3 |
||||
|
radius: 3 |
||||
|
samples: 6 |
||||
|
smooth: true |
||||
|
color: Theme.current.lightShadow |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Glow { |
||||
|
// id: glow |
||||
|
// property var base: shadowedRing |
||||
|
// anchors.fill: base |
||||
|
// source: base |
||||
|
// radius: 10 |
||||
|
// samples: 20 |
||||
|
// color: Theme.current.light //orange ? "#FFEAA5" : (green ? "#B8E49B" : (white ? "white" : "transparent")) |
||||
|
// transparentBorder: true |
||||
|
// } |
||||
|
} |
||||
|
|
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import QtQuick.Controls 2.13 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
import "qrc:/const" |
||||
|
|
||||
|
ModeBg { |
||||
|
id: modeBackground |
||||
|
|
||||
|
property var image: "qrc:/icons/topLeft/utils.png" |
||||
|
|
||||
|
property alias down: mainKnob.down |
||||
|
property alias increase: incButton.down |
||||
|
property alias decrease: decButton.down |
||||
|
|
||||
|
property var led: 1 |
||||
|
|
||||
|
LightRing { |
||||
|
id: lightRing |
||||
|
colorMode: parent.led |
||||
|
anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
anchors.horizontalCenter: mainKnob.horizontalCenter |
||||
|
width: Const.macroButton + 2 * thickness |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: mainKnob |
||||
|
image: parent.image |
||||
|
x: Const.microButton / 2 + Const.margin |
||||
|
anchors.bottom: parent.bottom |
||||
|
anchors.bottomMargin: x |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: decButton |
||||
|
anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
anchors.right: mainKnob.left |
||||
|
anchors.rightMargin: Const.margin |
||||
|
implicitWidth: Const.microButton |
||||
|
implicitHeight: Const.microButton |
||||
|
onPressed: lightRing.angle = lightRing.angle - Const.rotateStep |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: incButton |
||||
|
anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
anchors.left: mainKnob.right |
||||
|
anchors.leftMargin: Const.margin |
||||
|
implicitWidth: Const.microButton |
||||
|
implicitHeight: Const.microButton |
||||
|
onPressed: lightRing.angle = lightRing.angle + Const.rotateStep |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,67 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import QtQuick.Controls 2.13 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
import "qrc:/const" |
||||
|
|
||||
|
|
||||
|
ModeBgOption { |
||||
|
id: modeBackground |
||||
|
|
||||
|
property var image: "qrc:/icons/topLeft/utils.png" |
||||
|
property var imageOption: "qrc:/icons/topLeft/utils.png" |
||||
|
|
||||
|
property alias down: mainKnob.down |
||||
|
property alias increase: incButton.down |
||||
|
property alias decrease: decButton.down |
||||
|
|
||||
|
property var led: 1 |
||||
|
property var ledOption: 0 |
||||
|
|
||||
|
LightRing { |
||||
|
id: lightRing |
||||
|
colorMode: parent.led |
||||
|
anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
anchors.horizontalCenter: mainKnob.horizontalCenter |
||||
|
width: Const.macroButton + 2 * thickness |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: mainKnob |
||||
|
image: parent.image |
||||
|
x: Const.microButton / 2 + Const.margin |
||||
|
anchors.bottom: parent.bottom |
||||
|
anchors.bottomMargin: x |
||||
|
} |
||||
|
|
||||
|
NeuImage { |
||||
|
id: option |
||||
|
image: parent.imageOption |
||||
|
anchors.right: parent.right |
||||
|
anchors.rightMargin: Const.microLightThickness |
||||
|
y: Const.microLightThickness |
||||
|
colorMode: parent.ledOption |
||||
|
implicitWidth: Const.microButton |
||||
|
implicitHeight: Const.microButton |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: decButton |
||||
|
anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
anchors.right: mainKnob.left |
||||
|
anchors.rightMargin: Const.margin |
||||
|
implicitWidth: Const.microButton |
||||
|
implicitHeight: Const.microButton |
||||
|
onPressed: lightRing.angle = lightRing.angle - Const.rotateStep |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: incButton |
||||
|
anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
anchors.left: mainKnob.right |
||||
|
anchors.leftMargin: Const.margin |
||||
|
implicitWidth: Const.microButton |
||||
|
implicitHeight: Const.microButton |
||||
|
onPressed: lightRing.angle = lightRing.angle + Const.rotateStep |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,302 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import QtQuick.Controls 2.13 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
import "qrc:/theme" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Button { |
||||
|
id: button |
||||
|
property var image: "" |
||||
|
property var radius: Math.min(width / 2, height / 2) |
||||
|
property var timeToPress: 100 |
||||
|
property var colorMode: 0 // 0->None; 1->White; 2->Green; 3->Yellow |
||||
|
property color backLightColor: getColorMode() |
||||
|
property var specialScale: 1 |
||||
|
|
||||
|
signal pressed |
||||
|
signal released |
||||
|
|
||||
|
onPressed: { button.down = true } |
||||
|
onReleased: { button.down = false } |
||||
|
|
||||
|
implicitWidth: Const.macroButton |
||||
|
implicitHeight: Const.macroButton |
||||
|
|
||||
|
function getColorMode() { |
||||
|
switch(colorMode) { |
||||
|
case(0): return Theme.current.none |
||||
|
case(1): return Theme.current.white |
||||
|
case(2): return Theme.current.green |
||||
|
case(3): return Theme.current.yellow |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
contentItem: Item { |
||||
|
id: content |
||||
|
anchors.fill: parent |
||||
|
z: 1 |
||||
|
|
||||
|
Item { |
||||
|
property var factor: specialScale * (button.state == "Pressed" ? |
||||
|
Const.imageScalePressed : Const.imageScale) |
||||
|
property var elevator: button.state == "Pressed" ? 3 : 0 |
||||
|
|
||||
|
anchors.horizontalCenter: parent.horizontalCenter |
||||
|
y: (parent.height * (1-factor)) / 2 + elevator |
||||
|
width: parent.width * factor |
||||
|
height: parent.height * factor |
||||
|
|
||||
|
Behavior on y { |
||||
|
NumberAnimation { |
||||
|
duration: timeToPress |
||||
|
easing.type: Easing.InOutQuad |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Behavior on width { |
||||
|
NumberAnimation { |
||||
|
duration: timeToPress |
||||
|
easing.type: Easing.InOutQuad |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Behavior on height { |
||||
|
NumberAnimation { |
||||
|
duration: timeToPress |
||||
|
easing.type: Easing.InOutQuad |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
id: img |
||||
|
anchors.fill: parent |
||||
|
source: image |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
antialiasing: true |
||||
|
smooth: true |
||||
|
} |
||||
|
|
||||
|
ColorOverlay { |
||||
|
anchors.fill: img |
||||
|
source: img |
||||
|
color: button.state == "Pressed" ? Theme.current.textSelected : Theme.current.text |
||||
|
antialiasing: true |
||||
|
smooth: true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
background: Rectangle{ |
||||
|
id: background |
||||
|
width: parent.implicitWidth |
||||
|
height: parent.implicitHeight |
||||
|
radius: button.radius |
||||
|
color: Theme.current.button |
||||
|
anchors.fill: parent |
||||
|
|
||||
|
// Rectangle { |
||||
|
// anchors.fill: parent |
||||
|
|
||||
|
// layer.enabled: true |
||||
|
// layer.effect: OpacityMask { |
||||
|
// maskSource: parent |
||||
|
// } |
||||
|
// color: Theme.current.button |
||||
|
// opacity: Theme.current.mergeOpacity |
||||
|
|
||||
|
// RadialGradient { |
||||
|
// anchors.fill: parent |
||||
|
// gradient: Gradient { |
||||
|
// GradientStop { position: 0.0; color: backLightColor } |
||||
|
// GradientStop { position: 0.3; color: backLightColor } |
||||
|
// GradientStop { position: 0.5; color: "transparent" } |
||||
|
// GradientStop { position: 1.0; color: "transparent" } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
MouseArea { |
||||
|
hoverEnabled: true |
||||
|
anchors.fill: background |
||||
|
onEntered: { |
||||
|
button.state = "Hovering" |
||||
|
} |
||||
|
|
||||
|
onExited: { |
||||
|
button.state = "" |
||||
|
} |
||||
|
|
||||
|
onPressed: { |
||||
|
button.state = "Pressed" |
||||
|
button.pressed() |
||||
|
} |
||||
|
|
||||
|
onReleased: { |
||||
|
button.released() |
||||
|
if (containsMouse) |
||||
|
button.state = "Hovering" |
||||
|
else |
||||
|
button.state = "" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
DropShadow { |
||||
|
id: dropDown |
||||
|
anchors.fill: background |
||||
|
source: background |
||||
|
horizontalOffset: 6 |
||||
|
verticalOffset: 6 |
||||
|
radius: 10 |
||||
|
samples: 16 |
||||
|
color: Theme.current.shadow |
||||
|
} |
||||
|
|
||||
|
DropShadow { |
||||
|
id: dropUp |
||||
|
anchors.fill: background |
||||
|
source: background |
||||
|
horizontalOffset: -4 |
||||
|
verticalOffset: -4 |
||||
|
radius: 5 |
||||
|
samples: 10 |
||||
|
color: Theme.current.light |
||||
|
} |
||||
|
|
||||
|
|
||||
|
InnerShadow { |
||||
|
id: innerUp |
||||
|
anchors.fill: background |
||||
|
source: background |
||||
|
horizontalOffset: 3 |
||||
|
verticalOffset: 3 |
||||
|
radius: 2 |
||||
|
samples: 6 |
||||
|
smooth: true |
||||
|
color: Theme.current.shadow |
||||
|
} |
||||
|
|
||||
|
Glow { |
||||
|
id: glow |
||||
|
anchors.fill: background |
||||
|
source: background |
||||
|
radius: 10 |
||||
|
samples: 20 |
||||
|
color: backLightColor |
||||
|
transparentBorder: true |
||||
|
} |
||||
|
|
||||
|
Item { |
||||
|
id: hoverLight |
||||
|
implicitWidth: parent.implicitWidth |
||||
|
implicitHeight: parent.implicitHeight |
||||
|
anchors.fill: parent |
||||
|
|
||||
|
layer.enabled: true |
||||
|
layer.effect: OpacityMask { |
||||
|
maskSource: background |
||||
|
} |
||||
|
|
||||
|
Rectangle { |
||||
|
id: hoverGlow |
||||
|
width: 2 * parent.width |
||||
|
height: parent.height |
||||
|
x: - 2 * parent.width |
||||
|
color: "transparent" |
||||
|
|
||||
|
HoverGlow {} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
states: [ |
||||
|
State { |
||||
|
name: "Hovering" |
||||
|
PropertyChanges { |
||||
|
target: hoverGlow |
||||
|
x: 0 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
State { |
||||
|
name: "Pressed" |
||||
|
PropertyChanges { |
||||
|
target: background |
||||
|
color: Theme.current.buttonSelected |
||||
|
} |
||||
|
|
||||
|
PropertyChanges { |
||||
|
target: dropDown |
||||
|
horizontalOffset: 0 |
||||
|
verticalOffset: 0 |
||||
|
radius: 0 |
||||
|
samples: 0 |
||||
|
} |
||||
|
|
||||
|
PropertyChanges { |
||||
|
target: dropUp |
||||
|
horizontalOffset: 0 |
||||
|
verticalOffset: 0 |
||||
|
radius: 0 |
||||
|
samples: 0 |
||||
|
} |
||||
|
|
||||
|
PropertyChanges { |
||||
|
target: innerUp |
||||
|
horizontalOffset: 6 |
||||
|
verticalOffset: 6 |
||||
|
radius: 6 |
||||
|
samples: 12 |
||||
|
} |
||||
|
|
||||
|
// PropertyChanges { |
||||
|
// target: innerDown |
||||
|
// horizontalOffset: - 4 |
||||
|
// verticalOffset: - 4 |
||||
|
// radius: 4 |
||||
|
// samples: 8 |
||||
|
// } |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
transitions: [ |
||||
|
Transition { |
||||
|
from: ""; to: "Hovering" |
||||
|
NumberAnimation { |
||||
|
properties: "x" |
||||
|
duration: 500 |
||||
|
easing.type: Easing.OutQuad |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
Transition { |
||||
|
from: "*"; to: "Pressed" |
||||
|
|
||||
|
ColorAnimation { |
||||
|
properties: "color" |
||||
|
duration: timeToPress |
||||
|
} |
||||
|
|
||||
|
NumberAnimation { |
||||
|
properties: "horizontalOffset, verticalOffset, radius, samples" |
||||
|
duration: timeToPress |
||||
|
easing.type: Easing.InOutQuad |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
Transition { |
||||
|
from: "Pressed"; to: "*" |
||||
|
|
||||
|
ColorAnimation { |
||||
|
properties: "color" |
||||
|
duration: timeToPress |
||||
|
} |
||||
|
|
||||
|
NumberAnimation { |
||||
|
properties: "horizontalOffset, verticalOffset, radius, samples" |
||||
|
duration: timeToPress |
||||
|
easing.type: Easing.InOutQuad |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,108 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import QtQuick.Controls 2.13 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
id: control |
||||
|
|
||||
|
property var longBut: Const.macroButton |
||||
|
property var shortBut: Const.microButton |
||||
|
|
||||
|
// property alias increase: incButton.down |
||||
|
// property alias decrease: decButton.down |
||||
|
|
||||
|
// LightRing { |
||||
|
// id: lightRing |
||||
|
// colorMode: parent.led |
||||
|
// anchors.verticalCenter: mainKnob.verticalCenter |
||||
|
// anchors.horizontalCenter: mainKnob.horizontalCenter |
||||
|
// width: Const.macroButton + 2 * thickness |
||||
|
// } |
||||
|
|
||||
|
// ModeBg { |
||||
|
// additionalLength: 3 * shortBut |
||||
|
// anchors.centerIn: parent |
||||
|
// } |
||||
|
|
||||
|
// ModeBg { |
||||
|
// additionalLength: - shortBut |
||||
|
// anchors.centerIn: parent |
||||
|
// } |
||||
|
|
||||
|
width: Const.macroButton + Const.microButton + 2 * Const.margin |
||||
|
height: width |
||||
|
|
||||
|
LightRing { |
||||
|
colorMode: 0 |
||||
|
anchors.centerIn: parent |
||||
|
width: Const.macroButton + Const.microButton + 2 * Const.margin + 3 * shortBut |
||||
|
height: width |
||||
|
thickness: 60 |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: leftBut |
||||
|
anchors.right: parent.left |
||||
|
anchors.verticalCenter: parent.verticalCenter |
||||
|
implicitWidth: shortBut |
||||
|
implicitHeight: longBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: rightBut |
||||
|
anchors.left: parent.right |
||||
|
anchors.verticalCenter: parent.verticalCenter |
||||
|
implicitWidth: shortBut |
||||
|
implicitHeight: longBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: topBut |
||||
|
anchors.horizontalCenter: parent.horizontalCenter |
||||
|
anchors.bottom: parent.top |
||||
|
implicitWidth: longBut |
||||
|
implicitHeight: shortBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: bottomBut |
||||
|
anchors.horizontalCenter: parent.horizontalCenter |
||||
|
anchors.top: parent.bottom |
||||
|
implicitWidth: longBut |
||||
|
implicitHeight: shortBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: topLeftBut |
||||
|
anchors.verticalCenter: parent.top |
||||
|
anchors.horizontalCenter: parent.left |
||||
|
implicitWidth: shortBut |
||||
|
implicitHeight: shortBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: topRightBut |
||||
|
anchors.verticalCenter: parent.top |
||||
|
anchors.horizontalCenter: parent.right |
||||
|
implicitWidth: shortBut |
||||
|
implicitHeight: shortBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: bottomLeftBut |
||||
|
anchors.verticalCenter: parent.bottom |
||||
|
anchors.horizontalCenter: parent.left |
||||
|
implicitWidth: shortBut |
||||
|
implicitHeight: shortBut |
||||
|
} |
||||
|
|
||||
|
Knob { |
||||
|
id: bottomRightBut |
||||
|
anchors.verticalCenter: parent.bottom |
||||
|
anchors.horizontalCenter: parent.right |
||||
|
implicitWidth: shortBut |
||||
|
implicitHeight: shortBut |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import de.skycoder42.QtMvvm.Core 1.0 |
||||
|
import de.skycoder42.QtMvvm.Quick 1.0 |
||||
|
import com.example.consoleemulator 1.0 |
||||
|
|
||||
|
import "qrc:/qtmvvm/views" |
||||
|
import "qrc:/const" |
||||
|
import "qrc:/emulator/components" |
||||
|
|
||||
|
JoystickButton { |
||||
|
property var name |
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import de.skycoder42.QtMvvm.Core 1.0 |
||||
|
import de.skycoder42.QtMvvm.Quick 1.0 |
||||
|
import com.example.consoleemulator 1.0 |
||||
|
|
||||
|
import "qrc:/qtmvvm/views" |
||||
|
import "qrc:/const" |
||||
|
import "qrc:/emulator/components" |
||||
|
|
||||
|
KnobLight { |
||||
|
id: knobLight |
||||
|
property var name |
||||
|
property var nameLed: name + "Led" |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewProperty: "down" |
||||
|
viewModelProperty: name |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewProperty: "colorMode" |
||||
|
viewModelProperty: nameLed |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import de.skycoder42.QtMvvm.Core 1.0 |
||||
|
import de.skycoder42.QtMvvm.Quick 1.0 |
||||
|
import com.example.consoleemulator 1.0 |
||||
|
|
||||
|
import "qrc:/qtmvvm/views" |
||||
|
import "qrc:/const" |
||||
|
import "qrc:/emulator/components" |
||||
|
|
||||
|
LightImage { |
||||
|
property var name |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import de.skycoder42.QtMvvm.Core 1.0 |
||||
|
import de.skycoder42.QtMvvm.Quick 1.0 |
||||
|
import com.example.consoleemulator 1.0 |
||||
|
|
||||
|
import "qrc:/qtmvvm/views" |
||||
|
import "qrc:/const" |
||||
|
import "qrc:/emulator/components" |
||||
|
|
||||
|
ModeButton { |
||||
|
property var name |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import de.skycoder42.QtMvvm.Core 1.0 |
||||
|
import de.skycoder42.QtMvvm.Quick 1.0 |
||||
|
import com.example.consoleemulator 1.0 |
||||
|
|
||||
|
import "qrc:/qtmvvm/views" |
||||
|
import "qrc:/const" |
||||
|
import "qrc:/emulator/components" |
||||
|
|
||||
|
ModeOption { |
||||
|
property var name |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import "qrc:/emulator/components" |
||||
|
|
||||
|
Trackball { |
||||
|
|
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import "qrc:/emulator/elements" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
// width: 670 |
||||
|
// height: 240 |
||||
|
// x: 891 |
||||
|
|
||||
|
width: childrenRect.width |
||||
|
height: childrenRect.height |
||||
|
anchors.horizontalCenter: parent.horizontalCenter |
||||
|
y: 210 |
||||
|
|
||||
|
Row { |
||||
|
spacing: 40 |
||||
|
ModeOptionBind { |
||||
|
y: 130 |
||||
|
name: "modePw" |
||||
|
imageOption: "qrc:/icons/encoder/x.png" |
||||
|
image: "qrc:/icons/encoder/modePw.png" |
||||
|
} |
||||
|
|
||||
|
ModeOptionBind { |
||||
|
y: 41 |
||||
|
name: "modeM" |
||||
|
// tinyName: "y" |
||||
|
imageOption: "qrc:/icons/encoder/y.png" |
||||
|
image: "qrc:/icons/encoder/modeM.png" |
||||
|
} |
||||
|
|
||||
|
ModeOptionBind { |
||||
|
name: "modePd" |
||||
|
// tinyName: "z" |
||||
|
imageOption: "qrc:/icons/encoder/z.png" |
||||
|
image: "qrc:/icons/encoder/modePd.png" |
||||
|
} |
||||
|
|
||||
|
ModeOptionBind { |
||||
|
y: 41 |
||||
|
name: "modeC" |
||||
|
// tinyName: "quadrat" |
||||
|
imageOption: "qrc:/icons/encoder/quadratic.png" |
||||
|
image: "qrc:/icons/encoder/modeC.png" |
||||
|
} |
||||
|
|
||||
|
ModeButtonBind { |
||||
|
y: 130 |
||||
|
name: "mode2D" |
||||
|
image: "qrc:/icons/encoder/mode2d.png" |
||||
|
led: 2 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,63 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import "qrc:/emulator/elements" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
y: 244 |
||||
|
|
||||
|
JoystickButtonBind { |
||||
|
id: leftJoy |
||||
|
name: "depth" |
||||
|
x: 1481 |
||||
|
} |
||||
|
|
||||
|
Row { |
||||
|
spacing: 10 |
||||
|
anchors.top: leftJoy.bottom |
||||
|
anchors.topMargin: 10 |
||||
|
anchors.horizontalCenter: leftJoy.horizontalCenter |
||||
|
|
||||
|
LightImageBind { |
||||
|
name: "zoom" |
||||
|
image: "qrc:/icons/miniButton/zoom.png" |
||||
|
} |
||||
|
|
||||
|
LightImageBind { |
||||
|
name: "depth" |
||||
|
image: "qrc:/icons/miniButton/depth.png" |
||||
|
colorMode: 2 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
JoystickButtonBind { |
||||
|
id: rightJoy |
||||
|
name: "focus" |
||||
|
x: 1711 |
||||
|
} |
||||
|
|
||||
|
Row { |
||||
|
spacing: 10 |
||||
|
anchors.top: rightJoy.bottom |
||||
|
anchors.topMargin: 10 |
||||
|
anchors.horizontalCenter: rightJoy.horizontalCenter |
||||
|
|
||||
|
LightImageBind { |
||||
|
name: "angle" |
||||
|
image: "qrc:/icons/miniButton/angle.png" |
||||
|
colorMode: 1 |
||||
|
} |
||||
|
|
||||
|
LightImageBind { |
||||
|
name: "focusZone" |
||||
|
image: "qrc:/icons/miniButton/focusZone.png" |
||||
|
colorMode: 2 |
||||
|
} |
||||
|
|
||||
|
LightImageBind { |
||||
|
name: "focusDepth" |
||||
|
image: "qrc:/icons/miniButton/focusDepth.png" |
||||
|
colorMode: 3 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,25 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import "qrc:/emulator/elements" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
Item { |
||||
|
// width: 820 |
||||
|
// height: 80 |
||||
|
width: childrenRect.width |
||||
|
height: childrenRect.height |
||||
|
anchors.horizontalCenter: parent.horizontalCenter |
||||
|
|
||||
|
// x: 550 |
||||
|
y: 50 |
||||
|
|
||||
|
Row { |
||||
|
spacing: 64 |
||||
|
|
||||
|
JoystickButtonBind { name: "joystick1" } |
||||
|
JoystickButtonBind { name: "joystick2" } |
||||
|
JoystickButtonBind { name: "joystick3" } |
||||
|
JoystickButtonBind { name: "joystick4" } |
||||
|
JoystickButtonBind { name: "joystick5" } |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,44 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import "qrc:/console/elements" |
||||
|
import "qrc:/ui" |
||||
|
|
||||
|
Item { |
||||
|
width: 290 * UI.ratio |
||||
|
height: 46 * UI.ratio |
||||
|
x: 1590 * UI.ratio |
||||
|
y: 510 * UI.ratio |
||||
|
|
||||
|
Row { |
||||
|
spacing: 10 * UI.ratio |
||||
|
|
||||
|
MiniButton { |
||||
|
name: "zoom" |
||||
|
image: "qrc:/ui/Images/miniButton/zoom.png" |
||||
|
} |
||||
|
|
||||
|
MiniButton { |
||||
|
name: "depth" |
||||
|
image: "qrc:/ui/Images/miniButton/depth.png" |
||||
|
} |
||||
|
|
||||
|
Item { |
||||
|
width: 10 * UI.ratio |
||||
|
height: 46 * UI.ratio |
||||
|
} |
||||
|
|
||||
|
MiniButton { |
||||
|
name: "angle" |
||||
|
image: "qrc:/ui/Images/miniButton/angle.png" |
||||
|
} |
||||
|
|
||||
|
MiniButton { |
||||
|
name: "focusZone" |
||||
|
image: "qrc:/ui/Images/miniButton/focusZone.png" |
||||
|
} |
||||
|
|
||||
|
MiniButton { |
||||
|
name: "focusDepth" |
||||
|
image: "qrc:/ui/Images/miniButton/focusDepth.png" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
import QtQuick.Layouts 1.13 |
||||
|
|
||||
|
import "qrc:/emulator/elements" |
||||
|
import "qrc:/emulator/components" |
||||
|
import "qrc:/const" |
||||
|
|
||||
|
GridLayout { |
||||
|
id: topLeft |
||||
|
x: 70 |
||||
|
y: 200 |
||||
|
rows: 3 |
||||
|
columns: 4 |
||||
|
rowSpacing: 36 |
||||
|
columnSpacing: 36 |
||||
|
|
||||
|
NeuLight { |
||||
|
image: "qrc:/icons/topLeft/power.png" |
||||
|
Layout.column: 3 |
||||
|
colorMode: 3 |
||||
|
// enabled: false |
||||
|
// name: "power" |
||||
|
} |
||||
|
|
||||
|
KnobLightBind { name: "patient" ; image: "qrc:/icons/topLeft/patient.png" } |
||||
|
KnobLightBind { name: "utils" ; image: "qrc:/icons/topLeft/utils.png" } |
||||
|
KnobLightBind { name: "dvd" ; image: "qrc:/icons/topLeft/dvd.png" } |
||||
|
KnobLightBind { name: "report" ; image: "qrc:/icons/topLeft/report.png" } |
||||
|
KnobLightBind { name: "probe" ; image: "qrc:/icons/topLeft/probe.png" |
||||
|
Layout.column: 1 |
||||
|
Layout.row: 2 |
||||
|
} |
||||
|
|
||||
|
KnobLightBind { name: "archive" ; image: "qrc:/icons/topLeft/archive.png" } |
||||
|
KnobLightBind { name: "end" ; image: "qrc:/icons/topLeft/end.png" } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
@ -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" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,211 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
import de.skycoder42.QtMvvm.Core 1.0 |
||||
|
import de.skycoder42.QtMvvm.Quick 1.0 |
||||
|
import com.example.console 1.0 |
||||
|
import "qrc:/ui" |
||||
|
|
||||
|
Item { |
||||
|
width: 384 * UI.ratio |
||||
|
height: 384 * UI.ratio |
||||
|
x: 1036 * UI.ratio |
||||
|
y: 656 * UI.ratio |
||||
|
property bool tt: false |
||||
|
property bool tb: false |
||||
|
property bool tr: false |
||||
|
property bool tl: false |
||||
|
property bool ttr: false |
||||
|
property bool tbr: false |
||||
|
property bool ttl: false |
||||
|
property bool tbl: false |
||||
|
|
||||
|
|
||||
|
onTtChanged: { |
||||
|
if(tt) { |
||||
|
mainView.textLog = mainView.textLog + "Top trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Top trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTbChanged: { |
||||
|
if(tb) { |
||||
|
mainView.textLog = mainView.textLog + "Bottom trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Bottom trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTrChanged: { |
||||
|
if(tr) { |
||||
|
mainView.textLog = mainView.textLog + "Right trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Right trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTlChanged: { |
||||
|
if(tl) { |
||||
|
mainView.textLog = mainView.textLog + "Left trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Left trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTtrChanged: { |
||||
|
if(ttr) { |
||||
|
mainView.textLog = mainView.textLog + "Top Right trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Top Right trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTbrChanged: { |
||||
|
if(tbr) { |
||||
|
mainView.textLog = mainView.textLog + "Bottom Right trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Bottom Right trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTtlChanged: { |
||||
|
if(ttl) { |
||||
|
mainView.textLog = mainView.textLog + "Top Left trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Top Left trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onTblChanged: { |
||||
|
if(tbl) { |
||||
|
mainView.textLog = mainView.textLog + "Bottom Left trackball key pressed.\n" |
||||
|
} |
||||
|
|
||||
|
else { |
||||
|
mainView.textLog = mainView.textLog + "Bottom Left trackball key released.\n" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTT" |
||||
|
viewProperty: "tt" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTB" |
||||
|
viewProperty: "tb" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTR" |
||||
|
viewProperty: "tr" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTL" |
||||
|
viewProperty: "tl" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTTR" |
||||
|
viewProperty: "ttr" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTBR" |
||||
|
viewProperty: "tbr" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTTL" |
||||
|
viewProperty: "ttl" |
||||
|
} |
||||
|
|
||||
|
MvvmBinding { |
||||
|
viewModel: mainView.viewModel |
||||
|
viewModelProperty: "trackballTBL" |
||||
|
viewProperty: "tbl" |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: tt |
||||
|
source: "qrc:/ui/icons/trackball/TT.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: tb |
||||
|
source: "qrc:/ui/icons/trackball/TB.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: tr |
||||
|
source: "qrc:/ui/icons/trackball/TR.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: tl |
||||
|
source: "qrc:/ui/icons/trackball/TL.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: ttr |
||||
|
source: "qrc:/ui/icons/trackball/TTR.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: tbr |
||||
|
source: "qrc:/ui/icons/trackball/TBR.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: ttl |
||||
|
source: "qrc:/ui/icons/trackball/TTL.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
visible: tbl |
||||
|
source: "qrc:/ui/icons/trackball/TBL.svg" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
|
||||
|
Image { |
||||
|
source: "qrc:/ui/icons/trackball/Trackball.png" |
||||
|
anchors.fill: parent |
||||
|
fillMode: Image.PreserveAspectFit |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
import QtQuick 2.0 |
||||
|
|
||||
|
import "qrc:/emulator/elements" |
||||
|
|
||||
|
TrackballBind { |
||||
|
anchors.horizontalCenter: parent.horizontalCenter |
||||
|
y: 650 |
||||
|
|
||||
|
|
||||
|
} |
||||
|
After Width: | Height: | Size: 143 B |
|
After Width: | Height: | Size: 159 B |
|
After Width: | Height: | Size: 188 B |
|
After Width: | Height: | Size: 182 B |
|
After Width: | Height: | Size: 183 B |
|
After Width: | Height: | Size: 144 B |
|
After Width: | Height: | Size: 144 B |
|
After Width: | Height: | Size: 184 B |
|
After Width: | Height: | Size: 198 B |
|
After Width: | Height: | Size: 194 B |
|
After Width: | Height: | Size: 245 B |
|
After Width: | Height: | Size: 213 B |
|
After Width: | Height: | Size: 239 B |
|
After Width: | Height: | Size: 213 B |
|
After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 214 B |
|
After Width: | Height: | Size: 175 B |
|
After Width: | Height: | Size: 152 B |
|
After Width: | Height: | Size: 159 B |
|
After Width: | Height: | Size: 159 B |
|
After Width: | Height: | Size: 168 B |
|
After Width: | Height: | Size: 172 B |
|
After Width: | Height: | Size: 165 B |
|
After Width: | Height: | Size: 162 B |
|
After Width: | Height: | Size: 160 B |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 226 B |
|
After Width: | Height: | Size: 230 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 195 B |
|
After Width: | Height: | Size: 229 B |
|
After Width: | Height: | Size: 198 B |
|
After Width: | Height: | Size: 171 B |
|
After Width: | Height: | Size: 152 B |
|
After Width: | Height: | Size: 177 B |
|
After Width: | Height: | Size: 159 B |
|
After Width: | Height: | Size: 168 B |
|
After Width: | Height: | Size: 259 B |
|
After Width: | Height: | Size: 230 B |
|
After Width: | Height: | Size: 268 B |
|
After Width: | Height: | Size: 272 B |
|
After Width: | Height: | Size: 201 B |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 237 B |
|
After Width: | Height: | Size: 171 B |
|
After Width: | Height: | Size: 181 B |
|
After Width: | Height: | Size: 180 B |
|
After Width: | Height: | Size: 217 B |
|
After Width: | Height: | Size: 666 B |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,7 @@ |
|||||
|
Palette { |
||||
|
id: dark |
||||
|
isDarkTheme: true |
||||
|
// shiny: "#B8E2FF" |
||||
|
// primary: "#62B5ED" |
||||
|
// selected: "#9BCDFF" |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
Palette { |
||||
|
id: light |
||||
|
isDarkTheme: false |
||||
|
// shiny: "#AEE9FF" |
||||
|
// primary: "#4CA9DF" |
||||
|
// selected: "#3D88D4" |
||||
|
} |
||||
@ -0,0 +1,44 @@ |
|||||
|
import QtQuick 2.13 |
||||
|
import QtGraphicalEffects 1.13 |
||||
|
|
||||
|
QtObject { |
||||
|
property bool isDarkTheme: false |
||||
|
|
||||
|
property color shiny: "#D7DEE9" |
||||
|
property color primary |
||||
|
property color selected: isDarkTheme ? "#D1D7E3" : "#D1D7E3" |
||||
|
|
||||
|
property color background: isDarkTheme ? "#181818" : "#B8C5D7" |
||||
|
property color light: isDarkTheme ? "#05FFFFFF" : "#80F1F2F5" |
||||
|
property color shadow: isDarkTheme ? "#C0000000" : "#95A4B9" |
||||
|
property color lightShadow: isDarkTheme ? "#80000000" : "#80C9D1DD" |
||||
|
|
||||
|
property color button: isDarkTheme ? "#222222" : "#C6D1E1" |
||||
|
property color buttonSelected: isDarkTheme ? "#202020" : "#AAB7CA" |
||||
|
|
||||
|
property color text: isDarkTheme ? "#656E85" : "#323B52" |
||||
|
property color textSelected: isDarkTheme ? "#656E85" : "#323B52" |
||||
|
|
||||
|
property color none: isDarkTheme ? "#2D2F32" : "#A7B4C7" |
||||
|
property color noneGlow: isDarkTheme ? "#2D2F32" : "#A3B2C7" |
||||
|
property color noneDeep: isDarkTheme ? "#767F8C" : "#767F8C" |
||||
|
|
||||
|
property color white: isDarkTheme ? "#FFFFFF" : "#FFFFFF" |
||||
|
property color whiteGlow: isDarkTheme ? "#F1F5FA" : "#F1F5FA" |
||||
|
property color whiteDeep: isDarkTheme ? "#A9CFFF" : "#A9CFFF" |
||||
|
|
||||
|
property color green: isDarkTheme ? "#95CF6C" : "#95CF6C" |
||||
|
property color greenGlow: isDarkTheme ? "#B8E49B" : "#B8E49B" |
||||
|
property color greenDeep: isDarkTheme ? "#17A58C" : "#17A58C" |
||||
|
|
||||
|
property color yellow: isDarkTheme ? "#F5CC3C" : "#F5CC3C" |
||||
|
property color yellowGlow: isDarkTheme ? "#F3DE96" : "#80F3DE96" |
||||
|
property color yellowDeep: isDarkTheme ? "#D37129" : "#D37129" |
||||
|
|
||||
|
property var glowRaduis: isDarkTheme ? 15 : 30 |
||||
|
|
||||
|
property var disabledOpacity: 0.4 |
||||
|
property var mergeOpacity: isDarkTheme ? 0.1 : 0.6 |
||||
|
property var disabledTextOpacity: isDarkTheme ? 0.38 : 0.64 |
||||
|
// green "#32EC7B" |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
pragma Singleton |
||||
|
import QtQuick 2.13 |
||||
|
|
||||
|
QtObject { |
||||
|
|
||||
|
property Palette light: Light {} |
||||
|
property Palette dark: Dark {} |
||||
|
property Palette current: light |
||||
|
|
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
singleton Theme Theme.qml |
||||
Loading…
Reference in new issue