1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3import { AppState, WidgetType, ComponentData } from "../../appState.slint";
4import { Lamp } from "../lamp.slint";
5import { Appliance } from "../appliance.slint";
6import { Overhead } from "../overhead.slint";
7import { Info } from "../info.slint";
8import { Graph } from "../graph.slint";
9import { Control } from "../control.slint";
10import { MusicPlayer } from "../musicPlayer.slint";
11import { Camera } from "../camera.slint";
12import { HVAC } from "../hvac.slint";
13import { Dishwasher } from "../dishwasher.slint";
14import { Microwave } from "../microwave.slint";
15import { WeatherInfo } from "../weatherInfo.slint";
16import { PowerInfo } from "../powerInfo.slint";
17import { Alarm } from "../alarm.slint";
18import { Measurements, Animation } from "../../common.slint";
19
20
21export component WidgetLoader {
22 in property <int> index;
23 in property <ComponentData> data;
24 property <bool> show: data.visible;
25 property <bool> moveMode: false;
26 in property <WidgetType> type;
27 property <length> targetX;
28 property <length> targetY;
29 property <length> targetWidth;
30 property <length> targetHeight;
31 property <length> animTargetX;
32 property <length> animTargetY;
33 property <length> animTargetWidth;
34 property <length> animTargetHeight;
35
36 animate animTargetX, animTargetY, animTargetWidth, animTargetHeight {
37 duration: Animation.transition-duration;
38 easing: ease-in-out-sine;
39 }
40
41 changed data => {
42 if root.show != self.data.visible {
43 // hiding then set the position so it fades in on the correct place
44 if !root.show {
45 targetX = self.data.x * 1px;
46 targetY = self.data.y * 1px;
47 targetWidth = self.data.width * 1px;
48 targetHeight = self.data.height * 1px;
49 animTargetX = self.data.x * 1px;
50 animTargetY = self.data.y * 1px;
51 animTargetWidth = self.data.width * 1px;
52 animTargetHeight = self.data.height * 1px;
53 } // but if visible don't change the pos so it just fades away.
54
55 root.show = self.data.visible == true;
56 } else {
57 targetX = self.data.x * 1px;
58 targetY = self.data.y * 1px;
59 targetWidth = self.data.width * 1px;
60 targetHeight = self.data.height * 1px;
61 animTargetX = self.data.x * 1px;
62 animTargetY = self.data.y * 1px;
63 animTargetWidth = self.data.width * 1px;
64 animTargetHeight = self.data.height * 1px;
65 }
66 }
67
68 init => {
69 targetX = root.data.x * 1px;
70 targetY = root.data.y * 1px;
71 targetWidth = root.data.width * 1px;
72 targetHeight = root.data.height * 1px;
73 animTargetX = root.data.x * 1px;
74 animTargetY = root.data.y * 1px;
75 animTargetWidth = root.data.width * 1px;
76 animTargetHeight = root.data.height * 1px;
77 root.show = root.data.visible;
78 }
79
80 opacity: 0;
81 x: AppState.first-run ? targetX * AppState.x-scale : (root.opacity < 1 ? targetX : animTargetX) * AppState.x-scale;
82 y: AppState.first-run ? targetY * AppState.y-scale : (root.opacity < 1 ? targetY : animTargetY) * AppState.y-scale;
83 width: AppState.first-run ? targetWidth * AppState.x-scale : (root.opacity < 1 ? targetWidth : animTargetWidth) * AppState.x-scale;
84 height: AppState.first-run ? targetHeight * AppState.y-scale : (root.opacity < 1 ? targetHeight : animTargetHeight) * AppState.y-scale;
85 visible: AppState.last-selected-index != self.index && root.opacity > 0;
86
87 states [
88 instantVisible when root.show && AppState.first-run: {
89 root.opacity: 1;
90 }
91 isVisible when root.show && !AppState.first-run: {
92 root.opacity: 1;
93 in {
94 animate root.opacity {
95 delay: Animation.transition-duration / 2;
96 duration: Animation.transition-duration;
97 easing: ease-in-out-sine;
98 }
99 }
100 out {
101 animate root.opacity {
102 duration: Animation.transition-duration / 2;
103 easing: ease-in-out-sine;
104 }
105 }
106 }
107 ]
108
109 // Use the correct component based on type
110 if root.type == WidgetType.lamp: Lamp {
111 name: AppState.component-details[root.index].name;
112 id: AppState.component-details[root.index].id;
113 index: root.index;
114 width: root.width;
115 height: root.height;
116 }
117
118 if root.type == WidgetType.appliance: Appliance {
119 name: AppState.component-details[root.index].name;
120 id: AppState.component-details[root.index].id;
121 width: root.width;
122 height: root.height;
123 }
124
125 if root.type == WidgetType.overhead: Overhead {
126 name: AppState.component-details[root.index].name;
127 id: AppState.component-details[root.index].id;
128 width: root.width;
129 height: root.height;
130 }
131
132 if root.type == WidgetType.info: Info {
133 name: AppState.component-details[root.index].name;
134 id: AppState.component-details[root.index].id;
135 width: root.width;
136 height: root.height;
137 }
138
139 if root.type == WidgetType.graph: Graph {
140 name: AppState.component-details[root.index].name;
141 id: AppState.component-details[root.index].id;
142 width: root.width;
143 height: root.height;
144 }
145
146 if root.type == WidgetType.control: Control {
147 name: AppState.component-details[root.index].name;
148 id: AppState.component-details[root.index].id;
149 index: root.index;
150 width: root.width;
151 height: root.height;
152 }
153 if root.type == WidgetType.music: MusicPlayer {
154 name: AppState.component-details[root.index].name;
155 id: AppState.component-details[root.index].id;
156 index: root.index;
157 width: root.width;
158 height: root.height;
159 }
160 if root.type == WidgetType.camera: Camera {
161 name: AppState.component-details[root.index].name;
162 id: AppState.component-details[root.index].id;
163 index: root.index;
164 width: root.width;
165 height: root.height;
166 }
167 if root.type == WidgetType.hvac: HVAC {
168 index: root.index;
169 name: AppState.component-details[root.index].name;
170 id: AppState.component-details[root.index].id;
171 width: root.width;
172 height: root.height;
173 }
174 if root.type == WidgetType.microwave: Microwave {
175 index: root.index;
176 name: AppState.component-details[root.index].name;
177 id: AppState.component-details[root.index].id;
178 width: root.width;
179 height: root.height;
180 }
181 if root.type == WidgetType.dishwasher: Dishwasher {
182 index: root.index;
183 name: AppState.component-details[root.index].name;
184 id: AppState.component-details[root.index].id;
185 width: root.width;
186 height: root.height;
187 }
188 if root.type == WidgetType.weatherInfo: WeatherInfo {
189 index: root.index;
190 name: AppState.component-details[root.index].name;
191 id: AppState.component-details[root.index].id;
192 width: root.width;
193 height: root.height;
194 }
195
196 if root.type == WidgetType.powerInfo: PowerInfo {
197 index: root.index;
198 name: AppState.component-details[root.index].name;
199 id: AppState.component-details[root.index].id;
200 width: root.width;
201 height: root.height;
202 }
203 if root.type == WidgetType.alarm: Alarm {
204 index: root.index;
205 name: AppState.component-details[root.index].name;
206 id: AppState.component-details[root.index].id;
207 width: root.width;
208 height: root.height;
209 }
210}
211