dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-03-30 14:45:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Matrix: brighter hex, more spacing, slower animation, darker map

Browse Source 
- Hex chars: 16px white text with triple green glow (was 12px green)
- Only render every 2nd step for wider spacing between bytes
- Animation speed: 45 steps @ 50ms (was 30 @ 33ms) — ~2.3s per hop
- Trail length reduced to 6 (less clutter)
- Map brightness down 10% (1.4 -> 1.25)
This commit is contained in:
you
2026-03-22 07:27:51 +00:00
parent 7ee89bba29
commit db0baa69a8
3 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -22,7 +22,7 @@
<meta name="twitter:title" content="MeshCore Analyzer">
<meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
<link rel="stylesheet" href="style.css?v=1774164203">
<link rel="stylesheet" href="style.css?v=1774164471">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="live.css?v=1774058575">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -90,7 +90,7 @@
<script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774135052" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774164249" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774164471" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774290000" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observer-detail.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>

38
public/live.js
View File

@@ -1757,14 +1757,14 @@
}
const matrixGreen = '#00ff41';
const TRAIL_LEN = Math.min(8, bytes.length); // visible chars at once
const TOTAL_STEPS = 30;
const TRAIL_LEN = Math.min(6, bytes.length); // visible chars at once — fewer for more spacing
const TOTAL_STEPS = 45; // slower animation
const charMarkers = [];
let step = 0;
// Dim trail line underneath
const trail = L.polyline([from], {
color: matrixGreen, weight: 1, opacity: 0.15, lineCap: 'round'
color: matrixGreen, weight: 1.5, opacity: 0.2, lineCap: 'round'
}).addTo(pathsLayer);
const trailCoords = [from];
@@ -1786,24 +1786,26 @@
// Fade existing chars
for (let i = 0; i < charMarkers.length; i++) {
const age = charMarkers.length - i;
const op = Math.max(0.1, 1 - (age / TRAIL_LEN) * 0.8);
const size = Math.max(7, 12 - age);
const op = Math.max(0.15, 1 - (age / TRAIL_LEN) * 0.7);
const size = Math.max(10, 16 - age * 1.5);
const el = charMarkers[i].marker.getElement();
if (el) { el.style.opacity = op; el.style.fontSize = size + 'px'; }
}
// Add new leading character
const byteIdx = step % bytes.length;
const charEl = L.marker([lat, lon], {
icon: L.divIcon({
className: 'matrix-char',
html: `<span style="color:${matrixGreen};font-family:'Courier New',monospace;font-size:12px;font-weight:bold;text-shadow:0 0 6px ${matrixGreen},0 0 12px ${matrixGreen}80;pointer-events:none">${bytes[byteIdx]}</span>`,
iconSize: [20, 14],
iconAnchor: [10, 7]
}),
interactive: false
}).addTo(animLayer);
charMarkers.push({ marker: charEl });
// Add new leading character every 2nd step for spacing
if (step % 2 === 0) {
const byteIdx = (step / 2) % bytes.length;
const charEl = L.marker([lat, lon], {
icon: L.divIcon({
className: 'matrix-char',
html: `<span style="color:#fff;font-family:'Courier New',monospace;font-size:16px;font-weight:bold;text-shadow:0 0 8px ${matrixGreen},0 0 16px ${matrixGreen},0 0 24px ${matrixGreen}60;pointer-events:none">${bytes[byteIdx]}</span>`,
iconSize: [24, 18],
iconAnchor: [12, 9]
}),
interactive: false
}).addTo(animLayer);
charMarkers.push({ marker: charEl });
}
if (step >= TOTAL_STEPS) {
clearInterval(interval);
@@ -1830,7 +1832,7 @@
if (onComplete) onComplete();
}
}, 33);
}, 50);
}
function drawAnimatedLine(from, to, color, onComplete, overrideOpacity, rawHex) {

2
public/style.css
View File

@@ -1537,7 +1537,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
/* === Matrix Theme === */
.matrix-theme .leaflet-tile-pane {
filter: brightness(1.4) contrast(1.2) sepia(0.6) hue-rotate(70deg) saturate(2);
filter: brightness(1.25) contrast(1.2) sepia(0.6) hue-rotate(70deg) saturate(2);
}
.matrix-theme.leaflet-container::before {
content: ''; position: absolute; inset: 0; z-index: 401;