sealks/dp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement synchronized LED wall output

Browse Source
This commit is contained in:
TJY
2026-07-16 12:52:42 +08:00
parent 8590fafac1
commit fe906e028b
11 changed files with 335 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
led_platform/web/static/output/index.html
+28 -28
View File
@@ -3,48 +3,48 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>LED Wall Output</title>
<title>LED Output</title>
<link rel="stylesheet" href="/static/output/styles.css" />
</head>
<body>
<main id="viewport" class="viewport">
<section id="wall" class="wall" aria-label="LED wall output">
<canvas id="motionCanvas" class="motionCanvas"></canvas>
<div class="gridLayer"></div>
<main class="viewport">
<section id="wall" class="wall">
<canvas id="motionCanvas" class="motion-canvas"></canvas>
<div class="grid-layer"></div>
<header class="wallHeader">
<header class="screen-header">
<div>
<p id="eyebrow" class="eyebrow">Unified Timeline Rendering</p>
<p class="eyebrow">Tile-aware timeline rendering</p>
<h1 id="sceneTitle">LED 大屏投放平台</h1>
</div>
<div class="metrics">
<strong id="clock">--:--:--</strong>
<span id="version">v0</span>
<div class="header-metrics">
<strong id="clockText">--:--:--</strong>
<span id="versionText">v0</span>
</div>
</header>
<section class="scene active" data-view="overview">
<div class="headline">
<h2>双 GPU 输出，统一时间轴</h2>
<p>左右服务器各自渲染半屏，但所有场景、动画、地图相机、视频时间都由同一个服务端时间轴驱动。</p>
<div class="hero-copy">
<h2>双 GPU 本地渲染，统一时间轴同步</h2>
<p>左右输出端各自渲染半屏，但场景、动画、地图相机、视频时间由同一个服务端时间轴驱动。</p>
</div>
<div id="overviewKpis" class="kpiGrid"></div>
<div id="overviewBars" class="bars"></div>
<div id="overviewCards" class="card-grid"></div>
<div id="timelineBars" class="timeline-bars"></div>
</section>
<section class="scene" data-view="energy">
<div class="headline">
<div class="hero-copy">
<h2>能源驾驶舱</h2>
<p>适合 ECharts、Canvas、WebGL 地图和 Three.js 数字孪生。真实项目中应使用 camera.setViewOffset 做 tile-aware 渲染。</p>
<p>适合 WebGL、Three.js、地图和视频组件。生产接入时使用同一 camera state 和 serverTime 渲染。</p>
</div>
<div class="energyMap">
<div class="flowLine lineA"></div>
<div class="flowLine lineB"></div>
<div class="flowNode nodeA">园区供电</div>
<div class="flowNode nodeB">储能系统</div>
<div class="flowNode nodeC">负载中心</div>
<div class="flow-map">
<div class="flow-line line-a"></div>
<div class="flow-line line-b"></div>
<div class="flow-node node-a">园区供电</div>
<div class="flow-node node-b">储能系统</div>
<div class="flow-node node-c">业务负载</div>
</div>
<div class="sideStats">
<div class="side-stats">
<article><span>实时功率</span><strong id="powerValue">8.42 MW</strong></article>
<article><span>负载趋势</span><strong id="trendValue">+3.8%</strong></article>
<article><span>调度策略</span><strong id="modeValue">均衡</strong></article>
@@ -52,12 +52,12 @@
</section>
<section class="scene" data-view="security">
<div class="headline">
<div class="hero-copy">
<h2>安防态势</h2>
<p>视频墙、告警卡片和地图联动都通过结构化动作同步触发，不在输出端执行任意远程脚本。</p>
<p>视频墙、地图联动和告警卡片通过结构化动作同步触发，左右节点只按计划时间提交状态。</p>
</div>
<div id="cameraGrid" class="cameraGrid"></div>
<div id="alertRail" class="alertRail"></div>
<div id="cameraGrid" class="camera-grid"></div>
<div id="alertRail" class="alert-rail"></div>
</section>
</section>
<aside id="hud" class="hud"></aside>