deploying Tulip Web

tulip/web/static/examples.js

@@ -1,7 +1,7 @@
 // examples.js
 const example_snippets = [{
     't':'music',
-    'd':"ITD's pattern sequencer",
+    'd':"Launch a pattern sequencer (by @ITD)",
     'c':`
 tulip.download_and_run('tracks')
 `},{
@@ -150,7 +150,7 @@ juno6.select_midi_channel(2)
 print("Type seq.clear() to stop Juno-6 pattern")
 `},{
     't':'music',
-    'd':'Microtonal scales (@diydsp)',
+    'd':'Microtonal scales (by @diydsp)',
     'c':`
 import math 
 
@@ -310,5 +310,11 @@ for b in [0, 1, 2, 3]:
 amy.send(osc=30, pan=0, wave=amy.AUDIO_IN0, vel=1)
 amy.send(osc=31, pan=1, wave=amy.AUDIO_IN1, vel=1)
 amy.echo(level=1, delay_ms=400, max_delay_ms=1500, feedback=0.8, filter_coef=None)
+`},{
+    't':'music',
+    'd':'Launch an algorithmic music composer (by @nicoVR)',
+    'c':`
+# see user/periodic2/config.py for instructions!
+tulip.download_and_run("periodic2")
 `}
 ]

tulip/web/static/index.html

@@ -133,26 +133,26 @@ <h1><A HREF="https://tulip.computer/"><img src="/img/favicon.png"/ width=40></A>
             </div>
           </div>
 
-          <div class="row">
+          <div class="row mb-4 mt-1">
             <div class="col-3">
-              <div class="align-self-center my-3"> 
                 <button type="button" title="Refresh Tulip file list" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-warning" onclick="fill_tree()"><i class="fas fa-sync"></i></button> 
                 <button type="button" title="Download file from Tulip" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-success" onclick="download()"><i class="fas fa-download"></i></button>
                 <button type="button" title="Upload file to Tulip into the selected folder" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-primary" onclick="upload()"><i class="fas fa-upload"></i></button>
                 <button type="button" title="Load selected Tulip file into editor" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-danger" onclick="load_editor()"><i class="fas fa-chevron-circle-right"></i></button>
-              </div>
             </div>
-            <div class="col-9">
-              <div class="align-self-center my-3"> 
-                <button type="button" title="Save editor contents to file on Tulip into the selected folder" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-danger" onclick="save_editor()"><i class="fas fa-chevron-circle-left"></i></button>
+            <div class="col-3">
+                <button type="button" title="Save editor contents to file on Tulip" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-danger" onclick="save_editor()"><i class="fas fa-floppy-disk"></i></button>
                 <button type="button" title="Run editor contents in Tulip" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-success" onclick="runEditorBlock()"><i class="fas fa-running"></i></button> 
                 <button type="share" title="Share editor contents (and filename, if given) as a URL" data-toggle="tooltip" data-placement="top" class="btn btn-sm btn-warning" id="shareButton" onclick="shareCode()"><i class="fas fa-share-square"></i></button>
-                <input type='text' title="Filename for saving or sharing" data-toggle="tooltip" data-placement="top"  id="editor_filename" class="small" placeholder="Filename"/>
-                <button type="button" class="btn btn-sm btn-primary float-end" onclick="hide_editor();"
-                  data-bs-toggle="collapse" title="Hide editor" data-toggle="tooltip" data-placement="top"  data-bs-target="#collapseEditor" aria-expanded="true" aria-controls="collapseEditor">
-                  Hide
-                </button>
-              </div>
+            </div>
+            <div class="col-4">
+                <input type='text' title="Filename for saving or sharing" data-toggle="tooltip" data-placement="top"  id="editor_filename" class="small form-control" placeholder="Filename"/>
+            </div>
+            <div class="col-2">
+              <button type="button" class="btn btn-sm btn-primary float-end" onclick="hide_editor();"
+              data-bs-toggle="collapse" title="Hide editor" data-toggle="tooltip" data-placement="top"  data-bs-target="#collapseEditor" aria-expanded="true" aria-controls="collapseEditor">
+              Hide
+              </button>
             </div>
           </div>
         </div>
@@ -271,8 +271,11 @@ <h3 class="h5 my-2"><A href="https://confirmsubscription.com/h/y/204B1B40E85DDBA
             document.getElementById("textinput").focus({preventScroll:true});
       });
       $(function () {
-        $('[data-toggle="tooltip"]').tooltip({delay: { "show": 1000, "hide": 100 }})
+        $('[data-toggle="tooltip"]').tooltip({delay: { "show": 3000, "hide": 500 }, trigger:'hover'})
       }) 
+      $('[rel="tooltip"]').on('click', function () {
+        $(this).tooltip('hide')
+      });
       fill_examples();
     </script>
   </body>

tulip/web/static/spss.js

@@ -154,8 +154,8 @@ async function shareCode() {
       .catch(function (error) { console.log(error); });
 
     // Do a little button animation
-    document.getElementById(`shareButton`).innerHTML = "Copied to clipboard!"; 
-    await sleep_ms(2500);
+    document.getElementById(`shareButton`).innerHTML = "Copied!"; 
+    await sleep_ms(1000);
     document.getElementById(`shareButton`).innerHTML = "<i class='fas fa-share-square'></i>"; 
  }
 
@@ -280,13 +280,17 @@ async function upload() {
 }
 
 async function save_editor() {
-    upload_folder = await request_file_or_folder(true);
     target_filename = document.getElementById('editor_filename').value;
-    if(upload_folder != null) {
+    if(target_filename.startsWith("/sys")) {
+        show_alert("You can't write to the /sys folder. Save it to /user.");
+    } else {
         if(target_filename.length > 0) {
+            if(!target_filename.startsWith("/user")) {
+                target_filename = "/user/" + target_filename;
+            }
             content = editor.getValue();
-            mp.FS.writeFile(upload_folder.fullpath + '/' + target_filename, content);
-            fill_tree();
+            mp.FS.writeFile("/tulip4"+target_filename, content);
+            document.getElementById('editor_filename').value = target_filename;
         } else {
             show_alert('You need to provide a filename before saving.');
         }
@@ -298,7 +302,8 @@ async function load_editor() {
     file = await request_file_or_folder(false);
     if(file != null) {
         editor.setValue(file.getContents('utf8'));
-        document.getElementById('editor_filename').value = file.showpath;
+        // trim the `/tulip4` from here
+        document.getElementById('editor_filename').value = file.fullpath.substring(7);
         setTimeout(function () { editor.save() }, 100);
         setTimeout(function () { editor.refresh() }, 250);
     }

www/run/examples.js

@@ -1,7 +1,7 @@
 // examples.js
 const example_snippets = [{
     't':'music',
-    'd':"ITD's pattern sequencer",
+    'd':"Launch a pattern sequencer (by @ITD)",
     'c':`
 tulip.download_and_run('tracks')
 `},{
@@ -150,7 +150,7 @@ juno6.select_midi_channel(2)
 print("Type seq.clear() to stop Juno-6 pattern")
 `},{
     't':'music',
-    'd':'Microtonal scales (@diydsp)',
+    'd':'Microtonal scales (by @diydsp)',
     'c':`
 import math 
 
@@ -310,5 +310,11 @@ for b in [0, 1, 2, 3]:
 amy.send(osc=30, pan=0, wave=amy.AUDIO_IN0, vel=1)
 amy.send(osc=31, pan=1, wave=amy.AUDIO_IN1, vel=1)
 amy.echo(level=1, delay_ms=400, max_delay_ms=1500, feedback=0.8, filter_coef=None)
+`},{
+    't':'music',
+    'd':'Launch an algorithmic music composer (by @nicoVR)',
+    'c':`
+# see user/periodic2/config.py for instructions!
+tulip.download_and_run("periodic2")
 `}
 ]