Fixing absent-minded mess (#60).

music/NYCEMF-2024/Silencio.js

@@ -805,7 +805,7 @@ if (typeof console === 'undefined') {
         this.scene.add(light2);
         window.addEventListener('resize', ((event) => this.onResize(event)), false);
     };
-    onResize = function(event) {
+    Score.prototype.onResize = function(event) {
         this.canvas.width = this.canvas.clientWidth;
         this.canvas.height = this.canvas.clientHeight;
         this.renderer.setViewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);

music/NYCEMF-2024/cloud-5.css

@@ -0,0 +1,125 @@
+.w3-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.w3-bar {
+  z-index: 1;
+}
+
+html {
+  height: 100vh;
+  width: 100vw;
+}
+
+/* The cloud-5 custom elements share a common style, which can be overridden by lower level styles. */
+
+.cloud5-body {
+  width: 100vw;
+  min-height: 100vh;
+  background-color:black;
+}
+
+.cloud5-score-canvas,
+.cloud5-shader-canvas {
+  background:black;
+  margin: 0px;
+  width:100vw;
+  height:100vh;
+}
+
+.cloud5-strudel-repl {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  width: 600px;
+  height: 600px;
+}
+
+.cloud5-log-editor {
+  background: transparent;
+  z-index: 2000;
+  opacity: 60%;
+  height: calc(100vh-80px);
+  width: calc(100vw-80px);
+  margin: 40px;
+}
+
+cloud5-strudel, 
+cloud5-log, 
+cloud5-about {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: none;
+  display: none;
+  margin: 40px;
+  width: calc(100vw-80px);
+  height: calc(100vh-80px);
+  font-size: 11px;
+  z-index: 5;
+  background: transparent;
+  color: rgb(255, 255, 200, 67%);
+  /* overflow-y: auto; */
+  overflow-wrap: break-word;
+}
+
+cloud5-shader, 
+cloud5-shadertoy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: none;
+  display: none;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  font-size: 11px;
+  /* z-index: 5; */
+  background: transparent;
+  color: rgb(255, 255, 200, 67%);
+  /* overflow-y: auto; */
+  overflow-wrap: break-word;
+}
+
+cloud5-piano-roll {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  visibility: none;
+  display: none;
+  margin: 0px;
+  width: 100vw;
+  height: 100vh;
+  font-size: 11px;
+  /* z-index: 5; */
+  background:  black;
+   /* overflow-y: auto; */
+  overflow-wrap: break-word;
+}
+
+
+.dg {
+    font: 12px 'Verdana', sans-serif;
+}
+
+.dg .c {
+    background: transparent;
+}
+
+.dg.main .close-button {
+    background: transparent;
+    font: 15px 'Verdana', sans-serif;
+}
+
+.dg.main .close-button:hover {
+    background: transparent;
+}
+
+input {
+    font: 1em/1.25em Verdana, sans-serif;
+    background: transparent;
+}

music/NYCEMF-2024/cloud-5.js

@@ -3,7 +3,7 @@
  * is defined in the body of the HTML, its DOM object can be obtained, and 
  * then not only DOM methods but also custom methods can be called.
  * 
- * In general, rather than subclassing these custom elements  (although that 
+ * In general, rather than subclassing these custom elements (although that 
  * is possible), users should define and set hook functions, code text, and 
  * other properties of the custom elements.
  * 
@@ -312,6 +312,7 @@ class Cloud5Piece extends HTMLElement {
         }
       }
     });
+    this.show(this.shader_overlay);
     window.addEventListener("unload", function (event) {
       nw_window?.close();
     });
@@ -450,10 +451,8 @@ class Cloud5PianoRoll extends HTMLElement {
     * Called by the browser whenever this element is added to the document.
     */
   connectedCallback() {
-    this.style.background = 'black';
-    this.style.margin = '0';
     this.innerHTML = `
-     <canvas id="display" class='cloud5-panel' style='background:black;z-index:100;'>
+     <canvas id="display" class="cloud5-score-canvas">
     `;
     this.canvas = this.querySelector('#display');
     if (this.csoundac_score !== null) {
@@ -511,8 +510,7 @@ class Cloud5Strudel extends HTMLElement {
     */
   connectedCallback() {
     this.innerHTML = `
-    <strudel-repl-component id="strudel_view" 
-        style="position:absolute;left:70px;top:80px;z-index:1;">
+    <strudel-repl-component id="strudel_view" class='cloud5-strudel-repl'>
 
         <!--
         ${this.#strudel_code_addon}
@@ -668,16 +666,10 @@ class Cloud5ShaderToy extends HTMLElement {
     * Called by the browser whenever this element is added to the document.
     */
   connectedCallback() {
-    this.style.margin = '0';
-    this.canvas = document.createElement('canvas');
-    this.appendChild(this.canvas);
-    this.canvas.style.position = 'absolute';
-    this.canvas.style.top = '0';
-    this.canvas.style.left = '0';
-    this.canvas.style.margin = '0;'
-    this.canvas.style.display = 'block';
-    this.canvas.style.width = '100%';
-    this.canvas.style.height = '100%';
+    this.innerHTML = `
+     <canvas id="display" class="cloud5-shader-canvas">
+    `;
+    this.canvas = this.querySelector('#display');
   }
   /**
    * Back reference to the piece, which can be used e.g. to get a reference to 
@@ -920,8 +912,7 @@ class Cloud5Log extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `<div 
       id='console_view' 
-      class="w3-text-sand cloud5-panel"
-      style="background-color:transparent;z-index:4;opacity:60%">`;
+      class="w3-text-sand cloud5-log-editor">`;
     this.message_callback_buffer = "";
     this.console_editor = ace.edit("console_view");
     this.console_editor.setShowPrintMargin(false);