TC
/
RemdesKVM


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A basic Hello World HTML page with metadata and OpenGraph headers">
    <meta name="author" content="Your Name">
    <title>Hello World</title>
    
    <!-- OpenGraph Metadata -->
    <meta property="og:title" content="Hello World">
    <meta property="og:description" content="A basic Hello World HTML page with metadata and OpenGraph headers">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://example.com">
    <meta property="og:image" content="http://example.com/image.jpg">
</head>
<body>
    <h1>Hello World</h1>
    <p>Welcome to my website!</p>
    <button id="startButton">Start</button>
    <button id="stopButton">Stop</button>
    <script>
        let socket;
        let protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
        let port = window.location.port ? window.location.port : (protocol === 'wss' ? 443 : 80);
        let socketURL = `${protocol}://${window.location.hostname}:${port}/hid`;
        document.getElementById('startButton').addEventListener('click', function() {
            const socketUrl = socketURL;
            socket = new WebSocket(socketUrl);

            socket.addEventListener('open', function(event) {
                console.log('WebSocket is connected.');
            });

            socket.addEventListener('message', function(event) {
                console.log('Message from server ', event.data);
            });

            document.addEventListener('keydown', handleKeyDown);
            document.addEventListener('keyup', handleKeyUp);
        });

        document.getElementById('stopButton').addEventListener('click', function() {
            if (socket) {
                socket.close();
                console.log('WebSocket is disconnected.');
            }

            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('keyup', handleKeyUp);
        });

        function isNumpadEvent(event) {
            return event.location === 3;
        }

        function handleKeyDown(event) {
            event.preventDefault();
            const key = event.key;
            if (socket){
                if (key == "Shift" || key == "Control" || key == "Alt"){
                    if (event.location == 1){
                        socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "LEFT_" + key }));
                    } else {
                        socket.send(JSON.stringify({ t: 'kw', s: 'kd', d:  "RIGHT_" + key }));
                    }
                }else if (isNumpadEvent(event)){
                    socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: "NUMPAD_" + key }));
                }else{
                    socket.send(JSON.stringify({ t: 'kw', s: 'kd', d: key }));
                }
            }
        }

        function handleKeyUp(event) {
            event.preventDefault();
            const key = event.key;
            if (socket) {
                if (key == "Shift" || key == "Control" || key == "Alt") {
                    if (event.location == 1) {
                        socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "LEFT_" + key }));
                    } else {
                        socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "RIGHT_" + key }));
                    }
                }else if (isNumpadEvent(event)){
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: "NUMPAD_" + key }));
                }else if (key == "NumLock"){
                   //Do nothing, release is hardware offloaded
                } else {
                    socket.send(JSON.stringify({ t: 'kw', s: 'ku', d: key }));
                }
            }
        }

        
    </script>
</body>
</html>