moniks_bot/client/index.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Contrôle du robot</title>
	</head>
	<body>
		<h1>Contrôle du robot sans fils</h1>
		<p>
			Cette page permet de contrôler le robot depuis un PC portable
			connecté au WiFi du robot. Elle est destinée aux personnes n'ayant
			pas de smartphone.
		</p>
		<h2>Paramètres de contrôle</h2>
		<p>
			Ici vous pourrez paramétrer les contrôles du robot, rentrer son
			adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle
			de rotation désiré.
		</p>
		<form class="settings" id="settings">
			<label>
				<span>Adresse IP du robot</span>
				<input
					type="text"
					name="ip-address"
					title="Adresse IP du robot (ex: 192.168.0.1)"
					pattern="\d+\.\d+\.\d+\.\d+(:\d+)?"
					placeholder="192.168.0.0"
					required
				/>
			</label>
			<button>Se connecter</button>
		</form>
		<div class="input-controls">
			<label>
				<span>Rotation en degrés</span>
				<input
					id="rotate-input"
					type="number"
					title="Rotation en degrés (-360° à 360°)"
					min="-360"
					max="360"
					step="1"
					placeholder="90"
				/>
			</label>
			<label>
				<span>Distance en cm</span>
				<input
					id="move-input"
					type="number"
					title="Distance en cm (-2^31 à 2^31)"
					min="-2147483647"
					step="1"
					max="2147483647"
					placeholder="10"
				/>
			</label>
		</div>
		<div class="touch-controls" id="touch-controls">
			<span class="placeholder"></span>
			<button title="Avancer" data-command="forward" data-value="2">
				⬆️
			</button>
			<span class="placeholder"></span>
			<button title="Tourner à gauche" data-command="left" data-value="5">
				⬅️
			</button>
			<button title="Arrêter" data-command="stop" data-value="0">
				⏸️
			</button>
			<button
				title="Tourner à droite"
				data-command="right"
				data-value="5"
			>
				➡️
			</button>
			<span class="placeholder"></span>
			<button title="Reculer" data-command="backward" data-value="2">
				⬇️
			</button>
			<span class="placeholder"></span>
		</div>
		<h2>Contrôle</h2>
		<p>
			Amusez vous ! Pour contrôler le robot, utilisez les flèches
			directionnelles pour le diriger et la barre espace pour le stopper.
		</p>
	</body>
	<script type="module">
		// Input handlers
		document
			.querySelector('#move-input')
			.addEventListener('change', (event) =>
				assignCommands('backward', 'forward', event)
			)
		document
			.querySelector('#rotate-input')
			.addEventListener('change', (event) =>
				assignCommands('left', 'right', event)
			)

		// Buttons handlers
		for (const button of document
			.querySelector('#touch-controls')
			.querySelectorAll('button')) {
			button.addEventListener('click', () => {
				const { command, value } = button.dataset

				// Check datas are set for button
				if (command === undefined || value === undefined) {
					alert(
						`Pas de command ou de valeur assigné au bouton "${button.title}"`
					)
					throw new Error(
						`no command or value assigned to ${button.title}`
					)
				}

				// Check command is valid
				if (
					!['forward', 'backward', 'left', 'right', 'stop'].includes(
						command
					)
				) {
					alert(
						`La command "${command}" n'est pas valide en tant que ('forward', 'backward', 'left', 'right', 'stop')`
					)
					throw new Error(
						`specified command "${command}" is not in ['forward', 'backward', 'left', 'right', 'stop']`
					)
				}

				// Check value is valid finite number
				if (!Number.isFinite(Number(value))) {
					alert(
						`La valeur "${value}" n'est convertible en entier fini`
					)
					throw new Error(
						`value "${value}" cannot be casted to finite integer`
					)
				}

				sendCommand(command, Number(value))
			})
		}

		// Keyboard handler
		document.addEventListener('keydown', ({ code }) => {
			if (code === 'ArrowUp') {
				return sendCommand('forward', 2)
			}
			if (code === 'ArrowDown') {
				return sendCommand('backward', 2)
			}
			if (code === 'ArrowLeft') {
				return sendCommand('left', 5)
			}
			if (code === 'ArrowRight') {
				return sendCommand('right', 5)
			}
			if (code === 'Space') {
				return sendCommand('stop', 0)
			}
		})

		// Settings handler
		document
			.querySelector('#settings')
			.addEventListener('submit', async (event) => {
				// Don't interrupt event if not form submitting
				if (!(event instanceof SubmitEvent)) return true
				if (event.target === null) return true
				// Disable form sending
				event.preventDefault()

				const form = new FormData(event.target)
				const ipAddress = form.get('ip-address')

				if (ipAddress === null) return

				const endpoint = `http://${ipAddress}`
				await testEndpoint(endpoint)
				setEndpoint(endpoint)
			})

		/**
		 * A command string.
		 * @typedef {('forward' | 'backward' | 'left' | 'right' | 'stop')} Command
		 */

		/**
		 * Send command to the robot.
		 *
		 * @param {Command} command Command to send.
		 * @param {number} value Value of the command if needed.
		 *
		 * @returns {Promise<void>}
		 */
		async function sendCommand(command, value) {
			const endpoint = getEndpoint()
			const url = new URL(
				`/get?command=${command}&value=${value}`,
				endpoint
			)
			const response = await fetch(url)
			const text = await response.text()
			console.log(text)
		}

		/**
		 * Get robot endpoint address.
		 *
		 * @returns {string}
		 */
		function getEndpoint() {
			const endpoint = sessionStorage.getItem('robot-endpoint')
			if (endpoint === null) {
				alert("Aucune adresse IP n'a été renseignée !")
				throw new Error('no given ip address')
			}
			return endpoint
		}

		/**
		 * Set robot endpoint address.
		 *
		 * @param {string} ip Robot ip.
		 *
		 * @returns void
		 */
		function setEndpoint(ip) {
			sessionStorage.setItem('robot-endpoint', ip)
		}

		/**
		 * Test connection to endpoint.
		 *
		 * @param {string} endpoint Endpoint to test for.
		 *
		 * @returns {void}
		 * @throws {Error} Endpoint unreachable.
		 */
		async function testEndpoint(endpoint) {
			try {
				const response = await fetch(endpoint)
				if (response.ok) return
			} catch (cause) {
				alert(`Impossible de joindre l'adresse "${endpoint}"`)
				throw new Error(`unable to connect to robot at ${endpoint}`, {
					cause,
				})
			}
		}

		/**
		 * Assign a command to an input.
		 * Do negative command if value < 0 else do positive command.
		 *
		 * @param {Command} negativeCommand Command if value < 0.
		 * @param {Command} positiveCommand Command if value >= 0.
		 * @param {event} event Event of the input.
		 *
		 * @returns {Promise<void>}
		 */
		function assignCommands(negativeCommand, positiveCommand, event) {
			if (event.target === null) return

			/** @type {HTMLInputElement} */
			const target = event.target
			const value = target.valueAsNumber

			if (value < 0) {
				return sendCommand(negativeCommand, Math.abs(value))
			}
			return sendCommand(positiveCommand, value)
		}
	</script>
	<style>
		.touch-controls {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
		}
	</style>
</html>
refactor(client): :recycle: update head viewport and format document 2024-06-25 11:21:25 +02:00			`<!DOCTYPE html>`
initial commit 2024-06-25 11:19:53 +02:00			`<html lang="fr">`
refactor(client): :recycle: update head viewport and format document 2024-06-25 11:21:25 +02:00			`<head>`
			`<meta charset="utf-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
			`<title>Contrôle du robot</title>`
			`</head>`
			`<body>`
			`<h1>Contrôle du robot sans fils</h1>`
			`<p>`
			`Cette page permet de contrôler le robot depuis un PC portable`
			`connecté au WiFi du robot. Elle est destinée aux personnes n'ayant`
			`pas de smartphone.`
			`</p>`
			`<h2>Paramètres de contrôle</h2>`
			`<p>`
			`Ici vous pourrez paramétrer les contrôles du robot, rentrer son`
			`adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle`
			`de rotation désiré.`
			`</p>`
feat(client): :sparkles: add form settings handler 2024-06-25 12:46:11 +02:00			`<form class="settings" id="settings">`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`<label>`
			`<span>Adresse IP du robot</span>`
			`<input`
			`type="text"`
feat(client): :sparkles: add form settings handler 2024-06-25 12:46:11 +02:00			`name="ip-address"`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`title="Adresse IP du robot (ex: 192.168.0.1)"`
feat(client): :sparkles: support custom port in ip input pattern 2024-06-25 14:03:28 +02:00			`pattern="\d+\.\d+\.\d+\.\d+(:\d+)?"`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`placeholder="192.168.0.0"`
			`required`
			`/>`
			`</label>`
			`<button>Se connecter</button>`
refactor(client): :recycle: update head viewport and format document 2024-06-25 11:21:25 +02:00			`</form>`
feat(client): :sparkles: add touch ui and handlers for controls 2024-06-25 14:02:59 +02:00			`<div class="input-controls">`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`<label>`
			`<span>Rotation en degrés</span>`
			`<input`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`id="rotate-input"`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`type="number"`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`title="Rotation en degrés (-360° à 360°)"`
			`min="-360"`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`max="360"`
			`step="1"`
			`placeholder="90"`
			`/>`
			`</label>`
fix(client): :zap: use better event type to prevent unnecessary and incomplete requests 2024-06-25 11:50:45 +02:00			`<label>`
chore(client): :memo: improve `move-input` label and title 2024-06-25 13:16:17 +02:00			`<span>Distance en cm</span>`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`<input`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`id="move-input"`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`type="number"`
chore(client): :memo: improve `move-input` label and title 2024-06-25 13:16:17 +02:00			`title="Distance en cm (-2^31 à 2^31)"`
feat(client): :sparkles: refactor settings and controls forms and update attributes to fit expected datas 2024-06-25 11:43:34 +02:00			`min="-2147483647"`
			`step="1"`
			`max="2147483647"`
			`placeholder="10"`
			`/>`
			`</label>`
			`</div>`
feat(client): :sparkles: add touch ui and handlers for controls 2024-06-25 14:02:59 +02:00			`<div class="touch-controls" id="touch-controls">`
			`<span class="placeholder"></span>`
			`<button title="Avancer" data-command="forward" data-value="2">`
			`⬆️`
			`</button>`
			`<span class="placeholder"></span>`
			`<button title="Tourner à gauche" data-command="left" data-value="5">`
			`⬅️`
			`</button>`
			`<button title="Arrêter" data-command="stop" data-value="0">`
			`⏸️`
			`</button>`
			`<button`
			`title="Tourner à droite"`
			`data-command="right"`
			`data-value="5"`
			`>`
			`➡️`
			`</button>`
			`<span class="placeholder"></span>`
			`<button title="Reculer" data-command="backward" data-value="2">`
			`⬇️`
			`</button>`
			`<span class="placeholder"></span>`
			`</div>`
refactor(client): :recycle: update head viewport and format document 2024-06-25 11:21:25 +02:00			`<h2>Contrôle</h2>`
			`<p>`
			`Amusez vous ! Pour contrôler le robot, utilisez les flèches`
			`directionnelles pour le diriger et la barre espace pour le stopper.`
			`</p>`
			`</body>`
refactor(client): :recycle: remove deprecated `xhr` API and rewrite hard coded and redundant parts 2024-06-25 12:27:16 +02:00			`<script type="module">`
refactor(client): :recycle: move handlers at the top of the document 2024-06-25 13:19:07 +02:00			`// Input handlers`
			`document`
fix(client): :bug: typo in query selectors 2024-06-25 13:26:35 +02:00			`.querySelector('#move-input')`
refactor(client): :recycle: move handlers at the top of the document 2024-06-25 13:19:07 +02:00			`.addEventListener('change', (event) =>`
			`assignCommands('backward', 'forward', event)`
			`)`
			`document`
fix(client): :bug: typo in query selectors 2024-06-25 13:26:35 +02:00			`.querySelector('#rotate-input')`
refactor(client): :recycle: move handlers at the top of the document 2024-06-25 13:19:07 +02:00			`.addEventListener('change', (event) =>`
			`assignCommands('left', 'right', event)`
			`)`

feat(client): :sparkles: add touch ui and handlers for controls 2024-06-25 14:02:59 +02:00			`// Buttons handlers`
			`for (const button of document`
			`.querySelector('#touch-controls')`
			`.querySelectorAll('button')) {`
			`button.addEventListener('click', () => {`
			`const { command, value } = button.dataset`

			`// Check datas are set for button`
			`if (command === undefined \|\| value === undefined) {`
			`alert(`
			`Pas de command ou de valeur assigné au bouton "${button.title}"`
			`)`
			`throw new Error(`
			`no command or value assigned to ${button.title}`
			`)`
			`}`

			`// Check command is valid`
			`if (`
			`!['forward', 'backward', 'left', 'right', 'stop'].includes(`
			`command`
			`)`
			`) {`
			`alert(`
			`La command "${command}" n'est pas valide en tant que ('forward', 'backward', 'left', 'right', 'stop')`
			`)`
			`throw new Error(`
			`specified command "${command}" is not in ['forward', 'backward', 'left', 'right', 'stop']`
			`)`
			`}`

			`// Check value is valid finite number`
			`if (!Number.isFinite(Number(value))) {`
			`alert(`
			`La valeur "${value}" n'est convertible en entier fini`
			`)`
			`throw new Error(`
			`value "${value}" cannot be casted to finite integer`
			`)`
			`}`

			`sendCommand(command, Number(value))`
			`})`
			`}`

refactor(client): :recycle: move handlers at the top of the document 2024-06-25 13:19:07 +02:00			`// Keyboard handler`
refactor(client): :recycle: update keyboard event handler to fit new API 2024-06-25 13:31:27 +02:00			`document.addEventListener('keydown', ({ code }) => {`
			`if (code === 'ArrowUp') {`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand('forward', 2)`
refactor(client): :recycle: update keyboard event handler to fit new API 2024-06-25 13:31:27 +02:00			`}`
			`if (code === 'ArrowDown') {`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand('backward', 2)`
refactor(client): :recycle: update keyboard event handler to fit new API 2024-06-25 13:31:27 +02:00			`}`
			`if (code === 'ArrowLeft') {`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand('left', 5)`
refactor(client): :recycle: update keyboard event handler to fit new API 2024-06-25 13:31:27 +02:00			`}`
			`if (code === 'ArrowRight') {`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand('right', 5)`
refactor(client): :recycle: update keyboard event handler to fit new API 2024-06-25 13:31:27 +02:00			`}`
			`if (code === 'Space') {`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand('stop', 0)`
refactor(client): :recycle: update keyboard event handler to fit new API 2024-06-25 13:31:27 +02:00			`}`
refactor(client): :recycle: move handlers at the top of the document 2024-06-25 13:19:07 +02:00			`})`

			`// Settings handler`
			`document`
			`.querySelector('#settings')`
			`.addEventListener('submit', async (event) => {`
			`// Don't interrupt event if not form submitting`
			`if (!(event instanceof SubmitEvent)) return true`
			`if (event.target === null) return true`
			`// Disable form sending`
			`event.preventDefault()`

			`const form = new FormData(event.target)`
			`const ipAddress = form.get('ip-address')`

			`if (ipAddress === null) return`

			const endpoint = `http://${ipAddress}`
			`await testEndpoint(endpoint)`
			`setEndpoint(endpoint)`
			`})`

refactor(client): :recycle: remove deprecated `xhr` API and rewrite hard coded and redundant parts 2024-06-25 12:27:16 +02:00			`/**`
			`* A command string.`
			`* @typedef {('forward' \| 'backward' \| 'left' \| 'right' \| 'stop')} Command`
			`*/`

			`/**`
			`* Send command to the robot.`
			`*`
			`* @param {Command} command Command to send.`
			`* @param {number} value Value of the command if needed.`
refactor(client): :recycle: improve `sendCommand` flexibility and type checking 2024-06-25 12:49:21 +02:00			`*`
			`* @returns {Promise<void>}`
refactor(client): :recycle: remove deprecated `xhr` API and rewrite hard coded and redundant parts 2024-06-25 12:27:16 +02:00			`*/`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`async function sendCommand(command, value) {`
			`const endpoint = getEndpoint()`
refactor(client): :recycle: improve `sendCommand` flexibility and type checking 2024-06-25 12:49:21 +02:00			`const url = new URL(`
			`/get?command=${command}&value=${value}`,
			`endpoint`
refactor(client): :recycle: remove deprecated `xhr` API and rewrite hard coded and redundant parts 2024-06-25 12:27:16 +02:00			`)`
refactor(client): :recycle: improve `sendCommand` flexibility and type checking 2024-06-25 12:49:21 +02:00			`const response = await fetch(url)`
refactor(client): :recycle: remove deprecated `xhr` API and rewrite hard coded and redundant parts 2024-06-25 12:27:16 +02:00			`const text = await response.text()`
			`console.log(text)`
			`}`

feat(client): :sparkles: add form settings handler 2024-06-25 12:46:11 +02:00			`/**`
			`* Get robot endpoint address.`
			`*`
			`* @returns {string}`
			`*/`
			`function getEndpoint() {`
			`const endpoint = sessionStorage.getItem('robot-endpoint')`
			`if (endpoint === null) {`
			`alert("Aucune adresse IP n'a été renseignée !")`
			`throw new Error('no given ip address')`
			`}`
			`return endpoint`
			`}`

			`/**`
			`* Set robot endpoint address.`
			`*`
			`* @param {string} ip Robot ip.`
			`*`
			`* @returns void`
			`*/`
			`function setEndpoint(ip) {`
fix(client): :bug: missing argument in `sessionStorage.setItem` 2024-06-25 14:01:37 +02:00			`sessionStorage.setItem('robot-endpoint', ip)`
feat(client): :sparkles: add form settings handler 2024-06-25 12:46:11 +02:00			`}`

feat(client): :sparkles: add function to test connection on ip update 2024-06-25 12:58:11 +02:00			`/**`
			`* Test connection to endpoint.`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`*`
feat(client): :sparkles: add function to test connection on ip update 2024-06-25 12:58:11 +02:00			`* @param {string} endpoint Endpoint to test for.`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`*`
feat(client): :sparkles: add function to test connection on ip update 2024-06-25 12:58:11 +02:00			`* @returns {void}`
			`* @throws {Error} Endpoint unreachable.`
			`*/`
			`async function testEndpoint(endpoint) {`
			`try {`
			`const response = await fetch(endpoint)`
			`if (response.ok) return`
			`} catch (cause) {`
			alert(`Impossible de joindre l'adresse "${endpoint}"`)
			throw new Error(`unable to connect to robot at ${endpoint}`, {
			`cause,`
			`})`
			`}`
			`}`

feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`/**`
			`* Assign a command to an input.`
			`* Do negative command if value < 0 else do positive command.`
			`*`
			`* @param {Command} negativeCommand Command if value < 0.`
			`* @param {Command} positiveCommand Command if value >= 0.`
			`* @param {event} event Event of the input.`
			`*`
			`* @returns {Promise<void>}`
			`*/`
			`function assignCommands(negativeCommand, positiveCommand, event) {`
			`if (event.target === null) return`

			`/** @type {HTMLInputElement} */`
			`const target = event.target`
			`const value = target.valueAsNumber`

			`if (value < 0) {`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand(negativeCommand, Math.abs(value))`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`}`
refactor(client): :recycle: resolve endpoint inside `sendCommand` instead of redundant argument 2024-06-25 13:41:17 +02:00			`return sendCommand(positiveCommand, value)`
feat(client): :sparkles: implement handlers tfor controls 2024-06-25 13:15:04 +02:00			`}`
refactor(client): :recycle: update head viewport and format document 2024-06-25 11:21:25 +02:00			`</script>`
feat(client): :sparkles: add touch ui and handlers for controls 2024-06-25 14:02:59 +02:00			`<style>`
			`.touch-controls {`
			`display: grid;`
			`grid-template-columns: repeat(3, 1fr);`
			`}`
			`</style>`
initial commit 2024-06-25 11:19:53 +02:00			`</html>`