added websocket & webserver with simple interface (87014bbd) · Commits · Intelligent 3D Graphics / mi-camera_photo

.gitlab-ci.yml

+1 −1

Original line number	Diff line number	Diff line
		@@ -10,4 +10,4 @@ build:
		- bash -x ./run.sh -b
		artifacts:
		paths:
		- sdk/miphoto-exec
		- sdk/build/miphoto-exec

sdk/build/www/favicon.ico

0 → 100644

+318 B

Loading image diff...

sdk/build/www/index.html

0 → 100644

+27 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html>


		<head>
		<title>Mi Camera Photo</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="jquery.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		</head>


		<body>
		<div id="notification-wrapper"><div id="notification" style="display: none;"></div></div>
		<div class="box center">
		<h1>Mi Camera Photo</h1>
		<p>This is simple WebSocket form.</p>
		<button id="buttonConnect" class="button" onclick="buttonConnect_onClick()">Connect</button>
		<form id="ws-form" onsubmit="wsFormSubmit(); return false;">
		<input id="ws-form-data" type="text" placeholder="Data to send" disabled="">
		<input id="ws-form-submit" class="button" type="submit" value="Send" disabled="">
		</form>
		</div>
		</body>


		</html>

sdk/build/www/jquery.min.js

0 → 100644

+2 −0

File added.

Preview size limit exceeded, changes collapsed.

sdk/build/www/script.js

0 → 100644

+143 −0

Original line number	Diff line number	Diff line
		var ws;
		var notifying = false;
		var connected = false;

		function sleep(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
		}


		function waitFor(conditionFunction) {

		const poll = resolve => {
		if(conditionFunction()) resolve();
		else setTimeout(_ => poll(resolve), 400);
		}

		return new Promise(poll);
		}

		function connect()
		{
		if (!("WebSocket" in window))
		{
		notify("Sorry, WebSockets not supported by your browser!", true)
		return;
		}
		ws = new WebSocket("ws://192.168.42.1:9001");
		ws.onopen = function(e)
		{
		notify("Connection established.");
		enableForm(true);
		};

		ws.onmessage = function(event)
		{
		if (event.data === "")
		return;

		try
		{
		var json = JSON.parse(event.data);
		/*if (json.hasOwnProperty("connected"))
		{
		if (json["connected"] === true)
		enableForm(true);
		else
		ws.close();
		}*/
		}
		catch
		{
		notify(`[message] Non-JSON data received from server: ${event.data}`, true);
		}
		};
		ws.onping = function(event)
		{
		notify("ping!");
		}
		ws.onclose = function(event)
		{
		if (event.wasClean)
		{
		if (event.code === 1000)
		notify(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
		}
		else
		{
		// e.g. server process killed or network down
		// event.code is usually 1006 in this case

		if (!connected)
		notify("Couldn't connect. Maybe anothe user is using the app or you are not connected to the network?", true, 4000);
		else
		notify('Connection died.', true);
		}

		enableForm(false);
		};

		ws.onerror = function(error)
		{};
		}

		function enableForm(enable)
		{
		var elements = document.getElementById("ws-form").elements;
		for (var i = 0, len = elements.length; i < len; ++i)
		{
		elements[i].disabled = !enable;
		}
		if (enable)
		document.getElementById("buttonConnect").innerHTML = "Disconnect";
		else
		document.getElementById("buttonConnect").innerHTML = "Connect";
		connected = enable;
		}

		function disconnect()
		{
		ws.close(1000, "disconnected by user");
		connected = false;
		}


		function buttonConnect_onClick()
		{
		if (ws != undefined && ws.readyState === WebSocket.OPEN)
		disconnect();
		else
		connect();
		}

		function wsFormSubmit()
		{
		var input = document.getElementById('ws-form-data')
		ws.send(input.value);
		input.value = "";
		}

		async function notify(text, error = false, time = 1500)
		{
		if (error)
		console.error(text)
		else
		console.log(text);

		// wait until prevous notifications dissapeared
		await waitFor(_ => notifying == false );
		notifying = true;

		//set text
		let x = document.getElementById("notification");
		x.innerHTML = text;

		//fade in, wait, fade out
		$("#notification").fadeIn('fast', async function(){
		await sleep(time);
		$("#notification").fadeOut('fast', async function()
		{
		notifying = false;
		})
		});
		}