EyeTrackVR-Docs/docs/_includes/custom/misc/serialmonitor.html
2022-06-29 18:55:22 +02:00

293 lines
7.2 KiB
HTML

<style>
.serial-monitor-inputs {
color: rgb(179, 255, 179);
background-color: rgb(102, 86, 86);
border: 1px solid;
border-color: #696 #363 #363 #696;
}
[type="checkbox"] {
vertical-align: middle;
}
.terminalButtons {
height: 10px;
width: 10px;
border-radius: 50%;
border: 1px solid #000;
position: relative;
top: 6px;
left: 6px;
background-color: #ff3b47;
border-color: #9d252b;
display: inline-block;
}
.terminalMinimize {
left: 11px;
background-color: #ffc100;
border-color: #9d802c;
}
.terminalZoom {
left: 16px;
background-color: #00d742;
border-color: #049931;
}
.terminalMenu {
width: calc(100% - 20px);
box-sizing: border-box;
height: 25px;
background-color: #bbb;
margin: 0 auto;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.terminalScreen {
background-color: rgb(88, 92, 92);
box-sizing: border-box;
width: calc(100% - 20px);
height: calc(100% - 120px);
margin: 0 auto;
padding: 20px;
font-family: monospace;
white-space: pre;
overflow: scroll;
border-style: solid;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.line1 {
color: #9CD9F0;
-webkit-animation: type .5s 1s steps(20, end) forwards;
-moz-animation: type .5s 1s steps(20, end) forwards;
-o-animation: type .5s 1s steps(20, end) forwards;
animation: type .5s 1s steps(20, end) forwards;
}
.cursor1 {
-webkit-animation: blink 1s 2s 2 forwards;
-moz-animation: blink 1s 2s 2 forwards;
-o-animation: blink 1s 2s 2 forwards;
animation: blink 1s 2s 2 forwards;
}
.line2 {
color: #CDEE69;
-webkit-animation: type .5s 4.25s steps(20, end) forwards;
-moz-animation: type .5s 4.25s steps(20, end) forwards;
-o-animation: type .5s 4.25s steps(20, end) forwards;
animation: type .5s 4.25s steps(20, end) forwards;
}
.cursor2 {
-webkit-animation: blink 1s 5.25s 2 forwards;
-moz-animation: blink 1s 5.25s 2 forwards;
-o-animation: blink 1s 5.25s 2 forwards;
animation: blink 1s 5.25s 2 forwards;
}
.line3 {
color: #E09690;
-webkit-animation: type .5s 7.5s steps(20, end) forwards;
-moz-animation: type .5s 7.5s steps(20, end) forwards;
-o-animation: type .5s 7.5s steps(20, end) forwards;
animation: type .5s 7.5s steps(20, end) forwards;
}
.cursor3 {
-webkit-animation: blink 1s 8.5s 2 forwards;
-moz-animation: blink 1s 8.5s 2 forwards;
-o-animation: blink 1s 8.5s 2 forwards;
animation: blink 1s 8.5s 2 forwards;
}
.line4 {
color: #fff;
-webkit-animation: type .5s 10.75s steps(20, end) forwards;
-moz-animation: type .5s 10.75s steps(20, end) forwards;
-o-animation: type .5s 10.75s steps(20, end) forwards;
animation: type .5s 10.75s steps(20, end) forwards;
}
.cursor4 {
-webkit-animation: blink 1s 11.5s infinite;
-moz-animation: blink 1s 8.5s infinite;
-o-animation: blink 1s 8.5s infinite;
animation: blink 1s 8.5s infinite;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes type {
to {
width: 17em;
}
}
@-moz-keyframes type {
to {
width: 17em;
}
}
@-o-keyframes type {
to {
width: 17em;
}
}
@keyframes type {
to {
width: 17em;
}
}
</style>
<div>
<button class="btn btn-mode fs-2 mb-1 mb-md-0 mr-0" onclick="connectSerial()">Connect</button>
Baud:
<input class="serial-monitor-inputs" type="text" id="baud" list="baudList" style="width: 10ch;"
onclick="this.value = ''" onchange="localStorage.baud = this.value">
<datalist id="baudList">
<option value="110">110</option>
<option value="300">300</option>
<option value="600">600</option>
<option value="1200">1200</option>
<option value="2400">2400</option>
<option value="4800">4800</option>
<option value="9600">9600</option>
<option value="14400">14400</option>
<option value="19200">19200</option>
<option value="38400">38400</option>
<option value="57600">57600</option>
<option value="115200">115200</option>
<option value="128000">128000</option>
<option value="256000">256000</option>
</datalist>
<button class="btn btn-mode fs-2 mb-1 mb-md-1 mr-0" onclick="serialResultsDiv.innerHTML = '';"
style="width:60px">Clear</button>
<br>
<br>
<label for="carriageReturn">
<input type="checkbox" id="carriageReturn" onclick="localStorage.carriageReturn = this.checked;"
checked>Carriage Return
</label>
<label for="addLine">
<input type="checkbox" id="addLine" onclick="localStorage.addLine = this.checked;" checked>New Line
</label>
<label for="echoOn">
<input type="checkbox" id="echoOn" onclick="localStorage.echoOn = this.checked;" checked>Echo Enabled
</label>
<br>
<br>
<div class=terminalMenu>
<div class="terminalButtons terminalClose"></div>
<div class="terminalButtons terminalMinimize"></div>
<div class="terminalButtons terminalZoom"></div>
</div>
<div class="terminalScreen">
<p class="line4"><span id="serialResults"></span><span class="cursor4">_</span></p>
</div>
<input class="serial-monitor-inputs" type="text" id="lineToSend" style="width:calc(100% - 165px)">
<button class="btn btn-mode fs-2 mb-1 mb-md-1 mr-0" onclick="sendSerialLine()" style="width:60px">Send</button>
<button class="btn btn-mode fs-2 mb-1 mb-md-1 mr-0" onclick="sendCharacterNumber()" style="width:100px">Send
Char</button>
<br>
</div>
<script src="{{ 'assets/js/custom/serialmonitor/serialmonitor.js' | relative_url }}" type="text/javascript"></script>