Add "share sketch" functionality to demo editor #205

jvfe · 2021-11-10T14:42:38Z

Closes Feature ideas... URL encoding like Prof. Esperança does #143
Implements functionality specified in this comment
Inspired by similar solutions done in hydra and skulpt, this adds the following functionality:
- A "Share" button to the demo editor, which creates a shareable URL to the current sketch, copies it to the clipboard and reruns the sketch.
- This basically encodes the current editor code in base64 and implements a new URL parameter to contain the sketch (?sketch=).
- Now when the page is loaded, target_sketch.js checks for the presence of this parameter and changes the sketch accordingly, decoding the sketch param into runnable pyp5js code.
- The whole code for this functionality is included in a new Javascript file, share.js, which is loaded at the beginning of index.html.
I also took the liberty of separating HTML, CSS and JS in the demo editor, as I believe this will make future work much easier - separation of concerns does help a lot.
Test it here
Example of a shared sketch URL
Now for some problems with this current approach:
- While it is, essentially, the same approach that's used in hydra, hydra code usually contains less characters than pyp5js.
- Therefore, the current format leads to very large URLs, especially with larger sketches, which aren't very nice to look at. I don't really have any ideas at the moment on how to solve this problem so I'm all ears.

Now pyodide is loaded with the shared sketch instead of always defaulting to the base sketch

Increases the separation of concerns and makes it easier to implement new features and fixes.

Should avoid issues with GH's domain

berinhard

@jvfe the usability of the share button is amazing!!!! Thanks for putting effort on that. This will be extremely helpful for teachers to user the demo editor to share their experiments with students, right @villares? Anyway, I left a few comments on small changes to be done in this PR.

Here's another test and it's working nice.

@villares can you experiment on @jvfe demo editor and give us your feedback about this? I think you have already faced more usage scenarios than I can imagine =)

berinhard · 2021-11-10T15:42:57Z

docs/pyodide/target/target_sketch.js

-    ellipse(100, 100, diameter, diameter)
-
-`;
+let userCode = checkForSketch();


We shouldn't change the target_sketch.js to call this function because this should be exclusively of the demo editor. My idea would be for the JS from the demo editor to be call this checkForSketch function and update both sketch-holder and the IDE code with that.

I know that this can prevent the sketch from automatically load itself, but I don't see a problem to request the user to click on the Run button to see the sketch running.

Actually, I fell that we could update this line to just be let userCode = "". This hard coded user code is probably a legacy from the very first implementations of pyodide mode

For sure, I'll send this change, had thought of removing it as well but tried to keep things as they were for the most part.

berinhard · 2021-11-10T15:44:35Z

docs/pyodide/afterBody.js

@@ -0,0 +1,77 @@
+const initialSketch = checkForSketch();


Nice touch on moving this to a separated js file.

Since we're using jQuery here, shouldn't we wrap this whole Javascript inside of a $(document).ready() callback?

Going from what I can see in view_sketch.html the editor config should be outside of this call.
Either way, I'll send a commit changing this, as most of the code in afterBody should be included in this call.

Done in ba89c38 but I used the vanilla JS "DOMContentLoaded" which should have the same effect.

berinhard · 2021-11-10T15:47:26Z

docs/pyodide/index.html

+  <script>hljs.initHighlightingOnLoad();</script>
+
+  <link rel="stylesheet" href="styles.css">
+</head>


It would be nice to have the docs/pyodide/index.html.template updated as well because this index.html is generated using that template with the make refresh_demo command.

Think I did it in d1cf2e2 but I might've missed something.

Now there is no base sketch to be loaded together with the page.

Updates the demo editor template with the changes implemented when the share sketch button was added

Updates the HTML and CSS for the pyodide demo to be similar to the local server, such as buttons and code editor functions. - Add collapse button - Add styling from basscss - Remove unused dependencies, such as jquery and highlightjs

jvfe · 2021-12-09T17:28:14Z

Hi! Was taking a look at my open pull requests and something I wanted to do but totally forgot in this one was update the HTML/CSS of the page so it functions like the local server - better looking buttons, collapsible code editor, etc - so that's what
686fac9 is for, it doesn't change the share sketch functionality. If it would be better to include it in another PR just say so, seemed better to include it in this since the changes are pretty minor and I was already working on the demo editor.

Edit: I believe the failing CI is unrelated to my changes.

berinhard

Thanks a lot @jvfe for this contribution. Now this PR is way more focused only in the demo editor and, from what I tested locally, it's working as expected. This is a HUGE feature to have =)

villares · 2021-12-24T19:14:02Z

Thank you so much @jvfe !

jvfe added 5 commits November 10, 2021 07:57

Add base64 based URL redirectioning

d36727f

Check for shared sketch in target_sketch

29506ad

Now pyodide is loaded with the shared sketch instead of always defaulting to the base sketch

Copy sketch URL instead of redirecting to page

64e4fea

Separate code, layout and styles for demo editor

7a91fad

Increases the separation of concerns and makes it easier to implement new features and fixes.

fix: Change baseURL to use pathname as well

905e08f

Should avoid issues with GH's domain

berinhard requested changes Nov 10, 2021

View reviewed changes

jvfe added 4 commits November 10, 2021 14:18

Change userCode to be blank in demo editor

45c5059

Now there is no base sketch to be loaded together with the page.

Wrap afterBody.js code in a DOMContentLoaded call

ba89c38

Update demo template to account for shareBtn

d1cf2e2

Updates the demo editor template with the changes implemented when the share sketch button was added

Update demo editor to be similar to local server

686fac9

Updates the HTML and CSS for the pyodide demo to be similar to the local server, such as buttons and code editor functions. - Add collapse button - Add styling from basscss - Remove unused dependencies, such as jquery and highlightjs

berinhard approved these changes Dec 9, 2021

View reviewed changes

berinhard merged commit 3b9902e into berinhard:develop Dec 9, 2021

jvfe deleted the feat/issue_143 branch December 9, 2021 22:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "share sketch" functionality to demo editor #205

Add "share sketch" functionality to demo editor #205

jvfe commented Nov 10, 2021 •

edited

Loading

berinhard left a comment •

edited

Loading

berinhard Nov 10, 2021

berinhard Nov 10, 2021

jvfe Nov 10, 2021

berinhard Nov 10, 2021

berinhard Nov 10, 2021

jvfe Nov 10, 2021

jvfe Nov 10, 2021

berinhard Nov 10, 2021

jvfe Nov 10, 2021

jvfe commented Dec 9, 2021 •

edited

Loading

berinhard left a comment

villares commented Dec 24, 2021

Add "share sketch" functionality to demo editor #205

Add "share sketch" functionality to demo editor #205

Conversation

jvfe commented Nov 10, 2021 • edited Loading

berinhard left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jvfe commented Dec 9, 2021 • edited Loading

berinhard left a comment

Choose a reason for hiding this comment

villares commented Dec 24, 2021

jvfe commented Nov 10, 2021 •

edited

Loading

berinhard left a comment •

edited

Loading

jvfe commented Dec 9, 2021 •

edited

Loading