Skip to content

Commit 8513cfe

Browse files
NigelBreslawNigelBreslaw
authored
Examples: Speedometer demo (#9752)
Simple demo to show how scale and rotation can be used to create good looking instrument dials.
1 parent 4a2c334 commit 8513cfe

File tree

6 files changed

+190
-0
lines changed

6 files changed

+190
-0
lines changed

‎REUSE.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ path = [
116116
"examples/orbit-animation/images/**.png",
117117
"examples/orbit-animation/images/**.svg",
118118
"examples/sprite-sheet/images/**.png",
119+
"examples/speedometer/needle.png",
119120
"component-sets/material/docs/**.json",
120121
"component-sets/material/docs/**.svg",
121122
"component-sets/material/docs/**.css",

‎examples/speedometer/01 Digitall.ttf‎

55.9 KB
Binary file not shown.

‎examples/speedometer/01 Digitall.ttf.license‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
SPDX-FileCopyrightText: David Chung. <https://www.dafont.com/david-chung.d656>
2+
3+
SPDX-License-Identifier: OFL-1.1-RFN

‎examples/speedometer/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
2+
![Speedometer Screenshot](https://github.com/user-attachments/assets/bc3a6036-6fa7-4a1a-84ec-b0f16da663ef)
3+
4+
# Speedometer demo
5+
6+
Demonstrate how to create a speedometer with Slint using conic gradients, scale and rotation.
7+
8+
[Online Preview](https://slint.dev/snapshots/master/editor/preview.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/speedometer/demo.slint)
9+
[Online code editor](https://slint.dev/snapshots/master/editor/index.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/speedometer/demo.slint)

‎examples/speedometer/demo.slint‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
// Copyright © SixtyFPS GmbH <[email protected]>
2+
// SPDX-License-Identifier: MIT
3+
4+
import { Button, VerticalBox, HorizontalBox } from "std-widgets.slint";
5+
import "./01 Digitall.ttf";
6+
7+
component MiniDot {
8+
width: 0;
9+
height: 0;
10+
Rectangle {
11+
y: 160px;
12+
x: -(self.width / 2);
13+
width: 4px;
14+
height: 6px;
15+
background: #47505b;
16+
border-radius: self.width / 2;
17+
}
18+
}
19+
20+
component BigDot {
21+
width: 0;
22+
height: 0;
23+
Rectangle {
24+
y: 159px;
25+
x: -(self.width / 2);
26+
width: 5px;
27+
height: 10px;
28+
background: #a5adb3;
29+
border-radius: self.width / 2;
30+
}
31+
}
32+
33+
component KPHText {
34+
width: 0;
35+
height: 0;
36+
Text {
37+
y: 127px;
38+
width: 36px;
39+
color: white;
40+
text: (root.transform-rotation / 1deg).floor();
41+
font-size: 18px;
42+
transform-rotation: -root.transform-rotation - 50deg;
43+
font-family: "01 Digitall";
44+
opacity: 0.9;
45+
horizontal-alignment: left;
46+
}
47+
}
48+
49+
export component MainWindow inherits Window {
50+
property <color> background-color: #020414;
51+
property <int> speed: 0;
52+
53+
width: 500px;
54+
height: 500px;
55+
background: background-color;
56+
title: "Sci-Fi Speedometer";
57+
58+
animate speed {
59+
duration: 1000ms;
60+
easing: ease-in-out;
61+
}
62+
63+
property <angle> stop1: speed < 100 ? 0deg : (speed - 100) * 1deg;
64+
property <angle> stop2: speed * 1deg;
65+
property <angle> stop3: speed * 1deg + 1deg;
66+
property <angle> stop4: 360deg;
67+
68+
Rectangle {
69+
width: 315px;
70+
height: self.width;
71+
border-radius: self.width / 2;
72+
background: @conic-gradient(background-color stop1, red stop2, background-color stop3, background-color stop4);
73+
transform-rotation: -130deg;
74+
}
75+
76+
Rectangle {
77+
78+
dial := Rectangle {
79+
width: 0px;
80+
height: 0px;
81+
transform-rotation: 50deg;
82+
83+
property <int> max-speed: 260;
84+
property <int> total-mini-dots: max-speed / 2;
85+
property <int> total-big-dots: total-mini-dots / 5;
86+
property <int> kph-indicators: total-big-dots / 2;
87+
88+
for i in total-mini-dots: MiniDot {
89+
transform-rotation: 260deg * (i / total-mini-dots);
90+
}
91+
for i in total-big-dots + 1: BigDot {
92+
transform-rotation: 260deg * (i / total-big-dots);
93+
}
94+
95+
for i in kph-indicators + 1: KPHText {
96+
transform-rotation: 260deg * (i / kph-indicators);
97+
}
98+
}
99+
100+
holder := Rectangle {
101+
width: 0px;
102+
height: 0px;
103+
background: red;
104+
transform-rotation: (speed * 1deg) - 130deg;
105+
needle := Image {
106+
x: -self.width / 2;
107+
y: -self.height;
108+
source: @image-url("needle.png");
109+
transform-scale: 0.51;
110+
transform-scale-x: 0.3;
111+
transform-origin: { x: self.width / 2, y: self.height };
112+
}
113+
}
114+
115+
inner-circle := Rectangle {
116+
width: 180px;
117+
height: self.width;
118+
border-radius: self.width / 2;
119+
border-width: 1px;
120+
border-color: @conic-gradient(#020414 67.5deg, #ff0000 121deg, #020414 167deg, #020414 256deg, #ff0000 302deg, #000000 351deg);
121+
background: background-color;
122+
drop-shadow-blur: 30px;
123+
drop-shadow-color: #fe5a5a60;
124+
125+
Text {
126+
text: speed;
127+
font-family: "01 Digitall";
128+
font-size: 52px;
129+
color: white;
130+
y: parent.height / 2 - self.height / 2 - 20px;
131+
}
132+
133+
kmh-label :=Text {
134+
text: "km/h";
135+
font-size: 18px;
136+
color: white;
137+
x: parent.width / 2 - self.width / 2;
138+
y: parent.height / 2 + 20px;
139+
}
140+
}
141+
}
142+
143+
control-buttons := HorizontalBox {
144+
spacing: 10px;
145+
alignment: center;
146+
height: 50px;
147+
y: 450px;
148+
149+
Button {
150+
text: "STOP";
151+
clicked => {
152+
speed = 0;
153+
}
154+
}
155+
156+
Button {
157+
text: "CRUISE";
158+
clicked => {
159+
speed = 60;
160+
}
161+
}
162+
163+
Button {
164+
text: "FAST";
165+
clicked => {
166+
speed = 120;
167+
}
168+
}
169+
170+
Button {
171+
text: "MAX";
172+
clicked => {
173+
speed = 240;
174+
}
175+
}
176+
}
177+
}

‎examples/speedometer/needle.png‎

1.99 KB
Loading

0 commit comments

Comments
 (0)