Merge branch 'develop' into main

berinhard · Mar 4, 2021 · ff2355e · ff2355e
2 parents 10f2e20 + d80e94d
commit ff2355e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
     strategy:
       max-parallel: 4
       matrix:
-        os: [ubuntu-latest, macos-latest, windows-latest]
+        os: [windows-latest, ubuntu-latest, macos-latest]
         python-version: [3.6, 3.7, 3.8]
 
     steps:

diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
-## pyp5js: Python to P5.js Transcriptor
+## pyp5js: drawing with Python 3
 
 [![PyPI version](https://badge.fury.io/py/pyp5js.svg)](https://badge.fury.io/py/pyp5js)
 ![Continuous Integration](https://github.com/berinhard/pyp5js/workflows/Continuous%20Integration/badge.svg?branch=develop&event=push)
 [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/berinhard/pyp5js/tree/main)
 
 > [Processing](https://processing.org) ideas and Python 3 together with [P5.js](https://p5js.org) in the browser.
 
-Python 3 drawing in the web 🐍 🐍 🐍  Try it [here](https://berinhard.github.io/pyp5js/pyodide/)!
+Python 3 drawing in the web! Try it [here](https://berinhard.github.io/pyp5js/pyodide/)!
 
 Here's an example of a valid Python code using P5.js API:
 

diff --git a/docs/index.md b/docs/index.md
@@ -1,4 +1,4 @@
-# pyp5js: Python to P5.js Transcriptor
+## pyp5js: drawing with Python 3
 
 [![PyPI version](https://badge.fury.io/py/pyp5js.svg)](https://badge.fury.io/py/pyp5js)
 ![Continuous Integration](https://github.com/berinhard/pyp5js/workflows/Continuous%20Integration/badge.svg?branch=develop&event=push)

diff --git a/docs/pyodide/index.html b/docs/pyodide/index.html
@@ -56,8 +56,8 @@
 
           <div id="text-editor"></div>
           <div class="clearfix">
-            <input disabled id="executeBtn" class="btn rounded py1 px2 mb1" type="submit" value="Execute">
-            <input id="clearBtn" class="btn rounded py1 px2 mb1" type="submit" value="Clear">
+            <input disabled id="executeBtn" class="btn rounded py1 px2 mb1" type="submit" value="Run" title="(Ctrl/Cmd + Enter) to run the sketch">
+            <input id="clearBtn" class="btn rounded py1 px2 mb1" type="submit" value="Clear" title="(Ctrl/Cmd + .) to clear the sketch">
           </div>
       </div>
 
@@ -1256,15 +1256,28 @@
     script.onload = logOnloaded
     script.src = src
     document.head.appendChild(script)
-`
+`;
 
 let placeholder = `
 def setup():
     pass
 
 def draw():
     pass
-`
+`;
+
+const initialSketch = `
+def setup():
+    createCanvas(200, 200)
+    background(160)
+
+def draw():
+    fill("blue")
+    background(200)
+    radius = sin(frameCount / 60) * 50 + 50
+    ellipse(100, 100, radius, radius)
+`;
+
     languagePluginLoader.then(() => {
         pyodide.runPython(`
           import io, code, sys
@@ -1297,6 +1310,8 @@
     editor.session.setOptions({
       tabSize: 4,
     });
+    editor.setValue(initialSketch, -1);
+    document.getElementById("id_py_code").innerHTML = initialSketch;
 
     editor.session.on('change', function(){
       document.getElementById("id_py_code").innerHTML = editor.getSession().getValue();
@@ -1307,12 +1322,22 @@
 
     $("body").bind("keydown",keyDown);
 
+    function cleanKeyCode(e) {
+      // Shortcuts work for Ctrl or Cmd
+      if (e.ctrlKey || e.metaKey) {
+        return e.keyCode;
+      }
+    }
+
     function keyDown(e){
-        if((e.ctrlKey) && (e.keyCode == 13)){
-            runCode();
+        if (cleanKeyCode(e) === 13) {  // Ctrl + Enter to run
+          e.preventDefault();
+          $("#executeBtn").click();
+        } else if(cleanKeyCode(e) === 190){  // Ctrl + . to clear
+          e.preventDefault();
+          $("#clearBtn").click();
         }
     }
-
   </script>