Martino Ferrari
612 lines
26 KiB
C++
612 lines
26 KiB
C++
#ifndef WEBUI_H
|
|
#define WEBUI_H
|
|
|
|
#include "CompilerTypes.h"
|
|
|
|
namespace MARTe {
|
|
|
|
// clang-format off
|
|
static const char8 *const WEB_UI_HTML =
|
|
"<!DOCTYPE html>\n"
|
|
"<html lang='en'>\n"
|
|
"<head>\n"
|
|
"<meta charset='UTF-8'>\n"
|
|
"<meta name='viewport' content='width=device-width,initial-scale=1'>\n"
|
|
"<title>MARTe2 Debug</title>\n"
|
|
"<script src='https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'></script>\n"
|
|
"<style>\n"
|
|
":root{--base:#1e1e2e;--mantle:#181825;--crust:#11111b;--text:#cdd6f4;--sub:#a6adc8;\n"
|
|
" --ov:#6c7086;--s0:#313244;--s1:#45475a;--s2:#585b70;--blue:#89b4fa;\n"
|
|
" --green:#a6e3a1;--yellow:#f9e2af;--red:#f38ba8;--mauve:#cba6f7;--peach:#fab387;\n"
|
|
" --teal:#94e2d5;--sky:#89dceb;}\n"
|
|
"*{box-sizing:border-box;margin:0;padding:0;}\n"
|
|
"body{background:var(--base);color:var(--text);font-family:'JetBrains Mono','Fira Code',monospace;\n"
|
|
" font-size:12px;height:100vh;display:flex;flex-direction:column;overflow:hidden;}\n"
|
|
"#toolbar{background:var(--mantle);border-bottom:1px solid var(--s0);padding:5px 8px;\n"
|
|
" display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;}\n"
|
|
".dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0;}\n"
|
|
".dot.ok{background:var(--green);}\n"
|
|
".dot.pause{background:var(--yellow);animation:blink 1s infinite;}\n"
|
|
"@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}\n"
|
|
"button{background:var(--s0);color:var(--text);border:1px solid var(--s1);border-radius:3px;\n"
|
|
" padding:2px 7px;cursor:pointer;font-size:11px;font-family:inherit;}\n"
|
|
"button:hover{background:var(--s1);}\n"
|
|
"button.act{background:var(--blue);color:var(--base);border-color:var(--blue);}\n"
|
|
"button.danger{background:var(--red);color:var(--base);border-color:var(--red);}\n"
|
|
"input[type=text],input[type=number]{background:var(--s0);color:var(--text);\n"
|
|
" border:1px solid var(--s1);border-radius:3px;padding:2px 5px;font-size:11px;font-family:inherit;}\n"
|
|
"input:focus{outline:none;border-color:var(--blue);}\n"
|
|
"label{color:var(--sub);font-size:11px;}\n"
|
|
"select{background:var(--s0);color:var(--text);border:1px solid var(--s1);border-radius:3px;\n"
|
|
" padding:2px 5px;font-size:11px;font-family:inherit;}\n"
|
|
".sep{width:1px;height:18px;background:var(--s1);flex-shrink:0;}\n"
|
|
"#main{display:flex;flex:1;overflow:hidden;}\n"
|
|
"#left{width:255px;background:var(--mantle);border-right:1px solid var(--s0);\n"
|
|
" display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}\n"
|
|
"#center{flex:1;display:flex;flex-direction:column;overflow:hidden;}\n"
|
|
"#right{width:215px;background:var(--mantle);border-left:1px solid var(--s0);\n"
|
|
" display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}\n"
|
|
"#bottom{height:135px;background:var(--mantle);border-top:1px solid var(--s0);\n"
|
|
" display:flex;flex-direction:column;flex-shrink:0;}\n"
|
|
".ph{background:var(--crust);padding:4px 7px;font-size:11px;color:var(--sub);\n"
|
|
" display:flex;align-items:center;justify-content:space-between;flex-shrink:0;\n"
|
|
" border-bottom:1px solid var(--s0);}\n"
|
|
".ph span{font-weight:bold;color:var(--blue);}\n"
|
|
"#tree{flex:1;overflow-y:auto;padding:3px;}\n"
|
|
".tr{display:flex;align-items:center;padding:2px 3px;border-radius:3px;gap:2px;cursor:default;}\n"
|
|
".tr:hover{background:var(--s0);}\n"
|
|
".tog{width:13px;text-align:center;cursor:pointer;color:var(--ov);font-size:10px;flex-shrink:0;}\n"
|
|
".ico{flex-shrink:0;font-size:10px;}\n"
|
|
".tn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}\n"
|
|
".sig{color:var(--green);}\n"
|
|
".tbtns{display:none;gap:2px;}\n"
|
|
".tr:hover .tbtns{display:flex;}\n"
|
|
".tb{background:none;border:none;padding:1px 3px;font-size:10px;cursor:pointer;\n"
|
|
" border-radius:2px;color:var(--sub);}\n"
|
|
".tb:hover{background:var(--s1);color:var(--text);}\n"
|
|
".tch{padding-left:13px;}\n"
|
|
"#ctrls{padding:4px 7px;display:flex;align-items:center;gap:5px;background:var(--crust);\n"
|
|
" border-bottom:1px solid var(--s0);flex-shrink:0;flex-wrap:wrap;}\n"
|
|
"#ca{flex:1;padding:6px;overflow:hidden;position:relative;}\n"
|
|
"#mc{display:block;width:100%;height:100%;}\n"
|
|
"#traced{flex:1;overflow-y:auto;padding:3px;}\n"
|
|
".ti{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:3px;margin-bottom:1px;}\n"
|
|
".ti:hover{background:var(--s0);}\n"
|
|
".tc{width:7px;height:7px;border-radius:2px;flex-shrink:0;}\n"
|
|
".tnm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}\n"
|
|
".tv{font-size:10px;color:var(--yellow);min-width:55px;text-align:right;flex-shrink:0;}\n"
|
|
".titbs{display:none;gap:2px;}\n"
|
|
".ti:hover .titbs{display:flex;}\n"
|
|
"#ltb{padding:3px 5px;display:flex;gap:6px;align-items:center;background:var(--crust);\n"
|
|
" border-bottom:1px solid var(--s0);flex-shrink:0;}\n"
|
|
"#lc{flex:1;overflow-y:auto;padding:2px 5px;}\n"
|
|
".le{font-size:10px;line-height:1.4;font-family:monospace;white-space:pre-wrap;word-break:break-all;}\n"
|
|
".lDEBUG{color:var(--ov);}\n"
|
|
".lINFO{color:var(--text);}\n"
|
|
".lWARNING{color:var(--yellow);}\n"
|
|
".lERROR{color:var(--red);}\n"
|
|
".mo{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);\n"
|
|
" z-index:100;align-items:center;justify-content:center;}\n"
|
|
".mo.show{display:flex;}\n"
|
|
".mb{background:var(--mantle);border:1px solid var(--s1);border-radius:7px;padding:15px;min-width:290px;}\n"
|
|
".mb h3{color:var(--blue);margin-bottom:11px;font-size:13px;}\n"
|
|
".fr{display:flex;align-items:center;gap:7px;margin-bottom:7px;}\n"
|
|
".fr label{min-width:75px;color:var(--sub);}\n"
|
|
".fr input,.fr select,.fr textarea{flex:1;}\n"
|
|
"textarea{background:var(--s0);color:var(--text);border:1px solid var(--s1);border-radius:3px;\n"
|
|
" padding:2px 5px;font-size:11px;font-family:inherit;resize:vertical;}\n"
|
|
"textarea:focus{outline:none;border-color:var(--blue);}\n"
|
|
".mbtns{display:flex;gap:7px;justify-content:flex-end;margin-top:11px;}\n"
|
|
"::-webkit-scrollbar{width:5px;height:5px;}\n"
|
|
"::-webkit-scrollbar-track{background:var(--mantle);}\n"
|
|
"::-webkit-scrollbar-thumb{background:var(--s1);border-radius:3px;}\n"
|
|
"</style>\n"
|
|
"</head>\n"
|
|
"<body>\n"
|
|
"<div id='toolbar'>\n"
|
|
" <div id='sdot' class='dot'></div>\n"
|
|
" <span id='stxt' style='color:var(--sub);font-size:11px'>Connecting\xe2\x80\xa6</span>\n"
|
|
" <div class='sep'></div>\n"
|
|
" <button onclick='cmd(\"DISCOVER\")'>Discover</button>\n"
|
|
" <button onclick='cmd(\"TREE\")'>Tree</button>\n"
|
|
" <div class='sep'></div>\n"
|
|
" <button id='pbtn' onclick='togglePause()'>Pause</button>\n"
|
|
" <div class='sep'></div>\n"
|
|
" <label>Step:</label>\n"
|
|
" <input type='number' id='sn' value='1' min='1' style='width:45px'>\n"
|
|
" <input type='text' id='sthr' list='thrnodes' placeholder='thread' style='width:90px'>\n"
|
|
" <datalist id='thrnodes'></datalist>\n"
|
|
" <button onclick='doStep()'>Step</button>\n"
|
|
" <button onclick='openMsg()'>Msg</button>\n"
|
|
" <div class='sep'></div>\n"
|
|
" <label>Win:</label>\n"
|
|
" <input type='number' id='winms' value='5000' min='100' style='width:60px' onchange='winMs=+this.value'>\n"
|
|
" <button onclick='clearChart()'>Clear</button>\n"
|
|
" <span id='ss' style='color:var(--yellow);font-size:11px'></span>\n"
|
|
"</div>\n"
|
|
"<div id='main'>\n"
|
|
" <div id='left'>\n"
|
|
" <div class='ph'><span>App Tree</span><button onclick='cmd(\"TREE\")' style='font-size:10px'>↻</button></div>\n"
|
|
" <div id='tree'><div style='color:var(--ov);padding:7px;font-size:11px'>Click Tree or Discover\xe2\x80\xa6</div></div>\n"
|
|
" </div>\n"
|
|
" <div id='center'>\n"
|
|
" <div id='ctrls'>\n"
|
|
" <label>Signal:</label>\n"
|
|
" <select id='sigsel' style='width:150px'><option value=''>-- pick --</option></select>\n"
|
|
" <button onclick='addToChart()'>+ Plot</button>\n"
|
|
" <button onclick='toggleFollow()' id='fbtn' class='act'>Follow</button>\n"
|
|
" </div>\n"
|
|
" <div id='ca' ondragover='event.preventDefault()' ondrop='dropOnChart(event)'><canvas id='mc'></canvas></div>\n"
|
|
" </div>\n"
|
|
" <div id='right'>\n"
|
|
" <div class='ph'><span>Traced</span></div>\n"
|
|
" <div id='traced'></div>\n"
|
|
" </div>\n"
|
|
"</div>\n"
|
|
"<div id='bottom'>\n"
|
|
" <div class='ph'>\n"
|
|
" <span>Log</span>\n"
|
|
" <div style='display:flex;gap:5px;align-items:center'>\n"
|
|
" <label><input type='checkbox' id='fdbg' checked> D</label>\n"
|
|
" <label><input type='checkbox' id='finf' checked> I</label>\n"
|
|
" <label><input type='checkbox' id='fwrn' checked> W</label>\n"
|
|
" <label><input type='checkbox' id='ferr' checked> E</label>\n"
|
|
" <button onclick='document.getElementById(\"lc\").innerHTML=\"\"'>Clr</button>\n"
|
|
" </div>\n"
|
|
" </div>\n"
|
|
" <div id='lc'></div>\n"
|
|
"</div>\n"
|
|
"<!-- Modals -->\n"
|
|
"<div class='mo' id='frcm'>\n"
|
|
" <div class='mb'>\n"
|
|
" <h3>Force Signal</h3>\n"
|
|
" <div class='fr'><label>Signal:</label><span id='frcn' style='color:var(--green);font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis'></span></div>\n"
|
|
" <div class='fr'><label>Value:</label><input type='text' id='frcv'></div>\n"
|
|
" <div class='mbtns'>\n"
|
|
" <button onclick='closeM(\"frcm\")'>Cancel</button>\n"
|
|
" <button onclick='doUnforce()'>Unforce</button>\n"
|
|
" <button class='act' onclick='doForce()'>Force</button>\n"
|
|
" </div>\n"
|
|
" </div>\n"
|
|
"</div>\n"
|
|
"<div class='mo' id='brkm'>\n"
|
|
" <div class='mb'>\n"
|
|
" <h3>Break Condition</h3>\n"
|
|
" <div class='fr'><label>Signal:</label><span id='brkn' style='color:var(--green);font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis'></span></div>\n"
|
|
" <div class='fr'><label>Op:</label><select id='brkop'><option>></option><option><</option><option>==</option><option>>=</option><option><=</option><option>!=</option></select></div>\n"
|
|
" <div class='fr'><label>Threshold:</label><input type='number' id='brkthr' step='any' value='0'></div>\n"
|
|
" <div class='mbtns'>\n"
|
|
" <button onclick='closeM(\"brkm\")'>Cancel</button>\n"
|
|
" <button onclick='doClrBreak()'>Clear</button>\n"
|
|
" <button class='act' onclick='doBreak()'>Set</button>\n"
|
|
" </div>\n"
|
|
" </div>\n"
|
|
"</div>\n"
|
|
"<div class='mo' id='monm'>\n"
|
|
" <div class='mb'>\n"
|
|
" <h3>Monitor Signal</h3>\n"
|
|
" <div class='fr'><label>Signal:</label><span id='monn' style='color:var(--green);font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis'></span></div>\n"
|
|
" <div class='fr'><label>Period ms:</label><input type='number' id='monp' value='100' min='10'></div>\n"
|
|
" <div class='mbtns'>\n"
|
|
" <button onclick='closeM(\"monm\")'>Cancel</button>\n"
|
|
" <button onclick='doUnmonitor()'>Unmonitor</button>\n"
|
|
" <button class='act' onclick='doMonitor()'>Monitor</button>\n"
|
|
" </div>\n"
|
|
" </div>\n"
|
|
"</div>\n"
|
|
"<div class='mo' id='msgm'>\n"
|
|
" <div class='mb'>\n"
|
|
" <h3>Send Message</h3>\n"
|
|
" <div class='fr'><label>Dest:</label><input type='text' id='msgd' list='msgnodes' autocomplete='off'></div>\n"
|
|
" <datalist id='msgnodes'></datalist>\n"
|
|
" <div class='fr'><label>Function:</label><input type='text' id='msgf'></div>\n"
|
|
" <div class='fr'><label>Payload:</label><textarea id='msgp' rows='3' placeholder='key=val key2=val2'></textarea></div>\n"
|
|
" <div class='mbtns'>\n"
|
|
" <button onclick='closeM(\"msgm\")'>Cancel</button>\n"
|
|
" <button class='act' onclick='doMsg()'>Send</button>\n"
|
|
" </div>\n"
|
|
" </div>\n"
|
|
"</div>\n"
|
|
"<script>\n"
|
|
"var sigs=[],td={},isPaused=false,chart=null,cds={},winMs=5000,follow=true,curSig='',tnodes=[],threads=[];\n"
|
|
"var lc=document.getElementById('lc');\n"
|
|
"var COLS=['#89b4fa','#a6e3a1','#fab387','#cba6f7','#f38ba8','#94e2d5','#f9e2af','#89dceb'];\n"
|
|
"var ci=0;\n"
|
|
"function nc(){return COLS[ci++%COLS.length];}\n"
|
|
"\n"
|
|
"// --- SSE ---\n"
|
|
"function connect(){\n"
|
|
" var es=new EventSource('/api/events');\n"
|
|
" es.onopen=function(){\n"
|
|
" document.getElementById('sdot').className='dot ok';\n"
|
|
" document.getElementById('stxt').textContent='Connected';\n"
|
|
" cmd('TREE');cmd('DISCOVER');\n"
|
|
" };\n"
|
|
" es.onerror=function(){\n"
|
|
" document.getElementById('sdot').className='dot';\n"
|
|
" document.getElementById('stxt').textContent='Reconnecting\xe2\x80\xa6';\n"
|
|
" es.close();setTimeout(connect,3000);\n"
|
|
" };\n"
|
|
" es.onmessage=function(e){\n"
|
|
" try{handle(JSON.parse(e.data));}catch(x){}\n"
|
|
" };\n"
|
|
"}\n"
|
|
"\n"
|
|
"function handle(ev){\n"
|
|
" if(ev.type==='trace'||ev.type==='monitor'){\n"
|
|
" var n=ev.name,ts=ev.ts,v=ev.value;\n"
|
|
" var isNew=!td[n];\n"
|
|
" if(isNew){td[n]={pts:[],last:0,col:nc(),inC:false,tracing:false,forced:false};addOpt(n);updTraced();}\n"
|
|
" td[n].pts.push({x:ts,y:v});\n"
|
|
" if(td[n].pts.length>10000)td[n].pts.shift();\n"
|
|
" td[n].last=v;\n"
|
|
" } else if(ev.type==='log'){\n"
|
|
" appLog(ev.level,ev.msg);\n"
|
|
" } else if(ev.type==='status'){\n"
|
|
" isPaused=ev.paused;\n"
|
|
" updPause();\n"
|
|
" var ss=document.getElementById('ss');\n"
|
|
" if(ev.paused){\n"
|
|
" ss.textContent='PAUSED'+(ev.gam?' at '+ev.gam:'')+(ev.remaining?' ('+ev.remaining+'step)':'');\n"
|
|
" document.getElementById('sdot').className='dot pause';\n"
|
|
" } else {\n"
|
|
" ss.textContent='';\n"
|
|
" document.getElementById('sdot').className='dot ok';\n"
|
|
" }\n"
|
|
" } else if(ev.type==='discover'){\n"
|
|
" sigs=ev.signals||[];\n"
|
|
" buildSel();\n"
|
|
" } else if(ev.type==='tree'){\n"
|
|
" renderTree(ev.tree);\n"
|
|
" }\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Chart ---\n"
|
|
"function initChart(){\n"
|
|
" var ctx=document.getElementById('mc').getContext('2d');\n"
|
|
" chart=new Chart(ctx,{\n"
|
|
" type:'line',\n"
|
|
" data:{datasets:[]},\n"
|
|
" options:{\n"
|
|
" animation:false,responsive:true,maintainAspectRatio:false,parsing:false,\n"
|
|
" plugins:{legend:{display:true,position:'bottom',\n"
|
|
" labels:{color:'#a6adc8',boxWidth:12,font:{size:10},\n"
|
|
" generateLabels:function(ch){return ch.data.datasets.map(function(ds,i){\n"
|
|
" return {text:ds.label.split('.').pop(),fillStyle:ds.borderColor,\n"
|
|
" strokeStyle:ds.borderColor,lineWidth:0,datasetIndex:i};});}},\n"
|
|
" onClick:function(e,li){remFromChart(chart.data.datasets[li.datasetIndex].label);}\n"
|
|
" }},\n"
|
|
" scales:{\n"
|
|
" x:{type:'linear',ticks:{color:'#6c7086',maxTicksLimit:8,\n"
|
|
" callback:function(v){return (v/1000).toFixed(1)+'s';}},\n"
|
|
" grid:{color:'#313244'}},\n"
|
|
" y:{ticks:{color:'#6c7086'},grid:{color:'#313244'}}\n"
|
|
" }\n"
|
|
" }\n"
|
|
" });\n"
|
|
" resizeChart();\n"
|
|
" window.addEventListener('resize',resizeChart);\n"
|
|
"}\n"
|
|
"\n"
|
|
"function resizeChart(){\n"
|
|
" var a=document.getElementById('ca');\n"
|
|
" var c=document.getElementById('mc');\n"
|
|
" c.width=a.clientWidth;c.height=a.clientHeight;\n"
|
|
" if(chart)chart.resize();\n"
|
|
"}\n"
|
|
"\n"
|
|
"function updChart(){\n"
|
|
" if(!chart)return;\n"
|
|
" var keys=Object.keys(cds);\n"
|
|
" if(keys.length===0)return;\n"
|
|
" // Find the latest timestamp across all charted signals for follow mode\n"
|
|
" var latestTs=0;\n"
|
|
" for(var i=0;i<keys.length;i++){\n"
|
|
" var t=td[keys[i]];\n"
|
|
" if(t&&t.pts.length>0){var lt=t.pts[t.pts.length-1].x;if(lt>latestTs)latestTs=lt;}\n"
|
|
" }\n"
|
|
" for(var i=0;i<keys.length;i++){\n"
|
|
" var n=keys[i],d=cds[n],t=td[n];\n"
|
|
" if(!t)continue;\n"
|
|
" if(follow){\n"
|
|
" var pts=[],minT=latestTs-winMs;\n"
|
|
" for(var j=0;j<t.pts.length;j++){if(t.pts[j].x>=minT)pts.push(t.pts[j]);}\n"
|
|
" chart.data.datasets[d].data=pts;\n"
|
|
" } else {\n"
|
|
" chart.data.datasets[d].data=t.pts.slice();\n"
|
|
" }\n"
|
|
" }\n"
|
|
" chart.update('none');\n"
|
|
"}\n"
|
|
"setInterval(function(){if(Object.keys(cds).length>0)updChart();tickValues();},100);\n"
|
|
"\n"
|
|
"function addToChart(){\n"
|
|
" var n=document.getElementById('sigsel').value;\n"
|
|
" if(!n||cds.hasOwnProperty(n))return;\n"
|
|
" if(!td[n])td[n]={pts:[],last:0,col:nc(),inC:false,tracing:false,forced:false};\n"
|
|
" var col=td[n].col,idx=chart.data.datasets.length;\n"
|
|
" cds[n]=idx;td[n].inC=true;td[n].tracing=true;\n"
|
|
" chart.data.datasets.push({label:n,data:[],borderColor:col,\n"
|
|
" backgroundColor:col+'20',borderWidth:1.5,pointRadius:0,tension:0});\n"
|
|
" chart.update('none');updTraced();\n"
|
|
" cmd('TRACE '+n+' 1');\n"
|
|
"}\n"
|
|
"\n"
|
|
"function addByName(n){\n"
|
|
" if(!n||cds.hasOwnProperty(n))return;\n"
|
|
" if(!td[n])td[n]={pts:[],last:0,col:nc(),inC:false,tracing:false,forced:false};\n"
|
|
" var col=td[n].col,idx=chart.data.datasets.length;\n"
|
|
" cds[n]=idx;td[n].inC=true;td[n].tracing=true;\n"
|
|
" chart.data.datasets.push({label:n,data:[],borderColor:col,\n"
|
|
" backgroundColor:col+'20',borderWidth:1.5,pointRadius:0,tension:0});\n"
|
|
" chart.update('none');updTraced();\n"
|
|
" cmd('TRACE '+n+' 1');\n"
|
|
"}\n"
|
|
"\n"
|
|
"function dragStart(ev,n){ev.dataTransfer.setData('text',n);}\n"
|
|
"function dropOnChart(ev){ev.preventDefault();var n=ev.dataTransfer.getData('text');if(n)addByName(n);}\n"
|
|
"\n"
|
|
"function remFromChart(n){\n"
|
|
" if(!cds.hasOwnProperty(n))return;\n"
|
|
" var idx=cds[n];\n"
|
|
" chart.data.datasets.splice(idx,1);\n"
|
|
" delete cds[n];\n"
|
|
" var ks=Object.keys(cds);\n"
|
|
" for(var i=0;i<ks.length;i++){if(cds[ks[i]]>idx)cds[ks[i]]--;}\n"
|
|
" if(td[n])td[n].inC=false;\n"
|
|
" chart.update('none');updTraced();\n"
|
|
"}\n"
|
|
"\n"
|
|
"function clearChart(){\n"
|
|
" var ks=Object.keys(cds);\n"
|
|
" for(var i=0;i<ks.length;i++){if(td[ks[i]])td[ks[i]].inC=false;}\n"
|
|
" chart.data.datasets=[];cds={};\n"
|
|
" chart.update('none');updTraced();\n"
|
|
"}\n"
|
|
"\n"
|
|
"function toggleFollow(){\n"
|
|
" follow=!follow;\n"
|
|
" document.getElementById('fbtn').className=follow?'act':'';\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Traced list ---\n"
|
|
"function escId(s){return String(s).replace(/[^a-zA-Z0-9]/g,'_');}\n"
|
|
"function updTraced(){\n"
|
|
" var h='',ks=Object.keys(td);\n"
|
|
" for(var i=0;i<ks.length;i++){\n"
|
|
" var n=ks[i],t=td[n];\n"
|
|
" var v=typeof t.last==='number'?t.last.toPrecision(5):String(t.last);\n"
|
|
" var sn=n.split('.').pop();\n"
|
|
" h+='<div class=\"ti\" draggable=\"true\" ondragstart=\"dragStart(event,\\''+escJ(n)+'\\')\">'\n"
|
|
" h+='<div class=\"tc\" style=\"background:'+t.col+'\"></div>';\n"
|
|
" h+='<div class=\"tnm\" title=\"'+escH(n)+'\">'+escH(sn)+'</div>';\n"
|
|
" h+='<div class=\"tv\" id=\"tv_'+escId(n)+'\">'+escH(v)+'</div>';\n"
|
|
" h+='<div class=\"titbs\">';\n"
|
|
" if(t.inC)h+='<button class=\"tb\" onclick=\"remFromChart(\\''+escJ(n)+'\\')\">✕</button>';\n"
|
|
" else h+='<button class=\"tb\" onclick=\"addByName(\\''+escJ(n)+'\\')\">▶</button>';\n"
|
|
" if(t.tracing)h+='<button class=\"tb\" title=\"Untrace\" onclick=\"untraceN(\\''+escJ(n)+'\\')\">T×</button>';\n"
|
|
" if(t.forced) h+='<button class=\"tb\" title=\"Unforce\" onclick=\"doUnforceN(\\''+escJ(n)+'\\')\">F×</button>';\n"
|
|
" else h+='<button class=\"tb\" onclick=\"openFrc(\\''+escJ(n)+'\\')\">F</button>';\n"
|
|
" h+='</div></div>';\n"
|
|
" }\n"
|
|
" document.getElementById('traced').innerHTML=h;\n"
|
|
"}\n"
|
|
"function untraceN(n){cmd('TRACE '+n+' 0');if(td[n])td[n].tracing=false;updTraced();}\n"
|
|
"function doUnforceN(n){cmd('UNFORCE '+n);if(td[n])td[n].forced=false;updTraced();}\n"
|
|
"function tickValues(){\n"
|
|
" var ks=Object.keys(td);\n"
|
|
" for(var i=0;i<ks.length;i++){\n"
|
|
" var n=ks[i],t=td[n];\n"
|
|
" var el=document.getElementById('tv_'+escId(n));\n"
|
|
" if(el){var v=typeof t.last==='number'?t.last.toPrecision(5):String(t.last);el.textContent=v;}\n"
|
|
" }\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Signal select ---\n"
|
|
"function buildSel(){\n"
|
|
" var s=document.getElementById('sigsel');\n"
|
|
" s.innerHTML='<option value=\"\">-- pick --</option>';\n"
|
|
" for(var i=0;i<sigs.length;i++){\n"
|
|
" s.innerHTML+='<option value=\"'+escH(sigs[i].name)+'\">'+escH(sigs[i].name)+'</option>';\n"
|
|
" }\n"
|
|
"}\n"
|
|
"function addOpt(n){\n"
|
|
" var s=document.getElementById('sigsel');\n"
|
|
" for(var i=0;i<s.options.length;i++){if(s.options[i].value===n)return;}\n"
|
|
" s.innerHTML+='<option value=\"'+escH(n)+'\">'+escH(n)+'</option>';\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Log ---\n"
|
|
"function appLog(lv,msg){\n"
|
|
" var f={DEBUG:document.getElementById('fdbg').checked,\n"
|
|
" INFO:document.getElementById('finf').checked,\n"
|
|
" WARNING:document.getElementById('fwrn').checked,\n"
|
|
" ERROR:document.getElementById('ferr').checked};\n"
|
|
" if(lv==='Information')lv='INFO';\n"
|
|
" else if(lv==='Warning')lv='WARNING';\n"
|
|
" else if(lv==='Debug')lv='DEBUG';\n"
|
|
" else if(lv==='FatalError'||lv==='Error'||lv==='WARN')lv='ERROR';\n"
|
|
" if(!f[lv])return;\n"
|
|
" var d=document.createElement('div');\n"
|
|
" d.className='le l'+lv;\n"
|
|
" var now=new Date();\n"
|
|
" var ts=now.toTimeString().split(' ')[0]+'.'+String(now.getMilliseconds()).padStart(3,'0');\n"
|
|
" d.textContent='['+ts+']['+lv.substring(0,4)+'] '+msg;\n"
|
|
" lc.appendChild(d);\n"
|
|
" if(lc.children.length>500)lc.removeChild(lc.firstChild);\n"
|
|
" lc.scrollTop=lc.scrollHeight;\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Tree ---\n"
|
|
"function renderTree(node){\n"
|
|
" tnodes=[];threads=[];\n"
|
|
" var c=document.getElementById('tree');\n"
|
|
" c.innerHTML='';\n"
|
|
" if(!node)return;\n"
|
|
" renderNode(node,c,0,'');\n"
|
|
" var dl=document.getElementById('thrnodes');\n"
|
|
" dl.innerHTML='';\n"
|
|
" for(var i=0;i<threads.length;i++){\n"
|
|
" var op=document.createElement('option');op.value=threads[i];dl.appendChild(op);\n"
|
|
" }\n"
|
|
"}\n"
|
|
"function renderNode(node,parent,depth,pathPfx){\n"
|
|
" var fullPath=pathPfx?(pathPfx+'.'+node.Name):node.Name;\n"
|
|
" var isRoot=(node.Class==='ObjectRegistryDatabase');\n"
|
|
" if(isRoot)fullPath='';\n"
|
|
" var isSig=node.IsTraceable||node.IsForcable;\n"
|
|
" if(!isRoot&&fullPath&&!isSig)tnodes.push(fullPath);\n"
|
|
" if(node.Class==='RealTimeThread'&&node.Name)threads.push(node.Name);\n"
|
|
" var div=document.createElement('div');\n"
|
|
" div.className='tn-node';\n"
|
|
" var row=document.createElement('div');\n"
|
|
" row.className='tr';\n"
|
|
" row.style.paddingLeft=(3+depth*13)+'px';\n"
|
|
" var hasCh=node.Children&&node.Children.length>0;\n"
|
|
" var tog=document.createElement('span');\n"
|
|
" tog.className='tog';\n"
|
|
" if(hasCh){\n"
|
|
" tog.textContent='\\u25b8';\n"
|
|
" tog.onclick=function(){\n"
|
|
" var ch=div.querySelector('.tch');\n"
|
|
" if(ch){ch.style.display=ch.style.display==='none'?'':'none';\n"
|
|
" tog.textContent=ch.style.display==='none'?'\\u25b8':'\\u25be';}\n"
|
|
" };\n"
|
|
" }\n"
|
|
" var ico=document.createElement('span');\n"
|
|
" ico.className='ico';\n"
|
|
" ico.textContent=isSig?'\\u25c6':(hasCh?'\\u25c9':'\\u25cb');\n"
|
|
" ico.style.color=isSig?'var(--green)':(hasCh?'var(--blue)':'var(--ov)');\n"
|
|
" var nm=document.createElement('span');\n"
|
|
" nm.className='tn'+(isSig?' sig':'');\n"
|
|
" nm.textContent=node.Name;\n"
|
|
" nm.title=(node.Class||'')+(node.Type?' ['+node.Type+']':'');\n"
|
|
" row.appendChild(tog);row.appendChild(ico);row.appendChild(nm);\n"
|
|
" if(isSig){\n"
|
|
" var btns=document.createElement('span');\n"
|
|
" btns.className='tbtns';\n"
|
|
" var fp=fullPath;\n"
|
|
" if(node.IsTraceable){\n"
|
|
" addBtn(btns,'T','Trace',function(){if(!td[fp])td[fp]={pts:[],last:0,col:nc(),inC:false,tracing:false,forced:false};td[fp].tracing=true;cmd('TRACE '+fp+' 1');updTraced();});\n"
|
|
" addBtn(btns,'\\u25b6','Plot',function(){addByName(fp);});\n"
|
|
" }\n"
|
|
" if(node.IsForcable){\n"
|
|
" addBtn(btns,'F','Force',function(){openFrc(fp);});\n"
|
|
" addBtn(btns,'B','Break',function(){openBrk(fp);});\n"
|
|
" }\n"
|
|
" addBtn(btns,'M','Monitor',function(){openMon(fp);});\n"
|
|
" row.appendChild(btns);\n"
|
|
" }\n"
|
|
" div.appendChild(row);\n"
|
|
" if(hasCh){\n"
|
|
" var chDiv=document.createElement('div');\n"
|
|
" chDiv.className='tch';\n"
|
|
" for(var i=0;i<node.Children.length;i++){\n"
|
|
" renderNode(node.Children[i],chDiv,depth+1,isRoot?'':fullPath);\n"
|
|
" }\n"
|
|
" div.appendChild(chDiv);\n"
|
|
" }\n"
|
|
" parent.appendChild(div);\n"
|
|
"}\n"
|
|
"function addBtn(parent,lbl,title,fn){\n"
|
|
" var b=document.createElement('button');\n"
|
|
" b.className='tb';b.textContent=lbl;b.title=title;\n"
|
|
" b.onclick=fn;parent.appendChild(b);\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Commands ---\n"
|
|
"function cmd(c){\n"
|
|
" fetch('/api/command',{method:'POST',headers:{'Content-Type':'text/plain'},body:c})\n"
|
|
" .then(function(r){return r.text();})\n"
|
|
" .then(function(txt){\n"
|
|
" if(c.indexOf('DISCOVER')===0){\n"
|
|
" try{\n"
|
|
" var clean=txt.replace(/\\nOK DISCOVER\\n?$/,'');\n"
|
|
" var r=JSON.parse(clean);\n"
|
|
" if(r.Signals){sigs=r.Signals;buildSel();}\n"
|
|
" }catch(e){}\n"
|
|
" } else if(c.indexOf('TREE')===0){\n"
|
|
" try{renderTree(JSON.parse(txt.replace(/\\nOK TREE\\n?$/,'')));}\n"
|
|
" catch(e){appLog('ERROR','Tree parse: '+e);}\n"
|
|
" } else if(c.indexOf('STEP_STATUS')===0){\n"
|
|
" try{\n"
|
|
" var clean=txt.replace(/\\nOK STEP_STATUS\\n?$/,'');\n"
|
|
" var st=JSON.parse(clean);\n"
|
|
" var ev={type:'status',paused:st.Paused,gam:st.PausedAtGam,remaining:st.StepRemaining};\n"
|
|
" handle(ev);\n"
|
|
" }catch(e){}\n"
|
|
" }\n"
|
|
" })\n"
|
|
" .catch(function(e){appLog('ERROR','cmd failed: '+e);});\n"
|
|
"}\n"
|
|
"\n"
|
|
"function togglePause(){\n"
|
|
" cmd(isPaused?'RESUME':'PAUSE');\n"
|
|
"}\n"
|
|
"function updPause(){\n"
|
|
" var b=document.getElementById('pbtn');\n"
|
|
" b.textContent=isPaused?'Resume':'Pause';\n"
|
|
" b.className=isPaused?'danger':'';\n"
|
|
"}\n"
|
|
"function doStep(){\n"
|
|
" var n=document.getElementById('sn').value||'1';\n"
|
|
" var t=document.getElementById('sthr').value;\n"
|
|
" var c='STEP '+n;if(t)c+=' '+t;\n"
|
|
" cmd(c);\n"
|
|
"}\n"
|
|
"\n"
|
|
"// --- Modals ---\n"
|
|
"function openFrc(n){curSig=n;document.getElementById('frcn').textContent=n;\n"
|
|
" document.getElementById('frcv').value='';showM('frcm');}\n"
|
|
"function doForce(){var v=document.getElementById('frcv').value;\n"
|
|
" if(v!==''){cmd('FORCE '+curSig+' '+v);if(td[curSig])td[curSig].forced=true;}\n"
|
|
" closeM('frcm');updTraced();}\n"
|
|
"function doUnforce(){cmd('UNFORCE '+curSig);if(td[curSig])td[curSig].forced=false;closeM('frcm');updTraced();}\n"
|
|
"\n"
|
|
"function openBrk(n){curSig=n;document.getElementById('brkn').textContent=n;showM('brkm');}\n"
|
|
"function doBreak(){var op=document.getElementById('brkop').value;\n"
|
|
" var t=document.getElementById('brkthr').value;\n"
|
|
" cmd('BREAK '+curSig+' '+op+' '+t);closeM('brkm');}\n"
|
|
"function doClrBreak(){cmd('BREAK '+curSig+' OFF');closeM('brkm');}\n"
|
|
"\n"
|
|
"function openMon(n){curSig=n;document.getElementById('monn').textContent=n;showM('monm');}\n"
|
|
"function doMonitor(){var p=document.getElementById('monp').value||'100';\n"
|
|
" cmd('MONITOR SIGNAL '+curSig+' '+p);closeM('monm');}\n"
|
|
"function doUnmonitor(){cmd('UNMONITOR SIGNAL '+curSig);closeM('monm');}\n"
|
|
"\n"
|
|
"function openMsg(){\n"
|
|
" var dl=document.getElementById('msgnodes');\n"
|
|
" dl.innerHTML='';\n"
|
|
" for(var i=0;i<tnodes.length;i++){\n"
|
|
" var op=document.createElement('option');op.value=tnodes[i];dl.appendChild(op);\n"
|
|
" }\n"
|
|
" showM('msgm');\n"
|
|
"}\n"
|
|
"function doMsg(){var d=document.getElementById('msgd').value;\n"
|
|
" var f=document.getElementById('msgf').value;\n"
|
|
" var p=document.getElementById('msgp').value;\n"
|
|
" var c='MSG '+d+' '+f+' 0';if(p)c+=' '+p.replace(/\\n/g,' ');\n"
|
|
" cmd(c);closeM('msgm');}\n"
|
|
"\n"
|
|
"function showM(id){document.getElementById(id).className='mo show';}\n"
|
|
"function closeM(id){document.getElementById(id).className='mo';}\n"
|
|
"document.querySelectorAll('.mo').forEach(function(el){\n"
|
|
" el.addEventListener('click',function(e){if(e.target===el)closeM(el.id);});\n"
|
|
"});\n"
|
|
"\n"
|
|
"// --- Utils ---\n"
|
|
"function escH(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"');}\n"
|
|
"function escJ(s){return String(s).replace(/\\\\/g,'\\\\\\\\').replace(/'/g,\"\\\\'\");}\n"
|
|
"\n"
|
|
"// Init\n"
|
|
"initChart();\n"
|
|
"connect();\n"
|
|
"</script>\n"
|
|
"</body>\n"
|
|
"</html>\n";
|
|
// clang-format on
|
|
|
|
} // namespace MARTe
|
|
|
|
#endif // WEBUI_H
|