High level language wrapper for LGVL

letanphuc commented 1 month ago

Introduce the problem

Hi developers, I'm working on LGVL and super excited with the performance it provide. But that C language is still to much difficult for application developers (like who work on Web and Mobile application)

I think of the solution to use high level language like HTML. By using HTML, we can preview it simply by using Web browser. I also can develop a compiler with compile this html into C source code then compile and link normally.

Here my sample attached HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom LGVL Elements</title>
<style>
    /* Basic styles */
    screen-element {
        display: block;
        width: var(--screen-width, 480px); /* Default width set to 480px */
        height: var(--screen-height, 272px); /* Default height set to 272px */
        border: 1px solid #ccc;
        position: relative;
        background-color: #000;
    }

    button-element {
        display: block;
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--width);
        height: var(--height);
        background-color: #007BFF;
        color: white;
        text-align: center;
        line-height: var(--height);
        border: none;
        cursor: pointer;
    }

    label-element {
        display: block;
        text-align: var(--alignment, left);
        color: var(--text-color, #000);
    }
</style>
</head>
<body>
<screen-element width="480px" height="272px">
    <button-element x="50px" y="40px" width="120px" height="50px" event-callback="btn_event_cb">
        <label-element text="Button" alignment="center"></label-element>
    </button-element>

    <label-element text="Hello world" text-color="#FFFFFF" alignment="center"></label-element>
</screen-element>

<script>
    class ScreenElement extends HTMLElement {
        constructor() {
            super();
            // Set the screen dimensions via CSS properties based on attributes or defaults
            this.style.setProperty('--screen-width', this.getAttribute('width') || '480px');
            this.style.setProperty('--screen-height', this.getAttribute('height') || '272px');
        }
    }

    class ButtonElement extends HTMLElement {
        constructor() {
            super();
            this.style.setProperty('--x', this.getAttribute('x') || '0px');
            this.style.setProperty('--y', this.getAttribute('y') || '0px');
            this.style.setProperty('--width', this.getAttribute('width') || '100px');
            this.style.setProperty('--height', this.getAttribute('height') || '50px');
            this.onclick = () => window[this.getAttribute('event-callback')]();
        }
    }

    class LabelElement extends HTMLElement {
        constructor() {
            super();
            this.innerText = this.getAttribute('text') || '';
            this.style.setProperty('--text-color', this.getAttribute('text-color') || '#000');
            this.style.setProperty('--alignment', this.getAttribute('alignment') || 'left');
        }
    }

    customElements.define('screen-element', ScreenElement);
    customElements.define('button-element', ButtonElement);
    customElements.define('label-element', LabelElement);

    // Example callback function
    window.btn_event_cb = () => {
        alert('Button clicked!');
    };
</script>
</body>
</html>

We can implement compiler that compile following source code

<screen-element width="480px" height="272px">
    <button-element x="50px" y="40px" width="120px" height="50px" event-callback="btn_event_cb">
        <label-element text="Button" alignment="center"></label-element>
    </button-element>

    <label-element text="Hello world" text-color="#FFFFFF" alignment="center"></label-element>
</screen-element>

Then generate following source code:

void init_layout(void) {
    lv_obj_t *screen = lv_scr_act();

    // Button: <Button x="10" y="10" width="120" height="50" eventCallback="btn_event_cb">
    lv_obj_t *btn1 = lv_btn_create(screen);
    lv_obj_set_pos(btn1, 10, 10);
    lv_obj_set_size(btn1, 120, 50);
    lv_obj_add_event_cb(btn1, btn_event_cb, LV_EVENT_ALL, NULL);

    // button.label: <Label text="Button" textColor="#FFFFFF" alignment="center">
    lv_obj_t *label1 = lv_label_create(btn1);
    lv_label_set_text(label1, "Button");
    lv_obj_set_style_text_color(label1, lv_color_hex(#FFFFFF), 0);
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, 0);

    // Label: <Label text="Hello world" textColor="0xFFFFFF" alignment="center">
    lv_obj_t *label2 = lv_label_create(screen);
    lv_label_set_text(label2, "Hello world");
    lv_obj_set_style_text_color(label2, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(label2, LV_ALIGN_CENTER, 0, 0);
}

Proposal

No response

becseya commented 1 month ago

Thank you for your feedback. We have a good news for you as the work just started on our new editor which will be able to do exactly what you've decibeled. The final language is not fixed yet, bull like will be some flavor of XML if not 100% HTML.

barbiani commented 1 month ago

Looks like you want a wrapper for the moddable sdk.

On Tue, Jul 30, 2024, 07:37 becseya @.***> wrote:

Thank you for your feedback. We have a good news for you as the work just started on our new editor https://www.linkedin.com/posts/lvglgui_work-began-on-lvgls-uieditor-in-the-activity-7213613309537767425-XWux which will be able to do exactly what you've decibeled. The final language is not fixed yet, bull like will be some flavor of XML if not 100% HTML.

— Reply to this email directly, view it on GitHub https://github.com/lvgl/lvgl/issues/6601#issuecomment-2258033405, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYLTJHDYTKV3MFSY4KYQF3ZO5UGFAVCNFSM6AAAAABLVYHMVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJYGAZTGNBQGU . You are receiving this because you are subscribed to this thread.Message ID: @.***>

kdschlosser commented 1 month ago

you can compile LVGL it into JavaScript.

kdschlosser commented 1 month ago

see here...

https://docs.lvgl.io/9.1/_static/built_lv_examples/index.html?example=lv_example_style_7&w=320&h=240

lvgl-bot commented 2 weeks ago

We need some feedback on this issue.

Now we mark this as "stale" because there was no activity here for 14 days.

Remove the "stale" label or comment else this will be closed in 7 days.

lvgl-bot commented 1 week ago

As there was no activity here for a while we close this issue. But don't worry, the conversation is still here and you can get back to it at any time.

So feel free to comment if you have remarks or ideas on this topic.

lvgl / lvgl

High level language wrapper for LGVL #6601

Introduce the problem

Proposal