Alfred
/
fm-rds-tx
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 6 위키 활동
Go-based FM stereo transmitter with RDS, Windows-first and cross-platform
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 커밋
1 브렌치
37MB
트리: ce12ff92b8
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'ce12ff92b8'
${ noResults }
fm-rds-tx/internal/control/ui.html

876 lines
24KB
Raw Blame 히스토리 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="utf-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>fm-rds-tx</title>

  7. <style>

  8. @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Archivo+Black&display=swap');

  9. 

  10. :root {

  11.   --bg: #0a0a0c;

  12.   --surface: #111116;

  13.   --surface2: #18181e;

  14.   --border: #2a2a35;

  15.   --text: #d4d4dc;

  16.   --text-dim: #6a6a78;

  17.   --accent: #ff3b30;

  18.   --accent-glow: #ff3b3044;

  19.   --green: #30d158;

  20.   --green-glow: #30d15844;

  21.   --amber: #ff9f0a;

  22.   --amber-glow: #ff9f0a44;

  23.   --blue: #0a84ff;

  24.   --mono: 'JetBrains Mono', monospace;

  25.   --display: 'Archivo Black', sans-serif;

  26.   --radius: 6px;

  27. }

  28. 

  29. * { box-sizing: border-box; margin: 0; padding: 0; }

  30. 

  31. body {

  32.   background: var(--bg);

  33.   color: var(--text);

  34.   font-family: var(--mono);

  35.   font-size: 13px;

  36.   line-height: 1.5;

  37.   min-height: 100vh;

  38.   overflow-x: hidden;

  39. }

  40. 

  41. /* Scan lines overlay */

  42. body::before {

  43.   content: '';

  44.   position: fixed; inset: 0;

  45.   background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);

  46.   pointer-events: none; z-index: 1000;

  47. }

  48. 

  49. .app {

  50.   max-width: 900px;

  51.   margin: 0 auto;

  52.   padding: 16px;

  53. }

  54. 

  55. /* Header */

  56. .header {

  57.   display: flex;

  58.   align-items: center;

  59.   justify-content: space-between;

  60.   padding: 16px 0 24px;

  61.   border-bottom: 1px solid var(--border);

  62.   margin-bottom: 20px;

  63. }

  64. 

  65. .header h1 {

  66.   font-family: var(--display);

  67.   font-size: 22px;

  68.   letter-spacing: 2px;

  69.   text-transform: uppercase;

  70.   color: var(--accent);

  71.   text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);

  72. }

  73. 

  74. .header-status {

  75.   display: flex;

  76.   align-items: center;

  77.   gap: 12px;

  78. }

  79. 

  80. /* LED indicator */

  81. .led {

  82.   width: 10px; height: 10px;

  83.   border-radius: 50%;

  84.   background: #333;

  85.   box-shadow: none;

  86.   transition: all 0.3s;

  87. }

  88. .led.on-green {

  89.   background: var(--green);

  90.   box-shadow: 0 0 8px var(--green), 0 0 20px var(--green-glow);

  91. }

  92. .led.on-red {

  93.   background: var(--accent);

  94.   box-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent-glow);

  95. }

  96. .led.on-amber {

  97.   background: var(--amber);

  98.   box-shadow: 0 0 8px var(--amber), 0 0 20px var(--amber-glow);

  99. }

  100. 

  101. /* TX control bar */

  102. .tx-bar {

  103.   display: flex;

  104.   gap: 10px;

  105.   align-items: center;

  106.   background: var(--surface);

  107.   border: 1px solid var(--border);

  108.   border-radius: var(--radius);

  109.   padding: 12px 16px;

  110.   margin-bottom: 16px;

  111. }

  112. 

  113. .tx-bar .freq-display {

  114.   font-family: var(--display);

  115.   font-size: 32px;

  116.   color: var(--green);

  117.   text-shadow: 0 0 15px var(--green-glow);

  118.   letter-spacing: 1px;

  119.   min-width: 200px;

  120. }

  121. .tx-bar .freq-display .unit {

  122.   font-family: var(--mono);

  123.   font-size: 14px;

  124.   color: var(--text-dim);

  125.   margin-left: 4px;

  126. }

  127. 

  128. .tx-btn {

  129.   padding: 8px 20px;

  130.   border: 1px solid var(--border);

  131.   border-radius: var(--radius);

  132.   background: var(--surface2);

  133.   color: var(--text);

  134.   font-family: var(--mono);

  135.   font-size: 12px;

  136.   font-weight: 600;

  137.   cursor: pointer;

  138.   text-transform: uppercase;

  139.   letter-spacing: 1px;

  140.   transition: all 0.15s;

  141. }

  142. .tx-btn:hover { border-color: var(--text-dim); }

  143. .tx-btn.start { border-color: var(--green); color: var(--green); }

  144. .tx-btn.start:hover { background: var(--green); color: var(--bg); }

  145. .tx-btn.stop { border-color: var(--accent); color: var(--accent); }

  146. .tx-btn.stop:hover { background: var(--accent); color: #fff; }

  147. 

  148. .tx-state {

  149.   font-size: 11px;

  150.   text-transform: uppercase;

  151.   letter-spacing: 2px;

  152.   color: var(--text-dim);

  153.   margin-left: auto;

  154. }

  155. .tx-state.running { color: var(--green); }

  156. .tx-state.idle { color: var(--text-dim); }

  157. 

  158. /* Telemetry strip */

  159. .telem {

  160.   display: flex;

  161.   gap: 1px;

  162.   background: var(--border);

  163.   border-radius: var(--radius);

  164.   overflow: hidden;

  165.   margin-bottom: 16px;

  166. }

  167. .telem-cell {

  168.   flex: 1;

  169.   background: var(--surface);

  170.   padding: 10px 12px;

  171.   text-align: center;

  172. }

  173. .telem-cell .label {

  174.   font-size: 9px;

  175.   text-transform: uppercase;

  176.   letter-spacing: 1.5px;

  177.   color: var(--text-dim);

  178.   margin-bottom: 4px;

  179. }

  180. .telem-cell .value {

  181.   font-size: 16px;

  182.   font-weight: 700;

  183.   color: var(--text);

  184. }

  185. .telem-cell .value.warn { color: var(--amber); }

  186. .telem-cell .value.err { color: var(--accent); }

  187. 

  188. /* Section panels */

  189. .panel {

  190.   background: var(--surface);

  191.   border: 1px solid var(--border);

  192.   border-radius: var(--radius);

  193.   margin-bottom: 12px;

  194.   overflow: hidden;

  195. }

  196. .panel-head {

  197.   display: flex;

  198.   align-items: center;

  199.   gap: 8px;

  200.   padding: 10px 14px;

  201.   border-bottom: 1px solid var(--border);

  202.   background: var(--surface2);

  203.   cursor: pointer;

  204.   user-select: none;

  205. }

  206. .panel-head h2 {

  207.   font-family: var(--mono);

  208.   font-size: 11px;

  209.   font-weight: 600;

  210.   text-transform: uppercase;

  211.   letter-spacing: 2px;

  212.   color: var(--text-dim);

  213. }

  214. .panel-head .chevron {

  215.   margin-left: auto;

  216.   color: var(--text-dim);

  217.   transition: transform 0.2s;

  218.   font-size: 10px;

  219. }

  220. .panel-head.collapsed .chevron { transform: rotate(-90deg); }

  221. .panel-body { padding: 14px; }

  222. .panel-body.collapsed { display: none; }

  223. 

  224. /* Form controls */

  225. .ctrl-row {

  226.   display: flex;

  227.   align-items: center;

  228.   gap: 12px;

  229.   padding: 6px 0;

  230.   border-bottom: 1px solid #1a1a22;

  231. }

  232. .ctrl-row:last-child { border-bottom: none; }

  233. 

  234. .ctrl-label {

  235.   font-size: 11px;

  236.   color: var(--text-dim);

  237.   min-width: 110px;

  238.   text-transform: uppercase;

  239.   letter-spacing: 0.5px;

  240. }

  241. 

  242. .ctrl-input {

  243.   flex: 1;

  244.   display: flex;

  245.   align-items: center;

  246.   gap: 8px;

  247. }

  248. 

  249. input[type="range"] {

  250.   -webkit-appearance: none;

  251.   appearance: none;

  252.   flex: 1;

  253.   height: 4px;

  254.   background: var(--border);

  255.   border-radius: 2px;

  256.   outline: none;

  257. }

  258. input[type="range"]::-webkit-slider-thumb {

  259.   -webkit-appearance: none;

  260.   width: 14px; height: 14px;

  261.   border-radius: 50%;

  262.   background: var(--text);

  263.   border: 2px solid var(--bg);

  264.   cursor: pointer;

  265.   transition: background 0.15s;

  266. }

  267. input[type="range"]::-webkit-slider-thumb:hover { background: var(--accent); }

  268. 

  269. input[type="number"], input[type="text"] {

  270.   background: var(--bg);

  271.   border: 1px solid var(--border);

  272.   border-radius: 4px;

  273.   color: var(--text);

  274.   font-family: var(--mono);

  275.   font-size: 13px;

  276.   padding: 5px 8px;

  277.   width: 80px;

  278.   outline: none;

  279.   transition: border-color 0.15s;

  280. }

  281. input[type="text"] { width: 100%; }

  282. input:focus { border-color: var(--accent); }

  283. 

  284. .val-display {

  285.   font-size: 12px;

  286.   font-weight: 600;

  287.   min-width: 55px;

  288.   text-align: right;

  289.   color: var(--text);

  290. }

  291. 

  292. /* Toggle switch */

  293. .toggle {

  294.   position: relative;

  295.   width: 36px; height: 20px;

  296.   background: var(--border);

  297.   border-radius: 10px;

  298.   cursor: pointer;

  299.   transition: background 0.2s;

  300.   flex-shrink: 0;

  301. }

  302. .toggle.on { background: var(--green); }

  303. .toggle::after {

  304.   content: '';

  305.   position: absolute;

  306.   top: 2px; left: 2px;

  307.   width: 16px; height: 16px;

  308.   background: var(--text);

  309.   border-radius: 50%;

  310.   transition: transform 0.2s;

  311. }

  312. .toggle.on::after { transform: translateX(16px); }

  313. 

  314. /* RDS section */

  315. .rds-input {

  316.   width: 100%;

  317.   background: var(--bg);

  318.   border: 1px solid var(--border);

  319.   border-radius: 4px;

  320.   color: var(--green);

  321.   font-family: var(--mono);

  322.   font-size: 15px;

  323.   font-weight: 700;

  324.   padding: 8px 10px;

  325.   outline: none;

  326.   letter-spacing: 2px;

  327.   text-transform: uppercase;

  328.   transition: border-color 0.15s;

  329. }

  330. .rds-input:focus { border-color: var(--accent); }

  331. .rds-input.rt {

  332.   font-size: 12px;

  333.   font-weight: 400;

  334.   letter-spacing: 0.5px;

  335.   text-transform: none;

  336.   color: var(--text);

  337. }

  338. .rds-charcount {

  339.   font-size: 10px;

  340.   color: var(--text-dim);

  341.   text-align: right;

  342.   margin-top: 2px;

  343. }

  344. 

  345. /* Apply button */

  346. .apply-btn {

  347.   display: block;

  348.   width: 100%;

  349.   padding: 10px;

  350.   margin-top: 8px;

  351.   background: var(--accent);

  352.   border: none;

  353.   border-radius: var(--radius);

  354.   color: #fff;

  355.   font-family: var(--mono);

  356.   font-size: 12px;

  357.   font-weight: 700;

  358.   text-transform: uppercase;

  359.   letter-spacing: 2px;

  360.   cursor: pointer;

  361.   transition: all 0.15s;

  362.   opacity: 0;

  363.   transform: translateY(-4px);

  364.   pointer-events: none;

  365. }

  366. .apply-btn.visible {

  367.   opacity: 1;

  368.   transform: translateY(0);

  369.   pointer-events: auto;

  370. }

  371. .apply-btn:hover { filter: brightness(1.2); }

  372. .apply-btn.sending {

  373.   opacity: 0.6;

  374.   pointer-events: none;

  375. }

  376. .apply-btn.ok {

  377.   background: var(--green);

  378. }

  379. 

  380. /* Toast notification */

  381. .toast {

  382.   position: fixed;

  383.   bottom: 20px;

  384.   right: 20px;

  385.   padding: 10px 16px;

  386.   border-radius: var(--radius);

  387.   font-size: 12px;

  388.   font-weight: 600;

  389.   z-index: 2000;

  390.   transform: translateY(60px);

  391.   opacity: 0;

  392.   transition: all 0.3s;

  393. }

  394. .toast.show { transform: translateY(0); opacity: 1; }

  395. .toast.ok { background: var(--green); color: var(--bg); }

  396. .toast.err { background: var(--accent); color: #fff; }

  397. 

  398. /* Log */

  399. .log {

  400.   background: var(--bg);

  401.   border: 1px solid var(--border);

  402.   border-radius: 4px;

  403.   padding: 8px 10px;

  404.   font-size: 10px;

  405.   color: var(--text-dim);

  406.   max-height: 120px;

  407.   overflow-y: auto;

  408.   white-space: pre-wrap;

  409.   word-break: break-all;

  410. }

  411. .log .entry { padding: 1px 0; }

  412. .log .entry.err { color: var(--accent); }

  413. .log .entry.ok { color: var(--green); }

  414. 

  415. /* Responsive */

  416. @media (max-width: 600px) {

  417.   .tx-bar { flex-wrap: wrap; }

  418.   .tx-bar .freq-display { font-size: 24px; min-width: auto; }

  419.   .telem { flex-wrap: wrap; }

  420.   .telem-cell { flex: 1 1 30%; }

  421.   .ctrl-row { flex-wrap: wrap; }

  422.   .ctrl-label { min-width: auto; width: 100%; }

  423. }

  424. </style>

  425. </head>

  426. <body>

  427. <div class="app" id="app">

  428. 

  429.   <!-- Header -->

  430.   <div class="header">

  431.     <h1>FM-RDS-TX</h1>

  432.     <div class="header-status">

  433.       <div class="led" id="led-conn"></div>

  434.       <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px" id="conn-label">connecting</span>

  435.     </div>

  436.   </div>

  437. 

  438.   <!-- TX Control Bar -->

  439.   <div class="tx-bar">

  440.     <div class="freq-display" id="freq-display">---.--<span class="unit">MHz</span></div>

  441.     <button class="tx-btn start" id="btn-start" onclick="txStart()">TX ON</button>

  442.     <button class="tx-btn stop" id="btn-stop" onclick="txStop()">TX OFF</button>

  443.     <div class="tx-state" id="tx-state">--</div>

  444.   </div>

  445. 

  446.   <!-- Telemetry -->

  447.   <div class="telem" id="telem">

  448.     <div class="telem-cell"><div class="label">Chunks</div><div class="value" id="t-chunks">--</div></div>

  449.     <div class="telem-cell"><div class="label">Samples</div><div class="value" id="t-samples">--</div></div>

  450.     <div class="telem-cell"><div class="label">Underruns</div><div class="value" id="t-underruns">0</div></div>

  451.     <div class="telem-cell"><div class="label">Uptime</div><div class="value" id="t-uptime">--</div></div>

  452.     <div class="telem-cell"><div class="label">Rate</div><div class="value" id="t-rate">--</div></div>

  453.   </div>

  454. 

  455.   <!-- Frequency -->

  456.   <div class="panel">

  457.     <div class="panel-head" onclick="togglePanel(this)">

  458.       <div class="led on-green" style="width:6px;height:6px"></div>

  459.       <h2>Frequency</h2>

  460.       <span class="chevron">▼</span>

  461.     </div>

  462.     <div class="panel-body">

  463.       <div class="ctrl-row">

  464.         <span class="ctrl-label">TX Freq</span>

  465.         <div class="ctrl-input">

  466.           <input type="range" min="87.5" max="108.0" step="0.1" id="freq-slider"

  467.                  oninput="onFreqSlider(this.value)">

  468.           <input type="number" min="65" max="110" step="0.1" id="freq-num"

  469.                  onchange="onFreqNum(this.value)">

  470.           <span class="val-display">MHz</span>

  471.         </div>

  472.       </div>

  473.       <button class="apply-btn" id="freq-apply" onclick="applyFreq()">Apply Frequency</button>

  474.     </div>

  475.   </div>

  476. 

  477.   <!-- Levels -->

  478.   <div class="panel">

  479.     <div class="panel-head" onclick="togglePanel(this)">

  480.       <div class="led on-amber" style="width:6px;height:6px"></div>

  481.       <h2>Levels</h2>

  482.       <span class="chevron">▼</span>

  483.     </div>

  484.     <div class="panel-body">

  485.       <div class="ctrl-row">

  486.         <span class="ctrl-label">Output Drive</span>

  487.         <div class="ctrl-input">

  488.           <input type="range" min="0" max="3" step="0.01" id="drive-slider"

  489.                  oninput="onSlider('outputDrive', this.value, 'drive-val')">

  490.           <span class="val-display" id="drive-val">--</span>

  491.         </div>

  492.       </div>

  493.       <div class="ctrl-row">

  494.         <span class="ctrl-label">Pilot Level</span>

  495.         <div class="ctrl-input">

  496.           <input type="range" min="0" max="0.2" step="0.001" id="pilot-slider"

  497.                  oninput="onSlider('pilotLevel', this.value, 'pilot-val')">

  498.           <span class="val-display" id="pilot-val">--</span>

  499.         </div>

  500.       </div>

  501.       <div class="ctrl-row">

  502.         <span class="ctrl-label">RDS Inject</span>

  503.         <div class="ctrl-input">

  504.           <input type="range" min="0" max="0.15" step="0.001" id="rds-inj-slider"

  505.                  oninput="onSlider('rdsInjection', this.value, 'rds-inj-val')">

  506.           <span class="val-display" id="rds-inj-val">--</span>

  507.         </div>

  508.       </div>

  509.       <div class="ctrl-row">

  510.         <span class="ctrl-label">Limiter Ceil</span>

  511.         <div class="ctrl-input">

  512.           <input type="range" min="0" max="2" step="0.01" id="ceil-slider"

  513.                  oninput="onSlider('limiterCeiling', this.value, 'ceil-val')">

  514.           <span class="val-display" id="ceil-val">--</span>

  515.         </div>

  516.       </div>

  517.       <button class="apply-btn" id="levels-apply" onclick="applyLevels()">Apply Levels</button>

  518.     </div>

  519.   </div>

  520. 

  521.   <!-- Switches -->

  522.   <div class="panel">

  523.     <div class="panel-head" onclick="togglePanel(this)">

  524.       <div class="led on-green" style="width:6px;height:6px"></div>

  525.       <h2>Switches</h2>

  526.       <span class="chevron">▼</span>

  527.     </div>

  528.     <div class="panel-body">

  529.       <div class="ctrl-row">

  530.         <span class="ctrl-label">Stereo</span>

  531.         <div class="ctrl-input">

  532.           <div class="toggle" id="tog-stereo" onclick="applyToggle('stereoEnabled', this)"></div>

  533.           <span class="val-display" id="stereo-label">--</span>

  534.         </div>

  535.       </div>

  536.       <div class="ctrl-row">

  537.         <span class="ctrl-label">RDS</span>

  538.         <div class="ctrl-input">

  539.           <div class="toggle" id="tog-rds" onclick="applyToggle('rdsEnabled', this)"></div>

  540.           <span class="val-display" id="rds-label">--</span>

  541.         </div>

  542.       </div>

  543.       <div class="ctrl-row">

  544.         <span class="ctrl-label">Limiter</span>

  545.         <div class="ctrl-input">

  546.           <div class="toggle" id="tog-limiter" onclick="applyToggle('limiterEnabled', this)"></div>

  547.           <span class="val-display" id="limiter-label">--</span>

  548.         </div>

  549.       </div>

  550.     </div>

  551.   </div>

  552. 

  553.   <!-- RDS -->

  554.   <div class="panel">

  555.     <div class="panel-head" onclick="togglePanel(this)">

  556.       <div class="led on-amber" style="width:6px;height:6px"></div>

  557.       <h2>RDS</h2>

  558.       <span class="chevron">▼</span>

  559.     </div>

  560.     <div class="panel-body">

  561.       <div class="ctrl-row" style="flex-direction:column;align-items:stretch;gap:4px">

  562.         <span class="ctrl-label">Program Service (PS)</span>

  563.         <input type="text" class="rds-input" id="rds-ps" maxlength="8" placeholder="STATION">

  564.         <div class="rds-charcount"><span id="ps-count">0</span>/8</div>

  565.       </div>

  566.       <div class="ctrl-row" style="flex-direction:column;align-items:stretch;gap:4px;margin-top:8px">

  567.         <span class="ctrl-label">RadioText (RT)</span>

  568.         <input type="text" class="rds-input rt" id="rds-rt" maxlength="64" placeholder="Now playing...">

  569.         <div class="rds-charcount"><span id="rt-count">0</span>/64</div>

  570.       </div>

  571.       <button class="apply-btn" id="rds-apply" onclick="applyRDS()">Apply RDS Text</button>

  572.     </div>

  573.   </div>

  574. 

  575.   <!-- Log -->

  576.   <div class="panel">

  577.     <div class="panel-head" onclick="togglePanel(this)">

  578.       <h2>Log</h2>

  579.       <span class="chevron">▼</span>

  580.     </div>

  581.     <div class="panel-body">

  582.       <div class="log" id="log"></div>

  583.     </div>

  584.   </div>

  585. 

  586. </div>

  587. 

  588. <!-- Toast -->

  589. <div class="toast" id="toast"></div>

  590. 

  591. <script>

  592. const $ = id => document.getElementById(id);

  593. 

  594. // State

  595. let cfg = {};

  596. let pending = {};

  597. let pollTimer = null;

  598. 

  599. // --- API ---

  600. async function api(path, opts) {

  601.   try {

  602.     const r = await fetch(path, opts);

  603.     const text = await r.text();

  604.     if (!r.ok) throw new Error(text.trim() || `HTTP ${r.status}`);

  605.     try { return JSON.parse(text); }

  606.     catch(e) { return {ok: true}; }

  607.   } catch(e) {

  608.     throw e;

  609.   }

  610. }

  611. 

  612. async function loadConfig() {

  613.   try {

  614.     cfg = await api('/config');

  615.     $('led-conn').className = 'led on-green';

  616.     $('conn-label').textContent = 'connected';

  617.     syncUI();

  618.   } catch(e) {

  619.     $('led-conn').className = 'led on-red';

  620.     $('conn-label').textContent = 'offline';

  621.     log('config load failed: ' + e.message, 'err');

  622.   }

  623. }

  624. 

  625. async function loadRuntime() {

  626.   try {

  627.     const rt = await api('/runtime');

  628.     const eng = rt.engine || {};

  629.     const drv = rt.driver || {};

  630. 

  631.     // TX state

  632.     const state = eng.state || 'idle';

  633.     const el = $('tx-state');

  634.     el.textContent = state.toUpperCase();

  635.     el.className = 'tx-state ' + state;

  636. 

  637.     // Telemetry

  638.     $('t-chunks').textContent = fmt(eng.chunksProduced || 0);

  639.     $('t-samples').textContent = fmt(eng.totalSamples || 0);

  640.     const ur = eng.underruns || 0;

  641.     const urEl = $('t-underruns');

  642.     urEl.textContent = ur;

  643.     urEl.className = 'value' + (ur > 0 ? ' err' : '');

  644.     $('t-uptime').textContent = fmtTime(eng.uptimeSeconds || 0);

  645.     $('t-rate').textContent = drv.effectiveSampleRateHz ? (drv.effectiveSampleRateHz/1000).toFixed(0) + 'k' : '--';

  646. 

  647.     $('led-conn').className = 'led on-green';

  648.     $('conn-label').textContent = 'connected';

  649.   } catch(e) {

  650.     // Silent on poll errors

  651.   }

  652. }

  653. 

  654. async function txStart() {

  655.   try {

  656.     await api('/tx/start', {method:'POST'});

  657.     toast('TX started', 'ok');

  658.     log('TX started', 'ok');

  659.   } catch(e) { toast(e.message, 'err'); log('TX start failed: ' + e.message, 'err'); }

  660. }

  661. 

  662. async function txStop() {

  663.   try {

  664.     await api('/tx/stop', {method:'POST'});

  665.     toast('TX stopped', 'ok');

  666.     log('TX stopped', 'ok');

  667.   } catch(e) { toast(e.message, 'err'); log('TX stop failed: ' + e.message, 'err'); }

  668. }

  669. 

  670. async function sendPatch(patch, btnId) {

  671.   const btn = btnId ? $(btnId) : null;

  672.   if (btn) btn.classList.add('sending');

  673.   try {

  674.     const r = await api('/config', {

  675.       method: 'POST',

  676.       headers: {'Content-Type':'application/json'},

  677.       body: JSON.stringify(patch)

  678.     });

  679.     Object.assign(cfg, flatCfg(patch));

  680.     toast('Applied' + (r.live ? ' (live)' : ''), 'ok');

  681.     log('PATCH ' + JSON.stringify(patch) + (r.live ? ' [live]' : ''), 'ok');

  682.     if (btn) { btn.classList.remove('sending'); btn.classList.add('ok'); setTimeout(()=>{btn.classList.remove('ok','visible')}, 800); }

  683.     pending = {};

  684.   } catch(e) {

  685.     toast(e.message, 'err');

  686.     log('PATCH failed: ' + e.message, 'err');

  687.     if (btn) btn.classList.remove('sending');

  688.   }

  689. }

  690. 

  691. // --- UI sync ---

  692. function syncUI() {

  693.   // Frequency

  694.   const freq = cfg.fm?.frequencyMHz || 100;

  695.   $('freq-display').innerHTML = freq.toFixed(1) + '<span class="unit">MHz</span>';

  696.   $('freq-slider').value = freq;

  697.   $('freq-num').value = freq;

  698. 

  699.   // Levels

  700.   setSlider('drive-slider', 'drive-val', cfg.fm?.outputDrive, 2);

  701.   setSlider('pilot-slider', 'pilot-val', cfg.fm?.pilotLevel, 3);

  702.   setSlider('rds-inj-slider', 'rds-inj-val', cfg.fm?.rdsInjection, 3);

  703.   setSlider('ceil-slider', 'ceil-val', cfg.fm?.limiterCeiling, 2);

  704. 

  705.   // Toggles

  706.   setToggle('tog-stereo', 'stereo-label', cfg.fm?.stereoEnabled);

  707.   setToggle('tog-rds', 'rds-label', cfg.rds?.enabled);

  708.   setToggle('tog-limiter', 'limiter-label', cfg.fm?.limiterEnabled);

  709. 

  710.   // RDS text

  711.   $('rds-ps').value = cfg.rds?.ps || '';

  712.   $('rds-rt').value = cfg.rds?.radioText || '';

  713.   $('ps-count').textContent = ($('rds-ps').value || '').length;

  714.   $('rt-count').textContent = ($('rds-rt').value || '').length;

  715. }

  716. 

  717. function setSlider(sliderId, valId, value, decimals) {

  718.   const v = value ?? 0;

  719.   $(sliderId).value = v;

  720.   $(valId).textContent = v.toFixed(decimals || 2);

  721. }

  722. 

  723. function setToggle(togId, labelId, on) {

  724.   $(togId).className = 'toggle' + (on ? ' on' : '');

  725.   $(labelId).textContent = on ? 'ON' : 'OFF';

  726. }

  727. 

  728. // --- Handlers ---

  729. function onFreqSlider(v) {

  730.   v = parseFloat(v);

  731.   $('freq-num').value = v.toFixed(1);

  732.   $('freq-display').innerHTML = v.toFixed(1) + '<span class="unit">MHz</span>';

  733.   pending.frequencyMHz = v;

  734.   showApply('freq-apply');

  735. }

  736. function onFreqNum(v) {

  737.   v = parseFloat(v);

  738.   if (isNaN(v)) return;

  739.   $('freq-slider').value = v;

  740.   $('freq-display').innerHTML = v.toFixed(1) + '<span class="unit">MHz</span>';

  741.   pending.frequencyMHz = v;

  742.   showApply('freq-apply');

  743. }

  744. function applyFreq() {

  745.   if (pending.frequencyMHz != null) sendPatch({frequencyMHz: pending.frequencyMHz}, 'freq-apply');

  746. }

  747. 

  748. function onSlider(key, v, valId) {

  749.   v = parseFloat(v);

  750.   $(valId).textContent = v.toFixed(key === 'outputDrive' || key === 'limiterCeiling' ? 2 : 3);

  751.   pending[key] = v;

  752.   showApply('levels-apply');

  753. }

  754. function applyLevels() {

  755.   const patch = {};

  756.   for (const k of ['outputDrive','pilotLevel','rdsInjection','limiterCeiling']) {

  757.     if (pending[k] != null) patch[k] = pending[k];

  758.   }

  759.   if (Object.keys(patch).length) sendPatch(patch, 'levels-apply');

  760. }

  761. 

  762. function applyToggle(key, el) {

  763.   const isOn = el.classList.contains('on');

  764.   const newVal = !isOn;

  765.   const patch = {};

  766.   patch[key] = newVal;

  767.   sendPatch(patch);

  768.   // Optimistic UI

  769.   el.classList.toggle('on');

  770.   const labelId = el.id.replace('tog-', '') + '-label';

  771.   const lbl = document.getElementById(labelId);

  772.   if (lbl) lbl.textContent = newVal ? 'ON' : 'OFF';

  773. }

  774. 

  775. function applyRDS() {

  776.   const ps = $('rds-ps').value;

  777.   const rt = $('rds-rt').value;

  778.   const patch = {};

  779.   if (ps !== (cfg.rds?.ps || '')) patch.ps = ps;

  780.   if (rt !== (cfg.rds?.radioText || '')) patch.radioText = rt;

  781.   if (Object.keys(patch).length) sendPatch(patch, 'rds-apply');

  782.   else toast('No changes', 'ok');

  783. }

  784. 

  785. // RDS char counters

  786. $('rds-ps').addEventListener('input', function() {

  787.   $('ps-count').textContent = this.value.length;

  788.   showApply('rds-apply');

  789. });

  790. $('rds-rt').addEventListener('input', function() {

  791.   $('rt-count').textContent = this.value.length;

  792.   showApply('rds-apply');

  793. });

  794. 

  795. // --- Panel toggle ---

  796. function togglePanel(head) {

  797.   head.classList.toggle('collapsed');

  798.   head.nextElementSibling.classList.toggle('collapsed');

  799. }

  800. 

  801. // --- Apply button visibility ---

  802. function showApply(btnId) {

  803.   $(btnId).classList.add('visible');

  804. }

  805. 

  806. // --- Toast ---

  807. function toast(msg, type) {

  808.   const t = $('toast');

  809.   t.textContent = msg;

  810.   t.className = 'toast ' + type + ' show';

  811.   clearTimeout(t._timer);

  812.   t._timer = setTimeout(() => t.classList.remove('show'), 2500);

  813. }

  814. 

  815. // --- Log ---

  816. function log(msg, type) {

  817.   const el = $('log');

  818.   const ts = new Date().toLocaleTimeString();

  819.   const d = document.createElement('div');

  820.   d.className = 'entry ' + (type || '');

  821.   d.textContent = ts + '  ' + msg;

  822.   el.appendChild(d);

  823.   el.scrollTop = el.scrollHeight;

  824.   // Keep max 200 entries

  825.   while (el.children.length > 200) el.removeChild(el.firstChild);

  826. }

  827. 

  828. // --- Helpers ---

  829. function fmt(n) {

  830.   if (n >= 1e9) return (n/1e9).toFixed(2) + 'G';

  831.   if (n >= 1e6) return (n/1e6).toFixed(2) + 'M';

  832.   if (n >= 1e3) return (n/1e3).toFixed(1) + 'k';

  833.   return n.toString();

  834. }

  835. function fmtTime(s) {

  836.   if (!s || s <= 0) return '--';

  837.   const h = Math.floor(s/3600);

  838.   const m = Math.floor((s%3600)/60);

  839.   const sec = Math.floor(s%60);

  840.   if (h > 0) return h + 'h ' + m + 'm';

  841.   if (m > 0) return m + 'm ' + sec + 's';

  842.   return sec + 's';

  843. }

  844. function flatCfg(patch) {

  845.   // Update local cfg mirror from patch keys

  846.   const map = {

  847.     frequencyMHz: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.frequencyMHz=v; },

  848.     outputDrive: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.outputDrive=v; },

  849.     stereoEnabled: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.stereoEnabled=v; },

  850.     pilotLevel: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.pilotLevel=v; },

  851.     rdsInjection: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.rdsInjection=v; },

  852.     rdsEnabled: (v) => { if(!cfg.rds) cfg.rds={}; cfg.rds.enabled=v; },

  853.     limiterEnabled: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.limiterEnabled=v; },

  854.     limiterCeiling: (v) => { if(!cfg.fm) cfg.fm={}; cfg.fm.limiterCeiling=v; },

  855.     ps: (v) => { if(!cfg.rds) cfg.rds={}; cfg.rds.ps=v; },

  856.     radioText: (v) => { if(!cfg.rds) cfg.rds={}; cfg.rds.radioText=v; },

  857.   };

  858.   for (const [k,v] of Object.entries(patch)) { if (map[k]) map[k](v); }

  859.   return {};

  860. }

  861. 

  862. // --- Init ---

  863. async function init() {

  864.   log('fm-rds-tx web control initializing');

  865.   await loadConfig();

  866.   // Poll runtime every 500ms

  867.   setInterval(loadRuntime, 500);

  868.   // Reload config every 5s (catch external changes)

  869.   setInterval(loadConfig, 5000);

  870.   log('polling active', 'ok');

  871. }

  872. init();

  873. </script>

  874. </body>

  875. </html>