Improve the MicroPython simulator #1320

embeddedt · 2019-12-22T13:53:43Z

The MicroPython simulator is online and ready to use, but needs to be polished further.

Here is a list of improvements compiled by @amirgon:

Monaco Editor
Allow changing the various pane sizes
Try to improve Frame-Rate
Host SnippetBin backend on LittlevGL server instead of Heroku
Improve styling of the html, Bootstrap
Support loading fonts on runtime on lvgl. This would allow sharing snippets with custom fonts

amirgon · 2019-12-22T14:50:16Z

it's actually no better than our existing editor on its own, because it requires a language server running for anything beyond basic syntax coloring.

@embeddedt have a look at this example from here:

the same code on Ace editor:

What I like about Monaco is

It looks cleaner, nicer color and fonts, feels more modern
There is a "document map" on the right that can help scrolling

So it's not a big difference, but even without a language server I think Monaco is nicer.

puzrin · 2019-12-26T23:04:01Z

Host SnippetBin backend on LittlevGL server instead of Heroku

There are other alternatives:

gists
URL-encoded content, in anchor (up to 2K should work everywhere, don't remember upper limit)

embeddedt · 2019-12-26T23:34:05Z

We already discussed those other alternatives, but they had a number of downsides (mainly spam concerns and size limitations). We concluded that SnippetBin was the best choice.

amirgon · 2020-01-17T09:57:51Z

Allow changing the lvgl screen size

Micropython SDL driver now accepts parameters for screen width and height.
So only need to dynamically set canvas size in order to implement this in the simulator.

See:

PR: Parameterize SDL init lv_binding_micropython#65
Usage example: https://gist.github.com/amirgon/f1f9e3a448ce089536ba725e8456a19d

embeddedt · 2020-01-17T13:47:06Z

I think we need a hook for adjusting the window size after initialization as well.

amirgon · 2020-01-17T20:22:19Z

I think we need a hook for adjusting the window size after initialization as well.

To simplify things, what if you let the user adjust it by interactively dragging the window edges?
If it's too small, then only part of the viewport would be visible.

kisvegabor · 2020-01-20T13:21:25Z

To simplify things, what if you let the user adjust it by interactively dragging the window edges?

It'd be great, but I don't know if @embeddedt has time and interest to do it.

embeddedt · 2020-01-20T15:59:44Z

I'm definitely interested in making it work, but finding the time is an issue. I definitely won't be able to start on this before February.

kisvegabor · 2020-01-21T13:11:10Z

No problem. We can add @amirgon's updates and improve it further when you can find time for it.

embeddedt · 2020-02-09T02:59:15Z

I've started working on replacing the existing editor with Monaco. Hopefully I can get it done this weekend.

embeddedt · 2020-02-09T22:58:41Z

Here's a teaser. 😉

I'm working on ironing out the last few issues, then I'll push this to the lvgl_javascript branch.

embeddedt · 2020-02-09T23:34:06Z

The changes are pushed and live on https://sim.littlevgl.com. Let me know if you think anything needs adjusting.

kisvegabor · 2020-02-10T06:02:04Z

Look nice!
What were the "Á" characters in the screenshot?

amirgon · 2020-02-10T08:23:54Z

Very nice! I'm currently traveling, I'll have a look after I'm back next week.

…

On Mon, Feb 10, 2020, 08:02 Gabor Kiss-Vamosi ***@***.***> wrote: Look nice! What were the "Á" characters in the screenshot? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1320>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACZS3LVS45VHFCD63P3NFUTRCDUVZANCNFSM4J6L4D3A> .

embeddedt · 2020-02-10T14:08:46Z

@kisvegabor

What were the "Á" characters in the screenshot?

At the time, the page was set to use ISO-8859-1 for the character encoding (not UTF-8), so I think it was interpreting   as Á, or something like that.

@amirgon

I'm currently traveling, I'll have a look after I'm back next week.

No rush; have a safe trip!

amirgon · 2020-02-14T20:15:00Z

The changes are pushed and live on https://sim.littlevgl.com. Let me know if you think anything needs adjusting.

@embeddedt it's not working for me.
I'm getting:

main.65321e8f.js:1097 Uncaught ReferenceError: mp_js_stdout is not defined
    at main.65321e8f.js:1097
    at dispatch (jquery-1.12.4.js:5226)
    at elemData.handle (jquery-1.12.4.js:4878)

fit.min.js:1 Uncaught TypeError: Cannot read property 'parentElement' of undefined
    at o (fit.min.js:1)
    at n (fit.min.js:1)
    at a.e.fit (fit.min.js:1)
    at main.65321e8f.js:1097
    at dispatch (jquery-1.12.4.js:5226)
    at elemData.handle (jquery-1.12.4.js:4878)

I'm using latest Chrome (Version 78.0.3904.70 (Official Build) (64-bit)) on Linux.

embeddedt · 2020-02-14T20:18:56Z

Hmm. It seemed to be working for me on Firefox when I wrote that message, but I've just tried it now in Chrome and it is in fact not working.

I'll take a look when I get a chance. In the meantime, my latest commit to https://github.com/littlevgl/sim should be reverted (I'll try and do that today).

embeddedt · 2020-02-15T00:43:49Z

Fixed... it should start working once GitHub Pages deploys my latest commit.

kisvegabor · 2020-02-15T11:47:07Z

I've just tried the new version and it works well in Firefox but the "Restart" button remains inactive in Chrome.

embeddedt · 2020-02-15T16:40:50Z

@kisvegabor GitHub had issues with the new version for some reason (I got an error about one of the symlinks in the repository), so I think you're still seeing the old version. I'll fix it today.

embeddedt · 2020-02-15T20:25:35Z

The new version is pushed and appears to work fine in Chrome now.

Note that you may need to press Ctrl+F5 if it doesn't work the first time, as Chrome may still be caching the old, broken version.

amirgon · 2020-02-15T21:50:12Z

The new version is pushed and appears to work fine in Chrome now.

It does not work when passing script parameter:

https://sim.littlevgl.com/micropython/ports/javascript/bundle_out/index.html?script=https://raw.githubusercontent.com/littlevgl/lv_binding_micropython/master/examples/advanced_demo.py&cache_buster=7

main.cb19d18d.js:formatted:119808 Uncaught ReferenceError: total is not defined
    at XMLHttpRequest.o.onreadystatechange (main.cb19d18d.js:formatted:119808)

Also, could you list the parameters that the simulator accepts? (script, init_script, cache_buster etc.)

EDIT

One more thing I noticed - it seems like you are using an older micropython version:

MicroPython v1.11-904-g32e3cc4d5 on 2020-02-08; JS with Emscripten
Type "help()" for more information.
>>> import sys
>>> sys.implementation
(name='micropython', version=(1, 11, 0))
>>>

Recent lv_micropython version is 1.12.

kisvegabor · 2022-01-08T08:53:34Z

I also got a question: In the latest master the API of lv_draw_rect has changed so e.g. line 50 of this example shouldn't work.

It seems the simulator based on the last release and not master. Is that correct?

Related: lvgl/lvgl#1320 (comment)

embeddedt · 2022-01-08T16:03:44Z

Any idea why f-strings are not working on the online simulator?

Apparently, they were disabled in the JavaScript port's mpconfigport.h. This should be fixed now. Unfortunately I can't test it yet as GitHub has cached the older simulator version for the next few hours, apparently.

It seems the simulator based on the last release and not master. Is that correct?

The simulator is based on master, because that's what lv_micropython is based on. However, lv_micropython doesn't get updated automatically at the moment. @amirgon periodically bumps the submodule.

The logic for the JavaScript simulator uses the version number in lvgl.h to decide what URL to push to. So, once @amirgon bumps the LVGL submodule on lv_micropython, this example will break, as master still has 8.1 as its version number.

I suppose, once there are breaking changes, lvgl.h probably needs to be updated to at least the next minor version to ensure this doesn't happen.

kisvegabor · 2022-01-10T11:14:14Z

The logic for the JavaScript simulator uses the version number in lvgl.h to decide what URL to push to. So, once @amirgon bumps the LVGL submodule on lv_micropython, this example will break, as master still has 8.1 as its version number.

Thanks for the explanation.
v8.2 released soon so we can fix the MP examples for it.

amirgon · 2022-01-10T21:31:32Z

Apparently, they were disabled in the JavaScript port's mpconfigport.h. This should be fixed now. Unfortunately I can't test it yet as GitHub has cached the older simulator version for the next few hours, apparently.

Strange, I still get this problem even after "Clear Site Data" which clears the cache.
@embeddedt are you sure this is fixed?

However, lv_micropython doesn't get updated automatically at the moment. @amirgon periodically bumps the submodule.

That's right.
The reason I don't do that automatically is because every such "bump" requires merging the binding's lv_conf.h.
Sometimes this merge is not trivial and requires some thought, not something that can be done automatically.

v8.2 released soon so we can fix the MP examples for it.

I'm tracking LVGL releases so I'll get notified when v8.2 is released and will bump the Micropython bindings shortly afterwards.

embeddedt · 2022-01-10T21:34:13Z

Strange, I still get this problem even after "Clear Site Data" which clears the cache.

I know. Something went wrong this time, as the build date is still December 10th. It's not serving what I built on Saturday for some reason. I just haven't had a chance to fix it yet.

I tried pushing a non-code-related change; maybe it'll work this time.

amirgon · 2022-01-28T22:55:24Z

@embeddedt I've update lv_micropython, fixed conflicts on the javascript branch, all GitHub action completed, cleared browser's cache... but I still see the older version of the simulator (v1.17 instead of v1.18).
What am I missing?

embeddedt · 2022-01-28T23:52:09Z

I've finally discovered that GitHub Pages has been failing to rebuild the sim repository since mid-December due to some submodule-related issue with the v6 version of MicroPython. I should have it working again in a couple of minutes.

amirgon · 2022-01-29T00:02:23Z

I should have it working again in a couple of minutes.

Simulator shows v1.18 now! Thanks.

amirgon · 2022-01-29T20:22:05Z

@embeddedt I suspect there is still some deployment problem.
I made a fix to frozen modules and there are some problems with the online simulator.
For example, this hangs on the simulator, but works on the unix port (on latest lv_micropython).

I'm seeing some errors on Chrome Devtools, I'm not sure if they are related:

Aborted(Assertion failed: The call to mp_js_do_str is running asynchronously. If this was intended, add the async option to the ccall/cwrap call.)
Module.printErr @ lvgl_mp.js:38
abort @ lvgl_mp.js:1591
assert @ lvgl_mp.js:788
ccall @ lvgl_mp.js:858
(anonymous) @ lvgl_mp.js:873
decompressScript @ lvgl.html:67
window.startRunning @ lvgl.html:100
(anonymous) @ lvgl_mp.js:48
setTimeout (async)
mainProgram @ lvgl_mp.js:48
doRun @ lvgl_mp.js:9913
run @ lvgl_mp.js:9930
runCaller @ lvgl_mp.js:9872
removeRunDependency @ lvgl_mp.js:1572
receiveInstance @ lvgl_mp.js:1734
receiveInstantiationResult @ lvgl_mp.js:1751
Promise.then (async)
(anonymous) @ lvgl_mp.js:1780
Promise.then (async)
instantiateAsync @ lvgl_mp.js:1777
createWasm @ lvgl_mp.js:1809
(anonymous) @ lvgl_mp.js:9302
lvgl_mp.js:1599 Uncaught RuntimeError: Aborted(Assertion failed: The call to mp_js_do_str is running asynchronously. If this was intended, add the async option to the ccall/cwrap call.)
    at abort (lvgl_mp.js:1599:11)
    at assert (lvgl_mp.js:788:5)
    at ccall (lvgl_mp.js:858:5)
    at lvgl_mp.js:873:12
    at decompressScript (lvgl.html:67:4)
    at window.startRunning (lvgl.html:100:5)
    at lvgl_mp.js:48:27
abort @ lvgl_mp.js:1599
assert @ lvgl_mp.js:788
ccall @ lvgl_mp.js:858
(anonymous) @ lvgl_mp.js:873
decompressScript @ lvgl.html:67
window.startRunning @ lvgl.html:100
(anonymous) @ lvgl_mp.js:48
setTimeout (async)
mainProgram @ lvgl_mp.js:48
doRun @ lvgl_mp.js:9913
run @ lvgl_mp.js:9930
runCaller @ lvgl_mp.js:9872
removeRunDependency @ lvgl_mp.js:1572
receiveInstance @ lvgl_mp.js:1734
receiveInstantiationResult @ lvgl_mp.js:1751
Promise.then (async)
(anonymous) @ lvgl_mp.js:1780
Promise.then (async)
instantiateAsync @ lvgl_mp.js:1777
createWasm @ lvgl_mp.js:1809
(anonymous) @ lvgl_mp.js:9302
lvgl_mp.js:38 user callback triggered after application aborted.  Ignoring.
Module.printErr @ lvgl_mp.js:38
callUserCallback @ lvgl_mp.js:4621
(anonymous) @ lvgl_mp.js:4644
setTimeout (async)
safeSetTimeout @ lvgl_mp.js:4642
(anonymous) @ lvgl_mp.js:7817
handleSleep @ lvgl_mp.js:8744
_emscripten_scan_registers @ lvgl_mp.js:7812
imports.<computed> @ lvgl_mp.js:8630
$gc_collect @ firmware.wasm:0x100809
$py_gc_collect @ firmware.wasm:0xbae7f
$fun_builtin_0_call @ firmware.wasm:0x75104
$mp_call_method_n_kw @ firmware.wasm:0x534ee
$dynCall_iiii @ firmware.wasm:0x57ee80
ret.<computed> @ lvgl_mp.js:8666
(anonymous) @ lvgl_mp.js:1643
invoke_iiii @ lvgl_mp.js:9578
imports.<computed> @ lvgl_mp.js:8630
$mp_execute_bytecode @ firmware.wasm:0xcda40
$fun_bc_call @ firmware.wasm:0x76083
$mp_call_function_0 @ firmware.wasm:0x52f0d
$dynCall_ii @ firmware.wasm:0x57eb6e
ret.<computed> @ lvgl_mp.js:8666
(anonymous) @ lvgl_mp.js:1643
invoke_ii @ lvgl_mp.js:9512
imports.<computed> @ lvgl_mp.js:8630
$do_str @ firmware.wasm:0xffae9
$mp_js_do_str @ firmware.wasm:0x100509
ret.<computed> @ lvgl_mp.js:8666
(anonymous) @ lvgl_mp.js:1643
ccall @ lvgl_mp.js:845
(anonymous) @ lvgl_mp.js:873
decompressScript @ lvgl.html:67
window.startRunning @ lvgl.html:100
(anonymous) @ lvgl_mp.js:48
setTimeout (async)
mainProgram @ lvgl_mp.js:48
doRun @ lvgl_mp.js:9913
run @ lvgl_mp.js:9930
runCaller @ lvgl_mp.js:9872
removeRunDependency @ lvgl_mp.js:1572
receiveInstance @ lvgl_mp.js:1734
receiveInstantiationResult @ lvgl_mp.js:1751
Promise.then (async)
(anonymous) @ lvgl_mp.js:1780
Promise.then (async)
instantiateAsync @ lvgl_mp.js:1777
createWasm @ lvgl_mp.js:1809
(anonymous) @ lvgl_mp.js:9302
lvgl.html:29 Uncaught TypeError: Illegal invocation
    at HTMLDocument.document.querySelector (lvgl.html:29:12)
    at <anonymous>:3:32
    at <anonymous>:53:7

Related: lvgl/lvgl#1320 (comment)

embeddedt · 2022-01-29T21:34:02Z

It was a simulator-specific issue (not related to the 1.18 update). I've fixed it now.

amirgon · 2022-01-29T21:43:11Z

I've fixed it now

It works now! Thanks.

kisvegabor · 2022-05-28T11:20:46Z

I'm cleaning up the old pinned issues.

This one is already quite long so I suggest opening a new more targeted issue for the remaining ideas.

amirgon · 2022-05-28T20:29:12Z

I still think it's best to host SnippetBin backend on LVGL server instead of Heroku (although this wasn't a blocker so far).
I'm Ok with closing this issue.

kisvegabor · 2022-05-30T09:51:57Z

As I mentioned earlier, it'd be possible to build a service around the "online editor" concept but our (business) focus is now on SquareLine.

Ok, so I close it now. Please open a new issue(s), if something related comes up.

embeddedt · 2022-06-06T17:27:35Z

@amirgon I am doing some refactoring/rewriting of the simulator frontend to make it cleaner and easier to maintain. Currently I have all features implemented again except the revision history slider, since the logic for it is a bit complicated. Do you use it often/do you think it's necessary? If you think it's worth keeping, I will add it back.

amirgon · 2022-06-07T19:37:50Z

Do you use it often/do you think it's necessary? If you think it's worth keeping, I will add it back.

I'm using it from time to time. I'm not sure if others do.

The snippetbin backend supports it by maintaining everything in a git repository.
In my opinion it's a nice feature and too bad to throw it away just because of some frontend improvements.

Can't you simply keep the slider we have today? It doesn't have to look pretty as long as it's functional.

amirgon · 2022-07-09T20:49:21Z

@embeddedt The javascript merge workflow fails, but I'm not sure why.
I tried checking out lvgl_javascript_v8 locally and merging master to it, but git doesn't report any merge conflicts. Why did the workflow fail if there are no merge conflicts? Am I doing something wrong?

embeddedt · 2022-07-09T22:44:21Z

I'm not sure. I know there were recently efforts to change the merge algorithm in Git, so it's possible that your local version does merges slightly differently. I'd just push a manual merge this time. I can do it if you'd prefer.

amirgon · 2022-08-29T21:35:14Z

@embeddedt Could you add a link to v9 in https://sim.lvgl.io/ ?
btw, where is this index file stored? Is it in GitHub or on some web server?

embeddedt · 2022-08-29T21:48:11Z

Updated.

https://github.com/lvgl/sim/blob/master/index.html

embeddedt · 2022-09-16T12:44:36Z

FYI, GitHub announced that they also updated their merge algorithm, so the inconsistency between a local machine and GitHub when merging is hopefully a thing of the past.

amirgon · 2022-09-16T20:06:24Z

FYI, GitHub announced that they also updated their merge algorithm, so the inconsistency between a local machine and GitHub when merging is hopefully a thing of the past.

Interesting!
Thanks for the update.

amirgon · 2022-11-04T23:04:28Z

@embeddedt any idea why the javascript port build failed here?

Run benc-uk/workflow-dispatch@v1
🏃 Workflow Dispatch Action v1.2.1
🔎 Found workflow, id: 31073294, name: Build Javascript v9 port, path: .github/workflows/js-port-v9.yml
🚀 Calling GitHub API to dispatch workflow...
Error: No ref found for:

embeddedt · 2022-11-05T17:57:24Z

I have no idea; that is a new error. I have just committed a typo fix to make the CI run; let's see if it occurs again.

EDIT: Seems to be benc-uk/workflow-dispatch#50; I've applied the workaround described in that issue.

EDIT 2: The error this time was a permission error because the bot is not allowed to modify workflow files (which it would do by merging the commit which added the workaround 😆). That error should not occur again.

amirgon · 2022-11-05T21:04:54Z

EDIT: Seems to be benc-uk/workflow-dispatch#50; I've applied the workaround described in that issue.

EDIT 2: The error this time was a permission error because the bot is not allowed to modify workflow files (which it would do by merging the commit which added the workaround laughing). That error should not occur again.

Looks ok now. Thanks!

amirgon · 2022-12-19T22:18:22Z

@embeddedt Another problem, looks like some permissions issue?

https://github.com/lvgl/lv_micropython/actions/runs/3734837215/jobs/6337366663

embeddedt · 2022-12-20T16:22:52Z

Like last time it's because commits that touch the workflow files need to be merged by one of us. I have just done the merge manually.

embeddedt added enhancement labels Dec 22, 2019

This comment has been minimized.

Sign in to view

embeddedt mentioned this issue Dec 22, 2019

Convert Micropython to JavaScript in order to create an online simulator #792

Closed

5 tasks

stale bot added the stale label Jan 17, 2020

embeddedt added pinned Not closed automatically and removed stale labels Jan 17, 2020

lvgl deleted a comment from stale bot Jan 17, 2020

embeddedt added a commit to lvgl/lv_micropython that referenced this issue Jan 8, 2022

Javascript: Enable f-strings in mpconfigport.h

ace6afc

Related: lvgl/lvgl#1320 (comment)

embeddedt added a commit to lvgl/lv_micropython that referenced this issue Jan 29, 2022

Add proper async support for user script, not just the REPL

9f0d779

Related: lvgl/lvgl#1320 (comment)

kisvegabor closed this as completed May 30, 2022

Improve the MicroPython simulator #1320

Improve the MicroPython simulator #1320

Comments

embeddedt commented Dec 22, 2019 • edited

This comment has been minimized.

amirgon commented Dec 22, 2019

puzrin commented Dec 26, 2019

embeddedt commented Dec 26, 2019 • edited

amirgon commented Jan 17, 2020

embeddedt commented Jan 17, 2020

amirgon commented Jan 17, 2020

kisvegabor commented Jan 20, 2020

embeddedt commented Jan 20, 2020

kisvegabor commented Jan 21, 2020

embeddedt commented Feb 9, 2020

embeddedt commented Feb 9, 2020

embeddedt commented Feb 9, 2020

kisvegabor commented Feb 10, 2020

amirgon commented Feb 10, 2020 via email

embeddedt commented Feb 10, 2020

amirgon commented Feb 14, 2020 • edited

embeddedt commented Feb 14, 2020

embeddedt commented Feb 15, 2020

kisvegabor commented Feb 15, 2020 • edited

embeddedt commented Feb 15, 2020

embeddedt commented Feb 15, 2020

amirgon commented Feb 15, 2020 • edited

EDIT

kisvegabor commented Jan 8, 2022 • edited

embeddedt commented Jan 8, 2022

kisvegabor commented Jan 10, 2022

amirgon commented Jan 10, 2022

embeddedt commented Jan 10, 2022 • edited

amirgon commented Jan 28, 2022

embeddedt commented Jan 28, 2022

amirgon commented Jan 29, 2022

amirgon commented Jan 29, 2022 • edited

embeddedt commented Jan 29, 2022 • edited

amirgon commented Jan 29, 2022

kisvegabor commented May 28, 2022

amirgon commented May 28, 2022

kisvegabor commented May 30, 2022 • edited

embeddedt commented Jun 6, 2022

amirgon commented Jun 7, 2022

amirgon commented Jul 9, 2022

embeddedt commented Jul 9, 2022

amirgon commented Aug 29, 2022

embeddedt commented Aug 29, 2022

embeddedt commented Sep 16, 2022

amirgon commented Sep 16, 2022

amirgon commented Nov 4, 2022

embeddedt commented Nov 5, 2022 • edited

amirgon commented Nov 5, 2022

amirgon commented Dec 19, 2022

embeddedt commented Dec 20, 2022

embeddedt commented Dec 22, 2019 •

edited

embeddedt commented Dec 26, 2019 •

edited

amirgon commented Feb 14, 2020 •

edited

kisvegabor commented Feb 15, 2020 •

edited

amirgon commented Feb 15, 2020 •

edited

kisvegabor commented Jan 8, 2022 •

edited

embeddedt commented Jan 10, 2022 •

edited

amirgon commented Jan 29, 2022 •

edited

embeddedt commented Jan 29, 2022 •

edited

kisvegabor commented May 30, 2022 •

edited

embeddedt commented Nov 5, 2022 •

edited