Skip to content

Commit

Permalink
update dev page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mchilli
mchilli committed Nov 14, 2023
1 parent ca71d11 commit 181e031
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 94 deletions.
106 changes: 53 additions & 53 deletions webui/dev/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,59 +7,59 @@
<script src="Connection.js"></script>
</head>
<body>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
<span id="connection-status">Disconnected</span>
<br />
<br />
<span>Response:</span>
<br />
<textarea name="data" id="data" cols="80" rows="40"></textarea>
<br />
<br />
<button class="simple-cmd" data-cmd="get_macros">load Macros</button>
<button id="send" data-cmd="">send Macros</button>
<button class="simple-cmd" data-cmd="save_macros">save Macros</button>
<button class="simple-cmd" data-cmd="enable_usb">enable USB</button>
<button class="simple-cmd" data-cmd="soft_reset">Softreset</button>
<button class="simple-cmd" data-cmd="hard_reset">Hardreset</button>

<div style="display: flex; flex-wrap: wrap">
<div>
<div style="margin-bottom: 8px">
<button id="connection">Connect</button>
<button class="simple-cmd" data-cmd="get_macros" disabled>Download</button>
<button id="send" disabled>Upload</button>
<button class="simple-cmd" data-cmd="save_macros" disabled>Store</button>
<button class="simple-cmd" data-cmd="enable_usb" disabled>enable USB</button>
<button class="simple-cmd" data-cmd="soft_reset" disabled>Softreset</button>
<button class="simple-cmd" data-cmd="hard_reset" disabled>Hardreset</button>
</div>
<textarea name="data" id="data" cols="80" rows="40"></textarea>
</div>
<pre>
Macro Types:
"group": a group containing more groups or macros
"macro": a macro that will be executed
"blank": a blank spacer for formating

Keycodes (kc):
A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z,
ZERO, ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE,
ENTER, RETURN, ESCAPE, BACKSPACE, TAB, SPACEBAR, SPACE, MINUS, EQUALS, LEFT_BRACKET, RIGHT_BRACKET,
BACKSLASH, POUND, SEMICOLON, QUOTE, GRAVE_ACCENT, COMMA, PERIOD, FORWARD_SLASH, CAPS_LOCK,
F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12, F13, F14, F15, F16, F17, F18, F19, F20, F21, F22,
F23, F24, PRINT_SCREEN, SCROLL_LOCK, PAUSE, INSERT, HOME, PAGE_UP, DELETE, END, PAGE_DOWN,
RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, KEYPAD_NUMLOCK, KEYPAD_FORWARD_SLASH, KEYPAD_ASTERISK,
KEYPAD_MINUS, KEYPAD_PLUS, KEYPAD_ENTER, KEYPAD_ONE, KEYPAD_TWO, KEYPAD_THREE, KEYPAD_FOUR, KEYPAD_FIVE,
KEYPAD_SIX, KEYPAD_SEVEN, KEYPAD_EIGHT, KEYPAD_NINE, KEYPAD_ZERO, KEYPAD_PERIOD, KEYPAD_BACKSLASH,
APPLICATION, POWER, KEYPAD_EQUALS, LEFT_CONTROL, CONTROL, LEFT_SHIFT, SHIFT, LEFT_ALT, ALT, OPTION,
LEFT_GUI, GUI, WINDOWS, COMMAND, RIGHT_CONTROL, RIGHT_SHIFT, RIGHT_ALT, RIGHT_GUI

Consumer Control Codes (ccc):
MUTE, VOLUME_INCREMENT, VOLUME_DECREMENT, RECORD, FAST_FORWARD, REWIND, SCAN_NEXT_TRACK,
SCAN_PREVIOUS_TRACK, STOP, EJECT, PLAY_PAUSE, BRIGHTNESS_DECREMENT, BRIGHTNESS_INCREMENT

Play Tone (tone):
'frequency': the frequency of the tone (e.g. 392 | 951 | 1253)
'duration': the duration in seconds (e.g. 0.1 | 1.2)

Mouse Events (mse):
'x': horizontally Mouse movement (e.g. 10 | -10)
'y': vertically Mouse movement (e.g. 10 | -10)
'w': Mousewheel movement (e.g. 1 | -1)
'b': LEFT, MIDDLE, RIGHT

System Functions (sys):
enable_USB, soft_reset, hard_reset, close_group, go_to_root, decrease_brightness, increase_brightness

Serial Connection Commands:
get_macros, set_macros, save_macros, enable_usb, soft_reset, hard_reset
</pre>
</div>
<script src="main.js"></script>

<pre style="position: absolute; top: 0; right: 0">
Macro Types:
"group": a group containing more groups or macros
"macro": a macro that will be executed
"blank": a blank spacer for formating

Keycodes (kc):
A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z,
ZERO, ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE,
ENTER, RETURN, ESCAPE, BACKSPACE, TAB, SPACEBAR, SPACE, MINUS, EQUALS, LEFT_BRACKET, RIGHT_BRACKET,
BACKSLASH, POUND, SEMICOLON, QUOTE, GRAVE_ACCENT, COMMA, PERIOD, FORWARD_SLASH, CAPS_LOCK,
F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12, F13, F14, F15, F16, F17, F18, F19, F20, F21, F22,
F23, F24, PRINT_SCREEN, SCROLL_LOCK, PAUSE, INSERT, HOME, PAGE_UP, DELETE, END, PAGE_DOWN,
RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, KEYPAD_NUMLOCK, KEYPAD_FORWARD_SLASH, KEYPAD_ASTERISK,
KEYPAD_MINUS, KEYPAD_PLUS, KEYPAD_ENTER, KEYPAD_ONE, KEYPAD_TWO, KEYPAD_THREE, KEYPAD_FOUR, KEYPAD_FIVE,
KEYPAD_SIX, KEYPAD_SEVEN, KEYPAD_EIGHT, KEYPAD_NINE, KEYPAD_ZERO, KEYPAD_PERIOD, KEYPAD_BACKSLASH,
APPLICATION, POWER, KEYPAD_EQUALS, LEFT_CONTROL, CONTROL, LEFT_SHIFT, SHIFT, LEFT_ALT, ALT, OPTION,
LEFT_GUI, GUI, WINDOWS, COMMAND, RIGHT_CONTROL, RIGHT_SHIFT, RIGHT_ALT, RIGHT_GUI

Consumer Control Codes (ccc):
MUTE, VOLUME_INCREMENT, VOLUME_DECREMENT, RECORD, FAST_FORWARD, REWIND, SCAN_NEXT_TRACK,
SCAN_PREVIOUS_TRACK, STOP, EJECT, PLAY_PAUSE, BRIGHTNESS_DECREMENT, BRIGHTNESS_INCREMENT

Mouse Events (mse):
'x': horizontally Mouse movement (e.g. 10 | -10)
'y': vertically Mouse movement (e.g. 10 | -10)
'w': Mousewheel movement (e.g. 1 | -1)
'b': LEFT, MIDDLE, RIGHT

System Functions (sys):
enable_USB, soft_reset, hard_reset, decrease_brightness, increase_brightness

Serial Connection Commands:
get_macros, set_macros, save_macros, enable_usb, soft_reset, hard_reset
</pre>
</body>
</html>
79 changes: 38 additions & 41 deletions webui/dev/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,67 @@
var connection;
var connectionStatus = document.querySelector('#connection-status');
var inputData = document.querySelector('#data');
let connection = {};
const connectionBtn = document.querySelector('#connection');
const sendBtn = document.querySelector('#send');
const cmdBtns = document.querySelectorAll('.simple-cmd');
const data = document.querySelector('#data');

function payloadHandler(payload) {
let response;

if ('ERR' in payload) {
console.warn('Error: ' + payload.ERR);
} else if ('ACK' in payload) {
switch (payload.ACK) {
case 'macros':
inputData.value = JSON.stringify(payload.CONTENT, null, 2);
response = JSON.stringify(payload.CONTENT);
break;
default:
response = payload.ACK;
data.value = JSON.stringify(payload.CONTENT, null, 2);
break;
}
console.log('Response: ' + response);
}
}

function connectionChanged(connected) {
if (connected) {
connectionStatus.innerHTML = 'Connected';
} else {
connectionStatus.innerHTML = 'Disonnected';
}
function disableBtns(disable) {
sendBtn.disabled = disable;
cmdBtns.forEach((element) => {
element.disabled = disable;
});
}

document.querySelector('#connect').addEventListener('click', async () => {
if ('serial' in navigator) {
await navigator.serial
.requestPort()
.then((port) => {
connection = new SerialConnectionHandler({
port: port,
onReceived: payloadHandler,
onConnectionChanged: connectionChanged,
});
})
.catch((e) => {
console.warn('Error: No port selected');
});
}
});

document.querySelector('#disconnect').addEventListener('click', () => {
connectionBtn.addEventListener('click', async (event) => {
if (connection.connected) {
connection.close();
data.value = '';
connectionBtn.innerText = 'Connect';
disableBtns(true);
} else {
if ('serial' in navigator) {
await navigator.serial
.requestPort()
.then((port) => {
connection = new SerialConnectionHandler({
port: port,
onReceived: payloadHandler,
});
connectionBtn.innerText = 'Disonnected';
disableBtns(false);
})
.catch((e) => {
console.warn('Error: No port selected');
});
}
}
inputData.value = '';
});

document.querySelector('#send').addEventListener('click', async () => {
if (connection.connected && inputData.value != '') {
sendBtn.addEventListener('click', async () => {
if (data.value != '') {
try {
await connection.send({
command: 'set_macros',
content: JSON.parse(inputData.value),
content: JSON.parse(data.value),
});
} catch (e) {
console.error('can`t parse json string');
}
}
});

document.querySelectorAll('.simple-cmd').forEach((element) => {
cmdBtns.forEach((element) => {
element.addEventListener('click', async () => {
await connection.send({
command: element.dataset.cmd,
Expand All @@ -76,5 +71,7 @@ document.querySelectorAll('.simple-cmd').forEach((element) => {

// triggers when the device is unplugged
navigator.serial.addEventListener('disconnect', (event) => {
inputData.value = '';
connection = {};
data.value = '';
connectionBtn.innerText = 'Connect';
});

0 comments on commit 181e031

Please sign in to comment.