cleanup layer view, alert colors, fdm defaults

js/kiri.js

@@ -264,7 +264,7 @@ self.kiri.license = exports.LICENSE;
                 // --- FDM ---
 
                 sliceHeight: 0.25,
-                sliceShells: 2,
+                sliceShells: 3,
                 sliceShellSpacing: 1.0,
                 sliceFillAngle: 45,
                 sliceFillOverlap: 0.3,
@@ -282,7 +282,7 @@ self.kiri.license = exports.LICENSE;
 
                 sliceSolidMinArea: 1,
                 sliceSolidLayers: 3,
-                sliceBottomLayers: 2,
+                sliceBottomLayers: 3,
                 sliceTopLayers: 3,
                 sliceVase: false,
 
@@ -299,22 +299,22 @@ self.kiri.license = exports.LICENSE;
                 outputFeedrate: 80,
                 outputFinishrate: 60,
                 outputSeekrate: 100,
-                outputShellMult: 1.1,
+                outputShellMult: 1.2,
                 outputFillMult: 1.2,
-                outputSparseMult: 1.3,
+                outputSparseMult: 1.2,
                 outputRetractDist: 1.0,
                 outputRetractSpeed: 40,
                 outputRetractDwell: 30,
                 outputBrimCount: 2,
                 outputBrimOffset: 2,
-                outputShortPoly: 15.0,
+                outputShortPoly: 30.0,
                 outputShortDistance: 0.0,
                 outputShortFactor: 0.2,
                 outputFinishFactor: 0,
                 sliceMinHeight: 0,
                 detectThinWalls: false,
-                antiBacklash: 2,
-                zHopDistance: 0,
+                antiBacklash: 1,
+                zHopDistance: 0.2,
                 gcodeKFactor: 0,
                 gcodePauseLayers: "",
                 outputCooling: true,
@@ -2156,12 +2156,12 @@ self.kiri.license = exports.LICENSE;
                 UI.modeArrange.setAttribute("class","buton");
                 break;
             case VIEWS.SLICE:
-                UI.layerView.style.display = 'block';
+                UI.layerView.style.display = 'flex';
                 UI.modeSlice.setAttribute("class","buton");
                 updateSliderMax();
                 break;
             case VIEWS.PREVIEW:
-                UI.layerView.style.display = 'block';
+                UI.layerView.style.display = 'flex';
                 UI.modePreview.setAttribute("class","buton");
                 break;
             default:

web/kiri/index.html

@@ -242,14 +242,12 @@
     </div>
     <!-- layer slider -->
     <div id="layer-view" class="flow-row">
-        <span>
         <button id="layer-toggle">layers</button>
         <div id="layers"></div>
         <input id="layer-id" size="4">
         <input id="layer-slider" type="range">
-        <button id="layer-range"> section</button>
+        <button id="layer-range">section</button>
         <input id="layer-span" size="4" value="1">
-        </span>
     </div>
     <!-- alert area -->
     <div id="alert-area">

web/kiri/style.css

@@ -91,23 +91,23 @@ select {
     left: 20%;
     right: 20%;
     margin: 2px;
-    background-color: rgba(200,200,200,0.75);
+    background-color: rgba(200,200,200,0.65);
     border: 3px solid rgba(200,200,200,0.5);
     border-radius: 5px;
     text-align: center;
     display: none;
 }
 #progress {
+    display: flex;
     position: relative;
-    background-color: #f00;
     text-align: left;
-    padding: 5px;
-    height: 100%;
-    width: 1%;
+    background-color: rgba(255,0,0,0.75);
+    width: 100%;
 }
-#progress > span {
+#prostatus {
     color: white;
-    padding-left: 10px;
+    padding: 5px;
+    margin: 5px;
 }
 #modal {
     z-index: 20000;
@@ -608,45 +608,48 @@ button[import="1"] {
 #layer-view {
     display: none;
     position: fixed;
-    left: 0;
-    right: 0;
+    flex-direction: row;
+    justify-content: center;
+    align-items: stretch;
     bottom: 0;
-    height: 25px;
-    text-align: center;
-    vertical-align: middle;
-}
-#layer-view span {
-    position: relative;
-    border-radius: 5px;
-    padding: 3px 8px 8px 8px;
+    left: 20%;
+    right: 20%;
+    margin: 0;
+    padding: 4px;
     background-color: rgba(170,221,255,0.75);
-    color: rgba(0,0,0,0.5);
-}
-#layer-view input {
-    vertical-align: middle;
+    border: 1px solid #ccc;
+    border-bottom: 0;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
 }
 #layer-view button {
-    position: relative;
-    margin-left: 1px;
+    margin: 0 !important;
     border: 1px solid rgba(255,255,255,0.75);
 }
+#layer-view input {
+    border-width: 1px;
+    padding: 2px;
+}
+#layer-view > button,input {
+    margin-left: 4px !important;
+    margin-right: 4px !important;
+}
 #layer-slider {
     border: 0;
     margin: 0;
     padding: 0;
-    height: 100%;
-    width: 50%;
+    flex-grow: 1;
 }
 #layers {
     display: none;
     position: fixed;
     bottom: 25px;
-    background-color: rgba(0,0,0,0.2);
-    border: 1px solid rgba(0,0,0,0.5);
+    background-color: rgba(170,221,255,0.75);
+    border: 1px solid rgba(0,0,0,0.2);
     border-radius: 3px;
     padding: 6px;
-    -webkit-transform: translate(-10px, 0);
-    transform: translate(-10px, 0);
+    -webkit-transform: translate(-9px, -5px);
+    transform: translate(-9px, -5px);
 }
 #layers label {
     text-align: left;
@@ -679,7 +682,7 @@ button[import="1"] {
     justify-content: center;
     align-items: center;
     position: fixed;
-    bottom: 30px;
+    bottom: 40px;
     left: 0;
     right: 0;
 }
@@ -689,13 +692,13 @@ button[import="1"] {
     align-items: center;
     min-width: 25%;
     max-width: 50%;
-    background-color: rgba(255,230,230,0.8);
-    border: 3px solid rgba(255,200,200,0.5);
+    background-color: rgba(230,245,255,0.8);
+    border: 3px solid rgba(200,215,255,0.6);
     border-radius: 5px;
 }
 #alert-border:hover {
-    background-color: rgba(255,230,230,0.9);
-    border: 3px solid rgba(255,200,200,0.95);
+    background-color: rgba(230,245,255,0.9);
+    border: 3px solid rgba(200,215,255,0.95);
 }
 #alert-text {
     display: flex;

web/moto/style.css

@@ -39,7 +39,7 @@ button {
 }
 button:hover {
     background-color: #aaa;
-    font-weight: bold;
+    color: black;
 }
 button[load] {
     width: 100%;