replace modal alerts with transient div

js/kiri.js

@@ -280,7 +280,7 @@ self.kiri.license = exports.LICENSE;
                 sliceSupportExtra: 0,
                 sliceSupportSpan: 6,
 
-                sliceSolidMinArea: 5,
+                sliceSolidMinArea: 1,
                 sliceSolidLayers: 3,
                 sliceBottomLayers: 2,
                 sliceTopLayers: 3,
@@ -510,7 +510,8 @@ self.kiri.license = exports.LICENSE;
         local = SETUP.local,
         mouseMoved = false,
         camStock = null,
-        camTopZ = 0;
+        camTopZ = 0,
+        alerts = [];
 
     DBUG.enable();
 
@@ -555,6 +556,26 @@ self.kiri.license = exports.LICENSE;
      * Stats accumulator
      ******************************************************************* */
 
+    window.alert = function alert(message, time) {
+        alerts.push([message, Date.now(), time]);
+        updateAlerts();
+    }
+
+    setInterval(updateAlerts, 1000);
+
+    function updateAlerts() {
+        let now = Date.now();
+        while (alerts.length && now - alerts[0][1] > alerts[0][2] || 5000) {
+            alerts.shift();
+        }
+        if (alerts.length) {
+            $('alert-text').innerHTML = alerts.map(v => ['<p>',v[0],'</p>'].join('')).join('');
+            $('alert-area').style.display = 'flex';
+        } else {
+            $('alert-area').style.display = 'none';
+        }
+    }
+
     function sendOnEvent(name, data) {
         if (name && onEvent[name]) onEvent[name].forEach(function(fn) {
             fn(data);
@@ -1160,10 +1181,10 @@ self.kiri.license = exports.LICENSE;
                         ajax(host+"/api/wait?key="+json.key, function(data) {
                             data = js2o(data);
                             DBUG.log(data);
-                            alert("print to "+target+": "+data.status);
+                            alert("print to "+target+": "+data.status, 10000);
                         });
                     } else {
-                        alert("grid:host error\nstatus: "+status+"\nmessage: "+xhtr.responseText);
+                        alert("grid:host error\nstatus: "+status+"\nmessage: "+xhtr.responseText, 10000);
                     }
                     setProgress(0);
                 }
@@ -2430,7 +2451,7 @@ self.kiri.license = exports.LICENSE;
             sliceFillSpacing: UC.newInput("fill spacing", {title:"for solid fill areas\nas a percentage of nozzle width\n< 1.0 causes fill overlap\nrecommended 0.85 - 1.0", convert:UC.toFloat, bound:UC.bound(0.0,2.0), modes:FDM}),
             sliceFillAngle: UC.newInput("fill angle", {title:"base angle in degrees", convert:UC.toFloat, modes:FDM}),
             sliceFillSparse: UC.newInput("fill ratio", {title:"for infill areas\n0.0 - 1.0", convert:UC.toFloat, bound:UC.bound(0.0,1.0), modes:FDM}),
-            sliceSolidMinArea: UC.newInput("solid area", {title:"minimum area (cm^2)\nrequired to keep solid\nmust be > 0.1", convert:UC.toFloat, modes:FDM}),
+            sliceSolidMinArea: UC.newInput("solid area", {title:"minimum area (mm^2)\nrequired to keep solid\nmust be > 0.1", convert:UC.toFloat, modes:FDM}),
             sliceSolidLayers: UC.newInput("solid layers", {title:"flat area fill projections\nbased on layer deltas", convert:UC.toInt, modes:FDM}),
             sliceBottomLayers: UC.newInput("base layers", {title:"bottom solid layer count", convert:UC.toInt, modes:FDM}),
             sliceTopLayers: UC.newInput("top layers", {title:"top solid layer count", convert:UC.toInt, modes:FDM}),

web/kiri/index.html

@@ -251,5 +251,11 @@
         <input id="layer-span" size="4" value="1">
         </span>
     </div>
+    <!-- alert area -->
+    <div id="alert-area">
+        <div id="alert-border">
+            <div id="alert-text"></div>
+        </div>
+    </div>
 </body>
 </html>

web/kiri/style.css

@@ -90,19 +90,20 @@ select {
     top: 30px;
     left: 20%;
     right: 20%;
-    border: 2px solid rgba(10,10,10,0.25);
-    border-radius: 5px;
     margin: 2px;
     background-color: rgba(200,200,200,0.75);
+    border: 3px solid rgba(200,200,200,0.5);
+    border-radius: 5px;
     text-align: center;
     display: none;
 }
 #progress {
     position: relative;
-    width: 1%;
-    height: 100%;
     background-color: #f00;
     text-align: left;
+    padding: 5px;
+    height: 100%;
+    width: 1%;
 }
 #progress > span {
     color: white;
@@ -162,6 +163,7 @@ select {
 }
 .print-gcode > button {
     margin: 0 2px 0 2px !important;
+    height: 30px;
 }
 .print-sel > button {
     max-width: 1000px;
@@ -672,6 +674,36 @@ button[import="1"] {
     color: white;
 }
 
+#alert-area {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 30px;
+    left: 0;
+    right: 0;
+}
+#alert-border {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    background-color: rgba(255,230,230,0.8);
+    border: 3px solid rgba(255,200,200,0.5);
+    border-radius: 5px;
+}
+#alert-text {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    font-weight: bold;
+    color: black;
+    margin: 5px;
+}
+#alert-text p {
+    margin: 5px;
+}
+
 .flex {
     display: flex;
 }