Spaces:

BruceBanners
/

undefined

Running

App Files Files Community

BruceBanners commited on Oct 12, 2025

Commit

5273c56

verified ·

1 Parent(s): 763b235

Make the design and functinality of my site better

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +582 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📊
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,583 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="no">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Split-flap Admin – Canvas</title>
+<style>
+  html,body{height:100%;margin:0;background:#0f1115;color:#e5e7eb;font-family:system-ui,Segoe UI,Roboto,Inter}
+  .wrap{display:grid;grid-template-columns:360px 1fr;gap:12px;height:100vh;padding:12px;box-sizing:border-box}
+  .panel{border:1px solid #1f2330;border-radius:10px;background:#0b0d12;padding:12px;overflow:auto}
+  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+  input,select,button,textarea{background:#1f2937;color:#fff;border:1px solid #374151;border-radius:8px;padding:8px}
+  textarea{width:100%}
+  button{cursor:pointer}
+  .small{width:90px} .mid{width:160px} .wide{width:100%}
+  .badge{padding:4px 8px;border-radius:6px;background:#1b2432;border:1px solid #2a3344}
+  .mono{font-family:ui-monospace,Consolas,monospace}
+  .gridwrap{position:relative;background:#0b0f16;border:1px solid #1c2433;border-radius:10px;aspect-ratio: var(--cols) / var(--rows)}
+  .grid{position:absolute;inset:0;background-size:calc(100%/var(--cols)) calc(100%/var(--rows));background-image:linear-gradient(#1a2333 1px,transparent 1px),linear-gradient(90deg,#1a2333 1px,transparent 1px)}
+  .tile{position:absolute;border:1px solid #2a3344;border-radius:8px;background:#101827;box-shadow:0 2px 8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;user-select:none;overflow:hidden}
+  .tile.sel{outline:2px solid #6daaff}
+  .handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#6daaff;border-radius:3px;cursor:nwse-resize}
+  .list{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:12px;background:#0e131b;border:1px solid #223;border-radius:8px;padding:8px}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <!-- venstre -->
+  <div class="panel">
+    <h2>Oppsett <span id="status" class="badge">idle</span></h2>
+    <div class="row">
+      <label>API</label><input id="apiUrl" class="mid" value="/cb/api.php">
+      <label>Room</label><input id="room" class="small" value="hallA">
+      <label>Token</label><input id="token" class="mid" value="BYTT-DETTE">
+      <button id="ping">Ping</button>
+      <button id="clear">Clear</button>
+      <button id="pushScene">Push nå</button>
+    </div>
+    <div class="row">
+      <label>Kolonner</label><input id="cols" class="small" type="number" value="20" min="4" max="80">
+      <label>Rader</label><input id="rows" class="small" type="number" value="10" min="4" max="40">
+    </div>
+    <h3>Ikoner</h3>
+    <div class="row">
+      <label>rail</label><input id="icoRail" class="small" value="🚆">
+      <label>bus</label><input id="icoBus" class="small" value="🚌">
+      <label>tram</label><input id="icoTram" class="small" value="🚊">
+      <label>metro</label><input id="icoMetro" class="small" value="🚇">
+      <label>water</label><input id="icoWater" class="small" value="🛥️">
+      <label>air</label><input id="icoAir" class="small" value="✈️">
+      <label>annet</label><input id="icoOther" class="small" value="•">
+    </div>
+    <h3>Tiles</h3>
+    <div class="row">
+      <button id="addClock">Ny klokke</button>
+      <button id="addEntur">Ny Entur-liste</button>
+      <button id="addText">Ny tekst</button>
+      <button id="dupTile">Dupliser</button>
+      <button id="delTile">Slett</button>
+    </div>
+    <h3>Egenskaper</h3>
+    <div id="props" class="row" style="align-items:flex-start">
+      <div class="wide">
+        <div class="row">
+          <label>ID</label><input id="p_id" class="mid" readonly>
+          <label>Type</label><input id="p_type" class="mid" readonly>
+        </div>
+        <div class="row">
+          <label>X</label><input id="p_x" class="small" type="number">
+          <label>Y</label><input id="p_y" class="small" type="number">
+          <label>W</label><input id="p_w" class="small" type="number">
+          <label>H</label><input id="p_h" class="small" type="number">
+        </div>
+        <div id="typeClock" style="display:none">
+          <div class="row">
+            <label>Format</label>
+            <select id="clk_fmt">
+              <option value="HH:mm">HH:mm</option>
+              <option value="HH:mm:ss">HH:mm:ss</option>
+              <option value="dd.MM HH:mm">dd.MM HH:mm</option>
+              <option value="dd.MM">dd.MM</option>
+            </select>
+            <label>Farge</label><input id="clk_color" class="small" value="#ffffff">
+            <label>Oppdater ms</label><input id="clk_ms" class="small" type="number" value="1000" min="200">
+          </div>
+        </div>
+        <div id="typeEntur" style="display:none">
+          <div class="row">
+            <label>StopPlace</label><input id="en_stop" class="mid" value="NSR:StopPlace:58287">
+            <label>Modus</label>
+            <select id="en_mode"><option value="departures">Fra</option><option value="arrivals">Til</option></select>
+          </div>
+          <div class="row">
+            <label>Limit</label><input id="en_limit" class="small" type="number" value="6" min="1" max="20">
+            <label>Hent hver s</label><input id="en_fetch" class="small" type="number" value="30" min="5">
+            <label>Linjer</label><input id="en_lines" class="small" type="number" value="6" min="1" max="20">
+          </div>
+          <div class="row">
+            <label>Vy</label><input id="en_vy" type="checkbox" checked>
+            <label>SJ</label><input id="en_sj" type="checkbox" checked>
+            <label>Flytoget</label><input id="en_fly" type="checkbox" checked>
+            <label>Forsinket</label><input id="en_onlydel" type="checkbox">
+            <label>Kansellert</label><input id="en_onlycan" type="checkbox">
+          </div>
+          <div class="row">
+            <label>Template per rad</label>
+            <input id="en_tpl" class="wide mono" value="[{icon}] {time} {line|cut=6} {dest|cutEnd=12} Sp{quay|pad=2} {status} {delay}">
+          </div>
+          <div class="row">
+            <label>Farge normal</label><input id="en_c_norm" class="small" value="#ffffff">
+            <label>Farge forsinket</label><input id="en_c_del" class="small" value="#ffe66d">
+            <label>Farge kansellert</label><input id="en_c_can" class="small" value="#ff5c5c">
+          </div>
+          <div class="row">
+            <button id="en_fetch_now">Hent nå</button>
+            <button id="en_preview">Forhåndsvis</button>
+          </div>
+        </div>
+        <div id="typeText" style="display:none">
+          <div class="row">
+            <label>Tekst</label><input id="tx_text" class="wide" value="Velkommen">
+          </div>
+          <div class="row">
+            <label>Farge</label><input id="tx_color" class="small" value="#6daaff">
+          </div>
+        </div>
+      </div>
+    </div>
+    <h3>Scene</h3>
+    <div class="row">
+      <label>Auto-push s</label><input id="scene_push" class="small" type="number" value="10" min="3">
+      <button id="startAuto">Start auto</button>
+      <button id="stopAuto">Stopp</button>
+    </div>
+    <h3>Lagring</h3>
+    <div class="row">
+      <button id="save">Lagre</button>
+      <button id="load">Last</button>
+      <button id="export">Eksporter</button>
+      <input id="importFile" type="file" accept="application/json">
+    </div>
+  </div>
+  <!-- høyre -->
+  <div class="panel">
+    <div class="row">
+      <strong>Canvas</strong>
+      <span>Kol × Rad:</span><span id="dim" class="badge">20 × 10</span>
+    </div>
+    <div id="canvas" class="gridwrap" style="--cols:20;--rows:10">
+      <div id="grid" class="grid" style="--cols:20;--rows:10"></div>
+    </div>
+    <h3>Logg</h3>
+    <div id="log" class="list"></div>
+  </div>
+</div>
+<script>
+const S=id=>document.getElementById(id);
+const statusEl=S('status'); const logEl=S('log');
+function setStatus(s){ statusEl.textContent=s; }
+function log(m,d){ const t=new Date().toLocaleTimeString(); const line=`[${t}] ${m}${d? " "+JSON.stringify(d):""}`; logEl.textContent=line+"\n"+logEl.textContent; console.log(m,d??""); }
+window.addEventListener('error',e=>{log('JS',{m:e.message,src:e.filename,l:e.lineno});});
+const ENTUR_URL = 'https://api.entur.io/journey-planner/v3/graphql';
+// ved CORS: const ENTUR_URL = '/cb/proxy_entur.php';
+const state = {
+  cols: parseInt(S('cols').value,10),
+  rows: parseInt(S('rows').value,10),
+  tiles: [],
+  sel: null,
+  autoPushTimer: null
+};
+function uid(){ return Math.random().toString(36).slice(2,8); }
+function snap(v, max){ v=Math.max(0, Math.min(v, max)); return v; }
+function updateGrid(){
+  const g = S('grid'); const wrap = S('canvas');
+  g.style.setProperty('--cols', state.cols);
+  g.style.setProperty('--rows', state.rows);
+  wrap.style.setProperty('--cols', state.cols);
+  wrap.style.setProperty('--rows', state.rows);
+  S('dim').textContent = `${state.cols} × ${state.rows}`;
+}
+S('cols').oninput=()=>{ state.cols=parseInt(S('cols').value,10)||20; updateGrid(); renderTiles(); drawTileContent(); };
+S('rows').oninput=()=>{ state.rows=parseInt(S('rows').value,10)||10; updateGrid(); renderTiles(); drawTileContent(); };
+function iconMapFor(mode){
+  const m=(mode||'').toLowerCase();
+  if(m==='rail') return S('icoRail').value||'🚆';
+  if(m==='bus') return S('icoBus').value||'🚌';
+  if(m==='tram') return S('icoTram').value||'🚊';
+  if(m==='metro') return S('icoMetro').value||'🚇';
+  if(m==='water') return S('icoWater').value||'🛥️';
+  if(m==='air') return S('icoAir').value||'✈️';
+  return S('icoOther').value||'•';
+}
+/* Canvas */
+const canvas=S('canvas');
+function cellToRect(x,y,w,h){
+  const r=canvas.getBoundingClientRect();
+  return {
+    left: (x/state.cols)*r.width,
+    top: (y/state.rows)*r.height,
+    width: (w/state.cols)*r.width,
+    height: (h/state.rows)*r.height
+  };
+}
+function rectToCell(left,top,width,height){
+  const r=canvas.getBoundingClientRect();
+  return {
+    x: Math.round(left / r.width * state.cols),
+    y: Math.round(top / r.height * state.rows),
+    w: Math.max(1, Math.round(width / r.width * state.cols)),
+    h: Math.max(1, Math.round(height/ r.height * state.rows))
+  };
+}
+function renderTiles(){
+  [...canvas.querySelectorAll('.tile')].forEach(n=>n.remove());
+  for(const t of state.tiles){
+    const el=document.createElement('div'); el.className='tile'; el.dataset.id=t.id;
+    const rect=cellToRect(t.x,t.y,t.w,t.h);
+    el.style.left=rect.left+'px'; el.style.top=rect.top+'px'; el.style.width=rect.width+'px'; el.style.height=rect.height+'px';
+    el.textContent=tileLabel(t);
+    const h=document.createElement('div'); h.className='handle'; el.appendChild(h);
+    el.onclick=(e)=>{ e.stopPropagation(); selectTile(t.id); };
+    let sx,sy,sl,st, resizing=false;
+    el.addEventListener('mousedown', e=>{
+      if(e.target===h){ resizing=true; }
+      sx=e.clientX; sy=e.clientY;
+      const bb=el.getBoundingClientRect(); sl=bb.left; st=bb.top;
+      document.onmousemove=ev=>{
+        const dx=ev.clientX-sx, dy=ev.clientY-sy;
+        if(!resizing){
+          const r=canvas.getBoundingClientRect();
+          let nl=sl+dx, nt=st+dy;
+          nl=Math.max(r.left, Math.min(nl, r.right - el.offsetWidth));
+          nt=Math.max(r.top,  Math.min(nt, r.bottom - el.offsetHeight));
+          const c=rectToCell(nl-r.left, nt-r.top, el.offsetWidth, el.offsetHeight);
+          t.x=snap(c.x, state.cols-1); t.y=snap(c.y, state.rows-1);
+        }else{
+          const nw=Math.max(20, el.offsetWidth + dx), nh=Math.max(20, el.offsetHeight + dy);
+          const c=rectToCell(el.offsetLeft, el.offsetTop, nw, nh);
+          t.w=snap(c.w, state.cols - t.x); t.h=snap(c.h, state.rows - t.y);
+          sx=ev.clientX; sy=ev.clientY;
+        }
+        renderTiles(); updateProps(); drawTileContent();
+      };
+      document.onmouseup=()=>{ document.onmousemove=null; document.onmouseup=null; resizing=false; };
+    });
+    if(state.sel===t.id) el.classList.add('sel');
+    canvas.appendChild(el);
+  }
+}
+canvas.onclick=()=>{ selectTile(null); };
+function selectTile(id){
+  state.sel=id;
+  renderTiles();
+  updateProps();
+  drawTileContent();
+}
+function tileLabel(t){
+  if(t.type==='clock') return `🕒 ${t.cfg.format}`;
+  if(t.type==='entur') return `Entur ${t.cfg.mode} ${t.cfg.lines}r`;
+  if(t.type==='text')  return `Tekst`;
+  return t.type;
+}
+/* Tiles CRUD */
+function addTile(type, cfg={}){
+  const t={ id:uid(), type, x:1, y:1, w:8, h:2, cfg };
+  state.tiles.push(t);
+  selectTile(t.id);
+}
+S('addClock').onclick=()=>addTile('clock',{ format:'HH:mm', color:'#ffffff', tick:1000 });
+S('addEntur').onclick=()=>addTile('entur',{
+  stopId:'NSR:StopPlace:58287', mode:'departures', limit:6, fetchSec:30, lines:6,
+  tpl:'[{icon}] {time} {line|cut=6} {dest|cutEnd=12} Sp{quay|pad=2} {status} {delay}',
+  cNorm:'#ffffff', cDel:'#ffe66d', cCan:'#ff5c5c',
+  filters:{vy:true,sj:true,fly:true,onlyDelayed:false,onlyCancelled:false},
+  cache:[]
+});
+S('addText').onclick=()=>addTile('text',{ text:'Velkommen', color:'#6daaff' });
+S('dupTile').onclick=()=>{ if(!state.sel) return; const src=state.tiles.find(t=>t.id===state.sel); const c=JSON.parse(JSON.stringify(src)); c.id=uid(); c.x+=1; c.y+=1; state.tiles.push(c); selectTile(c.id); };
+S('delTile').onclick=()=>{ if(!state.sel) return; state.tiles=state.tiles.filter(t=>t.id!==state.sel); selectTile(null); };
+/* Egenskaper */
+function updateProps(){
+  const t=state.tiles.find(x=>x.id===state.sel);
+  S('p_id').value=t? t.id:''; S('p_type').value=t? t.type:'';
+  S('p_x').value=t? t.x:''; S('p_y').value=t? t.y:''; S('p_w').value=t? t.w:''; S('p_h').value=t? t.h:'';
+  S('typeClock').style.display = t&&t.type==='clock' ? '' : 'none';
+  S('typeEntur').style.display = t&&t.type==='entur' ? '' : 'none';
+  S('typeText').style.display  = t&&t.type==='text'  ? '' : 'none';
+  if(!t) return;
+  if(t.type==='clock'){
+    S('clk_fmt').value=t.cfg.format; S('clk_color').value=t.cfg.color; S('clk_ms').value=t.cfg.tick;
+  }
+  if(t.type==='entur'){
+    S('en_stop').value=t.cfg.stopId; S('en_mode').value=t.cfg.mode; S('en_limit').value=t.cfg.limit;
+    S('en_fetch').value=t.cfg.fetchSec; S('en_lines').value=t.cfg.lines;
+    S('en_tpl').value=t.cfg.tpl; S('en_c_norm').value=t.cfg.cNorm; S('en_c_del').value=t.cfg.cDel; S('en_c_can').value=t.cfg.cCan;
+    S('en_vy').checked=t.cfg.filters.vy; S('en_sj').checked=t.cfg.filters.sj; S('en_fly').checked=t.cfg.filters.fly;
+    S('en_onlydel').checked=t.cfg.filters.onlyDelayed; S('en_onlycan').checked=t.cfg.filters.onlyCancelled;
+  }
+  if(t.type==='text'){
+    S('tx_text').value=t.cfg.text; S('tx_color').value=t.cfg.color;
+  }
+}
+['p_x','p_y','p_w','p_h'].forEach(id=>{
+  S(id).oninput=()=>{ const t=state.tiles.find(x=>x.id===state.sel); if(!t) return;
+    t.x=+S('p_x').value; t.y=+S('p_y').value; t.w=+S('p_w').value; t.h=+S('p_h').value;
+    renderTiles(); drawTileContent();
+  };
+});
+S('clk_fmt').onchange=()=>{ const t=getSel('clock'); if(!t) return; t.cfg.format=S('clk_fmt').value; drawTileContent(); };
+S('clk_color').oninput=()=>{ const t=getSel('clock'); if(!t) return; t.cfg.color=S('clk_color').value; drawTileContent(); };
+S('clk_ms').oninput=()=>{ const t=getSel('clock'); if(!t) return; t.cfg.tick=parseInt(S('clk_ms').value,10)||1000; };
+S('en_stop').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.stopId=S('en_stop').value.trim(); };
+S('en_mode').onchange=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.mode=S('en_mode').value; };
+S('en_limit').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.limit=parseInt(S('en_limit').value,10)||6; };
+S('en_fetch').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.fetchSec=parseInt(S('en_fetch').value,10)||30; restartEnturTimer(t); };
+S('en_lines').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.lines=parseInt(S('en_lines').value,10)||6; drawTileContent(); };
+S('en_tpl').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.tpl=S('en_tpl').value; drawTileContent(); };
+S('en_c_norm').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.cNorm=S('en_c_norm').value; drawTileContent(); };
+S('en_c_del').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.cDel=S('en_c_del').value; drawTileContent(); };
+S('en_c_can').oninput=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.cCan=S('en_c_can').value; drawTileContent(); };
+S('en_vy').onchange=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.filters.vy=S('en_vy').checked; };
+S('en_sj').onchange=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.filters.sj=S('en_sj').checked; };
+S('en_fly').onchange=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.filters.fly=S('en_fly').checked; };
+S('en_onlydel').onchange=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.filters.onlyDelayed=S('en_onlydel').checked; };
+S('en_onlycan').onchange=()=>{ const t=getSel('entur'); if(!t) return; t.cfg.filters.onlyCancelled=S('en_onlycan').checked; };
+function getSel(type){ const t=state.tiles.find(x=>x.id===state.sel); if(!t||t.type!==type) return null; return t; }
+/* Template motor */
+function applyFilter(val, f){
+  if(f==='upper') return String(val).toUpperCase();
+  if(f==='lower') return String(val).toLowerCase();
+  let m=f.match(/^pad=(\d+)$/); if(m) return String(val).padStart(+m[1],' ');
+  m=f.match(/^padEnd=(\d+)$/); if(m) return String(val).padEnd(+m[1],' ');
+  m=f.match(/^cut=(\d+)$/); if(m){ const n=+m[1]; const s=String(val); return s.length>n? s.slice(0,n):s; }
+  m=f.match(/^cutEnd=(\d+)$/); if(m){ const n=+m[1]; const s=String(val); return s.length>n? s.slice(0,n-1)+'…':s; }
+  return val;
+}
+function renderWithTemplate(tpl, dict){
+  return tpl.replace(/\{([a-z]+)(?::([A-Za-z0-9:]+))?((?:\|[A-Za-z]+(?:=\d+)?)*)\}/g,(m,k,fmt,filters)=>{
+    let v=dict[k]??'';
+    if((k==='time'||k==='aimed') && fmt){ if(fmt==='HHmm') v=String(v).replace(':',''); }
+    if(filters){ for(const f of filters.split('|').filter(Boolean)) v=applyFilter(v,f); }
+    return v;
+  });
+}
+/* Entur fetch */
+async function enturFetch(stopId, mode){
+  const q=`query Q($id:String!,$now:DateTime!){
+    stopPlace(id:$id){
+      estimatedCalls(startTime:$now,timeRange:14400,numberOfDepartures:120){
+        aimedDepartureTime expectedDepartureTime
+        aimedArrivalTime expectedArrivalTime
+        realtime cancellation
+        destinationDisplay{frontText}
+        quay{name}
+        serviceJourney{ line{name transportMode operator{name}} }
+      }
+    }
+  }`;
+  const r=await fetch(ENTUR_URL,{method:'POST',headers:{
+    'Content-Type':'application/json','Accept':'application/json','ET-Client-Name':'samsai-splitflap-admin'
+  },cache:'no-store',body:JSON.stringify({query:q,variables:{id:stopId,now:new Date().toISOString()}})});
+  const txt=await r.text(); if(!r.ok){ log('entur http',{st:r.status, body:txt.slice(0,200)}); throw new Error('entur '+r.status); }
+  const j=JSON.parse(txt); const calls=j?.data?.stopPlace?.estimatedCalls||[];
+  return calls.map(c=>{
+    const aimedISO = mode==='arrivals' ? (c.aimedArrivalTime||c.aimedDepartureTime) : (c.aimedDepartureTime||c.aimedArrivalTime);
+    const expISO   = mode==='arrivals' ? (c.expectedArrivalTime||aimedISO)        : (c.expectedDepartureTime||aimedISO);
+    const aimed=aimedISO?new Date(aimedISO):null; const exp=expISO?new Date(expISO):aimed;
+    const time=expISO?expISO.slice(11,16):''; const aimedT=aimedISO?aimedISO.slice(11,16):'';
+    const delay=aimed&&exp? Math.round((exp-aimed)/60000) : 0;
+    const status=c.cancellation?'CANCELLED':'';
+    const transport=c?.serviceJourney?.line?.transportMode||'';
+    const op=c?.serviceJourney?.line?.operator?.name||'';
+    return {
+      time, aimed:aimedT, delay, status,
+      dest:(c?.destinationDisplay?.frontText||'').trim(),
+      quay:(c?.quay?.name||'').trim(),
+      line:(c?.serviceJourney?.line?.name||'').trim(),
+      op: op.trim(), transport: transport.trim(),
+      ts: exp?exp.getTime():9e15
+    };
+  }).sort((a,b)=>a.ts-b.ts);
+}
+function enturFilter(items, f){
+  return items.filter(it=>{
+    if(f.onlyDelayed && !(it.delay>0)) return false;
+    if(f.onlyCancelled && it.status!=='CANCELLED') return false;
+    const ops=[]; if(f.vy) ops.push('vy'); if(f.sj) ops.push('sj'); if(f.fly) ops.push('flytoget');
+    if(ops.length){ const o=(it.op||'').toLowerCase(); if(!ops.some(x=>o.includes(x))) return false; }
+    return true;
+  });
+}
+function enturRenderLines(t, items){
+  const lines = [];
+  const max = t.cfg.lines;
+  for(const it of items.slice(0, max)){
+    const dict={...it, icon:iconMapFor(it.transport), mode:t.cfg.mode==='arrivals'?'ANK':'FRA'};
+    const text=renderWithTemplate(t.cfg.tpl, dict);
+    const color = it.status==='CANCELLED' ? t.cfg.cCan : (it.delay>0 ? t.cfg.cDel : t.cfg.cNorm);
+    lines.push({text,color});
+  }
+  if(lines.length===0){ lines.push({text:'Ingen data', color:t.cfg.cNorm}); }
+  return lines;
+}
+/* Tile timers */
+const enturTimers = new Map();
+function restartEnturTimer(t){
+  if(enturTimers.has(t.id)){ clearInterval(enturTimers.get(t.id)); enturTimers.delete(t.id); }
+  const ms=Math.max(5000, (t.cfg.fetchSec||30)*1000);
+  const fn=async()=>{
+    try{
+      const raw=await enturFetch(t.cfg.stopId, t.cfg.mode);
+      const filtered=enturFilter(raw, t.cfg.filters);
+      t.cfg.cache = filtered.length? filtered : raw;
+      log('entur ok',{id:t.id, rows:t.cfg.cache.length});
+      drawTileContent();
+    }catch(e){ log('entur fail',{id:t.id,err:String(e)}); }
+  };
+  fn();
+  const h=setInterval(fn, ms);
+  enturTimers.set(t.id, h);
+}
+/* Preview rendering som matcher tavla */
+function cutToWidth(text, w){
+  if(!w) return text;
+  const s=String(text);
+  return s.length<=w ? s : s.slice(0, w);
+}
+function drawTileContent(){
+  for(const el of canvas.querySelectorAll('.tile')){
+    const t=state.tiles.find(x=>x.id===el.dataset.id);
+    if(!t) continue;
+    if(t.type==='clock'){
+      el.textContent = nowFormat(t.cfg.format);
+      el.style.color = t.cfg.color;
+    }else if(t.type==='entur'){
+      const lines = enturRenderLines(t, t.cfg.cache||[]);
+      const maxLines = Math.max(1, t.h);
+      el.innerHTML = lines.slice(0,maxLines)
+        .map(l=>`<div style="color:${l.color}">${escapeHtml(cutToWidth(l.text, t.w))}</div>`).join('');
+    }else if(t.type==='text'){
+      el.innerHTML = `<div style="color:${t.cfg.color}">${escapeHtml(cutToWidth(t.cfg.text, t.w))}</div>`;
+    }
+  }
+}
+function nowFormat(fmt){
+  const d=new Date();
+  const pad=n=>String(n).padStart(2,'0');
+  if(fmt==='HH:mm') return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  if(fmt==='HH:mm:ss') return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+  if(fmt==='dd.MM HH:mm') return `${pad(d.getDate())}.${pad(d.getMonth()+1)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  if(fmt==='dd.MM') return `${pad(d.getDate())}.${pad(d.getMonth()+1)}`;
+  return d.toLocaleTimeString();
+}
+function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m=>({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])); }
+let clockTimer=setInterval(()=>{ drawTileContent(); }, 1000);
+/* Push til display, per tile-posisjon */
+function buildCommandsFromTiles(){
+  const cmds = [];
+  const sorted = [...state.tiles].sort((a,b)=> a.y-b.y || a.x-b.x);
+  for(const t of sorted){
+    if(t.type==='clock'){
+      const text = cutToWidth(nowFormat(t.cfg.format), t.w);
+      cmds.push({ cmd:'display', args:{ text, color:t.cfg.color, x:t.x, y:t.y, sound:false } });
+    }else if(t.type==='text'){
+      const text = cutToWidth(t.cfg.text, t.w);
+      cmds.push({ cmd:'display', args:{ text, color:t.cfg.color, x:t.x, y:t.y, sound:false } });
+    }else if(t.type==='entur'){
+      const lines = enturRenderLines(t, t.cfg.cache||[]);
+      const maxLines = Math.max(1, t.h);
+      lines.slice(0, maxLines).forEach((l, i)=>{
+        const text = cutToWidth(l.text, t.w);
+        cmds.push({ cmd:'display', args:{ text, color:l.color, x:t.x, y:t.y+i, sound:false } });
+      });
+    }
+  }
+  return cmds;
+}
+async function pushCommands(cmds){
+  const API=S('apiUrl').value.trim(), ROOM=S('room').value.trim(), TOKEN=S('token').value.trim();
+  await fetch(`${API}?action=push&room=${encodeURIComponent(ROOM)}`,{
+    method:'POST', headers:{'Content-Type':'application/json'}, cache:'no-store',
+    body:JSON.stringify({token:TOKEN,cmd:'clear',args:{}})
+  });
+  for(const m of cmds){
+    await fetch(`${API}?action=push&room=${encodeURIComponent(ROOM)}`,{
+      method:'POST', headers:{'Content-Type':'application/json'}, cache:'no-store',
+      body:JSON.stringify({token:TOKEN,cmd:m.cmd,args:m.args})
+    });
+  }
+}
+/* Kontroller */
+S('ping').onclick=async()=>{
+  const url=`${S('apiUrl').value.trim()}?action=fetch&room=${encodeURIComponent(S('room').value.trim())}&since=0`;
+  const r=await fetch(url,{cache:'no-store'}); const t=await r.text();
+  log('ping',{st:r.status, body:t.slice(0,160)});
+};
+S('clear').onclick=async()=>{
+  const API=S('apiUrl').value.trim(), ROOM=S('room').value.trim(), TOKEN=S('token').value.trim();
+  const r=await fetch(`${API}?action=push&room=${encodeURIComponent(ROOM)}`,{method:'POST',headers:{'Content-Type':'application/json'},cache:'no-store',body:JSON.stringify({token:TOKEN,cmd:'clear',args:{}})});
+  log('clear', {st:r.status});
+};
+S('pushScene').onclick=async()=>{
+  const cmds = buildCommandsFromTiles();
+  await pushCommands(cmds);
+  log('push scene', {rows:cmds.length});
+};
+/* Auto-push scene */
+S('startAuto').onclick=()=>{
+  const s=Math.max(3, parseInt(S('scene_push').value,10)||10)*1000;
+  if(state.autoPushTimer) clearInterval(state.autoPushTimer);
+  state.autoPushTimer=setInterval(async()=>{
+    drawTileContent();
+    const cmds = buildCommandsFromTiles();
+    try{ await pushCommands(cmds); }catch{}
+  }, s);
+  for(const t of state.tiles){ if(t.type==='entur') restartEnturTimer(t); }
+  log('auto start',{sec:s/1000});
+};
+S('stopAuto').onclick=()=>{
+  if(state.autoPushTimer) clearInterval(state.autoPushTimer);
+  state.autoPushTimer=null;
+  for(const h of enturTimers.values()) clearInterval(h);
+  enturTimers.clear();
+  log('auto stop');
+};
+/* Entur knapper i props */
+S('en_fetch_now').onclick=async()=>{
+  const t=getSel('entur'); if(!t) return;
+  try{
+    const raw=await enturFetch(t.cfg.stopId, t.cfg.mode);
+    t.cfg.cache=enturFilter(raw, t.cfg.filters);
+    drawTileContent();
+    log('entur now',{rows:t.cfg.cache.length});
+  }catch(e){ log('entur now fail', String(e)); }
+};
+S('en_preview').onclick=()=>{ drawTileContent(); };
+/* Lagring */
+S('save').onclick=()=>{ const data={cols:state.cols,rows:state.rows,tiles:state.tiles,icons:{
+  rail:S('icoRail').value,bus:S('icoBus').value,tram:S('icoTram').value,metro:S('icoMetro').value,water:S('icoWater').value,air:S('icoAir').value,other:S('icoOther').value
+}}; localStorage.setItem('cb_canvas', JSON.stringify(data)); log('lagret'); };
+S('load').onclick=()=>{ const raw=localStorage.getItem('cb_canvas'); if(!raw) return; try{
+  const d=JSON.parse(raw); state.cols=d.cols||20; state.rows=d.rows||10; state.tiles=d.tiles||[];
+  S('cols').value=state.cols; S('rows').value=state.rows;
+  const ic=d.icons||{}; S('icoRail').value=ic.rail||'🚆'; S('icoBus').value=ic.bus||'🚌'; S('icoTram').value=ic.tram||'🚊'; S('icoMetro').value=ic.metro||'🚇'; S('icoWater').value=ic.water||'🛥️'; S('icoAir').value=ic.air||'✈️'; S('icoOther').value=ic.other||'•';
+  updateGrid(); renderTiles(); drawTileContent(); log('lastet',{tiles:state.tiles.length});
+}catch(e){ log('load fail', String(e)); } };
+S('export').onclick=()=>{ const blob=new Blob([localStorage.getItem('cb_canvas')||'{}'],{type:'application/json'}); const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='cb_canvas.json'; a.click(); };
+S('importFile').onchange=async(e)=>{ const f=e.target.files[0]; if(!f) return; const txt=await f.text(); localStorage.setItem('cb_canvas', txt); S('load').click(); };
+/* Init */
+updateGrid(); renderTiles(); drawTileContent(); setStatus('ok');
+</script>
+</body>
 </html>