Merge pull request #494 from shorepine/tutorials

deploying Tulip Web

Author: bwhitman

tulip/shared/py/tulip.py

@@ -514,6 +514,17 @@ def exists(fn):
     return True
 
 
+def download_and_run(name):
+    if board()=="WEB":
+        import world_web as world
+    else:
+        import world
+    def rt():
+        run(name)
+    world.download(name,done_cb=rt)
+    print("Downloading '%s'... please wait..." % (name))
+
+
 # reloads, runs and cleans up a Tulip "app"
 # Some ways to run things
 # (1) run('module') # imports module.py in your cwd

tulip/web/static/amyrepl.css

@@ -51,7 +51,7 @@ canvas {
 }
 .cm-s-lucario .CodeMirror-gutters { color: #002b36; }
 .cm-s-lucario .CodeMirror-cursor { border-left: solid thin #E6C845; }
-.cm-s-lucario .CodeMirror-linenumber { color: #f8f8f2; }
+.cm-s-lucario .CodeMirror-linenumber { color: #a8a8a2; }
 .cm-s-lucario .CodeMirror-selected { background: #243443; }
 .cm-s-lucario .CodeMirror-line::selection, .cm-s-lucario .CodeMirror-line > span::selection, .cm-s-lucario .CodeMirror-line > span > span::selection { background: #243443; }
 .cm-s-lucario .CodeMirror-line::-moz-selection, .cm-s-lucario .CodeMirror-line > span::-moz-selection, .cm-s-lucario .CodeMirror-line > span > span::-moz-selection { background: #243443; }

tulip/web/static/examples.js

@@ -0,0 +1,89 @@
+// examples.js
+const example_snippets = [{
+    d:"Download and run a <b>pattern sequencer</b>",
+    c:`
+tulip.download_and_run('tracks')
+
+`},{
+    d:"Run a drum machine",
+    c:`
+run('drums')
+`},{
+    d:"Set up a MIDI channel to play a piano",
+    c:`
+midi.config.reset()
+midi.config.add_synth(synth.PatchSynth(6, 256))
+# Now set your MIDI device on this page and play a note!
+`},{
+    d:"Move a sprite around the screen with the keyboard",
+    c:`
+# Use control-Q to exit
+run("planet_boing")
+`},{
+    d:"Chat on the Tulip World BBS",
+    c:`
+# Set your own username!!
+world.username="anonymous"
+run('worldui')
+`},{
+    d:"Play a complex FM synthesis example",
+    c:`
+run('xanadu')
+`},{
+    d:"Scrolling backgrounds",
+    c:`
+# Use control-Q to exit
+run('parallax')
+`},{
+    d:"Buttons, sliders and entry widgets",
+    c:`
+run("buttons")
+`},{
+    d:"Load a .wav sample and play a chord",
+    c:`
+# some stuart dempster in your browser
+import music
+amy.load_sample('../sys/ex/bcla3.wav', patch=50)
+s = synth.OscSynth(wave=amy.PCM, patch=50)
+for i,note in enumerate(music.Chord('F:min7').midinotes()):
+    s.note_on(note+24, 1, time=i*4000)
+    s.note_off(note+24, time=20000)
+`},{
+    d:"Load a small holiday animation with music",
+    c:`
+tulip.download_and_run('xmas')
+`},{
+    d:"Construct a custom FM synth and play a progression",
+    c:`
+import midi, music
+# WOOD PIANO amy setup, 4-op FM synth
+
+midi.config.reset()
+amy.start_store_patch()
+amy.send(osc=1, bp0="0,1,5300,0,0,0", phase=0.25, ratio=1, amp="0.3,0,0,1,0,0")
+amy.send(osc=2, bp0="0,1,3400,0,0,0", phase=0.25, ratio=0.5, amp="1.68,0,0,1,0,0")
+amy.send(osc=3, bp0="0,1,6700,0,0,0", phase=0.25, ratio=1, amp="0.23,0,0,1,0,0")
+amy.send(osc=4, bp0="0,1,3400,0,0,0", phase=0.25, ratio=0.5, amp="1.68,0,0,1,0,0")
+amy.send(osc=0, wave=amy.ALGO, algorithm=5, algo_source="1,2,3,4", bp0="0,1,147,0", bp1="0,1,179,1", freq="0,1,0,0,1,1")
+amy.stop_store_patch(1024)
+
+s = synth.PatchSynth(8, 1024)
+
+p = music.Progression(["I", "vi", "IV", "V"], music.Key("E:maj"))
+chord_len = 2000
+note_len = 500
+start = 1000
+for x,chord in enumerate(p.chords):
+    # Play a chord
+    chord_time = (x*chord_len)
+    for i,note in enumerate(chord.midinotes()):
+        s.note_on(note-12, 1, time=start+chord_time)
+        s.note_off(note-12, time=start+chord_time+chord_len-100)
+    # And a little arp over it
+    for i,note in enumerate(chord.midinotes()):
+        note_time = (x*chord_len)+(i*note_len)
+        s.note_on(note, 1, time=start+note_time)
+        s.note_off(note, time=start+note_time+100)
+`
+}
+]

tulip/web/static/index.html

@@ -45,6 +45,7 @@
       <!-- These filenames are replaced by the build system -->
       <script src="TULIPCCMJS" type="module"></script>
       <script type="text/javascript" src="AMYJS"></script>
+      <script type="text/javascript" src="examples.js"></script>
       <script type="text/javascript" src="spss.js"></script>
 
       <!-- Matomo -->
@@ -53,12 +54,12 @@
          /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
          _paq.push(['trackPageView']);
          _paq.push(['enableLinkTracking']);
-         (function() { var u="https://tulipcomputer.matomo.cloud/";
+         try {(function() { var u="https://tulipcomputer.matomo.cloud/";
           _paq.push(['setTrackerUrl', u+'matomo.php']);
           _paq.push(['setSiteId', '1']);
           var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
           g.async=true; g.src='https://cdn.matomo.cloud/tulipcomputer.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
-        })();
+        })()} catch(err) { console.log("matomo CORS error"); }
       </script>
   </head>
 
@@ -128,9 +129,6 @@ <h1><A HREF="https://tulip.computer/"><img src="/img/favicon.png"/ width=40></A>
           <button class="btn btn-sm btn-primary" type="button" id="showhideeditor" data-bs-toggle="collapse" data-bs-target="#collapseEditor" aria-expanded="true" aria-controls="collapseEditor" onclick="show_editor();">
             Show code editor
           </button>
-          <button class="btn btn-sm btn-warning" type="button" id="showhidetutorials" data-bs-toggle="collapse" data-bs-target="#collapseTutorials" aria-expanded="true" aria-controls="collapseTutorials" onclick="show_tutorials();">
-            Show tutorials
-          </button>
         </p>
 
 
@@ -173,13 +171,6 @@ <h1><A HREF="https://tulip.computer/"><img src="/img/favicon.png"/ width=40></A>
           </div>
         </div>
 
-        <div class="tutorials collapse" id="collapseTutorials">
-          <button type="button" class="btn btn-sm btn-primary float-end" onclick="hide_tutorials();"
-            data-bs-toggle="collapse" title="Hide tutorials" data-toggle="tooltip" data-placement="top"  data-bs-target="#collapseTutorials" aria-expanded="true" aria-controls="collapseTutorials">
-            Hide
-          </button>
-        </div>
-
         <!-- Fake textarea to capture keystrokes to the SDL canvas -->
         <textarea id="textinput" autocapitalize="off" rows="1"></textarea>
 
@@ -204,8 +195,12 @@ <h1><A HREF="https://tulip.computer/"><img src="/img/favicon.png"/ width=40></A>
           </div>
         </form>
 
-        <div id="tutorials" class="pt-4">
+        <!-- Tutorial pills block -->
+        <div class="pt-4">
+          <h6>Try some examples:</h6>
+          <div id="tutorials"></div>
         </div>
+
       </div>
     </div>
 

tulip/web/static/spss.js

@@ -7,6 +7,7 @@ var midiOutputDevice = null;
 var midiInputDevice = null;
 var editor = null;
 var treeView = null;
+var editor_shown = false;
 
 // Once AMY module is loaded, register its functions and start AMY (not yet audio, you need to click for that)
 amyModule().then(async function(am) {
@@ -320,89 +321,43 @@ async function tulip_world_upload_file(pwd, filename, username, description) {
         body: data,
     });
 }
-async function show_tutorials() {
-    document.getElementById('showhidetutorials').style.display='none'; 
-    document.getElementById('canvas').classList.remove("canvas-solo");
-    document.getElementById('canvas').classList.add("canvas-editor");
-}
-
-async function hide_tutorials() {
-    document.getElementById('showhidetutorials').style.display='';
-    document.getElementById('canvas').classList.remove("canvas-editor");
-    document.getElementById('canvas').classList.add("canvas-solo");
-}
-
 
 async function show_editor() {
     document.getElementById('showhideeditor').style.display='none'; 
     if(editor) editor.refresh();
     document.getElementById('canvas').classList.remove("canvas-solo");
     document.getElementById('canvas').classList.add("canvas-editor");
+    editor_shown = true;
 }
 
 async function hide_editor() {
     document.getElementById('showhideeditor').style.display='';
     document.getElementById('canvas').classList.remove("canvas-editor");
     document.getElementById('canvas').classList.add("canvas-solo");
+    editor_shown = false;
 }
 
-const example_snippets = [{
-    description:"Download and run a <b>pattern sequencer</b>",
-    code:`
-def rt():
-    run('tracks')
-world.download('tracks',done_cb=rt)
-`},{
-    description:"Run a drum machine",
-    code:`
-run('drums')
-`},{
-    description:"Set up a MIDI channel to play a piano",
-    code:`
-midi.config.reset()
-midi.config.add_synth(synth.PatchSynth(6, 256))
-`},{
-    description:"Move a sprite around the screen with the keyboard",
-    code:`
-run("planet_boing")
-`},{
-    description:"Chat on the Tulip World BBS",
-    code:`
-world.username="anonymous"
-run('worldui')
-`},{
-    description:"Play a complex FM synthesis example",
-    code:`
-run('xanadu')
-`},{
-    description:"Scrolling backgrounds",
-    code:`
-run('parallax')
-`},{
-    description:"Buttons, sliders and entry widgets",
-    code:`
-run("buttons")
-`}
-]
+
 async function run_snippet(i) {
-    var code = example_snippets[i].code;
-    var ti = document.getElementById('textinput');
-    // maybe send a keydown message to the textinput instead
-    //for (let i = 0; i < code.length; i++) {
-        //const event = new KeyboardEvent('keydown', {'a'});
-        //ti.dispatchEvent(event);
-        //mp.runPythonAsync('tulip.key_send('+code.charCodeAt(i).toString()+')');
-    //}
-    await mp.runPythonAsync("print(\"\"\"" + code + "\"\"\")");
-    runCodeBlock(code);
+    var code = example_snippets[i].c.trimStart();
+    if(!editor_shown) {
+        var editorElement = document.getElementById('collapseEditor');
+        var bsCollapse = new bootstrap.Collapse(editorElement, { toggle: true });
+        show_editor();
+    }
+    editor.setValue(code);
+    setTimeout(function () { editor.save() }, 100);
+    setTimeout(function () { editor.refresh() }, 250);
+    setTimeout(function () { window.scrollTo(0,0) }, 300);
+    runEditorBlock();
 }
 
 async function fill_examples() {
     colors = ['bg-primary', 'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning text-dark', 'bg-info text-dark', 'bg-light text-dark', 'bg-dark'];
     h = '';
     var i = 0;
     for (i=0;i<example_snippets.length;i++) { 
-        h += ' <a href="#" onclick="run_snippet('+i.toString()+');"><span class="badge rounded-pill ' + colors[i%colors.length] + '">'+example_snippets[i].description+'</span></a>';
+        h += ' <a href="#" onclick="run_snippet('+i.toString()+');"><span class="badge rounded-pill ' + colors[i%colors.length] + '">'+example_snippets[i].d+'</span></a>';
     } 
     document.getElementById('tutorials').innerHTML = h;