388 lines
10 KiB
HTML
388 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
<title>AW410K RGB Configuration</title>
|
|
|
|
<style>
|
|
|
|
div.container > div {
|
|
display: block;
|
|
}
|
|
|
|
div.output {
|
|
width: 40em;
|
|
word-break: break-all;
|
|
}
|
|
|
|
div#configuration {
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
|
|
div.config {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div#keyboard {
|
|
display: inline-block;
|
|
background-color: #000000;
|
|
}
|
|
|
|
div#keys {
|
|
display: inline-block;
|
|
}
|
|
|
|
div.label {
|
|
width: 10em;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.key {
|
|
text-align:center;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
background-color: #dddddd;
|
|
margin: 1px;
|
|
width: 2.5em;
|
|
height: 3em;
|
|
font-size: 0.8em;
|
|
border-style: double;
|
|
border-color: #dddddd
|
|
}
|
|
|
|
div.selected {
|
|
border-style: double;
|
|
border-color: blue;
|
|
border-width: 2px;
|
|
}
|
|
|
|
div.blank {
|
|
opacity: 0;
|
|
}
|
|
|
|
input.byte {
|
|
width: 2em;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
var selected = [];
|
|
|
|
const keyboard_list = [
|
|
[
|
|
{id: "Escape", label: "ESC", width: 2},
|
|
{id: "", label: ""},
|
|
{id: "F1", label: "F1"},
|
|
{id: "F2", label: "F2"},
|
|
{id: "F3", label: "F3"},
|
|
{id: "F4", label: "F4"},
|
|
{id: "F5", label: "F5"},
|
|
{id: "F6", label: "F6"},
|
|
{id: "F7", label: "F7"},
|
|
{id: "F8", label: "F8"},
|
|
{id: "F9", label: "F9"},
|
|
{id: "F10", label: "F10"},
|
|
{id: "F11", label: "F11"},
|
|
{id: "F12", label: "F12"},
|
|
{id: "PrintScreen", label: "Print<br>Screen"},
|
|
{id: "ScrollLock", label: "Scroll<br>Lock"},
|
|
{id: "Pause", label: "Pause"},
|
|
{id: "", label: ""},
|
|
{id: "Mute", label: "Mute"},
|
|
{id: "VolumeDown", label: "Vol<br>Down"},
|
|
{id: "VolumeUp", label: "Vol<br>Up"}
|
|
],
|
|
[
|
|
{id: "Backquote", label: "~<br>`"},
|
|
{id: "Digit1", label: "!<br>1"},
|
|
{id: "Digit2", label: "@<br>2"},
|
|
{id: "Digit3", label: "#<br>3"},
|
|
{id: "Digit4", label: "$<br>4"},
|
|
{id: "Digit5", label: "%<br>5"},
|
|
{id: "Digit6", label: "^<br>6"},
|
|
{id: "Digit7", label: "&<br>7"},
|
|
{id: "Digit8", label: "*<br>8"},
|
|
{id: "Digit9", label: "(<br>9"},
|
|
{id: "Digit0", label: ")<br>0"},
|
|
{id: "Minus", label: "_<br>-"},
|
|
{id: "Equal", label: "+<br>="},
|
|
{id: "Backspace", label: "Backspace", width: 2},
|
|
{id: "Insert", label: "Insert" },
|
|
{id: "Home", label: "Home" },
|
|
{id: "PageUp", label: "Page<br>Up"},
|
|
{id: "NumLock", label: "Num"},
|
|
{id: "NumpadDivide", label: "/"},
|
|
{id: "NumpadMultiply", label: "*"},
|
|
{id: "NumpadSubtract", label: "-"}
|
|
],
|
|
[
|
|
{id: "Tab", label: "Tab", width: 1.5},
|
|
{id: "KeyQ", label: "Q"},
|
|
{id: "KeyW", label: "W"},
|
|
{id: "KeyE", label: "E"},
|
|
{id: "KeyR", label: "R"},
|
|
{id: "KeyT", label: "T"},
|
|
{id: "KeyY", label: "Y"},
|
|
{id: "KeyU", label: "U"},
|
|
{id: "KeyI", label: "I"},
|
|
{id: "KeyO", label: "O"},
|
|
{id: "KeyP", label: "P"},
|
|
{id: "BracketLeft", label: "{<br>["},
|
|
{id: "BracketRight", label: "}<br>]"},
|
|
{id: "Backslash", label: "|<br>\\", width: 1.5},
|
|
{id: "Delete", label: "Delete"},
|
|
{id: "End", label: "End"},
|
|
{id: "PageDown", label: "Page<br>Down"},
|
|
{id: "Numpad7", label: "Home<br>7"},
|
|
{id: "Numpad8", label: "Up<br>8"},
|
|
{id: "Numpad9", label: "PgUp<br>9"},
|
|
{id: "NumpadAdd", label: "+", height: 2.2}
|
|
],
|
|
[
|
|
{id: "CapsLock", label: "Caps<br>Lock", width: 2},
|
|
{id: "KeyA", label: "A"},
|
|
{id: "KeyS", label: "S"},
|
|
{id: "KeyD", label: "D"},
|
|
{id: "KeyF", label: "F"},
|
|
{id: "KeyG", label: "G"},
|
|
{id: "KeyH", label: "H"},
|
|
{id: "KeyJ", label: "J"},
|
|
{id: "KeyK", label: "K"},
|
|
{id: "KeyL", label: "L"},
|
|
{id: "Semicolon", label: ":<br>;"},
|
|
{id: "Quote", label: "\"<br>\'"},
|
|
{id: "Enter", label: "Enter", width: 2.2},
|
|
{id: "", label: "", width: 3.55},
|
|
{id: "Numpad4", label: "Left<br>4"},
|
|
{id: "Numpad5", label: "5"},
|
|
{id: "Numpad6", label: "Right<br>6"}
|
|
],
|
|
[
|
|
{id: "ShiftLeft", label: "Shift", width: 2.5},
|
|
{id: "KeyZ", label: "Z"},
|
|
{id: "KeyX", label: "X"},
|
|
{id: "KeyC", label: "C"},
|
|
{id: "KeyV", label: "V"},
|
|
{id: "KeyB", label: "B"},
|
|
{id: "KeyN", label: "N"},
|
|
{id: "KeyM", label: "M"},
|
|
{id: "Comma", label: "\<<br>,"},
|
|
{id: "Period", label: "\><br>."},
|
|
{id: "Slash", label: "?<br>/"},
|
|
{id: "ShiftRight", label: "Shift", width: 3},
|
|
{id: "", label: ""},
|
|
{id: "ArrowUp", label: "Up"},
|
|
{id: "", label: ""},
|
|
{id: "Numpad1", label: "End<br>1"},
|
|
{id: "Numpad2", label: "Down<br>2"},
|
|
{id: "Numpad3", label: "PgDn<br>3"},
|
|
{id: "NumpadEnter", label: "Enter", height: 2.2}
|
|
],
|
|
[
|
|
{id: "ControlLeft", label: "Control", width: 2},
|
|
{id: "MetaLeft", label: "Meta"},
|
|
{id: "AltLeft", label: "Alt", width: 1.5},
|
|
{id: "Space", label: "Space", width: 6.4},
|
|
{id: "AltRight", label: "Alt", width: 2},
|
|
{id: "MetaRight", label: "FN"},
|
|
{id: "ContextMenu", label:"Menu"},
|
|
{id: "ControlRight", label: "Control", width: 1.6},
|
|
{id: "ArrowLeft", label: "Left"},
|
|
{id: "ArrowDown", label: "Down"},
|
|
{id: "ArrowRight", label: "Right"},
|
|
{id: "Numpad0", label: "Ins<br>0", width: 2.2},
|
|
{id: "NumpadDecimal", label: "Del<br>."}
|
|
],
|
|
];
|
|
|
|
// initialize page and websocket connection on load
|
|
window.onload = (event) => {
|
|
createKeys("keyboard", keyboard_list);
|
|
|
|
socket = new WebSocket("ws://" + window.location.hostname + ":8080/");
|
|
socket.onmessage = function (event) { setColor(event.data); };
|
|
}
|
|
|
|
// macro for sending over websocket and reopening connection if closed
|
|
function sendreload(msg, func) {
|
|
if (socket.readyState == WebSocket.OPEN) {
|
|
socket.send(msg);
|
|
} else if (socket.readyState == WebSocket.CLOSED) {
|
|
socket = new WebSocket("ws://" + window.location.hostname + ":8080/");
|
|
socket.onmessage = function (event) { setColor(event.data); };
|
|
setTimeout( func, 10);
|
|
} else {
|
|
setTimeout( func, 10);
|
|
}
|
|
}
|
|
|
|
// toggle selection of pressed key
|
|
function pressKey(code) {
|
|
if (selected.includes(code)) {
|
|
selected.splice(selected.indexOf(code),1);
|
|
} else {
|
|
selected.push(code);
|
|
}
|
|
|
|
updateKeys(selected);
|
|
}
|
|
|
|
// update GUI with currently selected keys
|
|
function updateKeys(selected_keys) {
|
|
// update highlighting of selected keys
|
|
prev_keys = document.getElementsByClassName("selected");
|
|
for (let key of selected_keys) {
|
|
keyDiv = document.getElementById(key);
|
|
keyDiv.classList.add("selected");
|
|
}
|
|
for (let key of prev_keys) {
|
|
if (!selected_keys.includes(key.id)) {
|
|
key.classList.remove("selected");
|
|
}
|
|
}
|
|
|
|
// show updated list of selected keys
|
|
document.getElementById("keys").innerHTML = selected_keys;
|
|
// request color of selected key
|
|
getColor(selected_keys);
|
|
}
|
|
|
|
// create keyboard layout from array of keys
|
|
function createKeys(div_id, key_list) {
|
|
let keyboardDiv = document.getElementById(div_id);
|
|
for (let row of key_list) {
|
|
let newRow = document.createElement("div");
|
|
keyboardDiv.appendChild(newRow);
|
|
for (let key of row) {
|
|
let newDiv = document.createElement("div");
|
|
if (key.id) {
|
|
newDiv.id = key.id;
|
|
newDiv.innerHTML = key.label;
|
|
newDiv.className = "key";
|
|
newDiv.addEventListener("click", function () {
|
|
pressKey(key.id); });
|
|
} else {
|
|
newDiv.className = "key blank";
|
|
}
|
|
newRow.appendChild(newDiv);
|
|
if (key.width) {
|
|
newDiv.style = "width:" + (key.width*newDiv.clientWidth ) + "px;";
|
|
}
|
|
if (key.height) {
|
|
newDiv.style = "height:" + (key.height*newDiv.clientHeight ) + "px; float: right;";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// send new RGB data to host
|
|
function sendKeys(keys) {
|
|
if (selected.length > 0) {
|
|
let color = document.getElementById("rgb").value;
|
|
let adapt = document.getElementById("adaptive").checked ? 1:0;
|
|
sendreload("S," + color.substr(1,6) + "," + adapt + "," + keys, function () { sendKeys(keys); } );
|
|
}
|
|
}
|
|
|
|
// send save request to host
|
|
function save() {
|
|
sendreload("F,", function (event) { save(); } );
|
|
}
|
|
|
|
// send load request to host
|
|
function load() {
|
|
sendreload("L,", function (event) { load(); } );
|
|
}
|
|
|
|
// update RGB color of the color selector
|
|
function setColor(new_color) {
|
|
document.getElementById("rgb").value = new_color.substring(0,7);
|
|
let adapt = document.getElementById("adaptive");
|
|
if (new_color.substring(8,9) == "1") {
|
|
adapt.checked = false;
|
|
} else {
|
|
adapt.checked = true;
|
|
}
|
|
updateRGB();
|
|
}
|
|
|
|
// send request to retrieve color of first selected key
|
|
function getColor(keys) {
|
|
if (selected.length > 0) {
|
|
sendreload("G," + keys, function () { getColor(keys); } );
|
|
}
|
|
}
|
|
|
|
// update the individual R, G, B values when color is change from the palette
|
|
function updateRGB() {
|
|
let color = document.getElementById("rgb").value;
|
|
document.getElementById("red").value = parseInt(color.substring(1,3), 16);
|
|
document.getElementById("green").value = parseInt(color.substring(3,5), 16);
|
|
document.getElementById("blue").value = parseInt(color.substring(5,7), 16);
|
|
}
|
|
|
|
// update the color palette when individual R, G, B value is changed
|
|
function updateColor() {
|
|
// first make sure that individual channel values are between 0-255;
|
|
let red = document.getElementById("red");
|
|
let green = document.getElementById("green");
|
|
let blue = document.getElementById("blue");
|
|
|
|
for (let channel of [red, green, blue]) {
|
|
if (parseInt(channel.value) > 255) {
|
|
channel.value = 255;
|
|
} else if (parseInt(channel.value) < 0) {
|
|
channel.value = 0;
|
|
} else if ( isNaN(parseInt(channel.value)) ) {
|
|
// non-numerical value entered, set to default
|
|
channel.value = 128;
|
|
} else {
|
|
// make sure that value in box reflects what parser thinks
|
|
channel.value = parseInt(channel.value);
|
|
}
|
|
}
|
|
|
|
document.getElementById("rgb").value = "#" + parseInt(red.value).toString(16).padStart(2,"0") +
|
|
parseInt(green.value).toString(16).padStart(2,"0") + parseInt(blue.value).toString(16).padStart(2,"0");
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div id="keyboard"></div>
|
|
<div id="menu">
|
|
<div class="label">LED Settings</div>
|
|
<div class="output">Key(s): <div id="keys"></div></div>
|
|
<div id="configuration">
|
|
<div class="config">
|
|
Color: <input type="color" id="rgb" name="rgb" onchange="updateRGB()"><br>
|
|
Red: <input type="text" id="red" name="red" class="byte" pattern="[0-9]{1,2}" onchange="updateColor()"><br>
|
|
Green: <input type="text" id="green" name="green" class="byte" pattern="[0-9]{1,2}" onchange="updateColor()"><br>
|
|
Blue: <input type="text" id="blue" name="blue" class="byte" pattern="[0-9]{1,2}" onchange="updateColor()"><br>
|
|
Adaptive: <input type="checkbox" id="adaptive" name="adaptive"><br><br>
|
|
<button type="button" onclick="sendKeys(selected)">Set Color</button> <button type="button" onclick="getColor(selected)">Reset</button>
|
|
</div>
|
|
<div class="config">
|
|
<div class="label">Flash memory</div>
|
|
<div>
|
|
<button type="button" onclick="save()">Save</button>
|
|
<button type="button" onclick="load()">Load</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|