editor update

villares · Oct 28, 2024 · afc3311 · afc3311
1 parent f92bb5c
commit afc3311
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 21 deletions.
diff --git a/pyp5js/py5mode/index.html b/pyp5js/py5mode/index.html
@@ -7,7 +7,7 @@
 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>pyp5js with Pyodide demo (py5mode)</title>
+  <title>pyp5js with Pyodide Demo</title>
 
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
   <script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
@@ -22,7 +22,7 @@
     integrity="sha512-S4i/WUGRs22+8rjUVu4kBjfNuBNp8GVsgcK2lbaFdws4q6TF3Nd00LxqnHhuxS9iVDfNcUh0h6OxFUMP5DBD+g=="
     crossorigin="anonymous"></script>
   <script src="share.js"></script>
-
+  <script src="startpanel.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/basscss.min.css">
   <link rel="stylesheet" href="styles.css">
 </head>
@@ -62,8 +62,11 @@
       <!-- You sketch will go here! -->
     </div>
   </div>
+  <div id="ScreenConsole"></div>
   <div>
-    <p style="font-family: 'sans'; font-size:14px; margin-left: 20px;">If you execute the code but nothing is being rendered in the browser, please open your browser's console to read the error traceback (usually you can do this by pressing F12 and clicking in the Console tab).</p>
+    <!-- p style="font-family: 'sans'; font-size:14px; margin-left: 20px;">If you execute the code but nothing is being rendered in the browser,
+      please open your browser's console to read the error traceback (usually you can do this by pressing F12 and
+      clicking in the Console tab).</p -->
      <p style="background-color: #f6f8fa; font-family: 'sans'; font-size:14px; margin-left: 20px;"><a
         href="https://github.com/berinhard/pyp5js"><b>pyp5js</b></a> running on top of <a
         href="https://github.com/iodide-project/pyodide" target="_blank">pyodide</a></p>

diff --git a/pyp5js/py5mode/startpanel.js b/pyp5js/py5mode/startpanel.js
@@ -0,0 +1,68 @@
+/**
+* Screen Console
+* 2022, Guilherme Ranoya
+*
+* Just repeat the information at the browser console in a
+* <div>, whose id is "ScreenConsole"
+*
+* Use:
+* 
+* Insert this line in your <head>
+
+<script src="https://www.ranoya.com/Assets/JSLibs/ScreenConsole/startpanel.js"></script>
+
+* OR 
+*
+* Insert this entire code inside a <script> tag in your <head>
+* 
+*
+* That's it.
+*
+*/
+
+console.defaultLog = console.log.bind(console);
+console.logs = [];
+
+let screen_console_wrap = document.createElement('div');
+screen_console_wrap.setAttribute('id', 'ScreenConsoleWrap');
+document.lastChild.appendChild(screen_console_wrap);
+document.getElementById('ScreenConsoleWrap').style.position = 'fixed';
+document.getElementById('ScreenConsoleWrap').style.bottom = '0';
+document.getElementById('ScreenConsoleWrap').style.width = '100%';
+document.getElementById('ScreenConsoleWrap').style.height = '200px';
+document.getElementById('ScreenConsoleWrap').style.zIndex = '1000';
+document.getElementById('ScreenConsoleWrap').style.backgroundColor = '#FFFFFF';
+
+let console_output_title = document.createElement('div');
+console_output_title.setAttribute('id', 'ScreenConsoleTitle');
+screen_console_wrap.appendChild(console_output_title);
+document.getElementById('ScreenConsoleTitle').innerHTML = 'Console';
+document.getElementById('ScreenConsoleTitle').style.border = '1px solid grey';
+document.getElementById('ScreenConsoleTitle').style.margin = '8px';
+document.getElementById('ScreenConsoleTitle').style.marginBottom = 0;
+document.getElementById('ScreenConsoleTitle').style.padding = '8px';
+document.getElementById('ScreenConsoleTitle').style.display = 'inline-block';
+document.getElementById('ScreenConsoleTitle').style.color = 'white';
+document.getElementById('ScreenConsoleTitle').style.backgroundColor = 'grey';
+document.getElementById('ScreenConsoleTitle').style.fontFamily = 'monospace';
+
+let console_output = document.createElement('div');
+console_output.setAttribute('id', 'ScreenConsole');
+screen_console_wrap.appendChild(console_output);
+document.getElementById('ScreenConsole').style.border = '1px solid grey';
+document.getElementById('ScreenConsole').style.margin = '8px';
+document.getElementById('ScreenConsole').style.marginTop = 0;
+document.getElementById('ScreenConsole').style.padding = '8px';
+document.getElementById('ScreenConsole').style.width = 'calc(100% - 32px)';
+document.getElementById('ScreenConsole').style.height = '130px';
+document.getElementById('ScreenConsole').style.overflowY = 'scroll';
+document.getElementById('ScreenConsole').style.fontFamily = 'monospace';
+
+console.log = function () {
+    console.defaultLog.apply(console, arguments);
+    console.logs.push(Array.from(arguments));
+    document.getElementById('ScreenConsole').innerHTML += arguments[0] + '<br>';
+}
+window.onerror = function (msg, url, line) {
+    document.getElementById('ScreenConsole').innerHTML += 'Line: ' + line + '<br>' + msg + '<br>';
+}
diff --git a/pyp5js/py5mode/styles.css b/pyp5js/py5mode/styles.css
@@ -74,3 +74,10 @@ pre {
 .display-none {
   display: none;
 }
+
+#ScreenConsole {
+width: calc(100% - 60px) !important;
+}
+#text-editor {
+height: calc(100vh - 380px) !important;
+}
diff --git a/pyp5js/py5mode/target/target_sketch.js b/pyp5js/py5mode/target/target_sketch.js
@@ -1,6 +1,3 @@
-// 2023-08-11
-// TODO: Add Ratamero's console output redirection to a "on page" message.
-
 const wrapperContent = `
 # This pyp5js version is adapted to be more similar to py5 (py5coding.org)
 # by Alexandre B A Villares - https://abav.lugaralgum.com
@@ -346,8 +343,25 @@ def curve_tangent(*args):
 def begin_contour(*args):
     return _P5_INSTANCE.beginContour(*args)
 
-def begin_shape(*args):
-    return _P5_INSTANCE.beginShape(*args)
+class begin_shape():
+    def __init__(self):
+        _P5_INSTANCE.beginShape()
+
+    def __enter__(self):
+        pass
+
+    def __exit__(self,  exc_type, exc_value, exc_tb):
+        _P5_INSTANCE.endShape()
+
+class begin_closed_shape():
+    def __init__(self):
+        _P5_INSTANCE.beginShape()
+
+    def __enter__(self):
+        pass
+
+    def __exit__(self,  exc_type, exc_value, exc_tb):
+        _P5_INSTANCE.endShape(CLOSE)
 
 def bezier_vertex(*args):
     return _P5_INSTANCE.bezierVertex(*args)
@@ -406,8 +420,15 @@ def no_loop(*args):
 def loop(*args):
     return _P5_INSTANCE.loop(*args)
 
-def push(*args):
-    return _P5_INSTANCE.push(*args)
+class push():
+    def __init__(self):
+        _P5_INSTANCE.push()
+
+    def __enter__(self):
+        pass
+
+    def __exit__(self,  exc_type, exc_value, exc_tb):
+        _P5_INSTANCE.pop()
 
 def redraw(*args):
     return _P5_INSTANCE.redraw(*args)
@@ -694,12 +715,6 @@ def mag(*args):
 def remap(*args):
     return _P5_INSTANCE.map(*args)
 
-def max(*args):
-    return _P5_INSTANCE.max(*args)
-
-def min(*args):
-    return _P5_INSTANCE.min(*args)
-
 def norm(*args):
     return _P5_INSTANCE.norm(*args)
 
@@ -1145,6 +1160,10 @@ class Py5Vector:
     def mag(self):
         return self.__vector.mag()
 
+    @mag.setter   # py5 compat
+    def mag(self, mag):
+        self.set_mag(mag)
+
     @property
     def mag_sq(self):
         return self.__vector.magSq()
@@ -1153,6 +1172,13 @@ class Py5Vector:
         self.__vector.setMag(mag)
         return self
 
+    # py5 compat
+    @property
+    def norm(self):
+        n = self.copy()
+        n.normalize()
+        return n
+    
     def normalize(self):
         self.__vector.normalize()
         return self
@@ -1355,7 +1381,7 @@ class Py5Vector:
     @classmethod
     def fromAngle(cls, angle, length=1):
         # https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/src/math/p5.Vector.js
-        return Py5Vector(length * cos(angle), length * sin(angle), 0)
+        return cls(length * cos(angle), length * sin(angle), 0)
 
     @classmethod
     def fromAngles(theta, phi, length=1):
@@ -1364,13 +1390,20 @@ class Py5Vector:
         sinPhi = sin(phi)
         cosTheta = cos(theta)
         sinTheta = sin(theta)
-        return Py5Vector(length * sinTheta * sinPhi,
+        return cls(length * sinTheta * sinPhi,
                        -length * cosTheta,
                        length * sinTheta * cosPhi)
 
+    @classmethod
+    def random(cls, dim=2): # py5 compat
+        if dim == 3:
+            return cls.random3D()
+        else:
+            return cls.fromAngle(random(TWO_PI))
+
     @classmethod
     def random2D(cls):
-        return Py5Vector.fromAngle(random(TWO_PI))
+        return cls.fromAngle(random(TWO_PI))
 
     @classmethod
     def random3D(cls, dest=None):
@@ -1380,7 +1413,7 @@ class Py5Vector:
         vx = mult * cos(angle)
         vy = mult * sin(angle)
         if dest is None:
-            return Py5Vector(vx, vy, vz)
+            return cls(vx, vy, vz)
         dest.set(vx, vy, vz)
         return dest
 
@@ -1706,7 +1739,10 @@ function runCode() {
     if (window.instance) {
       window.instance.remove();
     }
-
+    let console_div = document.getElementById("ScreenConsole")
+    if (console_div != null) {
+        console_div.innerHTML = "";
+    } 
     console.log("Python execution output:");
     window.pyodide.runPython(code);
 }