- →
-
-
- →
-
-
-
+ {this.props.children}
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/Dashboard.tsx b/src/app/components/Dashboard.tsx
new file mode 100644
index 0000000..895c9c5
--- /dev/null
+++ b/src/app/components/Dashboard.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import Camera from "./Camera";
+import Column from "./Column";
+import Indicator from "./Indicator";
+import RadioIndicator from "./RadioIndicator";
+import Slider from "./Slider";
+
+interface DashProps {
+
+}
+interface DashState {
+
+}
+
+export default class Dashboard extends React.Component
+
+
+
+
+
;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/NetworkTables.tsx b/src/app/components/NetworkTables.tsx
new file mode 100644
index 0000000..2c60146
--- /dev/null
+++ b/src/app/components/NetworkTables.tsx
@@ -0,0 +1,265 @@
+let ipc = require('electron').ipcRenderer;
+type Listener = (key: string, val: any, isNew?: boolean) => void;
+
+const NetworkTable = ((): NetworkTables => {
+ let keys = {} as {[key: string]: any},
+ connectionListeners = [] as any[],
+ connected = false,
+ globalListeners = [] as any[],
+ keyListeners = {} as {[key: string]: any},
+ trueKeyListeners = {} as {[key: string]: Listener[]},
+ valHistory = {} as {[key: string]: any},
+ robotAddress = '127.0.0.1';
+ ipc.send('ready');
+ ipc.on('connected', (ev: any, con: any) => {
+ connected = con;
+ connectionListeners.map(e => e(con));
+ });
+ ipc.on('add', (ev: any, mesg: any) => {
+ keys[mesg.key] = { val: mesg.val, valType: mesg.valType, id: mesg.id, flags: mesg.flags, new: true };
+ globalListeners.map((e: any) => e(mesg.key, mesg.val, true));
+ if (globalListeners.length > 0)
+ keys[mesg.key].new = false;
+ if (mesg.key in keyListeners) {
+ keyListeners[mesg.key].map((e: any) => e(mesg.key, mesg.val, true));
+ keys[mesg.key].new = false;
+ }
+ });
+ ipc.on('delete', (ev: any, mesg: any) => {
+ delete keys[mesg.key];
+ });
+ ipc.on('update', (ev: any, mesg: any) => {
+ console.log(mesg);
+ let temp = keys[mesg.key];
+ temp.flags = mesg.flags;
+ temp.val = mesg.val;
+ globalListeners.map(e => e(mesg.key, temp.val, temp.new));
+ if (globalListeners.length > 0)
+ keys[mesg.key].new = false;
+ if (mesg.key in keyListeners) {
+ keyListeners[mesg.key].map((e: any) => e(mesg.key, temp.val, temp.new));
+ temp.new = false;
+ }
+ });
+ ipc.on('flagChange', (ev: any, mesg: any) => {
+ keys[mesg.key].flags = mesg.flags;
+ });
+ var d3_map = function () {
+ this._ = Object.create(null);
+ this.forEach = function (f: any) {
+ for (var key in this._)
+ f.call(this, d3_map_unescape(key), this._[key]);
+ };
+ this.get = function (key: any) {
+ return this._[d3_map_escape(key)];
+ };
+ this.getKeys = function () {
+ var keys = [];
+ for (var key in this._)
+ keys.push(d3_map_unescape(key));
+ return keys;
+ };
+ this.has = function (key: any) {
+ return d3_map_escape(key) in this._;
+ };
+ this.set = function (key: any, value: any) {
+ return this._[d3_map_escape(key)] = value;
+ };
+ };
+ var d3_map_proto = '__proto__', d3_map_zero = '\x00';
+ function d3_map_escape(key: any) {
+ return (key += '') === d3_map_proto || key[0] === d3_map_zero ? d3_map_zero + encodeURIComponent(key) : encodeURIComponent(key);
+ }
+ function d3_map_unescape(key: any) {
+ return (key += '')[0] === d3_map_zero ? decodeURIComponent(key.slice(1)) : decodeURIComponent(key);
+ }
+ return {
+ addRobotConnectionListener(f, immediateNotify) {
+ if (typeof f !== 'function') return new Error('Invalid argument')
+
+ connectionListeners.push(f);
+ if (immediateNotify) f(connected);
+ },
+ addGlobalListener(f, immediateNotify) {
+ if (typeof f !== 'function') return new Error('Invalid argument')
+
+ globalListeners.push(f);
+ if (immediateNotify) {
+ for (let key in keys) {
+ f(key, keys[key].val, keys[key].new);
+ keys[key].new = false;
+ }
+ }
+ },
+ addKeyListener(key, f, immediateNotify) {
+ if (typeof key !== 'string' || typeof f !== 'function') return new Error('Valid Arguments are (string, function)')
+
+ if (typeof keyListeners[key] !== 'undefined') {
+ keyListeners[key].push(f);
+ }
+ else {
+ keyListeners[key] = [f];
+ }
+ if (immediateNotify && key in keys) {
+ let temp = keys[key];
+ f(key, temp.val, temp.new);
+ }
+ },
+ containsKey(key) {
+ return key in keys;
+ },
+ getKeys() {
+ return Object.keys(keys);
+ },
+ getValue(key, defaultValue) {
+ if (typeof key !== 'string') return new Error('Invalid Argument')
+
+ if (typeof keys[key] !== 'undefined') {
+ return keys[key].val;
+ }
+ else {
+ return defaultValue;
+ }
+ },
+ getRobotAddress() {
+ return connected ? robotAddress : null;
+ },
+ isRobotConnected() {
+ return connected;
+ },
+ putValue(key, value) {
+ if (typeof keys[key] !== 'undefined') {
+ keys[key].val = value;
+ ipc.send('update', { key, val: value, id: keys[key].id, flags: keys[key].flags });
+ }
+ else {
+ ipc.send('add', { key, val: value, flags: 0 });
+ }
+ return connected;
+ },
+ create_map() {
+ return new (d3_map as any)();
+ },
+ keyToId: encodeURIComponent,
+ keySelector(key: string) {
+ return encodeURIComponent(key).replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1');
+ },
+ listenFor(key, callback) {
+ if (trueKeyListeners[key]) {
+ trueKeyListeners[key].push(callback);
+ } else {
+ trueKeyListeners[key] = [callback];
+ }
+
+ },
+ clock() {
+ Object.keys(trueKeyListeners).forEach(key=>{
+ let val = NetworkTable.getValue("/SmartDashboard/" + key);
+ trueKeyListeners[key].forEach(func => {
+ func(key, val, val === valHistory[key]);
+ });
+ valHistory[key] = val;
+ });
+ setTimeout(this.clock, 20);
+ }
+ }
+})();
+NetworkTable.clock();
+export default NetworkTable;
+
+interface NetworkTables {
+ /**
+ * Sets a function to be called when the robot connects/disconnects to the pynetworktables2js server via NetworkTables. It will also be called when the websocket connects/disconnects.
+ *
+ * When a listener function is called with a ‘true’ parameter, the NetworkTables.getRobotAddress() function will return a non-null value.
+ * @param {(connected: boolean) => any} f a function that will be called with a single boolean parameter that indicates whether the robot is connected
+ * @param {boolean} [immediateNotify] If true, the function will be immediately called with the current robot connection state
+ */
+ addRobotConnectionListener(f: (connected:boolean) => void, immediateNotify: boolean): void;
+
+ /**
+ * Set a function that will be called whenever any NetworkTables value is changed
+ * @param {(key: string, value: any, isNew: boolean) => any} f When any key changes, this function will be called with the following parameters; key: key name for entry, value: value of entry, isNew: If true, the entry has just been created
+ * @param {boolean} [immediateNotify] If true, the function will be immediately called with the current value of all keys
+ */
+ addGlobalListener(f: Listener, immediateNotify: boolean): void;
+
+ /**
+ * Set a function that will be called whenever a value for a particular key is changed in NetworkTables
+ * @param {string} key A networktables key to listen for
+ * @param {(key: string, value: any, isNew: boolean) => any} f When the key changes, this function will be called with the following parameters; key: key name for entry, value: value of entry, isNew: If true, the entry has just been created
+ * @param {boolean} [immediateNotify] If true, the function will be immediately called with the current value of the specified key
+ */
+ addKeyListener(key: any, f: Listener, immediateNotify: boolean): void;
+
+ /**
+ * Use this to test whether a value is present in the table or not
+ * @param {string} key A networktables key
+ * @returns true if a key is present in NetworkTables, false otherwise
+ */
+ containsKey(key: string): boolean;
+
+ /**
+ * Get all keys in the NetworkTables
+ * @returns all the keys in the NetworkTables
+ */
+ getKeys(): string[];
+
+ /**
+ * Returns the value that the key maps to. If the websocket is not open, this will always return the default value specified.
+ * @param {string} key A networktables key
+ * @param {any} [defaultValue] If the key isn’t present in the table, return this instead
+ * @returns value of key if present, undefined or defaultValue otherwise
+ */
+ getValue(key: string, defaultValue?: any): any;
+
+ /**
+ * @returns null if the robot is not connected, or a string otherwise
+ */
+ getRobotAddress(): string;
+
+ /**
+ * @returns true if the robot is connected
+ */
+ isRobotConnected(): boolean;
+
+ /**
+ * Sets the value in NetworkTables. If the websocket is not connected, the value will be discarded.
+ * @param {string} key A networktables key
+ * @param value The value to set (see warnings)
+ * @returns True if the websocket is open, False otherwise
+ */
+ putValue(key: string, value: any): boolean,
+
+ /**
+ * Creates a new empty map (or hashtable) object and returns it. The map is safe to store NetworkTables keys in.
+ * @returns map object, with forEach/get/has/set functions defined. Simlar to a map object when using d3.js
+ */
+ create_map(): Map
+ {this.state.value + this.props.units}
+
+ {this.props.title}
+ {
+ ...this.props.values.map(s => {
+ return
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/Slider.tsx b/src/app/components/Slider.tsx
new file mode 100644
index 0000000..be5f24f
--- /dev/null
+++ b/src/app/components/Slider.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import NetworkTable from "./NetworkTables";
+
+interface SliderProps {
+ min: number;
+ max: number;
+ initial: number;
+ step: number;
+ title: string;
+ ntTableKey?: string;
+}
+interface SliderState {
+ value: number;
+}
+
+export default class Slider extends React.Component{s}
;
+ })
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/app/css/ui.css b/src/app/css/ui.css
new file mode 100644
index 0000000..0d007cb
--- /dev/null
+++ b/src/app/css/ui.css
@@ -0,0 +1,184 @@
+:root {
+ --black: #110916;
+ --gray: #2A2D34;
+ --navy: rgba(30, 30, 80, 1);
+ --viridian-green: #2F9C95;
+ --other-green: #40C9A2;
+ --white: #E5F9E0;
+ --gradientend: #0575e6;
+ --gradientmid: #00ffde;
+ --circleDiameter: 90px;
+}
+
+@keyframes gradient {
+ 0% {
+ background-position: 0% 100%;
+ }
+ 100% {
+ background-position: 100% 0%;
+ }
+}
+
+html, body, #root {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background-color: var(--black);
+ overflow: hidden;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+#root {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: row;
+}
+.column {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex-direction: column;
+ background-color: var(--gray);
+ padding-left: 20px;
+ padding-right: 20px;
+ height: 100%;
+}
+.camera{
+ background-size: contain;
+ background-repeat: no-repeat;
+ overflow: hidden;
+ height: 100%;
+}
+.circleIndicator {
+ width: var(--circleDiameter);
+ height: var(--circleDiameter);
+ border-radius: var(--circleDiameter);
+ background: var(--gray);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: transparent;
+ font-weight: bold;
+ font-size: 1.75em;
+ margin: 5px;
+ position: relative;
+}
+.circleIndicator::before {
+ content: "";
+ width: calc(var(--circleDiameter) + 10px);
+ height: calc(var(--circleDiameter) + 10px);
+ position: absolute;
+ top: -5px;
+ left: -5px;
+ border-radius: var(--circleDiameter);
+ background-clip: unset !important;
+ z-index: -1;
+}
+.circleContainer {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ flex-direction: column;
+ margin: 5px;
+ position: relative;
+ z-index: 1;
+}
+.indicatorBox {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-direction: row;
+}
+div.circleTitle {
+ max-width: calc(var(--circleDiameter) + 20px);
+ text-align: center;
+ font-weight: bolder;
+ font-size: 1.25em;
+ background-image: linear-gradient(45deg, var(--gradientmid) 0%, var(--gradientmid) 20%, var(--gradientend) 50%, var(--gradientmid) 80%, var(--gradientmid) 100%);
+}
+.radioDisplay {
+ margin: 2em 1em 2em 1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ background-color: var(--navy);
+ font-weight: bold;
+ font-size: 1.5em;
+}
+.radioButton {
+ background-color: var(--black);
+ padding: 30px;
+ position: relative;
+ z-index: 1;
+ color: var(--gray);
+}
+.radioButton::after {
+ content: "";
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+div.selected {
+ color: transparent;
+}
+div.selected::after {
+ background-color: transparent;
+}
+.gradient, .circleIndicator::before {
+ animation: gradient 5s linear infinite;
+ background-image: linear-gradient(45deg, var(--gradientend) 0%, var(--gradientend) 20%, var(--gradientmid) 50%, var(--gradientend) 80%, var(--gradientend) 100%);
+ background-size: 500% 500%;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+}
+
+.slider {
+ width: 100%;
+ color: var(--white);
+ font-size: 1.5em;
+}
+.flexRow {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+}
+.sliderValue {
+ width: 20%;
+ background-color: var(--gray);
+ border-radius: 5px;
+}
+
+
+input[type=range] {
+ -webkit-appearance: none;
+ background-color: transparent;
+ flex-grow: 1;
+}
+
+input[type=range]:focus {
+ outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ cursor: pointer;
+ background: var(--black);
+ border-radius: 25px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ background: var(--gradientend);
+ cursor: pointer;
+ -webkit-appearance: none;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {}
\ No newline at end of file
diff --git a/src/app/index.html b/src/app/index.html
new file mode 100644
index 0000000..9bbd29f
--- /dev/null
+++ b/src/app/index.html
@@ -0,0 +1,12 @@
+
+
+
+ {this.props.title}
+
+
+
+ {this.state.value}
+
-
-
-
- BIG TEXT
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
deleted file mode 100644
index 7d20431..0000000
--- a/test/test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-var arms = document.getElementsByClassName('arms');
-var update = document.getElementById('update');
-
-/*update.oninput = function () {
- var armsArr = Object.values(arms);
- armsArr.forEach(arm=>{
- arm.style.transform = "translateY("+-parseInt(update.value)+"px)";
- //console.log(arm);
- });
-}*/
-
-var startval = {
- x: 322,
- y: 365
-}
-
-function tempname(elem) {
- //console.log(elem.style.top.slice(0,-2),elem.style.left.slice(0,-2));
- var botx = Number(elem.style.top.slice(0,-2))-startval.x;
- var boty = Number(elem.style.left.slice(0,-2))-startval.y;
- document.getElementById("x").innerHTML="x = "+botx+"in";
- document.getElementById("y").innerHTML="y = "+boty+"in";
-}
diff --git a/tryIPC.js b/tryIPC.js
deleted file mode 100644
index f1eb08f..0000000
--- a/tryIPC.js
+++ /dev/null
@@ -1,7 +0,0 @@
-let ipc, noElectron = false;
-try {
- ipc = require('electron').ipcRenderer;
-}
-catch (e) {
- noElectron = true;
-}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3382b4c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "outDir": "./build/",
+ "noImplicitAny": true,
+ "module": "commonjs",
+ "target": "es6",
+ "jsx": "react",
+ "typeRoots": ["./node_modules/@types"]
+ },
+ "include": ["./src"],
+ "exclude": ["./src/app/"]
+}
\ No newline at end of file
diff --git a/ui.js b/ui.js
deleted file mode 100644
index 0246203..0000000
--- a/ui.js
+++ /dev/null
@@ -1,326 +0,0 @@
-// Define UI elements
- val: 0,
- offset: 0,
- visualVal: 0,
- arm: document.getElementById('gyro-arm'),
- number: document.getElementById('gyro-number')
- },
- robotDiagram: {
- arm: document.getElementById('robot-arm'),
- grabber: document.getElementById('grabber')
- },
- arms: {
- grabber: document.getElementById('grabberadjust')
- },
- example: {
- button: document.getElementById('example-button'),
- readout: document.getElementById('example-readout').firstChild
- },
- tuning: {
- list: document.getElementById('tuning'),
- button: document.getElementById('tuning-button'),
- name: document.getElementById('name'),
- value: document.getElementById('value'),
- set: document.getElementById('set'),
- get: document.getElementById('get')
- },
- autoSelect: document.getElementById('auto-select'),
- armPosition: document.getElementById('arm-position'),
- position: document.getElementById('position'),
- destination: document.getElementById('destination')
-};
-let address = document.getElementById('connect-address'),
- connect = document.getElementById('connect');
-let ui = {
- timer: document.getElementById('timer'),
- robotState: document.getElementById('robot-state').firstChild,
- gyro: {
- container: document.getElementById('gyro'),
-
-// Sets function to be called on NetworkTables connect. Commented out because it's usually not necessary.
-// NetworkTables.addWsConnectionListener(onNetworkTablesConnection, true);
-
-// Sets function to be called when robot dis/connects
-NetworkTables.addRobotConnectionListener(onRobotConnection, false);
-
-// Sets function to be called when any NetworkTables key/value changes
-NetworkTables.addGlobalListener(onValueChanged, true);
-
-let escCount = 0;
-window.onkeydown = (key) => {
- if (key.key === 'Escape') {
- setTimeout(() => { escCount = 0; }, 400);
- escCount++;
- console.log(escCount);
- if (escCount === 2) {
- document.body.classList.toggle('login-close', true);
- }
- }
- else
- console.log(key.key);
-};
-if (noElectron) {
- document.body.classList.add('login-close');
-}
-
-function onRobotConnection(connected) {
- var state = connected ? 'Robot connected!' : 'Robot disconnected.';
- console.log(state);
- ui.robotState.data = state;
- if (!noElectron) {
- if (connected) {
- // On connect hide the connect popup
- document.body.classList.toggle('login-close', true);
- }
- else {
- // On disconnect show the connect popup
- document.body.classList.toggle('login-close', false);
- // Add Enter key handler
- address.onkeydown = ev => {
- if (ev.key === 'Enter') {
- connect.click();
- }
- };
- // Enable the input and the button
- address.disabled = false;
- connect.disabled = false;
- connect.firstChild.data = 'Connect';
- // Add the default address and select xxxx
- address.value = '';
- address.focus();
- address.setSelectionRange(8, 12);
- // On click try to connect and disable the input and the button
- connect.onclick = () => {
- ipc.send('connect', address.value);
- address.disabled = true;
- connect.disabled = true;
- connect.firstChild.data = 'Connecting';
- };
- }
- }
-}
-
-/**** KEY Listeners ****/
-
-// Gyro rotation
-let updateGyro = (key, value) => {
- ui.gyro.val = value;
- ui.gyro.visualVal = Math.floor(ui.gyro.val - ui.gyro.offset);
- if (ui.gyro.visualVal < 0) {
- ui.gyro.visualVal += 360;
- }
- ui.gyro.arm.style.transform = `rotate(${ui.gyro.visualVal}deg)`;
- ui.gyro.number.innerHTML = ui.gyro.visualVal + 'º';
-};
-NetworkTables.addKeyListener('/SmartDashboard/drive/navx/yaw', updateGyro);
-
-// The following case is an example, for a robot with an arm at the front.
-// Info on the actual robot that this works with can be seen at thebluealliance.com/team/1418/2016.
-NetworkTables.addKeyListener('/SmartDashboard/arm/encoder', (key, value) => {
- // 0 is all the way back, 1200 is 45 degrees forward. We don't want it going past that.
- if (value > 1140) {
- value = 1140;
- }
- else if (value < 0) {
- value = 0;
- }
- // Calculate visual rotation of arm
- var armAngle = value * 3 / 20 - 45;
- // Rotate the arm in diagram to match real arm
- ui.robotDiagram.arm.style.transform = `rotate(${armAngle}deg)`;
-});
-NetworkTables.addKeyListener('/SmartDashboard/time_running', (key, value) => {
- // Sometimes, NetworkTables will pass booleans as strings. This corrects for that.
- if (typeof value === 'string')
- value = value === 'true';
- // When this NetworkTables variable is true, the timer will start.
- // You shouldn't need to touch this code, but it's documented anyway in case you do.
- var s = 135;
- if (value) {
- // Make sure timer is reset to black when it starts
- ui.timer.style.color = 'black';
- // Function below adjusts time left every second
- var countdown = setInterval(function () {
- s--; // Subtract one second
- // Minutes (m) is equal to the total seconds divided by sixty with the decimal removed.
- var m = Math.floor(s / 60);
- // Create seconds number that will actually be displayed after minutes are subtracted
- var visualS = (s % 60);
- // Add leading zero if seconds is one digit long, for proper time formatting.
- visualS = visualS < 10 ? '0' + visualS : visualS;
- if (s < 0) {
- // Stop countdown when timer reaches zero
- clearTimeout(countdown);
- return;
- }
- else if (s <= 15) {
- // Flash timer if less than 15 seconds left
- ui.timer.style.color = (s % 2 === 0) ? '#FF3030' : 'transparent';
- }
- else if (s <= 30) {
- // Solid red timer when less than 30 seconds left.
- ui.timer.style.color = '#FF3030';
- }
- ui.timer.firstChild.data = m + ':' + visualS;
- }, 1000);
- }
- else {
- s = 135;
- }
- NetworkTables.putValue(key, false);
-});
-
-NetworkTables.addKeyListener("/SmartDashboard/position", (key,val)=>{
- var str = val.split(",");
- var arr = [];
- for (var i = 0; i < str.length; i++) {
- arr.push(Number(str[i]));
- }
- var botx = arr[1];
- var boty = arr[0];
- var botangle = arr[2];
- ui.position.style = "left: "+(botx-5)+"px;top: "+(boty-5)+"px;transform: rotate("+botangle+"deg);";
-})
-NetworkTables.addKeyListener("/SmartDashboard/destination", (key,val) =>{
- var str = val.split(",");
- var arr = [];
- for (var i = 0; i < str.length; i++) {
- arr.push(Number(str[i]));
- }
- var botx = arr[1];
- var boty = arr[0];
- var botangle = arr[2];
- ui.destination.style = "left: "+(botx-5)+"px;top: "+(boty-5)+"px;transform: rotate("+botangle+"deg);";
-})
-// Load list of prewritten autonomous modes
-NetworkTables.addKeyListener('/SmartDashboard/time_running', (key, value) => {
- // Clear previous list
- while (ui.autoSelect.firstChild) {
- ui.autoSelect.removeChild(ui.autoSelect.firstChild);
- }
- // Make an option for each autonomous mode and put it in the selector
- for (let i = 0; i < value.length; i++) {
- var option = document.createElement('option');
- option.appendChild(document.createTextNode(value[i]));
- ui.autoSelect.appendChild(option);
- }
- // Set value to the already-selected mode. If there is none, nothing will happen.
- ui.autoSelect.value = NetworkTables.getValue('/SmartDashboard/currentlySelectedMode');
-});
-
-// Load list of prewritten autonomous modes
-NetworkTables.addKeyListener('/SmartDashboard/autonomous/selected', (key, value) => {
- ui.autoSelect.value = value;
-});
-
-// Global Listener
-function onValueChanged(key, value, isNew) {
- console.log("valuechanged");
- // Sometimes, NetworkTables will pass booleans as strings. This corrects for that.
- if (value == 'true') {
- value = true;
- }
- else if (value == 'false') {
- value = false;
- }
- // The following code manages tuning section of the interface.
- // This section displays a list of all NetworkTables variables (that start with /SmartDashboard/) and allows you to directly manipulate them.
- var propName = key.substring(16, key.length);
- // Check if value is new and doesn't have a spot on the list yet
- if (isNew && !document.getElementsByName(propName)[0]) {
- // Make sure name starts with /SmartDashboard/. Properties that don't are technical and don't need to be shown on the list.
- if (/^\/SmartDashboard\//.test(key)) {
- // Make a new div for this value
- var div = document.createElement('div'); // Make div
- ui.tuning.list.appendChild(div); // Add the div to the page
- var p = document.createElement('p'); // Make a to display the name of the property - p.appendChild(document.createTextNode(propName)); // Make content of
have the name of the NetworkTables value - div.appendChild(p); // Put
in div - var input = document.createElement('input'); // Create input - input.name = propName; // Make its name property be the name of the NetworkTables value - input.value = value; // Set - // The following statement figures out which data type the variable is. - // If it's a boolean, it will make the input be a checkbox. If it's a number, - // it will make it a number chooser with up and down arrows in the box. Otherwise, it will make it a textbox. - if (typeof value === 'boolean') { - input.type = 'checkbox'; - input.checked = value; // value property doesn't work on checkboxes, we'll need to use the checked property instead - input.onchange = function () { - // For booleans, send bool of whether or not checkbox is checked - NetworkTables.putValue(key, this.checked); - }; - } - else if (!isNaN(value)) { - input.type = 'number'; - input.onchange = function () { - // For number values, send value of input as an int. - NetworkTables.putValue(key, parseInt(this.value)); - }; - } - else { - input.type = 'text'; - input.onchange = function () { - // For normal text values, just send the value. - NetworkTables.putValue(key, this.value); - }; - } - // Put the input into the div. - div.appendChild(input); - } - } - else { - // Find already-existing input for changing this variable - var oldInput = document.getElementsByName(propName)[0]; - if (oldInput) { - if (oldInput.type === 'checkbox') { - oldInput.checked = value; - } - else { - oldInput.value = value; - } - } - else { - console.log('Error: Non-new variable ' + key + ' not present in tuning list!'); - } - } -} - -// The rest of the doc is listeners for UI elements being clicked on -ui.example.button.onclick = function () { - // Set NetworkTables values to the opposite of whether button has active class. - NetworkTables.putValue('/SmartDashboard/example_variable', this.className != 'active'); -}; -// Reset gyro value to 0 on click -ui.gyro.container.onclick = function () { - // Store previous gyro val, will now be subtracted from val for callibration - ui.gyro.offset = ui.gyro.val; - // Trigger the gyro to recalculate value. - updateGyro('/SmartDashboard/drive/navx/yaw', ui.gyro.val); -}; -// Open tuning section when button is clicked -ui.tuning.button.onclick = function () { - if (ui.tuning.list.style.display === 'none') { - ui.tuning.list.style.display = 'block'; - } - else { - ui.tuning.list.style.display = 'none'; - } -}; -// Manages get and set buttons at the top of the tuning pane -ui.tuning.set.onclick = function () { - // Make sure the inputs have content, if they do update the NT value - if (ui.tuning.name.value && ui.tuning.value.value) { - NetworkTables.putValue('/SmartDashboard/' + ui.tuning.name.value, ui.tuning.value.value); - } -}; -ui.tuning.get.onclick = function () { - ui.tuning.value.value = NetworkTables.getValue(ui.tuning.name.value); -}; -// Update NetworkTables when autonomous selector is changed -ui.autoSelect.onchange = function () { - NetworkTables.putValue('/SmartDashboard/autonomous/selected', this.value); -}; -// Get value of arm height slider when it's adjusted -ui.armPosition.oninput = function () { - NetworkTables.putValue('/SmartDashboard/arm/encoder', parseInt(this.value)); -} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..94293cc --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,76 @@ +const path = require("path"); +const CopyPlugin = require("copy-webpack-plugin"); +const LicensePlugin = require("webpack-license-plugin") +const TerserPlugin = require('terser-webpack-plugin'); +const fs = require("fs"); + +module.exports = { + target: "electron-renderer", + entry: "./src/app/main.tsx", + output: { + path: path.resolve(__dirname, "build/app"), + filename: "./js/[name].js" + }, + module: { + rules: [{ + test: /\.(tsx|ts)$/, + use: "ts-loader" + }, + { + test: /\.(js)$/, + use: "babel-loader" + }, + { + test: /\.css$/, + use: ["style-loader", "css-loader"] + } + ] + }, + resolve: { + extensions: [".tsx", ".ts", ".js"], + }, + mode: "production", + plugins: [ + new CopyPlugin({ + patterns: [{ + from: "./src/app", + to: ".", + globOptions: { + ignore: ["**/*.tsx", "**/*.ts"] + }, + noErrorOnMissing: true + } + ], + }), + new LicensePlugin({ + outputFilename: 'thirdPartyNotice.json' + }) + ], + optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + output: { + comments: false, + }, + }, + extractComments: false, + }), + ], + }, +}; + +function loadEntries(dir) { + let files = fs.readdirSync(path.join(__dirname, dir)); + let entries = {}; + console.log(files); + files.forEach(file => { + let name = file.match(/^(.*)\.tsx$/); + if (name) { + entries[name[1]] = path.join(__dirname, dir, file); + } + }); + console.log(entries); + return entries; +} \ No newline at end of file