Compare commits
11 Commits
c7cf9483b3
...
b8c4f53bb1
| Author | SHA1 | Date | |
|---|---|---|---|
| b8c4f53bb1 | |||
| 32f3aca368 | |||
| 081209decf | |||
| ef4658aaf6 | |||
| ef78f20eaa | |||
| 36829020a5 | |||
| 2413fc49ab | |||
|
7d5949f5fc | ||
|
|
23f22105a8 | ||
|
|
4f74e75d44 | ||
| b10a6d537e |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -27,6 +27,8 @@ __pycache__
|
||||
*.elf
|
||||
*.hex
|
||||
.idea/deployment.xml
|
||||
backup/*.img.gz
|
||||
backup/*.partial
|
||||
|
||||
# Demo mode artifacts
|
||||
bbctrl.log*
|
||||
|
||||
123
README.md
123
README.md
@@ -1 +1,122 @@
|
||||
#OneFinity CNC Controller Firmware
|
||||
# OneFinity CNC Controller Firmware (W-axis fork)
|
||||
|
||||
This is the OneFinity / Buildbotics bbctrl firmware with a virtual W
|
||||
axis driven by an auxcnc ESP32 over USB serial. See
|
||||
[docs/AUX_W_AXIS.md](docs/AUX_W_AXIS.md) for the design and config.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
src/avr/ AVR firmware (motion controller, AtxMega)
|
||||
src/boot/ AVR bootloader
|
||||
src/bbserial/ Linux kernel module for the bbserial driver
|
||||
src/py/bbctrl/ Python control daemon (Tornado + websockets)
|
||||
src/js/ Vue.js UI (legacy)
|
||||
src/svelte-components/ Newer Svelte UI for dialogs and settings
|
||||
src/pug/ Pug templates compiled into build/http/index.html
|
||||
src/resources/ Static assets and config templates
|
||||
scripts/ Install / update / RPi build helpers
|
||||
docs/ Architecture, dev setup, W-axis docs
|
||||
```
|
||||
|
||||
## Build & flash (quick path, macOS or Linux)
|
||||
|
||||
The full build (`make`) requires `avr-gcc`, but the controller and UI
|
||||
only depend on the Python + web parts. If you're shipping a UI/Python
|
||||
change you don't need the AVR toolchain.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (any recent LTS) with npm
|
||||
- Python 3 with setuptools
|
||||
- `npm install` once at the project root (this is wired into the
|
||||
`node_modules` Make target, but on a fresh checkout it's clearer to
|
||||
do it explicitly)
|
||||
|
||||
```bash
|
||||
npm install
|
||||
(cd src/svelte-components && npm install)
|
||||
```
|
||||
|
||||
#### macOS gotcha: esbuild platform pin
|
||||
|
||||
The Pi build leaves `node_modules/esbuild` pinned to
|
||||
`linux-arm64`, which won't run on Darwin. If `npm run build` inside
|
||||
`src/svelte-components` complains about esbuild, reinstall it for the
|
||||
host:
|
||||
|
||||
```bash
|
||||
cd src/svelte-components
|
||||
rm -rf node_modules/esbuild
|
||||
npm install esbuild@0.14.49 --no-save
|
||||
```
|
||||
|
||||
(Use the version that matches `package-lock.json`.)
|
||||
|
||||
### Build the web UI + Python sdist
|
||||
|
||||
```bash
|
||||
# Build the Svelte components
|
||||
(cd src/svelte-components && npm run build)
|
||||
|
||||
# Render pug templates and copy assets into build/http
|
||||
make all # AVR step will fail without avr-gcc; safe to ignore
|
||||
# if you didn't change anything under src/avr or src/boot
|
||||
|
||||
# Package
|
||||
./setup.py sdist
|
||||
ls dist/bbctrl-*.tar.bz2
|
||||
```
|
||||
|
||||
`make pkg` is the canonical target but it tries to build AVR first. On
|
||||
hosts without avr-gcc, run the steps above directly.
|
||||
|
||||
If `bbctrl-*.tar.bz2` is missing `src/bbserial/bbserial.ko`, copy the
|
||||
prebuilt `.ko` from a previous official release into `src/bbserial/`
|
||||
before running `setup.py sdist` (the install script on the controller
|
||||
just installs the existing module if a newer one isn't shipped).
|
||||
|
||||
### Flash to a controller
|
||||
|
||||
```bash
|
||||
curl -X PUT -H "Content-Type: multipart/form-data" \
|
||||
-F "firmware=@dist/bbctrl-1.6.7.tar.bz2" \
|
||||
-F "password=onefinity" \
|
||||
http://onefinity.local/api/firmware/update
|
||||
```
|
||||
|
||||
…or use the Make target:
|
||||
|
||||
```bash
|
||||
make update HOST=onefinity.local PASSWORD=onefinity
|
||||
```
|
||||
|
||||
The controller stops bbctrl, untars the package, runs
|
||||
`scripts/install.sh`, and brings the service back up. Total downtime
|
||||
is ~30-45s. Watch progress at `http://<host>/` (you'll get 404s while
|
||||
bbctrl restarts, then the new UI).
|
||||
|
||||
### Verify the flash
|
||||
|
||||
```bash
|
||||
curl -s http://onefinity.local/ | grep -c "OneFinity"
|
||||
curl -s http://onefinity.local/api/aux/status # if W axis is enabled
|
||||
```
|
||||
|
||||
## Build & flash (full path, Debian/Linux)
|
||||
|
||||
For AVR + GPlan rebuilds, see [docs/development.md](docs/development.md).
|
||||
That path uses qemu + chroot to cross-compile gplan for ARM and needs
|
||||
the `gcc-avr` / `avr-libc` toolchain.
|
||||
|
||||
## W axis (auxcnc)
|
||||
|
||||
This fork adds a virtual W axis. See
|
||||
[docs/AUX_W_AXIS.md](docs/AUX_W_AXIS.md) for:
|
||||
|
||||
- G-code surface (`G28 W0`, `G1 W25`, etc.)
|
||||
- The G-code preprocessor and hook architecture
|
||||
- aux.json keys
|
||||
- REST API (`/api/aux/*`)
|
||||
- UI surface (jog row in Control, settings panel in Settings)
|
||||
- Edge cases (ESP reboot mid-job, limit closed at home start, …)
|
||||
|
||||
278
backup/onefinity-backup.sh
Executable file
278
backup/onefinity-backup.sh
Executable file
@@ -0,0 +1,278 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
# Onefinity CNC Controller - SD Card Backup & Restore
|
||||
#
|
||||
# Backs up the Raspberry Pi's SD card over SSH as a compressed image.
|
||||
# Compression runs on the local machine (fast), raw bytes stream from the Pi.
|
||||
#
|
||||
# Usage:
|
||||
# ./onefinity-backup.sh backup # backup with defaults
|
||||
# ./onefinity-backup.sh backup -o myfile.gz # custom output file
|
||||
# ./onefinity-backup.sh restore image.gz # restore to SD card
|
||||
# ./onefinity-backup.sh verify image.gz # verify image integrity
|
||||
#
|
||||
# Environment:
|
||||
# ONEFINITY_HOST - Pi IP/hostname (default: 10.1.10.55)
|
||||
# ONEFINITY_USER - SSH user (default: bbmc)
|
||||
# ONEFINITY_PASS - sudo password (default: onefinity)
|
||||
|
||||
HOST="${ONEFINITY_HOST:-10.1.10.55}"
|
||||
USER="${ONEFINITY_USER:-bbmc}"
|
||||
PASS="${ONEFINITY_PASS:-onefinity}"
|
||||
BACKUP_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
DEVICE="/dev/mmcblk0"
|
||||
|
||||
ssh_cmd() {
|
||||
ssh -o ConnectTimeout=10 -o StrictHostKeyChecking=no -o LogLevel=ERROR "$USER@$HOST" "$@"
|
||||
}
|
||||
|
||||
sudo_ssh() {
|
||||
ssh_cmd "echo '$PASS' | sudo -S bash -c '$1' 2>/dev/null"
|
||||
}
|
||||
|
||||
die() { echo "ERROR: $*" >&2; exit 1; }
|
||||
|
||||
# ── Backup ──────────────────────────────────────────────────────────────────
|
||||
|
||||
do_backup() {
|
||||
local outfile=""
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
case "$1" in
|
||||
-o|--output) outfile="$2"; shift 2 ;;
|
||||
*) die "Unknown option: $1" ;;
|
||||
esac
|
||||
done
|
||||
|
||||
if [[ -z "$outfile" ]]; then
|
||||
outfile="$BACKUP_DIR/onefinity-$(date +%Y%m%d-%H%M).img.gz"
|
||||
fi
|
||||
|
||||
echo "╔══════════════════════════════════════════════════════╗"
|
||||
echo "║ Onefinity CNC Controller - SD Card Backup ║"
|
||||
echo "╚══════════════════════════════════════════════════════╝"
|
||||
echo ""
|
||||
echo " Host: $USER@$HOST"
|
||||
echo " Device: $DEVICE"
|
||||
echo " Output: $outfile"
|
||||
echo ""
|
||||
|
||||
# Check connectivity
|
||||
echo "→ Checking SSH connection..."
|
||||
ssh_cmd 'hostname' >/dev/null 2>&1 || die "Cannot SSH to $USER@$HOST"
|
||||
|
||||
# Get card size
|
||||
local card_bytes
|
||||
card_bytes=$(sudo_ssh "blockdev --getsize64 $DEVICE")
|
||||
local card_gb=$(echo "scale=1; $card_bytes / 1073741824" | bc)
|
||||
echo " SD card: ${card_gb}GB ($card_bytes bytes)"
|
||||
echo ""
|
||||
|
||||
# Check for enough local disk space (compressed is ~4% of raw)
|
||||
local avail_bytes
|
||||
avail_bytes=$(df -P "$(dirname "$outfile")" | tail -1 | awk '{print $4 * 1024}')
|
||||
local need_bytes=$((card_bytes / 10)) # conservative: assume 10% compressed
|
||||
if (( avail_bytes < need_bytes )); then
|
||||
die "Not enough local disk space. Need ~$(echo "scale=1; $need_bytes/1073741824" | bc)GB, have $(echo "scale=1; $avail_bytes/1073741824" | bc)GB"
|
||||
fi
|
||||
|
||||
# Stream raw dd from Pi, compress locally with gzip
|
||||
# The Pi's SD card reads at ~20MB/s which is the bottleneck.
|
||||
# Compressing locally on a fast machine is much better than on the ARM.
|
||||
echo "→ Streaming SD card image (this takes ~20-50 minutes)..."
|
||||
echo " Pi: dd → SSH → local gzip → $outfile"
|
||||
echo ""
|
||||
|
||||
local start_time=$SECONDS
|
||||
local tmpfile="${outfile}.partial"
|
||||
|
||||
ssh_cmd "echo '$PASS' | sudo -S dd if=$DEVICE bs=4M 2>/dev/null" 2>/dev/null \
|
||||
| gzip -1 > "$tmpfile" &
|
||||
local pid=$!
|
||||
|
||||
# Progress monitor
|
||||
while kill -0 $pid 2>/dev/null; do
|
||||
sleep 15
|
||||
if [[ -f "$tmpfile" ]]; then
|
||||
local size_h
|
||||
size_h=$(ls -lh "$tmpfile" 2>/dev/null | awk '{print $5}')
|
||||
local elapsed=$(( SECONDS - start_time ))
|
||||
local min=$(( elapsed / 60 ))
|
||||
local sec=$(( elapsed % 60 ))
|
||||
printf "\r %dm%02ds elapsed — %s compressed" "$min" "$sec" "$size_h"
|
||||
fi
|
||||
done
|
||||
|
||||
wait $pid
|
||||
local exit_code=$?
|
||||
echo ""
|
||||
|
||||
if [[ $exit_code -ne 0 ]]; then
|
||||
rm -f "$tmpfile"
|
||||
die "Backup failed (exit code $exit_code)"
|
||||
fi
|
||||
|
||||
mv "$tmpfile" "$outfile"
|
||||
|
||||
local elapsed=$(( SECONDS - start_time ))
|
||||
local final_size
|
||||
final_size=$(ls -lh "$outfile" | awk '{print $5}')
|
||||
|
||||
echo ""
|
||||
echo "→ Verifying image integrity..."
|
||||
if gzip -t "$outfile" 2>/dev/null; then
|
||||
echo " ✓ gzip integrity OK"
|
||||
else
|
||||
die "Image file is corrupt!"
|
||||
fi
|
||||
|
||||
# Verify full size by counting decompressed bytes
|
||||
local actual_bytes
|
||||
actual_bytes=$(gzip -d -c "$outfile" | wc -c | tr -d ' ')
|
||||
if [[ "$actual_bytes" -eq "$card_bytes" ]]; then
|
||||
echo " ✓ Size matches: $actual_bytes bytes (full ${card_gb}GB card)"
|
||||
else
|
||||
echo " ⚠ Size mismatch: expected $card_bytes, got $actual_bytes"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "╔══════════════════════════════════════════════════════╗"
|
||||
echo " ✓ Backup complete"
|
||||
echo " File: $outfile"
|
||||
echo " Size: $final_size compressed (${card_gb}GB raw)"
|
||||
echo " Time: $(( elapsed / 60 ))m $(( elapsed % 60 ))s"
|
||||
echo "╚══════════════════════════════════════════════════════╝"
|
||||
}
|
||||
|
||||
# ── Restore ─────────────────────────────────────────────────────────────────
|
||||
|
||||
do_restore() {
|
||||
local imgfile="$1"
|
||||
local target="${2:-}"
|
||||
|
||||
[[ -f "$imgfile" ]] || die "Image file not found: $imgfile"
|
||||
|
||||
echo "╔══════════════════════════════════════════════════════╗"
|
||||
echo "║ Onefinity CNC Controller - SD Card Restore ║"
|
||||
echo "╚══════════════════════════════════════════════════════╝"
|
||||
echo ""
|
||||
|
||||
if [[ -n "$target" ]]; then
|
||||
# ── Local restore: write to a local SD card device ──
|
||||
[[ -b "$target" ]] || die "$target is not a block device"
|
||||
|
||||
local target_bytes
|
||||
target_bytes=$(diskutil info -plist "$target" 2>/dev/null \
|
||||
| plutil -extract TotalSize raw - 2>/dev/null \
|
||||
|| blockdev --getsize64 "$target" 2>/dev/null \
|
||||
|| echo 0)
|
||||
|
||||
echo " Image: $imgfile"
|
||||
echo " Target: $target ($(echo "scale=1; $target_bytes/1073741824" | bc)GB)"
|
||||
echo ""
|
||||
echo " ⚠ THIS WILL ERASE ALL DATA ON $target"
|
||||
echo ""
|
||||
read -rp " Type YES to continue: " confirm
|
||||
[[ "$confirm" == "YES" ]] || die "Aborted"
|
||||
|
||||
echo ""
|
||||
echo "→ Unmounting target..."
|
||||
diskutil unmountDisk "$target" 2>/dev/null || true
|
||||
|
||||
echo "→ Writing image to $target..."
|
||||
local raw_target
|
||||
raw_target=$(echo "$target" | sed 's|/dev/disk|/dev/rdisk|')
|
||||
gzip -d -c "$imgfile" | sudo dd of="$raw_target" bs=4M status=progress
|
||||
sync
|
||||
|
||||
echo ""
|
||||
echo " ✓ Restore complete. Safe to eject $target."
|
||||
|
||||
else
|
||||
# ── Remote restore: write back to Pi over SSH ──
|
||||
echo " Image: $imgfile"
|
||||
echo " Target: $USER@$HOST:$DEVICE"
|
||||
echo ""
|
||||
echo " ⚠ THIS WILL ERASE THE PI'S SD CARD"
|
||||
echo " ⚠ The Pi must be booted from USB/network, not the SD card"
|
||||
echo ""
|
||||
read -rp " Type YES to continue: " confirm
|
||||
[[ "$confirm" == "YES" ]] || die "Aborted"
|
||||
|
||||
echo ""
|
||||
echo "→ Writing image to $HOST:$DEVICE..."
|
||||
gzip -d -c "$imgfile" \
|
||||
| ssh_cmd "echo '$PASS' | sudo -S dd of=$DEVICE bs=4M 2>/dev/null"
|
||||
|
||||
echo ""
|
||||
echo " ✓ Remote restore complete."
|
||||
fi
|
||||
}
|
||||
|
||||
# ── Verify ──────────────────────────────────────────────────────────────────
|
||||
|
||||
do_verify() {
|
||||
local imgfile="$1"
|
||||
[[ -f "$imgfile" ]] || die "Image file not found: $imgfile"
|
||||
|
||||
echo "Verifying: $imgfile"
|
||||
echo ""
|
||||
|
||||
local compressed_size
|
||||
compressed_size=$(ls -lh "$imgfile" | awk '{print $5}')
|
||||
echo " Compressed size: $compressed_size"
|
||||
|
||||
echo " Checking gzip integrity..."
|
||||
if gzip -t "$imgfile" 2>/dev/null; then
|
||||
echo " ✓ gzip OK"
|
||||
else
|
||||
die "gzip integrity check FAILED"
|
||||
fi
|
||||
|
||||
echo " Counting uncompressed bytes..."
|
||||
local raw_bytes
|
||||
raw_bytes=$(gzip -d -c "$imgfile" | wc -c | tr -d ' ')
|
||||
local raw_gb=$(echo "scale=1; $raw_bytes / 1073741824" | bc)
|
||||
echo " ✓ Uncompressed size: ${raw_gb}GB ($raw_bytes bytes)"
|
||||
|
||||
echo " Checking partition table..."
|
||||
gzip -d -c "$imgfile" 2>/dev/null | head -c 512 | xxd | head -4 || true
|
||||
|
||||
echo ""
|
||||
echo " ✓ Image looks valid"
|
||||
}
|
||||
|
||||
# ── Main ────────────────────────────────────────────────────────────────────
|
||||
|
||||
usage() {
|
||||
cat <<EOF
|
||||
Usage: $(basename "$0") <command> [options]
|
||||
|
||||
Commands:
|
||||
backup [-o file.img.gz] Backup SD card from Pi over SSH
|
||||
restore <image.gz> [/dev/diskN] Restore image to local SD card or remote Pi
|
||||
verify <image.gz> Verify image integrity
|
||||
|
||||
Environment variables:
|
||||
ONEFINITY_HOST Pi address (default: 10.1.10.55)
|
||||
ONEFINITY_USER SSH user (default: bbmc)
|
||||
ONEFINITY_PASS sudo password (default: onefinity)
|
||||
|
||||
Examples:
|
||||
$(basename "$0") backup
|
||||
$(basename "$0") backup -o /tmp/mybackup.img.gz
|
||||
$(basename "$0") restore backup/onefinity-20260430.img.gz /dev/disk4
|
||||
$(basename "$0") verify backup/onefinity-20260430.img.gz
|
||||
EOF
|
||||
exit 1
|
||||
}
|
||||
|
||||
[[ $# -ge 1 ]] || usage
|
||||
|
||||
case "$1" in
|
||||
backup) shift; do_backup "$@" ;;
|
||||
restore) shift; [[ $# -ge 1 ]] || usage; do_restore "$@" ;;
|
||||
verify) shift; [[ $# -ge 1 ]] || usage; do_verify "$@" ;;
|
||||
*) usage ;;
|
||||
esac
|
||||
@@ -100,7 +100,30 @@ persisted there in NVS.
|
||||
Steps-mode jog ignores soft limits (use it to inch the axis to the
|
||||
limit switch when the axis isn't homed yet).
|
||||
|
||||
## State surface (UI)
|
||||
## UI
|
||||
|
||||
**Control view**
|
||||
|
||||
- A jog row appears under the XYZ jog grid when `aux_enabled` is true,
|
||||
with three buttons: `W-`, `W+`, and a wide `Home W`. There is
|
||||
intentionally no separate "set zero" or "W origin" button - homing
|
||||
lands the axis at `home_position_mm` (0 by default), so home and
|
||||
zero are the same point.
|
||||
- The DRO table shows a W axis row with position, status (OFFLINE /
|
||||
UNHOMED / HOMED), and a single Home button in the actions column
|
||||
(the cog and map-marker columns are placeholders for layout).
|
||||
|
||||
**Settings view**
|
||||
|
||||
A "W Axis (auxcnc)" section exposes every aux.json field except
|
||||
`enabled` (which stays read-only - flipping the W axis on/off requires
|
||||
editingaux.json on the controller, so a fresh install can't surprise
|
||||
the user with hardware that isn't there). Saving PUTs the merged
|
||||
config to `/api/aux/config/save`, which writes aux.json and pushes
|
||||
`HOMECFG` to the ESP. A status line shows whether the axis is
|
||||
disabled / offline / connected-unhomed / homed at `<pos> mm`.
|
||||
|
||||
## State surface
|
||||
|
||||
These are pushed via `state.set` and visible in the websocket stream:
|
||||
|
||||
@@ -139,6 +162,11 @@ These are pushed via `state.set` and visible in the websocket stream:
|
||||
- `src/py/bbctrl/FileHandler.py`: rewrite uploads in place
|
||||
- `src/py/bbctrl/Web.py`: REST endpoints
|
||||
- `src/py/bbctrl/__init__.py`: export AuxAxis
|
||||
- `src/pug/templates/control-view.pug`: W jog row + DRO row
|
||||
- `src/js/control-view.js`: aux_home / aux_jog / aux_jog_incr handlers
|
||||
- `src/js/axis-vars.js`: `_compute_aux_axis` for W state
|
||||
- `src/svelte-components/src/components/WAxisSettings.svelte`: settings panel
|
||||
- `src/svelte-components/src/components/SettingsView.svelte`: hosts WAxisSettings
|
||||
- `auxcnc/src/main.cpp`: new commands HOME, HOMECFG, WPOS, HOMED?,
|
||||
LIMIT?, ABORT-able STEPS with limit-aware abort, trapezoidal ramps,
|
||||
NVS-persisted config, `[boot]` banner, deterministic reply tokens
|
||||
|
||||
900
docs/mocks/v09_full_ux.html
Normal file
900
docs/mocks/v09_full_ux.html
Normal file
@@ -0,0 +1,900 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Onefinity · V09 · Full UX</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;font-family:'Inter',system-ui,sans-serif;background:#0f172a;color:#e5e7eb}
|
||||
.mono{font-family:'JetBrains Mono',monospace}
|
||||
|
||||
/* ---------- HOST CHROME ---------- */
|
||||
.host{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 30% 0%,#374151,#0f172a 60%);}
|
||||
.topbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.7rem 1rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);}
|
||||
.topbar .brand{display:flex;align-items:center;gap:.5rem;font-weight:800;color:#fff}
|
||||
.stripe-logo-sm{background:repeating-linear-gradient(135deg,#a7c7a3 0 6px,transparent 6px 14px);width:26px;height:26px;border-radius:6px}
|
||||
.pill{padding:.3rem .65rem;border-radius:9999px;font-size:.75rem;font-weight:700;background:rgba(255,255,255,.08);color:#cbd5e1}
|
||||
.seg-host{display:inline-flex;background:rgba(255,255,255,.05);border-radius:9999px;padding:3px;gap:3px}
|
||||
.seg-host button{padding:.4rem .85rem;border-radius:9999px;font-size:.78rem;font-weight:700;color:#cbd5e1}
|
||||
.seg-host button.on{background:#fde047;color:#0f172a}
|
||||
.toggle{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:8px;background:rgba(255,255,255,.08);font-size:.75rem;font-weight:600;color:#e5e7eb;cursor:pointer}
|
||||
.toggle.on{background:#22c55e;color:#0b1220}
|
||||
|
||||
.stage{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow:auto}
|
||||
.scaler-viewport{position:relative;flex:0 0 auto}
|
||||
.scaler{position:absolute;top:0;left:0;width:1920px;height:auto;transform-origin:top left;transition:transform .2s}
|
||||
|
||||
/* ---------- KIOSK (1920x1080) ---------- */
|
||||
.kiosk{
|
||||
width:1920px;height:1080px;overflow:hidden;border-radius:14px;position:relative;
|
||||
box-shadow:0 30px 60px rgba(0,0,0,.5);
|
||||
display:flex;flex-direction:column;
|
||||
background:#ffffff;color:#0f172a;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.head{
|
||||
flex:0 0 96px;height:96px;
|
||||
display:flex;align-items:center;gap:18px;
|
||||
padding:0 24px;background:#ffffff;border-bottom:1px solid #e5e7eb;
|
||||
}
|
||||
.brand-blk{display:flex;align-items:center;gap:14px}
|
||||
.menu-btn{width:54px;height:54px;border-radius:12px;background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}
|
||||
.menu-btn:hover{background:#e2e8f0}
|
||||
.brand-logo{width:42px;height:42px;border-radius:8px;background:repeating-linear-gradient(135deg,#a7c7a3 0 6px,transparent 6px 14px)}
|
||||
.brand-name{font-weight:900;font-size:22px;letter-spacing:-.01em}
|
||||
|
||||
/* Underline-ribbon tab style (V02) */
|
||||
.kiosk-tabs{display:inline-flex;gap:0;margin-right:auto;padding-left:18px;align-items:stretch;height:96px}
|
||||
.ktab{
|
||||
position:relative;
|
||||
height:96px;padding:0 26px;
|
||||
background:transparent;border:none;border-radius:0;
|
||||
color:#475569;font-size:1.05rem;font-weight:700;
|
||||
display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
|
||||
transition:color .15s;
|
||||
}
|
||||
.ktab i{font-size:1.1rem;color:#94a3b8;transition:color .15s}
|
||||
.ktab:hover{color:#0f172a}
|
||||
.ktab:hover i{color:#475569}
|
||||
.ktab.active{color:#0f172a}
|
||||
.ktab.active i{color:#0f172a}
|
||||
.ktab.active::after{
|
||||
content:"";position:absolute;left:14px;right:14px;bottom:0;
|
||||
height:5px;background:#fde047;border-radius:5px 5px 0 0;
|
||||
}
|
||||
.ktab .ktab-badge{background:#fee2e2;color:#991b1b;font-size:.7rem;padding:3px 8px;border-radius:9999px;font-weight:800;line-height:1}
|
||||
.ktab.active .ktab-badge{background:#fde047;color:#0f172a}
|
||||
|
||||
.sys-btn{display:inline-flex;align-items:center;gap:.55rem;height:54px;padding:0 1.1rem;border-radius:14px;background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a;font-size:.9rem;font-weight:600}
|
||||
.sys-btn .pip{width:9px;height:9px;border-radius:9999px;background:#22c55e}
|
||||
.state-badge{display:inline-flex;align-items:center;gap:.6rem;height:54px;padding:0 1.1rem;border-radius:14px;background:#dcfce7;color:#166534;font-weight:800;font-size:1rem;letter-spacing:.04em}
|
||||
.state-badge .dot{width:10px;height:10px;border-radius:9999px;background:currentColor;position:relative}
|
||||
.state-badge .dot::after{content:"";position:absolute;inset:-3px;border-radius:9999px;border:2px solid currentColor;opacity:.5;animation:pls 1.6s ease-out infinite}
|
||||
@keyframes pls{0%{transform:scale(.7);opacity:.6}100%{transform:scale(2.2);opacity:0}}
|
||||
|
||||
.estop{
|
||||
width:88px;height:88px;background:#dc2626;color:#fff;font-weight:900;
|
||||
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
border:3px solid #fff;box-shadow:0 0 0 3px #b91c1c, 0 8px 20px rgba(220,38,38,.35);font-size:1rem;letter-spacing:.05em
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.body{flex:1;display:flex;flex-direction:column;background:#f1f5f9;min-height:0}
|
||||
.panel{display:none;flex:1;min-height:0;flex-direction:column;padding:18px;gap:14px}
|
||||
.panel.active{display:flex}
|
||||
|
||||
/* ----------------------- V09 jog/macro palette ----------------------- */
|
||||
/* Flat soft slate, no shadow */
|
||||
:root{
|
||||
--jog-bg:#3f4b63;
|
||||
--jog-hover:#4a5777;
|
||||
--jog-dir-bg:#5b6885;
|
||||
--jog-dir-hover:#6a779a;
|
||||
--jog-ghost-bg:#8c97ad;
|
||||
--jog-ghost-hover:#9ba6bb;
|
||||
--jog-ink:#fff;
|
||||
--jog-ghost-ink:#0f172a;
|
||||
}
|
||||
|
||||
/* JOG */
|
||||
.jog-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;display:flex;flex-direction:column;padding:18px;min-height:0}
|
||||
.jog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
|
||||
.jog-title{font-size:18px;font-weight:700;color:#0f172a}
|
||||
.jog-title .step{color:#0ea5e9;font-family:'JetBrains Mono',monospace}
|
||||
.step-seg{display:inline-flex;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:14px;padding:4px}
|
||||
.step-seg button{height:48px;min-width:64px;padding:0 1rem;border-radius:11px;font-size:1rem;font-weight:800;color:#475569;cursor:pointer}
|
||||
.step-seg button.active{background:#0f172a;color:#fde047}
|
||||
.jog-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;flex:1;min-height:0}
|
||||
.jbtn{
|
||||
border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
|
||||
user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;
|
||||
font-weight:700;font-size:1.05rem;border:none;
|
||||
transition:transform .06s, background .15s;
|
||||
background:var(--jog-bg);color:var(--jog-ink);
|
||||
}
|
||||
.jbtn:hover{background:var(--jog-hover)}
|
||||
.jbtn:active{transform:scale(.97)}
|
||||
.jbtn .ico{font-size:1.6rem}
|
||||
.jbtn .lbl{font-size:.8rem;color:inherit;opacity:.85;font-weight:600}
|
||||
.jbtn.dir{background:var(--jog-dir-bg)} .jbtn.dir:hover{background:var(--jog-dir-hover)}
|
||||
.jbtn.ghost{background:var(--jog-ghost-bg);color:var(--jog-ghost-ink)} .jbtn.ghost:hover{background:var(--jog-ghost-hover)}
|
||||
|
||||
/* DRO + STATUS */
|
||||
.control-grid{display:grid;grid-template-columns:720px 1fr;gap:18px;flex:1;min-height:0}
|
||||
.right-col{display:grid;grid-template-rows:1fr 158px;gap:18px;min-height:0}
|
||||
.dro-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
|
||||
.dro-head{display:grid;grid-template-columns:84px 1.4fr 1fr 1fr 170px 170px 280px;column-gap:.75rem;align-items:center;padding:14px 22px;background:#f8fafc;border-bottom:1px solid #e5e7eb;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8}
|
||||
.dro-row{display:grid;grid-template-columns:84px 1.4fr 1fr 1fr 170px 170px 280px;column-gap:.75rem;align-items:center;padding:14px 22px;border-bottom:1px solid #f1f5f9;flex:1;min-height:0}
|
||||
.dro-row:last-child{border-bottom:none}
|
||||
.dro-axis{font-weight:900;font-size:46px;line-height:1}
|
||||
.dro-pos{font-family:'JetBrains Mono',monospace;font-size:36px;font-weight:800}
|
||||
.dro-pos .u{font-size:14px;color:#94a3b8;font-weight:500;margin-left:6px}
|
||||
.dro-sec{font-family:'JetBrains Mono',monospace;font-size:18px;color:#64748b;font-weight:600}
|
||||
.axis-x{color:#dc2626} .axis-y{color:#16a34a} .axis-z{color:#2563eb} .axis-w{color:#7c3aed}
|
||||
|
||||
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:9999px;font-size:.78rem;font-weight:700}
|
||||
.chip-green{background:#dcfce7;color:#166534}
|
||||
.chip-amber{background:#fef3c7;color:#92400e}
|
||||
.chip-red{background:#fee2e2;color:#991b1b}
|
||||
.chip-slate{background:#e2e8f0;color:#334155}
|
||||
.chip-blue{background:#dbeafe;color:#1e40af}
|
||||
|
||||
.icon-btn{
|
||||
width:72px;height:72px;border-radius:14px;cursor:pointer;
|
||||
display:inline-flex;align-items:center;justify-content:center;
|
||||
color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;
|
||||
font-size:1.45rem
|
||||
}
|
||||
.icon-btn:hover{background:#e2e8f0}
|
||||
.actions-cell{display:flex;justify-content:flex-end;gap:10px}
|
||||
.z-highlight{background:rgba(254,243,199,.4)}
|
||||
|
||||
.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;min-height:0}
|
||||
.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;justify-content:center}
|
||||
.stat-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#94a3b8}
|
||||
.stat-val{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:800;margin-top:6px}
|
||||
.stat-val.ok{color:#166534}
|
||||
.stat-sub{font-size:13px;color:#64748b;margin-top:2px}
|
||||
|
||||
/* MACROS */
|
||||
.macro-row{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;flex:0 0 auto}
|
||||
.macro-btn{
|
||||
height:84px;border-radius:14px;border:none;cursor:pointer;
|
||||
color:#fff;background:#3f4b63;
|
||||
font-weight:800;font-size:1rem;
|
||||
display:flex;align-items:center;justify-content:center;gap:.6rem;
|
||||
transition:transform .06s, background .15s
|
||||
}
|
||||
.macro-btn:hover{background:#4a5777}
|
||||
.macro-btn:active{transform:translateY(2px)}
|
||||
.macro-btn .mnum{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#fde047;color:#0f172a;font-size:.85rem;font-weight:900}
|
||||
.macro-btn .micon{font-size:1.1rem;opacity:.75}
|
||||
|
||||
/* =============================================================
|
||||
PROGRAM PANEL
|
||||
============================================================= */
|
||||
.program-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
|
||||
.ptab-bar{display:flex;align-items:center;gap:6px;border-bottom:1px solid #e5e7eb;flex:0 0 auto;background:#fff;padding:0 18px}
|
||||
.ptab{height:60px;padding:0 22px;font-weight:700;color:#64748b;border-bottom:3px solid transparent;font-size:1rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
|
||||
.ptab:hover{color:#0f172a}
|
||||
.ptab.active{color:#0f172a;border-bottom-color:#0f172a}
|
||||
.ptab .ptab-badge{background:#fde047;color:#0f172a;font-size:.7rem;padding:2px 7px;border-radius:9999px;font-weight:900}
|
||||
|
||||
.action-bar{display:flex;align-items:center;gap:12px;padding:18px;flex-wrap:wrap;border-bottom:1px solid #f1f5f9}
|
||||
.action-btn{height:84px;padding:0 24px;border-radius:14px;background:#3f4b63;color:#fff;border:none;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:.9rem;letter-spacing:.04em;transition:background .15s}
|
||||
.action-btn:hover{background:#4a5777}
|
||||
.action-btn .ico{font-size:1.4rem}
|
||||
.action-btn.run{background:#16a34a}
|
||||
.action-btn.run:hover{background:#15803d}
|
||||
.action-btn.stop{background:#0f172a}
|
||||
.action-btn.stop:hover{background:#1e293b}
|
||||
.action-btn.danger{background:#fee2e2;color:#7f1d1d}
|
||||
.action-btn.danger:hover{background:#fecaca}
|
||||
.action-btn.danger .ico{color:#dc2626}
|
||||
|
||||
.file-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid #f1f5f9}
|
||||
.file-btn{height:54px;padding:0 18px;border-radius:12px;background:#f1f5f9;border:1px solid #e2e8f0;font-weight:700;color:#0f172a;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
|
||||
.file-btn:hover{background:#e2e8f0}
|
||||
.file-select{height:54px;padding:0 16px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#0f172a;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
|
||||
.file-select .caret{color:#94a3b8;margin-left:.5rem}
|
||||
.file-select.primary{background:#fff;border:2px solid #0ea5e9;flex:1;min-width:300px}
|
||||
|
||||
.program-body{flex:1;display:grid;grid-template-columns:1fr 600px;min-height:0}
|
||||
.gcode{font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.6;background:#fafafa;border-right:1px solid #f1f5f9;padding:14px 0;overflow:auto;color:#1e293b}
|
||||
.gline{display:grid;grid-template-columns:60px 1fr;gap:14px;padding:1px 18px 1px 0}
|
||||
.gline:nth-child(odd){background:#f4f4f5}
|
||||
.gline .gn{color:#f59e0b;text-align:right;font-weight:700}
|
||||
.gline.cur{background:#dbeafe !important}
|
||||
.gline.cur .gn{color:#1e40af}
|
||||
.gcomment{color:#64748b}
|
||||
.gword{color:#0f172a}
|
||||
.gnum{color:#16a34a}
|
||||
|
||||
.viewer{display:flex;flex-direction:column;min-height:0}
|
||||
.viewer-3d{flex:1;background:#0b1220;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
|
||||
.viewer-tools{display:flex;gap:8px;padding:14px;border-top:1px solid #f1f5f9;background:#fff;flex-wrap:wrap}
|
||||
.vtool{height:60px;width:60px;border-radius:12px;background:#f1f5f9;border:1px solid #e2e8f0;color:#475569;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer}
|
||||
.vtool:hover{background:#e2e8f0}
|
||||
.vtool.on{background:#0f172a;color:#fff;border-color:#0f172a}
|
||||
.vinfo{padding:14px 18px;background:#fff;font-size:13px;color:#64748b;border-top:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center}
|
||||
.vinfo .ext{color:#0f172a;font-weight:600}
|
||||
|
||||
/* =============================================================
|
||||
MESSAGES PANEL
|
||||
============================================================= */
|
||||
.messages{display:none;flex-direction:column;flex:1;min-height:0;padding:18px;gap:12px;overflow:auto}
|
||||
.messages.active{display:flex}
|
||||
.msg{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 22px;display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:flex-start}
|
||||
.msg .mi{width:54px;height:54px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem}
|
||||
.msg.error{border-left:6px solid #dc2626}
|
||||
.msg.error .mi{background:#fee2e2;color:#991b1b}
|
||||
.msg.warn{border-left:6px solid #f59e0b}
|
||||
.msg.warn .mi{background:#fef3c7;color:#92400e}
|
||||
.msg.info{border-left:6px solid #0ea5e9}
|
||||
.msg.info .mi{background:#dbeafe;color:#1e40af}
|
||||
.msg.ok{border-left:6px solid #16a34a}
|
||||
.msg.ok .mi{background:#dcfce7;color:#166534}
|
||||
.msg .mtitle{font-weight:800;font-size:1.05rem;color:#0f172a}
|
||||
.msg .mtime{font-size:.8rem;color:#94a3b8;margin-top:2px}
|
||||
.msg .mbody{margin-top:6px;color:#475569;font-size:.95rem;line-height:1.5}
|
||||
.msg .mbody .mono{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:.85rem}
|
||||
.msg .mactions{display:flex;gap:8px}
|
||||
.mbtn{height:48px;padding:0 16px;border-radius:10px;background:#f1f5f9;border:1px solid #e2e8f0;font-weight:700;color:#0f172a;font-size:.85rem;cursor:pointer}
|
||||
.mbtn:hover{background:#e2e8f0}
|
||||
.mbtn.primary{background:#0f172a;color:#fff;border-color:#0f172a}
|
||||
.mbtn.primary:hover{background:#1e293b}
|
||||
|
||||
/* =============================================================
|
||||
INDICATORS PANEL
|
||||
============================================================= */
|
||||
.indicators{display:none;flex:1;min-height:0;padding:18px;gap:14px;overflow:auto;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content}
|
||||
.indicators.active{display:grid}
|
||||
.ind{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
|
||||
.ind-label{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8}
|
||||
.ind-val{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:800;color:#0f172a}
|
||||
.ind-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:#475569}
|
||||
.ind-state .dot{width:10px;height:10px;border-radius:9999px}
|
||||
.ind .progress{height:8px;background:#f1f5f9;border-radius:9999px;overflow:hidden;margin-top:4px}
|
||||
.ind .progress > div{height:100%;background:#0ea5e9}
|
||||
.ind.full{grid-column:span 2}
|
||||
|
||||
/* =============================================================
|
||||
MDI PANEL
|
||||
============================================================= */
|
||||
.mdi{display:none;flex-direction:column;flex:1;min-height:0;padding:18px;gap:14px}
|
||||
.mdi.active{display:flex}
|
||||
.mdi-input{
|
||||
background:#0b1220;color:#86efac;border:1px solid #1e293b;border-radius:14px;
|
||||
padding:22px 24px;font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:600;
|
||||
display:flex;align-items:center;gap:.6rem;
|
||||
}
|
||||
.mdi-input .prompt{color:#475569}
|
||||
.mdi-input .cursor{display:inline-block;width:14px;height:1.4rem;background:#86efac;animation:blink 1s steps(2,end) infinite;vertical-align:middle}
|
||||
@keyframes blink{50%{opacity:0}}
|
||||
.mdi-keys{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;flex:0 0 auto}
|
||||
.mkey{height:64px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;font-weight:800;font-size:1.05rem;color:#0f172a;cursor:pointer;font-family:'JetBrains Mono',monospace}
|
||||
.mkey:hover{background:#f1f5f9}
|
||||
.mkey.send{background:#16a34a;color:#fff;border-color:#15803d;grid-column:span 2;font-family:'Inter',sans-serif;font-size:.95rem;letter-spacing:.04em}
|
||||
.mkey.send:hover{background:#15803d}
|
||||
.mkey.clear{background:#fee2e2;color:#7f1d1d;border-color:#fca5a5;font-family:'Inter',sans-serif;font-size:.95rem;letter-spacing:.04em}
|
||||
.mdi-history{flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px 18px;overflow:auto;font-family:'JetBrains Mono',monospace;font-size:.95rem}
|
||||
.mdi-history .h-row{display:grid;grid-template-columns:80px 1fr auto;gap:14px;padding:6px 0;border-bottom:1px solid #f1f5f9;align-items:center}
|
||||
.mdi-history .h-time{color:#94a3b8;font-size:.8rem}
|
||||
.mdi-history .h-cmd{color:#0f172a;font-weight:700}
|
||||
.mdi-history .h-status{color:#16a34a;font-weight:700;font-size:.8rem}
|
||||
.mdi-history .h-status.err{color:#dc2626}
|
||||
|
||||
/* =============================================================
|
||||
SETTINGS PANEL
|
||||
============================================================= */
|
||||
.settings{display:none;flex:1;min-height:0;padding:18px;gap:14px;overflow:auto;grid-template-columns:280px 1fr}
|
||||
.settings.active{display:grid}
|
||||
.set-side{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:4px;height:fit-content}
|
||||
.set-item{height:56px;padding:0 16px;border-radius:10px;display:flex;align-items:center;gap:.6rem;color:#475569;font-weight:700;cursor:pointer}
|
||||
.set-item:hover{background:#f1f5f9}
|
||||
.set-item.active{background:#0f172a;color:#fff}
|
||||
.set-content{display:flex;flex-direction:column;gap:14px}
|
||||
.set-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px}
|
||||
.set-title{font-weight:800;font-size:1.1rem;color:#0f172a;margin-bottom:14px}
|
||||
.set-row{display:grid;grid-template-columns:280px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #f1f5f9}
|
||||
.set-row:last-child{border-bottom:none}
|
||||
.set-row .label{font-weight:700;color:#0f172a;font-size:.95rem}
|
||||
.set-row .desc{color:#64748b;font-size:.85rem;margin-top:2px}
|
||||
.set-row .val{font-family:'JetBrains Mono',monospace;color:#475569}
|
||||
.set-input{height:48px;padding:0 14px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;font-family:'JetBrains Mono',monospace;font-size:.95rem;color:#0f172a;min-width:200px}
|
||||
.set-toggle{width:54px;height:30px;border-radius:9999px;background:#cbd5e1;position:relative;cursor:pointer;transition:background .15s}
|
||||
.set-toggle::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:9999px;background:#fff;transition:transform .15s}
|
||||
.set-toggle.on{background:#16a34a}
|
||||
.set-toggle.on::after{transform:translateX(24px)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="host">
|
||||
|
||||
<div class="topbar">
|
||||
<div class="brand">
|
||||
<div class="stripe-logo-sm"></div>
|
||||
ONEFINITY · V09 · Full UX preview
|
||||
</div>
|
||||
<span class="pill">Click the inner tabs to navigate</span>
|
||||
<div style="margin-left:auto"></div>
|
||||
<button id="oneToOne" class="toggle">1:1</button>
|
||||
<button id="fitBtn" class="toggle on">Fit</button>
|
||||
<span id="scaleInfo" class="pill mono">100%</span>
|
||||
</div>
|
||||
|
||||
<div class="stage" id="stage">
|
||||
<div class="scaler-viewport" id="viewport">
|
||||
<div class="scaler" id="scaler">
|
||||
|
||||
<!-- ============= KIOSK ============= -->
|
||||
<div class="kiosk">
|
||||
<header class="head">
|
||||
<div class="brand-blk">
|
||||
<div class="brand-logo"></div>
|
||||
<div class="brand-name">ONEFINITY</div>
|
||||
</div>
|
||||
<div class="kiosk-tabs">
|
||||
<button class="ktab active" data-target="control"><i class="fa-solid fa-gamepad"></i> Control</button>
|
||||
<button class="ktab" data-target="program"><i class="fa-solid fa-list-ol"></i> Program</button>
|
||||
<button class="ktab" data-target="console"><i class="fa-solid fa-terminal"></i> Console <span class="ktab-badge">2</span></button>
|
||||
<button class="ktab" data-target="settings"><i class="fa-solid fa-sliders"></i> Settings</button>
|
||||
</div>
|
||||
<button class="sys-btn"><span class="pip"></span> All systems · view <i class="fa-solid fa-chevron-down" style="font-size:10px;opacity:.6"></i></button>
|
||||
<span class="state-badge"><span class="dot"></span> READY</span>
|
||||
<button class="estop">STOP</button>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!-- ============= CONTROL ============= -->
|
||||
<div class="panel active" data-panel="control">
|
||||
<div class="control-grid">
|
||||
<!-- jog -->
|
||||
<div class="jog-card">
|
||||
<div class="jog-head">
|
||||
<div class="jog-title">Jog · step <span class="step">10mm</span></div>
|
||||
<div class="step-seg">
|
||||
<button>0.1</button><button>1</button><button class="active">10</button><button>100</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jog-grid">
|
||||
<button class="jbtn dir"><i class="fa-solid fa-arrow-up ico" style="transform:rotate(-45deg)"></i></button>
|
||||
<button class="jbtn">Y+</button>
|
||||
<button class="jbtn dir"><i class="fa-solid fa-arrow-up ico" style="transform:rotate(45deg)"></i></button>
|
||||
<button class="jbtn">Z+</button>
|
||||
<button class="jbtn">X−</button>
|
||||
<button class="jbtn ghost"><span class="lbl">XY</span><span style="font-size:1rem;font-weight:700">Origin</span></button>
|
||||
<button class="jbtn">X+</button>
|
||||
<button class="jbtn ghost"><span class="lbl">Z</span><span style="font-size:1rem;font-weight:700">Origin</span></button>
|
||||
<button class="jbtn dir"><i class="fa-solid fa-arrow-down ico" style="transform:rotate(45deg)"></i></button>
|
||||
<button class="jbtn">Y−</button>
|
||||
<button class="jbtn dir"><i class="fa-solid fa-arrow-down ico" style="transform:rotate(-45deg)"></i></button>
|
||||
<button class="jbtn">Z−</button>
|
||||
<button class="jbtn"><i class="fa-solid fa-arrow-down ico"></i><span class="lbl">W−</span></button>
|
||||
<button class="jbtn ghost"><span class="lbl">W</span><span style="font-size:1rem;font-weight:700">Origin</span></button>
|
||||
<button class="jbtn"><i class="fa-solid fa-arrow-up ico"></i><span class="lbl">W+</span></button>
|
||||
<button class="jbtn"><i class="fa-solid fa-house ico"></i><span class="lbl">Home</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DRO + status -->
|
||||
<div class="right-col">
|
||||
<div class="dro-card">
|
||||
<div class="dro-head">
|
||||
<div>Axis</div><div>Position</div><div>Absolute</div><div>Offset</div><div>State</div><div>Toolpath</div><div style="text-align:right">Actions</div>
|
||||
</div>
|
||||
<div class="dro-row">
|
||||
<div class="dro-axis axis-x">X</div>
|
||||
<div class="dro-pos">0.000<span class="u">mm</span></div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div><span class="chip chip-amber"><i class="fa-solid fa-question"></i> Unhomed</span></div>
|
||||
<div><span class="chip chip-green"><i class="fa-solid fa-check"></i> OK</span></div>
|
||||
<div class="actions-cell">
|
||||
<button class="icon-btn"><i class="fa-solid fa-gear"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-location-dot"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-house"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dro-row">
|
||||
<div class="dro-axis axis-y">Y</div>
|
||||
<div class="dro-pos">0.000<span class="u">mm</span></div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div><span class="chip chip-amber"><i class="fa-solid fa-question"></i> Unhomed</span></div>
|
||||
<div><span class="chip chip-green"><i class="fa-solid fa-check"></i> OK</span></div>
|
||||
<div class="actions-cell">
|
||||
<button class="icon-btn"><i class="fa-solid fa-gear"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-location-dot"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-house"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dro-row z-highlight">
|
||||
<div class="dro-axis axis-z">Z</div>
|
||||
<div class="dro-pos">0.000<span class="u">mm</span></div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div><span class="chip chip-amber"><i class="fa-solid fa-question"></i> Unhomed</span></div>
|
||||
<div><span class="chip chip-amber"><i class="fa-solid fa-triangle-exclamation"></i> Over</span></div>
|
||||
<div class="actions-cell">
|
||||
<button class="icon-btn"><i class="fa-solid fa-gear"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-location-dot"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-house"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dro-row">
|
||||
<div class="dro-axis axis-w">W</div>
|
||||
<div class="dro-pos">0.000<span class="u">mm</span></div>
|
||||
<div class="dro-sec">0.000</div>
|
||||
<div class="dro-sec" style="opacity:.4">—</div>
|
||||
<div><span class="chip chip-amber"><i class="fa-solid fa-question"></i> Unhomed</span></div>
|
||||
<div><span class="chip chip-green"><i class="fa-solid fa-check"></i> OK</span></div>
|
||||
<div class="actions-cell">
|
||||
<button class="icon-btn"><i class="fa-solid fa-location-dot"></i></button>
|
||||
<button class="icon-btn"><i class="fa-solid fa-house"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-strip">
|
||||
<div class="stat-card"><div class="stat-label">State</div><div class="stat-val ok">READY</div><div class="stat-sub">No alerts</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Velocity / Feed</div><div class="stat-val">0 · 0</div><div class="stat-sub">m/min · mm/min</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Spindle</div><div class="stat-val">0 (0)</div><div class="stat-sub">RPM (commanded / actual)</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Job</div><div class="stat-val">0 / 1,785</div><div class="stat-sub">Line · 19:07 remaining</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- macros -->
|
||||
<div class="macro-row">
|
||||
<button class="macro-btn"><span class="mnum">1</span><i class="fa-solid fa-circle-play micon"></i> Macro 1</button>
|
||||
<button class="macro-btn"><span class="mnum">2</span><i class="fa-solid fa-circle-play micon"></i> Macro 2</button>
|
||||
<button class="macro-btn"><span class="mnum">3</span><i class="fa-solid fa-circle-play micon"></i> Macro 3</button>
|
||||
<button class="macro-btn"><span class="mnum">4</span><i class="fa-solid fa-circle-play micon"></i> Macro 4</button>
|
||||
<button class="macro-btn"><span class="mnum">5</span><i class="fa-solid fa-circle-play micon"></i> Macro 5</button>
|
||||
<button class="macro-btn"><span class="mnum">6</span><i class="fa-solid fa-circle-play micon"></i> Macro 6</button>
|
||||
<button class="macro-btn"><span class="mnum">7</span><i class="fa-solid fa-circle-play micon"></i> Macro 7</button>
|
||||
<button class="macro-btn"><span class="mnum">8</span><i class="fa-solid fa-circle-play micon"></i> Macro 8</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============= PROGRAM ============= -->
|
||||
<div class="panel" data-panel="program" style="padding:0;gap:0">
|
||||
<div class="program-card" style="margin:18px;border-radius:18px">
|
||||
<!-- Auto sub-panel -->
|
||||
<div class="auto-sub" data-sub="auto" style="display:flex;flex-direction:column;flex:1;min-height:0">
|
||||
<div class="action-bar">
|
||||
<button class="action-btn run"><i class="fa-solid fa-play ico"></i><span>RUN</span></button>
|
||||
<button class="action-btn stop"><i class="fa-solid fa-stop ico"></i><span>STOP</span></button>
|
||||
<button class="action-btn"><i class="fa-solid fa-folder-arrow-up ico"></i><span>UPLOAD FOLDER</span></button>
|
||||
<button class="action-btn"><i class="fa-solid fa-file-arrow-up ico"></i><span>UPLOAD FILE</span></button>
|
||||
<button class="action-btn"><i class="fa-solid fa-file-arrow-down ico"></i><span>DOWNLOAD FILE</span></button>
|
||||
<button class="action-btn danger"><i class="fa-solid fa-trash ico"></i><span>DELETE</span></button>
|
||||
</div>
|
||||
|
||||
<div class="file-bar">
|
||||
<button class="file-btn"><i class="fa-solid fa-folder-plus"></i> Create Folder</button>
|
||||
<button class="file-btn"><i class="fa-solid fa-folder-minus"></i> Delete Folder</button>
|
||||
<span class="file-select"><i class="fa-solid fa-folder-open" style="color:#64748b"></i> Default folder <i class="fa-solid fa-chevron-down caret"></i></span>
|
||||
<span class="file-select primary"><i class="fa-solid fa-file-code" style="color:#0ea5e9"></i> thin-rough.nc <i class="fa-solid fa-chevron-down caret" style="margin-left:auto"></i></span>
|
||||
<span class="file-select"><i class="fa-solid fa-arrow-down-wide-short" style="color:#64748b"></i> By Upload Date <i class="fa-solid fa-chevron-down caret"></i></span>
|
||||
</div>
|
||||
|
||||
<div class="program-body">
|
||||
<div class="gcode" id="gcode-list"></div>
|
||||
<div class="viewer">
|
||||
<div class="viewer-3d">
|
||||
<svg viewBox="0 0 400 220" style="width:100%;height:100%">
|
||||
<defs>
|
||||
<pattern id="gridv" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1e293b" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="400" height="220" fill="url(#gridv)"/>
|
||||
<rect x="40" y="80" width="320" height="60" stroke="#475569" stroke-width="1" fill="none" stroke-dasharray="3 3"/>
|
||||
<text x="40" y="74" fill="#64748b" font-size="9" font-family="monospace">Stock: 250 × 25 × 16 mm</text>
|
||||
<!-- toolpath -->
|
||||
<path d="M40,110 L360,110 M40,100 L360,100 M40,120 L360,120 M40,90 L360,90 M40,130 L360,130" stroke="#22c55e" stroke-width="1.4" fill="none" opacity=".8"/>
|
||||
<path d="M40,110 L40,80 L60,80 L60,110 M80,110 L80,80 L100,80 L100,110 M120,110 L120,80 L140,80 L140,110" stroke="#ef4444" stroke-width="1.4" fill="none" opacity=".8"/>
|
||||
<circle cx="40" cy="110" r="3" fill="#22c55e"/>
|
||||
<circle cx="360" cy="110" r="3" fill="#ef4444"/>
|
||||
<text x="46" y="108" fill="#22c55e" font-size="8" font-family="monospace">START</text>
|
||||
<text x="332" y="108" fill="#ef4444" font-size="8" font-family="monospace">END</text>
|
||||
<!-- axes gizmo -->
|
||||
<g transform="translate(28,196)">
|
||||
<line x1="0" y1="0" x2="22" y2="0" stroke="#ef4444" stroke-width="2"/>
|
||||
<line x1="0" y1="0" x2="0" y2="-22" stroke="#3b82f6" stroke-width="2"/>
|
||||
<line x1="0" y1="0" x2="-12" y2="12" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="24" y="4" fill="#ef4444" font-size="9" font-family="monospace">X</text>
|
||||
<text x="-4" y="-26" fill="#3b82f6" font-size="9" font-family="monospace">Z</text>
|
||||
<text x="-22" y="22" fill="#22c55e" font-size="9" font-family="monospace">Y</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="viewer-tools">
|
||||
<button class="vtool" title="Fit"><i class="fa-solid fa-expand"></i></button>
|
||||
<button class="vtool on" title="Tool"><i class="fa-solid fa-screwdriver-wrench"></i></button>
|
||||
<button class="vtool" title="Stock"><i class="fa-solid fa-cube"></i></button>
|
||||
<button class="vtool" title="Origin"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></button>
|
||||
<button class="vtool" title="Top"><i class="fa-solid fa-square"></i></button>
|
||||
<button class="vtool" title="Front"><i class="fa-solid fa-square-full"></i></button>
|
||||
<button class="vtool" title="Iso"><i class="fa-solid fa-cubes"></i></button>
|
||||
</div>
|
||||
<div class="vinfo">
|
||||
<span><span class="ext">thin-rough.nc</span> · 1,785 lines · 12.4 KB</span>
|
||||
<span class="mono">est. 19:07</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============= CONSOLE ============= -->
|
||||
<div class="panel" data-panel="console" style="padding:0;gap:0">
|
||||
<div class="program-card" style="margin:18px;border-radius:18px">
|
||||
|
||||
<div class="ptab-bar">
|
||||
<button class="ptab active" data-ptab="mdi"><i class="fa-solid fa-keyboard"></i> MDI</button>
|
||||
<button class="ptab" data-ptab="messages"><i class="fa-solid fa-comment-dots"></i> Messages <span class="ptab-badge">2</span></button>
|
||||
<button class="ptab" data-ptab="indicators"><i class="fa-solid fa-bell"></i> Indicators</button>
|
||||
</div>
|
||||
|
||||
<!-- MDI sub-panel -->
|
||||
<div class="mdi active" data-sub="mdi">
|
||||
<div class="mdi-input">
|
||||
<span class="prompt">G></span>
|
||||
<span class="mono">G0 X100 Y50 F2000</span>
|
||||
<span class="cursor"></span>
|
||||
</div>
|
||||
<div class="mdi-keys">
|
||||
<button class="mkey">G0</button>
|
||||
<button class="mkey">G1</button>
|
||||
<button class="mkey">G2</button>
|
||||
<button class="mkey">G3</button>
|
||||
<button class="mkey">G28</button>
|
||||
<button class="mkey">G92</button>
|
||||
<button class="mkey">M3</button>
|
||||
<button class="mkey">M5</button>
|
||||
<button class="mkey">X</button>
|
||||
<button class="mkey">Y</button>
|
||||
<button class="mkey">Z</button>
|
||||
<button class="mkey">W</button>
|
||||
<button class="mkey">F</button>
|
||||
<button class="mkey">S</button>
|
||||
<button class="mkey clear">CLEAR</button>
|
||||
<button class="mkey send">SEND ↵</button>
|
||||
</div>
|
||||
<div class="mdi-history">
|
||||
<div class="h-row"><span class="h-time">19:42:11</span><span class="h-cmd">G21</span><span class="h-status">✓ ok</span></div>
|
||||
<div class="h-row"><span class="h-time">19:42:14</span><span class="h-cmd">G90</span><span class="h-status">✓ ok</span></div>
|
||||
<div class="h-row"><span class="h-time">19:43:02</span><span class="h-cmd">G0 Y12.800</span><span class="h-status">✓ ok</span></div>
|
||||
<div class="h-row"><span class="h-time">19:43:08</span><span class="h-cmd">G0 Z19.040</span><span class="h-status">✓ ok</span></div>
|
||||
<div class="h-row"><span class="h-time">19:43:30</span><span class="h-cmd">G1 Z-20 F800</span><span class="h-status err">✗ blocked: Z over travel</span></div>
|
||||
<div class="h-row"><span class="h-time">19:44:01</span><span class="h-cmd">G0 Z5</span><span class="h-status">✓ ok</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages sub-panel -->
|
||||
<div class="messages" data-sub="messages">
|
||||
<div class="msg warn">
|
||||
<div class="mi"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:baseline;gap:.6rem">
|
||||
<div class="mtitle">Z toolpath exceeds soft-limit</div>
|
||||
<div class="mtime">2 min ago · sticky</div>
|
||||
</div>
|
||||
<div class="mbody">Loaded program reaches <span class="mono">Z = -16.500</span>. Configured soft-limit is <span class="mono">Z = -15.000</span>. Adjust the Z origin or set a deeper soft-limit before running.</div>
|
||||
</div>
|
||||
<div class="mactions">
|
||||
<button class="mbtn">Open settings</button>
|
||||
<button class="mbtn primary">Acknowledge</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg info">
|
||||
<div class="mi"><i class="fa-solid fa-circle-info"></i></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:baseline;gap:.6rem">
|
||||
<div class="mtitle">Camera offline</div>
|
||||
<div class="mtime">12 min ago</div>
|
||||
</div>
|
||||
<div class="mbody">Camera at <span class="mono">10.1.10.55:8554</span> did not respond on last poll. Live preview disabled.</div>
|
||||
</div>
|
||||
<div class="mactions">
|
||||
<button class="mbtn">Retry</button>
|
||||
<button class="mbtn">Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg ok">
|
||||
<div class="mi"><i class="fa-solid fa-check"></i></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:baseline;gap:.6rem">
|
||||
<div class="mtitle">File uploaded · thin-rough.nc</div>
|
||||
<div class="mtime">21 min ago</div>
|
||||
</div>
|
||||
<div class="mbody">1,785 lines · 12.4 KB · checksum verified.</div>
|
||||
</div>
|
||||
<div class="mactions">
|
||||
<button class="mbtn">Open</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg error">
|
||||
<div class="mi"><i class="fa-solid fa-circle-xmark"></i></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:baseline;gap:.6rem">
|
||||
<div class="mtitle">WiFi: not connected</div>
|
||||
<div class="mtime">1 h ago</div>
|
||||
</div>
|
||||
<div class="mbody">Falling back to wired ethernet. SSID <span class="mono">workshop-2g</span> last seen 53 min ago.</div>
|
||||
</div>
|
||||
<div class="mactions">
|
||||
<button class="mbtn">Network…</button>
|
||||
<button class="mbtn">Mute</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicators sub-panel -->
|
||||
<div class="indicators" data-sub="indicators">
|
||||
<div class="ind">
|
||||
<div class="ind-label">Spindle Load</div>
|
||||
<div class="ind-val">0 %</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> idle</div>
|
||||
<div class="progress"><div style="width:0%"></div></div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Spindle Temp</div>
|
||||
<div class="ind-val">24 °C</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> nominal</div>
|
||||
<div class="progress"><div style="width:24%"></div></div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Driver Voltage</div>
|
||||
<div class="ind-val">48.1 V</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> ok</div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Coolant</div>
|
||||
<div class="ind-val">OFF</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#94a3b8"></span> standby</div>
|
||||
</div>
|
||||
|
||||
<div class="ind">
|
||||
<div class="ind-label">Limit X</div>
|
||||
<div class="ind-val" style="color:#16a34a">CLEAR</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> ok</div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Limit Y</div>
|
||||
<div class="ind-val" style="color:#16a34a">CLEAR</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> ok</div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Limit Z</div>
|
||||
<div class="ind-val" style="color:#dc2626">BLOCKED</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#dc2626"></span> over-travel</div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Probe</div>
|
||||
<div class="ind-val">OPEN</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#94a3b8"></span> not contacted</div>
|
||||
</div>
|
||||
|
||||
<div class="ind">
|
||||
<div class="ind-label">E-Stop</div>
|
||||
<div class="ind-val" style="color:#16a34a">RELEASED</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> safe</div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Door</div>
|
||||
<div class="ind-val">CLOSED</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> ok</div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Air Pressure</div>
|
||||
<div class="ind-val">6.2 bar</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> ok</div>
|
||||
<div class="progress"><div style="width:62%"></div></div>
|
||||
</div>
|
||||
<div class="ind">
|
||||
<div class="ind-label">Vacuum</div>
|
||||
<div class="ind-val">−0.81 bar</div>
|
||||
<div class="ind-state"><span class="dot" style="background:#16a34a"></span> hold</div>
|
||||
<div class="progress"><div style="width:81%"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============= SETTINGS ============= -->
|
||||
<div class="panel" data-panel="settings" style="padding:0;gap:0">
|
||||
<div class="settings active" style="padding:18px">
|
||||
<div class="set-side">
|
||||
<div class="set-item active"><i class="fa-solid fa-display"></i> Display & Units</div>
|
||||
<div class="set-item"><i class="fa-solid fa-arrows-up-down-left-right"></i> Motion</div>
|
||||
<div class="set-item"><i class="fa-solid fa-bolt"></i> Spindle</div>
|
||||
<div class="set-item"><i class="fa-solid fa-shield-halved"></i> Safety / Soft-limits</div>
|
||||
<div class="set-item"><i class="fa-solid fa-network-wired"></i> Network</div>
|
||||
<div class="set-item"><i class="fa-solid fa-video"></i> Camera</div>
|
||||
<div class="set-item"><i class="fa-solid fa-keyboard"></i> Macros</div>
|
||||
<div class="set-item"><i class="fa-solid fa-circle-info"></i> About</div>
|
||||
</div>
|
||||
<div class="set-content">
|
||||
<div class="set-card">
|
||||
<div class="set-title">Display & Units</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">Display Units</div>
|
||||
<div class="desc">Position, feed and dimensions throughout the UI.</div>
|
||||
</div>
|
||||
<div><div class="step-seg" style="display:inline-flex"><button class="active">METRIC</button><button>IMPERIAL</button></div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">Decimal places</div>
|
||||
<div class="desc">Position readout precision.</div>
|
||||
</div>
|
||||
<div><input class="set-input" value="3" /></div>
|
||||
<div class="val">0–4</div>
|
||||
</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">Pulse-dot animation</div>
|
||||
<div class="desc">Animate status badges (ready, idle, alarm).</div>
|
||||
</div>
|
||||
<div><div class="set-toggle on"></div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">Theme</div>
|
||||
<div class="desc">Pick a tile finish.</div>
|
||||
</div>
|
||||
<div><span class="file-select"><i class="fa-solid fa-palette" style="color:#64748b"></i> V09 · Flat soft slate <i class="fa-solid fa-chevron-down caret"></i></span></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-card">
|
||||
<div class="set-title">Network</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">IP Address</div>
|
||||
<div class="desc">Wired ethernet, DHCP.</div>
|
||||
</div>
|
||||
<div><span class="mono" style="font-size:1.05rem;font-weight:700">10.1.10.55</span></div>
|
||||
<div><button class="mbtn">Edit</button></div>
|
||||
</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">WiFi</div>
|
||||
<div class="desc">Wireless network connection.</div>
|
||||
</div>
|
||||
<div><span class="chip chip-red"><i class="fa-solid fa-wifi"></i> Not connected</span></div>
|
||||
<div><button class="mbtn primary">Configure</button></div>
|
||||
</div>
|
||||
<div class="set-row">
|
||||
<div>
|
||||
<div class="label">Hostname</div>
|
||||
<div class="desc">Used in mDNS / Bonjour discovery.</div>
|
||||
</div>
|
||||
<div><input class="set-input" value="onefinity-shop.local" style="width:300px" /></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ----- Build G-code list -----
|
||||
const gcodeLines = [
|
||||
[1,'G21','word'],[2,'; X = along blank, Z = tool entry from top, Y fixed','c'],
|
||||
[3,'; Y fixed to blank center: 12.800','c'],[4,'; nominal rapid: 3200.0 mm/min','c'],
|
||||
[5,'; stock top Z: -0.960','c'],[6,'; deepest allowed cut Z: -16.500','c'],
|
||||
[7,'G21','word'],[8,'G90','word'],[9,'G0 Y12.800','word'],
|
||||
[10,'G0 Z19.040','word'],[11,'; rough pass 1 radius=18.540','c'],
|
||||
[12,'G0 X0.000','word'],[13,'G1 Z-0.710 F800.000','word cur'],
|
||||
[14,'G1 Z-0.960 F200.000','word'],[15,'G4 P0.250','word'],
|
||||
[16,'G1 X249.500 F200.000','word'],[17,'G4 P0.250','word'],
|
||||
[18,'G0 Z19.040','word'],[19,'; rough pass 2 radius=17.540','c'],
|
||||
[20,'G0 X0.000','word'],[21,'G1 Z-1.710 F800.000','word'],
|
||||
[22,'G1 Z-1.960 F200.000','word'],[23,'G4 P0.250','word'],
|
||||
[24,'G1 X249.500 F200.000','word'],[25,'G4 P0.250','word'],
|
||||
[26,'G0 Z19.040','word'],[27,'; rough pass 3 radius=16.540','c'],
|
||||
[28,'G0 X0.000','word'],[29,'G1 Z-2.710 F800.000','word'],
|
||||
[30,'G1 Z-2.960 F200.000','word'],[31,'G4 P0.250','word'],
|
||||
[32,'G1 X249.500 F200.000','word'],[33,'G4 P0.250','word'],
|
||||
[34,'G0 Z19.040','word'],[35,'; rough pass 4 radius=15.540','c'],
|
||||
];
|
||||
document.getElementById('gcode-list').innerHTML = gcodeLines.map(([n,t,cls])=>{
|
||||
const isComment = cls.includes('c');
|
||||
const isCur = cls.includes('cur');
|
||||
const cls2 = 'gline' + (isCur?' cur':'');
|
||||
const inner = isComment ? `<span class="gcomment">${t}</span>` : `<span class="gword">${t}</span>`;
|
||||
return `<div class="${cls2}"><span class="gn">${n}</span><span>${inner}</span></div>`;
|
||||
}).join('');
|
||||
|
||||
// ----- Top tab switching (Control / Program / Settings) -----
|
||||
document.querySelectorAll('.ktab').forEach(b=>{
|
||||
b.addEventListener('click', ()=>{
|
||||
const target = b.dataset.target;
|
||||
document.querySelectorAll('.ktab').forEach(x=>x.classList.remove('active'));
|
||||
b.classList.add('active');
|
||||
document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
|
||||
document.querySelector(`.panel[data-panel="${target}"]`).classList.add('active');
|
||||
applyScale();
|
||||
});
|
||||
});
|
||||
|
||||
// ----- Console sub-tab switching (MDI / Messages / Indicators) -----
|
||||
function showSub(name){
|
||||
document.querySelectorAll('.ptab').forEach(x=>x.classList.toggle('active', x.dataset.ptab===name));
|
||||
document.querySelectorAll('[data-sub]').forEach(s=>{
|
||||
const on = s.dataset.sub===name;
|
||||
if(s.classList.contains('messages') || s.classList.contains('indicators') || s.classList.contains('mdi')){
|
||||
s.classList.toggle('active', on);
|
||||
}
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('.ptab').forEach(b=>{
|
||||
b.addEventListener('click', ()=>{ showSub(b.dataset.ptab); });
|
||||
});
|
||||
// Default Console sub: MDI active
|
||||
document.querySelectorAll('.messages[data-sub], .indicators[data-sub]').forEach(s=>s.classList.remove('active'));
|
||||
|
||||
// ----- Scaling -----
|
||||
const stage = document.getElementById('stage');
|
||||
const scaler = document.getElementById('scaler');
|
||||
const viewport = document.getElementById('viewport');
|
||||
const fitBtn = document.getElementById('fitBtn');
|
||||
const oneToOne = document.getElementById('oneToOne');
|
||||
const scaleInfo = document.getElementById('scaleInfo');
|
||||
let mode = 'fit';
|
||||
function activeKioskHeight(){
|
||||
const m = document.querySelector('.kiosk');
|
||||
return m ? Math.max(1080, m.offsetHeight) : 1080;
|
||||
}
|
||||
function applyScale(){
|
||||
let s;
|
||||
if(mode==='1:1'){
|
||||
s = 1; scaleInfo.textContent = '100% · 1920px wide';
|
||||
} else {
|
||||
const sw = stage.clientWidth - 32;
|
||||
s = Math.min(sw/1920, 1);
|
||||
scaleInfo.textContent = Math.round(s*100) + '% · 1920px wide';
|
||||
}
|
||||
const h = activeKioskHeight();
|
||||
scaler.style.transform = `scale(${s})`;
|
||||
viewport.style.width = (1920 * s) + 'px';
|
||||
viewport.style.height = (h * s) + 'px';
|
||||
}
|
||||
window.addEventListener('resize', applyScale);
|
||||
fitBtn.addEventListener('click', ()=>{ mode='fit'; fitBtn.classList.add('on'); oneToOne.classList.remove('on'); applyScale(); });
|
||||
oneToOne.addEventListener('click', ()=>{ mode='1:1'; oneToOne.classList.add('on'); fitBtn.classList.remove('on'); applyScale(); });
|
||||
applyScale();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
169
plans/2026-04-30_ux_redesign.md
Normal file
169
plans/2026-04-30_ux_redesign.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# UX Redesign — Implementation Plan
|
||||
|
||||
Reference mock: `docs/mocks/v09_full_ux.html`
|
||||
Target hardware: 10.8" portable monitor, 1920×1080, capacitive touch, Chrome fullscreen.
|
||||
|
||||
## 1. Goals
|
||||
|
||||
The redesign keeps every existing feature but reorganizes the page into a single-screen control surface for finger-touch use:
|
||||
|
||||
- A slim 96 px header replaces the 140 px nav-header. Only logo + ONEFINITY wordmark + tab bar + system pill + READY badge + octagonal STOP.
|
||||
- 4 top-level sections accessed via underline-ribbon tabs in the header:
|
||||
1. **Control** — jog pad, DRO table, status strip, macro row.
|
||||
2. **Program** — Auto run controls, file actions, G-code listing, 3D viewer.
|
||||
3. **Console** — MDI, Messages, Indicators (sub-tabs).
|
||||
4. **Settings** — paged settings (replaces the Pure left rail).
|
||||
- Touch targets ≥ 64 px (jog tiles 72 px, axis action icons 72 px, macro buttons 84 px).
|
||||
- All action chip-soup (WiFi/Camera/Rotary/IP/Version) collapses into one "All systems · view" pill that opens a popover. Burger menu removed (Settings tab supersedes it).
|
||||
- V09 jog/macro palette: flat soft slate (#3f4b63), no drop shadow; yellow (#fde047) accent for active states (step seg, tab underline, macro number badge).
|
||||
- Spindle override / feed override sliders live in a bottom-edge drawer triggered by tapping the Spindle KPI tile (no permanent screen real estate).
|
||||
- Hard cut: no `config.ui.layout` flag; the new shell replaces the old in a single release.
|
||||
|
||||
## 2. Scope of code change
|
||||
|
||||
The build is Pug + Stylus + Browserify Vue (Vue 1.x). `index.pug` defines the chrome; `src/pug/templates/*.pug` defines each view; `src/js/*.js` mirrors them as Vue components routed by `currentView` from the URL hash.
|
||||
|
||||
Files we will touch:
|
||||
|
||||
- `src/pug/index.pug` — replace `#layout / #menu / #main / .nav-header` with the new header + tab bar + body. Drop the burger and the side-menu include.
|
||||
- `src/pug/templates/control-view.pug` — restructure into the new Control panel (jog grid + DRO table + status strip + macro row). MDI/Messages/Indicators move out.
|
||||
- New `src/pug/templates/program-view.pug` — Auto sub-panel content (action bar, file bar, gcode-viewer, path-viewer).
|
||||
- New `src/pug/templates/console-view.pug` — MDI / Messages / Indicators sub-tabs hosting existing `console.pug` and `indicators.pug` partials.
|
||||
- `src/js/app.js` — extend `parse_hash` so `#program`, `#console`, `#settings` resolve; expose tab state for the header to highlight.
|
||||
- `src/js/control-view.js` — keep jog/DRO logic, drop the Auto/MDI/Messages/Indicators internal `tab` state and template hooks.
|
||||
- New `src/js/program-view.js`, `src/js/console-view.js` — extracted Vue components.
|
||||
- `src/stylus/style.styl` — add `.app-shell`, `.head`, `.tabs-host`, `.ktab`, panel styles, V09 jog tokens. Keep legacy classes alive until templates fully migrated.
|
||||
- `src/static/css/side-menu.css` — stop including in `index.pug`.
|
||||
- Settings: keep `settings-view.pug`, `admin-general-view.pug`, `admin-network-view.pug`, `motor-view.pug`, `tool-view.pug`, `io-view.pug`, etc., and surface them through a left-rail navigator inside the Settings panel rather than the sidebar.
|
||||
- Settings → Macros owns the full macro list (1…N). Control's macro row is a slice of the first 8; reordering happens in Settings.
|
||||
|
||||
## 3. Routing model
|
||||
|
||||
We keep the existing URL hash routing because everything in `src/js/app.js#parse_hash` and the deep-linked menu items (`#motor:0`, `#admin-network`, etc.) depend on it.
|
||||
|
||||
| URL hash | Top tab | Notes |
|
||||
|-------------------------|------------|-------------------------------------------------------|
|
||||
| `#control` | Control | Default |
|
||||
| `#program` / `#program:auto` | Program | Auto sub-view (only sub-view for now) |
|
||||
| `#console` / `#console:mdi` | Console | MDI default, also `:messages` and `:indicators` |
|
||||
| `#settings` | Settings | Settings home (Display & Units) |
|
||||
| `#admin-general`, `#admin-network`, `#motor:N`, `#tool`, `#io`, `#help`, `#cheat-sheet` | Settings | Existing routes remain, surfaced in the Settings left rail |
|
||||
|
||||
The header tab bar maps URL prefix → active tab. A tiny helper `topTabFromHash(hash)` lives in `app.js` and is reused by the header template.
|
||||
|
||||
## 4. Step-by-step
|
||||
|
||||
### Phase 1 — Mock parity (1–2 days)
|
||||
1. Add `docs/mocks/v09_full_ux.html` (done) so anyone can preview the target.
|
||||
2. Move the V09 palette into Stylus tokens at the top of `style.styl`:
|
||||
```styl
|
||||
$jog-bg = #3f4b63
|
||||
$jog-hover = #4a5777
|
||||
$jog-dir = #5b6885
|
||||
$jog-ghost = #8c97ad
|
||||
$accent = #fde047
|
||||
$accent-ink = #0f172a
|
||||
```
|
||||
3. Build the header in `index.pug`:
|
||||
```pug
|
||||
.app-shell
|
||||
header.head
|
||||
.brand-blk
|
||||
.brand-logo
|
||||
.brand-name ONEFINITY
|
||||
nav.tabs-host(role="tablist")
|
||||
a.ktab(:class="{active: topTab === 'control'}", href="#control")
|
||||
.fa.fa-gamepad
|
||||
| Control
|
||||
a.ktab(:class="{active: topTab === 'program'}", href="#program") …
|
||||
a.ktab(:class="{active: topTab === 'console'}", href="#console") …
|
||||
a.ktab(:class="{active: topTab === 'settings'}", href="#settings") …
|
||||
button.sys-btn(@click="toggle_sys_popover") …
|
||||
span.state-badge(:class="state_class")
|
||||
estop(@click="estop")
|
||||
```
|
||||
4. Style the header tabs as **underline ribbon** (V02): transparent fills, slate-gray text, dark text + 5 px yellow underline on active. CSS already proven in the mock.
|
||||
5. Move the rotary toggle and pi-temp warning into the system pill popover.
|
||||
|
||||
### Phase 2 — Control panel (2 days)
|
||||
1. Rewrite the outer markup of `control-view.pug` to a CSS grid:
|
||||
```
|
||||
.control-grid → 720px jog-card | 1fr right-col(dro-card + status-strip)
|
||||
```
|
||||
Drop the `<table>`-based outer layout (axes table stays — it's a real data table).
|
||||
2. Replace the legacy `<button>` elements in the jog table with `.jbtn` markup that pulls colors from `$jog-*` tokens. Keep the `@click="jog_fn(...)"` bindings unchanged.
|
||||
3. Build the new `.step-seg` with the existing `jog_incr` model. The four buttons stay wired to `jog_incr = 'fine' | 'small' | 'medium' | 'large'`.
|
||||
4. Build `.dro-card` from the existing `table.axes` markup. Each row gets the new 7-column grid; axis cells just need `.dro-axis`, `.dro-pos`, `.dro-sec` classes.
|
||||
5. Move the four KPI tiles (`State / Velocity-Feed / Spindle / Job`) into `.status-strip`. Existing `state.v`, `state.feed`, `state.s`, `state.line` bindings are unchanged.
|
||||
6. Move `.macros-div` into a `.macro-row` 8-column grid. The row binds to `config.macros.slice(0, 8)`; macros 9…N are editable and runnable only from Settings → Macros (no drawer in Control). Reordering in Settings changes which macros appear in the visible 8.
|
||||
7. Drop the legacy `.tabs / #tab1 …` block from `control-view.pug` entirely.
|
||||
|
||||
### Phase 3 — Program panel (1.5 days)
|
||||
1. New file `src/pug/templates/program-view.pug` with `.program-card` and the action / file bars.
|
||||
2. Move the Auto bar (RUN, STOP, UPLOAD FOLDER, UPLOAD FILE, DOWNLOAD FILE, DELETE) and the file-select strip (Create Folder, Delete Folder, folder picker, file picker, sort) out of `control-view.pug` into here. Use the V09 button styles (`.action-btn`, `.action-btn.run`, `.action-btn.danger`, `.file-btn`, `.file-select`).
|
||||
3. Embed `path-viewer` and `gcode-viewer` in `.program-body { 1fr 600px }`. Both Vue components render unchanged.
|
||||
4. New `src/js/program-view.js` exporting the same data model the existing `Auto` tab uses (`gcode_files`, `state.selected`, `start_pause`, etc.). The fastest path: move the relevant computed/methods into a mixin `gcode-program-mixin.js` consumed by both old and new components during the migration.
|
||||
5. Wire `<component :is="currentView + '-view'">` in `index.pug` to pick up `program-view`.
|
||||
|
||||
### Phase 4 — Console panel (1 day)
|
||||
1. New `src/pug/templates/console-view.pug` with the inner `.ptab-bar` (MDI / Messages / Indicators) and `data-sub` panels.
|
||||
2. The MDI panel reuses the existing `<input v-model="mdi" @keyup.enter="submit_mdi">` plus the on-screen keypad (G0/G1/G2/G3/G28/G92/M3/M5 + axis letters + CLEAR/SEND).
|
||||
3. The Messages panel pulls from the existing `popupMessages` array + a new `messages_log` state we will accumulate from `app.js`'s `error` and `popupMessages` channels (no protocol change).
|
||||
4. The Indicators panel mounts the existing `<indicators :state="state" :template="template">` component.
|
||||
5. Sub-tab state is local Vue state (`activeSub: 'mdi' | 'messages' | 'indicators'`) plus URL fragment after `:` so deep links keep working.
|
||||
|
||||
### Phase 5 — Settings panel (1 day)
|
||||
1. New `src/pug/templates/settings-view.pug` with a left rail and a content slot.
|
||||
2. The left rail is data-driven from a list of existing settings views: General, Network, Motion (settings-view), Spindle (tool-view), Safety (admin-general subset), Camera, Macros (settings-view subset), I/O, Motors, Help, About.
|
||||
3. The content slot uses `<component :is="settingsSub + '-view'">` so each existing pug template renders unchanged (`admin-general-view.pug`, `admin-network-view.pug`, `motor-view.pug`, `tool-view.pug`, `io-view.pug`, `settings-view.pug`, `help-view.pug`, `cheat-sheet-view.pug`).
|
||||
4. Existing routes (`#admin-network`, `#motor:0`, …) resolve to Settings + the matching left-rail item. We lose nothing.
|
||||
5. Decommission the side menu in `index.pug` and stop including `side-menu.css`.
|
||||
|
||||
### Phase 6 — Polish & rollout (0.5 days)
|
||||
1. Pulse-dot animation for the READY badge (CSS keyframes already in the mock).
|
||||
2. System pill popover content: WiFi state + button, Camera state + retry, Rotary toggle, IP address, firmware version, "Open Settings".
|
||||
3. Disabled states: jog buttons + macro buttons honor `is_ready` like before; gray them out instead of hiding.
|
||||
4. Decimal-places setting from the existing `display_units` plumbing — wire to a new `precision` config the DRO reads.
|
||||
5. Build the **Spindle override drawer**: clicking the `.stat-card` for Spindle toggles `.override-drawer.open` anchored to the bottom edge of the body. The drawer hosts the two existing `<input type="range">` controls for `feed_override` and `speed_override` plus `Reset` buttons. Bind to the existing `override_feed` / `override_speed` methods.
|
||||
6. **Hard cut cleanup:** delete the legacy `.nav-header`, side-menu markup, and the inline `.tabs / #tab1…#tab4` block from `control-view.pug`. Remove `src/static/css/side-menu.css` from `index.pug` includes. Sweep `style.styl` for orphan rules (`.nav-header`, `.brand`, `.menu-link`, `.pure-menu*` overrides, `.tabs > input` selectors) and delete them in the same commit so we don't ship dead CSS.
|
||||
|
||||
## 5. Migration risks & mitigations
|
||||
|
||||
| Risk | Mitigation |
|
||||
|----------------------------------------------|---------------------------------------------------------------------------------------------|
|
||||
| Existing deep links from PDFs / forum posts (`#admin-network`) break | Keep the same hashes; only their visual shell changes. `parse_hash` resolves them. |
|
||||
| Vue 1.x doesn't support modern slot syntax we used in the mock | The mock is plain HTML for visual review; production code uses the existing Vue 1 patterns. No new Vue features required. |
|
||||
| Touch monitor with HDMI vs USB-C may report different DPI | The new layout is fluid inside 1920 × 1080 only when fullscreen Chrome. Provide a CSS `@media (max-width: 1820px)` fallback that scales the macro row to 4 columns and stacks the right column under the jog. |
|
||||
| Existing customers rely on muscle memory of the side menu | Settings tab opens directly to the same left-rail navigator. First-launch toast: "Side menu moved to Settings." |
|
||||
| `path-viewer` / `gcode-viewer` are heavy three.js components | They live in the Program tab now; we lazy-mount with `v-if="currentView === 'program'"` so Control stays light. |
|
||||
| MDI input could lose focus when the inner `.ptab` is switched | Keep the input mounted, just hide non-active subs with `display:none`. |
|
||||
|
||||
## 6. Testing checklist
|
||||
|
||||
- Chrome on the 10.8" 1920 × 1080 monitor, fullscreen — every panel fits without scrolling at 100 %.
|
||||
- Chrome at 1366 × 768 — fallback layout works (Control collapses jog above DRO).
|
||||
- Touch hit-tests: every interactive target ≥ 48 px on its shortest side, primary jog tiles ≥ 72 px.
|
||||
- Existing flows still work end-to-end: home all axes, run a small program, MDI a `G0 X10`, switch to Imperial, upload a folder, delete a file.
|
||||
- Hash routing: hand-type `#motor:1` and confirm Settings tab activates with Motor 1 selected.
|
||||
- Spindle override drawer: tap Spindle KPI tile, sliders move feed/speed override, `Reset` returns both to 100 %, tile tap closes drawer.
|
||||
- Macro row shows macros 1–8 only; reordering in Settings → Macros changes which 8 appear on Control.
|
||||
- Pulse-dot animation respects `prefers-reduced-motion`.
|
||||
- Hard-cut cleanup verified: `git grep` finds no references to the old `.nav-header`, `side-menu.css`, or the `#tab1…#tab4` selectors after the rename.
|
||||
|
||||
## 7. Estimated effort
|
||||
|
||||
About 6–7 working days for one developer:
|
||||
|
||||
1. Mock parity & header — 1.5 days
|
||||
2. Control panel (incl. macro slice + DRO grid) — 2 days
|
||||
3. Program panel — 1.5 days
|
||||
4. Console panel — 1 day
|
||||
5. Settings shell — 1 day
|
||||
6. Override drawer, polish, hard-cut cleanup, regression tests — 0.5–1 day
|
||||
|
||||
## 8. Resolved decisions
|
||||
|
||||
- **Rollout: hard cut.** No `config.ui.layout` feature flag, no parallel legacy shell. The new `index.pug` tree replaces the old one in a single release; the old `.nav-header`, side menu, and embedded `.tabs` block are deleted (not gated). One pre-release internal QA pass on real hardware before tagging.
|
||||
- **Macros above 8: Settings owns the master list; Control surfaces the first 8 (configurable).** The Control macro row reads from `config.macros[0..7]`; everything beyond index 7 is editable / runnable only from Settings → Macros. Users can reorder which macros land in the visible 8 there.
|
||||
- **"Pin to Control" indicator slot: defer.** Not in this redesign. Tracked as a follow-up; current status strip stays fixed at State / Velocity·Feed / Spindle / Job.
|
||||
- **Feed & spindle override: drawer triggered by the Spindle KPI tile.** The Spindle card in the status strip becomes tappable. Tap opens a bottom-edge drawer (≈ 220 px tall) containing the two existing range inputs (`feed_override`, `speed_override`) at touch-friendly size with `Reset to 100 %` buttons. Closes by tapping the tile again or the drawer chevron. No protocol change; reuses the existing `override_feed` / `override_speed` handlers.
|
||||
208
src/js/app.js
208
src/js/app.js
@@ -103,6 +103,17 @@ module.exports = new Vue({
|
||||
return {
|
||||
status: "connecting",
|
||||
currentView: "loading",
|
||||
// Top-level shell tab. Mapped from the URL hash by parse_hash().
|
||||
// One of: control | program | console | settings
|
||||
top_tab: "control",
|
||||
// Sub-route when a tab has internal pages (e.g. console:mdi,
|
||||
// settings:admin-network, settings:motor:0). The settings sub
|
||||
// also drives which inner view is mounted.
|
||||
sub_tab: "",
|
||||
sys_open: false,
|
||||
has_camera: true,
|
||||
messages_log: [],
|
||||
messages_seen: 0,
|
||||
display_units: localStorage.getItem("display_units") || "METRIC",
|
||||
index: -1,
|
||||
modified: false,
|
||||
@@ -143,22 +154,15 @@ module.exports = new Vue({
|
||||
estop: { template: "#estop-template" },
|
||||
"loading-view": { template: "<h1>Loading...</h1>" },
|
||||
"control-view": require("./control-view"),
|
||||
"settings-view": require("./settings-view"),
|
||||
"motor-view": require("./motor-view"),
|
||||
"tool-view": require("./tool-view"),
|
||||
"io-view": require("./io-view"),
|
||||
"admin-general-view": require("./admin-general-view"),
|
||||
"admin-network-view": require("./admin-network-view"),
|
||||
"macros-view": require('./macros'),
|
||||
"help-view": require("./help-view"),
|
||||
"cheat-sheet-view": {
|
||||
template: "#cheat-sheet-view-template",
|
||||
data: function() {
|
||||
return {
|
||||
showUnimplemented: false
|
||||
};
|
||||
},
|
||||
},
|
||||
"program-view": require("./program-view"),
|
||||
"console-view": require("./console-view"),
|
||||
|
||||
// The settings-shell renders the rail + an inner routed view.
|
||||
// All settings-family hashes (settings, admin-general,
|
||||
// admin-network, motor:N, tool, io, macros, help, cheat-sheet)
|
||||
// resolve to this same shell; parse_hash() sets sub_tab so the
|
||||
// shell knows which inner template to mount.
|
||||
"settings-shell-view": require("./settings-shell-view"),
|
||||
},
|
||||
|
||||
watch: {
|
||||
@@ -166,6 +170,25 @@ module.exports = new Vue({
|
||||
localStorage.setItem("display_units", value);
|
||||
SvelteComponents.setDisplayUnits(value);
|
||||
},
|
||||
|
||||
// Mirror controller messages into a console log used by the
|
||||
// Console > Messages tab and the header badge counter.
|
||||
"state.messages": {
|
||||
handler: function(messages) {
|
||||
if (!Array.isArray(messages)) return;
|
||||
this.messages_log = messages.map(m => ({
|
||||
text: m.text,
|
||||
id: m.id,
|
||||
level: /^#/.test(m.text || "") ? "info" : "warning",
|
||||
ts: m.ts || Date.now(),
|
||||
}));
|
||||
if (this.top_tab === "console" && this.sub_tab === "messages") {
|
||||
this.messages_seen = this.messages_log.length;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
events: {
|
||||
@@ -252,18 +275,106 @@ module.exports = new Vue({
|
||||
enable_rotary: function() {
|
||||
if(this.state["2an"] == 1 || this.state["2an"] == 3) return true;
|
||||
return false;
|
||||
},
|
||||
|
||||
// ---------------- header chrome helpers ----------------
|
||||
|
||||
// Underlying machine state from the controller. Mirrors
|
||||
// control-view's `mach_state` so the header has access without
|
||||
// depending on the routed component.
|
||||
mach_state: function() {
|
||||
const cycle = this.state.cycle;
|
||||
const xx = this.state.xx;
|
||||
|
||||
if (xx != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
|
||||
return cycle.toUpperCase();
|
||||
}
|
||||
|
||||
return xx || "";
|
||||
},
|
||||
|
||||
// Short text for the READY pill in the header.
|
||||
state_label: function() {
|
||||
const s = this.mach_state;
|
||||
if (!s) return "--";
|
||||
return s;
|
||||
},
|
||||
|
||||
// Class added to the READY pill (.state-badge) so styling can
|
||||
// reflect ready / running / holding / fault / estop.
|
||||
state_class: function() {
|
||||
const s = this.mach_state;
|
||||
if (s == "ESTOPPED" || s == "FAULT" || s == "SHUTDOWN") return "bad";
|
||||
if (s == "HOLDING" || s == "STOPPING") return "warn";
|
||||
if (s == "RUNNING" || s == "HOMING" || s == "JOGGING") return "busy";
|
||||
if (s == "READY") return "ok";
|
||||
return "unknown";
|
||||
},
|
||||
|
||||
mach_state_full: function() {
|
||||
const s = this.mach_state;
|
||||
if (s == "ESTOPPED") return "E-Stopped \u2014 release to clear";
|
||||
if (s == "HOLDING") return "Feed hold (" + (this.state.pr || "paused") + ")";
|
||||
if (s == "RUNNING") return "Running program";
|
||||
if (s == "HOMING") return "Homing axes";
|
||||
if (s == "JOGGING") return "Jogging";
|
||||
if (s == "READY") return "Ready";
|
||||
return s;
|
||||
},
|
||||
|
||||
// Pip color for the unified system pill.
|
||||
sys_class: function() {
|
||||
const wifi_off = !this.config.wifiName || this.config.wifiName == "not connected";
|
||||
const cam_off = !this.has_camera;
|
||||
const hot = this.state && 80 <= this.state.rpi_temp;
|
||||
if (hot) return "red";
|
||||
if (wifi_off || cam_off) return "amber";
|
||||
return "green";
|
||||
},
|
||||
|
||||
// Compact summary for the system pill.
|
||||
sys_summary: function() {
|
||||
const issues = [];
|
||||
if (!this.config.wifiName || this.config.wifiName == "not connected") {
|
||||
issues.push("WiFi off");
|
||||
}
|
||||
if (!this.has_camera) issues.push("Camera offline");
|
||||
if (this.state && 80 <= this.state.rpi_temp) issues.push("Pi hot");
|
||||
if (this.is_rotary_active) issues.push("Rotary");
|
||||
if (issues.length === 0) return "All systems";
|
||||
if (issues.length === 1) return issues[0];
|
||||
return issues.length + " notes";
|
||||
},
|
||||
|
||||
// Number of unread Console > Messages entries.
|
||||
messages_count: function() {
|
||||
return Math.max(0, this.messages_log.length - this.messages_seen);
|
||||
},
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
window.onhashchange = () => this.parse_hash();
|
||||
|
||||
// Resolve the initial route before the websocket connects so
|
||||
// the shell shows the right view even on a slow / offline
|
||||
// controller. update() will call parse_hash() again once the
|
||||
// first config is in.
|
||||
this.parse_hash();
|
||||
|
||||
this.connect();
|
||||
|
||||
// Close the system popover when clicking anywhere else.
|
||||
document.addEventListener("click", () => {
|
||||
if (this.sys_open) this.sys_open = false;
|
||||
});
|
||||
|
||||
SvelteComponents.registerControllerMethods({
|
||||
dispatch: (...args) => this.$dispatch(...args)
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
methods: {
|
||||
block_error_dialog: function() {
|
||||
this.errorTimeoutStart = Date.now();
|
||||
@@ -421,6 +532,21 @@ module.exports = new Vue({
|
||||
};
|
||||
},
|
||||
|
||||
// Maps a URL hash to (currentView, top_tab, sub_tab, index).
|
||||
// Hash layouts supported (all kept for backward compat):
|
||||
// #control -> control tab
|
||||
// #program[:auto] -> program tab
|
||||
// #console[:mdi|messages|indicators]
|
||||
// -> console tab
|
||||
// #settings -> settings tab home
|
||||
// #admin-general -> settings tab, admin-general inside
|
||||
// #admin-network -> settings tab, admin-network inside
|
||||
// #motor:0..3 -> settings tab, motor 0..3
|
||||
// #tool -> settings tab, tool view
|
||||
// #io -> settings tab, io view
|
||||
// #macros -> settings tab, macros view
|
||||
// #help -> settings tab, help view
|
||||
// #cheat-sheet -> settings tab, cheat sheet view
|
||||
parse_hash: function() {
|
||||
const hash = location.hash.substr(1);
|
||||
|
||||
@@ -430,12 +556,56 @@ module.exports = new Vue({
|
||||
}
|
||||
|
||||
const parts = hash.split(":");
|
||||
const head = parts[0];
|
||||
|
||||
if (parts.length == 2) {
|
||||
this.index = parts[1];
|
||||
this.index = parts.length > 1 ? parts[1] : -1;
|
||||
|
||||
// Legacy / settings-managed views resolve under the
|
||||
// Settings tab while keeping their existing top-level
|
||||
// hash. This preserves all existing deep links.
|
||||
const settingsViews = [
|
||||
"settings", "admin-general", "admin-network",
|
||||
"motor", "tool", "io", "macros",
|
||||
"help", "cheat-sheet",
|
||||
];
|
||||
|
||||
if (head == "control") {
|
||||
this.top_tab = "control";
|
||||
this.sub_tab = "";
|
||||
this.currentView = "control";
|
||||
} else if (head == "program") {
|
||||
this.top_tab = "program";
|
||||
this.sub_tab = parts[1] || "auto";
|
||||
this.currentView = "program";
|
||||
} else if (head == "console") {
|
||||
this.top_tab = "console";
|
||||
this.sub_tab = parts[1] || "mdi";
|
||||
this.currentView = "console";
|
||||
} else if (settingsViews.indexOf(head) !== -1) {
|
||||
this.top_tab = "settings";
|
||||
this.sub_tab = head;
|
||||
// All settings-family routes mount the same shell;
|
||||
// shell picks inner view from sub_tab. Vary the
|
||||
// currentView token so Vue 1 fully remounts the
|
||||
// shell on every navigation — this avoids stale :class
|
||||
// bindings against the local `sub` data prop.
|
||||
this.currentView = "settings-shell";
|
||||
} else {
|
||||
// Unknown hash: route to settings shell anyway so we
|
||||
// never end up rendering a bare loading screen.
|
||||
this.top_tab = "settings";
|
||||
this.sub_tab = head;
|
||||
this.currentView = "settings-shell";
|
||||
}
|
||||
|
||||
this.currentView = parts[0];
|
||||
// Mark Console messages as seen when we enter that tab.
|
||||
if (this.top_tab == "console" && this.sub_tab == "messages") {
|
||||
this.messages_seen = this.messages_log.length;
|
||||
}
|
||||
},
|
||||
|
||||
toggle_sys_popover: function() {
|
||||
this.sys_open = !this.sys_open;
|
||||
},
|
||||
|
||||
save: async function() {
|
||||
|
||||
@@ -32,6 +32,10 @@ module.exports = {
|
||||
return this._compute_axis("c");
|
||||
},
|
||||
|
||||
w: function() {
|
||||
return this._compute_aux_axis();
|
||||
},
|
||||
|
||||
axes: function() {
|
||||
return this._compute_axes();
|
||||
}
|
||||
@@ -203,6 +207,52 @@ module.exports = {
|
||||
return false;
|
||||
},
|
||||
|
||||
_compute_aux_axis: function() {
|
||||
// Virtual W axis driven by the auxcnc ESP32. Position, homed
|
||||
// flag and presence come from the bbctrl AuxAxis driver via
|
||||
// state.aux_*. No motor mapping, no soft-limit warnings on
|
||||
// toolpath bounds (auxcnc enforces its own).
|
||||
const enabled = !!this.state.aux_enabled;
|
||||
const present = !!this.state.aux_present;
|
||||
const homed = !!this.state.aux_homed;
|
||||
const pos = this.state.aux_pos || 0;
|
||||
|
||||
let klass = `${homed ? "homed" : "unhomed"} axis-w`;
|
||||
let state = present ? "UNHOMED" : "OFFLINE";
|
||||
let icon = present ? "question-circle" : "plug";
|
||||
let title = present
|
||||
? "Click the home button to home W axis."
|
||||
: "Aux controller not connected on /dev/ttyUSB0.";
|
||||
if (homed) {
|
||||
state = "HOMED";
|
||||
icon = "check-circle";
|
||||
title = "W axis successfully homed.";
|
||||
} else if (!present) {
|
||||
klass += " error";
|
||||
}
|
||||
|
||||
return {
|
||||
pos: pos,
|
||||
abs: pos,
|
||||
off: 0,
|
||||
min: 0, max: 0, dim: 0,
|
||||
pathMin: 0, pathMax: 0, pathDim: 0,
|
||||
motor: -1,
|
||||
enabled: enabled,
|
||||
homingMode: "limit-switch",
|
||||
homed: homed,
|
||||
klass: klass,
|
||||
state: state,
|
||||
icon: icon,
|
||||
title: title,
|
||||
ticon: "check-circle",
|
||||
tstate: "OK",
|
||||
toolmsg: "W axis is not constrained by tool path bounds.",
|
||||
tklass: `${homed ? "homed" : "unhomed"} axis-w`,
|
||||
isAux: true,
|
||||
};
|
||||
},
|
||||
|
||||
_compute_axes: function() {
|
||||
let homed = false;
|
||||
|
||||
|
||||
125
src/js/console-view.js
Normal file
125
src/js/console-view.js
Normal file
@@ -0,0 +1,125 @@
|
||||
"use strict";
|
||||
|
||||
const api = require("./api");
|
||||
|
||||
// Console tab — MDI command input, message log and live indicators.
|
||||
// Sub-tab state syncs with the URL hash (#console:mdi |
|
||||
// #console:messages | #console:indicators) so deep links work.
|
||||
|
||||
module.exports = {
|
||||
template: "#console-view-template",
|
||||
props: ["config", "template", "state"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
mdi: "",
|
||||
history: [],
|
||||
sub: "mdi",
|
||||
// Local mirror of $root.messages_count so Vue 1 reactivity works.
|
||||
unread_messages_local: 0,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
sub: function () {
|
||||
// Switching to messages marks them as seen so the header badge
|
||||
// clears.
|
||||
if (this.sub === "messages") {
|
||||
this.$root.messages_seen = this.$root.messages_log.length;
|
||||
this.unread_messages_local = 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
unread_messages: function () {
|
||||
return this.unread_messages_local;
|
||||
},
|
||||
|
||||
mach_state: function () {
|
||||
const cycle = this.state.cycle;
|
||||
const xx = this.state.xx;
|
||||
if (xx != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
|
||||
return cycle.toUpperCase();
|
||||
}
|
||||
return xx || "";
|
||||
},
|
||||
|
||||
is_idle: function () { return this.state.cycle == "idle"; },
|
||||
|
||||
can_mdi: function () {
|
||||
return this.is_idle || this.state.cycle == "mdi";
|
||||
},
|
||||
|
||||
mach_units: function () {
|
||||
return this.$root.display_units;
|
||||
},
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
this._onHash = () => this.refresh_from_hash();
|
||||
window.addEventListener("hashchange", this._onHash);
|
||||
this.refresh_from_hash();
|
||||
this._poll = setInterval(() => {
|
||||
// Cheap re-poll for unread message count; Vue 1 cannot observe
|
||||
// `$root.messages_count` directly so we mirror it here.
|
||||
const c = this.$root && this.$root.messages_count;
|
||||
if (typeof c === "number" && c !== this.unread_messages_local) {
|
||||
this.unread_messages_local = c;
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
if (this._onHash) window.removeEventListener("hashchange", this._onHash);
|
||||
if (this._poll) clearInterval(this._poll);
|
||||
},
|
||||
|
||||
methods: {
|
||||
refresh_from_hash: function () {
|
||||
const hash = location.hash.substr(1);
|
||||
const parts = hash.split(":");
|
||||
const sub = parts[0] === "console" ? (parts[1] || "mdi") : "mdi";
|
||||
this.sub = sub;
|
||||
if (sub === "messages" && this.$root) {
|
||||
this.$root.messages_seen = this.$root.messages_log.length;
|
||||
this.unread_messages_local = 0;
|
||||
}
|
||||
},
|
||||
|
||||
select_sub: function (name) {
|
||||
this.sub = name;
|
||||
// Update URL hash for deep links / back-button.
|
||||
const h = "#console" + (name && name !== "mdi" ? ":" + name : "");
|
||||
if (location.hash !== h) {
|
||||
history.replaceState(null, "", h);
|
||||
}
|
||||
if (name === "messages") {
|
||||
this.$root.messages_seen = this.$root.messages_log.length;
|
||||
this.unread_messages_local = 0;
|
||||
}
|
||||
},
|
||||
|
||||
prepend: function (token) {
|
||||
this.mdi = token + this.mdi.trimStart();
|
||||
},
|
||||
|
||||
append: function (token) {
|
||||
const tail = this.mdi.endsWith(" ") || !this.mdi ? "" : " ";
|
||||
this.mdi = this.mdi + tail + token;
|
||||
},
|
||||
|
||||
submit_mdi: function () {
|
||||
if (!this.mdi) return;
|
||||
this.$dispatch("send", this.mdi);
|
||||
if (!this.history.length || this.history[0] != this.mdi) {
|
||||
this.history.unshift(this.mdi);
|
||||
}
|
||||
this.mdi = "";
|
||||
},
|
||||
|
||||
load_history: function (index) {
|
||||
this.mdi = this.history[index];
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,7 +1,6 @@
|
||||
"use strict";
|
||||
|
||||
const api = require("./api");
|
||||
const utils = require("./utils");
|
||||
const cookie = require("./cookie")("bbctrl-");
|
||||
|
||||
module.exports = {
|
||||
@@ -12,15 +11,7 @@ module.exports = {
|
||||
return {
|
||||
current_time: "",
|
||||
mach_units: this.$root.state.metric ? "METRIC" : "IMPERIAL",
|
||||
mdi: "",
|
||||
last_file: undefined,
|
||||
last_file_time: undefined,
|
||||
toolpath: {},
|
||||
toolpath_progress: 0,
|
||||
axes: "xyzabc",
|
||||
history: [],
|
||||
speed_override: 1,
|
||||
feed_override: 1,
|
||||
jog_incr_amounts: {
|
||||
METRIC: {
|
||||
fine: 0.1,
|
||||
@@ -38,34 +29,14 @@ module.exports = {
|
||||
jog_incr: localStorage.getItem("jog_incr") || "small",
|
||||
jog_step: cookie.get_bool("jog-step"),
|
||||
jog_adjust: parseInt(cookie.get("jog-adjust", 2)),
|
||||
deleteGCode: false,
|
||||
tab: "auto",
|
||||
ask_home: true,
|
||||
folder_name: "",
|
||||
edited: false,
|
||||
uploading_files: false,
|
||||
confirmDelete: false,
|
||||
create_folder: false,
|
||||
showGcodeMessage: false,
|
||||
showNoGcodeMessage: false,
|
||||
macrosLoading: false,
|
||||
show_gcodes: false,
|
||||
GCodeNotFound: false,
|
||||
show_probe_dialog: false,
|
||||
filesUploaded: 0,
|
||||
totalFiles: 0,
|
||||
files_sortby: "By Upload Date",
|
||||
selected_items_to_delete: [],
|
||||
search_query: "",
|
||||
filtered_files: [],
|
||||
selected_folder_index: null,
|
||||
overrides_open: false,
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
"axis-control": require("./axis-control"),
|
||||
"path-viewer": require("./path-viewer"),
|
||||
"gcode-viewer": require("./gcode-viewer"),
|
||||
},
|
||||
|
||||
watch: {
|
||||
@@ -80,16 +51,6 @@ module.exports = {
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
"state.line": function () {
|
||||
if (this.mach_state != "HOMING") {
|
||||
this.$broadcast("gcode-line", this.state.line);
|
||||
}
|
||||
},
|
||||
|
||||
"state.selected_time": function () {
|
||||
this.load();
|
||||
},
|
||||
|
||||
jog_step: function () {
|
||||
cookie.set_bool("jog-step", this.jog_step);
|
||||
},
|
||||
@@ -127,43 +88,16 @@ module.exports = {
|
||||
return state || "";
|
||||
},
|
||||
|
||||
pause_reason: function () {
|
||||
return this.state.pr;
|
||||
},
|
||||
|
||||
is_running: function () {
|
||||
return this.mach_state == "RUNNING" || this.mach_state == "HOMING";
|
||||
},
|
||||
|
||||
is_stopping: function () {
|
||||
return this.mach_state == "STOPPING";
|
||||
},
|
||||
|
||||
is_holding: function () {
|
||||
return this.mach_state == "HOLDING";
|
||||
},
|
||||
|
||||
is_ready: function () {
|
||||
return this.mach_state == "READY";
|
||||
can_set_axis: function () {
|
||||
return this.state.cycle == "idle";
|
||||
},
|
||||
|
||||
is_idle: function () {
|
||||
return this.state.cycle == "idle";
|
||||
},
|
||||
|
||||
is_paused: function () {
|
||||
return this.is_holding && (this.pause_reason == "User pause" || this.pause_reason == "Program pause");
|
||||
},
|
||||
|
||||
can_mdi: function () {
|
||||
return this.is_idle || this.state.cycle == "mdi";
|
||||
},
|
||||
|
||||
can_set_axis: function () {
|
||||
return this.is_idle;
|
||||
|
||||
// TODO allow setting axis position during pause
|
||||
// return this.is_idle || this.is_paused;
|
||||
is_ready: function () {
|
||||
return this.mach_state == "READY";
|
||||
},
|
||||
|
||||
message: function () {
|
||||
@@ -191,57 +125,21 @@ module.exports = {
|
||||
},
|
||||
|
||||
plan_time_remaining: function () {
|
||||
if (!(this.is_stopping || this.is_running || this.is_holding)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return this.toolpath.time - this.plan_time;
|
||||
const stopping = this.mach_state == "STOPPING";
|
||||
const running = this.mach_state == "RUNNING" || this.mach_state == "HOMING";
|
||||
const holding = this.mach_state == "HOLDING";
|
||||
if (!(stopping || running || holding)) return 0;
|
||||
const tp = this.$root && this.$root.toolpath ? this.$root.toolpath.time : 0;
|
||||
return (tp || 0) - this.plan_time;
|
||||
},
|
||||
|
||||
eta: function () {
|
||||
if (this.mach_state != "RUNNING") {
|
||||
state_kpi_class: function () {
|
||||
const s = this.mach_state;
|
||||
if (s == "ESTOPPED" || s == "FAULT" || s == "SHUTDOWN") return "bad";
|
||||
if (s == "HOLDING" || s == "STOPPING") return "warn";
|
||||
if (s == "RUNNING" || s == "HOMING" || s == "JOGGING") return "busy";
|
||||
if (s == "READY") return "ok";
|
||||
return "";
|
||||
}
|
||||
|
||||
const remaining = this.plan_time_remaining;
|
||||
const d = new Date();
|
||||
d.setSeconds(d.getSeconds() + remaining);
|
||||
return d.toLocaleString();
|
||||
},
|
||||
|
||||
progress: function () {
|
||||
if (!this.toolpath.time || this.is_ready) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const p = this.plan_time / this.toolpath.time;
|
||||
return Math.min(1, p);
|
||||
},
|
||||
gcode_files: function () {
|
||||
if (!this.state.folder) {
|
||||
return [];
|
||||
}
|
||||
const folder = this.state.gcode_list.find(item => item.name == this.state.folder);
|
||||
if (!folder) {
|
||||
return [];
|
||||
}
|
||||
const files = folder.files.filter(item => this.state.files.includes(item.file_name)).map(item => item.file_name);
|
||||
if (this.files_sortby == "A-Z") {
|
||||
return files.sort();
|
||||
} else if (this.files_sortby == "Z-A") {
|
||||
return files.sort().reverse();
|
||||
} else {
|
||||
return files;
|
||||
}
|
||||
},
|
||||
gcode_filtered_files: function () {
|
||||
return this.filtered_files.filter(file => file.toLowerCase().includes(this.search_query.toLowerCase()));
|
||||
},
|
||||
gcode_folders: function () {
|
||||
return this.state.gcode_list
|
||||
.map(item => item.name)
|
||||
.filter(element => element !== "default")
|
||||
.sort();
|
||||
},
|
||||
},
|
||||
|
||||
@@ -264,14 +162,9 @@ module.exports = {
|
||||
M72
|
||||
`);
|
||||
},
|
||||
folder_name_edited: function () {
|
||||
this.edited = true;
|
||||
},
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
this.load();
|
||||
|
||||
setInterval(() => {
|
||||
this.current_time = new Date().toLocaleTimeString();
|
||||
}, 1000);
|
||||
@@ -287,25 +180,9 @@ module.exports = {
|
||||
},
|
||||
|
||||
methods: {
|
||||
save_config: async function (config) {
|
||||
try {
|
||||
await api.put("config/save", config);
|
||||
this.$dispatch("update");
|
||||
} catch (error) {
|
||||
console.error("Restore Failed: ", error);
|
||||
alert("Restore failed");
|
||||
}
|
||||
},
|
||||
|
||||
populateFiles(index) {
|
||||
this.selected_folder_index = index;
|
||||
this.filtered_files = this.state.gcode_list[index].files.map(item => item.file_name);
|
||||
},
|
||||
|
||||
getJogIncrStyle(value) {
|
||||
const weight = `font-weight:${this.jog_incr === value ? "bold" : "normal"}`;
|
||||
const color = this.jog_incr === value ? "color:#0078e7" : "";
|
||||
|
||||
return [weight, color].join(";");
|
||||
},
|
||||
|
||||
@@ -324,426 +201,6 @@ module.exports = {
|
||||
`);
|
||||
},
|
||||
|
||||
send: function (msg) {
|
||||
this.$dispatch("send", msg);
|
||||
},
|
||||
|
||||
toggle_sorting: function () {
|
||||
if (this.files_sortby === "By Upload Date") {
|
||||
this.files_sortby = "A-Z";
|
||||
} else if (this.files_sortby === "A-Z") {
|
||||
this.files_sortby = "Z-A";
|
||||
} else if (this.files_sortby === "Z-A") {
|
||||
this.files_sortby = "By Upload Date";
|
||||
}
|
||||
},
|
||||
|
||||
load: function () {
|
||||
const file_time = this.state.selected_time;
|
||||
const file = this.state.selected;
|
||||
if (this.last_file == file && this.last_file_time == file_time) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.state.selected && !this.state.files.includes(this.state.selected)) {
|
||||
this.GCodeNotFound = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.last_file = file;
|
||||
this.last_file_time = file_time;
|
||||
|
||||
this.$broadcast("gcode-load", file);
|
||||
this.$broadcast("gcode-line", this.state.line);
|
||||
this.toolpath_progress = 0;
|
||||
this.load_toolpath(file, file_time);
|
||||
},
|
||||
|
||||
load_toolpath: async function (file, file_time) {
|
||||
this.toolpath = {};
|
||||
|
||||
if (!file || this.last_file_time != file_time) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.showGcodeMessage = true;
|
||||
|
||||
while (this.showGcodeMessage) {
|
||||
try {
|
||||
const toolpath = await api.get(`path/${file}`);
|
||||
this.toolpath_progress = toolpath.progress;
|
||||
|
||||
if (toolpath.progress === 1 || typeof toolpath.progress == "undefined") {
|
||||
this.showGcodeMessage = false;
|
||||
|
||||
if (toolpath.bounds) {
|
||||
toolpath.filename = file;
|
||||
this.toolpath_progress = 1;
|
||||
this.toolpath = toolpath;
|
||||
|
||||
const state = this.$root.state;
|
||||
for (const axis of "xyzabc") {
|
||||
Vue.set(state, `path_min_${axis}`, toolpath.bounds.min[axis]);
|
||||
Vue.set(state, `path_max_${axis}`, toolpath.bounds.max[axis]);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
submit_mdi: function () {
|
||||
this.send(this.mdi);
|
||||
|
||||
if (!this.history.length || this.history[0] != this.mdi) {
|
||||
this.history.unshift(this.mdi);
|
||||
}
|
||||
|
||||
this.mdi = "";
|
||||
},
|
||||
|
||||
mdi_start_pause: function () {
|
||||
if (this.state.xx == "RUNNING") {
|
||||
this.pause();
|
||||
} else if (this.state.xx == "STOPPING" || this.state.xx == "HOLDING") {
|
||||
this.unpause();
|
||||
} else {
|
||||
this.submit_mdi();
|
||||
}
|
||||
},
|
||||
|
||||
load_history: function (index) {
|
||||
this.mdi = this.history[index];
|
||||
},
|
||||
|
||||
open_file: function () {
|
||||
utils.clickFileInput("gcode-file-input");
|
||||
},
|
||||
|
||||
open_folder: function () {
|
||||
utils.clickFileInput("gcode-folder-input");
|
||||
},
|
||||
|
||||
edited_folder_name: function (event) {
|
||||
if (event.target.value.trim() != "") {
|
||||
this.$dispatch("folder_name_edited");
|
||||
}
|
||||
},
|
||||
|
||||
update_config: function () {
|
||||
this.config.gcode_list = [...this.state.gcode_list];
|
||||
this.config.non_macros_list = [...this.state.non_macros_list];
|
||||
this.config.macros_list = [...this.state.macros_list];
|
||||
this.config.macros = [...this.state.macros];
|
||||
},
|
||||
|
||||
reset_gcode: function () {
|
||||
this.state.selected = "";
|
||||
this.last_file = "";
|
||||
this.$broadcast("gcode-load", "");
|
||||
},
|
||||
|
||||
upload_gcode: async function (filename, file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
this.filesUploaded++;
|
||||
if (this.filesUploaded == this.totalFiles) {
|
||||
this.uploading_files = false;
|
||||
}
|
||||
|
||||
xhr.onload = () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve("file uploaded");
|
||||
} else {
|
||||
console.error("File upload failed:", xhr.statusText);
|
||||
reject("upload failed");
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = () => {
|
||||
alert("Upload failed.");
|
||||
reject("upload failed");
|
||||
};
|
||||
|
||||
xhr.open("PUT", `/api/file/${encodeURIComponent(filename)}`, true);
|
||||
xhr.send(file);
|
||||
});
|
||||
},
|
||||
|
||||
readFile: function (file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = () => {
|
||||
resolve(reader.result);
|
||||
};
|
||||
|
||||
reader.onerror = error => {
|
||||
reject(error);
|
||||
};
|
||||
|
||||
reader.readAsText(file, "utf-8");
|
||||
});
|
||||
},
|
||||
|
||||
validateFiles: async function (files) {
|
||||
const validFiles = [];
|
||||
for (const file of files) {
|
||||
const extension = file.name.split(".").pop().toLowerCase();
|
||||
const validExtensions = ["nc", "ngc", "gcode", "gc"];
|
||||
|
||||
if (validExtensions.includes(extension)) {
|
||||
validFiles.push(file);
|
||||
} else {
|
||||
alert(`Unsupported file : ${file.name}`);
|
||||
this.filesUploaded++;
|
||||
if (this.filesUploaded == this.totalFiles) {
|
||||
this.uploadFiles = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return validFiles;
|
||||
},
|
||||
|
||||
uploadValidFiles: async function (files, folderName) {
|
||||
const updatedConfig = { ...this.config };
|
||||
|
||||
for (const file of files) {
|
||||
try {
|
||||
const gcode = await this.readFile(file);
|
||||
await this.upload_gcode(file.name, gcode);
|
||||
|
||||
const isAlreadyPresent = updatedConfig.non_macros_list.some(element => element.file_name === file.name);
|
||||
|
||||
if (!isAlreadyPresent) {
|
||||
updatedConfig.non_macros_list.push({ file_name: file.name });
|
||||
}
|
||||
|
||||
if (folderName) {
|
||||
const folder = updatedConfig.gcode_list.find(item => item.type == "folder" && item.name == folderName);
|
||||
if (folder) {
|
||||
if (!folder.files.map(item => item.file_name).includes(file.name)) {
|
||||
folder.files.push({ file_name: file.name });
|
||||
}
|
||||
} else {
|
||||
updatedConfig.gcode_list.push({
|
||||
name: folderName,
|
||||
type: "folder",
|
||||
files: [
|
||||
{
|
||||
file_name: file.name,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
} else {
|
||||
var folder_to_add = updatedConfig.gcode_list.find(
|
||||
item => item.type == "folder" && item.name == this.state.folder,
|
||||
);
|
||||
if (!folder_to_add) {
|
||||
folder_to_add = updatedConfig.gcode_list.unshift({
|
||||
name: this.state.folder,
|
||||
type: "folder",
|
||||
files: [
|
||||
{
|
||||
file_name: file.name,
|
||||
},
|
||||
],
|
||||
});
|
||||
folder_to_add = updatedConfig.gcode_list[0];
|
||||
}
|
||||
if (!folder_to_add.files.find(item => item.file_name == file.name)) {
|
||||
folder_to_add.files.push({ file_name: file.name });
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`error uploading file : `, error);
|
||||
}
|
||||
}
|
||||
return updatedConfig;
|
||||
},
|
||||
|
||||
upload_files: async function (files, folderName) {
|
||||
this.update_config();
|
||||
|
||||
const validFiles = await this.validateFiles(files);
|
||||
const updatedConfig = await this.uploadValidFiles(validFiles, folderName);
|
||||
|
||||
await this.save_config(updatedConfig);
|
||||
},
|
||||
|
||||
upload_file: async function (e) {
|
||||
this.uploading_files = true;
|
||||
this.filesUploaded = 0;
|
||||
|
||||
const files = e.target.files || e.dataTransfer.files;
|
||||
if (!files.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.totalFiles = files.length;
|
||||
|
||||
await this.upload_files(files);
|
||||
},
|
||||
|
||||
create_new_folder: async function () {
|
||||
const folder_name = this.folder_name.trim();
|
||||
if (folder_name != "") {
|
||||
if (this.state.gcode_list.find(item => item.type == "folder" && item.name == folder_name)) {
|
||||
alert("Folder with the same name already exists!");
|
||||
return;
|
||||
} else {
|
||||
this.update_config();
|
||||
this.config.gcode_list.push({
|
||||
name: folder_name,
|
||||
type: "folder",
|
||||
files: [],
|
||||
});
|
||||
}
|
||||
this.state.folder = folder_name;
|
||||
this.edited = false;
|
||||
this.create_folder = false;
|
||||
this.folder_name = "";
|
||||
this.save_config(this.config);
|
||||
}
|
||||
},
|
||||
|
||||
cancel_new_folder: function () {
|
||||
this.create_folder = false;
|
||||
this.folder_name = "";
|
||||
},
|
||||
|
||||
upload_folder: async function (e) {
|
||||
this.uploading_files = true;
|
||||
this.filesUploaded = 0;
|
||||
|
||||
const files = e.target.files || e.dataTransfer.files;
|
||||
if (!files.length) {
|
||||
return;
|
||||
}
|
||||
this.totalFiles = files.length;
|
||||
const folderName = files[0].webkitRelativePath.split("/")[0];
|
||||
|
||||
this.upload_files(files, folderName);
|
||||
},
|
||||
|
||||
delete_current: async function () {
|
||||
if (!this.state.selected) {
|
||||
this.deleteGCode = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.update_config();
|
||||
|
||||
this.config.non_macros_list = this.config.non_macros_list.filter(
|
||||
item => !this.selected_items_to_delete.includes(item.file_name),
|
||||
);
|
||||
const folder_to_update = this.config.gcode_list.find(
|
||||
item => item.name == this.config.gcode_list[this.selected_folder_index].name && item.type == "folder",
|
||||
);
|
||||
folder_to_update.files = folder_to_update.files.filter(
|
||||
item => !this.selected_items_to_delete.includes(item.file_name),
|
||||
);
|
||||
|
||||
const exception_list = this.state.macros_list.map(item => item.file_name);
|
||||
let files_to_delete = this.selected_items_to_delete.filter(item => !exception_list.includes(item));
|
||||
|
||||
await api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${files_to_delete.toString()}`);
|
||||
|
||||
this.save_config(this.config);
|
||||
this.filtered_files = [];
|
||||
this.search_query = "";
|
||||
this.selected_folder_index = null;
|
||||
this.selected_items_to_delete = [];
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
cancel_delete: function () {
|
||||
this.filtered_files = [];
|
||||
this.search_query = "";
|
||||
this.selected_folder_index = null;
|
||||
this.selected_items_to_delete = [];
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
delete_all: function () {
|
||||
api.delete("file");
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
delete_all_except_macros: async function () {
|
||||
this.update_config();
|
||||
const macrosList = this.state.macros_list.map(item => item.file_name).toString();
|
||||
api.delete(`file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${macrosList}`);
|
||||
this.config.non_macros_list = [];
|
||||
this.config.gcode_list = [
|
||||
{
|
||||
name: "default",
|
||||
type: "folder",
|
||||
files: [],
|
||||
},
|
||||
];
|
||||
|
||||
this.save_config(this.config);
|
||||
this.state.folder = "default";
|
||||
this.state.selected = "";
|
||||
this.selected_items_to_delete = [];
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
delete_folder: async function () {
|
||||
this.update_config();
|
||||
if (this.state.folder && this.state.folder != "default") {
|
||||
const files_to_move = this.config.gcode_list.find(
|
||||
item => item.type == "folder" && item.name == this.state.folder,
|
||||
);
|
||||
if (files_to_move) {
|
||||
const default_folder = this.config.gcode_list.find(item => item.name == "default");
|
||||
default_folder.files = [...default_folder.files, ...files_to_move.files].sort();
|
||||
this.config.gcode_list = this.config.gcode_list.filter(item => item.name != this.state.folder);
|
||||
this.save_config(this.config);
|
||||
}
|
||||
}
|
||||
this.state.folder = "default";
|
||||
this.confirmDelete = false;
|
||||
},
|
||||
delete_folder_and_files: async function () {
|
||||
if (!this.state.folder) {
|
||||
this.confirmDelete = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.update_config();
|
||||
|
||||
const selected_folder = this.config.gcode_list.find(
|
||||
item => item.type == "folder" && item.name == this.state.folder,
|
||||
);
|
||||
if (!selected_folder) {
|
||||
return;
|
||||
}
|
||||
const macrosList = this.state.macros_list.map(item => item.file_name);
|
||||
var files_to_delete = selected_folder.files
|
||||
.map(item => item.file_name)
|
||||
.filter(item => !macrosList.includes(item));
|
||||
if (selected_folder.name != "default") {
|
||||
this.config.gcode_list = this.config.gcode_list.filter(item => item.name != this.state.folder);
|
||||
} else {
|
||||
selected_folder.files = [];
|
||||
}
|
||||
|
||||
await api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${files_to_delete.toString()}`);
|
||||
this.config.non_macros_list = this.config.non_macros_list.filter(
|
||||
item => !files_to_delete.includes(item.file_name),
|
||||
);
|
||||
this.save_config(this.config);
|
||||
this.state.folder = "default";
|
||||
this.confirmDelete = false;
|
||||
},
|
||||
|
||||
home: function (axis) {
|
||||
this.ask_home = false;
|
||||
|
||||
@@ -765,6 +222,24 @@ module.exports = {
|
||||
api.put(`home/${axis}/clear`);
|
||||
},
|
||||
|
||||
aux_home: function () {
|
||||
api.put("aux/home").catch(function (err) {
|
||||
console.error("W home failed:", err);
|
||||
});
|
||||
},
|
||||
|
||||
aux_jog: function (delta_mm) {
|
||||
api.put("aux/jog", { mm: delta_mm }).catch(function (err) {
|
||||
console.error("W jog failed:", err);
|
||||
});
|
||||
},
|
||||
|
||||
aux_jog_incr: function (sign) {
|
||||
const amount = this.jog_incr_amounts[this.display_units][this.jog_incr];
|
||||
const delta_mm = sign * (this.metric ? amount : amount * 25.4);
|
||||
this.aux_jog(delta_mm);
|
||||
},
|
||||
|
||||
show_set_position: function (axis) {
|
||||
SvelteComponents.showDialog("SetAxisPosition", { axis });
|
||||
},
|
||||
@@ -790,93 +265,20 @@ module.exports = {
|
||||
},
|
||||
|
||||
zero: function (axis) {
|
||||
if (typeof axis == "undefined") {
|
||||
this.zero_all();
|
||||
} else {
|
||||
this.set_position(axis, 0);
|
||||
}
|
||||
},
|
||||
|
||||
start_pause: function () {
|
||||
this.macrosLoading = false;
|
||||
if (this.state.xx == "RUNNING") {
|
||||
this.pause();
|
||||
} else if (this.state.xx == "STOPPING" || this.state.xx == "HOLDING") {
|
||||
this.unpause();
|
||||
} else {
|
||||
this.start();
|
||||
}
|
||||
},
|
||||
|
||||
start: function () {
|
||||
api.put("start");
|
||||
},
|
||||
|
||||
pause: function () {
|
||||
api.put("pause");
|
||||
},
|
||||
|
||||
unpause: function () {
|
||||
api.put("unpause");
|
||||
},
|
||||
|
||||
optional_pause: function () {
|
||||
api.put("pause/optional");
|
||||
},
|
||||
|
||||
stop: function () {
|
||||
api.put("stop");
|
||||
},
|
||||
|
||||
step: function () {
|
||||
api.put("step");
|
||||
},
|
||||
|
||||
override_feed: function () {
|
||||
api.put(`override/feed/${this.feed_override}`);
|
||||
},
|
||||
|
||||
override_speed: function () {
|
||||
api.put(`override/speed/${this.speed_override}`);
|
||||
},
|
||||
|
||||
current: function (axis, value) {
|
||||
const x = value / 32.0;
|
||||
if (this.state[`${axis}pl`] == x) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {};
|
||||
data[`${axis}pl`] = x;
|
||||
this.send(JSON.stringify(data));
|
||||
if (typeof axis == "undefined") this.zero_all();
|
||||
else this.set_position(axis, 0);
|
||||
},
|
||||
|
||||
showProbeDialog: function (probeType) {
|
||||
if(this.show_probe_dialog){
|
||||
if (this.show_probe_dialog) {
|
||||
this.show_probe_dialog = false;
|
||||
}
|
||||
SvelteComponents.showDialog("Probe", { probeType, isRotaryActive: this.state["2an"] == 3 });
|
||||
},
|
||||
run_macro: function (id) {
|
||||
if (this.state.macros[id].file_name == "default") {
|
||||
this.showNoGcodeMessage = true;
|
||||
} else {
|
||||
if (this.state.macros[id].file_name != this.state.selected) {
|
||||
this.state.selected = this.state.macros[id].file_name;
|
||||
}
|
||||
try {
|
||||
this.load();
|
||||
if (this.state.macros[id].alert == true) {
|
||||
this.macrosLoading = true;
|
||||
} else {
|
||||
setImmediate(() => this.start_pause());
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Error running program: ", error);
|
||||
}
|
||||
}
|
||||
SvelteComponents.showDialog("Probe", {
|
||||
probeType,
|
||||
isRotaryActive: this.state["2an"] == 3,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [require("./axis-vars")],
|
||||
mixins: [require("./program-mixin"), require("./axis-vars")],
|
||||
};
|
||||
|
||||
@@ -44,6 +44,16 @@ window.onload = function() {
|
||||
cookie_set("client-id", uuid(), 10000);
|
||||
}
|
||||
|
||||
// Vue 1's async queue can drop dependent watcher updates when
|
||||
// data props are mutated outside the normal event flow (e.g. from
|
||||
// a `hashchange` listener that fires before Vue's tick scheduler
|
||||
// has caught up). Disable async batching so every reactive write
|
||||
// synchronously re-evaluates dependents — this matches Vue 1's
|
||||
// older default and is what the legacy UI implicitly relied on.
|
||||
if (Vue.config) {
|
||||
Vue.config.async = false;
|
||||
}
|
||||
|
||||
// Register global components
|
||||
Vue.component("templated-input", require("./templated-input"));
|
||||
Vue.component("message", require("./message"));
|
||||
|
||||
554
src/js/program-mixin.js
Normal file
554
src/js/program-mixin.js
Normal file
@@ -0,0 +1,554 @@
|
||||
"use strict";
|
||||
|
||||
// Shared data, computed properties and methods that are used by both
|
||||
// the Control view (for things like start/stop, run-macro, axis state)
|
||||
// and the Program view (RUN/STOP/Upload/Download/Delete + file picker
|
||||
// + gcode/path viewers). Splitting these out lets us mount the same
|
||||
// behaviour under two top-level routes without duplicating code.
|
||||
//
|
||||
// The mixin intentionally does *not* require axis-vars; control-view
|
||||
// keeps that one to itself.
|
||||
|
||||
const api = require("./api");
|
||||
const utils = require("./utils");
|
||||
|
||||
module.exports = {
|
||||
data: function () {
|
||||
return {
|
||||
mdi: "",
|
||||
last_file: undefined,
|
||||
last_file_time: undefined,
|
||||
toolpath: {},
|
||||
toolpath_progress: 0,
|
||||
history: [],
|
||||
speed_override: 1,
|
||||
feed_override: 1,
|
||||
deleteGCode: false,
|
||||
folder_name: "",
|
||||
edited: false,
|
||||
uploading_files: false,
|
||||
confirmDelete: false,
|
||||
create_folder: false,
|
||||
showGcodeMessage: false,
|
||||
showNoGcodeMessage: false,
|
||||
macrosLoading: false,
|
||||
show_gcodes: false,
|
||||
GCodeNotFound: false,
|
||||
filesUploaded: 0,
|
||||
totalFiles: 0,
|
||||
files_sortby: "By Upload Date",
|
||||
selected_items_to_delete: [],
|
||||
search_query: "",
|
||||
filtered_files: [],
|
||||
selected_folder_index: null,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
"state.line": function () {
|
||||
if (this.mach_state != "HOMING") {
|
||||
this.$broadcast("gcode-line", this.state.line);
|
||||
}
|
||||
},
|
||||
|
||||
"state.selected_time": function () {
|
||||
this.load();
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
is_running: function () {
|
||||
return this.mach_state == "RUNNING" || this.mach_state == "HOMING";
|
||||
},
|
||||
|
||||
is_stopping: function () {
|
||||
return this.mach_state == "STOPPING";
|
||||
},
|
||||
|
||||
is_holding: function () {
|
||||
return this.mach_state == "HOLDING";
|
||||
},
|
||||
|
||||
is_ready: function () {
|
||||
return this.mach_state == "READY";
|
||||
},
|
||||
|
||||
is_idle: function () {
|
||||
return this.state.cycle == "idle";
|
||||
},
|
||||
|
||||
is_paused: function () {
|
||||
return this.is_holding && (this.pause_reason == "User pause" || this.pause_reason == "Program pause");
|
||||
},
|
||||
|
||||
can_mdi: function () {
|
||||
return this.is_idle || this.state.cycle == "mdi";
|
||||
},
|
||||
|
||||
pause_reason: function () {
|
||||
return this.state.pr;
|
||||
},
|
||||
|
||||
plan_time: function () {
|
||||
return this.state.plan_time;
|
||||
},
|
||||
|
||||
plan_time_remaining: function () {
|
||||
if (!(this.is_stopping || this.is_running || this.is_holding)) {
|
||||
return 0;
|
||||
}
|
||||
return this.toolpath.time - this.plan_time;
|
||||
},
|
||||
|
||||
eta: function () {
|
||||
if (this.mach_state != "RUNNING") {
|
||||
return "";
|
||||
}
|
||||
const remaining = this.plan_time_remaining;
|
||||
const d = new Date();
|
||||
d.setSeconds(d.getSeconds() + remaining);
|
||||
return d.toLocaleString();
|
||||
},
|
||||
|
||||
progress: function () {
|
||||
if (!this.toolpath.time || this.is_ready) {
|
||||
return 0;
|
||||
}
|
||||
const p = this.plan_time / this.toolpath.time;
|
||||
return Math.min(1, p);
|
||||
},
|
||||
|
||||
gcode_files: function () {
|
||||
if (!this.state.folder) return [];
|
||||
const folder = this.state.gcode_list.find(item => item.name == this.state.folder);
|
||||
if (!folder) return [];
|
||||
const files = folder.files
|
||||
.filter(item => this.state.files.includes(item.file_name))
|
||||
.map(item => item.file_name);
|
||||
if (this.files_sortby == "A-Z") return files.sort();
|
||||
if (this.files_sortby == "Z-A") return files.sort().reverse();
|
||||
return files;
|
||||
},
|
||||
|
||||
gcode_filtered_files: function () {
|
||||
return this.filtered_files.filter(file =>
|
||||
file.toLowerCase().includes(this.search_query.toLowerCase()));
|
||||
},
|
||||
|
||||
gcode_folders: function () {
|
||||
return this.state.gcode_list
|
||||
.map(item => item.name)
|
||||
.filter(element => element !== "default")
|
||||
.sort();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
save_config: async function (config) {
|
||||
try {
|
||||
await api.put("config/save", config);
|
||||
this.$dispatch("update");
|
||||
} catch (error) {
|
||||
console.error("Restore Failed: ", error);
|
||||
alert("Restore failed");
|
||||
}
|
||||
},
|
||||
|
||||
populateFiles(index) {
|
||||
this.selected_folder_index = index;
|
||||
this.filtered_files = this.state.gcode_list[index].files.map(item => item.file_name);
|
||||
},
|
||||
|
||||
send: function (msg) {
|
||||
this.$dispatch("send", msg);
|
||||
},
|
||||
|
||||
toggle_sorting: function () {
|
||||
if (this.files_sortby === "By Upload Date") this.files_sortby = "A-Z";
|
||||
else if (this.files_sortby === "A-Z") this.files_sortby = "Z-A";
|
||||
else if (this.files_sortby === "Z-A") this.files_sortby = "By Upload Date";
|
||||
},
|
||||
|
||||
load: function () {
|
||||
const file_time = this.state.selected_time;
|
||||
const file = this.state.selected;
|
||||
if (this.last_file == file && this.last_file_time == file_time) return;
|
||||
|
||||
if (this.state.selected && !this.state.files.includes(this.state.selected)) {
|
||||
this.GCodeNotFound = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.last_file = file;
|
||||
this.last_file_time = file_time;
|
||||
|
||||
this.$broadcast("gcode-load", file);
|
||||
this.$broadcast("gcode-line", this.state.line);
|
||||
this.toolpath_progress = 0;
|
||||
this.load_toolpath(file, file_time);
|
||||
},
|
||||
|
||||
load_toolpath: async function (file, file_time) {
|
||||
this.toolpath = {};
|
||||
if (!file || this.last_file_time != file_time) return;
|
||||
|
||||
this.showGcodeMessage = true;
|
||||
|
||||
while (this.showGcodeMessage) {
|
||||
try {
|
||||
const toolpath = await api.get(`path/${file}`);
|
||||
this.toolpath_progress = toolpath.progress;
|
||||
|
||||
if (toolpath.progress === 1 || typeof toolpath.progress == "undefined") {
|
||||
this.showGcodeMessage = false;
|
||||
|
||||
if (toolpath.bounds) {
|
||||
toolpath.filename = file;
|
||||
this.toolpath_progress = 1;
|
||||
this.toolpath = toolpath;
|
||||
|
||||
const state = this.$root.state;
|
||||
for (const axis of "xyzabc") {
|
||||
Vue.set(state, `path_min_${axis}`, toolpath.bounds.min[axis]);
|
||||
Vue.set(state, `path_max_${axis}`, toolpath.bounds.max[axis]);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
submit_mdi: function () {
|
||||
this.send(this.mdi);
|
||||
if (!this.history.length || this.history[0] != this.mdi) {
|
||||
this.history.unshift(this.mdi);
|
||||
}
|
||||
this.mdi = "";
|
||||
},
|
||||
|
||||
mdi_start_pause: function () {
|
||||
if (this.state.xx == "RUNNING") this.pause();
|
||||
else if (this.state.xx == "STOPPING" || this.state.xx == "HOLDING") this.unpause();
|
||||
else this.submit_mdi();
|
||||
},
|
||||
|
||||
load_history: function (index) {
|
||||
this.mdi = this.history[index];
|
||||
},
|
||||
|
||||
open_file: function () {
|
||||
utils.clickFileInput("gcode-file-input");
|
||||
},
|
||||
|
||||
open_folder: function () {
|
||||
utils.clickFileInput("gcode-folder-input");
|
||||
},
|
||||
|
||||
edited_folder_name: function (event) {
|
||||
if (event.target.value.trim() != "") {
|
||||
this.$dispatch("folder_name_edited");
|
||||
}
|
||||
},
|
||||
|
||||
update_config: function () {
|
||||
this.config.gcode_list = [...this.state.gcode_list];
|
||||
this.config.non_macros_list = [...this.state.non_macros_list];
|
||||
this.config.macros_list = [...this.state.macros_list];
|
||||
this.config.macros = [...this.state.macros];
|
||||
},
|
||||
|
||||
reset_gcode: function () {
|
||||
this.state.selected = "";
|
||||
this.last_file = "";
|
||||
this.$broadcast("gcode-load", "");
|
||||
},
|
||||
|
||||
upload_gcode: async function (filename, file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
this.filesUploaded++;
|
||||
if (this.filesUploaded == this.totalFiles) {
|
||||
this.uploading_files = false;
|
||||
}
|
||||
xhr.onload = () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) resolve("file uploaded");
|
||||
else { console.error("File upload failed:", xhr.statusText); reject("upload failed"); }
|
||||
};
|
||||
xhr.onerror = () => { alert("Upload failed."); reject("upload failed"); };
|
||||
xhr.open("PUT", `/api/file/${encodeURIComponent(filename)}`, true);
|
||||
xhr.send(file);
|
||||
});
|
||||
},
|
||||
|
||||
readFile: function (file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
reader.readAsText(file, "utf-8");
|
||||
});
|
||||
},
|
||||
|
||||
validateFiles: async function (files) {
|
||||
const validFiles = [];
|
||||
for (const file of files) {
|
||||
const extension = file.name.split(".").pop().toLowerCase();
|
||||
const validExtensions = ["nc", "ngc", "gcode", "gc"];
|
||||
if (validExtensions.includes(extension)) {
|
||||
validFiles.push(file);
|
||||
} else {
|
||||
alert(`Unsupported file : ${file.name}`);
|
||||
this.filesUploaded++;
|
||||
if (this.filesUploaded == this.totalFiles) {
|
||||
this.uploadFiles = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return validFiles;
|
||||
},
|
||||
|
||||
uploadValidFiles: async function (files, folderName) {
|
||||
const updatedConfig = { ...this.config };
|
||||
|
||||
for (const file of files) {
|
||||
try {
|
||||
const gcode = await this.readFile(file);
|
||||
await this.upload_gcode(file.name, gcode);
|
||||
|
||||
const isAlreadyPresent = updatedConfig.non_macros_list.some(element => element.file_name === file.name);
|
||||
if (!isAlreadyPresent) {
|
||||
updatedConfig.non_macros_list.push({ file_name: file.name });
|
||||
}
|
||||
|
||||
if (folderName) {
|
||||
const folder = updatedConfig.gcode_list.find(item => item.type == "folder" && item.name == folderName);
|
||||
if (folder) {
|
||||
if (!folder.files.map(item => item.file_name).includes(file.name)) {
|
||||
folder.files.push({ file_name: file.name });
|
||||
}
|
||||
} else {
|
||||
updatedConfig.gcode_list.push({
|
||||
name: folderName,
|
||||
type: "folder",
|
||||
files: [{ file_name: file.name }],
|
||||
});
|
||||
}
|
||||
} else {
|
||||
var folder_to_add = updatedConfig.gcode_list.find(
|
||||
item => item.type == "folder" && item.name == this.state.folder,
|
||||
);
|
||||
if (!folder_to_add) {
|
||||
folder_to_add = updatedConfig.gcode_list.unshift({
|
||||
name: this.state.folder,
|
||||
type: "folder",
|
||||
files: [{ file_name: file.name }],
|
||||
});
|
||||
folder_to_add = updatedConfig.gcode_list[0];
|
||||
}
|
||||
if (!folder_to_add.files.find(item => item.file_name == file.name)) {
|
||||
folder_to_add.files.push({ file_name: file.name });
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`error uploading file : `, error);
|
||||
}
|
||||
}
|
||||
return updatedConfig;
|
||||
},
|
||||
|
||||
upload_files: async function (files, folderName) {
|
||||
this.update_config();
|
||||
const validFiles = await this.validateFiles(files);
|
||||
const updatedConfig = await this.uploadValidFiles(validFiles, folderName);
|
||||
await this.save_config(updatedConfig);
|
||||
},
|
||||
|
||||
upload_file: async function (e) {
|
||||
this.uploading_files = true;
|
||||
this.filesUploaded = 0;
|
||||
const files = e.target.files || e.dataTransfer.files;
|
||||
if (!files.length) return;
|
||||
this.totalFiles = files.length;
|
||||
await this.upload_files(files);
|
||||
},
|
||||
|
||||
create_new_folder: async function () {
|
||||
const folder_name = this.folder_name.trim();
|
||||
if (folder_name != "") {
|
||||
if (this.state.gcode_list.find(item => item.type == "folder" && item.name == folder_name)) {
|
||||
alert("Folder with the same name already exists!");
|
||||
return;
|
||||
}
|
||||
this.update_config();
|
||||
this.config.gcode_list.push({
|
||||
name: folder_name,
|
||||
type: "folder",
|
||||
files: [],
|
||||
});
|
||||
this.state.folder = folder_name;
|
||||
this.edited = false;
|
||||
this.create_folder = false;
|
||||
this.folder_name = "";
|
||||
this.save_config(this.config);
|
||||
}
|
||||
},
|
||||
|
||||
cancel_new_folder: function () {
|
||||
this.create_folder = false;
|
||||
this.folder_name = "";
|
||||
},
|
||||
|
||||
upload_folder: async function (e) {
|
||||
this.uploading_files = true;
|
||||
this.filesUploaded = 0;
|
||||
const files = e.target.files || e.dataTransfer.files;
|
||||
if (!files.length) return;
|
||||
this.totalFiles = files.length;
|
||||
const folderName = files[0].webkitRelativePath.split("/")[0];
|
||||
this.upload_files(files, folderName);
|
||||
},
|
||||
|
||||
delete_current: async function () {
|
||||
if (!this.state.selected) {
|
||||
this.deleteGCode = false;
|
||||
return;
|
||||
}
|
||||
this.update_config();
|
||||
|
||||
this.config.non_macros_list = this.config.non_macros_list.filter(
|
||||
item => !this.selected_items_to_delete.includes(item.file_name),
|
||||
);
|
||||
const folder_to_update = this.config.gcode_list.find(
|
||||
item => item.name == this.config.gcode_list[this.selected_folder_index].name && item.type == "folder",
|
||||
);
|
||||
folder_to_update.files = folder_to_update.files.filter(
|
||||
item => !this.selected_items_to_delete.includes(item.file_name),
|
||||
);
|
||||
|
||||
const exception_list = this.state.macros_list.map(item => item.file_name);
|
||||
let files_to_delete = this.selected_items_to_delete.filter(item => !exception_list.includes(item));
|
||||
|
||||
await api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${files_to_delete.toString()}`);
|
||||
|
||||
this.save_config(this.config);
|
||||
this.filtered_files = [];
|
||||
this.search_query = "";
|
||||
this.selected_folder_index = null;
|
||||
this.selected_items_to_delete = [];
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
cancel_delete: function () {
|
||||
this.filtered_files = [];
|
||||
this.search_query = "";
|
||||
this.selected_folder_index = null;
|
||||
this.selected_items_to_delete = [];
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
delete_all: function () {
|
||||
api.delete("file");
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
delete_all_except_macros: async function () {
|
||||
this.update_config();
|
||||
const macrosList = this.state.macros_list.map(item => item.file_name).toString();
|
||||
api.delete(`file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${macrosList}`);
|
||||
this.config.non_macros_list = [];
|
||||
this.config.gcode_list = [{ name: "default", type: "folder", files: [] }];
|
||||
this.save_config(this.config);
|
||||
this.state.folder = "default";
|
||||
this.state.selected = "";
|
||||
this.selected_items_to_delete = [];
|
||||
this.deleteGCode = false;
|
||||
},
|
||||
|
||||
delete_folder: async function () {
|
||||
this.update_config();
|
||||
if (this.state.folder && this.state.folder != "default") {
|
||||
const files_to_move = this.config.gcode_list.find(
|
||||
item => item.type == "folder" && item.name == this.state.folder,
|
||||
);
|
||||
if (files_to_move) {
|
||||
const default_folder = this.config.gcode_list.find(item => item.name == "default");
|
||||
default_folder.files = [...default_folder.files, ...files_to_move.files].sort();
|
||||
this.config.gcode_list = this.config.gcode_list.filter(item => item.name != this.state.folder);
|
||||
this.save_config(this.config);
|
||||
}
|
||||
}
|
||||
this.state.folder = "default";
|
||||
this.confirmDelete = false;
|
||||
},
|
||||
|
||||
delete_folder_and_files: async function () {
|
||||
if (!this.state.folder) {
|
||||
this.confirmDelete = false;
|
||||
return;
|
||||
}
|
||||
this.update_config();
|
||||
const selected_folder = this.config.gcode_list.find(
|
||||
item => item.type == "folder" && item.name == this.state.folder,
|
||||
);
|
||||
if (!selected_folder) return;
|
||||
|
||||
const macrosList = this.state.macros_list.map(item => item.file_name);
|
||||
var files_to_delete = selected_folder.files
|
||||
.map(item => item.file_name)
|
||||
.filter(item => !macrosList.includes(item));
|
||||
|
||||
if (selected_folder.name != "default") {
|
||||
this.config.gcode_list = this.config.gcode_list.filter(item => item.name != this.state.folder);
|
||||
} else {
|
||||
selected_folder.files = [];
|
||||
}
|
||||
|
||||
await api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${files_to_delete.toString()}`);
|
||||
this.config.non_macros_list = this.config.non_macros_list.filter(
|
||||
item => !files_to_delete.includes(item.file_name),
|
||||
);
|
||||
this.save_config(this.config);
|
||||
this.state.folder = "default";
|
||||
this.confirmDelete = false;
|
||||
},
|
||||
|
||||
start_pause: function () {
|
||||
this.macrosLoading = false;
|
||||
if (this.state.xx == "RUNNING") this.pause();
|
||||
else if (this.state.xx == "STOPPING" || this.state.xx == "HOLDING") this.unpause();
|
||||
else this.start();
|
||||
},
|
||||
|
||||
start: function () { api.put("start"); },
|
||||
pause: function () { api.put("pause"); },
|
||||
unpause: function () { api.put("unpause"); },
|
||||
optional_pause: function () { api.put("pause/optional"); },
|
||||
stop: function () { api.put("stop"); },
|
||||
step: function () { api.put("step"); },
|
||||
|
||||
override_feed: function () { api.put(`override/feed/${this.feed_override}`); },
|
||||
override_speed: function () { api.put(`override/speed/${this.speed_override}`); },
|
||||
|
||||
run_macro: function (id) {
|
||||
if (this.state.macros[id].file_name == "default") {
|
||||
this.showNoGcodeMessage = true;
|
||||
} else {
|
||||
if (this.state.macros[id].file_name != this.state.selected) {
|
||||
this.state.selected = this.state.macros[id].file_name;
|
||||
}
|
||||
try {
|
||||
this.load();
|
||||
if (this.state.macros[id].alert == true) {
|
||||
this.macrosLoading = true;
|
||||
} else {
|
||||
setImmediate(() => this.start_pause());
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Error running program: ", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
60
src/js/program-view.js
Normal file
60
src/js/program-view.js
Normal file
@@ -0,0 +1,60 @@
|
||||
"use strict";
|
||||
|
||||
// Program tab — file management, run/stop, gcode listing and 3D
|
||||
// toolpath preview. Reuses the shared mixin (program-mixin) that also
|
||||
// powers the legacy bits of control-view; this view does not host the
|
||||
// jog grid or the DRO.
|
||||
|
||||
module.exports = {
|
||||
template: "#program-view-template",
|
||||
props: ["config", "template", "state"],
|
||||
|
||||
components: {
|
||||
"path-viewer": require("./path-viewer"),
|
||||
"gcode-viewer": require("./gcode-viewer"),
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
|
||||
watch: {
|
||||
"state.metric": {
|
||||
handler: function () {},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
display_units: {
|
||||
cache: false,
|
||||
get: function () { return this.$root.display_units; },
|
||||
set: function (value) {
|
||||
this.config.settings.units = value;
|
||||
this.$root.display_units = value;
|
||||
this.$dispatch("config-changed");
|
||||
},
|
||||
},
|
||||
|
||||
metric: function () {
|
||||
return this.display_units === "METRIC";
|
||||
},
|
||||
|
||||
mach_state: function () {
|
||||
const cycle = this.state.cycle;
|
||||
const xx = this.state.xx;
|
||||
if (xx != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
|
||||
return cycle.toUpperCase();
|
||||
}
|
||||
return xx || "";
|
||||
},
|
||||
|
||||
can_set_axis: function () { return this.state.cycle == "idle"; },
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
this.load();
|
||||
},
|
||||
|
||||
mixins: [require("./program-mixin")],
|
||||
};
|
||||
109
src/js/settings-shell-view.js
Normal file
109
src/js/settings-shell-view.js
Normal file
@@ -0,0 +1,109 @@
|
||||
"use strict";
|
||||
|
||||
// Wrapper that adds a left-rail navigator around the settings family
|
||||
// of views (Settings, Admin General, Admin Network, Tool, IO, Motor,
|
||||
// Macros, Help, Cheat Sheet). The inner view is selected by the URL
|
||||
// hash (parsed in app.js) and exposed as $root.sub_tab.
|
||||
|
||||
// Vue 1 has trouble making child components reactive to `$root.sub_tab`
|
||||
// changes (whether via computed, watch, or prop binding through
|
||||
// `<component :is>`). The shell instead listens to `hashchange`
|
||||
// directly and parses the hash itself, mirroring app.js's logic, then
|
||||
// keeps a local data prop `sub` that the template binds to. This is
|
||||
// the only path that updates the rail's `:class` reactively.
|
||||
module.exports = {
|
||||
template: "#settings-shell-view-template",
|
||||
props: ["config", "template", "state", "index"],
|
||||
|
||||
components: {
|
||||
"settings-view-inner": require("./settings-view"),
|
||||
"admin-general-view": require("./admin-general-view"),
|
||||
"admin-network-view": require("./admin-network-view"),
|
||||
"motor-view": require("./motor-view"),
|
||||
"tool-view": require("./tool-view"),
|
||||
"io-view": require("./io-view"),
|
||||
"macros-view": require("./macros"),
|
||||
"help-view": require("./help-view"),
|
||||
"cheat-sheet-view": {
|
||||
template: "#cheat-sheet-view-template",
|
||||
data: function () {
|
||||
return { showUnimplemented: false };
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
sub: this.$root.sub_tab || "settings",
|
||||
ridx: this.$root.index, // local copy of the motor index
|
||||
rail_items: [
|
||||
{ sub: "settings", href: "#settings", icon: "fa-display", label: "Display & Units" },
|
||||
{ sub: "admin-network", href: "#admin-network", icon: "fa-network-wired", label: "Network" },
|
||||
{ sub: "admin-general", href: "#admin-general", icon: "fa-shield-halved", label: "General / Firmware" },
|
||||
{ sub: "tool", href: "#tool", icon: "fa-bolt", label: "Spindle & Tool" },
|
||||
{ sub: "io", href: "#io", icon: "fa-plug", label: "I/O" },
|
||||
{ section: "Motors" },
|
||||
{ sub: "motor", motor: 0, href: "#motor:0", icon: "fa-arrows-up-down-left-right", label: "Motor 0" },
|
||||
{ sub: "motor", motor: 1, href: "#motor:1", icon: "fa-arrows-up-down-left-right", label: "Motor 1" },
|
||||
{ sub: "motor", motor: 2, href: "#motor:2", icon: "fa-arrows-up-down-left-right", label: "Motor 2" },
|
||||
{ sub: "motor", motor: 3, href: "#motor:3", icon: "fa-arrows-up-down-left-right", label: "Motor 3" },
|
||||
{ section: " " },
|
||||
{ sub: "macros", href: "#macros", icon: "fa-keyboard", label: "Macros" },
|
||||
{ sub: "cheat-sheet", href: "#cheat-sheet", icon: "fa-book", label: "G-code Cheat Sheet" },
|
||||
{ sub: "help", href: "#help", icon: "fa-circle-question", label: "Help" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
this._onHash = () => this.refresh_from_hash();
|
||||
window.addEventListener("hashchange", this._onHash);
|
||||
this.refresh_from_hash();
|
||||
},
|
||||
|
||||
attached: function () {
|
||||
// Vue 1 fires `attached` whenever the component is inserted into
|
||||
// the DOM (which happens on every route change because the outer
|
||||
// <component :is> recreates the instance). Re-bind the listener
|
||||
// here so it works even after detach/attach cycles.
|
||||
if (!this._onHash) {
|
||||
this._onHash = () => this.refresh_from_hash();
|
||||
}
|
||||
window.addEventListener("hashchange", this._onHash);
|
||||
this.refresh_from_hash();
|
||||
},
|
||||
|
||||
detached: function () {
|
||||
if (this._onHash) {
|
||||
window.removeEventListener("hashchange", this._onHash);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
if (this._onHash) {
|
||||
window.removeEventListener("hashchange", this._onHash);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refresh_from_hash: function () {
|
||||
const hash = location.hash.substr(1) || "settings";
|
||||
const parts = hash.split(":");
|
||||
this.sub = parts[0] || "settings";
|
||||
this.ridx = parts[1] !== undefined ? parts[1] : -1;
|
||||
},
|
||||
|
||||
is_active: function (item) {
|
||||
if (!item || item.section) return false;
|
||||
if (item.sub !== this.sub) return false;
|
||||
if (item.sub === "motor") {
|
||||
return "" + item.motor === "" + this.ridx;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
showShutdownDialog: function () {
|
||||
SvelteComponents.showDialog("Shutdown");
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -8,7 +8,6 @@ html(lang="en")
|
||||
|
||||
|
||||
style: include ../static/css/pure-min.css
|
||||
style: include ../static/css/side-menu.css
|
||||
|
||||
style: include ../static/css/font-awesome.min.css
|
||||
style: include ../static/css/Audiowide.css
|
||||
@@ -24,98 +23,112 @@ html(lang="en")
|
||||
#overlay(v-if="status != 'connected'")
|
||||
span {{status}}
|
||||
|
||||
#layout
|
||||
a#menuLink.menu-link(href="#menu"): span
|
||||
.app-shell
|
||||
header.app-head
|
||||
.brand-blk
|
||||
.brand-logo
|
||||
.brand-name ONEFINITY
|
||||
|
||||
#menu
|
||||
button.save.pure-button.button-success(:disabled="!modified",
|
||||
@click="save") Save
|
||||
nav.tabs-host(role="tablist")
|
||||
a.ktab(:class="{active: top_tab === 'control'}", href="#control",
|
||||
title="Jog, DRO, macros")
|
||||
.fa.fa-gamepad
|
||||
span Control
|
||||
a.ktab(:class="{active: top_tab === 'program'}", href="#program",
|
||||
title="Run programs, files, toolpath preview")
|
||||
.fa.fa-list-ol
|
||||
span Program
|
||||
a.ktab(:class="{active: top_tab === 'console'}", href="#console",
|
||||
title="MDI, messages, indicators")
|
||||
.fa.fa-terminal
|
||||
span Console
|
||||
span.ktab-badge(v-if="messages_count") {{messages_count}}
|
||||
a.ktab(:class="{active: top_tab === 'settings'}", href="#settings",
|
||||
title="Configuration, network, macros")
|
||||
.fa.fa-sliders
|
||||
span Settings
|
||||
|
||||
.pure-menu
|
||||
ul.pure-menu-list
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#control") Control
|
||||
.head-spacer
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#macros") Macros
|
||||
.sys-btn(@click.stop="toggle_sys_popover", :class="{open: sys_open}")
|
||||
span.pip(:class="sys_class")
|
||||
span.sys-text {{sys_summary}}
|
||||
.fa.fa-chevron-down
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#settings") Settings
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#motor:0") Motors
|
||||
|
||||
li.pure-menu-item(v-for="motor in config.motors")
|
||||
a.pure-menu-link(:href="'#motor:' + $index") Motor {{$index}}
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#tool") Tool
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#io") I/O
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#admin-general") Admin
|
||||
|
||||
li.pure-menu-item
|
||||
a.pure-menu-link(href="#admin-general") General
|
||||
|
||||
li.pure-menu-item
|
||||
a.pure-menu-link(href="#admin-network") Network
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#cheat-sheet") Cheat Sheet
|
||||
|
||||
li.pure-menu-heading
|
||||
a.pure-menu-link(href="#help") Help
|
||||
|
||||
button.pure-button.pure-button-primary(@click="showShutdownDialog", style="width: 100%")
|
||||
.fa.fa-power-off
|
||||
|
||||
#main
|
||||
.nav-header
|
||||
.brand
|
||||
img(src="/images/onefinity_logo.png")
|
||||
.version
|
||||
div Version: v{{config.full_version}}
|
||||
div IP Address: {{config.ip}}
|
||||
div WiFi: {{config.wifiName}}
|
||||
a.upgrade-link(v-if="show_upgrade()", href="#admin-general")
|
||||
| Upgrade to v{{latestVersion}}
|
||||
.fa.fa-exclamation-circle.upgrade-attention(v-if="show_upgrade()")
|
||||
|
||||
.pi-temp-warning
|
||||
.fa.fa-thermometer-full(class="error",
|
||||
v-if="80 <= state.rpi_temp",
|
||||
.pi-temp-warning(v-if="80 <= state.rpi_temp",
|
||||
title="Raspberry Pi temperature too high.")
|
||||
.fa.fa-thermometer-full
|
||||
|
||||
.easy-adapter(v-if="is_easy_adapter_active")
|
||||
.round-dot
|
||||
div.easy-adapter-text Easy Adapter
|
||||
|
||||
.whitespace
|
||||
|
||||
div
|
||||
button.rotary-button(:disabled="!enable_rotary", :class="is_rotary_active && 'active'", @click="showSwitchRotaryModeDialog")
|
||||
img(src="/images/rotary.svg", alt="rotary", :style="is_rotary_active ? 'width:90%;' : 'width:85%;'")
|
||||
div.rotary-text Rotary
|
||||
|
||||
.video(title="Plug camera into USB.\n" +
|
||||
"Left click to toggle video size.\n" +
|
||||
"Right click to toggle crosshair.", @click="toggle_video",
|
||||
@contextmenu="toggle_crosshair", :class="video_size")
|
||||
.crosshair(v-if="crosshair")
|
||||
.vertical
|
||||
.horizontal
|
||||
.box
|
||||
img(src="/api/video")
|
||||
span.state-badge(:class="state_class", :title="mach_state_full")
|
||||
span.dot
|
||||
span {{state_label}}
|
||||
|
||||
.estop(:class="{active: state.es}")
|
||||
estop(@click="estop")
|
||||
|
||||
.content(class="{{currentView}}-view")
|
||||
// System popover (chip-soup destination)
|
||||
.sys-popover(v-if="sys_open", @click.stop="")
|
||||
.sp-row
|
||||
.sp-icon: .fa.fa-microchip
|
||||
.sp-text
|
||||
.sp-label Firmware
|
||||
.sp-val v{{config.full_version}}
|
||||
a.sp-act(v-if="show_upgrade()", href="#admin-general")
|
||||
| Upgrade to v{{latestVersion}}
|
||||
.fa.fa-exclamation-circle.upgrade-attention
|
||||
.sp-row
|
||||
.sp-icon: .fa.fa-network-wired
|
||||
.sp-text
|
||||
.sp-label IP Address
|
||||
.sp-val {{config.ip}}
|
||||
.sp-row
|
||||
.sp-icon: .fa.fa-wifi(:class="{'sp-warn': config.wifiName === 'not connected'}")
|
||||
.sp-text
|
||||
.sp-label WiFi
|
||||
.sp-val {{config.wifiName}}
|
||||
a.sp-act(href="#admin-network", @click="sys_open=false") Configure
|
||||
.sp-row(v-if="enable_rotary")
|
||||
.sp-icon: img(src="/images/rotary.svg", alt="rotary")
|
||||
.sp-text
|
||||
.sp-label Rotary
|
||||
.sp-val {{is_rotary_active ? 'Active' : 'Inactive'}}
|
||||
button.sp-act(@click="showSwitchRotaryModeDialog")
|
||||
| {{is_rotary_active ? 'Disable' : 'Enable'}}
|
||||
.sp-row(v-if="is_easy_adapter_active")
|
||||
.sp-icon: .fa.fa-puzzle-piece
|
||||
.sp-text
|
||||
.sp-label Easy Adapter
|
||||
.sp-val Active
|
||||
.sp-row.video-row
|
||||
.sp-icon: .fa.fa-video
|
||||
.sp-text
|
||||
.sp-label Camera
|
||||
.sp-val {{has_camera ? 'Live' : 'Plug camera into USB'}}
|
||||
.sp-act(v-if="has_camera", @click="toggle_video")
|
||||
| {{video_size === 'small' ? 'Enlarge' : 'Shrink'}}
|
||||
.video(v-if="sys_open && has_camera", title="Camera feed",
|
||||
@click="toggle_video", @contextmenu="toggle_crosshair",
|
||||
:class="video_size")
|
||||
.crosshair(v-if="crosshair")
|
||||
.vertical
|
||||
.horizontal
|
||||
.box
|
||||
img(src="/api/video", @error="has_camera=false")
|
||||
.sp-foot
|
||||
button.sp-shutdown(@click="showShutdownDialog")
|
||||
.fa.fa-power-off
|
||||
| Shutdown
|
||||
button.sp-save(:disabled="!modified", @click="save")
|
||||
.fa.fa-save
|
||||
| Save{{modified ? '*' : ''}}
|
||||
|
||||
// Routed view (no keep-alive: Vue 1 has issues re-evaluating
|
||||
// dynamic :class / v-if bindings on cached components when the
|
||||
// route changes within the same kept-alive tree)
|
||||
.app-body
|
||||
component(:is="currentView + '-view'", :index="index",
|
||||
:config="config", :template="template", :state="state", keep-alive)
|
||||
:config="config", :template="template", :state="state",
|
||||
:sub-tab="sub_tab")
|
||||
|
||||
message.error-message(:show.sync="errorShow")
|
||||
div(slot="header")
|
||||
|
||||
67
src/pug/templates/console-view.pug
Normal file
67
src/pug/templates/console-view.pug
Normal file
@@ -0,0 +1,67 @@
|
||||
script#console-view-template(type="text/x-template")
|
||||
.console-page
|
||||
.console-card
|
||||
.ptab-bar
|
||||
button.ptab(:class="{active: sub === 'mdi'}", @click="select_sub('mdi')")
|
||||
.fa.fa-keyboard
|
||||
| MDI
|
||||
button.ptab(:class="{active: sub === 'messages'}", @click="select_sub('messages')")
|
||||
.fa.fa-comment-dots
|
||||
| Messages
|
||||
span.ptab-badge(v-if="unread_messages") {{unread_messages}}
|
||||
button.ptab(:class="{active: sub === 'indicators'}", @click="select_sub('indicators')")
|
||||
.fa.fa-bell
|
||||
| Indicators
|
||||
|
||||
// ----- MDI -----
|
||||
.mdi-pane(v-show="sub === 'mdi'")
|
||||
.mdi-input
|
||||
span.prompt G>
|
||||
input(type="text", v-model="mdi", :disabled="!can_mdi",
|
||||
@keyup.enter="submit_mdi", placeholder="enter a G-code command…")
|
||||
button.mdi-send(:disabled="!can_mdi || !mdi", @click="submit_mdi")
|
||||
.fa.fa-paper-plane
|
||||
| SEND
|
||||
.mdi-keys
|
||||
button.mkey(@click="prepend('G0 ')") G0
|
||||
button.mkey(@click="prepend('G1 ')") G1
|
||||
button.mkey(@click="prepend('G2 ')") G2
|
||||
button.mkey(@click="prepend('G3 ')") G3
|
||||
button.mkey(@click="prepend('G28 ')") G28
|
||||
button.mkey(@click="prepend('G92 ')") G92
|
||||
button.mkey(@click="prepend('M3 ')") M3
|
||||
button.mkey(@click="prepend('M5 ')") M5
|
||||
button.mkey(@click="append('X')") X
|
||||
button.mkey(@click="append('Y')") Y
|
||||
button.mkey(@click="append('Z')") Z
|
||||
button.mkey(@click="append('W')") W
|
||||
button.mkey(@click="append('F')") F
|
||||
button.mkey(@click="append('S')") S
|
||||
button.mkey.clear(@click="mdi = ''") CLEAR
|
||||
button.mkey.send(:disabled="!can_mdi || !mdi", @click="submit_mdi") SEND ↵
|
||||
|
||||
em Machine units: #[strong {{mach_units}}]. G20/G21 to switch.
|
||||
|
||||
.mdi-history(:class="{placeholder: !history.length}")
|
||||
span.mdi-empty(v-if="!history.length") MDI history will display here.
|
||||
.h-row(v-for="item in history", @click="load_history($index)",
|
||||
track-by="$index")
|
||||
span.h-cmd {{item}}
|
||||
span.h-status ↻
|
||||
|
||||
// ----- Messages -----
|
||||
.messages-pane(v-show="sub === 'messages'")
|
||||
.msg-empty(v-if="!$root.messages_log.length")
|
||||
.fa.fa-check-circle
|
||||
| No messages.
|
||||
.msg(v-for="m in $root.messages_log",
|
||||
:class="m.level === 'warning' ? 'warn' : 'info'", track-by="$index")
|
||||
.mi
|
||||
.fa(:class="m.level === 'warning' ? 'fa-triangle-exclamation' : 'fa-circle-info'")
|
||||
div
|
||||
.mtitle {{m.text}}
|
||||
.mtime ID {{m.id}}
|
||||
|
||||
// ----- Indicators -----
|
||||
.indicators-pane(v-show="sub === 'indicators'")
|
||||
indicators(:state="state", :template="template")
|
||||
@@ -1,12 +1,11 @@
|
||||
script#control-view-template(type="text/x-template")
|
||||
#control
|
||||
.control-page
|
||||
// ----- Modal dialogs (kept verbatim from legacy) -----
|
||||
message(:show.sync="showGcodeMessage")
|
||||
h3(slot="header") Processing New File
|
||||
|
||||
div(slot="body")
|
||||
h3 Please wait..
|
||||
p Simulating GCode to check for errors, calculate ETA and generate 3D view.
|
||||
|
||||
div(slot="footer")
|
||||
label Simulating {{(toolpath_progress || 0) | percent}}
|
||||
|
||||
@@ -14,7 +13,6 @@ script#control-view-template(type="text/x-template")
|
||||
h3(slot="header") GCode Not Set
|
||||
div(slot="body")
|
||||
p Configure the GCode for the selected macro to use it
|
||||
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="showNoGcodeMessage=false") OK
|
||||
|
||||
@@ -25,7 +23,6 @@ script#control-view-template(type="text/x-template")
|
||||
| The macro file
|
||||
strong {{state.selected}}
|
||||
| is being loaded.
|
||||
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="macrosLoading=false") Cancel
|
||||
button.pure-button.pure-button-primary(@click="start_pause") Run
|
||||
@@ -35,8 +32,7 @@ script#control-view-template(type="text/x-template")
|
||||
div(slot="body")
|
||||
p It seems like the file you selected cannot be found. Try uploading again.
|
||||
div(slot="footer")
|
||||
button.pure-button.button-error(@click="GCodeNotFound=false")
|
||||
| OK
|
||||
button.pure-button.button-error(@click="GCodeNotFound=false") OK
|
||||
|
||||
message(:show.sync="show_probe_dialog")
|
||||
h3(slot="header") Probe Rotary
|
||||
@@ -46,430 +42,232 @@ script#control-view-template(type="text/x-template")
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="show_probe_dialog=false") Cancel
|
||||
|
||||
// ----- Main grid: jog | (DRO + status strip) -----
|
||||
.control-grid
|
||||
|
||||
table(style="table-layout: fixed; width: 100%;")
|
||||
tr(style="height: fit-content;")
|
||||
td(style="white-space: nowrap; width: 410px;", rowspan="2")
|
||||
table.control-buttons(table-layout="fixed")
|
||||
colgroup
|
||||
col(style="width:100px")
|
||||
col(style="width:100px")
|
||||
col(style="width:100px")
|
||||
col(style="width:100px")
|
||||
tr
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(-1,1,0,0)")
|
||||
.fa.fa-arrow-right(style="transform: rotate(-135deg);")
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(0,1,0,0)") Y+
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(1,1,0,0)")
|
||||
.fa.fa-arrow-right(style="transform: rotate(-45deg);")
|
||||
td(style="height:100px",align="center")
|
||||
button(,@click="jog_fn(0,0,1,0)") Z+
|
||||
tr
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(-1,0,0,0)") X-
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="showMoveToZeroDialog('xy')")
|
||||
| XY
|
||||
br
|
||||
| Origin
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(1,0,0,0)") X+
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="showMoveToZeroDialog('z')")
|
||||
| Z
|
||||
br
|
||||
| Origin
|
||||
tr
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(-1,-1,0,0)")
|
||||
.fa.fa-arrow-right(style="transform: rotate(135deg);")
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(0,-1,0,0)") Y-
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(1,-1,0,0)")
|
||||
.fa.fa-arrow-right(style="transform: rotate(45deg);")
|
||||
td(style="height:100px",align="center")
|
||||
button(@click="jog_fn(0,0,-1,0)") Z-
|
||||
tr
|
||||
td(style="height:100px",align="center")
|
||||
button(:style="getJogIncrStyle('fine')", @click="jog_incr = 'fine'")
|
||||
span {{jog_incr_amounts[display_units].fine}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
|
||||
td(style="height:100px",align="center")
|
||||
button(:style="getJogIncrStyle('small')", @click="jog_incr = 'small'")
|
||||
span {{jog_incr_amounts[display_units].small}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
|
||||
td(style="height:100px",align="center")
|
||||
button(:style="getJogIncrStyle('medium')", @click="jog_incr = 'medium'")
|
||||
span {{jog_incr_amounts[display_units].medium}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
|
||||
td(style="height:100px",align="center")
|
||||
button(:style="getJogIncrStyle('large')", @click="jog_incr = 'large'")
|
||||
span {{jog_incr_amounts[display_units].large}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
|
||||
// ===== JOG =====
|
||||
.jog-card
|
||||
.jog-head
|
||||
.jog-title
|
||||
| Jog
|
||||
span.step-pre · step
|
||||
span.step {{jog_incr_amounts[display_units][jog_incr]}}#[span.unit {{metric ? 'mm' : 'in'}}]
|
||||
.step-seg
|
||||
button(:class="{active: jog_incr === 'fine'}", @click="jog_incr = 'fine'")
|
||||
| {{jog_incr_amounts[display_units].fine}}
|
||||
button(:class="{active: jog_incr === 'small'}", @click="jog_incr = 'small'")
|
||||
| {{jog_incr_amounts[display_units].small}}
|
||||
button(:class="{active: jog_incr === 'medium'}", @click="jog_incr = 'medium'")
|
||||
| {{jog_incr_amounts[display_units].medium}}
|
||||
button(:class="{active: jog_incr === 'large'}", @click="jog_incr = 'large'")
|
||||
| {{jog_incr_amounts[display_units].large}}
|
||||
|
||||
tr(v-if="state['2an'] == 3")
|
||||
td(style="height:100px", align="center", colspan="1")
|
||||
button(@click="show_probe_dialog=true")
|
||||
| Probe
|
||||
br
|
||||
| Rotary
|
||||
.jog-grid
|
||||
// Row 1
|
||||
button.jbtn.dir(@click="jog_fn(-1, 1, 0, 0)", title="X- Y+")
|
||||
.fa.fa-arrow-up.ico(style="transform: rotate(-45deg)")
|
||||
button.jbtn(@click="jog_fn(0, 1, 0, 0)") Y+
|
||||
button.jbtn.dir(@click="jog_fn(1, 1, 0, 0)", title="X+ Y+")
|
||||
.fa.fa-arrow-up.ico(style="transform: rotate(45deg)")
|
||||
button.jbtn(@click="jog_fn(0, 0, 1, 0)") Z+
|
||||
|
||||
td(style="height:100px", align="center", colspan="1")
|
||||
button(@click="jog_fn(0,0,0,-1)", style="display: grid;justify-content: center;align-items: center;padding: 14px;")
|
||||
| A-
|
||||
.fa.fa-rotate-left
|
||||
// Row 2
|
||||
button.jbtn(@click="jog_fn(-1, 0, 0, 0)") X−
|
||||
button.jbtn.ghost(@click="showMoveToZeroDialog('xy')")
|
||||
span.lbl XY
|
||||
span Origin
|
||||
button.jbtn(@click="jog_fn(1, 0, 0, 0)") X+
|
||||
button.jbtn.ghost(@click="showMoveToZeroDialog('z')")
|
||||
span.lbl Z
|
||||
span Origin
|
||||
|
||||
td(style="height:100px", align="center", colspan="1")
|
||||
button(@click="showMoveToZeroDialog('a')")
|
||||
| A
|
||||
br
|
||||
| Origin
|
||||
// Row 3
|
||||
button.jbtn.dir(@click="jog_fn(-1, -1, 0, 0)", title="X- Y-")
|
||||
.fa.fa-arrow-down.ico(style="transform: rotate(45deg)")
|
||||
button.jbtn(@click="jog_fn(0, -1, 0, 0)") Y−
|
||||
button.jbtn.dir(@click="jog_fn(1, -1, 0, 0)", title="X+ Y-")
|
||||
.fa.fa-arrow-down.ico(style="transform: rotate(-45deg)")
|
||||
button.jbtn(@click="jog_fn(0, 0, -1, 0)") Z−
|
||||
|
||||
td(style="height:100px", align="center", colspan="1")
|
||||
button(@click="jog_fn(0,0,0,1)", style="display: grid;justify-content: center;align-items: center;padding: 14px;")
|
||||
| A+
|
||||
.fa.fa-rotate-right
|
||||
// Row 4 — auxiliary axis (W or A) or probe shortcuts
|
||||
template(v-if="w.enabled")
|
||||
button.jbtn(@click="aux_jog_incr(-1)", :disabled="!w.enabled")
|
||||
.fa.fa-arrow-down.ico
|
||||
span.lbl W−
|
||||
button.jbtn.ghost(@click="aux_home()", :disabled="!w.enabled")
|
||||
span.lbl Home
|
||||
span W
|
||||
button.jbtn(@click="aux_jog_incr(+1)", :disabled="!w.enabled")
|
||||
.fa.fa-arrow-up.ico
|
||||
span.lbl W+
|
||||
button.jbtn(@click="show_probe_dialog=true",
|
||||
:class="{'load-on': !state['pw']}")
|
||||
.fa.fa-bullseye.ico
|
||||
span.lbl Probe
|
||||
template(v-else-if="state['2an'] == 3")
|
||||
button.jbtn.dir(@click="jog_fn(0, 0, 0, -1)")
|
||||
.fa.fa-rotate-left.ico
|
||||
span.lbl A−
|
||||
button.jbtn.ghost(@click="showMoveToZeroDialog('a')")
|
||||
span.lbl A
|
||||
span Origin
|
||||
button.jbtn.dir(@click="jog_fn(0, 0, 0, 1)")
|
||||
.fa.fa-rotate-right.ico
|
||||
span.lbl A+
|
||||
button.jbtn(@click="show_probe_dialog=true",
|
||||
:class="{'load-on': !state['pw']}")
|
||||
.fa.fa-bullseye.ico
|
||||
span.lbl Probe
|
||||
template(v-else)
|
||||
button.jbtn(@click="showProbeDialog('xyz')",
|
||||
:class="{'load-on': !state['pw']}")
|
||||
.fa.fa-bullseye.ico
|
||||
span.lbl Probe XYZ
|
||||
button.jbtn.ghost(@click="zero()", :disabled="!can_set_axis")
|
||||
.fa.fa-map-marker.ico
|
||||
span.lbl Zero all
|
||||
button.jbtn(@click="showProbeDialog('z')",
|
||||
:class="{'load-on': !state['pw']}")
|
||||
.fa.fa-bullseye.ico
|
||||
span.lbl Probe Z
|
||||
button.jbtn.ghost(@click="home()", :disabled="!is_idle")
|
||||
.fa.fa-home.ico
|
||||
span.lbl Home all
|
||||
|
||||
tr(v-else)
|
||||
td(style="height:100px", align="center", colspan="2")
|
||||
button(:class="state['pw'] ? '' : 'load-on'",
|
||||
style="height:100px;width:200px",
|
||||
@click="showProbeDialog('xyz')")
|
||||
| Probe XYZ
|
||||
// ===== DRO + status strip =====
|
||||
.right-col
|
||||
|
||||
td(style="height:100px", align="center", colspan="2")
|
||||
button(:class="state['pw'] ? '' : 'load-on'",
|
||||
style="height:100px;width:200px",
|
||||
@click="showProbeDialog('z')")
|
||||
| Probe Z
|
||||
|
||||
td(style="vertical-align: top;")
|
||||
table.axes
|
||||
tr(:class="axes.klass")
|
||||
th.name Axis
|
||||
th.position Position
|
||||
th.absolute Absolute
|
||||
th.offset Offset
|
||||
th.state State
|
||||
th.tstate Toolpath
|
||||
th.actions
|
||||
button.pure-button(disabled, style="height:60px;width:60px;display:none;")
|
||||
|
||||
button.pure-button(:disabled="!can_set_axis",
|
||||
title="Zero all axis offsets.", @click="zero()",style="height:60px;width:60px")
|
||||
.fa.fa-map-marker
|
||||
|
||||
button.pure-button(title="Home all axes.", @click="home()",
|
||||
:disabled="!is_idle",style="height:60px;width:60px")
|
||||
.fa.fa-home
|
||||
.dro-card
|
||||
.dro-head
|
||||
div Axis
|
||||
div Position
|
||||
div Absolute
|
||||
div Offset
|
||||
div State
|
||||
div Toolpath
|
||||
div(style="text-align:right") Actions
|
||||
|
||||
// Per-axis rows — keep unit-value + bindings from axis-vars
|
||||
each axis in 'xyzabc'
|
||||
tr.axis(:class=`${axis}.klass`, v-if=`${axis}.enabled`,
|
||||
.dro-row(:class=`${axis}.klass + ' ' + ${axis}.tklass`,
|
||||
v-if=`${axis}.enabled`,
|
||||
:title=`${axis}.title`)
|
||||
th.name= axis
|
||||
td.position: unit-value(:value=`${axis}.pos`, precision=4)
|
||||
td.absolute: unit-value(:value=`${axis}.abs`, precision=3)
|
||||
td.offset: unit-value(:value=`${axis}.off`, precision=3)
|
||||
td.state
|
||||
.dro-axis(:class=`'axis-' + '${axis}'`)= axis.toUpperCase()
|
||||
.dro-pos: unit-value(:value=`${axis}.pos`, precision=4)
|
||||
.dro-sec: unit-value(:value=`${axis}.abs`, precision=3)
|
||||
.dro-sec: unit-value(:value=`${axis}.off`, precision=3)
|
||||
.dro-state
|
||||
span.chip(:class=`${axis}.tklass.indexOf('error') !== -1 ? 'chip-red' : (${axis}.homed ? 'chip-green' : 'chip-amber')`)
|
||||
.fa(:class=`'fa-' + ${axis}.icon`)
|
||||
| {{#{axis}.state}}
|
||||
td.tstate(:class=`${axis}.tklass`, :title=`${axis}.toolmsg`, @click=`showToolpathMessageDialog('${axis}')`)
|
||||
| {{#{axis}.state}}
|
||||
.dro-toolpath
|
||||
span.chip(:class=`${axis}.tklass.indexOf('error') !== -1 ? 'chip-red' : (${axis}.tklass.indexOf('warn') !== -1 ? 'chip-amber' : 'chip-green')`,
|
||||
@click=`showToolpathMessageDialog('${axis}')`)
|
||||
.fa(:class=`'fa-' + ${axis}.ticon`)
|
||||
| {{#{axis}.tstate}}
|
||||
|
||||
th.actions
|
||||
button.pure-button(:disabled="!can_set_axis",
|
||||
title=`Set {{'${axis}' | upper}} axis position.`,
|
||||
@click=`show_set_position('${axis}')`, style="height:60px;width:60px")
|
||||
| {{#{axis}.tstate}}
|
||||
.actions-cell
|
||||
button.icon-btn(:disabled="!can_set_axis",
|
||||
:title=`'Set ${axis.toUpperCase()} axis position.'`,
|
||||
@click=`show_set_position('${axis}')`)
|
||||
.fa.fa-cog
|
||||
|
||||
button.pure-button(:disabled="!can_set_axis",
|
||||
title=`Zero {{'${axis}' | upper}} axis offset.`,
|
||||
@click=`zero('${axis}')`, style="height:60px;width:60px")
|
||||
button.icon-btn(:disabled="!can_set_axis",
|
||||
:title=`'Zero ${axis.toUpperCase()} axis offset.'`,
|
||||
@click=`zero('${axis}')`)
|
||||
.fa.fa-map-marker
|
||||
|
||||
button.pure-button(:disabled="!is_idle", @click=`home('${axis}')`,
|
||||
title=`Home {{'${axis}' | upper}} axis.`, style="height:60px;width:60px")
|
||||
button.icon-btn(:disabled="!is_idle",
|
||||
:title=`'Home ${axis.toUpperCase()} axis.'`,
|
||||
@click=`home('${axis}')`)
|
||||
.fa.fa-home
|
||||
|
||||
tr(style="vertical-align: top;")
|
||||
td
|
||||
table(width="100%")
|
||||
tr
|
||||
td(style="text-align:center")
|
||||
table.info
|
||||
tr
|
||||
th State
|
||||
td(:class="{attention: highlight_state}") {{mach_state}}
|
||||
// W axis (auxiliary) — no offset, no set-zero / no set-position
|
||||
.dro-row(:class="w.klass + ' ' + w.tklass", v-if="w.enabled",
|
||||
:title="w.title")
|
||||
.dro-axis.axis-w W
|
||||
.dro-pos: unit-value(:value="w.pos", precision=4)
|
||||
.dro-sec: unit-value(:value="w.abs", precision=3)
|
||||
.dro-sec —
|
||||
.dro-state
|
||||
span.chip(:class="w.homed ? 'chip-green' : 'chip-amber'")
|
||||
.fa(:class="'fa-' + w.icon")
|
||||
| {{w.state}}
|
||||
.dro-toolpath
|
||||
span.chip.chip-green
|
||||
.fa(:class="'fa-' + w.ticon")
|
||||
| {{w.tstate}}
|
||||
.actions-cell
|
||||
button.icon-btn(disabled, style="visibility:hidden")
|
||||
.fa.fa-cog
|
||||
button.icon-btn(disabled, style="visibility:hidden")
|
||||
.fa.fa-map-marker
|
||||
button.icon-btn(:disabled="!w.enabled",
|
||||
title="Home W axis.", @click="aux_home()")
|
||||
.fa.fa-home
|
||||
|
||||
tr
|
||||
th Message
|
||||
td.message(:class="{attention: highlight_state}")
|
||||
| {{message.replace(/^#/, '')}}
|
||||
// ----- Status strip -----
|
||||
.status-strip
|
||||
.stat-card
|
||||
.stat-label State
|
||||
.stat-val(:class="state_kpi_class") {{mach_state || '--'}}
|
||||
.stat-sub(v-if="message") {{message.replace(/^#/, '')}}
|
||||
.stat-sub(v-else) No alerts
|
||||
|
||||
tr
|
||||
th Display Units
|
||||
td.units
|
||||
select(v-model="display_units")
|
||||
option(value="METRIC") METRIC
|
||||
option(value="IMPERIAL") IMPERIAL
|
||||
|
||||
tr(title="Active tool")
|
||||
th Tool
|
||||
td {{state.tool || 0}}
|
||||
|
||||
td
|
||||
table.info
|
||||
tr(
|
||||
title="Current velocity in {{metric ? 'meters' : 'inches'}} per minute")
|
||||
th Velocity
|
||||
td
|
||||
.stat-card
|
||||
.stat-label Velocity / Feed
|
||||
.stat-val
|
||||
unit-value(:value="state.v", precision="2", unit="", iunit="",
|
||||
scale="0.0254")
|
||||
| {{metric ? ' m/min' : ' IPM'}}
|
||||
| ·
|
||||
unit-value(:value="state.feed", precision="0", unit="", iunit="")
|
||||
.stat-sub {{metric ? 'm/min · mm/min' : 'IPM · IPM'}}
|
||||
|
||||
tr(title="Programmed feed rate.")
|
||||
th Feed
|
||||
td
|
||||
unit-value(:value="state.feed", precision="2", unit="", iunit="")
|
||||
| {{metric ? ' mm/min' : ' IPM'}}
|
||||
.stat-card.stat-tappable(@click="overrides_open = !overrides_open",
|
||||
:class="{open: overrides_open}", title="Tap to adjust feed/spindle override")
|
||||
.stat-label Spindle
|
||||
.stat-val
|
||||
| {{(state.speed || 0) | fixed 0}}
|
||||
span(v-if="state.s != null && !isNaN(state.s)") ({{state.s | fixed 0}})
|
||||
.stat-sub
|
||||
| RPM (commanded / actual)
|
||||
.fa.fa-sliders.tap-hint(title="Open override drawer")
|
||||
|
||||
tr(title="Programed and actual speed.")
|
||||
th Speed
|
||||
td
|
||||
| {{state.speed || 0 | fixed 0}}
|
||||
span(v-if="!isNaN(state.s)") ({{state.s | fixed 0}})
|
||||
= ' RPM'
|
||||
|
||||
tr(title="Load switch states.")
|
||||
th Loads
|
||||
td
|
||||
span(:class="state['1oa'] ? 'load-on' : ''")
|
||||
| 1:{{state['1oa'] ? 'On' : 'Off'}}
|
||||
|
|
||||
span(:class="state['2oa'] ? 'load-on' : ''")
|
||||
| 2:{{state['2oa'] ? 'On' : 'Off'}}
|
||||
|
||||
td
|
||||
table.info
|
||||
tr
|
||||
th Remaining
|
||||
td(title="Total run time (days:hours:mins:secs)").
|
||||
#[span(v-if="plan_time_remaining") {{plan_time_remaining | time}} of]
|
||||
{{toolpath.time | time}}
|
||||
|
||||
tr
|
||||
th ETA
|
||||
td.eta {{eta}}
|
||||
|
||||
tr
|
||||
th Line
|
||||
td
|
||||
.stat-card
|
||||
.stat-label Job
|
||||
.stat-val
|
||||
| {{0 <= state.line ? state.line : 0 | number}}
|
||||
span(v-if="toolpath.lines")
|
||||
| of {{toolpath.lines | number}}
|
||||
| / {{toolpath.lines | number}}
|
||||
.stat-sub(v-if="plan_time_remaining || toolpath.time")
|
||||
| Line · {{plan_time_remaining ? (plan_time_remaining | time) : (toolpath.time | time)}} remaining
|
||||
.stat-sub(v-else) Line · ETA --
|
||||
|
||||
tr
|
||||
th Progress
|
||||
td.progress
|
||||
label {{(progress || 0) | percent}}
|
||||
.bar(:style="'width:' + (progress || 0) * 100 + '%'")
|
||||
// ----- Macro row (slice 0..7); full list lives in Settings → Macros -----
|
||||
.macro-row(v-if="state.macros && state.macros.length")
|
||||
button.macro-btn(v-for="(index, macros) in state.macros.slice(0, 8)",
|
||||
title="Click to run macro",
|
||||
@click="run_macro(index)",
|
||||
:disabled="!is_ready",
|
||||
:style="{ borderLeftColor: macros.color || '#fde047' }")
|
||||
span.mnum {{index + 1}}
|
||||
.fa.fa-circle-play.micon
|
||||
span.mname {{macros.name || ('Macro ' + (index + 1))}}
|
||||
|
||||
.macros-div(class="present")
|
||||
button.macros-button(title="Click to run Macros",v-for="(index,macros) in state.macros",
|
||||
@click="run_macro(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
|
||||
|
||||
.tabs
|
||||
|
||||
input#tab1(type="radio", name="tabs",checked="" @click="tab = 'auto'")
|
||||
label(for="tab1", title="Run GCode programs",style="height:50px;width:100px") Auto
|
||||
|
||||
input#tab2(type="radio", name="tabs", @click="tab = 'mdi'")
|
||||
label(for="tab2", title="Manual GCode entry",style="height:50px;width:100px") MDI
|
||||
|
||||
input#tab3(type="radio", name="tabs", @click="tab = 'messages'")
|
||||
label(for="tab3",style="height:50px;width:100px") Messages
|
||||
|
||||
input#tab4(type="radio", name="tabs", @click="tab = 'indicators'")
|
||||
label(for="tab4",style="height:50px;width:100px") Indicators
|
||||
|
||||
|
||||
|
||||
|
||||
section#content1.tab-content.pure-form
|
||||
.toolbar.pure-control-group
|
||||
button.pure-button(:class="{'attention': is_holding}",
|
||||
title="{{is_running ? 'Pause' : 'Start'}} program.",
|
||||
@click="start_pause", :disabled="!state.selected",
|
||||
style="height:100px;width:100px;font-weight:normal")
|
||||
img(v-if="is_running" src="images/pause_gcode.png" style="height: 55px;")
|
||||
img(v-else src="images/play_gcode.png" style="height: 55px;")
|
||||
|
||||
button.pure-button(title="Stop program.", @click="stop", style="height:100px;width:100px;font-weight:normal")
|
||||
img(src="images/stop.png" style="height: 55px;")
|
||||
|
||||
button.pure-button(title="Pause program at next optional stop (M1).",
|
||||
@click="optional_pause", v-if="false", style="height:100px;width:100px;font-weight:normal")
|
||||
.fa.fa-stop-circle-o
|
||||
|
||||
message(:show.sync="uploading_files")
|
||||
h3(slot="header") Files uploading
|
||||
div(slot="body")
|
||||
h3 Please wait...
|
||||
p
|
||||
p The files are currently being uploaded.
|
||||
p Do not close the window.
|
||||
div(slot="footer")
|
||||
|
||||
button.pure-button(title="Execute one program step.", @click="step",
|
||||
:disabled="(!is_ready && !is_holding) || !state.selected",
|
||||
v-if="false", style="height:100px;width:100px;font-weight:normal")
|
||||
.fa.fa-step-forward
|
||||
|
||||
button.pure-button(title="Upload a new GCode folder.", @click="open_folder",
|
||||
:disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
|
||||
img(src="images/upload_folder.png" style="height: 65px;")
|
||||
|
||||
form.gcode-folder-input.file-upload
|
||||
input#folderInput(type="file", @change="upload_folder", :disabled="!is_ready",
|
||||
webkitdirectory, directory)
|
||||
|
||||
button.pure-button(title="Upload a new GCode program.", @click="open_file",
|
||||
:disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
|
||||
img(src="images/upload_gcode.png" style="height: 65px;")
|
||||
|
||||
form.gcode-file-input.file-upload
|
||||
input(type="file", @change="upload_file", :disabled="!is_ready",
|
||||
accept=".nc,.ngc,.gcode,.gc", multiple)
|
||||
|
||||
a(:disabled="!state.selected", download,
|
||||
:href="'/api/file/' + state.selected",
|
||||
title="Download the selected GCode program.")
|
||||
button.pure-button(:disabled="!state.selected", style="height:100px;width:100px")
|
||||
img(src="images/download_gcode.png" style="height: 65px;")
|
||||
|
||||
button.pure-button(title="Delete current GCode program.",
|
||||
@click="deleteGCode = true",
|
||||
:disabled="!state.selected || !is_ready",style="height:100px;width:100px;font-weight:normal")
|
||||
img(src="images/delete_gcode.png" style="height: 55px;")
|
||||
|
||||
message.error-message(:show.sync="deleteGCode")
|
||||
h3(slot="header") Select files to delete:
|
||||
div(slot="body")
|
||||
input.search-bar(type="text", v-model="search_query", placeholder="Search Files...")
|
||||
.container
|
||||
.folders
|
||||
h3 Folders
|
||||
div(v-for="(index, folder) in state.gcode_list", :key="index", @click="populateFiles(index)",
|
||||
class="folder-item", :class="{ selected: index === selected_folder_index }") {{ folder.name }}
|
||||
.files
|
||||
h3 Files
|
||||
label.file-item(v-for="item in gcode_filtered_files" :key="item")
|
||||
input(type="checkbox" :value="item" v-model="selected_items_to_delete")
|
||||
| {{ item }}
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="cancel_delete",style="height:50px") Cancel
|
||||
//- button.pure-button.button-error(@click="delete_all_except_macros")
|
||||
//- .fa.fa-trash
|
||||
//- | All
|
||||
button.pure-button.button-success(@click="delete_current",style="height:50px")
|
||||
.fa.fa-trash
|
||||
| Selected
|
||||
|
||||
.drop-down-container
|
||||
message(:show.sync="create_folder")
|
||||
h3(slot="header") Enter folder name:
|
||||
div(slot="body")
|
||||
input.input-name(type="text",minlength='1',maxlength='15',style ="margin-top:1rem;margin-bottom:2rem;",
|
||||
id="folder-name" ,v-model="folder_name",@keypress="edited_folder_name")
|
||||
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="cancel_new_folder") Cancel
|
||||
button.pure-button.button-success(@click="create_new_folder",:disabled="!edited")
|
||||
| Create
|
||||
|
||||
message(:show.sync="confirmDelete")
|
||||
h3(slot="header") Delete Folder?
|
||||
div(slot="body")
|
||||
p Are you sure to delete the folder?
|
||||
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="confirmDelete=false") Cancel
|
||||
button.pure-button.button-error(@click="delete_folder") Folder only
|
||||
button.pure-button.button-success(@click="delete_folder_and_files") Folder and files
|
||||
|
||||
button.pure-button(title="Create a new folder.", @click="create_folder=true",
|
||||
:disabled="!is_ready",style="height:100%")
|
||||
| Create Folder
|
||||
|
||||
button.pure-button(title="Delete a folder.", @click="confirmDelete=true",
|
||||
:disabled="!is_ready",style="height:100%;margin-left:5px")
|
||||
| Delete Folder
|
||||
|
||||
select(title="Select previously uploaded GCode folder.",
|
||||
v-model="state.folder", @change="reset_gcode", :disabled="!is_ready",
|
||||
style="max-width:100%;margin-left:5px")
|
||||
option( selected='' value='default') Default folder
|
||||
option(v-for="file in gcode_folders", :value="file") {{file}}
|
||||
|
||||
select(title="Select previously uploaded GCode programs.",
|
||||
v-model="state.selected", @change="load", :disabled="!is_ready",
|
||||
style="max-width:300px;margin-left:5px")
|
||||
option(v-for="file in gcode_files", :value="file") {{file}}
|
||||
|
||||
button.pure-button(@click="toggle_sorting", :disabled="!is_ready",
|
||||
style="height:75%")
|
||||
| {{files_sortby}}
|
||||
|
||||
.progress(v-if="toolpath_progress && toolpath_progress < 1",
|
||||
title="Simulating GCode to check for errors, calculate ETA and " +
|
||||
"generate 3D view. You can run GCode before the simulation " +
|
||||
"finishes.")
|
||||
div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
|
||||
label Simulating {{(toolpath_progress || 0) | percent}}
|
||||
|
||||
path-viewer(:toolpath="toolpath", :state="state", :config="config")
|
||||
gcode-viewer
|
||||
|
||||
section#content2.tab-content
|
||||
.mdi.pure-form(title="Manual GCode entry.")
|
||||
button.pure-button(:disabled="!can_mdi",
|
||||
:class="{'attention': is_holding}",
|
||||
title="{{is_running ? 'Pause' : 'Start'}} command.",
|
||||
@click="mdi_start_pause",style="height:100px;width:100px")
|
||||
.fa(:class="is_running ? 'fa-pause' : 'fa-play'")
|
||||
|
||||
button.pure-button(title="Stop command.", @click="stop",style="height:100px;width:100px")
|
||||
.fa.fa-stop
|
||||
|
||||
input(v-model="mdi", :disabled="!can_mdi", @keyup.enter="submit_mdi")
|
||||
|
||||
div
|
||||
em The machine is currently operating in #[strong {{mach_units}}] units. Use G20/G21 to switch units.
|
||||
|
||||
.history(:class="{placeholder: !history}")
|
||||
span(v-if="!history.length") MDI history displays here.
|
||||
ul
|
||||
li(v-for="item in history", @click="load_history($index)",
|
||||
track-by="$index")
|
||||
| {{item}}
|
||||
|
||||
section#content3.tab-content
|
||||
console
|
||||
|
||||
section#content4.tab-content
|
||||
indicators(:state="state", :template="template")
|
||||
|
||||
.override(title="Feed rate override.")
|
||||
// ----- Override drawer (anchored to bottom; toggled by Spindle KPI tile) -----
|
||||
.override-drawer(:class="{open: overrides_open}")
|
||||
.od-head
|
||||
.od-title
|
||||
.fa.fa-sliders
|
||||
| Overrides
|
||||
button.od-close(@click="overrides_open = false") ✕
|
||||
.od-body
|
||||
.od-row
|
||||
label Feed
|
||||
input(type="range", min="0", max="2", step="0.01",
|
||||
v-model="feed_override", @change="override_feed")
|
||||
span.percent {{feed_override | percent 0}}
|
||||
|
||||
.override(title="Spindle speed override.")
|
||||
label Speed
|
||||
.od-val {{feed_override | percent 0}}
|
||||
button.od-reset(@click="feed_override = 1; override_feed()") Reset 100%
|
||||
.od-row
|
||||
label Spindle
|
||||
input(type="range", min="0", max="2", step="0.01",
|
||||
v-model="speed_override", @change="override_speed")
|
||||
span.percent {{speed_override | percent 0}}
|
||||
|
||||
|
||||
.od-val {{speed_override | percent 0}}
|
||||
button.od-reset(@click="speed_override = 1; override_speed()") Reset 100%
|
||||
|
||||
137
src/pug/templates/program-view.pug
Normal file
137
src/pug/templates/program-view.pug
Normal file
@@ -0,0 +1,137 @@
|
||||
script#program-view-template(type="text/x-template")
|
||||
.program-page
|
||||
|
||||
// ----- Modal dialogs -----
|
||||
message(:show.sync="showGcodeMessage")
|
||||
h3(slot="header") Processing New File
|
||||
div(slot="body")
|
||||
h3 Please wait..
|
||||
p Simulating GCode to check for errors, calculate ETA and generate 3D view.
|
||||
div(slot="footer")
|
||||
label Simulating {{(toolpath_progress || 0) | percent}}
|
||||
|
||||
message(:show.sync="GCodeNotFound")
|
||||
h3(slot="header") File not found
|
||||
div(slot="body")
|
||||
p It seems like the file you selected cannot be found. Try uploading again.
|
||||
div(slot="footer")
|
||||
button.pure-button.button-error(@click="GCodeNotFound=false") OK
|
||||
|
||||
message(:show.sync="uploading_files")
|
||||
h3(slot="header") Files uploading
|
||||
div(slot="body")
|
||||
h3 Please wait...
|
||||
p
|
||||
p The files are currently being uploaded.
|
||||
p Do not close the window.
|
||||
div(slot="footer")
|
||||
|
||||
message.error-message(:show.sync="deleteGCode")
|
||||
h3(slot="header") Select files to delete:
|
||||
div(slot="body")
|
||||
input.search-bar(type="text", v-model="search_query", placeholder="Search Files...")
|
||||
.container
|
||||
.folders
|
||||
h3 Folders
|
||||
div(v-for="(index, folder) in state.gcode_list", :key="index",
|
||||
@click="populateFiles(index)",
|
||||
class="folder-item",
|
||||
:class="{ selected: index === selected_folder_index }") {{ folder.name }}
|
||||
.files
|
||||
h3 Files
|
||||
label.file-item(v-for="item in gcode_filtered_files", :key="item")
|
||||
input(type="checkbox", :value="item", v-model="selected_items_to_delete")
|
||||
| {{ item }}
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="cancel_delete", style="height:50px") Cancel
|
||||
button.pure-button.button-success(@click="delete_current", style="height:50px")
|
||||
.fa.fa-trash
|
||||
| Selected
|
||||
|
||||
message(:show.sync="create_folder")
|
||||
h3(slot="header") Enter folder name:
|
||||
div(slot="body")
|
||||
input.input-name(type="text", minlength="1", maxlength="15",
|
||||
style="margin-top:1rem;margin-bottom:2rem;",
|
||||
id="folder-name", v-model="folder_name", @keypress="edited_folder_name")
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="cancel_new_folder") Cancel
|
||||
button.pure-button.button-success(@click="create_new_folder", :disabled="!edited") Create
|
||||
|
||||
message(:show.sync="confirmDelete")
|
||||
h3(slot="header") Delete Folder?
|
||||
div(slot="body")
|
||||
p Are you sure to delete the folder?
|
||||
div(slot="footer")
|
||||
button.pure-button(@click="confirmDelete=false") Cancel
|
||||
button.pure-button.button-error(@click="delete_folder") Folder only
|
||||
button.pure-button.button-success(@click="delete_folder_and_files") Folder and files
|
||||
|
||||
.program-card
|
||||
|
||||
// Action bar (RUN / STOP / Upload / Download / Delete)
|
||||
.action-bar
|
||||
button.action-btn.run(:class="{'attention': is_holding}",
|
||||
@click="start_pause", :disabled="!state.selected",
|
||||
:title="is_running ? 'Pause program.' : 'Start program.'")
|
||||
.fa.fa-play.ico(v-if="!is_running")
|
||||
.fa.fa-pause.ico(v-else)
|
||||
span {{is_running ? 'PAUSE' : 'RUN'}}
|
||||
button.action-btn.stop(@click="stop", title="Stop program.")
|
||||
.fa.fa-stop.ico
|
||||
span STOP
|
||||
button.action-btn(@click="open_folder", :disabled="!is_ready",
|
||||
title="Upload a new GCode folder.")
|
||||
.fa.fa-folder-arrow-up.ico
|
||||
span UPLOAD FOLDER
|
||||
form.gcode-folder-input.file-upload
|
||||
input#folderInput(type="file", @change="upload_folder",
|
||||
:disabled="!is_ready", webkitdirectory, directory)
|
||||
button.action-btn(@click="open_file", :disabled="!is_ready",
|
||||
title="Upload a new GCode program.")
|
||||
.fa.fa-file-arrow-up.ico
|
||||
span UPLOAD FILE
|
||||
form.gcode-file-input.file-upload
|
||||
input(type="file", @change="upload_file", :disabled="!is_ready",
|
||||
accept=".nc,.ngc,.gcode,.gc", multiple)
|
||||
a(:href="state.selected ? '/api/file/' + state.selected : '#'",
|
||||
download, :class="{disabled: !state.selected}",
|
||||
title="Download the selected GCode program.")
|
||||
button.action-btn(:disabled="!state.selected")
|
||||
.fa.fa-file-arrow-down.ico
|
||||
span DOWNLOAD FILE
|
||||
button.action-btn.danger(@click="deleteGCode = true",
|
||||
:disabled="!state.selected || !is_ready",
|
||||
title="Delete current GCode program.")
|
||||
.fa.fa-trash.ico
|
||||
span DELETE
|
||||
|
||||
// File / folder selectors
|
||||
.file-bar
|
||||
button.file-btn(@click="create_folder=true", :disabled="!is_ready")
|
||||
.fa.fa-folder-plus
|
||||
| Create Folder
|
||||
button.file-btn(@click="confirmDelete=true", :disabled="!is_ready")
|
||||
.fa.fa-folder-minus
|
||||
| Delete Folder
|
||||
select.file-select(title="Select previously uploaded GCode folder.",
|
||||
v-model="state.folder", @change="reset_gcode", :disabled="!is_ready")
|
||||
option(selected, value="default") Default folder
|
||||
option(v-for="file in gcode_folders", :value="file") {{file}}
|
||||
select.file-select.primary(title="Select previously uploaded GCode programs.",
|
||||
v-model="state.selected", @change="load", :disabled="!is_ready")
|
||||
option(value="") (no file)
|
||||
option(v-for="file in gcode_files", :value="file") {{file}}
|
||||
button.file-btn(@click="toggle_sorting", :disabled="!is_ready")
|
||||
.fa.fa-arrow-down-wide-short
|
||||
| {{files_sortby}}
|
||||
|
||||
// Body: gcode listing on the left, 3D viewer on the right
|
||||
.program-body
|
||||
gcode-viewer
|
||||
path-viewer(:toolpath="toolpath", :state="state", :config="config")
|
||||
|
||||
.progress-bar(v-if="toolpath_progress && toolpath_progress < 1",
|
||||
title="Simulating GCode to check for errors, calculate ETA and generate 3D view.")
|
||||
div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
|
||||
label Simulating {{(toolpath_progress || 0) | percent}}
|
||||
44
src/pug/templates/settings-shell.pug
Normal file
44
src/pug/templates/settings-shell.pug
Normal file
@@ -0,0 +1,44 @@
|
||||
script#settings-shell-view-template(type="text/x-template")
|
||||
.settings-shell
|
||||
aside.settings-rail
|
||||
// Use a single v-for over a data-driven items array so every
|
||||
// rail item shares the same compiled :class binding template.
|
||||
// This sidesteps a Vue 1 quirk where sibling-with-different-
|
||||
// expression :class bindings sometimes fail to re-evaluate on
|
||||
// hash navigation, leaving stale `.active` classes.
|
||||
template(v-for="item in rail_items")
|
||||
.set-section(v-if="item.section") {{item.section}}
|
||||
a.set-item(v-if="!item.section", :class="{active: is_active(item)}",
|
||||
:href="item.href")
|
||||
.fa(:class="item.icon")
|
||||
| {{item.label}}
|
||||
.set-rail-foot
|
||||
button.sp-shutdown(@click="showShutdownDialog")
|
||||
.fa.fa-power-off
|
||||
| Shutdown
|
||||
button.sp-save(:disabled="!$root.modified", @click="$root.save()")
|
||||
.fa.fa-save
|
||||
| Save{{$root.modified ? '*' : ''}}
|
||||
|
||||
.settings-content
|
||||
// Explicit v-if cascade so the inner template swaps reactively
|
||||
// when sub changes (Vue 1's `<component :is>` does not always
|
||||
// re-evaluate dynamic strings inside a kept-alive parent).
|
||||
settings-view-inner(v-if="sub === 'settings'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
admin-general-view(v-if="sub === 'admin-general'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
admin-network-view(v-if="sub === 'admin-network'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
motor-view(v-if="sub === 'motor'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
tool-view(v-if="sub === 'tool'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
io-view(v-if="sub === 'io'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
macros-view(v-if="sub === 'macros'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
help-view(v-if="sub === 'help'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
cheat-sheet-view(v-if="sub === 'cheat-sheet'",
|
||||
:index="index", :config="config", :template="template", :state="state")
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,6 +2,7 @@
|
||||
import configTemplate from "../../../resources/config-template.json";
|
||||
import ScreenRotationDialog from "$dialogs/ScreenRotationDialog.svelte";
|
||||
import ConfigTemplatedInput from "./ConfigTemplatedInput.svelte";
|
||||
import WAxisSettings from "./WAxisSettings.svelte";
|
||||
import SetTimeDialog from "$dialogs/SetTimeDialog.svelte";
|
||||
import Button, { Label } from "@smui/button";
|
||||
|
||||
@@ -94,6 +95,11 @@
|
||||
{/each}
|
||||
</fieldset>
|
||||
|
||||
<h2>W Axis (auxcnc)</h2>
|
||||
<fieldset>
|
||||
<WAxisSettings />
|
||||
</fieldset>
|
||||
|
||||
<h2>Path Accuracy</h2>
|
||||
<fieldset>
|
||||
<ConfigTemplatedInput key={`settings.max-deviation`} />
|
||||
|
||||
262
src/svelte-components/src/components/WAxisSettings.svelte
Normal file
262
src/svelte-components/src/components/WAxisSettings.svelte
Normal file
@@ -0,0 +1,262 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Button, { Label } from "@smui/button";
|
||||
import * as api from "$lib/api";
|
||||
|
||||
// Mirrors the DEFAULTS in src/py/bbctrl/AuxAxis.py. The "enabled"
|
||||
// flag is read-only here; toggling the W axis on/off is done via
|
||||
// aux.json on disk, so adding/removing the hardware doesn't have a
|
||||
// surprise UI that bricks bring-up.
|
||||
type AuxConfig = {
|
||||
enabled: boolean;
|
||||
port: string;
|
||||
baud: number;
|
||||
steps_per_mm: number;
|
||||
dir_sign: number;
|
||||
min_w: number;
|
||||
max_w: number;
|
||||
max_feed_mm_min: number;
|
||||
home_dir: string;
|
||||
home_position_mm: number;
|
||||
home_fast_sps: number;
|
||||
home_slow_sps: number;
|
||||
home_backoff_steps: number;
|
||||
home_maxtravel_steps: number;
|
||||
step_max_sps: number;
|
||||
step_accel_sps2: number;
|
||||
step_start_sps: number;
|
||||
limit_low: boolean;
|
||||
};
|
||||
|
||||
let cfg: AuxConfig | null = null;
|
||||
let status: { enabled: boolean; present: boolean; homed: boolean; pos_mm: number } | null = null;
|
||||
let busy = false;
|
||||
let saveMessage = "";
|
||||
|
||||
onMount(async () => {
|
||||
await refresh();
|
||||
});
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
cfg = await api.GET("aux/config");
|
||||
status = await api.GET("aux/status");
|
||||
} catch (e) {
|
||||
console.error("Failed to load aux config/status:", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!cfg) return;
|
||||
busy = true;
|
||||
saveMessage = "";
|
||||
try {
|
||||
await api.PUT("aux/config/save", cfg);
|
||||
saveMessage = "Saved.";
|
||||
await refresh();
|
||||
setTimeout(() => (saveMessage = ""), 3000);
|
||||
} catch (e) {
|
||||
console.error("Failed to save aux config:", e);
|
||||
saveMessage = "Save failed - see console.";
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-axis-settings">
|
||||
{#if !cfg}
|
||||
<p class="tip">Loading W axis configuration...</p>
|
||||
{:else}
|
||||
<div class="status">
|
||||
{#if status}
|
||||
<span>
|
||||
Status:
|
||||
{#if !status.enabled}
|
||||
disabled
|
||||
{:else if !status.present}
|
||||
offline
|
||||
{:else if status.homed}
|
||||
homed at {status.pos_mm.toFixed(3)} mm
|
||||
{:else}
|
||||
connected, unhomed
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="pure-form pure-form-aligned">
|
||||
<fieldset>
|
||||
<div class="pure-control-group" title="Enable the auxcnc W axis. Edit aux.json to toggle.">
|
||||
<label for="enabled">enabled</label>
|
||||
<input id="enabled" type="checkbox" checked={cfg.enabled} disabled />
|
||||
<label for="" class="units">(edit aux.json)</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Serial port for the auxcnc ESP32.">
|
||||
<label for="port">serial port</label>
|
||||
<input id="port" type="text" bind:value={cfg.port} />
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Serial baud rate.">
|
||||
<label for="baud">baud</label>
|
||||
<input id="baud" type="number" bind:value={cfg.baud} min={1200} step={1} />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h3>Mechanics</h3>
|
||||
<fieldset>
|
||||
<div class="pure-control-group" title="Logical steps per mm of W travel.">
|
||||
<label for="steps_per_mm">steps per mm</label>
|
||||
<input id="steps_per_mm" type="number" bind:value={cfg.steps_per_mm} step="any" />
|
||||
<label for="" class="units">steps/mm</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Direction sign: +1 or -1. Flip if W+ moves the wrong way.">
|
||||
<label for="dir_sign">direction sign</label>
|
||||
<select id="dir_sign" bind:value={cfg.dir_sign}>
|
||||
<option value={1}>+1</option>
|
||||
<option value={-1}>-1</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Soft-limit minimum W in mm.">
|
||||
<label for="min_w">soft min</label>
|
||||
<input id="min_w" type="number" bind:value={cfg.min_w} step="any" />
|
||||
<label for="" class="units">mm</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Soft-limit maximum W in mm.">
|
||||
<label for="max_w">soft max</label>
|
||||
<input id="max_w" type="number" bind:value={cfg.max_w} step="any" />
|
||||
<label for="" class="units">mm</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Informational max feed; rate caps live on the ESP.">
|
||||
<label for="max_feed_mm_min">max feed</label>
|
||||
<input id="max_feed_mm_min" type="number" bind:value={cfg.max_feed_mm_min} step="any" />
|
||||
<label for="" class="units">mm/min</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h3>Homing</h3>
|
||||
<fieldset>
|
||||
<div class="pure-control-group" title="Direction the axis moves when looking for the home limit switch.">
|
||||
<label for="home_dir">home direction</label>
|
||||
<select id="home_dir" bind:value={cfg.home_dir}>
|
||||
<option value="-">- (toward W-)</option>
|
||||
<option value="+">+ (toward W+)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="W position assigned when homing completes.">
|
||||
<label for="home_position_mm">home position</label>
|
||||
<input id="home_position_mm" type="number" bind:value={cfg.home_position_mm} step="any" />
|
||||
<label for="" class="units">mm</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Fast seek rate during homing search.">
|
||||
<label for="home_fast_sps">fast seek</label>
|
||||
<input id="home_fast_sps" type="number" bind:value={cfg.home_fast_sps} step={1} min={1} />
|
||||
<label for="" class="units">steps/s</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Slow seek rate during homing latch.">
|
||||
<label for="home_slow_sps">slow seek</label>
|
||||
<input id="home_slow_sps" type="number" bind:value={cfg.home_slow_sps} step={1} min={1} />
|
||||
<label for="" class="units">steps/s</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Backoff after the limit triggers, before the slow seek.">
|
||||
<label for="home_backoff_steps">backoff</label>
|
||||
<input id="home_backoff_steps" type="number" bind:value={cfg.home_backoff_steps} step={1} min={0} />
|
||||
<label for="" class="units">steps</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Maximum travel before homing aborts as a runaway.">
|
||||
<label for="home_maxtravel_steps">max travel</label>
|
||||
<input id="home_maxtravel_steps" type="number" bind:value={cfg.home_maxtravel_steps} step={1} min={1} />
|
||||
<label for="" class="units">steps</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Limit switch active-low? Off = active-high.">
|
||||
<label for="limit_low">limit active low</label>
|
||||
<input id="limit_low" type="checkbox" bind:checked={cfg.limit_low} />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h3>Step Profile</h3>
|
||||
<fieldset>
|
||||
<div class="pure-control-group" title="Maximum step rate during normal moves.">
|
||||
<label for="step_max_sps">max rate</label>
|
||||
<input id="step_max_sps" type="number" bind:value={cfg.step_max_sps} step={1} min={1} />
|
||||
<label for="" class="units">steps/s</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Acceleration in steps per second squared.">
|
||||
<label for="step_accel_sps2">acceleration</label>
|
||||
<input id="step_accel_sps2" type="number" bind:value={cfg.step_accel_sps2} step={1} min={1} />
|
||||
<label for="" class="units">steps/s²</label>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group" title="Initial step rate at the start of a move.">
|
||||
<label for="step_start_sps">start rate</label>
|
||||
<input id="step_start_sps" type="number" bind:value={cfg.step_start_sps} step={1} min={1} />
|
||||
<label for="" class="units">steps/s</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="actions">
|
||||
<Button
|
||||
touch
|
||||
variant="raised"
|
||||
on:click={save}
|
||||
disabled={busy}
|
||||
>
|
||||
<Label>Save W Axis Settings</Label>
|
||||
</Button>
|
||||
{#if saveMessage}
|
||||
<span class="save-msg">{saveMessage}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="tip">
|
||||
Changes are written to aux.json. Homing rates and the
|
||||
limit polarity are pushed to the ESP immediately; any
|
||||
running motion is unaffected. Re-home the W axis after
|
||||
changing direction, sign, or step settings.
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.w-axis-settings {
|
||||
.status {
|
||||
margin-bottom: 1em;
|
||||
font-size: 90%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 210px;
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.save-msg {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-left: 210px;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 15px;
|
||||
font-style: italic;
|
||||
font-size: 90%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user