Complete 3axis tutorial native and Web/WASM parity tools

This commit is contained in:
2026-08-24 14:01:30 +08:00
parent 938654b19d
commit 7e90142b63
147 changed files with 17639 additions and 557 deletions

View File

@@ -80,6 +80,9 @@ button { color: inherit; }
.check-line { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; margin-top: 6px; }
.check-line input { margin: 0; }
.manual-spindle-block, .manual-coolant-block { min-width: 0; }
.manual-device-block { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #b0b0b0; }
.manual-device-block h3 { display: inline; margin-right: 10px; }
.device-status { color: #555; font: 11px ui-monospace, monospace; }
.manual-coolant-block { grid-column: 1; }
.spindle-row .axis-tool-button { width: 28px; height: 28px; }
.spindle-row .axis-tool-button img { width: 16px; height: 16px; }
@@ -102,9 +105,10 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.three-viewer canvas { display: block; width: 100%; height: 100%; }
.three-viewer-label { position: absolute; z-index: 1; top: 6px; left: 7px; padding: 2px 5px; color: #c9e86d; background: rgb(8 14 19 / 75%); font: 10px ui-monospace, monospace; pointer-events: none; }
.dro-view { background: #ececec; }
.dro-mode-row, .dro-row { display: grid; grid-template-columns: 42px repeat(3, minmax(100px, 1fr)); align-items: center; gap: 9px; }
.dro-mode-row, .dro-column-headings, .dro-row { display: grid; grid-template-columns: 42px repeat(3, minmax(100px, 1fr)); align-items: center; gap: 9px; }
.dro-mode-row { padding: 5px 6px; border-bottom: 1px solid #888; color: #555; font-size: 11px; }
.dro-mode-row span { text-align: right; }
.dro-column-headings { padding: 7px 7px 0; color: #555; font: 10px ui-monospace, monospace; text-align: right; }
.dro-table { margin-top: 9px; border: 1px solid #888; background: #fafafa; }
.dro-row { min-height: 38px; padding: 4px 7px; border-bottom: 1px solid #c6c6c6; }
.dro-row:last-child { border-bottom: 0; }
@@ -117,6 +121,13 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.axis-slider label { grid-template-columns: auto 48px; }
.axis-program-pane { display: grid; grid-template-columns: minmax(0, 1fr) 230px; flex: 0 0 205px; height: 205px; min-height: 205px; margin: 0 5px 5px; border: 2px solid #777; background: #f7f7f7; }
.axis-diagnostics { display: grid; gap: 8px; padding: 10px; min-height: 190px; overflow: auto; background: #f7f7f7; font-size: 12px; }
.diagnostic-summary, .diagnostic-error, .diagnostic-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.diagnostic-summary { padding-bottom: 6px; border-bottom: 1px solid #b3b3b3; }
.diagnostic-error { padding: 6px; color: #7b1111; border: 1px solid #c28d8d; background: #f8e0e0; }
.diagnostic-section { display: grid; gap: 3px; }
.diagnostic-section h3 { margin: 0; font-size: 12px; }
.diagnostic-row code { min-width: 160px; color: #26384a; }
.program-editor-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-width: 0; min-height: 0; }
.program-gutter { display: flex; flex-direction: column; align-items: end; padding: 6px 6px 6px 0; overflow: hidden; border-right: 1px solid #c2c2c2; color: #888; background: #e4e4e4; font: 12px/1.45 ui-monospace, monospace; user-select: none; }
.program-gutter span { height: 17px; }
@@ -127,6 +138,7 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.active-gcodes-label { display: grid; gap: 5px; color: #333; }
.active-gcodes-label textarea { width: 100%; min-height: 84px; resize: vertical; border: 1px solid #999; background: white; color: #222; font: 11px/1.35 ui-monospace, monospace; }
.program-diagnostic { display: block; padding: 4px; color: #8b1010; background: #f2d6d6; font: 11px ui-monospace, monospace; overflow-wrap: anywhere; }
.visually-hidden-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.axis-layer-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; color: #4d4d4d; font-size: 11px; }
.axis-layer-controls input { margin: 0; }
.axis-info-bar { display: flex; align-items: stretch; min-height: 27px; margin-top: auto; border-top: 1px solid #777; background: #c4c4c4; }
@@ -153,7 +165,7 @@ output { font: 12px ui-monospace, monospace; text-align: right; }
.command-status { margin-left: 0; width: 100%; }
.manual-grid, .manual-sliders, .axis-slider { grid-template-columns: 1fr; }
.manual-axis-block, .manual-coolant-block { grid-row: auto; grid-column: auto; }
.dro-mode-row, .dro-row { grid-template-columns: 27px repeat(3, minmax(0, 1fr)); gap: 4px; }
.dro-mode-row, .dro-column-headings, .dro-row { grid-template-columns: 27px repeat(3, minmax(0, 1fr)); gap: 4px; }
.dro-mode-row { font-size: 9px; }
.dro-row output { font-size: 13px; }
.dro-footer { flex-direction: column; gap: 3px; }