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

Commit d1b6b64

Browse files
hlxidhlxid
authored
Merge pull request #205 from codeoverflow-org/feature/183-debughelper
Added debug helper service.
2 parents 8b29117 + 107c632 commit d1b6b64

File tree

12 files changed

+765
-0
lines changed

12 files changed

+765
-0
lines changed

‎nodecg-io-debug/dashboard/debug-helper.css

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.container {
2+
display: inline-block;
3+
border: 1px dashed rgb(64, 64, 64);
4+
background-color: rgb(44, 44, 44);
5+
padding: 0;
6+
margin: 10px;
7+
min-width: 200px;
8+
min-height: 100px;
9+
box-shadow: 6px 5px 15px 3px rgba(0, 0, 0, 0.52);
10+
}
11+
12+
.containerHead {
13+
display: block;
14+
color: #92d6d6;
15+
padding-top: 1px;
16+
font-size: large;
17+
border-bottom: 1px dashed rgb(64, 64, 64);
18+
background-color: rgb(55, 55, 55);
19+
}
20+
21+
.containerTitle {
22+
font-weight: bold;
23+
}
24+
25+
.containerEvent {
26+
font-style: italic;
27+
float: right;
28+
margin-left: 30px;
29+
}
30+
31+
.containerBody {
32+
padding-top: 10px;
33+
padding-bottom: 10px;
34+
font-size: large;
35+
}
36+
37+
.containerHead,
38+
.containerBody {
39+
padding-left: 10px;
40+
padding-right: 10px;
41+
}
42+
43+
body {
44+
float: left;
45+
display: flex;
46+
flex-wrap: wrap;
47+
}
48+
49+
button {
50+
border: 1px solid gray;
51+
color: white;
52+
background-color: rgb(70, 70, 70);
53+
font-size: large;
54+
}
55+
56+
button:active {
57+
background-color: rgb(90, 90, 90);
58+
}
59+
60+
#event_click button,
61+
#event_bool button {
62+
height: 80px;
63+
width: 80px;
64+
}
65+
66+
#event_number button {
67+
height: 30px;
68+
padding-left: 15px;
69+
padding-right: 15px;
70+
}
71+
72+
.button1 {
73+
background-color: #45586e;
74+
}
75+
.button2 {
76+
background-color: #4c6c78;
77+
}
78+
.button3 {
79+
background-color: #426161;
80+
}
81+
.button4 {
82+
background-color: #4c786b;
83+
}
84+
.button5 {
85+
background-color: #456e57;
86+
}
87+
88+
.button1:active {
89+
background-color: #506780;
90+
}
91+
.button2:active {
92+
background-color: #577c8a;
93+
}
94+
.button3:active {
95+
background-color: #4e7373;
96+
}
97+
.button4:active {
98+
background-color: #578a7b;
99+
}
100+
.button5:active {
101+
background-color: #508065;
102+
}
103+
104+
.smallInfo {
105+
font-size: smaller;
106+
}
107+
108+
input[type="number"] {
109+
font-size: larger;
110+
color: white;
111+
font-family: "Consolas", sans-serif;
112+
background-color: rgb(70, 70, 70);
113+
border: 1px solid rgb(20, 20, 20);
114+
width: 80px;
115+
}
116+
117+
.inlineContainer {
118+
margin-top: 10px;
119+
}
120+
121+
#number_input1_send,
122+
#text_oneline_send,
123+
#text_multiline_send,
124+
#list_list_send {
125+
padding: 5px !important;
126+
margin-left: 5px;
127+
}
128+
129+
input[type="range"] {
130+
width: 75%;
131+
margin-right: 20px;
132+
}
133+
134+
input[type="color"] {
135+
width: 80px;
136+
height: 80px;
137+
}
138+
139+
input[type="date"],
140+
input[type="datetime-local"] {
141+
font-size: larger;
142+
color: white;
143+
background-color: rgb(70, 70, 70);
144+
border: 1px solid rgb(20, 20, 20);
145+
}
146+
147+
input[type="text"],
148+
textarea {
149+
font-size: larger;
150+
color: white;
151+
background-color: rgb(70, 70, 70);
152+
border: 1px solid rgb(20, 20, 20);
153+
width: 200px;
154+
}
155+
156+
.area {
157+
resize: none;
158+
height: 100px;
159+
}
160+
161+
.lists {
162+
resize: none;
163+
height: 120px;
164+
}
165+
166+
.flex-fill {
167+
flex: 1;
168+
}
169+
170+
#instanceMonaco {
171+
height: 300px;
172+
width: 500px;
173+
font-size: larger;
174+
}

‎nodecg-io-debug/dashboard/debug-helper.html

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="debug-helper.css" />
5+
</head>
6+
7+
<body>
8+
<div class="container" id="event_click">
9+
<div class="containerHead">
10+
<span class="containerTitle">Clicks</span>
11+
<span class="containerEvent">onClick, onclick[1-5]</span>
12+
</div>
13+
<div class="containerBody">
14+
<button id="click_button1" class="button1">1</button>
15+
<button id="click_button2" class="button2">2</button>
16+
<button id="click_button3" class="button3">3</button>
17+
<button id="click_button4" class="button4">4</button>
18+
<button id="click_button5" class="button5">5</button>
19+
</div>
20+
</div>
21+
22+
<div class="container" id="event_number">
23+
<div class="containerHead">
24+
<span class="containerTitle">Numbers</span>
25+
<span class="containerEvent">onNumber</span>
26+
</div>
27+
<div class="containerBody">
28+
<button id="number_button1" class="button1">1</button>
29+
<button id="number_button10" class="button2">10</button>
30+
<button id="number_button100" class="button3">100</button>
31+
<button id="number_button1000" class="button4">1000</button>
32+
<button id="number_button10000" class="button5">10000</button>
33+
<div class="inlineContainer" style="display: flex">
34+
<input type="number" id="number_input1" value="1" />
35+
<button id="number_input1_send">Send</button>
36+
</div>
37+
<div class="inlineContainer">
38+
<input type="number" id="number_input2" value="-1" />
39+
<span class="smallInfo">(number sent automatically)</span>
40+
</div>
41+
</div>
42+
</div>
43+
44+
<div class="container" id="event_range">
45+
<div class="containerHead">
46+
<span class="containerTitle">Ranges</span>
47+
<span class="containerEvent">onRange(0to100|0to1|M1to1)</span>
48+
</div>
49+
<div class="containerBody">
50+
<input type="range" min="0" max="100" step="1" id="range_0to100" /><span id="range_0to100_label"
51+
>50</span
52+
>
53+
<div class="inlineContainer">
54+
<input type="range" min="0" max="1" step="0.001" id="range_0to1" /><span id="range_0to1_label"
55+
>0.5</span
56+
>
57+
</div>
58+
<div class="inlineContainer">
59+
<input type="range" min="-1" max="1" step="0.001" id="range_M1to1" /><span id="range_M1to1_label"
60+
>0</span
61+
>
62+
</div>
63+
</div>
64+
<script>
65+
function bindLabel(range) {
66+
document.querySelector("#range_" + range).addEventListener("input", (e) => {
67+
document.querySelector("#range_" + range + "_label").innerHTML = e.target.value;
68+
});
69+
}
70+
bindLabel("0to100");
71+
bindLabel("0to1");
72+
bindLabel("M1to1");
73+
</script>
74+
</div>
75+
76+
<div class="container" id="event_color">
77+
<div class="containerHead">
78+
<span class="containerTitle">Colors</span>
79+
<span class="containerEvent">onColor</span>
80+
</div>
81+
<div class="containerBody" style="text-align: center">
82+
<input type="color" id="color_color" />
83+
</div>
84+
</div>
85+
86+
<div class="container" id="event_date">
87+
<div class="containerHead">
88+
<span class="containerTitle">Date</span>
89+
<span class="containerEvent">onDate</span>
90+
</div>
91+
<div class="containerBody">
92+
<input type="date" id="date_date" />
93+
<div class="inlineContainer">
94+
<input type="datetime-local" id="date_datetime" value="2069-04-20T13:37" />
95+
</div>
96+
</div>
97+
<script>
98+
document.querySelector("#date_date").valueAsDate = new Date();
99+
</script>
100+
</div>
101+
102+
<div class="container" id="event_bool">
103+
<div class="containerHead">
104+
<span class="containerTitle">Booleans</span>
105+
<span class="containerEvent">onBool</span>
106+
</div>
107+
<div class="containerBody" style="text-align: center">
108+
<button id="bool_false" class="button1">false</button>
109+
<button id="bool_true" class="button5">true</button>
110+
</div>
111+
</div>
112+
113+
<div class="container" id="event_text">
114+
<div class="containerHead">
115+
<span class="containerTitle">Strings</span>
116+
<span class="containerEvent">onText</span>
117+
</div>
118+
<div class="containerBody">
119+
<div style="display: flex">
120+
<input type="text" id="text_oneline" />
121+
<button id="text_oneline_send">Send</button>
122+
</div>
123+
<div class="inlineContainer" style="display: flex">
124+
<textarea id="text_multiline" class="area"></textarea>
125+
<button id="text_multiline_send">Send</button>
126+
</div>
127+
</div>
128+
</div>
129+
130+
<div class="container" id="event_list">
131+
<div class="containerHead">
132+
<span class="containerTitle">Lists</span>
133+
<span class="containerEvent">onList</span>
134+
</div>
135+
<div class="containerBody">
136+
<div style="display: flex; margin-bottom: 5px">
137+
<textarea id="list_list" class="lists"></textarea>
138+
<button id="list_list_send">Send</button>
139+
</div>
140+
<span class="smallInfo">(List entries are comma separated)</span>
141+
</div>
142+
</div>
143+
144+
<div class="container" id="event_json">
145+
<div class="containerHead">
146+
<span class="containerTitle">JSON</span>
147+
<span class="containerEvent">onJSON</span>
148+
</div>
149+
<div class="containerBody">
150+
<div id="instanceMonaco"></div>
151+
<button id="json_send" style="margin-top: 5px">Send</button>
152+
153+
<script src="../monaco/monaco-editor/min/vs/loader.js"></script>
154+
<script>
155+
require.config({ paths: { vs: "../monaco/monaco-editor/min/vs" } });
156+
require(["vs/editor/editor.main"], onMonacoReady);
157+
158+
function onMonacoReady() {
159+
var jsonCode = ["{", ' "data": 42,', "}"].join("\n");
160+
161+
var model = monaco.editor.createModel(jsonCode, "json");
162+
163+
window.debugMonacoEditor = monaco.editor.create(document.getElementById("instanceMonaco"), {
164+
model: model,
165+
theme: "vs-dark",
166+
});
167+
}
168+
</script>
169+
</div>
170+
</div>
171+
172+
<script src="debug-helper.js"></script>
173+
</body>
174+
</html>

0 commit comments

Comments
 (0)