1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3import { DialState } from "dial.slint";
4import { Palette } from "../../common.slint";
5
6export component Light {
7
8 function pulseAnimation(duration: duration) -> float {
9 return 1 * (1 - abs(sin(360deg * animation-tick() / duration)));
10 }
11
12 in property <int> index;
13 in property <int> volume;
14 property <angle> gap: (360deg - (DialState.startAngle - DialState.endAngle)) / DialState.totalLights;
15 property <angle> angle: (index * gap) + DialState.startAngle;
16 property <bool> lightOn: index <= volume;
17 property <float> pulse: index == 0 && lightOn && volume <= 1 ? pulseAnimation(5s) : 1.0;
18
19 x: DialState.elementRadius * angle.cos();
20 y: DialState.elementRadius * angle.sin();
21 width: 0;
22 height: 0;
23
24 states [
25 lightOff when !root.lightOn: {
26 dialLed.opacity: 0;
27 }
28 lightOn when root.lightOn: {
29 dialLed.opacity: pulse;
30 in {
31 animate dialLed.opacity {
32 duration: 100ms;
33 easing: ease-in-sine;
34 }
35 }
36 out {
37 animate dialLed.opacity {
38 duration: 600ms;
39 easing: ease-out-sine;
40 }
41 }
42 }
43 ]
44 Rectangle {
45
46 Rectangle {
47 width: 5px;
48 height: self.width;
49 border-radius: self.width / 2;
50 background: Palette.door-light-off;
51 opacity: 0.1;
52 }
53
54 dialLed := Image {
55 source: Palette.dark-color-scheme ? @image-url("../../images/led-dark.png") : @image-url("../../images/led.png");
56 width: self.source.width * 0.5 * 1px;
57 height: self.source.height * 0.5 * 1px;
58 }
59 }
60}
61
62export component DialLights {
63 width: 212px;
64 height: 213px;
65 in property <int> volume;
66
67 Rectangle {
68 width: 1px;
69 height: 1px;
70 x: 106px;
71 y: 105px;
72 lightHolder := Rectangle {
73 x: 0px;
74 y: 1px;
75 for i in DialState.totalLights + 1: Light {
76 index: i;
77 volume: root.volume;
78 }
79 }
80 }
81}
82