Skip to content

Commit d7f4a5a

Browse files
mvladicmvladic
committed
1 parent 992d727 commit d7f4a5a

File tree

1 file changed

+203
-15
lines changed
  • packages/project-editor/lvgl/widgets

1 file changed

+203
-15
lines changed

‎packages/project-editor/lvgl/widgets/Bar.tsx‎

Lines changed: 203 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from "react";
22
import { observable, makeObservable } from "mobx";
33

4-
import { PropertyType, makeDerivedClassInfo } from "project-editor/core/object";
4+
import { IMessage, MessageType, PropertyType, makeDerivedClassInfo } from "project-editor/core/object";
5+
import { getChildOfObject, Message } from "project-editor/store";
56

67
import { ProjectType } from "project-editor/project/project";
78

@@ -19,13 +20,19 @@ import type { LVGLCode } from "project-editor/lvgl/to-lvgl-code";
1920
////////////////////////////////////////////////////////////////////////////////
2021

2122
export class LVGLBarWidget extends LVGLWidget {
22-
min: number;
23-
max: number;
23+
min: number | string;
24+
minType: LVGLPropertyType;
25+
26+
max: number | string;
27+
maxType: LVGLPropertyType;
28+
2429
mode: keyof typeof BAR_MODES;
2530
value: number | string;
2631
valueType: LVGLPropertyType;
32+
previewValue: string;
2733
valueStart: number | string;
2834
valueStartType: LVGLPropertyType;
35+
previewValueStart: string;
2936
enableAnimation: boolean;
3037

3138
static classInfo = makeDerivedClassInfo(LVGLWidget.classInfo, {
@@ -35,16 +42,24 @@ export class LVGLBarWidget extends LVGLWidget {
3542
componentPaletteGroupName: "!1Visualiser",
3643

3744
properties: [
38-
{
39-
name: "min",
40-
type: PropertyType.Number,
41-
propertyGridGroup: specificGroup
42-
},
43-
{
44-
name: "max",
45-
type: PropertyType.Number,
46-
propertyGridGroup: specificGroup
47-
},
45+
...makeLvglExpressionProperty(
46+
"min",
47+
"integer",
48+
"input",
49+
["literal", "expression"],
50+
{
51+
propertyGridGroup: specificGroup
52+
}
53+
),
54+
...makeLvglExpressionProperty(
55+
"max",
56+
"integer",
57+
"input",
58+
["literal", "expression"],
59+
{
60+
propertyGridGroup: specificGroup
61+
}
62+
),
4863
{
4964
name: "mode",
5065
type: PropertyType.Enum,
@@ -64,6 +79,14 @@ export class LVGLBarWidget extends LVGLWidget {
6479
propertyGridGroup: specificGroup
6580
}
6681
),
82+
{
83+
name: "previewValue",
84+
type: PropertyType.String,
85+
disabled: (widget: LVGLBarWidget) => {
86+
return widget.valueType == "literal";
87+
},
88+
propertyGridGroup: specificGroup
89+
},
6790
...makeLvglExpressionProperty(
6891
"valueStart",
6992
"integer",
@@ -74,6 +97,14 @@ export class LVGLBarWidget extends LVGLWidget {
7497
disabled: (bar: LVGLBarWidget) => bar.mode != "RANGE"
7598
}
7699
),
100+
{
101+
name: "previewValueStart",
102+
type: PropertyType.String,
103+
disabled: (widget: LVGLBarWidget) => {
104+
return widget.valueStartType == "literal" || widget.mode != "RANGE";
105+
},
106+
propertyGridGroup: specificGroup
107+
},
77108
{
78109
name: "enableAnimation",
79110
type: PropertyType.Boolean,
@@ -89,15 +120,32 @@ export class LVGLBarWidget extends LVGLWidget {
89120
height: 10,
90121
clickableFlag: true,
91122
min: 0,
123+
minType: "literal",
92124
max: 100,
125+
maxType: "literal",
93126
mode: "NORMAL",
94127
value: 25,
95128
valueType: "literal",
129+
previewValue: "25",
96130
valueStart: 0,
97131
valueStartType: "literal",
132+
previewValueStart: "0",
98133
enableAnimation: false
99134
},
100135

136+
beforeLoadHook: (
137+
object: LVGLBarWidget,
138+
jsObject: Partial<LVGLBarWidget>
139+
) => {
140+
if (jsObject.minType == undefined) {
141+
jsObject.minType = "literal";
142+
}
143+
144+
if (jsObject.maxType == undefined) {
145+
jsObject.maxType = "literal";
146+
}
147+
},
148+
101149
icon: (
102150
<svg viewBox="0 0 32 32" fill="currentColor">
103151
<path d="M28 21H4a2.0021 2.0021 0 0 1-2-2v-6a2.0021 2.0021 0 0 1 2-2h24a2.0021 2.0021 0 0 1 2 2v6a2.0021 2.0021 0 0 1-2 2ZM4 13v6h24v-6Z" />
@@ -106,6 +154,40 @@ export class LVGLBarWidget extends LVGLWidget {
106154
</svg>
107155
),
108156

157+
check: (widget: LVGLBarWidget, messages: IMessage[]) => {
158+
if (widget.minType == "literal") {
159+
if (
160+
widget.min == undefined ||
161+
widget.min == null ||
162+
!Number.isInteger(Number(widget.min))
163+
) {
164+
messages.push(
165+
new Message(
166+
MessageType.ERROR,
167+
`Min must be an integer`,
168+
getChildOfObject(widget, "min")
169+
)
170+
);
171+
}
172+
}
173+
174+
if (widget.maxType == "literal") {
175+
if (
176+
widget.max == undefined ||
177+
widget.max == null ||
178+
!Number.isInteger(Number(widget.max))
179+
) {
180+
messages.push(
181+
new Message(
182+
MessageType.ERROR,
183+
`Max must be an integer`,
184+
getChildOfObject(widget, "max")
185+
)
186+
);
187+
}
188+
}
189+
},
190+
109191
lvgl: {
110192
parts: ["MAIN", "INDICATOR"],
111193
defaultFlags:
@@ -122,21 +204,105 @@ export class LVGLBarWidget extends LVGLWidget {
122204

123205
makeObservable(this, {
124206
min: observable,
207+
minType: observable,
125208
max: observable,
209+
maxType: observable,
126210
mode: observable,
127211
value: observable,
128212
valueType: observable,
213+
previewValue: observable,
129214
valueStart: observable,
130215
valueStartType: observable,
216+
previewValueStart: observable,
131217
enableAnimation: observable
132218
});
133219
}
134220

135221
override toLVGLCode(code: LVGLCode) {
136222
code.createObject("lv_bar_create");
137223

138-
if (this.min != 0 || this.max != 100) {
139-
code.callObjectFunction("lv_bar_set_range", this.min, this.max);
224+
if (this.minType == "literal" && this.maxType == "literal") {
225+
if (this.min != 0 || this.max != 100) {
226+
code.callObjectFunction(
227+
"lv_bar_set_range",
228+
this.min,
229+
this.max
230+
);
231+
}
232+
} else if (this.minType == "literal") {
233+
code.callObjectFunction("lv_bar_set_range", this.min, 100);
234+
} else if (this.maxType == "literal") {
235+
code.callObjectFunction("lv_bar_set_range", 0, this.max);
236+
}
237+
238+
if (this.minType == "expression") {
239+
code.addToTick("min", () => {
240+
const new_val = code.evalIntegerProperty(
241+
"int32_t",
242+
"new_val",
243+
this.min as string,
244+
"Failed to evaluate Min in Bar widget"
245+
);
246+
247+
const cur_val = code.callObjectFunctionWithAssignment(
248+
"int32_t",
249+
"cur_val",
250+
"lv_bar_get_min_value"
251+
);
252+
253+
code.ifNotEqual(new_val, cur_val, () => {
254+
const min = code.assign("int16_t", "min", new_val);
255+
256+
const max = code.callObjectFunctionWithAssignment(
257+
"int16_t",
258+
"max",
259+
"lv_bar_get_max_value"
260+
);
261+
262+
code.ifLess(min, max, () => {
263+
code.callObjectFunction(
264+
"lv_bar_set_range",
265+
min,
266+
max
267+
);
268+
});
269+
});
270+
});
271+
}
272+
273+
if (this.maxType == "expression") {
274+
code.addToTick("max", () => {
275+
const new_val = code.evalIntegerProperty(
276+
"int32_t",
277+
"new_val",
278+
this.max as string,
279+
"Failed to evaluate Max in Bar widget"
280+
);
281+
282+
const cur_val = code.callObjectFunctionWithAssignment(
283+
"int32_t",
284+
"cur_val",
285+
"lv_bar_get_max_value"
286+
);
287+
288+
code.ifNotEqual(new_val, cur_val, () => {
289+
const min = code.callObjectFunctionWithAssignment(
290+
"int16_t",
291+
"min",
292+
"lv_bar_get_min_value"
293+
);
294+
295+
const max = code.assign("int16_t", "max", new_val);
296+
297+
code.ifLess(min, max, () => {
298+
code.callObjectFunction(
299+
"lv_bar_set_range",
300+
min,
301+
max
302+
);
303+
});
304+
});
305+
});
140306
}
141307

142308
if (this.mode != "NORMAL") {
@@ -157,6 +323,17 @@ export class LVGLBarWidget extends LVGLWidget {
157323
);
158324
}
159325
} else {
326+
if (code.pageRuntime && code.pageRuntime.isEditor) {
327+
const previewValue = Number.parseInt(this.previewValue);
328+
if (!isNaN(previewValue)) {
329+
code.callObjectFunction(
330+
"lv_bar_set_value",
331+
previewValue,
332+
code.constant("LV_ANIM_OFF")
333+
);
334+
}
335+
}
336+
160337
code.addToTick("value", () => {
161338
const new_val = code.evalIntegerProperty(
162339
"int32_t",
@@ -207,6 +384,17 @@ export class LVGLBarWidget extends LVGLWidget {
207384
: code.constant("LV_ANIM_OFF")
208385
);
209386
} else {
387+
if (code.pageRuntime && code.pageRuntime.isEditor) {
388+
const previewValueStart = Number.parseInt(this.previewValueStart);
389+
if (!isNaN(previewValueStart)) {
390+
code.callObjectFunction(
391+
"lv_bar_set_start_value",
392+
previewValueStart,
393+
code.constant("LV_ANIM_OFF")
394+
);
395+
}
396+
}
397+
210398
code.addToTick("valueStart", () => {
211399
const new_val = code.evalIntegerProperty(
212400
"int32_t",

0 commit comments

Comments
 (0)