继续完成 web-rtcp-5axis-sim-plan
结论：完成 LinuxCNC kinematics WASM ABI 覆盖，并将 web-rtcp-5axis-sim-plan 的 RTCP frame/boundary adapter 接到 xyzac-trt kinematics SDK；Node、build、browser smoke 验证通过。
This commit is contained in:
710
web-rtcp-5axis-sim-plan/app/src/styles/gmoccapy.css
Normal file
710
web-rtcp-5axis-sim-plan/app/src/styles/gmoccapy.css
Normal file
@@ -0,0 +1,710 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--panel: #d7d4ce;
|
||||
--panel-dark: #bdb9b1;
|
||||
--border: #aaa59b;
|
||||
--button: #ece9e3;
|
||||
--orange: #ff8618;
|
||||
--green: #18ff28;
|
||||
--green-dark: #02bf19;
|
||||
--black: #050505;
|
||||
--text: #2e2e2e;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 1024px;
|
||||
min-height: 768px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
background: #c8c4bc;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #bdb8ad;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(#f7f5ef, #ddd9d1);
|
||||
color: #303030;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.gmoccapy-shell {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(350px, 0.76fr)
|
||||
minmax(160px, 0.36fr)
|
||||
minmax(128px, 0.28fr)
|
||||
78px
|
||||
minmax(176px, 0.4fr)
|
||||
104px;
|
||||
grid-template-rows: 28px minmax(156px, 0.36fr) minmax(240px, 0.64fr) 224px 62px;
|
||||
grid-template-areas:
|
||||
"title title title title title title"
|
||||
"preview preview dro dro dro side"
|
||||
"preview preview gcode gcode gcode side"
|
||||
"info override override spindle spindle side"
|
||||
"bottom bottom bottom bottom bottom side";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-width: 1024px;
|
||||
min-height: 768px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
grid-area: title;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 2px 10px;
|
||||
background: #cfcbc3;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.brand-dot {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid #ffcf00;
|
||||
border-radius: 50%;
|
||||
color: #e21d1d;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title-stack {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title-stack strong {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title-stack span,
|
||||
.run-state {
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
color: #4d4d4d;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.run-state {
|
||||
min-width: 76px;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
grid-area: preview;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--black);
|
||||
border-right: 2px solid #8d887f;
|
||||
border-bottom: 2px solid #8d887f;
|
||||
}
|
||||
|
||||
.program-path {
|
||||
position: absolute;
|
||||
inset: 9px 0 auto 0;
|
||||
z-index: 2;
|
||||
color: #f6f6f6;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.machine-preview {
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tool-preview-card {
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 10px;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 2px 8px;
|
||||
min-width: 154px;
|
||||
max-width: 230px;
|
||||
padding: 7px 9px;
|
||||
border: 1px solid #316e74;
|
||||
background: rgba(4, 20, 22, 0.86);
|
||||
color: #e7ffff;
|
||||
font: 12px/1.25 "Courier New", monospace;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tool-preview-card strong {
|
||||
grid-row: span 3;
|
||||
align-self: center;
|
||||
color: #21f2f2;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.tool-preview-card span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.machine-envelope,
|
||||
.machine-grid {
|
||||
fill: none;
|
||||
stroke: #d21f1f;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
.machine-grid {
|
||||
stroke: #3d3d3d;
|
||||
}
|
||||
|
||||
.machine-rapid {
|
||||
fill: none;
|
||||
stroke: #9e6b00;
|
||||
stroke-width: 1.6;
|
||||
}
|
||||
|
||||
.toolpath {
|
||||
fill: none;
|
||||
stroke: #f7f7f7;
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
|
||||
.tool-axis {
|
||||
stroke: #22e6e6;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
.tcp-point {
|
||||
fill: #21f2f2;
|
||||
}
|
||||
|
||||
.axis-label {
|
||||
fill: #3864ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rtcp-preview-badge {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 58px;
|
||||
left: 8px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #215b2b;
|
||||
background: rgba(2, 16, 5, 0.82);
|
||||
color: var(--green);
|
||||
font: 11px/1.25 "Courier New", monospace;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rtcp-preview-badge[data-rtcp-preview-state="off"] {
|
||||
border-color: #4b4b4b;
|
||||
color: #b7c7b8;
|
||||
}
|
||||
|
||||
.preview-toolbar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: var(--panel);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.preview-toolbar button,
|
||||
.bottom-controls button,
|
||||
.status-sidebar button {
|
||||
min-height: 46px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dro-panel {
|
||||
grid-area: dro;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #151515;
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
.dro-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
min-height: 0;
|
||||
background: #111111;
|
||||
}
|
||||
|
||||
.dro-row {
|
||||
display: grid;
|
||||
grid-template-columns: 24px 40px minmax(74px, 1fr) 48px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 3px 5px;
|
||||
background: var(--black);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.dro-axis {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.dro-mode,
|
||||
.dro-dtg {
|
||||
color: var(--green);
|
||||
font-size: 9px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.dro-row strong {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
font-size: clamp(20px, 2.4vw, 30px);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: clip;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tcp-strip {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
background: #080808;
|
||||
color: var(--green);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tcp-strip span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tcp-strip [data-rtcp-value="tcp"] {
|
||||
flex: 1.2 1 190px;
|
||||
}
|
||||
|
||||
.tcp-strip [data-rtcp-value="tool-axis"] {
|
||||
flex: 1 1 150px;
|
||||
}
|
||||
|
||||
.tcp-strip [data-rtcp-value="state"] {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.gcode-panel {
|
||||
grid-area: gcode;
|
||||
display: grid;
|
||||
grid-template-rows: 30px minmax(0, 1fr) 22px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #f4f2ed;
|
||||
border-top: 2px solid var(--border);
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.gcode-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
border-bottom: 1px solid #d5d0c7;
|
||||
background: #eeeae3;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gcode-header strong,
|
||||
.gcode-header span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gcode-header [data-active-program-line] {
|
||||
color: #005bab;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.gcode-list {
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 4px 6px 2px;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 15px;
|
||||
color: #8b8b8b;
|
||||
}
|
||||
|
||||
.gcode-row {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
min-height: 20px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.gcode-row.active {
|
||||
background: #e8e8e8;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.gcode-row code {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gcode-progress {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 8px 4px;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.gcode-progress div {
|
||||
height: 6px;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.gcode-progress i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: #3888df;
|
||||
}
|
||||
|
||||
.status-sidebar {
|
||||
grid-area: side;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(9, minmax(44px, 1fr)) minmax(46px, auto);
|
||||
gap: 5px;
|
||||
padding: 6px;
|
||||
border-left: 2px solid var(--border);
|
||||
background: var(--panel);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.sidebar-button.estop {
|
||||
color: #c30000;
|
||||
}
|
||||
|
||||
.sidebar-button.power {
|
||||
color: var(--green-dark);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sidebar-button[data-active="true"] {
|
||||
border-color: #278b37;
|
||||
background: linear-gradient(#f6fff5, #aee9ae);
|
||||
color: #075f16;
|
||||
}
|
||||
|
||||
.status-sidebar time {
|
||||
padding: 4px 0;
|
||||
text-align: center;
|
||||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.info-tabs {
|
||||
grid-area: info;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-top: 2px solid var(--border);
|
||||
border-right: 2px solid var(--border);
|
||||
background: #eeeae3;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: #e0ddd6;
|
||||
min-height: 37px;
|
||||
padding: 4px 5px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabs button.active {
|
||||
background: #f3f0ea;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 3px 10px;
|
||||
margin: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.info-grid dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info-grid dd {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-grid [data-rtcp-diagnostic] {
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.override-panel {
|
||||
grid-area: override;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 56px 64px minmax(78px, 1fr);
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
border-top: 2px solid var(--border);
|
||||
border-right: 1px solid var(--border);
|
||||
background: #eeeae3;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.meter-card,
|
||||
.override-control,
|
||||
.cooling,
|
||||
.spindle {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 2px;
|
||||
padding: 5px;
|
||||
background: #f8f5ef;
|
||||
border: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meter-card h2,
|
||||
.override-control h2,
|
||||
.cooling h2,
|
||||
.spindle h2 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.meter-card strong,
|
||||
.override-control strong,
|
||||
.spindle strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: clamp(18px, 1.8vw, 25px);
|
||||
line-height: 1.05;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meter-card {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.meter-card h2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.meter-card strong {
|
||||
display: inline;
|
||||
font-size: clamp(20px, 2vw, 25px);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.meter-card span {
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(54px, 1fr) 32px;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.stepper div {
|
||||
min-width: 0;
|
||||
padding: 6px 4px;
|
||||
background: var(--orange);
|
||||
border: 1px solid #b4651c;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stepper button {
|
||||
min-width: 0;
|
||||
min-height: 28px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.spindle-coolant-panel {
|
||||
grid-area: spindle;
|
||||
display: grid;
|
||||
grid-template-columns: 76px minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 6px;
|
||||
background: #eeeae3;
|
||||
border-top: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.cooling {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cooling button.active {
|
||||
background: #39ef37;
|
||||
}
|
||||
|
||||
.spindle-range {
|
||||
height: 24px;
|
||||
margin-top: 8px;
|
||||
background: #bdbdbd;
|
||||
border: 1px solid #898989;
|
||||
}
|
||||
|
||||
.spindle-range i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: #24e83d;
|
||||
}
|
||||
|
||||
.bottom-controls {
|
||||
grid-area: bottom;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(13, minmax(48px, 1fr));
|
||||
gap: 5px;
|
||||
padding: 6px 8px;
|
||||
border-top: 2px solid var(--border);
|
||||
background: var(--panel);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bottom-controls button {
|
||||
font-size: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.program-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.gmoccapy-shell {
|
||||
grid-template-columns: 350px 160px 128px 78px 176px 96px;
|
||||
}
|
||||
|
||||
.dro-row strong {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.dro-row {
|
||||
grid-template-columns: 22px 36px minmax(66px, 1fr) 44px;
|
||||
}
|
||||
|
||||
.info-grid,
|
||||
.gcode-list {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabs button,
|
||||
.meter-card h2,
|
||||
.override-control h2,
|
||||
.cooling h2,
|
||||
.spindle h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user