Skip to content
This repository was archived by the owner on Apr 13, 2025. It is now read-only.

Added debug helper service. #205

Merged
merged 12 commits into from
Mar 28, 2021
Merged

Added debug helper service. #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9935bb6
Added initial debug helper service.
sebinside Mar 5, 2021
3506a3d
Merge branch 'master' into feature/183-debughelper
hlxid Mar 12, 2021
3ab234b
Update deps from debug service to reflect #216
hlxid Mar 12, 2021
90a7df0
Ignore missing config when creating client of no configuration service
hlxid Mar 12, 2021
95d56f9
Don't require a config in debug service
hlxid Mar 12, 2021
b3d5537
Added debug helper frontend.
sebinside Mar 12, 2021
ef400b1
Add first debug helper server side handlers and client side messaging.
sebinside Mar 19, 2021
e6f393c
Finished debug helper.
sebinside Mar 26, 2021
614eff4
Merge branch 'master' into feature/183-debughelper
sebinside Mar 26, 2021
6e1add7
Updated versions.
sebinside Mar 26, 2021
3cf6042
Serve monaco-editor from debug root package without extra dashboard p…
hlxid Mar 28, 2021
107c632
Parse debug JSON instead of sending a string
hlxid Mar 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 174 additions & 0 deletions nodecg-io-debug/dashboard/debug-helper.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
.container {
display: inline-block;
border: 1px dashed rgb(64, 64, 64);
background-color: rgb(44, 44, 44);
padding: 0;
margin: 10px;
min-width: 200px;
min-height: 100px;
box-shadow: 6px 5px 15px 3px rgba(0, 0, 0, 0.52);
}

.containerHead {
display: block;
color: #92d6d6;
padding-top: 1px;
font-size: large;
border-bottom: 1px dashed rgb(64, 64, 64);
background-color: rgb(55, 55, 55);
}

.containerTitle {
font-weight: bold;
}

.containerEvent {
font-style: italic;
float: right;
margin-left: 30px;
}

.containerBody {
padding-top: 10px;
padding-bottom: 10px;
font-size: large;
}

.containerHead,
.containerBody {
padding-left: 10px;
padding-right: 10px;
}

body {
float: left;
display: flex;
flex-wrap: wrap;
}

button {
border: 1px solid gray;
color: white;
background-color: rgb(70, 70, 70);
font-size: large;
}

button:active {
background-color: rgb(90, 90, 90);
}

#event_click button,
#event_bool button {
height: 80px;
width: 80px;
}

#event_number button {
height: 30px;
padding-left: 15px;
padding-right: 15px;
}

.button1 {
background-color: #45586e;
}
.button2 {
background-color: #4c6c78;
}
.button3 {
background-color: #426161;
}
.button4 {
background-color: #4c786b;
}
.button5 {
background-color: #456e57;
}

.button1:active {
background-color: #506780;
}
.button2:active {
background-color: #577c8a;
}
.button3:active {
background-color: #4e7373;
}
.button4:active {
background-color: #578a7b;
}
.button5:active {
background-color: #508065;
}

.smallInfo {
font-size: smaller;
}

input[type="number"] {
font-size: larger;
color: white;
font-family: "Consolas", sans-serif;
background-color: rgb(70, 70, 70);
border: 1px solid rgb(20, 20, 20);
width: 80px;
}

.inlineContainer {
margin-top: 10px;
}

#number_input1_send,
#text_oneline_send,
#text_multiline_send,
#list_list_send {
padding: 5px !important;
margin-left: 5px;
}

input[type="range"] {
width: 75%;
margin-right: 20px;
}

input[type="color"] {
width: 80px;
height: 80px;
}

input[type="date"],
input[type="datetime-local"] {
font-size: larger;
color: white;
background-color: rgb(70, 70, 70);
border: 1px solid rgb(20, 20, 20);
}

input[type="text"],
textarea {
font-size: larger;
color: white;
background-color: rgb(70, 70, 70);
border: 1px solid rgb(20, 20, 20);
width: 200px;
}

.area {
resize: none;
height: 100px;
}

.lists {
resize: none;
height: 120px;
}

.flex-fill {
flex: 1;
}

#instanceMonaco {
height: 300px;
width: 500px;
font-size: larger;
}
174 changes: 174 additions & 0 deletions nodecg-io-debug/dashboard/debug-helper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="debug-helper.css" />
</head>

<body>
<div class="container" id="event_click">
<div class="containerHead">
<span class="containerTitle">Clicks</span>
<span class="containerEvent">onClick, onclick[1-5]</span>
</div>
<div class="containerBody">
<button id="click_button1" class="button1">1</button>
<button id="click_button2" class="button2">2</button>
<button id="click_button3" class="button3">3</button>
<button id="click_button4" class="button4">4</button>
<button id="click_button5" class="button5">5</button>
</div>
</div>

<div class="container" id="event_number">
<div class="containerHead">
<span class="containerTitle">Numbers</span>
<span class="containerEvent">onNumber</span>
</div>
<div class="containerBody">
<button id="number_button1" class="button1">1</button>
<button id="number_button10" class="button2">10</button>
<button id="number_button100" class="button3">100</button>
<button id="number_button1000" class="button4">1000</button>
<button id="number_button10000" class="button5">10000</button>
<div class="inlineContainer" style="display: flex">
<input type="number" id="number_input1" value="1" />
<button id="number_input1_send">Send</button>
</div>
<div class="inlineContainer">
<input type="number" id="number_input2" value="-1" />
<span class="smallInfo">(number sent automatically)</span>
</div>
</div>
</div>

<div class="container" id="event_range">
<div class="containerHead">
<span class="containerTitle">Ranges</span>
<span class="containerEvent">onRange(0to100|0to1|M1to1)</span>
</div>
<div class="containerBody">
<input type="range" min="0" max="100" step="1" id="range_0to100" /><span id="range_0to100_label"
>50</span
>
<div class="inlineContainer">
<input type="range" min="0" max="1" step="0.001" id="range_0to1" /><span id="range_0to1_label"
>0.5</span
>
</div>
<div class="inlineContainer">
<input type="range" min="-1" max="1" step="0.001" id="range_M1to1" /><span id="range_M1to1_label"
>0</span
>
</div>
</div>
<script>
function bindLabel(range) {
document.querySelector("#range_" + range).addEventListener("input", (e) => {
document.querySelector("#range_" + range + "_label").innerHTML = e.target.value;
});
}
bindLabel("0to100");
bindLabel("0to1");
bindLabel("M1to1");
</script>
</div>

<div class="container" id="event_color">
<div class="containerHead">
<span class="containerTitle">Colors</span>
<span class="containerEvent">onColor</span>
</div>
<div class="containerBody" style="text-align: center">
<input type="color" id="color_color" />
</div>
</div>

<div class="container" id="event_date">
<div class="containerHead">
<span class="containerTitle">Date</span>
<span class="containerEvent">onDate</span>
</div>
<div class="containerBody">
<input type="date" id="date_date" />
<div class="inlineContainer">
<input type="datetime-local" id="date_datetime" value="2069-04-20T13:37" />
</div>
</div>
<script>
document.querySelector("#date_date").valueAsDate = new Date();
</script>
</div>

<div class="container" id="event_bool">
<div class="containerHead">
<span class="containerTitle">Booleans</span>
<span class="containerEvent">onBool</span>
</div>
<div class="containerBody" style="text-align: center">
<button id="bool_false" class="button1">false</button>
<button id="bool_true" class="button5">true</button>
</div>
</div>

<div class="container" id="event_text">
<div class="containerHead">
<span class="containerTitle">Strings</span>
<span class="containerEvent">onText</span>
</div>
<div class="containerBody">
<div style="display: flex">
<input type="text" id="text_oneline" />
<button id="text_oneline_send">Send</button>
</div>
<div class="inlineContainer" style="display: flex">
<textarea id="text_multiline" class="area"></textarea>
<button id="text_multiline_send">Send</button>
</div>
</div>
</div>

<div class="container" id="event_list">
<div class="containerHead">
<span class="containerTitle">Lists</span>
<span class="containerEvent">onList</span>
</div>
<div class="containerBody">
<div style="display: flex; margin-bottom: 5px">
<textarea id="list_list" class="lists"></textarea>
<button id="list_list_send">Send</button>
</div>
<span class="smallInfo">(List entries are comma separated)</span>
</div>
</div>

<div class="container" id="event_json">
<div class="containerHead">
<span class="containerTitle">JSON</span>
<span class="containerEvent">onJSON</span>
</div>
<div class="containerBody">
<div id="instanceMonaco"></div>
<button id="json_send" style="margin-top: 5px">Send</button>

<script src="../monaco/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: "../monaco/monaco-editor/min/vs" } });
require(["vs/editor/editor.main"], onMonacoReady);

function onMonacoReady() {
var jsonCode = ["{", ' "data": 42,', "}"].join("\n");

var model = monaco.editor.createModel(jsonCode, "json");

window.debugMonacoEditor = monaco.editor.create(document.getElementById("instanceMonaco"), {
model: model,
theme: "vs-dark",
});
}
</script>
</div>
</div>

<script src="debug-helper.js"></script>
</body>
</html>
Loading