Preview mode for the script

[jkrems]

This is super hacky but I thought it might become handy for some people: A way to preview the result of the script, at least roughly. Currently only tested with the example script in the repo. No fancy camera controls or light effects. But it allows editing the Python script, reloading the page, and seeing it in action.

Live demo: https://jkrems.dev/xmastree2020/preview/

[thomas-davignon]

Hi I followed the link, but I can't edit the script... :(

[mreithub]

Hi, I've been working on something similar - but wanted a fully web-based way for users to edit things (similar to jsfiddle) and found trinket.io.
Feel free to steal some of my code (e.g the matrix rotation stuff etc):

https://trinket.io/python/61921f843e

I've only gotten as far as to draw the dot cloud as well as do some simple matrix rotations
(I've run out of time for today so I'll post this here as-is).

current status:

• quick'n'dirty snapshot (I hope the code is somewhat readable)
• Tree class stores the dot cloud (each dot is a Vector3d instance)
• Tree().rotate(zangle=123) returns the dot cloud after rotating it by zangle degrees around the z-axis
  TODO maybe return a new, rotated Tree instance instead (to allow method chaining)
• I've tried to run the drawTree() method repeatedly (also calling screen.clearscreen()) but it doesn't work for some reason
  and I've run out of time to investigate further :)
  haven't worked with the turtle lib yet (and I'm kinda abusing it - a lower level drawing lib would be sufficient, but turtle is what's supported on this site and is easy to use)
• re-running things causes flickering (so you can't really see the animation unless you focus on single dots on the edge of the tree)
• everything in helpercode.py only relies on builtin python3 stuff and should be reusable
• the "turtle" is still visible - this should be fixable
• if you disable the turtle.on() and .off() calls, you can see the lines - i.e. the 'wiring' of the led strips
  (assuming their addressing matches their position on the led strip)
  this also makes it easier to see the rotation
• no colors yet - I was planning on doing the tree display and rotation first (i.e. the TreeSimulator™️ :) ) and only add a simple animation, share the link and let users play with it and try out their own animations

Note: I'm looking for input but don't wanna hijack the conversation in this pull request - I'll maybe open an issue later to have a separate thread if people are interested.
Just wanted to post this here in case @jkrems finds some code they wanna include in their solution ;)

[jkrems]

Hi I followed the link, but I can't edit the script... :(

Sorry for the confusion there. Right now the text on the site isn't editable but the way to try out changes would be:

1. Clone the repo.
2. Run python3 -m http.server 8000 in the checkout directory.
3. Open http://localhost:3000/preview.
4. Change xmaslights-spin.py and reload the browser.

Pretty manual but it kind of works (and at least faster than to wait for Matt to run it on a real tree).

I didn't have time to make live editing in the browser work last night, so I just added a readonly to the <textarea> to reduce the confusion a little bit.

Hi, I've been working on something similar - but wanted a fully web-based way for users to edit things (similar to jsfiddle) and found trinket.io.

Thanks for sharing, @mreithub! That looks pretty neat. I think in the background both solutions use the same "guts" (Skulpt). I had briefly looked at trinket as the editing solution but I couldn't (quickly) find a way to render the 3D tree or plug a trinket into custom runtime code. And without the custom runtime, it seemed hard to make the real tree scripts work 1:1 in the browser. But I think having an at least partially copy&paste-able, simpler fiddle would be awesome!

[jkrems]

Pushed some cleanup:

1. It's now possible to edit the script in the browser.
2. When editing, it updates the # fragment in the URL to contain the script source. The resulting URL should be somewhat sharable.
3. To see the result of an edit reflected in the render, it's necessary to click ▶.
4. There's no a checkbox to rotate the rendered tree to see it from other directions. It's a poor replacement for mouse camera control but it's a start.

Example link for a slight color change

[Diggsey]

Not sure why, but this simulator produces random results for my fire script. The other simulators work fine, eg. #5

[Valtay]

Hi, I've been working on something similar - but wanted a fully web-based way for users to edit things (similar to jsfiddle) and found trinket.io.

Hi, mreithub, I've adapted the example to your code, and tried to allow for both hardware and simulation target. I'm really unsure as to whether I got the front/back right.
https://trinket.io/python/01af695133