From d5fd93c04102e347c14ab11f4bf7dfcdc8bb2dbc Mon Sep 17 00:00:00 2001 From: Miguel Palhas Date: Mon, 3 Aug 2020 22:56:07 +0100 Subject: [PATCH] UI finally connected --- Procfile | 2 + daemon/src/server.rs | 27 ++-- package-lock.json | 59 +++++++++ package.json | 22 ++++ ui/package-lock.json | 31 +++++ ui/package.json | 1 + ui/src/components/settings/index.tsx | 71 ++++++----- ui/src/components/video/index.tsx | 2 - wasm/.appveyor.yml | 11 -- wasm/.cargo-ok | 0 wasm/.gitignore | 6 - wasm/.travis.yml | 69 ----------- wasm/Cargo.toml | 35 ------ wasm/LICENSE_APACHE | 176 --------------------------- wasm/LICENSE_MIT | 25 ---- wasm/README.md | 69 ----------- wasm/src/lib.rs | 41 ------- wasm/tests/web.rs | 13 -- 18 files changed, 172 insertions(+), 488 deletions(-) create mode 100644 Procfile create mode 100644 package-lock.json create mode 100644 package.json delete mode 100644 wasm/.appveyor.yml delete mode 100644 wasm/.cargo-ok delete mode 100644 wasm/.gitignore delete mode 100644 wasm/.travis.yml delete mode 100644 wasm/Cargo.toml delete mode 100644 wasm/LICENSE_APACHE delete mode 100644 wasm/LICENSE_MIT delete mode 100644 wasm/README.md delete mode 100644 wasm/src/lib.rs delete mode 100644 wasm/tests/web.rs diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..5f472d9 --- /dev/null +++ b/Procfile @@ -0,0 +1,2 @@ +daemon: cd daemon && cargo run --color always -- -i /dev/video0 -o /dev/video2 -w 800 -h 600 -f 30 -b 4 -p +ui: cd ui && npm start diff --git a/daemon/src/server.rs b/daemon/src/server.rs index b8c34bd..d231890 100644 --- a/daemon/src/server.rs +++ b/daemon/src/server.rs @@ -17,19 +17,6 @@ pub fn create(app: App) -> thread::JoinHandle<()> { }) } -fn make_cors() -> Cors { - CorsOptions { - allowed_origins: AllowedOrigins::some_exact(&["http://localhost:3000"]), - allowed_methods: vec![Method::Get, Method::Post] - .into_iter() - .map(From::from) - .collect(), - ..Default::default() - } - .to_cors() - .unwrap() -} - #[get("/settings")] fn get_settings(state: State) -> String { state.lock().unwrap().get_settings() @@ -37,7 +24,21 @@ fn get_settings(state: State) -> String { #[post("/settings", data = "")] fn set_setting(settings: String, state: State) -> status::Accepted { + println!("{:?}", settings); state.lock().unwrap().set_settings(settings); status::Accepted(None) } + +fn make_cors() -> Cors { + CorsOptions { + allowed_origins: AllowedOrigins::some_exact(&["http://localhost:3000"]), + allowed_methods: vec![Method::Options, Method::Get, Method::Post] + .into_iter() + .map(From::from) + .collect(), + ..Default::default() + } + .to_cors() + .unwrap() +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ff2debc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,59 @@ +{ + "name": "instacam", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, + "eventemitter3": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz", + "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==" + }, + "follow-redirects": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.12.1.tgz", + "integrity": "sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==" + }, + "foreman": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/foreman/-/foreman-3.0.1.tgz", + "integrity": "sha512-ek/qoM0vVKpxzkBUQN9k4Fs7l0XsHv4bqxuEW6oqIS4s0ouYKsQ19YjBzUJKTFRumFiSpUv7jySkrI6lfbhjlw==", + "requires": { + "commander": "^2.15.1", + "http-proxy": "^1.17.0", + "mustache": "^2.2.1", + "shell-quote": "^1.6.1" + } + }, + "http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "requires": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + } + }, + "mustache": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.2.tgz", + "integrity": "sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ==" + }, + "requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" + }, + "shell-quote": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", + "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..2b4c7fc --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "instacam", + "version": "1.0.0", + "description": "# Setup", + "main": "index.js", + "scripts": { + "start": "nf start" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/naps62/instacam.git" + }, + "author": "Miguel Palhas", + "license": "ISC", + "bugs": { + "url": "https://github.com/naps62/instacam/issues" + }, + "homepage": "https://github.com/naps62/instacam#readme", + "dependencies": { + "foreman": "^3.0.1" + } +} diff --git a/ui/package-lock.json b/ui/package-lock.json index e0251be..4f10f96 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -2265,6 +2265,37 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz", "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==" }, + "axios": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "requires": { + "follow-redirects": "1.5.10" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/ui/package.json b/ui/package.json index 2d3f455..2c4bb4a 100644 --- a/ui/package.json +++ b/ui/package.json @@ -11,6 +11,7 @@ "@types/node": "^12.12.53", "@types/react": "^16.9.44", "@types/react-dom": "^16.9.8", + "axios": "^0.19.2", "instacam-wasm": "file:../wasm/pkg", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/ui/src/components/settings/index.tsx b/ui/src/components/settings/index.tsx index e65c390..9ed3385 100644 --- a/ui/src/components/settings/index.tsx +++ b/ui/src/components/settings/index.tsx @@ -1,43 +1,58 @@ import React, { useState, useEffect } from "react"; +import axios from "axios"; import "./style.css"; +const fetchSettings = async (callback: Function) => { + try { + const { data } = await axios("http:///localhost:8000/settings"); + + callback(data); + } catch (err) { + console.error(err); + } +}; + +const updateSettings = async (settings: String) => { + try { + await axios({ + method: "post", + url: "http://localhost:8000/settings", + data: settings, + }); + } catch (err) { + console.error(err); + } +}; + const Settings: React.FC = () => { - const [wasm, setWasm] = useState(); const [settings, setSettings] = useState(""); useEffect(() => { - (async () => { - const wasm = await import("instacam-wasm"); - setWasm(wasm); - })(); - }); - - useEffect(() => { - if (!wasm) return; - - console.log(wasm.get_settings()); - }, [wasm]); + fetchSettings((settings: JSON) => setSettings(JSON.stringify(settings))); + }, []); const onSubmit = (e: any) => { e.preventDefault(); - wasm.set_settings(settings); + + try { + const json = JSON.parse(settings); + updateSettings(json); + } catch (err) { + console.error(err); + } }; - if (!wasm) { - return
Loading
; - } else { - return ( -
-