mirror of
https://github.com/nasa/trick.git
synced 2024-12-24 23:36:43 +00:00
660 lines
26 KiB
HTML
660 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
<title>WS-API_VariableServer</title>
|
|
|
|
|
|
<style type="text/css">
|
|
body {
|
|
font-family: Helvetica, arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
background-color: white;
|
|
padding: 30px; }
|
|
|
|
body > *:first-child {
|
|
margin-top: 0 !important; }
|
|
body > *:last-child {
|
|
margin-bottom: 0 !important; }
|
|
|
|
a {
|
|
color: #4183C4; }
|
|
a.absent {
|
|
color: #cc0000; }
|
|
a.anchor {
|
|
display: block;
|
|
padding-left: 30px;
|
|
margin-left: -30px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0; }
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 20px 0 10px;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
-webkit-font-smoothing: antialiased;
|
|
cursor: text;
|
|
position: relative; }
|
|
|
|
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
|
|
text-decoration: none; }
|
|
|
|
h1 tt, h1 code {
|
|
font-size: inherit; }
|
|
|
|
h2 tt, h2 code {
|
|
font-size: inherit; }
|
|
|
|
h3 tt, h3 code {
|
|
font-size: inherit; }
|
|
|
|
h4 tt, h4 code {
|
|
font-size: inherit; }
|
|
|
|
h5 tt, h5 code {
|
|
font-size: inherit; }
|
|
|
|
h6 tt, h6 code {
|
|
font-size: inherit; }
|
|
|
|
h1 {
|
|
font-size: 28px;
|
|
color: black; }
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
border-bottom: 1px solid #cccccc;
|
|
color: black; }
|
|
|
|
h3 {
|
|
font-size: 18px; }
|
|
|
|
h4 {
|
|
font-size: 16px; }
|
|
|
|
h5 {
|
|
font-size: 14px; }
|
|
|
|
h6 {
|
|
color: #777777;
|
|
font-size: 14px; }
|
|
|
|
p, blockquote, ul, ol, dl, li, table, pre {
|
|
margin: 15px 0; }
|
|
|
|
hr {
|
|
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
|
|
border: 0 none;
|
|
color: #cccccc;
|
|
height: 4px;
|
|
padding: 0;
|
|
}
|
|
|
|
body > h2:first-child {
|
|
margin-top: 0;
|
|
padding-top: 0; }
|
|
body > h1:first-child {
|
|
margin-top: 0;
|
|
padding-top: 0; }
|
|
body > h1:first-child + h2 {
|
|
margin-top: 0;
|
|
padding-top: 0; }
|
|
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
|
|
margin-top: 0;
|
|
padding-top: 0; }
|
|
|
|
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
|
|
margin-top: 0;
|
|
padding-top: 0; }
|
|
|
|
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
|
|
margin-top: 0; }
|
|
|
|
li p.first {
|
|
display: inline-block; }
|
|
li {
|
|
margin: 0; }
|
|
ul, ol {
|
|
padding-left: 30px; }
|
|
|
|
ul :first-child, ol :first-child {
|
|
margin-top: 0; }
|
|
|
|
dl {
|
|
padding: 0; }
|
|
dl dt {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
padding: 0;
|
|
margin: 15px 0 5px; }
|
|
dl dt:first-child {
|
|
padding: 0; }
|
|
dl dt > :first-child {
|
|
margin-top: 0; }
|
|
dl dt > :last-child {
|
|
margin-bottom: 0; }
|
|
dl dd {
|
|
margin: 0 0 15px;
|
|
padding: 0 15px; }
|
|
dl dd > :first-child {
|
|
margin-top: 0; }
|
|
dl dd > :last-child {
|
|
margin-bottom: 0; }
|
|
|
|
blockquote {
|
|
border-left: 4px solid #dddddd;
|
|
padding: 0 15px;
|
|
color: #777777; }
|
|
blockquote > :first-child {
|
|
margin-top: 0; }
|
|
blockquote > :last-child {
|
|
margin-bottom: 0; }
|
|
|
|
table {
|
|
padding: 0;border-collapse: collapse; }
|
|
table tr {
|
|
border-top: 1px solid #cccccc;
|
|
background-color: white;
|
|
margin: 0;
|
|
padding: 0; }
|
|
table tr:nth-child(2n) {
|
|
background-color: #f8f8f8; }
|
|
table tr th {
|
|
font-weight: bold;
|
|
border: 1px solid #cccccc;
|
|
margin: 0;
|
|
padding: 6px 13px; }
|
|
table tr td {
|
|
border: 1px solid #cccccc;
|
|
margin: 0;
|
|
padding: 6px 13px; }
|
|
table tr th :first-child, table tr td :first-child {
|
|
margin-top: 0; }
|
|
table tr th :last-child, table tr td :last-child {
|
|
margin-bottom: 0; }
|
|
|
|
img {
|
|
max-width: 100%; }
|
|
|
|
span.frame {
|
|
display: block;
|
|
overflow: hidden; }
|
|
span.frame > span {
|
|
border: 1px solid #dddddd;
|
|
display: block;
|
|
float: left;
|
|
overflow: hidden;
|
|
margin: 13px 0 0;
|
|
padding: 7px;
|
|
width: auto; }
|
|
span.frame span img {
|
|
display: block;
|
|
float: left; }
|
|
span.frame span span {
|
|
clear: both;
|
|
color: #333333;
|
|
display: block;
|
|
padding: 5px 0 0; }
|
|
span.align-center {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both; }
|
|
span.align-center > span {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin: 13px auto 0;
|
|
text-align: center; }
|
|
span.align-center span img {
|
|
margin: 0 auto;
|
|
text-align: center; }
|
|
span.align-right {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both; }
|
|
span.align-right > span {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin: 13px 0 0;
|
|
text-align: right; }
|
|
span.align-right span img {
|
|
margin: 0;
|
|
text-align: right; }
|
|
span.float-left {
|
|
display: block;
|
|
margin-right: 13px;
|
|
overflow: hidden;
|
|
float: left; }
|
|
span.float-left span {
|
|
margin: 13px 0 0; }
|
|
span.float-right {
|
|
display: block;
|
|
margin-left: 13px;
|
|
overflow: hidden;
|
|
float: right; }
|
|
span.float-right > span {
|
|
display: block;
|
|
overflow: hidden;
|
|
margin: 13px auto 0;
|
|
text-align: right; }
|
|
|
|
code, tt {
|
|
margin: 0 2px;
|
|
padding: 0 5px;
|
|
white-space: nowrap;
|
|
border: 1px solid #eaeaea;
|
|
background-color: #f8f8f8;
|
|
border-radius: 3px; }
|
|
|
|
pre code {
|
|
margin: 0;
|
|
padding: 0;
|
|
white-space: pre;
|
|
border: none;
|
|
background: transparent; }
|
|
|
|
.highlight pre {
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #cccccc;
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
overflow: auto;
|
|
padding: 6px 10px;
|
|
border-radius: 3px; }
|
|
|
|
pre {
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #cccccc;
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
overflow: auto;
|
|
padding: 6px 10px;
|
|
border-radius: 3px; }
|
|
pre code, pre tt {
|
|
background-color: transparent;
|
|
border: none; }
|
|
|
|
sup {
|
|
font-size: 0.83em;
|
|
vertical-align: super;
|
|
line-height: 0;
|
|
}
|
|
* {
|
|
-webkit-print-color-adjust: exact;
|
|
}
|
|
@media screen and (min-width: 914px) {
|
|
body {
|
|
width: 854px;
|
|
margin:0 auto;
|
|
}
|
|
}
|
|
@media print {
|
|
table, pre {
|
|
page-break-inside: avoid;
|
|
}
|
|
pre {
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style type="text/css">
|
|
/**
|
|
* prism.js default theme for JavaScript, CSS and HTML
|
|
* Based on dabblet (http://dabblet.com)
|
|
* @author Lea Verou
|
|
*/
|
|
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
color: black;
|
|
background: none;
|
|
text-shadow: 0 1px white;
|
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
line-height: 1.5;
|
|
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
tab-size: 4;
|
|
|
|
-webkit-hyphens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
|
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
|
text-shadow: none;
|
|
background: #b3d4fc;
|
|
}
|
|
|
|
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
|
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
|
text-shadow: none;
|
|
background: #b3d4fc;
|
|
}
|
|
|
|
@media print {
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*="language-"] {
|
|
padding: 1em;
|
|
margin: .5em 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
:not(pre) > code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
background: #f5f2f0;
|
|
}
|
|
|
|
/* Inline code */
|
|
:not(pre) > code[class*="language-"] {
|
|
padding: .1em;
|
|
border-radius: .3em;
|
|
white-space: normal;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.prolog,
|
|
.token.doctype,
|
|
.token.cdata {
|
|
color: slategray;
|
|
}
|
|
|
|
.token.punctuation {
|
|
color: #999;
|
|
}
|
|
|
|
.namespace {
|
|
opacity: .7;
|
|
}
|
|
|
|
.token.property,
|
|
.token.tag,
|
|
.token.boolean,
|
|
.token.number,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.deleted {
|
|
color: #905;
|
|
}
|
|
|
|
.token.selector,
|
|
.token.attr-name,
|
|
.token.string,
|
|
.token.char,
|
|
.token.builtin,
|
|
.token.inserted {
|
|
color: #690;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.entity,
|
|
.token.url,
|
|
.language-css .token.string,
|
|
.style .token.string {
|
|
color: #a67f59;
|
|
background: hsla(0, 0%, 100%, .5);
|
|
}
|
|
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword {
|
|
color: #07a;
|
|
}
|
|
|
|
.token.function {
|
|
color: #DD4A68;
|
|
}
|
|
|
|
.token.regex,
|
|
.token.important,
|
|
.token.variable {
|
|
color: #e90;
|
|
}
|
|
|
|
.token.important,
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1 id="toc_0">WS-API: VariableServer</h1>
|
|
|
|
<p><code>ws://localhost:8888/api/ws/VariableServer</code></p>
|
|
|
|
<h2 id="toc_1">Purpose</h2>
|
|
|
|
<p>JSON Variable Server</p>
|
|
|
|
<h2 id="toc_2">Client to Server Command Messages</h2>
|
|
|
|
<p>Add a Trick Variable to the current session.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_add",
|
|
"var_name" : string
|
|
}</code></pre></div>
|
|
|
|
<p>Stop sending periodic <code>var_list</code> messages (<em>see below</em>) from the server.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_pause" }</code></pre></div>
|
|
|
|
<p>Resume sending periodic <code>var_list</code> response messages from the server.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_unpause" }
|
|
</code></pre></div>
|
|
|
|
<p>Send one <code>var_list</code> message from the server.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_send" }</code></pre></div>
|
|
|
|
<p>Clear all variables from the current session, that is: undo all of the <code>var_add</code> commands.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_clear" }</code></pre></div>
|
|
|
|
<p>Disconnect from the variable server.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_exit" }</code></pre></div>
|
|
|
|
<p>Set the period (in milliseconds) at which <code>var_list</code> messages are sent form the server.</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "var_cycle",
|
|
"period" : integer
|
|
}</code></pre></div>
|
|
|
|
<p>Execute the given Python code in the host sim. </p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "python",
|
|
"pycode" : string
|
|
}</code></pre></div>
|
|
|
|
<p>Send the sie structure from the server. Response will be the <code>sie</code> response message (<em>below</em>).</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "sie" }</code></pre></div>
|
|
|
|
<p>Send the units for the given variable. Response will be the <code>units</code> response message (<em>below</em>).</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "cmd" : "units",
|
|
"var_name" : string
|
|
}</code></pre></div>
|
|
|
|
<h2 id="toc_3">Server to Client Response Messages</h2>
|
|
|
|
<p>Error Response</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "msg_type" : "error",
|
|
"error_text" : string
|
|
}</code></pre></div>
|
|
|
|
<p>Periodic response containing the values of variables requested by <code>var_add</code>. </p>
|
|
|
|
<div><pre><code class="language-javascript">{ "msg_type" : "var_list"
|
|
"time" : double
|
|
"values" : []
|
|
}</code></pre></div>
|
|
|
|
<p>Response to the <code>sie</code> command (<em>above</em>).</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "msg_type" : "sie",
|
|
"data" : string
|
|
}</code></pre></div>
|
|
|
|
<p>Response to the <code>units</code> command (<em>above</em>).</p>
|
|
|
|
<div><pre><code class="language-javascript">{ "msg_type" : "units",
|
|
"var_name" : string,
|
|
"data" : string
|
|
}</code></pre></div>
|
|
|
|
<h2 id="toc_4">Example Variable Server Client</h2>
|
|
|
|
<div><pre><code class="language-markup"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WS Experiments</title>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
table { border-collapse: collapse; width: 100%; }
|
|
th, td { text-align: left; padding: 8px; }
|
|
tr:nth-child(even){background-color: #f2f2f2}
|
|
th { background-color: #562399; color: white; }
|
|
</style>
|
|
<header>
|
|
</header>
|
|
|
|
<div class="variableDisplay"></div>
|
|
<table class="variables">
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</table>
|
|
|
|
<div id="output"></div>
|
|
<script type="text/javascript">
|
|
function log(s) {
|
|
var p = document.createElement("p");
|
|
p.style.wordWrap = "break-word";
|
|
p.textContent = s;
|
|
output.appendChild(p);
|
|
}
|
|
function sendMessage(msg) {
|
|
ws.send(msg);
|
|
}
|
|
// Interface to Trick WebSocket Variable Server
|
|
function setPeriod(period) {
|
|
sendMessage(`{"cmd":"var_cycle","period":${period}}`);
|
|
}
|
|
function addVarTableRow(name, value) {
|
|
// create a row in the table that contains two <td>s, one for the var_name and one for its value.
|
|
let tr = document.createElement('tr');
|
|
let td1 = document.createElement('td');
|
|
td1.textContent = `${name}`;
|
|
let td2 = document.createElement('td');
|
|
td2.textContent = `${value}`;
|
|
td2.className = "values";
|
|
tr.appendChild(td1);
|
|
tr.appendChild(td2);
|
|
varTable.appendChild(tr);
|
|
}
|
|
function addVariable(name, value) {
|
|
sendMessage(`{"cmd":"var_add","var_name": "${name}"}`);
|
|
addVarTableRow(name, value);
|
|
}
|
|
var varTable = document.querySelector('table.variables');
|
|
|
|
|
|
var ws = new WebSocket('ws://localhost:8888/api/ws/VariableServer');
|
|
ws.onopen = function(e) {
|
|
setPeriod(100);
|
|
addVarTableRow("Time", 0.0);
|
|
addVariable("dyn.cannon.pos[0]", 0.0);
|
|
addVariable("dyn.cannon.pos[1]", 0.0);
|
|
addVariable("dyn.cannon.vel[0]", 0.0);
|
|
addVariable("dyn.cannon.vel[1]", 0.0);
|
|
addVariable("dyn.cannon.time", 0.0);
|
|
addVariable("dyn.cannon.timeRate", 0.0);
|
|
addVariable("dyn.cannon.impact", 0.0);
|
|
addVariable("I.dont.exist", 0.0);
|
|
sendMessage("{\"cmd\":\"var_unpause\"}");
|
|
};
|
|
ws.onmessage = function(e) {
|
|
let msg = JSON.parse(e.data);
|
|
if (msg.msg_type == "values") {
|
|
let valueNodes = varTable.getElementsByClassName("values");
|
|
valueNodes[0].textContent = msg.time;
|
|
for (let i = 0; i < msg.values.length; i++ ) {
|
|
valueNodes[i+1].textContent = msg.values[i];
|
|
}
|
|
}
|
|
};
|
|
ws.onerror = function(e) {
|
|
console.log("WebSocket Error: " , e);
|
|
handleErrors(e);
|
|
};
|
|
ws.onclose = function(e) {
|
|
console.log("Connection closed", e);
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre></div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e){var t=n.util.type(e);switch(t){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=n.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return n.util.clone(e)})}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){r=r||n.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==t)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return n.languages.DFS(n.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,t,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],a||l),"Object"!==n.util.type(e[l])||r[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||r[n.util.objId(e[l])]||(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,r)):(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,r)))}},plugins:{},highlightAll:function(e,t){var a={callback:t,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var r,l=a.elements||document.querySelectorAll(a.selector),i=0;r=l[i++];)n.highlightElement(r,e===!0,a.callback)},highlightElement:function(t,a,r){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1],i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=t.textContent,u={element:t,language:l,grammar:i,code:s};if(!s||!i)return n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),a&&_self.Worker){var c=new Worker(n.filename);c.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},c.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(t),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},highlight:function(e,t,r){var l=n.tokenize(e,t);return a.stringify(n.util.encode(l),r)},tokenize:function(e,t){var a=n.Token,r=[e],l=t.rest;if(l){for(var i in l)t[i]=l[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var o=t[i];o="Array"===n.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],c=u.inside,g=!!u.lookbehind,h=!!u.greedy,f=0,d=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var m=r[p];if(r.length>e.length)break e;if(!(m instanceof a)){u.lastIndex=0;var y=u.exec(m),v=1;if(!y&&h&&p!=r.length-1){var b=r[p+1].matchedStr||r[p+1],k=m+b;if(p<r.length-2&&(k+=r[p+2].matchedStr||r[p+2]),u.lastIndex=0,y=u.exec(k),!y)continue;var w=y.index+(g?y[1].length:0);if(w>=m.length)continue;var _=y.index+y[0].length,P=m.length+b.length;if(v=3,P>=_){if(r[p+1].greedy)continue;v=2,k=k.slice(0,P)}m=k}if(y){g&&(f=y[1].length);var w=y.index+f,y=y[0].slice(f),_=w+y.length,S=m.slice(0,w),O=m.slice(_),j=[p,v];S&&j.push(S);var A=new a(i,c?n.tokenize(y,c):y,d,y,h);j.push(A),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",n.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|