Examples for lvgl in micropython

Sure, even in dev-6.1.
Probably there are other function that we miss but we could find it only with systematically reading the API. Probably @Stepan_Snigirev will find the other problematic places too.

The simulator is out-of-date. I am planning to merge master into it, but I haven’t had a chance to do so yet.

I created a pull request with most of the examples.

Remaining problems:

  • how to work with tasks in micropython?
  • some functions don’t accept lists:
    • calendar.set_highlighted_dates
    • tileview.set_valid_positions
  • ddlist.get_selected_str() and roller.get_selected_str() require passing a string as an argument and change it in place. Would be better to return a string.
  • not sure how to get information from lv.event_get_data() in ta example (it’s used to trigger action on \n)

@embeddedt, would it be possible to add a new url type for the online simulator?

All the MicroPython examples don’t have any initialization code, but all of them can use the same init code in the simulator. Then we could easily include “Try it online” link next to the example in the doc, and reference to the same code.

The goal is to make urls like this working: https://littlevgl.github.io/sim/micropython/ports/javascript/lvgl_editor.html?script=https://raw.githubusercontent.com/littlevgl/lv_examples/rework/src/lv_ex_bar/lv_ex_bar_1.py

If we add another url parameter - instead of &script=... we use something like &example=..., we could make such urls working. Internally the online editor could just add a few lines of code before the script. Something like:

import imp, sys
sys.path.append('https://raw.githubusercontent.com/littlevgl/lv_binding_micropython/master/lib')
import display_driver
import lvgl as lv
lv.init()

scr = lv.obj()
# Load the screen
lv.scr_load(scr)

# Here we put the actual script provided in the &example=<url> parameter

Let’s continue this discussion on the PR.

Instead of “&example=”, how about “&init_script=” ?
The simulator would first and run the init_script if it is present, and only then run will run script. It is more general and can be used on contexts other than examples. It would allow specifying different init scripts on different occasions if needed.

Something like:
https://littlevgl.github.io/sim/micropython/ports/javascript/lvgl_editor.html?init_script=https://raw.githubusercontent.com/littlevgl/lv_examples/rework/src/init.py&script=https://raw.githubusercontent.com/littlevgl/lv_examples/rework/src/lv_ex_bar/lv_ex_bar_1.py

@Stepan_Snigirev, @embeddedt, what do you think?

I like it. With &init_script=... it will be possible to create examples for themes / custom styles / animations and other stuff that share the same main script.

It would be nice to see both init script and main script in the editor, maybe something like this:

##### init script ###

import lvgl as lv
# ... the rest of init script

##### main script ###

btn = lv.btn(lv.scr_act())
# ... the rest of main script

Actually, the init script would be included separately (e.g. a file from GitHub raw content) and the main script would be in the editor. Would that work?

I’ve fixed in dev-6.1.

Yes, it will definitely work with all current examples.

Awesome! I will complete the examples then!

@embeddedt both the script and the init_script can be files on GitHub.
Why not display both as @Stepan_Snigirev suggested?

The advantage is that if someone clicks “save” to save it on snippetbin, both will be saved as a single script. This script on snippetbin would be self-contained and runnable.

What do you think?

I think that’s confusing. That means that once someone clicks “save” the first time, both scripts get combined into a single script (and the init_script gets dropped from the URL).

If they’re going to be a single script after saving, they might as well be a single script from the start.

I thought about it again. Why is init_script necessary? Can’t someone just import another script that does the initialization?

hi, i find init_script a bit confusing PYTHONSTARTUP would feel more natural

on a side note, i noticed some people complaining on irc (freenode #micropython) about the git header micropython version (1.9!) on esp32 on their own build. i believe the javascript port is still also affected when doing custom builds, though i made that remark some time ago.

init_script or PYTHONSTARTUP would help to create “Try it online” links automatically that load files from the lv_example repository. In this case if we change or add new examples, “Try it online” links will always remain up-to-date.

Python scripts in lv_examples are minimal - they don’t have any initialization code and they assume that lvgl is already imported and initialized, and display driver is loaded.

If we would start making online demos now we would need to create a separate collection of scripts with all the init stuff and maintain them separately. I feel that it would just double the work…

But what is the difference between init_script and import init_script.py? Aren’t they both going to be able to run a single, shared script?

@amirgon mentioned that lv_micropython will be updated soon.

init_script in the url doesn’t require changing example files, import init_script.py requires adding these lines to every example and maybe sys.append(url_to_init_script).

But maybe I am missing something. Let’s say we want to make an online demo for this script:
https://raw.githubusercontent.com/littlevgl/lv_examples/rework/src/lv_ex_bar/lv_ex_bar_1.py

How do you imagine the process here?

@embeddedt unfortunately, single line import is not enough. You need at least a few lines.

You need something like:

import imp, sys
sys.path.append('https://raw.githubusercontent.com/littlevgl/lv_binding_micropython/master/lib')
import display_driver
import lvgl as lv

Before importing the display_driver, you must set the sys.path. before setting the sys.path you must import sys and imp
And you would also want to import lvgl as lv

So the init script could be these 4 lines and possibly more. For example, additional paths to sys.path when needed, registering image decoders, themes, loading fonts (when this is implemented) etc.

I think it makes sense to keep the example scripts clean, so they only contain the important lvgl code, and let the init script do all the initialization.

I didn’t suggest that the “save” combine them to a single script.
I suggested loading both the init script and the main script to the editor when the web page loads them, as @Stepan_Snigirev suggested here.
Saving them to snippetbin would work just like today, with the complete text that appears on the text editor.

I don’t understand how you can have one and not the other. If you are loading the two scripts into the same editor window (and thus the same underlying JS string), they are being combined into a single script.

On the other hand, if you load them into separate editor windows, they will still be two separate underlying JS strings, but how do they then get saved to Snippetbin (which only takes one file)?

I’m probably not understanding something here because you both seem to be in agreement on this. :slightly_smiling_face: Can you clarify the basic summary of how it should work with regards to Snippetbin and the editor windows?

I’ll try to explain what I had in mind.
It’s really simple actually, just get two scripts, concatenate them together and proceed just like today.

For example:

The rational here is that we would like the same main script to be used in two different contexts - in the docs and in the simulator.

However -

  • We don’t want the init code in the docs
  • We need the init code in the simulator
  • We want to use the same script on both and avoid code duplication

So the “init_script” solves these problems.

Please let me know if this is clearer

I made a small proof-of-concept.
This is how I imagine functionality:
https://stepansnigirev.github.io/sim/?init_script=https://gist.githubusercontent.com/stepansnigirev/d360caaca643a17989b1b41ceef417d1/raw&script=https://raw.githubusercontent.com/littlevgl/lv_examples/rework/src/lv_ex_bar/lv_ex_bar_1.py

It actually works, try it out.

Now with any example we can use the same init code:
https://stepansnigirev.github.io/sim/?init_script=https://gist.githubusercontent.com/stepansnigirev/d360caaca643a17989b1b41ceef417d1/raw&script=https://raw.githubusercontent.com/stepansnigirev/lv_examples/rework/src/lv_ex_chart/lv_ex_chart_1.py

Exactly.

Could you send a PR to lv_micropython lvgl_javascript branch?