Skip to content

Commit

Permalink
fix change color theme for user widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvladic
mvladic committed Oct 22, 2024
1 parent aaacc5a commit f5dcd0f
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 33 deletions.
172 changes: 139 additions & 33 deletions packages/project-editor/lvgl/build.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import type { LVGLGroup } from "./groups";
import { showBuildImageInfoDialog } from "./build-image-info-dialog";
import tinycolor from "tinycolor2";
import { GENERATED_NAME_PREFIX } from "./identifiers";
import type { Flow } from "project-editor/flow/flow";

interface Identifiers {
identifiers: string[];
Expand All @@ -46,7 +47,10 @@ export class LVGLBuild extends Build {
fontNames = new Map<string, string>();
bitmapNames = new Map<string, string>();

updateColorCallbacks: (() => void)[] = [];
updateColorCallbacks: {
object: IEezObject;
callback: () => void;
}[] = [];

isFirstPass: boolean;

Expand Down Expand Up @@ -707,6 +711,7 @@ export class LVGLBuild extends Build {
}

buildColor<T>(
object: IEezObject,
color: string,
getParams: () => T,
callback: (color: string, params: T) => void,
Expand All @@ -716,17 +721,21 @@ export class LVGLBuild extends Build {
callback(colorAccessor, getParams());

if (!this.isFirstPass && fromTheme) {
this.updateColorCallbacks.push(() => {
const { colorAccessor } = this.getColorAccessor(
color,
"theme_index"
);
updateCallback(colorAccessor, getParams());
this.updateColorCallbacks.push({
object,
callback: () => {
const { colorAccessor } = this.getColorAccessor(
color,
"theme_index"
);
updateCallback(colorAccessor, getParams());
}
});
}
}

buildColor2<T>(
object: IEezObject,
color1: string,
color2: string,
getParams: () => T,
Expand All @@ -742,16 +751,15 @@ export class LVGLBuild extends Build {
callback(color1Accessor, color2Accessor, getParams());

if (!this.isFirstPass && (color1FromTheme || color2FromTheme)) {
this.updateColorCallbacks.push(() => {
const { colorAccessor: color1Accessor } = this.getColorAccessor(
color1,
"theme_index"
);
const { colorAccessor: color2Accessor } = this.getColorAccessor(
color2,
"theme_index"
);
updateCallback(color1Accessor, color2Accessor, getParams());
this.updateColorCallbacks.push({
object,
callback: () => {
const { colorAccessor: color1Accessor } =
this.getColorAccessor(color1, "theme_index");
const { colorAccessor: color2Accessor } =
this.getColorAccessor(color2, "theme_index");
updateCallback(color1Accessor, color2Accessor, getParams());
}
});
}
}
Expand Down Expand Up @@ -1179,29 +1187,127 @@ export class LVGLBuild extends Build {
build.line("");
}

if (this.updateColorCallbacks.length > 0) {
build.line(`void change_color_theme(uint32_t theme_index) {`);
build.indent();
this.updateColorCallbacks.forEach((callback, i) => {
callback();
this.buildChangeColorTheme();

return this.result;
}

buildChangeColorTheme() {
if (this.updateColorCallbacks.length == 0) {
return;
}

const build = this;

build.line(`void change_color_theme(uint32_t theme_index) {`);
build.indent();

this.updateColorCallbacks.forEach(updateColorCallback => {
const flow = getAncestorOfType<Flow>(
updateColorCallback.object,
ProjectEditor.FlowClass.classInfo
);

if (
flow instanceof ProjectEditor.PageClass &&
flow.isUsedAsUserWidget
) {
return;
}

updateColorCallback.callback();

build.line("");
});

this.pages.forEach(page => {
if (page.isUsedAsUserWidget) {
return;
}

if (this.buildChangeColorThemeForUserWidget(page, true)) {
build.line("");
});
}
});

build.pages
.filter(page => !page.isUsedAsUserWidget)
.forEach(page =>
build.line(
`lv_obj_invalidate(objects.${this.getScreenIdentifier(
page
)});`
)
build.pages
.filter(page => !page.isUsedAsUserWidget)
.forEach(page =>
build.line(
`lv_obj_invalidate(objects.${this.getScreenIdentifier(
page
)});`
)
);

build.unindent();
build.line("}");
}

buildChangeColorThemeForUserWidget(page: Page, flag: boolean) {
const build = this;

let first = true;

page._lvglWidgets.forEach(lvglWidget => {
if (
!(lvglWidget instanceof ProjectEditor.LVGLUserWidgetWidgetClass)
) {
return;
}

const updateColorCallbacks = this.updateColorCallbacks.filter(
(updateColorCallback, i) => {
const flow = getAncestorOfType<Flow>(
updateColorCallback.object,
ProjectEditor.FlowClass.classInfo
);

return flow == lvglWidget.userWidgetPage;
}
);

if (!updateColorCallbacks) {
return;
}

if (first) {
first = false;
} else {
build.line("");
}

build.line("{");
build.indent();

if (flag) {
build.line(
`int startWidgetIndex = ${
this.getWidgetObjectIndex(lvglWidget) + 1
};`
);
} else {
build.line(
`startWidgetIndex += ${
this.getWidgetObjectIndex(lvglWidget) + 1
};`
);
}

updateColorCallbacks.forEach(updateColorCallback =>
updateColorCallback.callback()
);

this.buildChangeColorThemeForUserWidget(
lvglWidget.userWidgetPage!,
false
);

build.unindent();
build.line("}");
}
});

return this.result;
return !first;
}

async buildScreensDeclExt() {
Expand Down
2 changes: 2 additions & 0 deletions packages/project-editor/lvgl/style-definition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,7 @@ export class LVGLStylesDefinition extends EezObject {

if (propertyInfo.type == PropertyType.ThemedColor) {
build.buildColor(
this,
this.definition[part][state][propertyName],
() => {
return build.getLvglObjectAccessor(
Expand Down Expand Up @@ -769,6 +770,7 @@ export class LVGLStylesDefinition extends EezObject {

if (propertyInfo.type == PropertyType.ThemedColor) {
build.buildColor(
this,
this.definition[part][state][propertyName],
() => {},
color => {
Expand Down
1 change: 1 addition & 0 deletions packages/project-editor/lvgl/widgets/Led.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ export class LVGLLedWidget extends LVGLWidget {
override lvglBuildSpecific(build: LVGLBuild) {
if (this.colorType == "literal") {
build.buildColor(
this,
this.color,
() => {
return build.getLvglObjectAccessor(this);
Expand Down
4 changes: 4 additions & 0 deletions packages/project-editor/lvgl/widgets/Meter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,6 +581,7 @@ export class LVGLMeterIndicatorNeedleLine extends LVGLMeterIndicator {

override lvglBuild(build: LVGLBuild) {
build.buildColor(
this,
this.color,
() =>
build.genFileStaticVar(
Expand Down Expand Up @@ -851,6 +852,7 @@ export class LVGLMeterIndicatorScaleLines extends LVGLMeterIndicator {

override lvglBuild(build: LVGLBuild) {
build.buildColor2(
this,
this.colorStart,
this.colorEnd,
() =>
Expand Down Expand Up @@ -1099,6 +1101,7 @@ export class LVGLMeterIndicatorArc extends LVGLMeterIndicator {

override lvglBuild(build: LVGLBuild) {
build.buildColor(
this,
this.color,
() =>
build.genFileStaticVar(
Expand Down Expand Up @@ -1608,6 +1611,7 @@ export class LVGLMeterWidget extends LVGLWidget {
build.line(`lv_meter_scale_t *scale = lv_meter_add_scale(obj);`);

build.buildColor2(
this,
scale.minorTickColor,
scale.majorTickColor,
() =>
Expand Down

0 comments on commit f5dcd0f

Please sign in to comment.