Skip to content

Commit d855a78

Browse files
adazem009adazem009
committed
Add ValueMonitor component
1 parent e40a0e8 commit d855a78

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed

‎src/CMakeLists.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ qt_add_qml_module(scratchcpp-render
88
OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/ScratchCPP/Render
99
QML_FILES
1010
ProjectPlayer.qml
11+
RESOURCES
12+
internal/ValueMonitor.qml
13+
internal/MonitorSlider.qml
1114
SOURCES
1215
global.h
1316
projectloader.cpp

‎src/internal/MonitorSlider.qml‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// SPDX-License-Identifier: LGPL-3.0-or-later
2+
3+
import QtQuick
4+
import QtQuick.Controls
5+
import QtQuick.Controls.Material
6+
7+
// NOTE: All the values here make monitor sliders look exactly
8+
// like on Scratch, so be careful when doing any changes.
9+
Slider {
10+
id: control
11+
property bool discrete: false
12+
13+
QtObject {
14+
id: priv
15+
readonly property color bgColor: Qt.rgba(0.94, 0.94, 0.94, 1)
16+
readonly property color currentBgColor: control.pressed ? Qt.rgba(0.96, 0.96, 0.96, 1) : (hoverHandler.hovered ? Qt.darker(bgColor, 1.28) : bgColor)
17+
18+
readonly property color bgBorderColor: Qt.rgba(0.7, 0.7, 0.7, 1)
19+
readonly property color currentBgBorderColor: control.pressed ? Qt.rgba(0.77, 0.77, 0.77, 1) : (hoverHandler.hovered ? Qt.darker(bgBorderColor, 1.28) : bgBorderColor)
20+
21+
readonly property color sliderColor: Qt.rgba(0, 0.46, 1, 1)
22+
readonly property color currentSliderColor: control.pressed ? Qt.rgba(0.22, 0.58, 1, 1) : (hoverHandler.hovered ? Qt.darker(sliderColor, 1.28) : sliderColor)
23+
24+
readonly property color positionBorderColor: Qt.rgba(0.21, 0.46, 0.75, 1)
25+
readonly property color currentPositionBorderColor: control.pressed ? Qt.rgba(0.37, 0.56, 0.79, 1) : (hoverHandler.hovered ? Qt.darker(positionBorderColor, 1.28) : positionBorderColor)
26+
}
27+
28+
stepSize: discrete ? 1 : 0
29+
snapMode: Slider.SnapAlways
30+
implicitWidth: 119
31+
implicitHeight: 16
32+
leftPadding: -4
33+
rightPadding: -4
34+
topPadding: -1
35+
bottomPadding: 0
36+
activeFocusOnTab: false
37+
hoverEnabled: true
38+
39+
background: Rectangle {
40+
x: control.leftPadding
41+
y: control.topPadding + control.availableHeight / 2 - height / 2
42+
implicitWidth: 200
43+
implicitHeight: 7.5
44+
width: control.availableWidth
45+
height: implicitHeight
46+
radius: 6
47+
color: priv.currentBgColor
48+
border.color: priv.currentBgBorderColor
49+
50+
Rectangle {
51+
width: control.visualPosition * (parent.width - handle.width) + handle.width
52+
height: parent.height
53+
color: priv.currentSliderColor
54+
border.color: priv.currentPositionBorderColor
55+
radius: 6
56+
}
57+
}
58+
59+
handle: Rectangle {
60+
x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
61+
y: control.topPadding + control.availableHeight / 2 - height / 2
62+
implicitWidth: 15
63+
implicitHeight: 15
64+
radius: 7
65+
color: control.pressed ? priv.currentSliderColor : (handleHoverHandler.hovered ? priv.currentSliderColor : priv.sliderColor)
66+
67+
HoverHandler {
68+
id: handleHoverHandler
69+
}
70+
}
71+
72+
HoverHandler {
73+
id: hoverHandler
74+
}
75+
}

‎src/internal/ValueMonitor.qml‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// SPDX-License-Identifier: LGPL-3.0-or-later
2+
3+
import QtQuick
4+
import QtQuick.Layouts
5+
import ScratchCPP.Render
6+
7+
// NOTE: All the values here make monitors look exactly
8+
// like on Scratch, so be careful when doing any changes.
9+
Rectangle {
10+
property ValueMonitorModel model: null
11+
12+
color: model ? (model.mode === ValueMonitorModel.Large ? model.color : priv.bgColor) : priv.bgColor
13+
border.color: Qt.rgba(0.765, 0.8, 0.85, 1)
14+
radius: 5
15+
width: layout.implicitWidth + priv.horizontalMargins * 2
16+
height: layout.implicitHeight + priv.verticalMargins * 2
17+
visible: model ? model.visible : true
18+
19+
QtObject {
20+
id: priv
21+
readonly property int horizontalMargins: 9
22+
readonly property double verticalMargins: 2.5
23+
readonly property color bgColor: Qt.rgba(0.9, 0.94, 1, 1)
24+
}
25+
26+
ColumnLayout {
27+
id: layout
28+
anchors.leftMargin: priv.horizontalMargins
29+
anchors.rightMargin: priv.horizontalMargins
30+
anchors.topMargin: priv.verticalMargins
31+
anchors.bottomMargin: priv.verticalMargins
32+
anchors.centerIn: parent
33+
spacing: 0
34+
35+
Loader {
36+
active: model ? model.mode !== ValueMonitorModel.Large : true
37+
sourceComponent: RowLayout {
38+
spacing: 9
39+
40+
Text {
41+
color: Qt.rgba(0.34, 0.37, 0.46, 1)
42+
text: model ? model.name : ""
43+
textFormat: Text.PlainText
44+
font.pointSize: 9
45+
font.bold: true
46+
font.family: "Helvetica"
47+
}
48+
49+
Text {
50+
id: valueText
51+
color: "white"
52+
text: model ? model.value : ""
53+
textFormat: Text.PlainText
54+
font.pointSize: 9
55+
font.family: "Helvetica"
56+
leftPadding: 2
57+
rightPadding: 2
58+
topPadding: -2
59+
bottomPadding: -1
60+
horizontalAlignment: Qt.AlignHCenter
61+
Layout.minimumWidth: 40
62+
63+
Rectangle {
64+
color: model.color
65+
radius: 5
66+
anchors.fill: parent
67+
anchors.margins: 0
68+
z: -1
69+
}
70+
}
71+
}
72+
}
73+
74+
Loader {
75+
active: model ? model.mode === ValueMonitorModel.Slider : false
76+
sourceComponent: MonitorSlider {
77+
from: model ? model.sliderMin : 0
78+
to: model ? model.sliderMax : 0
79+
discrete: model ? model.discrete : true
80+
value: model ? model.value : 0
81+
Layout.fillWidth: true
82+
onMoved: {
83+
if(model)
84+
model.value = value;
85+
}
86+
}
87+
}
88+
89+
Loader {
90+
active: model ? model.mode === ValueMonitorModel.Large : false
91+
sourceComponent: Text {
92+
color: "white"
93+
text: model ? model.value : ""
94+
textFormat: Text.PlainText
95+
font.pointSize: 12
96+
font.family: "Helvetica"
97+
leftPadding: 2
98+
rightPadding: 2
99+
topPadding: -5
100+
bottomPadding: 0
101+
horizontalAlignment: Qt.AlignHCenter
102+
width: Math.max(31, implicitWidth)
103+
height: Math.max(14.46, implicitHeight)
104+
}
105+
}
106+
}
107+
}

0 commit comments

Comments
 (0)