Updated alert()

Author: maurinElectroTextile

docs/index.html

@@ -139,7 +139,7 @@ <h5 id="NAME" class="card-subtitle"></h5>
         <div class="sensor d-flex justify-content-center">
           <div id="canvas-3D"></div>
         </div>
-      </div>  
+      </div>
 
     </section>
 
@@ -148,15 +148,17 @@ <h5 id="NAME" class="card-subtitle"></h5>
       <div class="card-body card shadow">
         <div id="summary_action" class="alert alert-warning text-center">DISCONNECTED</div>
         <div id="e256_params"></div>
+
         <div id="set_button_params" class="param collapse">
           <button id="btnSet" class="btn w-100 btn-warning" type="button">SET PARAMS</button>
         </div>
+
         <div id="midi_term" class="card-body h-100 collapse"></div>
-        <div id="live_alert_placeholder"></div>
-      </div>
+        <div id="live_alert_placeholder" style="z-index: 10;"></div>
 
+      </div>
+      
     </section>
-
   </div>
 
   <script type="text/javascript" src="./js/e256_config.js"></script>

docs/js/e256_mappings/switch.js

@@ -9,7 +9,7 @@ function switch_factory() {
   const DEFAULT_SWITCH_WIDTH = canvas_width / SCALE_X;
   const DEFAULT_SWITCH_HEIGHT = canvas_height / SCALE_X;
   //const DEFAULT_SWITCH_MIN_SIZE = 50;
-  const DEFAULT_SWITCH_TOUCHS = 3;
+  const DEFAULT_SWITCH_TOUCHS = 1;
   const DEFAULT_SWITCH_MODE_Z = NOTE_ON;
   const DEFAULT_SWITCH_BUTTON_PADDING = 8;
 
@@ -146,11 +146,11 @@ function switch_factory() {
       }
 
       _touch_ellipse.onMouseEnter = function () {
-        this.style.fillColor = "orange";
+        //this.style.fillColor = "orange";
       }
 
       _touch_ellipse.onMouseLeave = function () {
-        this.style.fillColor = "pink";
+        //this.style.fillColor = "pink";
       }
 
       _touch_ellipse.onMouseDown = function () {
@@ -160,6 +160,7 @@ function switch_factory() {
             current_touch = _touch_group;
             break;
           case THROUGH_MODE:
+            this.style.fillColor = "orange";
             switch (_switch.data.mode_z) {
               case NOTE_ON:
                 _touch_group.msg.note.midi.status = (_touch_group.msg.note.midi.status | NOTE_ON);
@@ -191,6 +192,7 @@ function switch_factory() {
             // N/A
             break;
           case THROUGH_MODE:
+            this.style.fillColor = "pink";
             switch (_switch.data.mode_z) { // BUG_FIX: this.data.mode_z -> _switch.data.mode_z
               case NOTE_ON:
                 _touch_group.msg.note.midi.status = (_touch_group.msg.note.midi.status & NOTE_OFF);

docs/js/e256_menu.js

@@ -40,7 +40,7 @@ $(".e256_setMode").click(
       send_midi_msg(new program_change(MIDI_MODES_CHANNEL, e256_current_mode));
       console.log("REQUEST: " + MODE_CODES[e256_current_mode]);
     } else {
-      alert_msg("ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger", 1500, null);
+      alert_msg("not_connected", "ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger");
     }
   }
 );
@@ -59,7 +59,7 @@ $("#uploadConfig").click(
       send_midi_msg(new program_change(MIDI_MODES_CHANNEL, ALLOCATE_MODE));
       console.log("REQUEST: ALLOCATE_MODE");
     } else {
-      alert_msg("ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger", 1500, null);
+      alert_msg("not_connected", "ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger");
     }
   }
 );
@@ -80,7 +80,7 @@ $("#fetchConfig").click(
       send_midi_msg(new program_change(MIDI_MODES_CHANNEL, LOAD_MODE));
       console.log("REQUEST: LOAD_MODE");
     } else {
-      alert_msg("ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger", 1500, null);
+      alert_msg("not_connected", "ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger");
     }
   }
 );

docs/js/e256_menu_params.js

@@ -403,17 +403,17 @@ function circular_buffer(max_length) {
 
 circular_buffer.prototype = Object.create(Array.prototype);
 
-circular_buffer.prototype.push = function (midiMsg) {
+circular_buffer.prototype.push = function (midi_msg) {
 
-  Array.prototype.push.call(this, midiMsg);
+  Array.prototype.push.call(this, midi_msg);
 
   let div_midi_msg = document.createElement("div");
 
   div_midi_msg.setAttribute("id", "midi_msg_" + this._msg_count);
 
-  let status = midi_msg_status_unpack(midiMsg.status);
+  let status = midi_msg_status_unpack(midi_msg.status);
 
-  div_midi_msg.textContent = MIDI_TYPES[status.type] + " : [ " + status.channel + ", " + midiMsg.data1 + ", " + midiMsg.data2 + " ]";
+  div_midi_msg.textContent = MIDI_TYPES[status.type] + " : [ " + status.channel + ", " + midi_msg.data1 + ", " + midi_msg.data2 + " ]";
 
   switch (e256_current_mode) {
     case THROUGH_MODE:
@@ -436,23 +436,28 @@ circular_buffer.prototype.push = function (midiMsg) {
 
 var midi_term = new circular_buffer(25);
 
+
 //////////////// Alert
-function alert_msg(message, type, timeout, identifier) {
+function alert_msg(identifier, message, type) {
+
+  const is_existing_alert_node = document.querySelector("#" + identifier);
+
+  if (is_existing_alert_node === null) {
+
+    const div_alert = document.createElement('div');
 
-  const div_alert = document.createElement('div');
-  div_alert.setAttribute("id", "alert_msg_" + identifier);
-  div_alert.className = "alert alert-" + type;
-  div_alert.setAttribute("role", "alert");
-  div_alert.textContent = message;
+    div_alert.setAttribute("id", identifier);
+    div_alert.className = "alert alert-" + type;
+    div_alert.setAttribute("role", "alert");
+    div_alert.textContent = message;
 
-  $("#live_alert_placeholder").append(div_alert);
+    $("#live_alert_placeholder").append(div_alert);
 
-  if (timeout) {
     setTimeout(
       function () {
-      const _alert_msg = bootstrap.Alert.getOrCreateInstance("#alert_msg_" + identifier);
-      _alert_msg.close();
-    }, timeout);
+        const alert_timeout =bootstrap.Alert.getOrCreateInstance("#" + identifier);
+        alert_timeout.close();
+    }, 2000);
   }
 
 };

docs/js/e256_midi_io.js

@@ -185,7 +185,7 @@ async function MIDIsetup() {
       navigator.requestMIDIAccess({ sysex: true }).then(onMIDISuccess);
     }
     if (permissionStatus.state === "prompt") {
-      alert_msg("This browser does not support MIDI!", "danger", 2000, null);
+      alert_msg("no_midi_support", "This browser does not support MIDI!", "danger");
     }
   });
 };
@@ -401,7 +401,7 @@ function onMIDIMessage(midiMsg) {
                 draw_controlers_from_config(fetch_config_file);
               }
               else {
-                alert_msg("NO CONFIG FILE LOADED IN THE E256 FLASH MEMORY!", "danger", 2000, null);
+                alert_msg("no_config_file", "NO CONFIG FILE LOADED IN THE E256 FLASH MEMORY!", "danger");
               }
               send_midi_msg(new program_change(MIDI_MODES_CHANNEL, EDIT_MODE));
               console.log("REQUEST: EDIT_MODE");
@@ -429,15 +429,13 @@ function onMIDIMessage(midiMsg) {
               break;
 
             case CONFIG_APPLY_DONE:
-              alert_msg("PRESS THE ETEXTILE-SYNTHESIZER LEFT PUSH BUTTON TO SAVE THE CONFIG IN THE FLASH MEMORY!", "warning", false, "save"); // FIXME!
+              alert_msg("config_apply", "PRESS THE ETEXTILE-SYNTHESIZER LEFT PUSH BUTTON TO SAVE THE CONFIG IN THE FLASH MEMORY!", "warning");
               send_midi_msg(new program_change(MIDI_MODES_CHANNEL, EDIT_MODE));
               console.log("REQUEST: EDIT_MODE");
               break;
 
             case WRITE_MODE_DONE:
-              const alert = bootstrap.Alert.getOrCreateInstance('#alert_msg_save')
-              if (alert) alert.close();
-              alert_msg("NOW THE ETEXTILE-SYNTHESIZER CAN BE USED IN STANDALONE MODE!", "success", 3000);
+              alert_msg("config_saved", "NOW THE ETEXTILE-SYNTHESIZER CAN BE USED IN STANDALONE MODE!", "success");
               break;
 
             default:
@@ -473,7 +471,7 @@ function onMIDIMessage(midiMsg) {
           break;
         default:
           //console.log("NOT_HANDLED_SISEX: " +  MODE_CODES[e256_current_mode]);
-          alert_msg("NOT_HANDLED_SISEX: " +  MODE_CODES[e256_current_mode], "danger", 2000);
+          alert_msg("wrong_sysex", "NOT_HANDLED_SYSEX: " +  MODE_CODES[e256_current_mode], "danger");
           break;
       }
       break;
@@ -485,6 +483,7 @@ function onMIDIMessage(midiMsg) {
 };
 
 function send_midi_msg(midiMsg) {
+
   if (midi_device_connected) {
     if (midiMsg.data2 === null) {
       MIDI_output.send([midiMsg.status, midiMsg.data1]);
@@ -494,7 +493,7 @@ function send_midi_msg(midiMsg) {
     midi_term.push(midiMsg);
   }
   else {
-    alert_msg("ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger", 1500);
+    alert_msg("not_connected", "ETEXTILE-SYNTHESIZER IS NOT CONNECTED!", "danger");
   }
 };
 
@@ -538,14 +537,16 @@ function e256_alocate_memory() {
 };
 */
 
-$(document).ready(function () {
-  $("#loading_canvas").collapse("show");
-  MIDIsetup();
-});
+$(document).ready(
+  function () {
+    $("#loading_canvas").collapse("show");
+    MIDIsetup();
+  }
+);
 
 function string_to_bytes(str) {
   let bytes = [];
-  for (let i = 0, n = str.length; i < n; i++) {
+  for (let i = 0; i < str.length; i++) {
     let char = str.charCodeAt(i);
     bytes.push(char);
   }

docs/js/e256_paper_script.js

@@ -73,7 +73,7 @@ paperTool.onMouseDown = function (mouseEvent) {
           }
         }
         else {
-          alert_msg("SELECT A MAPPING!", "danger", 2000, null);
+          alert_msg("select_mapping", "SELECT A MAPPING!", "danger");
         }
       }
       else { // If cliking on item