First client view builded

This commit is contained in:
Nomi Nonsense (Nonszy) 2024-03-10 21:03:53 +07:00
parent 4bc42d6ae9
commit 23e35cdd2c
16 changed files with 74 additions and 39 deletions

View File

@ -39,6 +39,10 @@ Arduino assembly guide also available in [johnny-five](https://github.com/rwaldr
npm start
```
4. If the board is connected try to open the client page in [https://localhost:3000/](https://localhost:3000/)
![Client page](./docs/client.png)
#### Other scripts
- You can see what ports are connected to the device by running `npm run ports` script.
@ -153,7 +157,7 @@ async function turnOnLed() {
| p | pin | `string` | true | Seleced pin |
| m | mode | `'input'`, `'output'`, `'servo'` | true | Pin Mode |
- **Method(s)**
- **Method**
`PATCH`
@ -214,7 +218,7 @@ async function turnOnLed() {
| p | pin | `string` | true | Seleced pin |
| a | act | `'on'`, `'off'`, `'high'`, `'low'` | true | Action |
- **Method(s)**
- **Method**
`PATCH`
@ -290,7 +294,7 @@ async function turnOnLed() {
}
```
- **Method(s)**
- **Method**
`PATCH`

BIN
docs/client.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 855 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -1,16 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firmata Arduino Client</title>
<link rel="stylesheet" href="style/main.css">
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lunar Vein: Arduino</title>
<script type="module" crossorigin src="/assets/index-CQw488sl.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B3QNZa_F.css">
</head>
<body>
<section>
<h2>LED</h2>
<button id="toggleLed1">ON/OFF</button>
</section>
<script src="./scripts/main.js"></script>
<div id="root"></div>
</body>
</html>

View File

@ -1,17 +0,0 @@
document.getElementById('toggleLed1').addEventListener('mousedown', async () => {
const res = await fetch('/api-arduino/led/13/on', {
method: 'PATCH'
});
const data = await res.json();
console.log(data);
})
document.getElementById('toggleLed1').addEventListener('mouseup', async () => {
const res = await fetch('/api-arduino/led/13/off', {
method: 'PATCH'
});
const data = await res.json();
console.log(data);
})

1
src/client/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,4 +1,5 @@
import http from 'node:http';
import path from 'node:path';
import express from 'express';
import cors from 'cors';
import { Server } from 'socket.io';
@ -24,11 +25,9 @@ const host: string = 'localhost';
const port: number = 3000;
// Express middleware
app.use(cors({
origin: "*"
}));
app.use(cors({ origin: "*" }));
app.use(express.json());
app.use(express.static('client'));
app.use(express.static(path.join(__dirname, 'client')));
// Socket.io event handlers
io.on('connection', socketHandler);