diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..a36f44f
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,49 @@
+{
+ "extends": "airbnb",
+ "globals": {
+ "window": true,
+ "document": true,
+ "fetch": true,
+ "btoa": true,
+ "atob": true,
+ "history": true,
+ "location": true,
+ "addEventListener": true
+ },
+ "rules": {
+ "no-undef": "error",
+ "no-unused-vars": [2, {
+ "varsIgnorePattern": "h"
+ }],
+ "linebreak-style": "off",
+ "indent": ["error", 4],
+
+ "react/jsx-indent": ["error", 4],
+ "react/jsx-indent-props": ["error", 4],
+ "react/no-unknown-property": "off",
+ "react/react-in-jsx-scope": 0,
+ "react/sort-comp": 0,
+ "react/require-render-return": 2,
+ "react/jsx-closing-bracket-location": 0,
+ "react/jsx-space-before-closing": 0,
+ "react/jsx-first-prop-new-line": 0,
+ "react/prop-types": 0,
+ "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],
+ "react/jsx-uses-vars": 2,
+
+ "no-use-before-define": "off",
+ "jsx-quotes": "off",
+ "react/jsx-wrap-multilines": "off",
+ "implicit-arrow-linebreak": "off",
+ "arrow-parens": "off",
+ "semi": ["warn"],
+ "max-len": ["warn", 130],
+ "no-console": "off",
+ "no-extra-semi": "warn",
+ "import/no-dynamic-require": 0,
+ "import/no-extraneous-dependencies": 0,
+ "import/prefer-default-export": 0,
+ "strict": 0
+ }
+
+}
\ No newline at end of file
diff --git a/client/src/index.html b/client/src/index.html
index 9c1799c..220023e 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -1,132 +1,36 @@
-
-
-
-
+
+
+
+
- Turtle
+ Turtle
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
-
+
-
-
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/client/src/js/actions/index.js b/client/src/js/actions/index.js
index 8fe6e6b..dd4d6e6 100644
--- a/client/src/js/actions/index.js
+++ b/client/src/js/actions/index.js
@@ -21,7 +21,7 @@ const actions = {
setSystemInfo: value => state => ({system_info: value}),
- setBootScreenState: value => state => ({ showBootScreen: value }),
+ setSplashScreenState: value => state => ({ showSplashScreen: value }),
setMode: value => state => save('', { mode: value }),
settings: {
diff --git a/client/src/js/app.js b/client/src/js/app.js
index f80e7a5..2aa1cd9 100644
--- a/client/src/js/app.js
+++ b/client/src/js/app.js
@@ -1,17 +1,17 @@
-import { app } from 'hyperapp'
-import actions from './actions'
-import state from './state'
-import view from './view'
+import { app } from 'hyperapp';
+import actions from './actions';
+import state from './state';
+import view from './view';
-import { hyperlog } from "./utils/logger";
-import core from './core'
+import { hyperlog } from './utils/logger';
+import core from './core';
const wiredActions = hyperlog(app)(state, actions, view, document.body);
-document.onreadystatechange = function() {
- if (document.readyState === "complete") {
+document.onreadystatechange = () => {
+ if (document.readyState === 'complete') {
wiredActions.restoreState();
- wiredActions.setBootScreenState(false);
+ wiredActions.setSplashScreenState(false);
console.log(wiredActions);
}
};
@@ -23,3 +23,9 @@ core(wiredActions);
// https://stackoverflow.com/a/50856621/1589989
// this is commented out since its prevents from moving thumb on mobile devices
// window.addEventListener("touchmove", (event) => event.preventDefault(), {passive: false} );
+
+window.oncontextmenu = (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ return false;
+};
diff --git a/client/src/js/controller.js b/client/src/js/controller.js
deleted file mode 100644
index 6416cd7..0000000
--- a/client/src/js/controller.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Controller is a master module in an application.
- * It uses the Revealing Module Pattern
- * https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
-*/
-
-const DEBUG = true;
-
-var controller = (function () {
- /*
- * PRIVATE area
- */
-
- /*
- * called when main page is loaded and camera video should be displayed
- */
- function mainPageLoaded() {
- setTimeout(function() {
- amplify.publish("controller->ui", "hide welcome screen");
- if (linux.getIsCameraAvailable() == true) amplify.publish("controller->ui", "change image source to camera");
- else amplify.publish("controller->ui", "change image source to default background");
- amplify.publish("controller->ui", "display camera video");
- }, 500);
- }
-
- /*
- * EVENTS triggers
- */
- $(window).bind('beforeunload', function(){closePage();});
-
- /*
- * SUBSCRIBE to all topics
- */
- amplify.subscribe("ui->controller", uiMessageCallback);
- amplify.subscribe("linux->controller", linuxMessageCallback);
-
- /*
- * CALLBACK functions
- */
- function uiMessageCallback(message) {
- if (DEBUG) console.log("uiMessageCallback: " + message);
- if (DEBUG) amplify.publish("all->utests", message);
-
- switch(message) {
- case "ui is ready for operation":
- documentReadyCallback();
- break;
- case "GO button is pressed":
- mainPageLoaded();
- break;
- default:
- console.log("unknown command: " + message);
- }
- }
-
- function linuxMessageCallback(message) {
- if (DEBUG) console.log("linuxMessageCallback: " + message);
-
- switch(message) {
- case "communication established":
- amplify.publish("controller->ui", "wait until GO button is pressed");
- break;
- default:
- console.log("unknown command: " + message);
- }
- }
-
- /*
- * called when ui send ready message
- */
- function documentReadyCallback() {
- if (DEBUG) console.log("document ready callback");
-
- // initialize multiple languages
- amplify.publish("controller->ui", "initialize multilanguage");
-
- // start python server
- setTimeout(function () {
- amplify.publish("controller->linux", "start python server");
- amplify.publish("controller->ui", "turtle is awake");
- }, 1500);
- }
-
- /*
- * called when page is unloaded
- */
- function closePage() {
- if (linux.getIsCameraAvailable())
- amplify.publish("controller->linux", "stop python server");
- }
-
- /*
- * PUBLIC area
- * Reveal public pointers to private functions and properties.
- */
- return {
- };
-})();
diff --git a/client/src/js/core/stream.js b/client/src/js/core/stream.js
index 0344cbf..e7919c0 100644
--- a/client/src/js/core/stream.js
+++ b/client/src/js/core/stream.js
@@ -53,7 +53,7 @@ Stream.prototype.createPeerConnection = function() {
this.peerConnection.ontrack = (event) => {
console.log("[stream] remote stream added:", event.streams[0]);
- let remoteVideoElement = document.getElementById('remote-video');
+ let remoteVideoElement = document.getElementById('stream');
remoteVideoElement.srcObject = event.streams[0];
remoteVideoElement.play();
}
@@ -199,7 +199,7 @@ Stream.prototype.error = function(event) {
Stream.prototype.stop = function() {
// stop_record();
- document.getElementById('remote-video').src = '';
+ document.getElementById('stream').src = '';
this.close();
diff --git a/client/src/js/errors.js b/client/src/js/errors.js
deleted file mode 100644
index 04491bb..0000000
--- a/client/src/js/errors.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * error handling for the whole application
- *
- * catch all errors using window object
-*/
-
-window.addEventListener('error', function(e){
- var error = e.error;
- console.log("ERROR:\t" + error + "\tSTACK:\t" + error.stack);
-});
\ No newline at end of file
diff --git a/client/src/js/linux.js b/client/src/js/linux.js
deleted file mode 100644
index a07d829..0000000
--- a/client/src/js/linux.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * Linux class is responsible for all interaction between website and (linux) server itself
- * It uses the Revealing Module Pattern
- * https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
-*/
-
-var linux = (function () {
- /*
- * PRIVATE area
- */
- var isCameraAvailable = false;
- var serverProcessPID = -1;
- var mjpegStreamPID = -1;
- var communicationEstablished = false;
-
- /*
- * start python server
- * python server is responsible for all communication on the server side
- */
- amplify.publish("linux->controller", "communication established");
- function startPythonServer() {
- /*
- * read screen resolution and choose video size from the following ones:
- * 1280 x 720
- * 1024 x 768
- * 640 x 480
- * 320 x 240
- */
- var size = Math.max(window.screen.height, window.screen.width);
- var res = "0x0";
- if (size > 1366) res = "1280x720";
- else if (size > 1152) res = "1024x768";
- else if (size > 800) res = "640x480";
- else res = "320x240";
-
- if (DEBUG) console.log("Image resolution: " + res);
-
- $.get("server/starter.php",
- { resolution: res },
- function(data) {
- if (DEBUG) console.log("AJAX request sent");
- data = data.split("\r\n");
-
- /*
- * data received from the run_server.php
- * 0 - amount of connected clients (only 1 at a time is allowed)
- * 1 - python process pid
- * 2 - mjpeg streamer process pid
- */
-
- // var numberOfClients = data[0];
- var numberOfClients = 0;
- if (DEBUG) console.log("numberOfClients: " + numberOfClients);
-
- /*
- * connect only if there is no more clients connected
- * TODO: should be numberOfClients == 0. Does not work properly
- */
- if (numberOfClients >= 0 || document.domain.includes("localhost")) {
- serverProcessPID = -1;
- mjpegStreamPID = -1;
- // serverProcessPID = data[1];
- // mjpegStreamPID = data[2];
- // if the returned value is numeric (pid of the process) continue with camera
- if ($.isNumeric(serverProcessPID) || $.isNumeric(mjpegStreamPID)) {
- isCameraAvailable = true;
- if (DEBUG) console.log("serverProcessPID: " + serverProcessPID);
- if (DEBUG) console.log("mjpegStreamPID: " + mjpegStreamPID);
-
- // start webrtc streaming
- amplify.publish("linux->webrtc", "start webrtc stream");
-
- // start communication with webserver
- setTimeout(function(){
- amplify.publish("linux->serverCommunication", "start communication on port 8080");
- }, 1000);
- }
- // otherwise display a notice and work with static image
- else {
- if (DEBUG) console.log("couldn't initialize python server");
- isCameraAvailable = false;
- serverProcessPID = -1;
- mjpegStreamPID = -1;
- amplify.publish("all->ui", "notifications.server-connection-error");
- }
-
- communicationEstablished = true;
- }
- else amplify.publish("all->ui", "notifications.client-already-connected");
- });
- }
-
- /*
- * stop python server when page is unloaded (controller.js -> closePage)
- */
- function stopPythonServer() {
- $.get("assets/python/server/close_server.php");
- }
-
- function retIsCameraAvailable() {return isCameraAvailable;}
- function retServerProcessPID() {return serverProcessPID;}
-
- /*
- * SUBSCRIBE to all topics
- */
- amplify.subscribe("controller->linux", controllerMessageCallback);
- amplify.subscribe("webrtc->linux", webrtcMessageCallback);
-
- /*
- * CALLBACK functions
- */
- function controllerMessageCallback(message) {
- if (DEBUG) console.log("controllerMessageCallback: " + message);
-
- switch(message) {
- case "start python server":
- startPythonServer();
- break;
- case "stop python server":
- stopPythonServer();
- break;
- default:
- console.log("unknown command: " + message);
- }
- }
-
- function webrtcMessageCallback(message) {
- if (DEBUG) console.log("webrtcMessageCallback: " + message);
-
- // switch(message) {
- // case "camera stream is ready":
- // // wait until communication channel is ready
- // while (communicationEstablished == false && !document.domain.includes("localhost")) setTimeout(function() { }, 1000);
- // // amplify.publish("linux->controller", "communication established");
- // break;
- // default:
- // console.log("unknown command: " + message);
- // }
- }
-
-
-
- /*
- * PUBLIC area
- * Reveal public pointers to private functions and properties.
- */
- return {
- getIsCameraAvailable : retIsCameraAvailable,
- getServerProcessPID : retServerProcessPID
- };
-})();
diff --git a/client/src/js/servercommunication.js b/client/src/js/servercommunication.js
deleted file mode 100644
index 3e96351..0000000
--- a/client/src/js/servercommunication.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/*
- * controlCanvas is used for controlling Turtle
- * It uses the Revealing Module Pattern
- * https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
- *
- * For drawing and touch applications it uses CREATEJS set of libraries
- * + EaselJS
- * + TweenJS
- * + SoundJS
- * + PreloadJS
- * http://www.createjs.com/docs
- */
-
-var serverCommunication = (function() {
- /*
- * PRIVATE area
- */
- let sockets = window.turtle.sockets;
- let utils = new window.turtle.utils();
- let frameBuilder = new window.turtle.frameBuilder();
- /*
- * SUBSCRIBE to all topics
- */
- amplify.subscribe("linux->serverCommunication", linuxMessageCallback);
-
- function linuxMessageCallback(message) {
- if (DEBUG) console.log("linuxMessageCallback: " + message);
- if (DEBUG) amplify.publish("all->utests", message);
-
- switch (message) {
- case "start communication on port 8080":
- connect8080();
- break;
- default:
- console.log("unknown command: " + message);
- }
- }
-
- /*
- * defines how often new information is sent
- */
- const INTERVAL = 100;
- const BAT_INTERVAL = 2000;
-
- /*
- * class for every new socket communication
- */
- // function socket(ref, open, process) {
- // this.socket = ref; // reference to connection
- // this.isOpen = open; // indicates whether the connection is open or not
- // this.pid = process; // process identifier indicates identifier of Python application. Should be killed while page leaving
- // }
-
- /*
- * connects with port 8080
- */
- function connect8080() {
- console.log("Location hostname: " + location.hostname);
-
- /*
- * subscribe to canvas topic
- */
- amplify.subscribe("controlCanvas->port8080", canvasMessageCallback);
-
- function canvasMessageCallback(message) {
- if (DEBUG) console.log("canvasMessageCallback: " + message);
- if (DEBUG) amplify.publish("all->utests", message);
-
- switch (message) {
- case "stop all motors":
- stopMotors();
- break;
- default:
- console.log("unknown command: " + message);
- }
- };
-
- amplify.subscribe("manipulator->port8080", manipulatorMessageCallback);
-
- function manipulatorMessageCallback(message) {
- if (DEBUG) console.log("manipulatorMessageCallback: " + message);
- if (DEBUG) amplify.publish("all->utests", message);
-
- switch (message) {
- case "set new servo position":
- setNewManiPosition();
- break;
- default:
- console.log("unknown command: " + message);
- }
- };
-
- amplify.subscribe("ui->port8080", uiMessageCallback);
-
- function uiMessageCallback(message) {
- if (DEBUG) console.log("uiMessageCallback: " + message);
- if (DEBUG) amplify.publish("all->utests", message);
-
- switch (message) {
- case "update camera settings":
- updateCameraSettings();
- break;
- case "set new gripper position":
- setNewGripperPosition();
- break;
- case "set new axis1 position":
- case "set new axis2 position":
- updateAxisPositions();
- break;
- case "set new camera position":
- setNewCameraPosition();
- break;
- case "set new mani position":
- setNewManiPosition();
- break;
- default:
- console.log("unknown command: " + message);
- }
- }
-
- // for 3G used service ngrok
- // if (location.host == "bentos.eu.ngrok.io")
- // var socket8080 = new socket(new WebSocket("ws://" + "bentossocket.eu.ngrok.io"), false, -1);
- // else {
- // var socket8080 = new socket(new WebSocket("ws://" + location.hostname + ":8080"), false, -1);
- // }
- //
- // socket8080.socket.binaryType = "arraybuffer";
-
- /*
- * EVENT functions for socket
- */
- if (sockets.io.connected) {
- console.log("Connected with port 8080");
- amplify.publish("all->ui", "set last status done");
- amplify.publish("all->ui", "initialize camera...");
- }
-
- function updateAxisPositions() {
- $("#mani-axis-1").val($("#axis1-slider-input").val());
- $("#mani-axis-2").val($("#axis2-slider-input").val());
- setNewManiPosition();
- }
- /*
- * set new position of servo
- */
- function setNewManiPosition() {
- //var newPosition = manipulator.getCurrentPosition();
- if (sockets.io.connected) {
- /*var alphaValue = newPosition.alpha * 4; // in quarter of microseconds
- var betaValue = newPosition.beta * 4;*/
-
- var axis_1 = document.getElementById('axis1-slider-input').value;
- var axis_2 = document.getElementById('axis2-slider-input').value;
-
-
- let frame = frameBuilder.manipulator(axis_1, axis_2);
- console.log(utils.arrayToHex(frameBuilder.motorsArr));
- sockets.sendManipulator(frame);
- }
- }
-
- function setNewGripperPosition() {
- //var gripperPosition = manipulator.getGripperPosition();
- var gripperPosition = $("#gripper-slider-input").val();
- if (sockets.io.connected) {
- let frame = frameBuilder.gripper(gripperPosition);
- console.log(utils.arrayToHex(frameBuilder.gripperArr));
- sockets.sendGripper(frame);
- }
- }
-
- function setNewCameraPosition() {
- var cameraPosition = $("#camera-slider-input").val();
- console.log("New camera position: " + cameraPosition);
- if (sockets.io.connected) {
- var buf = new ArrayBuffer(3);
- var arr = new Uint8Array(buf);
-
- arr[0] = 0xA4;
- arr[1] = (cameraPosition >> 8) & 0xFF;
- arr[2] = cameraPosition & 0xFF;
-
- // socket8080.socket.send(buf);
- }
- }
-
- /*
- * set all motors values
- */
- function setMotors() {
- if (sockets.io.connected) {
- var motorsSpeed = controlCanvas.getMotorsSpeed();
- let frame = frameBuilder.motors(motorsSpeed);
- console.log(utils.arrayToHex(frameBuilder.motorsArr));
- sockets.sendMotors(frame);
- } else {
- console.log("Connection not opened.");
- }
- }
-
- amplify.subscribe("controlkeyboard->servercommunication", setMotorKeyboard);
-
- function setMotorKeyboard(movement) {
- if (sockets.io.connected) {
- if (movement.type == "run") {
- if (movement.speed <= 100 && movement.speed >= -100) {
- let frame = frameBuilder.motorsKeyboard(movement);
- sockets.sendMotors(frame);
- // Convert to readable form
- console.log(utils.arrayToHex(frameBuilder.motorsArr));
- } else {
- clearInterval(movement.interval);
- }
-
- } else if (movement.type == "stop") {
- clearInterval(movement.interval);
- stopMotors();
- }
- } else {
- console.log("Connection not opened.");
- }
- }
-
- /*
- * stop all motors immediately
- */
- function stopMotors() {
- if (sockets.io.connected) {
- var buf = new ArrayBuffer(4);
- var arr = new Uint8Array(buf);
-
- // command to send
- arr[0] = 0;
- arr[1] = 0;
- arr[2] = 0;
- arr[3] = 0;
- console.log("Halt!", buf);
- sockets.sendMotors(buf);
- } else console.log("Connection not opened.");
- }
-
-
- /*
- * update all camera settings
- */
- function updateCameraSettings() {
- if (sockets.io.connected) {
- var buf = new ArrayBuffer(9);
- var arr = new Uint8Array(buf);
- arr[0] = 0x50;
- arr[1] = $("#brightness-slider-input").val();
- arr[2] = $("#contrast-slider-input").val();
- arr[3] = $("#saturation-slider-input").val();
- arr[4] = $("#hue-slider-input").val();
- arr[5] = ($("#gamma-slider-input").val() & 0xFF00) >> 8;
- arr[6] = $("#gamma-slider-input").val() & 0x00FF;
- arr[7] = $("#gain-slider-input").val();
- arr[8] = $("#sharpness-slider-input").val();
-
- // socket8080.socket.send(buf);
-
- // Convert to readable form
- var hex = '';
- for (var i = 0; i < arr.length; i++)
- hex += ('00' + arr[i].toString(16)).substr(-2);
-
- if (DEBUG) console.log("Binary message sent. " + hex);
- } else console.log("Connection not opened.");
- }
-
- /*
- * set interval to update motor values
- * take care to not overload CPU
- */
- setInterval(function() {
- if (sockets.io.connected && controlCanvas.isCoordinatesClicked())
- setMotors();
- }, INTERVAL);
-
-
- }
-})();
diff --git a/client/src/js/state/index.js b/client/src/js/state/index.js
index 024bd2f..a7fee64 100644
--- a/client/src/js/state/index.js
+++ b/client/src/js/state/index.js
@@ -6,7 +6,7 @@ let state = {
video_devices: [],
},
- showBootScreen: true,
+ showSplashScreen: true,
mode: 'drive',
manipulator: {
axis1: {
diff --git a/client/src/js/ui.js b/client/src/js/ui.js
deleted file mode 100644
index 6cacdb2..0000000
--- a/client/src/js/ui.js
+++ /dev/null
@@ -1,672 +0,0 @@
-/*
- * UI is responsible for all interactions User <-> Application
- * It uses the Revealing Module Pattern
- * https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
- */
-
-var ui = (function() {
- /*
- * PRIVATE area
- */
-
- /*
- * INTERFACE functions
- */
- function updateInterface() {
- /* set width of right navigation div */
- $('#right-navigation-div').css("height", $('#right-navigation-div').width() + 0.03 * $(window).height());
- }
-
- updateInterface();
-
- window.addEventListener('resize', function(event) {
- updateInterface();
- });
-
- /*
- * obvious stupid function
- */
- function isInternetExplorer() {
- var ua = window.navigator.userAgent;
- var msie = ua.indexOf("MSIE ");
- var trident = ua.indexOf('Trident/');
-
- return (msie > 0 || trident > 0);
- }
-
- /*
- * saves the date of loading the session - used for timer
- */
- var startTime = new Date();
- setInterval(function() {
- updateSessionTimer()
- }, 1000);
-
- function updateSessionTimer() {
- var time = new Date();
- var diff = time - startTime;
- diff = Math.round(diff / 1000); // change from milliseconds to seconds
- var minutes = Math.floor(diff / 60);
- var seconds = diff - minutes * 60;
-
- // add leading 0 to the string
- function pad(n) {
- return (n < 10) ? ("0" + n) : n;
- }
-
- $('#session-time-h1').text(pad(String(minutes)) + ":" + pad(String(seconds)));
- };
-
- function advancedInterfaceChanged() {
- if ($("#advanced-interface-button").prop('checked') == false) {
- Cookies.set("advanced-interface", false);
- $(".advanced-interface").fadeIn();
- } else {
- Cookies.set("advanced-interface", true);
- $(".advanced-interface").fadeOut();
- }
- };
-
- /*function photographyChanged() {
- if($("#photography-button").prop('checked') == false) {
- Cookies.set("photography", false);
- }
- else {
- Cookies.set("photography", true);
- }
- }*/
-
- /*
- * run popup window with shellinabox
- */
- function consoleButtonClicked() {
- // run shellbox
- message = "";
- $('#banner').trigger("click");
- vex.dialog.alert({
- unsafeMessage: message
- })
- };
-
- /*
- * MULTILANGUAGE
- */
-
- function languageChanged(lng) {
- var newLanguage = lng;
- console.log("new language: " + newLanguage);
-
- // set cookie for the next visit
- Cookies.set("language", newLanguage);
-
- // change displayed language
- newLanguage = newLanguage.toLowerCase();
- setLanguage(newLanguage);
- }
-
- /*
- * display language selector - user can choose user interface language
- */
- function displayLanguageSelector() {
- /*
- * read language used in previous session
- * if undefined set to English
- */
-
- // var previousSessionLanguage = Cookies.get("language");
- // if (previousSessionLanguage == undefined) previousSessionLanguage = "US";
-
- // $("#languageSelector").attr({
- // "data-selected-country": previousSessionLanguage
- // });
- //
- // $("#languageSelector").flagStrap({
- // countries: {
- // "PL": "Poland",
- // "US": "United States",
- // "DE": "Germany"
- // },
- // buttonSize: "btn-sm",
- // buttonType: "btn-info",
- // labelMargin: "10px",
- // scrollable: false,
- // scrollableHeight: "350px"
- // });
- // var lng = $("#languageSelector select option:selected").val();
- // console.log("interface language: " + lng);
- // return lng;
- }
-
- /*
- * set displayed language
- */
- function setLanguage(lng) {
- i18next.init({
- "debug": false,
- "lng": lng,
- "fallbackLng": false,
- "backend": {
- "loadPath": "locales/{{lng}}.json"
- }
- }, function(err, t) {
- // initialized and ready to go!
- if (DEBUG) console.log("Initialized: " + i18next.t('my-button'));
-
- // translate all elements with class 'localised'
- $(".localised").each(function(index) {
- var id = $(this).attr('id');
- $(this).text(i18next.t(id));
- });
- });
- }
-
- /*
- * initialize i18next, load JSON translations and change displayed language
- */
- function initializeMultilanguage() {
- // display selector and read last used language (from cookies)
- var lng = String(displayLanguageSelector()).toLowerCase();
-
- i18next.use(window.i18nextXHRBackend);
- setLanguage(lng);
- }
-
- /*
- * OTHER
- */
- /*
- * send any type of data to the controller module
- */
- function sendMessageToController(message) {
- amplify.publish("ui->controller", message);
- }
-
- /*
- * set the source of an image depending on connection status
- */
- function setCameraBackground(camera) {
- /* if (camera && isInternetExplorer()) {
- setInterval(function (){
- time = new Date();
- $("#camera-video-img").attr("src", "http://192.168.10.1:8090/?action=snapshot&time="+ time.getTime());
- }, 100);
- }
- else if (camera) $("#camera-video-img").attr("src", "http://192.168.10.1:8090/?action=stream");
- else $("#camera-video-img").attr("src", "assets/img/marsyard-camera.jpg");
- if (camera) {
- // rotate camera
- var deg = 0;
- var rotate = 'rotate(' + deg + 'deg)';
- $("#camera-video-img").each(function () {
- $(this).css({
- '-webkit-transform': rotate,
- '-moz-transform': rotate,
- '-o-transform': rotate,
- '-ms-transform': rotate,
- 'transform': rotate
- });
- });
- } */
- }
-
- /*
- * hide welcome screen is called when page is already loaded
- */
- function hideWelcomeScreen() {
- $(".inner").fadeOut("slow");
- }
-
- function displayCameraVideo() {
- $("#camera-video").fadeIn();
- $("#navigation-ring-div").fadeIn();
-
- $(".alt").fadeIn();
- $(".footer").fadeIn();
-
- // hide some elements if interface in advanced mode
- if ($("#advanced-interface-button").prop('checked') == true) $(".advanced-interface").hide();
-
- updateInterface();
- }
-
- /*
- * display welcome screen
- */
- function displayWelocmeScreen() {
- $("#go-button").fadeIn();
- }
-
- /*
- * switch to fullscreen mode
- */
- function toggleFullScreen() {
- // for internet explorer use body as full screen, not the document
- if (isInternetExplorer()) $('.landing').toggleFullScreen();
- else $(document).toggleFullScreen();
- }
-
- /*
- * take schreenshot of the view and prompt to save
- */
- function takeScreenShot() {
- /*html2canvas(document.body, {
- onrendered: function (canvas) {
- console.log("saved as image");
- canvas.toBlob(function(blob) {
- saveAs(blob, "snap.png");
- });
- }
- });*/
- var video = document.getElementById('camera-video-img');
- var canvas = document.getElementById('snap-background-canvas');
- var context = canvas.getContext('2d');
- canvas.width = video.clientWidth;
- canvas.height = video.clientHeight;
-
- context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
-
- /*
- * draw also turtle logo
- */
- var img = new Image;
-
- /*canvas.toBlob(function(blob) {
- saveAs(blob, "turtle_snap.png");
- });*/
-
- img.src = 'assets/img/hud/turtle-logo.png';
-
-
- var logoWidth = video.clientWidth / 12;
- var logoHeight = logoWidth * 0.265;
- context.drawImage(img, 25, 10, logoWidth, logoHeight);
- var d = new Date();
- var link = document.getElementById('snap-download-a');
- link.href = canvas.toDataURL();
- link.download = "turtle_" + d.getFullYear() + "_" + d.getMonth() + 1 + "_" + d.getDate() + "_" + d.getHours() + "_" + d.getMinutes() + "_" + d.getSeconds() + ".png";
- }
-
- function recordVideo() {
- amplify.publish("ui->webrtc", "start stop recording");
- }
-
- /*
- * full screen mode has been changed
- */
- function changedFullScreen() {
- if ($(document).fullScreen()) {
- //$("#full-screen-button-img").attr("src", "assets/img/navigation/fullscreen-exit.png");
- } else {
- //$("#full-screen-button-img").attr("src", "assets/img/navigation/fullscreen.png");
- }
- }
-
- /*
- * show or hide side menu
- */
- function showHideMenu(pointer) {
- if (pointer.is(":visible")) {
- setTimeout(function() {
- pointer.hide();
- }, 250);
- var height = String(pointer.height()) + "px";
- pointer.transition({
- y: height
- });
- } else {
- pointer.show();
- var height = "-" + String(pointer.height()) + "px";
- pointer.transition({
- y: 0
- });
- }
- }
-
- /*
- * display notification for a user using noty library
- */
- function displayNotification(id) {
- message = i18next.t(id);
- console.log(message);
- noty({
- layout: 'top',
- theme: 'defaultTheme',
- type: 'warning',
- timeout: 2000,
- closeWith: ['click'],
- text: '' + message + '
'
- });
- }
-
- /*
- * if the rover has mounted camera rotation device, the slider should be back to the center if touchup and mousup
- */
- /*function gripperSliderUp() {
- if($("#photography-button").prop('checked'))
- $("#gripper-slider-input").val(
- (parseInt($("#gripper-slider-input").attr("max"))+parseInt($("#gripper-slider-input").attr("min"))) * 0.5);
- }
- function cameraSliderUp() {
- $("#camera-slider-input").val(
- (parseInt($("#camera-slider-input").attr("max"))+parseInt($("#camera-slider-input").attr("min"))) * 0.5);
- }*/
-
- /*
- * SUBSCRIBE topics
- */
- amplify.subscribe("controller->ui", controllerMessageCallback);
- amplify.subscribe("all->ui", allMessageCallback);
-
- /*
- * CALLBACK functions
- */
- function controllerMessageCallback(message) {
- if (DEBUG) console.log("controller->ui: " + message);
-
- // choose action
- switch (message) {
- case "hide welcome screen":
- hideWelcomeScreen();
- break;
- case "display camera video":
- displayCameraVideo();
- break;
- case "initialize multilanguage":
- initializeMultilanguage();
- break;
- case "change image source to camera":
- setCameraBackground(true);
- break;
- case "change image source to default background":
- setCameraBackground(false);
- break;
- case "wait until GO button is pressed":
- displayWelocmeScreen();
- setLastStatusDone(true);
- addNewStatus("turtle is ready to go!");
- setTimeout(function() {
- setLastStatusDone(true);
- addNewStatus("battery voltage: ", "battery-level-text", false);
- addNewStatus("signal strength: ", "signal-strength-text", false);
- addNewStatus("processor temp.: ", "processor-temperature-text", false);
- }, 1000);
- break;
- case "turtle is awake":
- // setLastStatusDone(true);
- // addNewStatus("connecting...");
- break;
- default:
- console.log("unknown command: " + message);
- }
- };
-
- function allMessageCallback(message) {
- //if (DEBUG) console.log("all->ui: " + message);
-
- // choose action
- switch (message) {
- case "notifications.working-on":
- displayNotification(message);
- break;
- case "notifications.server-connection-error":
- displayNotification(message);
- break;
- case "notifications.client-already-connected":
- displayNotification(message);
- break;
- case "console button clicked":
- consoleButtonClicked();
- break;
- case "set last status done":
- // setLastStatusDone(true);
- break;
- case "set last status error":
- // setLastStatusDone(false);
- break;
- case "initialize camera...":
- // addNewStatus(message);
- break;
- case "set battery level to full":
- setBatteryLevel(4);
- break;
- case "set battery level to 3":
- setBatteryLevel(3);
- break;
- case "set battery level to 2":
- setBatteryLevel(2);
- break;
- case "set battery level to 1":
- setBatteryLevel(1);
- break;
- case "set battery level to 0":
- setBatteryLevel(0);
- break;
-
- default:
- console.log("unknown command: " + message);
- }
- };
-
- /*
- * EVENT functions
- */
- $("#languageSelector").change(function(e, data) {
- languageChanged(data);
- });
- $(".fullscreen-button-img").click(function() {
- toggleFullScreen();
- });
- $("#snap-button-img").click(function() {
- takeScreenShot();
- });
- $("#record-button-img").click(function() {
- recordVideo();
- });
- $(document).bind("fullscreenchange", function() {
- changedFullScreen();
- });
- $("#advanced-interface-button").change(function(e, data) {
- advancedInterfaceChanged();
- });
- //$("#photography-button").change(function(e, data) {photographyChanged();});
- $("#go-button").click(function() {
- var remoteVideoElement = document.getElementById('camera-video-img');
- remoteVideoElement.play();
- toggleFullScreen();
- amplify.publish("ui->controller", "GO button is pressed");
- });
- $("#open-console-button").click(function() {
- consoleButtonClicked();
- });
-
- $("#show-hide-right-menu-img").click(function() {
- showHideMenu($("#right-navigation-div"));
- });
-
- $("#brightness-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
- $("#contrast-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
- $("#saturation-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
- $("#hue-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
- $("#gamma-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
- $("#gain-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
- $("#sharpness-slider").change(function(e, data) {
- amplify.publish("ui->port8080", "update camera settings");
- });
-
- $("#gripper-slider").on("input", function(e, data) {
- amplify.publish("ui->port8080", "set new gripper position");
- });
- $("#axis1-slider").on("input", function(e, data) {
- amplify.publish("ui->port8080", "set new axis1 position");
- });
- $("#axis2-slider").on("input", function(e, data) {
- amplify.publish("ui->port8080", "set new axis2 position");
- });
- //$("#camera-slider").on("input", function(e, data) {amplify.publish("ui->port8080", "set new camera position");});
- /*
- * TBD: is it better to have it back to the center or not?
- $("#gripper-slider").on("mouseup touchend", function(e, data) {gripperSliderUp();});
- $("#camera-slider").on("mouseup touchend", function(e, data) {cameraSliderUp();});
- */
-
- $("#mani-axis-1").change(function(e, data) {
- amplify.publish("ui->port8080", "set new mani position");
- });
- $("#mani-axis-2").change(function(e, data) {
- amplify.publish("ui->port8080", "set new mani position");
- });
-
- $("#mani-x").change(function(e, data) {
- amplify.publish("ui->manipulator", "move mani");
- });
- $("#mani-y").change(function(e, data) {
- amplify.publish("ui->manipulator", "move mani");
- });
-
- function setBatteryLevel(level) {
- if (level == 4) $("#indicator-battery").attr('src', 'client/img/ui/battery-4.svg');
- else if (level == 3) $("#indicator-battery").attr('src', 'client/img/ui/battery-3.svg');
- else if (level == 2) $("#indicator-battery").attr('src', 'client/img/ui/battery-2.svg');
- else if (level == 1) $("#indicator-battery").attr('src', 'client/img/ui/battery-1.svg');
- else $("#battery-level-indicator-img").attr('src', 'client/img/ui/battery-0.svg');
- }
-
-
-
-
- /*
- * SEND information to controller
- */
- amplify.publish("ui->controller", "ui is ready for operation");
-
- /*
- * LOADING area
- * things to do while the page is loaded
- */
-
- /*
- * this function enables jquery flagstrap form drop-down menu in #menu
- */
- // $(function() {
- // // Setup drop down menu
- // $('.dropdown-toggle').dropdown();
- //
- // // Fix input element click problem
- // $('.dropdown input, .dropdown label').click(function(e) {
- // e.stopPropagation();
- // });
- // });
-
- /*
- * read settings from last session
- */
- // $(function() {
- // readSetting(Cookies.get("advanced-interface"), "#advanced-interface-button", "true");
- // readSetting(Cookies.get("photography"), "#photography-button", "false");
- // });
-
- function readSetting(value, name, defVal) {
- if (value == undefined) value = defVal;
-
- if (value == "false") $(name).prop('checked', false);
- else $(name).prop('checked', true);
- }
-
- // GRIPPER range
- $(function() {
- // var axis1_max = Cookies.get("mani-axis-1-max") || $('#axis1-slider-input').attr('max');
- // var axis1_min = Cookies.get("mani-axis-1-min") || $('#axis1-slider-input').attr('min');
- //
- // var axis2_max = Cookies.get("mani-axis-2-max") || $('#axis2-slider-input').attr('max');
- // var axis2_min = Cookies.get("mani-axis-2-min") || $('#axis2-slider-input').attr('min');
- var axis1_max = $('#axis1-slider-input').attr('max');
- var axis1_min = $('#axis1-slider-input').attr('min');
-
- var axis2_max = $('#axis2-slider-input').attr('max');
- var axis2_min = $('#axis2-slider-input').attr('min');
-
- // if (Cookies.get("mani-axis-1-max")) {
- // $("#axis1-slider-input").attr({
- // "max": axis1_max
- // });
- // }
- // if (Cookies.get("mani-axis-1-min")) {
- // $("#axis1-slider-input").attr({
- // "min": axis1_max
- // });
- // }
- // if (Cookies.get("mani-axis-2-max")) {
- // $("#axis2-slider-input").attr({
- // "max": axis2_max
- // });
- // }
- // if (Cookies.get("mani-axis-2-min")) {
- // $("#axis2-slider-input").attr({
- // "min": axis2_min
- // });
- // }
-
- $('#mani-axis-1-max').val(axis1_max);
- $('#mani-axis-1-min').val(axis1_min);
-
- $('#mani-axis-2-max').val(axis2_max);
- $('#mani-axis-2-min').val(axis2_min);
-
- $("#mani-axis-1-max").on("change", function() {
- if ($('#mani-axis-1-max').val() > $('#mani-axis-1-min').val()) {
- $("#axis1-slider-input").attr({
- "max": $('#mani-axis-1-max').val()
- });
- // Cookies.set("mani-axis-1-max", $('#mani-axis-1-max').val());
- }
- });
- $("#mani-axis-1-min").on("change", function() {
- if ($('#mani-axis-1-max').val() > $('#mani-axis-1-min').val()) {
- $("#axis1-slider-input").attr({
- "min": $('#mani-axis-1-min').val()
- });
- // Cookies.set("mani-axis-1-min", $('#mani-axis-1-min').val());
- }
- });
- $("#mani-axis-2-max").on("change", function() {
- if ($('#mani-axis-2-max').val() > $('#mani-axis-2-min').val()) {
- $("#axis2-slider-input").attr({
- "max": $('#mani-axis-2-max').val()
- });
- // Cookies.set("mani-axis-2-max", $('#mani-axis-2-max').val());
- }
- });
- $("#mani-axis-2-min").on("change", function() {
- if ($('#mani-axis-1-max').val() > $('#mani-axis-1-min').val()) {
- $("#axis2-slider-input").attr({
- "min": $('#mani-axis-2-min').val()
- });
- // Cookies.set("mani-axis-2-min", $('#mani-axis-2-min').val());
- }
- });
- });
-
-
- /*
- * configure vex dialogs
- */
- vex.defaultOptions.className = 'vex-theme-os';
-
- /*
- * PUBLIC area
- * Reveal public pointers to private functions and properties.
- */
- return {};
-})();
diff --git a/client/src/js/view/components/elements/hold-button.js b/client/src/js/view/components/elements/button-hold.js
similarity index 70%
rename from client/src/js/view/components/elements/hold-button.js
rename to client/src/js/view/components/elements/button-hold.js
index f05b20e..9cc338c 100644
--- a/client/src/js/view/components/elements/hold-button.js
+++ b/client/src/js/view/components/elements/button-hold.js
@@ -1,13 +1,16 @@
import { h } from 'hyperapp'
import { setInterval } from 'core-js';
-export const HoldButton = ({state, value, text, setValue}) =>
+export const ButtonHold = ({state, value, text, setValue}) =>
@@ -48,7 +51,7 @@ const clearTimers = (event) => {
const disable = (el) => {
el.disabled = true;
- el.children[0].classList.add('button-hold_counter-disabled')
+ el.children[0].classList.add('button-hold__counter--disabled')
el.style.background = 'black';
}
\ No newline at end of file
diff --git a/client/src/js/view/components/elements/number-input.js b/client/src/js/view/components/elements/input-number.js
similarity index 69%
rename from client/src/js/view/components/elements/number-input.js
rename to client/src/js/view/components/elements/input-number.js
index e40f52f..b45c909 100644
--- a/client/src/js/view/components/elements/number-input.js
+++ b/client/src/js/view/components/elements/input-number.js
@@ -1,10 +1,10 @@
import { h } from 'hyperapp'
-export const NumberInput = ({label, value, step, inc, dec}) =>
-