pico-web-mouse/index.html at main · programandoconro/pico-web-mouse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pico Web Mouse</title>
  </head>
  <body>
    <h1>Pico Web Mouse</h1>
    <div class="keyboard-container">
      <input id="keyboard" class="keyboard" />
      <button id="write" type="button">Write</button>
      <button id="enter" type="button">Enter</button>
    </div>
    <div class="frame" id="frame"></div>
    <div class="buttons">
      <button id="left-button" type="button">Left click</button>
      <button id="right-button" type="button">Right click</button>
    </div>
    <small
      >*Touch and move inside the above frame to make your mouse move. You can
      click by tapping the screen</small
    >
  </body>
</html>

<style>
  body {
    background-color: black;
    color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .frame {
    border: solid 1px whitesmoke;
    height: 400px;
    width: 95%;
    margin: 10px;
  }
  .buttons {
    display: flex;
    width: 95%;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    padding-top: 0px;
  }
  button {
    height: 30px;
    background-color: black;
    color: whitesmoke;
    border: solid whitesmoke 1px;
    border-radius: 5px;
  }
  .keyboard-container {
    display: flex;
    justify-content: space-between;
    width: 95%;
    height: 30px;
  }
  .keyboard-container .keyboard {
    width: 70%;
  }
</style>

<script>
  console.log("Attempting to connect to server");

  const url = `ws://${window.location.host}/websocket`;
  const webSocket = new WebSocket(url);

  webSocket.addEventListener("open", () => {
    console.log("Connected to server");
  });

  webSocket.addEventListener("close", () => {
    console.log("Connection closed");
  });

  webSocket.addEventListener("error", (error) => {
    console.log("WebSocket error:", error);
  });

  webSocket.addEventListener("message", (event) => {
    console.log("Message from server:", event.data);
  });

  const frame = document.getElementById("frame");

  const prevPos = { prevX: undefined, prevY: undefined };
  frame.addEventListener("touchmove", ({ touches }) => {
    const { clientX, clientY } = touches[0];
    const newX = Math.trunc(clientX);
    const newY = Math.trunc(clientY);
    const { prevX, prevY } = prevPos;
    if (prevX !== newX && prevY !== newY) {
      const diffX = newX - prevX;
      const diffY = newY - prevY;
      webSocket.send(
        JSON.stringify({ type: "move", value: `${diffX} ${diffY}` })
      );
      prevPos.prevX = newX;
      prevPos.prevY = newY;
    }
  });

  frame.addEventListener("touchend", ({ touches }) => {
    // reset movement when touch ended
    prevPos.prevX = undefined;
    prevPos.prevY = undefined;
  });

  frame.addEventListener("click", () => {
    webSocket.send(JSON.stringify({ type: "click", value: "left" }));
  });

  const leftButton = document.getElementById("left-button");
  const rightButton = document.getElementById("right-button");

  leftButton.addEventListener("click", () => {
    webSocket.send(JSON.stringify({ type: "click", value: "left" }));
  });

  rightButton.addEventListener("click", () => {
    webSocket.send(JSON.stringify({ type: "click", value: "right" }));
  });

  const keyboard = document.getElementById("keyboard");

  let inputValue = "";
  keyboard.addEventListener("input", (e) => {
    inputValue = e.target.value;
  });
  const write = document.getElementById("write");
  write.addEventListener("click", () => {
    webSocket.send(JSON.stringify({ type: "write", value: inputValue }));
  });

  const enter = document.getElementById("enter");
  enter.addEventListener("click", () => {
    webSocket.send(JSON.stringify({ type: "enter", value: "Enter" }));
  });
</script>