4 |
5 |
6 | 
7 | The home screen that showcases all our instruments.
8 | |
9 |
10 | 
11 | A four channel oscilloscope with analysis features.
12 | |
13 |
14 |
15 |
16 | 
17 | A four channel Logic Analyzer for digital outputs.
18 | |
19 |
20 | 
21 | A full fledged multimeter that can measure voltage, frequency, resistance etc.
22 | |
23 |
24 |
25 |
26 | 
27 | Instrument used to generate analoge and digital waves of different frequencies, phase and duty cycles.
28 | |
29 |
30 | 
31 | A programmable voltage and current source to drive your external circuits.
32 | |
33 |
34 |
35 |
36 | 
37 | An intutive interface to control 4 servo motor robot arm.
38 | |
39 |
40 | 
41 | Save data and config in CSV and retrieve them back later.
42 | |
43 |
44 |
45 |
46 | 
47 | The app drawer gives you access to many more options like the FAQ, Device Information Screen etc.
48 | |
49 |
50 | 
51 | A settings page for configuring your app as per your requirement.
52 | |
53 |
54 |
55 |
56 | 
57 | A device information screen that shows device information and guide to connect it to the app.
58 | |
59 |
60 | 
61 | A new FAQ screen that covers all generic as well as app specific questions that a user may have.
62 | |
63 |
64 |
65 |
66 | 
67 | A page that has all the important links that can be used to reach out to us, or contribute to the project.
68 | |
69 |
70 |
71 |
72 | ## Project Videos
73 |
74 | [Project Overview](https://www.youtube.com/watch?v=0fVkTbNWDME)
75 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pslab",
3 | "description": "A desktop interface for the Pocket Science Lab open-harware device",
4 | "version": "2.8.1",
5 | "private": true,
6 | "author": {
7 | "name": "FOSSASIA",
8 | "email": "dev@fossasia.org",
9 | "url": "https://pslab.io/"
10 | },
11 | "main": "public/electron.js",
12 | "dependencies": {
13 | "@material-ui/core": "^4.10.2",
14 | "@material-ui/icons": "^4.9.1",
15 | "chokidar": "^3.4.3",
16 | "electron-load-balancer": "^3.0.0",
17 | "electron-log": "^3.0.5",
18 | "python-shell": "^1.0.7",
19 | "react": "^16.8.6",
20 | "react-circular-input": "^0.1.4",
21 | "react-custom-scrollbars": "^4.2.1",
22 | "react-dom": "^16.8.6",
23 | "react-redux": "^7.1.0",
24 | "react-rotary-knob": "^1.1.5",
25 | "react-router-dom": "^5.0.0",
26 | "react-spring": "^8.0.20",
27 | "recharts": "^2.0.8",
28 | "redux": "^4.0.1",
29 | "redux-thunk": "^2.3.0",
30 | "styled-components": "^4.2.0"
31 | },
32 | "devDependencies": {
33 | "@babel/core": "^7.12.3",
34 | "@storybook/addon-actions": "^6.0.27",
35 | "@storybook/addon-essentials": "^6.0.27",
36 | "@storybook/addon-links": "^6.0.27",
37 | "@storybook/node-logger": "^6.0.27",
38 | "@storybook/preset-create-react-app": "^3.1.4",
39 | "@storybook/react": "^6.0.27",
40 | "babel-eslint": "^10.0.1",
41 | "babel-loader": "^8.1.0",
42 | "concurrently": "^5.0.0",
43 | "cross-env": "^7.0.3",
44 | "devtron": "^1.4.0",
45 | "electron": "^10.4.2",
46 | "electron-builder": "^22.9.1",
47 | "electron-devtools-installer": "^3.0.0",
48 | "enzyme-adapter-react-16": "^1.12.1",
49 | "eslint": "^5.16.0",
50 | "eslint-config-prettier": "^4.1.0",
51 | "eslint-plugin-babel": "^5.3.0",
52 | "eslint-plugin-import": "^2.17.2",
53 | "eslint-plugin-jsx": "0.0.2",
54 | "eslint-plugin-jsx-a11y": "^6.2.1",
55 | "eslint-plugin-prettier": "^3.0.1",
56 | "eslint-plugin-react": "^7.20.0",
57 | "prettier": "^1.17.0",
58 | "react-is": "^17.0.1",
59 | "react-scripts": "^4.0.1",
60 | "wait-on": "^3.2.0"
61 | },
62 | "scripts": {
63 | "react-start": "cross-env BROWSER=NONE react-scripts start",
64 | "electron-start": "cross-env DEV=1 electron .",
65 | "start": "concurrently \"npm run react-start\" \"wait-on http://localhost:3000/ && npm run electron-start\"",
66 | "build": "react-scripts build",
67 | "build:electron": "electron-builder -c.extraMetadata.main=build/electron.js",
68 | "pack": "npm run build:electron -- --dir",
69 | "test": "react-scripts test",
70 | "eject": "react-scripts eject",
71 | "lint": "eslint src",
72 | "fmt": "prettier --write \"src/**/*.js\"",
73 | "fmt:check": "prettier --check \"src/**/*.js\"",
74 | "storybook": "start-storybook --ci -p 6006 -s public",
75 | "build-storybook": "build-storybook -s public"
76 | },
77 | "eslintConfig": {
78 | "extends": "react-app"
79 | },
80 | "homepage": "./",
81 | "browserslist": [
82 | ">0.2%",
83 | "not dead",
84 | "not ie <= 11",
85 | "not op_mini all"
86 | ],
87 | "build": {
88 | "appId": "FOSSASIA-PSLAB",
89 | "productName": "PSLab-Desktop",
90 | "copyright": "Copyright © 2019-2020 FOSSASIA",
91 | "asar": true,
92 | "asarUnpack": "scripts/",
93 | "linux": {
94 | "target": [
95 | "deb",
96 | "rpm",
97 | "tar.xz"
98 | ],
99 | "icon": "src/resources/app_icon.png",
100 | "category": "Utility"
101 | },
102 | "win": {
103 | "target": [
104 | "nsis"
105 | ],
106 | "publish": [
107 | "github"
108 | ],
109 | "icon": "src/resources/app_icon.png",
110 | "legalTrademarks": "Copyright © 2019-2020 FOSSASIA",
111 | "signingHashAlgorithms": [
112 | "sha1",
113 | "sha256"
114 | ]
115 | },
116 | "mac": {
117 | "category": "public.app-category.education",
118 | "target": [
119 | "default"
120 | ]
121 | },
122 | "nsis": {
123 | "oneClick": true
124 | },
125 | "files": [
126 | "build/**/*",
127 | "node_modules/**/*",
128 | "utils/**/*",
129 | "scripts/**/*",
130 | "background_tasks/**/*"
131 | ],
132 | "directories": {
133 | "buildResources": "assets"
134 | },
135 | "extends": null
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
/public/app_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/public/app_icon.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | a.length > 0}
22 | {...actions('onAccept', 'onCancel', 'onDialogClose')}
23 | />
24 | );
25 |
--------------------------------------------------------------------------------
/src/components/CustomDialog/index.js:
--------------------------------------------------------------------------------
1 | import CustomDialog from './CustomDialog';
2 |
3 | export default CustomDialog;
4 |
--------------------------------------------------------------------------------
/src/components/CustomIcons/CapacitorIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const CapacitorIcon = ({ size = '1.5em', color = 'rgba(0, 0, 0, 0.38)' }) => {
4 | return (
5 |
41 | );
42 | };
43 |
44 | export default CapacitorIcon;
45 |
--------------------------------------------------------------------------------
/src/components/CustomIcons/ResistorIcon.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const ResistorIcon = ({ size = '1.5em', color = 'rgba(0, 0, 0, 0.38)' }) => {
4 | return (
5 |
43 | );
44 | };
45 |
46 | export default ResistorIcon;
47 |
--------------------------------------------------------------------------------
/src/components/CustomKnob/CustomKnob.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import s3 from './skins/s3';
3 | import { Knob } from 'react-rotary-knob';
4 |
5 | const CustomKnob = ({ radius, onChangeDial, value, step, min, max }) => {
6 | return (
7 |
21 | );
22 | };
23 |
24 | export default CustomKnob;
25 |
--------------------------------------------------------------------------------
/src/components/CustomKnob/index.js:
--------------------------------------------------------------------------------
1 | import CustomKnob from './CustomKnob';
2 |
3 | export default CustomKnob;
4 |
--------------------------------------------------------------------------------
/src/components/CustomSliderInput/CustomSliderInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { bindActionCreators } from 'redux';
4 | import Slider from '@material-ui/core/Slider';
5 | import { withStyles } from '@material-ui/core/styles';
6 | import { openDialog } from '../../redux/actions/app';
7 |
8 | const styles = () => ({
9 | slider: {
10 | margin: '0px 8px 0px 8px',
11 | },
12 | });
13 |
14 | const onCheck = (min, max) => value => {
15 | return !(value >= min && value <= max);
16 | };
17 |
18 | const CustomSliderInput = ({
19 | title,
20 | unit,
21 | onChangeSlider,
22 | value,
23 | min,
24 | max,
25 | inputCheck,
26 | step,
27 | disabled,
28 | minTitleWidth,
29 | minUnitWidth,
30 | display,
31 | classes,
32 | openDialog,
33 | }) => {
34 | return (
35 |
44 |
51 | {title}
52 |
53 |
62 | {
64 | !disabled &&
65 | openDialog({
66 | variant: 'simple-input',
67 | title: title,
68 | textTitle: `Enter value (${min} to ${max})`,
69 | onAccept: value => {
70 | onChangeSlider(undefined, Number(value));
71 | },
72 | onCheck: onCheck(min, max),
73 | inputCheck: inputCheck,
74 | onCancel: () => {},
75 | });
76 | }}
77 | style={{
78 | margin: '0px 0px 0px 8px',
79 | whiteSpace: 'nowrap',
80 | minWidth: minUnitWidth,
81 | textAlign: 'right',
82 | cursor: 'pointer',
83 | }}
84 | >{`${display ? display : value} ${unit}`}
85 |
86 | );
87 | };
88 |
89 | const mapDispatchToProps = dispatch => ({
90 | ...bindActionCreators(
91 | {
92 | openDialog,
93 | },
94 | dispatch,
95 | ),
96 | });
97 |
98 | export default withStyles(styles)(
99 | connect(null, mapDispatchToProps)(CustomSliderInput),
100 | );
101 |
--------------------------------------------------------------------------------
/src/components/CustomSliderInput/index.js:
--------------------------------------------------------------------------------
1 | import CustomSliderInput from './CustomSliderInput';
2 |
3 | export default CustomSliderInput;
4 |
--------------------------------------------------------------------------------
/src/components/Decorators/Decorators.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const OptionHeading = styled.h3``;
4 |
--------------------------------------------------------------------------------
/src/components/Display/Display.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ValueWrapper } from './Display.styles';
3 |
4 | const Display = ({ fontSize, value, unit }) => (
5 |
6 | {value} {unit}
7 |
8 | );
9 |
10 | export default Display;
11 |
--------------------------------------------------------------------------------
/src/components/Display/Display.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ValueWrapper = styled.div`
4 | font-size: ${props => props.fontSize}em;
5 | color: ${props => props.theme.text.secondary};
6 | `;
7 |
--------------------------------------------------------------------------------
/src/components/Display/index.js:
--------------------------------------------------------------------------------
1 | import Display from './Display';
2 |
3 | export default Display;
4 |
--------------------------------------------------------------------------------
/src/components/GraphPanelLayout/GraphPanelLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | LayoutContainer,
4 | ButtonWrapper,
5 | SettingsContainer,
6 | SettingsWrapper,
7 | GraphContainer,
8 | InformationContainer,
9 | } from './GraphPanelLayout.styles';
10 |
11 | const GraphPanelLayout = ({ actionButtons, settings, graph, information }) => {
12 | return (
13 |
14 | {/* */}
15 |
16 | {graph}
17 | {information}
18 |
19 |
20 | {actionButtons}
21 | {settings}
22 |
23 |
24 | );
25 | };
26 |
27 | export default GraphPanelLayout;
28 |
--------------------------------------------------------------------------------
/src/components/GraphPanelLayout/GraphPanelLayout.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const LayoutContainer = styled.div`
4 | background-color: ${props => props.theme.background.default};
5 | height: 100%;
6 | width: 100%;
7 | z-index: 1;
8 | display: flex;
9 | `;
10 |
11 | export const ThickBar = styled.div`
12 | position: absolute;
13 | right: 0;
14 | top: 4em;
15 | height: calc((100% - 4em) * 0.2);
16 | width: calc(100% - 3.5em);
17 | background: ${props => props.theme.gradient1};
18 | z-index: 0;
19 | `;
20 |
21 | export const GraphContainer = styled.div`
22 | height: 80%;
23 | display: flex;
24 | transform: ${props =>
25 | props.information ? 'translateY(0%)' : 'translateY(-5%)'};
26 | `;
27 |
28 | export const SettingsContainer = styled.div`
29 | width: 28%;
30 | display: flex;
31 | flex-direction: column;
32 | z-index: 2;
33 | `;
34 |
35 | export const ButtonWrapper = styled.div`
36 | display: flex;
37 | `;
38 |
39 | export const SettingsWrapper = styled.div`
40 | flex: 1;
41 | display: flex;
42 | `;
43 |
44 | export const InformationContainer = styled.div`
45 | display: flex;
46 | flex-direction: column;
47 | flex: 1;
48 | justify-content: ${props => (props.information ? 'none' : 'center')};
49 | z-index: 2;
50 | `;
51 |
--------------------------------------------------------------------------------
/src/components/GraphPanelLayout/index.js:
--------------------------------------------------------------------------------
1 | import GraphPanelLayout from './GraphPanelLayout';
2 |
3 | export default GraphPanelLayout;
4 |
--------------------------------------------------------------------------------
/src/components/HomeLayout/HomeLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { LayoutContainer } from './HomeLayout.styles';
3 |
4 | const HomeLayout = ({ title, tabs }) => {
5 | return {tabs};
6 | };
7 |
8 | export default HomeLayout;
9 |
--------------------------------------------------------------------------------
/src/components/HomeLayout/HomeLayout.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const LayoutContainer = styled.div`
4 | display: flex;
5 | flex-direction: row;
6 | height: 100%;
7 | width: 100%;
8 | justify-content: center;
9 | align-items: center;
10 | background: ${props => props.theme.background.default};
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/HomeLayout/index.js:
--------------------------------------------------------------------------------
1 | import HomeLayout from './HomeLayout';
2 |
3 | export default HomeLayout;
4 |
--------------------------------------------------------------------------------
/src/components/Icons/PSLabIcons.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import OscilloscopeSvg from '../../resources/oscilloscope.svg';
3 | import LogicAnalyzerSvg from '../../resources/logic_analyzer.svg';
4 | import PowerSourceSvg from '../../resources/power_source.svg';
5 | import WaveGeneratorSvg from '../../resources/wave_generator.svg';
6 | import MultimeterSvg from '../../resources/multimeter.svg';
7 | import SensorsSvg from '../../resources/sensors.svg';
8 | import OscilloscopeRedSvg from '../../resources/oscilloscope_red.svg';
9 | import LogicAnalyzerRedSvg from '../../resources/logic_analyzer_red.svg';
10 | import PowerSourceRedSvg from '../../resources/power_source_red.svg';
11 | import WaveGeneratorRedSvg from '../../resources/wave_generator_red.svg';
12 | import MultimeterRedSvg from '../../resources/multimeter_red.svg';
13 | import SensorsRedSvg from '../../resources/sensors_red.svg';
14 |
15 | export const OscilloscopeIcon = ({ size, color }) => {
16 | return (
17 | 
25 | );
26 | };
27 |
28 | export const LogicAnalyzerIcon = ({ size, color }) => {
29 | return (
30 |
38 | );
39 | };
40 |
41 | export const PowerSourceIcon = ({ size, color }) => {
42 | return (
43 |
51 | );
52 | };
53 |
54 | export const WaveGeneratorIcon = ({ size, color }) => {
55 | return (
56 |
64 | );
65 | };
66 |
67 | export const MultimeterIcon = ({ size, color }) => {
68 | return (
69 |
77 | );
78 | };
79 |
80 | export const SensorsIcon = ({ size, color }) => {
81 | return (
82 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/src/components/SimplePanelLayout/SimplePanelLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { LayoutWrapper, LayoutContainer } from './SimplePanelLayout.styles';
3 |
4 | const SimplePanelLayout = props => {
5 | const { panel } = props;
6 |
7 | return (
8 |
9 | {/* */}
10 | {panel}
11 |
12 | );
13 | };
14 |
15 | export default SimplePanelLayout;
16 |
--------------------------------------------------------------------------------
/src/components/SimplePanelLayout/SimplePanelLayout.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ThickBar = styled.div`
4 | position: absolute;
5 | right: 0;
6 | top: 4em;
7 | height: calc((100% - 4em) * 0.2);
8 | width: calc(100% - 3.5em);
9 | background: ${props => props.theme.gradient1};
10 | z-index: 0;
11 | `;
12 |
13 | export const LayoutWrapper = styled.div`
14 | align-self: center;
15 | z-index: 999;
16 | `;
17 |
18 | export const LayoutContainer = styled.div`
19 | background-color: ${props => props.theme.background.default};
20 | height: 100%;
21 | width: 100%;
22 | z-index: 1;
23 | display: flex;
24 | flex-direction: column;
25 | justify-content: center;
26 | `;
27 |
--------------------------------------------------------------------------------
/src/components/SimplePanelLayout/index.js:
--------------------------------------------------------------------------------
1 | import SimplePanelLayout from './SimplePanelLayout';
2 |
3 | export default SimplePanelLayout;
4 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | font-size: 12px;
10 | }
11 |
12 | code {
13 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
14 | monospace;
15 | }
16 |
17 | a {
18 | color: rgba(0, 0, 0, 0.87);
19 | text-decoration: none;
20 | }
21 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import { store } from './redux/store';
6 | import { Provider } from 'react-redux';
7 | import * as serviceWorker from './serviceWorker';
8 |
9 | ReactDOM.render(
10 |
11 |
12 | ,
13 | document.getElementById('root'),
14 | );
15 |
16 | // If you want your app to work offline and load faster, you can change
17 | // unregister() to register() below. Note this comes with some pitfalls.
18 | // Learn more about service workers: https://bit.ly/CRA-PWA
19 | serviceWorker.unregister();
20 |
--------------------------------------------------------------------------------
/src/redux/actionTypes/app.js:
--------------------------------------------------------------------------------
1 | export const DEVICE_CONNECTED = 'DEVICE_CONNECTED';
2 | export const DEVICE_DISCONNECTED = 'DEVICE_DISCONNECTED';
3 |
4 | export const OPEN_SNACKBAR = 'OPEN_SNACKBAR';
5 | export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR';
6 |
7 | export const OPEN_DIALOG = 'OPEN_DIALOG';
8 | export const CLOSE_DIALOG = 'CLOSE_DIALOG';
9 |
--------------------------------------------------------------------------------
/src/redux/actions/app.js:
--------------------------------------------------------------------------------
1 | import {
2 | OPEN_DIALOG,
3 | CLOSE_DIALOG,
4 | OPEN_SNACKBAR,
5 | CLOSE_SNACKBAR,
6 | DEVICE_CONNECTED,
7 | DEVICE_DISCONNECTED,
8 | } from '../actionTypes/app';
9 |
10 | export const deviceConnected = ({ deviceInformation }) => {
11 | return {
12 | type: DEVICE_CONNECTED,
13 | payload: { deviceInformation },
14 | };
15 | };
16 |
17 | export const deviceDisconnected = () => {
18 | return {
19 | type: DEVICE_DISCONNECTED,
20 | };
21 | };
22 |
23 | export const openSnackbar = ({ message = '', timeout = 4000 }) => {
24 | return {
25 | type: OPEN_SNACKBAR,
26 | payload: {
27 | message,
28 | timeout,
29 | },
30 | };
31 | };
32 |
33 | export const closeSnackbar = () => {
34 | return {
35 | type: CLOSE_SNACKBAR,
36 | };
37 | };
38 |
39 | export const openDialog = ({
40 | variant = null,
41 | title = null,
42 | hint = null,
43 | textTitle = null,
44 | onCheck = null,
45 | inputCheck = null,
46 | onAccept = null,
47 | onCancel = null,
48 | }) => {
49 | return {
50 | type: OPEN_DIALOG,
51 | payload: {
52 | variant,
53 | title,
54 | hint,
55 | textTitle,
56 | onCheck,
57 | inputCheck,
58 | onAccept,
59 | onCancel,
60 | },
61 | };
62 | };
63 |
64 | export const closeDialog = () => {
65 | return {
66 | type: CLOSE_DIALOG,
67 | };
68 | };
69 |
--------------------------------------------------------------------------------
/src/redux/actions/config.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/redux/actions/config.js
--------------------------------------------------------------------------------
/src/redux/reducers/app.js:
--------------------------------------------------------------------------------
1 | import {
2 | OPEN_SNACKBAR,
3 | CLOSE_SNACKBAR,
4 | DEVICE_CONNECTED,
5 | DEVICE_DISCONNECTED,
6 | OPEN_DIALOG,
7 | CLOSE_DIALOG,
8 | } from '../actionTypes/app';
9 |
10 | const initialState = {
11 | device: {
12 | isConnected: false,
13 | deviceInformation: null,
14 | },
15 | snackbar: {
16 | isOpen: false,
17 | message: '',
18 | timeout: 4000,
19 | },
20 | dialog: {
21 | isOpen: false,
22 | variant: null,
23 | title: null,
24 | hint: null,
25 | textTitle: null,
26 | onCheck: null,
27 | inputCheck: null,
28 | onAccept: null,
29 | onCancel: null,
30 | },
31 | };
32 |
33 | export const appReducer = (prevState = initialState, action) => {
34 | switch (action.type) {
35 | case OPEN_SNACKBAR: {
36 | const { message, timeout } = action.payload;
37 | return {
38 | ...prevState,
39 | snackbar: {
40 | isOpen: true,
41 | message,
42 | timeout,
43 | },
44 | };
45 | }
46 | case CLOSE_SNACKBAR: {
47 | return {
48 | ...prevState,
49 | snackbar: {
50 | ...initialState.snackbar,
51 | },
52 | };
53 | }
54 | case DEVICE_CONNECTED: {
55 | const { deviceInformation } = action.payload;
56 | return {
57 | ...prevState,
58 | device: {
59 | isConnected: true,
60 | deviceInformation: {
61 | ...initialState.device.deviceInformation,
62 | ...deviceInformation,
63 | },
64 | },
65 | };
66 | }
67 | case DEVICE_DISCONNECTED: {
68 | return {
69 | ...prevState,
70 | device: {
71 | ...initialState.device,
72 | },
73 | };
74 | }
75 | case OPEN_DIALOG: {
76 | const {
77 | variant,
78 | title,
79 | hint,
80 | textTitle,
81 | onCheck,
82 | inputCheck,
83 | onAccept,
84 | onCancel,
85 | } = action.payload;
86 | return {
87 | ...prevState,
88 | dialog: {
89 | isOpen: true,
90 | variant,
91 | title,
92 | hint,
93 | textTitle,
94 | onCheck,
95 | inputCheck,
96 | onAccept,
97 | onCancel,
98 | },
99 | };
100 | }
101 | case CLOSE_DIALOG: {
102 | return {
103 | ...prevState,
104 | dialog: {
105 | ...initialState.dialog,
106 | },
107 | };
108 | }
109 | default:
110 | return initialState;
111 | }
112 | };
113 |
--------------------------------------------------------------------------------
/src/redux/reducers/config.js:
--------------------------------------------------------------------------------
1 | const os = window.require('os');
2 | const path = window.require('path');
3 | const dataPath = path.join(os.homedir(), 'Documents', 'PSLab');
4 |
5 | // Create save path if not existing
6 |
7 | const initialState = {
8 | dataPath,
9 | };
10 |
11 | export const configReducer = (prevState = initialState, action) => {
12 | switch (action.type) {
13 | default:
14 | return initialState;
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers } from 'redux';
2 | import { appReducer } from './reducers/app';
3 | import { configReducer } from './reducers/config';
4 |
5 | const reducer = combineReducers({
6 | app: appReducer,
7 | config: configReducer,
8 | });
9 |
10 | export const store = createStore(
11 | reducer,
12 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
13 | );
14 |
--------------------------------------------------------------------------------
/src/resources/app_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/app_icon.png
--------------------------------------------------------------------------------
/src/resources/back_layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/back_layout.png
--------------------------------------------------------------------------------
/src/resources/compass.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
80 |
--------------------------------------------------------------------------------
/src/resources/compass_red.svg:
--------------------------------------------------------------------------------
1 |
2 |
110 |
--------------------------------------------------------------------------------
/src/resources/device_connected.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/resources/device_disconnected.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/resources/ds_con.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/ds_con.png
--------------------------------------------------------------------------------
/src/resources/ds_discon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/ds_discon.png
--------------------------------------------------------------------------------
/src/resources/fb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/fb.png
--------------------------------------------------------------------------------
/src/resources/front_layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/front_layout.png
--------------------------------------------------------------------------------
/src/resources/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/git.png
--------------------------------------------------------------------------------
/src/resources/ic_pwm_pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/ic_pwm_pic.png
--------------------------------------------------------------------------------
/src/resources/ic_sin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/ic_sin.png
--------------------------------------------------------------------------------
/src/resources/ic_square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/ic_square.png
--------------------------------------------------------------------------------
/src/resources/ic_triangular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/ic_triangular.png
--------------------------------------------------------------------------------
/src/resources/multimeter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
93 |
--------------------------------------------------------------------------------
/src/resources/oscilloscope_red.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
92 |
--------------------------------------------------------------------------------
/src/resources/power_source.svg:
--------------------------------------------------------------------------------
1 |
2 |
84 |
--------------------------------------------------------------------------------
/src/resources/power_source_red.svg:
--------------------------------------------------------------------------------
1 |
2 |
86 |
--------------------------------------------------------------------------------
/src/resources/t.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/t.png
--------------------------------------------------------------------------------
/src/resources/yt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fossasia/pslab-desktop/5f24d307cfae32c2d86f6fc222528cd26713b2a4/src/resources/yt.png
--------------------------------------------------------------------------------
/src/screen/AboutUs/AboutUs.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Card } from '@material-ui/core';
3 |
4 | export const Container = styled.div`
5 | height: 100%;
6 | width: 100%;
7 | display: flex;
8 | justify-content: center;
9 | overflow-y: auto;
10 | `;
11 |
12 | export const Wrapper = styled(Card)`
13 | margin: 16px 0px;
14 | height: 870px;
15 | width: 95%;
16 | display: flex;
17 | flex-direction: column;
18 | align-items: center;
19 | `;
20 |
--------------------------------------------------------------------------------
/src/screen/AboutUs/index.js:
--------------------------------------------------------------------------------
1 | import AboutUs from './AboutUs';
2 |
3 | export default AboutUs;
4 |
--------------------------------------------------------------------------------
/src/screen/DeviceScreen/DeviceScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import { Container, Wrapper, Steps, Link, Hr } from './DeviceScreen.styles';
4 | import DisconnectedImage from '../../resources/ds_discon.png';
5 | import ConnectedImage from '../../resources/ds_con.png';
6 |
7 | const DeviceScreen = ({ isConnected, deviceInformation }) => {
8 | return isConnected ? (
9 |
10 |
11 | 
20 |
27 | Device Connected Successfully
28 |
29 |
36 | {deviceInformation.deviceName}
37 |
38 |
39 | {
41 | window.open(
42 | 'https://pslab.io/',
43 | '_blank',
44 | 'height=650,width=1000,frame=true,show=true',
45 | );
46 | }}
47 | >
48 | What is PSLab Device?
49 |
50 |
51 |
52 | ) : (
53 |
54 |
55 | 
64 |
71 | No USB Device Found
72 |
73 |
79 |
80 | Steps to connect the PSLab Device
81 |
82 |
83 |
84 |
89 | 1. Connect the other end of the micro USB cable to a USB adapter
90 |
91 |
96 | 2. Connect the adapter to your PC
97 |
98 |
103 | 3. Start the Desktop app
104 |
105 |
106 |
107 | {
109 | window.open(
110 | 'https://pslab.io/',
111 | '_blank',
112 | 'height=650,width=1000,frame=true,show=true',
113 | );
114 | }}
115 | >
116 | What is PSLab Device?
117 |
118 |
119 |
120 | );
121 | };
122 |
123 | const mapStateToProps = state => ({
124 | isConnected: state.app.device.isConnected,
125 | deviceInformation: state.app.device.deviceInformation,
126 | });
127 |
128 | export default connect(mapStateToProps, null)(DeviceScreen);
129 |
--------------------------------------------------------------------------------
/src/screen/DeviceScreen/DeviceScreen.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const Container = styled.div`
4 | width: 100%;
5 | height: calc(100vh - 52px);
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | `;
10 |
11 | export const Wrapper = styled.div`
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | `;
16 |
17 | export const Steps = styled.div`
18 | display: flex;
19 | flex-direction: column;
20 | font-size: 16px;
21 | margin: 0px 0px 16px 0px;
22 | width: 310px;
23 | `;
24 |
25 | export const Hr = styled.hr`
26 | width: 35%;
27 | `;
28 |
29 | export const Link = styled.div`
30 | color: red;
31 | font-size: 24px;
32 | margin: 20px 0px 0px 0px;
33 |
34 | &:hover {
35 | cursor: pointer;
36 | }
37 | `;
38 |
--------------------------------------------------------------------------------
/src/screen/DeviceScreen/index.js:
--------------------------------------------------------------------------------
1 | import DeviceScreen from './DeviceScreen';
2 |
3 | export default DeviceScreen;
4 |
--------------------------------------------------------------------------------
/src/screen/FAQ/FAQ.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const Container = styled.div`
4 | width: 100%;
5 | display: flex;
6 | justify-content: center;
7 | height: calc(100vh - 52px);
8 | overflow: auto;
9 | z-index: 0;
10 | `;
11 |
12 | export const Wrapper = styled.div`
13 | width: 50%;
14 | margin: 16px 0px 0px 0px;
15 | `;
16 |
17 | export const Link = styled.span`
18 | color: #e12b00;
19 |
20 | &:hover {
21 | cursor: pointer;
22 | }
23 | `;
24 |
--------------------------------------------------------------------------------
/src/screen/FAQ/index.js:
--------------------------------------------------------------------------------
1 | import FAQ from './FAQ';
2 |
3 | export default FAQ;
4 |
--------------------------------------------------------------------------------
/src/screen/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HomeLayout from '../../components/HomeLayout';
3 | import Tabs from './components/Tabs';
4 |
5 | const Home = props => {
6 | return } />;
7 | };
8 |
9 | export default Home;
10 |
--------------------------------------------------------------------------------
/src/screen/Home/components/InstrumentCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import {
4 | CustomCard,
5 | ImageWrapper,
6 | ContentContainer,
7 | Title,
8 | Description,
9 | HorizontalBar,
10 | VerticalBar,
11 | } from './InstrumentCard.styles';
12 |
13 | const InstrumentCard = ({ icon, title, description, redirectPath }) => {
14 | return (
15 |
19 |
20 |
21 | {title}
22 | {description}
23 |
24 | {icon}
25 |
26 |
27 |
28 |
29 | );
30 | };
31 |
32 | export default InstrumentCard;
33 |
--------------------------------------------------------------------------------
/src/screen/Home/components/InstrumentCard.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CustomCard = styled.div`
4 | position: relative;
5 | display: flex;
6 | width: 48em;
7 | height: 26em;
8 | margin-right: 1em;
9 | margin-bottom: 1em;
10 | transition-timing-function: ease-in-out;
11 | transition-duration: 200ms;
12 | border-radius: 8px;
13 | background-color: ${props => props.theme.primary.main};
14 | box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
15 | 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
16 |
17 | &:hover {
18 | cursor: pointer;
19 | box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
20 | 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
21 | }
22 | `;
23 |
24 | export const ImageWrapper = styled.div`
25 | display: flex;
26 | justify-content: flex-end;
27 | align-items: flex-end;
28 | width: 40em;
29 | margin: 0px 48px 48px 0px;
30 | `;
31 |
32 | export const ContentContainer = styled.div`
33 | display: flex;
34 | flex-direction: column;
35 | margin: 32px 0px 0px 32px;
36 | `;
37 |
38 | export const Title = styled.div`
39 | font-size: 2.8em;
40 | font-weight: 400;
41 | color: ${props => props.theme.common.white};
42 | `;
43 |
44 | export const Description = styled.div`
45 | font-size: 1.6em;
46 | font-weight: 350;
47 | margin: 32px 0px 0px 0px;
48 | color: ${props => props.theme.common.white};
49 | `;
50 |
51 | export const HorizontalBar = styled.div`
52 | width: 74%;
53 | height: 2em;
54 | z-index: 1;
55 | bottom: 5.5em;
56 | left: 0px;
57 | position: absolute;
58 | border-style: solid;
59 | border-color: #fff;
60 | border-width: 4px 0px 4px 0px;
61 | clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%);
62 | `;
63 |
64 | export const VerticalBar = styled.div`
65 | width: 2em;
66 | height: 52.5%;
67 | z-index: 1;
68 | top: 0px;
69 | right: 5.5em;
70 | position: absolute;
71 | border-style: solid;
72 | border-color: #fff;
73 | border-width: 0px 4px 0px 4px;
74 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%);
75 | `;
76 |
--------------------------------------------------------------------------------
/src/screen/Home/components/Tabs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Scrollbars } from 'react-custom-scrollbars';
3 | import InstrumentCard from './InstrumentCard';
4 | import { TabsContainer, TabsContainerInner } from './Tabs.styles';
5 | import {
6 | OscilloscopeIcon,
7 | LogicAnalyzerIcon,
8 | WaveGeneratorIcon,
9 | PowerSourceIcon,
10 | MultimeterIcon,
11 | SensorsIcon,
12 | } from '../../../components/Icons/PSLabIcons';
13 |
14 | const Tabs = () => {
15 | return (
16 |
17 |
18 |
19 | }
21 | title={'Oscilloscope'}
22 | description={'Allows observation of varying signal voltages'}
23 | redirectPath={'/oscilloscope'}
24 | />
25 | }
27 | title={'Logic Analyzer'}
28 | description={'Captures and displays signals from digital systems'}
29 | redirectPath={'/logicanalyzer'}
30 | />
31 | }
33 | title={'Wave Generator'}
34 | description={'Generates arbitrary analog and digital waveforms'}
35 | redirectPath={'/wavegenerator'}
36 | />
37 | }
39 | title={'Power Source'}
40 | description={'Generates programmable voltage and currents'}
41 | redirectPath={'/powersource'}
42 | />
43 | }
45 | title={'Multimeter'}
46 | description={
47 | 'Measure voltage, current, resistance and capacitance.'
48 | }
49 | redirectPath={'/multimeter'}
50 | />
51 | }
53 | title={'Sensors'}
54 | description={'Allows logging of data returned by sensor connected.'}
55 | redirectPath={'/sensors'}
56 | />
57 | }
59 | title={'Robotic Arm'}
60 | description={'To control servo motors using a timeline.'}
61 | redirectPath={'/robotarm'}
62 | />
63 |
64 |
65 |
66 | );
67 | };
68 |
69 | export default Tabs;
70 |
--------------------------------------------------------------------------------
/src/screen/Home/components/Tabs.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const TabsContainer = styled.div`
4 | height: calc(100% - 16px);
5 | width: 100%;
6 | `;
7 | export const TabsContainerInner = styled.div`
8 | width: 100%;
9 | display: flex;
10 | flex-wrap: wrap;
11 | margin: 1em auto;
12 | justify-content: center;
13 | padding-left: 1em;
14 | @media only screen and (min-width: 1176px) {
15 | justify-content: start;
16 | }
17 | `;
18 | export const TabsWrapper = styled.div`
19 | margin: 16px 16px 0px 0px;
20 | width: 98em;
21 | display: flex;
22 | justify-content: flex-start;
23 | align-items: center;
24 | `;
25 | export const TabsRow = styled.div`
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | `;
30 |
--------------------------------------------------------------------------------
/src/screen/Home/components/Title.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AppIcon from '../../../resources/app_icon.svg';
3 | import { TitleContainer, TitleWrapper, TextLabel } from './Title.styles';
4 |
5 | const Title = () => {
6 | return (
7 |
8 |
9 | 
17 | Pocket Science Lab
18 |
19 |
20 | );
21 | };
22 |
23 | export default Title;
24 |
--------------------------------------------------------------------------------
/src/screen/Home/components/Title.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const TitleContainer = styled.div`
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | height: 100%;
8 | width: 100%;
9 | `;
10 |
11 | export const TitleWrapper = styled.div`
12 | display: flex;
13 | `;
14 |
15 | export const TextLabel = styled.div`
16 | display: flex;
17 | flex: 1;
18 | margin: 0px 0px 0px 16px;
19 | font-size: 4em;
20 | font-weight: 450;
21 | align-items: center;
22 | justify-content: center;
23 | `;
24 |
--------------------------------------------------------------------------------
/src/screen/Home/index.js:
--------------------------------------------------------------------------------
1 | import Home from './Home';
2 |
3 | export default Home;
4 |
--------------------------------------------------------------------------------
/src/screen/Layout/styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ImageContainer = styled.div`
4 | position: relative;
5 | `;
6 |
7 | export const Marker = styled.div`
8 | position: absolute;
9 | top: ${props => props.top}px;
10 | left: ${props => props.left}px;
11 | height: 20px;
12 | width: 20px;
13 | `;
14 |
--------------------------------------------------------------------------------
/src/screen/LoggedData/LoggedData.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import Card from '@material-ui/core/Card';
3 |
4 | export const Container = styled.div`
5 | display: flex;
6 | width: 100%;
7 | height: 100%;
8 | justify-content: center;
9 | `;
10 |
11 | export const Wrapper = styled.div`
12 | width: 100%;
13 | margin: 16px 0px;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 |
18 | & > * + * {
19 | margin: 16px 0px 0px 0px;
20 | }
21 | `;
22 |
23 | export const CustomCard = styled(Card)`
24 | width: calc(50% - 32px);
25 | `;
26 |
27 | export const ContentWrapper = styled.div`
28 | width: 100%;
29 | z-index: 1;
30 | display: flex;
31 | justify-content: center;
32 | cursor: pointer;
33 | `;
34 |
35 | export const ButtonContainer = styled.div`
36 | margin: 0px 16px 0px 0px;
37 | z-index: 4;
38 | display: flex;
39 | justify-content: center;
40 | align-items: center;
41 | height: 9.2em;
42 | width: 9.2em;
43 | `;
44 |
45 | export const Spacer = styled.div`
46 | flex: 1;
47 | `;
48 |
49 | export const TextContainer = styled.div`
50 | height: 9.2em;
51 | display: flex;
52 | flex-direction: column;
53 | margin: 0px 0px 0px 48px;
54 | `;
55 |
56 | export const TitleWrapper = styled.div`
57 | color: ${props => props.theme.text.primary};
58 | font-size: 1.5em;
59 | font-weight: 600;
60 | margin: 16px 0px 0px 0px;
61 | `;
62 |
63 | export const InstrumentWrapper = styled.div`
64 | color: ${props => props.theme.text.secondary};
65 | font-size: 1.1em;
66 | font-weight: 600;
67 | margin: 16px 0px 0px 0px;
68 | `;
69 |
70 | export const InfoContainer = styled.div`
71 | display: flex;
72 | color: ${props => props.theme.text.secondary};
73 | margin: 16px 0px 16px 0px;
74 |
75 | & > * + * {
76 | margin: 0px 0px 0px 32px;
77 | }
78 | `;
79 |
80 | export const EmptyWrapper = styled.div`
81 | display: flex;
82 | width: 100%;
83 | height: calc(100vh - 48px);
84 | justify-content: center;
85 | align-items: center;
86 | font-size: 18px;
87 | `;
88 |
--------------------------------------------------------------------------------
/src/screen/LoggedData/index.js:
--------------------------------------------------------------------------------
1 | import LoggedData from './LoggedData';
2 |
3 | export default LoggedData;
4 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/ActionButtons.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Checkbox, FormControlLabel, Button } from '@material-ui/core';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import {
5 | ActionButtonsWrapper,
6 | ButtonWrapper,
7 | CheckboxWrapper,
8 | } from './ActionButtons.styles';
9 |
10 | const styles = () => ({
11 | buttonMargin: {
12 | margin: '0px 0px 0px 16px',
13 | },
14 | });
15 |
16 | const ActionButtons = ({
17 | isConnected,
18 | isReading,
19 | toggleRead,
20 | isAutoReading,
21 | toggleAutoRead,
22 | classes,
23 | }) => {
24 | return (
25 |
26 |
27 |
37 |
38 |
39 |
42 | }
43 | label="Auto Recapture"
44 | />
45 |
46 |
47 | );
48 | };
49 |
50 | export default withStyles(styles)(ActionButtons);
51 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/ActionButtons.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Card } from '@material-ui/core';
3 |
4 | export const ActionButtonsWrapper = styled(Card)`
5 | width: calc(100% - 16px);
6 | margin: 16px;
7 | `;
8 |
9 | export const ButtonWrapper = styled.div`
10 | display: flex;
11 | margin: 16px 16px 0px 16px;
12 | width: calc(100% - 32px);
13 | justify-content: center;
14 | align-items: center;
15 | `;
16 |
17 | export const CheckboxWrapper = styled.div`
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | `;
22 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/NumberParameter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Select,
4 | MenuItem,
5 | OutlinedInput,
6 | FormControl,
7 | InputLabel,
8 | } from '@material-ui/core';
9 | import { withStyles } from '@material-ui/core/styles';
10 | import { SettingsWrapper, OptionsRowWrapper } from './Settings.styles';
11 | import { options } from './settingOptions';
12 | import formStyles from '../../../utils/formStyles';
13 |
14 | class NumberParameters extends Component {
15 | render() {
16 | const { numberOfChannels, changeNumberOfChannels, classes } = this.props;
17 |
18 | return (
19 |
20 |
21 |
22 |
26 | Number of Channels
27 |
28 |
37 | }
38 | >
39 | {Object.entries(options.NumberOfChannels).map((item, index) => {
40 | const key = item[0];
41 | const value = item[1];
42 | return (
43 |
46 | );
47 | })}
48 |
49 |
50 |
51 |
52 | );
53 | }
54 | }
55 |
56 | export default withStyles(formStyles)(NumberParameters);
57 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/Settings.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Scrollbars } from 'react-custom-scrollbars';
3 | import {
4 | SettingsContainer,
5 | FixedWrapper,
6 | ScrollWrapper,
7 | } from './Settings.styles';
8 | import NumberParameter from './NumberParameter';
9 | import ChannelParameters from './ChannelParameters';
10 | import TimeParameters from './TimeParameters';
11 | const Settings = ({
12 | numberOfChannels,
13 | channel1Map,
14 | channel2Map,
15 | trigger1Type,
16 | trigger2Type,
17 | trigger3Type,
18 | trigger4Type,
19 | changeNumberOfChannels,
20 | changeChannelMap,
21 | changeTriggerType,
22 | onChangeCaptureTime,
23 | captureTime,
24 | maxCaptureTime,
25 | }) => (
26 |
27 |
28 |
32 |
33 |
34 |
35 |
46 |
51 |
52 |
53 |
54 | );
55 |
56 | export default Settings;
57 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/Settings.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Card } from '@material-ui/core';
3 |
4 | export const SettingsContainer = styled.div`
5 | width: 100%;
6 | height: 100%;
7 | display: flex;
8 | flex-direction: column;
9 | margin: 0px 0px 0px 16px;
10 | `;
11 |
12 | export const SettingsWrapper = styled(Card)`
13 | width: calc(100% - 16px);
14 | margin: 8px 0px;
15 | `;
16 |
17 | export const OptionsRowWrapper = styled.div`
18 | display: flex;
19 | align-items: center;
20 | margin: 16px 16px 16px 16px;
21 | min-width: 80%;
22 | `;
23 |
24 | export const GraphWrapper = styled.div`
25 | margin: 16px 0px 0px 16px;
26 | display: flex;
27 | flex-direction: column;
28 | height: calc(100% - 16px);
29 | width: calc(100% - 16px);
30 | background-color: #ffffff;
31 | border: 1px solid #e8e8e8;
32 | color: rgba(0, 0, 0, 0.65);
33 | border-radius: 2px;
34 | `;
35 |
36 | export const ProgressWrapper = styled.div`
37 | width: 100%;
38 | height: 4px;
39 | `;
40 |
41 | export const FixedWrapper = styled.div`
42 | display: flex;
43 | `;
44 |
45 | export const ScrollWrapper = styled.div`
46 | display: flex;
47 | flex: 1;
48 | `;
49 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/TimeParameters.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Typography, Divider } from '@material-ui/core';
3 | import CustomSliderInput from '../../../components/CustomSliderInput';
4 | import { SettingsWrapper, OptionsRowWrapper } from './Settings.styles';
5 |
6 | const inputCheck = value => {
7 | let regex = /(^([0-9]+([.][0-9]*)?|[.][0-9]+)$|^$)/; // non-negative float or blank
8 | return regex.test(value);
9 | };
10 |
11 | class TimeParameters extends Component {
12 | render() {
13 | const { onChangeCaptureTime, captureTime, maxCaptureTime } = this.props;
14 | return (
15 |
16 |
17 | Capture Time
18 |
19 |
20 |
21 |
33 |
34 |
35 | );
36 | }
37 | }
38 | export default TimeParameters;
39 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/components/settingOptions.js:
--------------------------------------------------------------------------------
1 | export const options = {
2 | NumberOfChannels: {
3 | 1: '1',
4 | 2: '2',
5 | 3: '3',
6 | 4: '4',
7 | },
8 | ChannelMap: {
9 | ID1: 'LA1',
10 | ID2: 'LA2',
11 | ID3: 'LA3',
12 | ID4: 'LA4',
13 | SEN: 'SEN',
14 | EXT: 'EXT',
15 | CNTR: 'CNTR',
16 | },
17 | ChannelTrigger: {
18 | 0: 'Disabled',
19 | 1: 'Every Edge',
20 | 2: 'Falling Edge',
21 | 3: 'Rising Edge',
22 | 4: 'Every 4 Rising Edge',
23 | },
24 | TimeMeasureTrigger: {
25 | 1: 'Rising Edge',
26 | 2: 'Falling Edge',
27 | 3: 'Every 4 Rising Edges',
28 | },
29 | Write: {
30 | 1: '1',
31 | 2: '2',
32 | 3: '3',
33 | 4: '4',
34 | },
35 | };
36 |
--------------------------------------------------------------------------------
/src/screen/LogicAnalyzer/index.js:
--------------------------------------------------------------------------------
1 | import LogicAnalyzer from './LogicAnalyzer';
2 |
3 | export default LogicAnalyzer;
4 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/Multimeter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import SimplePanelLayout from '../../components/SimplePanelLayout';
4 | import InstrumentCluster from './components/InstrumentCluster';
5 | import debounce from 'lodash/debounce';
6 | import { optionMap } from './components/SettingOptions';
7 | const electron = window.require('electron');
8 | const { ipcRenderer } = electron;
9 | const loadBalancer = window.require('electron-load-balancer');
10 |
11 | class Multimeter extends Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | isWriting: false,
16 | isReading: false,
17 | unit: 'V',
18 | activeCategory: 'VOLTAGE',
19 | activeSubType: 'CH1',
20 | parameter: 'PULSE_FREQUENCY',
21 | dialValue: 0,
22 | };
23 | }
24 |
25 | componentDidMount() {
26 | const { startRead, stopRead } = this.props;
27 | ipcRenderer.on('CONNECTION_STATUS_MUL_MET', (event, args) => {
28 | const { isConnected } = args;
29 | isConnected && this.getConfigFromDevice();
30 | isConnected ? startRead('START_MUL_MET') : stopRead('STOP_MUL_MET');
31 | });
32 | ipcRenderer.on('MUL_MET_CONFIG', (event, args) => {
33 | const { activeCategory, activeSubType, parameter } = args;
34 | const dialValue = optionMap[activeSubType].angle;
35 | const unit =
36 | activeCategory === 'PULSE'
37 | ? optionMap[activeSubType].unit[parameter]
38 | : optionMap[activeSubType].unit;
39 | this.setState({
40 | activeCategory,
41 | activeSubType,
42 | parameter,
43 | dialValue,
44 | unit,
45 | });
46 | });
47 | this.getConfigFromDevice();
48 | startRead('START_MUL_MET');
49 | }
50 |
51 | componentWillUnmount() {
52 | const { stopRead, stopWriting } = this.props;
53 | stopRead('STOP_MUL_MET');
54 | stopWriting();
55 | ipcRenderer.removeAllListeners('MUL_MET_CONFIG');
56 | ipcRenderer.removeAllListeners('CONNECTION_STATUS_MUL_MET');
57 | }
58 |
59 | getConfigFromDevice = debounce(() => {
60 | const { isConnected } = this.props;
61 | isConnected &&
62 | loadBalancer.sendData(ipcRenderer, 'linker', {
63 | command: 'GET_CONFIG_MUL_MET',
64 | });
65 | }, 500);
66 |
67 | sendConfigToDevice = debounce(() => {
68 | const { isConnected } = this.props;
69 | const { activeCategory, activeSubType, parameter } = this.state;
70 | isConnected &&
71 | loadBalancer.sendData(ipcRenderer, 'linker', {
72 | command: 'SET_CONFIG_MUL_MET',
73 | activeCategory,
74 | activeSubType,
75 | parameter,
76 | });
77 | }, 500);
78 |
79 | onTogglePulseUnit = () => {
80 | let { activeSubType, parameter } = this.state;
81 | parameter =
82 | parameter === 'PULSE_FREQUENCY' ? 'PULSE_COUNT' : 'PULSE_FREQUENCY';
83 | const unit = optionMap[activeSubType].unit[parameter];
84 | this.setState(
85 | prevState => ({
86 | parameter,
87 | unit,
88 | }),
89 | () => {
90 | this.sendConfigToDevice();
91 | },
92 | );
93 | };
94 |
95 | onClickButton = activeSubType => () => {
96 | this.changeOption(activeSubType);
97 | };
98 |
99 | changeDialValue = dialValue => {
100 | this.setState({
101 | dialValue,
102 | });
103 | };
104 |
105 | changeOption = activeSubType => {
106 | const { parameter } = this.state;
107 | const activeCategory = optionMap[activeSubType].category;
108 | const dialValue = optionMap[activeSubType].angle;
109 | const unit =
110 | activeCategory === 'PULSE'
111 | ? optionMap[activeSubType].unit[parameter]
112 | : optionMap[activeSubType].unit;
113 | this.setState(
114 | {
115 | data: 0,
116 | activeCategory,
117 | activeSubType,
118 | parameter,
119 | dialValue,
120 | unit,
121 | },
122 | () => {
123 | this.sendConfigToDevice();
124 | },
125 | );
126 | };
127 |
128 | render() {
129 | const { activeSubType, data, unit, dialValue, activeCategory } = this.state;
130 | const { isReading } = this.props;
131 | return (
132 |
146 | }
147 | />
148 | );
149 | }
150 | }
151 |
152 | const mapStateToProps = state => ({
153 | isConnected: state.app.device.isConnected,
154 | });
155 |
156 | export default connect(mapStateToProps, null)(Multimeter);
157 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/components/Dial.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconButton } from '@material-ui/core';
3 | import { DialContainer, IconWrapper, DialWrapper } from './Dial.styles';
4 | import { withTheme } from 'styled-components';
5 | import CustomKnob from '../../../components/CustomKnob';
6 | import { iconMap, optionsOrder, angleMap } from './SettingOptions';
7 |
8 | const Dial = ({
9 | value,
10 | onClickButton,
11 | changeDialValue,
12 | changeOption,
13 | activeSubType,
14 | theme,
15 | }) => {
16 | const onChangeDial = value => {
17 | let dialValue = Math.round(value);
18 | Object.keys(angleMap).map(angle => {
19 | const compAngle = parseInt(angle, 10);
20 | if (compAngle - 5 <= dialValue && dialValue < compAngle + 5) {
21 | dialValue = compAngle;
22 | }
23 | return null;
24 | });
25 | const activeSubType = angleMap[dialValue];
26 | if (activeSubType) {
27 | changeOption(activeSubType);
28 | } else {
29 | changeDialValue(dialValue);
30 | }
31 | };
32 |
33 | const itemList = iconMap(activeSubType, theme);
34 |
35 | return (
36 |
37 | {optionsOrder.map((subType, index) => {
38 | const item = itemList[subType];
39 | return (
40 |
46 |
47 | {item.icon}
48 |
49 |
50 | );
51 | })}
52 |
53 |
61 |
62 |
63 | );
64 | };
65 |
66 | export default withTheme(Dial);
67 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/components/Dial.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const DialContainer = styled.div`
4 | position: relative;
5 | margin: 16px;
6 | display: flex;
7 | width: 400px;
8 | height: 400px;
9 | z-index: 999;
10 |
11 | & > * {
12 | position: absolute;
13 | top: 50%;
14 | left: 50%;
15 | transform: translateX(-50%) translateY(-50%);
16 | z-index: 9999;
17 | }
18 | `;
19 |
20 | export const DialWrapper = styled.div`
21 | z-index: 999;
22 | background: white;
23 | border-radius: 50%;
24 | `;
25 |
26 | export const IconWrapper = styled.div`
27 | min-width: 58px;
28 | min-height: 58px;
29 | `;
30 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/components/InstrumentCluster.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Card } from '@material-ui/core';
3 | import {
4 | InstrumentContainer,
5 | DisplayContainer,
6 | SwitchWrapper,
7 | Backdrop,
8 | TopSection,
9 | BottomSection,
10 | ResSection,
11 | WaveSection,
12 | } from './InstrumentCluster.styles';
13 | import Dial from './Dial';
14 | import { withTheme, withStyles } from '@material-ui/core/styles';
15 | import MeasurementDisplay from './MeasurementDisplay';
16 |
17 | const styles = () => ({
18 | cardMargin: {
19 | display: 'flex',
20 | flexDirection: 'column',
21 | justifyContent: 'center',
22 | },
23 | });
24 |
25 | const InstrumentCluster = ({
26 | activeSubType,
27 | onClickButton,
28 | changeDialValue,
29 | changeOption,
30 | dialValue,
31 | unit,
32 | isReading,
33 | onTogglePulseUnit,
34 | classes,
35 | activeCategory,
36 | }) => {
37 | return (
38 |
39 |
40 |
41 |
48 |
49 | Voltage
50 |
51 |
52 | Measure
53 |
54 |
55 |
62 |
63 | Hz
64 |
69 | Count Pulse
70 |
71 |
72 |
73 |
74 | );
75 | };
76 |
77 | export default withTheme(withStyles(styles)(InstrumentCluster));
78 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/components/InstrumentCluster.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const InstrumentContainer = styled.div`
4 | display: flex;
5 | flex-direction: column;
6 | `;
7 |
8 | export const DisplayContainer = styled.div`
9 | margin: 0px 0px 8px 0px;
10 | `;
11 |
12 | export const DisplayWrapper = styled.div`
13 | display: flex;
14 | justify-content: flex-end;
15 | align-items: center;
16 | padding: 0px 16px 0px 0px;
17 | `;
18 |
19 | export const TextIcon = styled.div`
20 | font-size: 16px;
21 | font-weight: 900;
22 | height: 34px;
23 | width: 34px;
24 | vertical-align: middle;
25 | line-height: 34px;
26 | color: ${props =>
27 | props.active ? props.theme.secondary.dark : props.theme.text.hint};
28 | `;
29 |
30 | export const SwitchWrapper = styled.div`
31 | display: flex;
32 | align-items: center;
33 | justify-content: flex-start;
34 | margin: 0px 0px 0px 32px;
35 | `;
36 |
37 | export const Backdrop = styled.div`
38 | position: absolute;
39 | height: 590px;
40 | width: 432px;
41 | display: flex;
42 | flex-direction: column;
43 | `;
44 |
45 | export const TopSection = styled.div`
46 | height: 226px;
47 | margin: 16px 16px 4px 16px;
48 | border: 3px solid red;
49 | border-radius: 4px;
50 | display: flex;
51 | justify-content: center;
52 | align-items: flex-start;
53 | font-size: 18px;
54 | color: red;
55 | padding: 8px 0px 0px 0px;
56 | `;
57 |
58 | export const BottomSection = styled.div`
59 | flex: 1;
60 | display: flex;
61 | `;
62 |
63 | export const ResSection = styled.div`
64 | margin: 4px 16px 16px 4px;
65 | border: 3px solid black;
66 | border-radius: 4px;
67 | width: 100px;
68 | display: flex;
69 | justify-content: center;
70 | align-items: flex-end;
71 | font-size: 18px;
72 | color: black;
73 | padding: 0px 0px 8px 0px;
74 | `;
75 |
76 | export const WaveSection = styled.div`
77 | margin: 4px 4px 16px 16px;
78 | border: 3px solid black;
79 | border-radius: 4px;
80 | flex: 1;
81 | `;
82 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/components/MeasurementDisplay.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, LinearProgress } from '@material-ui/core';
3 | import { DisplayContainer, DisplayWrapper } from './InstrumentCluster.styles';
4 | import Display from '../../../components/Display';
5 | const electron = window.require('electron');
6 | const { ipcRenderer } = electron;
7 |
8 | class MeasurementDisplay extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | prefix: null,
13 | data: 0,
14 | };
15 | }
16 |
17 | componentDidMount() {
18 | ipcRenderer.on('MUL_MET_DATA', (event, args) => {
19 | const { isReading } = this.props;
20 | isReading &&
21 | this.setState({
22 | ...args,
23 | });
24 | });
25 | }
26 |
27 | componentWillUnmount() {
28 | ipcRenderer.removeAllListeners('MUL_MET_DATA');
29 | }
30 |
31 | render() {
32 | const { isReading, unit } = this.props;
33 | const { data, prefix } = this.state;
34 |
35 | return (
36 |
37 |
38 | {isReading && }
39 |
40 |
45 |
46 |
47 |
48 | );
49 | }
50 | }
51 |
52 | export default MeasurementDisplay;
53 |
--------------------------------------------------------------------------------
/src/screen/Multimeter/index.js:
--------------------------------------------------------------------------------
1 | import Multimeter from './Multimeter';
2 |
3 | export default Multimeter;
4 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/ActionButtons.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Pause as StopReadIcon,
4 | PlayCircleFilled as ReadIcon,
5 | RadioButtonChecked as RecordIcon,
6 | Stop as StopIcon,
7 | } from '@material-ui/icons';
8 | import { Button } from '@material-ui/core';
9 | import { withStyles } from '@material-ui/core/styles';
10 | import { ButtonWrapper } from './ActionButtons.styles';
11 |
12 | const styles = () => ({
13 | buttonMargin: {
14 | margin: '0px 0px 0px 16px',
15 | },
16 | });
17 |
18 | const ActionButtons = ({
19 | isConnected,
20 | isReading,
21 | isWriting,
22 | onToggleRead,
23 | onToggleWrite,
24 | classes,
25 | }) => {
26 | return (
27 |
28 |
42 |
57 |
58 | );
59 | };
60 |
61 | export default withStyles(styles)(ActionButtons);
62 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/ActionButtons.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ButtonWrapper = styled.div`
4 | display: flex;
5 | margin: 16px;
6 | width: calc(100% - 32px);
7 | justify-content: center;
8 | align-items: center;
9 | `;
10 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/FFTGraph.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | ResponsiveContainer,
4 | Line,
5 | LineChart,
6 | XAxis,
7 | YAxis,
8 | CartesianGrid,
9 | Tooltip,
10 | Legend,
11 | Label,
12 | } from 'recharts';
13 | import { withTheme } from 'styled-components';
14 | import { GraphWrapper } from './Settings.styles';
15 |
16 | const electron = window.require('electron');
17 | const { ipcRenderer } = electron;
18 |
19 | class Graph extends Component {
20 | constructor(props) {
21 | super(props);
22 | this.state = {
23 | fftData: [
24 | {
25 | ch1: 0,
26 | ch2: 0,
27 | ch3: 0,
28 | ch4: 0,
29 | frequency: 0,
30 | },
31 | ],
32 | };
33 | }
34 |
35 | componentDidMount() {
36 | ipcRenderer.on('OSC_FFT_DATA', (event, args) => {
37 | const { isReading } = this.props;
38 | isReading &&
39 | this.setState({
40 | fftData: args.data,
41 | });
42 | });
43 | }
44 |
45 | componentWillUnmount() {
46 | ipcRenderer.removeAllListeners('OSC_FFT_DATA');
47 | }
48 |
49 | render() {
50 | const { activeChannels, theme } = this.props;
51 | const { fftData } = this.state;
52 |
53 | return (
54 |
55 |
56 |
65 |
66 |
67 |
68 |
69 |
70 |
75 |
76 |
77 | {activeChannels.ch1 && (
78 |
86 | )}
87 | {activeChannels.ch2 && (
88 |
96 | )}
97 | {activeChannels.ch3 && (
98 |
106 | )}
107 | {activeChannels.mic && (
108 |
116 | )}
117 |
118 |
119 |
120 | );
121 | }
122 | }
123 |
124 | export default withTheme(Graph);
125 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/FitPanel.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const PanelContainer = styled.div`
4 | display: flex;
5 | margin: 16px 0px 0px 16px;
6 | width: calc(100% - 16px);
7 |
8 | & > * + * {
9 | margin: 0px 0px 0px 16px;
10 | }
11 | `;
12 |
13 | export const ValueWrapper = styled.div`
14 | min-width: 5.8em;
15 | display: flex;
16 | flex-direction: column;
17 | margin: 16px 8px;
18 | align-items: center;
19 | justify-content: center;
20 | cursor: pointer;
21 |
22 | & > * + * {
23 | margin: 8px 0px 0px 0px;
24 | }
25 | `;
26 |
27 | export const DisplayContainer = styled.div`
28 | display: flex;
29 | `;
30 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/Graph.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | ResponsiveContainer,
4 | Line,
5 | LineChart,
6 | XAxis,
7 | YAxis,
8 | CartesianGrid,
9 | Tooltip,
10 | Legend,
11 | Label,
12 | } from 'recharts';
13 | import { withTheme } from 'styled-components';
14 | import { GraphWrapper } from './Settings.styles';
15 |
16 | const electron = window.require('electron');
17 | const { ipcRenderer } = electron;
18 |
19 | class Graph extends Component {
20 | constructor(props) {
21 | super(props);
22 | this.state = {
23 | oscData: [
24 | {
25 | ch1: 0,
26 | ch2: 0,
27 | ch3: 0,
28 | ch4: 0,
29 | time: 0,
30 | },
31 | ],
32 | };
33 | }
34 |
35 | componentDidMount() {
36 | ipcRenderer.on('OSC_VOLTAGE_DATA', (event, args) => {
37 | const { isReading } = this.props;
38 | isReading &&
39 | this.setState({
40 | oscData: args.data,
41 | });
42 | });
43 | }
44 |
45 | componentWillUnmount() {
46 | ipcRenderer.removeAllListeners('OSC_VOLTAGE_DATA');
47 | }
48 |
49 | render() {
50 | const { activeChannels, timeBase, channelRanges, theme } = this.props;
51 | const { oscData } = this.state;
52 |
53 | return (
54 |
55 |
56 |
65 |
66 |
72 |
73 |
74 |
83 |
92 |
93 |
94 | {activeChannels.ch1 && (
95 |
103 | )}
104 | {activeChannels.ch2 && (
105 |
113 | )}
114 | {activeChannels.ch3 && (
115 |
123 | )}
124 | {activeChannels.mic && (
125 |
133 | )}
134 |
135 |
136 |
137 | );
138 | }
139 | }
140 |
141 | export default withTheme(Graph);
142 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/PlotParameters.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Checkbox,
4 | Select,
5 | Typography,
6 | Divider,
7 | FormControlLabel,
8 | MenuItem,
9 | OutlinedInput,
10 | FormControl,
11 | InputLabel,
12 | } from '@material-ui/core';
13 | import { withStyles } from '@material-ui/core/styles';
14 | import { SettingsWrapper, OptionsRowWrapper } from './Settings.styles';
15 | import { options } from './settingOptions';
16 | import formStyles from '../../../utils/formStyles';
17 |
18 | class AnalysisParameters extends Component {
19 | render() {
20 | const {
21 | isXYPlotActive,
22 | plotChannel1,
23 | plotChannel2,
24 | onToggleCheckBox,
25 | onChangePlotChannel,
26 | classes,
27 | } = this.props;
28 |
29 | return (
30 |
31 |
32 | XY Plot
33 |
34 |
35 |
36 |
42 | }
43 | label="Enable XY Plot"
44 | />
45 |
46 |
47 |
52 |
56 | Channel 1
57 |
58 |
67 | }
68 | >
69 | {Object.entries(options.Select).map((item, index) => {
70 | const key = item[0];
71 | const value = item[1];
72 | return (
73 |
76 | );
77 | })}
78 |
79 |
80 |
86 |
90 | Channel 2
91 |
92 |
101 | }
102 | >
103 | {Object.entries(options.Select).map((item, index) => {
104 | const key = item[0];
105 | const value = item[1];
106 | return (
107 |
110 | );
111 | })}
112 |
113 |
114 |
115 |
116 | );
117 | }
118 | }
119 |
120 | export default withStyles(formStyles)(AnalysisParameters);
121 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/Settings.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Scrollbars } from 'react-custom-scrollbars';
3 | import {
4 | SettingsContainer,
5 | FixedWrapper,
6 | ScrollWrapper,
7 | } from './Settings.styles';
8 | import ChannelParameters from './ChannelParameters';
9 | import TimeParameters from './TimeParameters';
10 | import AnalysisParameters from './AnalysisParameters';
11 | import PlotParameters from './PlotParameters';
12 |
13 | const Settings = ({
14 | timeBaseIndex,
15 | timeBase,
16 | activeChannels,
17 | channelRanges,
18 | isTriggerActive,
19 | channelMaps,
20 | triggerVoltage,
21 | triggerChannel,
22 | isFourierTransformActive,
23 | fitType,
24 | fitChannel1,
25 | fitChannel2,
26 | isXYPlotActive,
27 | plotChannel1,
28 | plotChannel2,
29 | onToggleChannel,
30 | onChangeChannelRange,
31 | onChangeChannelMap,
32 | onToggleCheckBox,
33 | onChangeTriggerVoltage,
34 | onChangeTriggerChannel,
35 | onChangeTimeBaseIndex,
36 | timeBaseListLength,
37 | onChangeFitType,
38 | onChangeFitChannel,
39 | onChangePlotChannel,
40 | }) => (
41 |
42 |
43 |
51 |
52 |
53 |
54 |
66 |
75 |
82 |
83 |
84 |
85 | );
86 |
87 | export default Settings;
88 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/Settings.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Card } from '@material-ui/core';
3 |
4 | export const SettingsContainer = styled.div`
5 | width: 100%;
6 | height: 100%;
7 | display: flex;
8 | flex-direction: column;
9 | margin: 0px 0px 0px 16px;
10 | `;
11 |
12 | export const SettingsWrapper = styled(Card)`
13 | width: calc(100% - 16px);
14 | margin: 8px 0px;
15 | `;
16 |
17 | export const OptionsRowWrapper = styled.div`
18 | display: flex;
19 | align-items: center;
20 | margin: 16px 16px 16px 16px;
21 | min-width: 80%;
22 | `;
23 |
24 | export const GraphWrapper = styled.div`
25 | margin: 16px 0px 0px 16px;
26 | display: flex;
27 | height: calc(100% - 16px);
28 | width: calc(100% - 16px);
29 | background-color: #ffffff;
30 | border: 1px solid #e8e8e8;
31 | color: rgba(0, 0, 0, 0.65);
32 | border-radius: 2px;
33 | `;
34 |
35 | export const FixedWrapper = styled.div`
36 | display: flex;
37 | `;
38 |
39 | export const ScrollWrapper = styled.div`
40 | display: flex;
41 | flex: 1;
42 | `;
43 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/TimeParameters.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Checkbox,
4 | Select,
5 | Typography,
6 | Divider,
7 | FormControlLabel,
8 | MenuItem,
9 | OutlinedInput,
10 | FormControl,
11 | InputLabel,
12 | } from '@material-ui/core';
13 | import { withStyles } from '@material-ui/core/styles';
14 | import CustomSliderInput from '../../../components/CustomSliderInput';
15 | import { SettingsWrapper, OptionsRowWrapper } from './Settings.styles';
16 | import { options } from './settingOptions';
17 | import formStyles from '../../../utils/formStyles';
18 |
19 | class TimeParameters extends Component {
20 | render() {
21 | const {
22 | triggerVoltage,
23 | timeBaseListLength,
24 | timeBaseIndex,
25 | timeBase,
26 | triggerChannel,
27 | isTriggerActive,
28 | onToggleCheckBox,
29 | onChangeTriggerVoltage,
30 | onChangeTriggerChannel,
31 | onChangeTimeBaseIndex,
32 | classes,
33 | } = this.props;
34 | return (
35 |
36 |
37 | Timebase and Trigger
38 |
39 |
40 |
41 |
47 | }
48 | label="Trigger"
49 | />
50 |
55 |
59 | Channel
60 |
61 |
70 | }
71 | >
72 | {Object.entries(options.Select).map((item, index) => {
73 | const key = item[0];
74 | const value = item[1];
75 | return (
76 |
79 | );
80 | })}
81 |
82 |
83 |
84 |
85 |
97 |
98 |
99 |
111 |
112 |
113 | );
114 | }
115 | }
116 |
117 | export default withStyles(formStyles)(TimeParameters);
118 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/XYPlotGraph.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | ResponsiveContainer,
4 | Line,
5 | LineChart,
6 | XAxis,
7 | YAxis,
8 | CartesianGrid,
9 | Label,
10 | } from 'recharts';
11 | import { withTheme } from 'styled-components';
12 | import { GraphWrapper } from './Settings.styles';
13 |
14 | const electron = window.require('electron');
15 | const { ipcRenderer } = electron;
16 |
17 | class XYPlotGraph extends Component {
18 | constructor(props) {
19 | super(props);
20 | this.state = {
21 | xyPlotData: [
22 | {
23 | plotChannel1: 0,
24 | plotChannel2: 0,
25 | },
26 | ],
27 | };
28 | }
29 |
30 | componentDidMount() {
31 | ipcRenderer.on('OSC_XY_PLOT_DATA', (event, args) => {
32 | const { isReading } = this.props;
33 | isReading &&
34 | args.data &&
35 | this.setState({
36 | xyPlotData: args.data,
37 | });
38 | });
39 | }
40 |
41 | componentWillUnmount() {
42 | ipcRenderer.removeAllListeners('OSC_XY_PLOT_DATA');
43 | }
44 |
45 | render() {
46 | const { theme, plotChannel1, plotChannel2 } = this.props;
47 | const { xyPlotData } = this.state;
48 |
49 | return (
50 |
51 |
52 |
61 |
62 |
68 |
69 |
70 |
76 |
77 |
85 |
86 |
87 |
88 | );
89 | }
90 | }
91 |
92 | export default withTheme(XYPlotGraph);
93 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/components/settingOptions.js:
--------------------------------------------------------------------------------
1 | export const options = {
2 | Range1: {
3 | '16': '+/-16V',
4 | '8': '+/-8V',
5 | '4': '+/-4V',
6 | '3': '+/-3V',
7 | '2': '+/-2V',
8 | '1': '+/-1V',
9 | '0.5': '+/-500V',
10 | '160': '+/-160V',
11 | },
12 | Map1: {
13 | CH1: 'CH1',
14 | CH2: 'CH2',
15 | CH3: 'CH3',
16 | MIC: 'MIC',
17 | CAP: 'CAP',
18 | SEN: 'SEN',
19 | AN8: 'AN8',
20 | },
21 | Mic: {
22 | Microphone: 'Microphone',
23 | Inbuilt: 'In-Built Mic',
24 | },
25 | Select: {
26 | CH1: 'CH1',
27 | CH2: 'CH2',
28 | CH3: 'CH3',
29 | MIC: 'MIC',
30 | },
31 | DataAnalysisSelect: {
32 | None: 'None',
33 | CH1: 'CH1',
34 | CH2: 'CH2',
35 | CH3: 'CH3',
36 | MIC: 'MIC',
37 | },
38 | FitSelect: {
39 | Sine: 'Sine Fit',
40 | Square: 'Square Fit',
41 | },
42 | };
43 |
--------------------------------------------------------------------------------
/src/screen/Oscilloscope/index.js:
--------------------------------------------------------------------------------
1 | import Oscilloscope from './Oscilloscope';
2 |
3 | export default Oscilloscope;
4 |
--------------------------------------------------------------------------------
/src/screen/PowerSource/PowerSource.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { withRouter } from 'react-router-dom';
4 | import SimplePanelLayout from '../../components/SimplePanelLayout';
5 | import InstrumentCluster from './components/InstrumentCluster';
6 | import roundOff from '../../utils/arithmetics';
7 | import debounce from 'lodash/debounce';
8 | const electron = window.require('electron');
9 | const { ipcRenderer } = electron;
10 | const loadBalancer = window.require('electron-load-balancer');
11 |
12 | class PowerSouce extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | pv1: -5,
17 | pv2: -3.3,
18 | pv3: 0,
19 | pcs: 0,
20 | };
21 | }
22 |
23 | componentDidMount() {
24 | ipcRenderer.on('CONNECTION_STATUS', (event, args) => {
25 | const { isConnected } = args;
26 | isConnected && this.getConfigFromDevice();
27 | });
28 | ipcRenderer.on('PWR_SRC_CONFIG', (event, args) => {
29 | const { pv1, pv2, pv3, pcs } = args;
30 | this.setState({
31 | pv1: roundOff(pv1),
32 | pv2: roundOff(pv2),
33 | pv3: roundOff(pv3),
34 | pcs: roundOff(pcs),
35 | });
36 | });
37 |
38 | const { filePath } = this.props.match.params;
39 | filePath ? this.getConfigFromFile() : this.getConfigFromDevice();
40 | }
41 |
42 | componentWillUnmount() {
43 | ipcRenderer.removeAllListeners('PWR_SRC_CONFIG');
44 | }
45 |
46 | getConfigFromFile = debounce(() => {
47 | const { filePath } = this.props.match.params;
48 | const { isConnected, dataPath } = this.props;
49 | isConnected &&
50 | loadBalancer.sendData(ipcRenderer, 'linker', {
51 | command: 'GET_CONFIG_PWR_SRC_FILE',
52 | dataPath: `${dataPath}/${filePath}`,
53 | });
54 | }, 500);
55 |
56 | getConfigFromDevice = debounce(() => {
57 | const { isConnected } = this.props;
58 | isConnected &&
59 | loadBalancer.sendData(ipcRenderer, 'linker', {
60 | command: 'GET_CONFIG_PWR_SRC',
61 | });
62 | }, 500);
63 |
64 | sendConfigToDevice = debounce(() => {
65 | const { isConnected } = this.props;
66 | isConnected &&
67 | loadBalancer.sendData(ipcRenderer, 'linker', {
68 | command: 'SET_CONFIG_PWR_SRC',
69 | ...this.state,
70 | });
71 | }, 500);
72 |
73 | onChangeSlider = pinType => value => {
74 | this.setState(
75 | {
76 | [pinType]: roundOff(parseFloat(value)),
77 | },
78 | () => {
79 | this.sendConfigToDevice();
80 | },
81 | );
82 | };
83 |
84 | onPressButton = (pinType, isPositive) => event => {
85 | this.setState(
86 | {
87 | [pinType]: roundOff(this.state[pinType] + (isPositive ? 0.01 : -0.01)),
88 | },
89 | () => {
90 | this.sendConfigToDevice();
91 | },
92 | );
93 | };
94 |
95 | render() {
96 | const { pv1, pv2, pv3, pcs } = this.state;
97 |
98 | return (
99 |
109 | }
110 | />
111 | );
112 | }
113 | }
114 |
115 | const mapStateToProps = state => ({
116 | isConnected: state.app.device.isConnected,
117 | });
118 |
119 | export default withRouter(connect(mapStateToProps, null)(PowerSouce));
120 |
--------------------------------------------------------------------------------
/src/screen/PowerSource/components/InstrumentCluster.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CardContainer = styled.div`
4 | display: flex;
5 | flex-direction: row;
6 |
7 | & > * + * {
8 | margin: 0px 0px 0px 32px;
9 | }
10 | `;
11 |
12 | export const CardColumnWrapper = styled.div`
13 | display: flex;
14 | flex-direction: column;
15 |
16 | & > * + * {
17 | margin: 32px 0px 0px 0px;
18 | }
19 | `;
20 |
21 | export const ButtonContainer = styled.div`
22 | display: flex;
23 | flex-direction: row;
24 | align-items: center;
25 | justify-content: center;
26 | margin: 16px 16px 16px 16px;
27 | `;
28 |
29 | export const DisplayContainer = styled.div`
30 | display: flex;
31 | flex-direction: column;
32 | `;
33 |
34 | export const CircularInputContainer = styled.div`
35 | display: flex;
36 | margin: 16px 0px 24px 24px;
37 | `;
38 |
39 | export const InstrumentContainer = styled.div`
40 | display: flex;
41 | flex-direction: row;
42 | margin: 16px;
43 | `;
44 |
45 | export const ValueWrapper = styled.div`
46 | min-width: 24em;
47 | display: flex;
48 | flex-direction: column;
49 | margin: 16px 16px 16px 16px;
50 | align-items: center;
51 | justify-content: center;
52 | cursor: pointer;
53 | `;
54 |
--------------------------------------------------------------------------------
/src/screen/PowerSource/index.js:
--------------------------------------------------------------------------------
1 | import PowerSource from './PowerSource';
2 |
3 | export default PowerSource;
4 |
--------------------------------------------------------------------------------
/src/screen/RobotArm/Components/PaintArea.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | PaintContainer,
4 | PaintRow,
5 | PaintCell,
6 | ValueWrapper,
7 | IndexWrapper,
8 | } from './styles';
9 |
10 | const PaintArea = ({
11 | brush1,
12 | brush2,
13 | brush3,
14 | brush4,
15 | servo1,
16 | servo2,
17 | servo3,
18 | servo4,
19 | activeBrush,
20 | setServoValues,
21 | timeLine,
22 | }) => {
23 | return (
24 |
25 |
26 | {servo1.map((item, index) => {
27 | return (
28 |
31 | activeBrush === 'servo1' &&
32 | setServoValues(brush1, 'servo1', index)
33 | }
34 | >
35 |
39 | {item !== null ? `${item}°` : ' '}
40 | {`${index + 1}s`}
41 |
42 |
52 | activeBrush === 'servo2' &&
53 | setServoValues(brush2, 'servo2', index)
54 | }
55 | >
56 |
57 | {item !== null ? `${item}°` : ' '}
58 | {`${index + 1}s`}
59 |
60 |
70 | activeBrush === 'servo3' &&
71 | setServoValues(brush3, 'servo3', index)
72 | }
73 | >
74 |
75 | {item !== null ? `${item}°` : ' '}
76 | {`${index + 1}s`}
77 |
78 |
88 | activeBrush === 'servo4' &&
89 | setServoValues(brush4, 'servo4', index)
90 | }
91 | >
92 |
93 | {item !== null ? `${item}°` : ' '}
94 | {`${index + 1}s`}
95 |
96 |
{JSON.stringify(data)}
152 |
153 |
154 | );
155 | }
156 | }
157 |
158 | const mapStateToProps = state => ({
159 | isConnected: state.app.device.isConnected,
160 | });
161 |
162 | export default withRouter(connect(mapStateToProps, null)(Sensors));
163 |
--------------------------------------------------------------------------------
/src/screen/Sensors/index.js:
--------------------------------------------------------------------------------
1 | import Sensors from './Sensors';
2 |
3 | export default Sensors;
4 |
--------------------------------------------------------------------------------
/src/screen/Sensors/styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const Container = styled.div`
4 | height: 100%;
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | `;
9 |
10 | export const Wrapper = styled.div`
11 | width: 60%;
12 | flex: 1;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | overflow-y: auto;
17 | `;
18 |
19 | export const HelpText = styled.div`
20 | padding: 16px;
21 | border: 1px solid grey;
22 | border-radius: 4px;
23 | margin: 16px 0px 0px 0px;
24 | `;
25 |
26 | export const SecondaryContentWrapper = styled.div`
27 | margin: 16px 0px 0px 0px;
28 | display: flex;
29 | flex-direction: column;
30 | align-items: center;
31 | `;
32 |
33 | export const TitleWrapper = styled.div`
34 | margin: 32px 0px 0px 0px;
35 | font-size: 1.5em;
36 | color: ${props => props.theme.text.primary};
37 | `;
38 |
39 | export const ScrollWrapper = styled.div`
40 | margin: 16px 0px 0px 0px;
41 | `;
42 |
43 | export const SensorTab = styled.div`
44 | margin: 16px;
45 | height: 42px;
46 | width: 340px;
47 | display: flex;
48 | justify-content: center;
49 | transition-timing-function: ease-in-out;
50 | transition-duration: 200ms;
51 | border-radius: 2px;
52 | background-color: ${props => props.theme.primary.main};
53 | box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
54 | 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
55 |
56 | &:hover {
57 | cursor: pointer;
58 | box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
59 | 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
60 | }
61 | `;
62 |
63 | export const SensorTitle = styled.div`
64 | color: ${props => props.theme.common.white};
65 | font-size: 1.2em;
66 | font-weight: 600;
67 | vertical-align: center;
68 | height: 42px;
69 | line-height: 42px;
70 | `;
71 |
--------------------------------------------------------------------------------
/src/screen/Settings/Settings.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Dialog from '@material-ui/core/Dialog';
3 | import DialogTitle from '@material-ui/core/DialogTitle';
4 | import Radio from '@material-ui/core/Radio';
5 | import RadioGroup from '@material-ui/core/RadioGroup';
6 | import FormControlLabel from '@material-ui/core/FormControlLabel';
7 | import FormControl from '@material-ui/core/FormControl';
8 | import {
9 | Container,
10 | Wrapper,
11 | CustomCard,
12 | ContentWrapper,
13 | SettingMain,
14 | SettingSub,
15 | } from './Settings.styles';
16 | import { Scrollbars } from 'react-custom-scrollbars';
17 |
18 | class Settings extends Component {
19 | constructor(props) {
20 | super(props);
21 | this.state = {
22 | isDialogOpen: false,
23 | dataFormat: 'csv',
24 | };
25 | this.activeSetting = null;
26 | }
27 |
28 | handleChangeDataFormat = event => {
29 | this.setState({
30 | dataFormat: event.target.value,
31 | });
32 | };
33 |
34 | dialogContentRenderer = () => {
35 | const { dataFormat } = this.state;
36 | switch (this.activeSetting) {
37 | case 'WRITE_TYPE':
38 | return (
39 |
40 |
41 | Export Data Format
42 |
43 |
49 |
58 | } label="CSV" />
59 |
60 |
61 |
62 | );
63 |
64 | default:
65 | break;
66 | }
67 | };
68 |
69 | handleOpen = type => () => {
70 | this.setState({
71 | isDialogOpen: true,
72 | });
73 | this.activeSetting = 'WRITE_TYPE';
74 | };
75 |
76 | handleClose = () => {
77 | this.setState({
78 | isDialogOpen: false,
79 | });
80 | this.activeSetting = null;
81 | };
82 |
83 | render() {
84 | const { isDialogOpen } = this.state;
85 | return (
86 |
87 |
90 |
91 |
92 |
93 |
94 | Export Data Format
95 | Current format is CSV format
96 |
97 |
98 |
99 |
100 |
101 | );
102 | }
103 | }
104 |
105 | export default Settings;
106 |
--------------------------------------------------------------------------------
/src/screen/Settings/Settings.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Card } from '@material-ui/core';
3 |
4 | export const Container = styled.div`
5 | display: flex;
6 | width: 100%;
7 | height: 100%;
8 | justify-content: center;
9 | `;
10 |
11 | export const Wrapper = styled.div`
12 | width: 100%;
13 | margin: 16px 0px;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | `;
18 |
19 | export const CustomCard = styled(Card)`
20 | width: calc(50% - 32px);
21 | `;
22 |
23 | export const ContentWrapper = styled.div`
24 | width: 100%;
25 | z-index: 1;
26 | display: flex;
27 | flex-direction: column;
28 | margin: 16px 16px 16px 16px;
29 | cursor: pointer;
30 | `;
31 |
32 | export const SettingMain = styled.div`
33 | font-size: 16px;
34 | margin: 0px 0px 4px 0px;
35 | `;
36 |
37 | export const SettingSub = styled.div`
38 | font-size: 12px;
39 | color: gray;
40 | `;
41 |
--------------------------------------------------------------------------------
/src/screen/Settings/index.js:
--------------------------------------------------------------------------------
1 | import Settings from './Settings';
2 |
3 | export default Settings;
4 |
--------------------------------------------------------------------------------
/src/screen/WaveGenerator/components/InstrumentCluster.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SineWavePanel from './SineWavePanel';
3 | import SquareWavePanel from './SquareWavePanel';
4 | import { SettingsContainer } from './InstrumentCluster.styles';
5 |
6 | const InstrumentCluster = () => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | };
18 |
19 | export default InstrumentCluster;
20 |
--------------------------------------------------------------------------------
/src/screen/WaveGenerator/components/Settings.styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Card } from '@material-ui/core';
3 |
4 | export const SettingsContainer = styled.div`
5 | width: 100%;
6 | height: calc(100% - 16px);
7 | display: flex;
8 | flex-direction: column;
9 | margin: 8px 0px 0px 16px;
10 | `;
11 |
12 | export const SettingsWrapper = styled(Card)`
13 | width: calc(100% - 16px);
14 | margin: 8px 0px;
15 | `;
16 |
17 | export const OptionsRowWrapper = styled.div`
18 | display: flex;
19 | align-items: center;
20 | margin: 16px 16px 16px 16px;
21 | min-width: 80%;
22 | `;
23 |
24 | export const TitleWrapper = styled.div`
25 | display: flex;
26 | `;
27 |
28 | export const Spacer = styled.div`
29 | flex: 1;
30 | `;
31 |
32 | export const Wrapper = styled.div`
33 | width: 1208px;
34 | `;
35 |
36 | export const MainContainer = styled.div`
37 | display: flex;
38 | `;
39 |
40 | export const DisplayWrapper = styled.div`
41 | width: 650px;
42 | height: 500px;
43 | margin: 16px 0px 0px 16px;
44 | background: #000;
45 | display: flex;
46 | flex-direction: column;
47 | `;
48 |
49 | export const InformationRow1 = styled.div`
50 | display: flex;
51 | border-bottom: 1px solid #fff;
52 | `;
53 |
54 | export const InformationRow2 = styled.div`
55 | display: flex;
56 | flex: 1;
57 | `;
58 |
59 | export const InformationRow3 = styled.div`
60 | display: flex;
61 | border-top: 1px solid #fff;
62 | `;
63 |
64 | export const WaveMarker = styled.div`
65 | height: 100px;
66 | color: ${props => (props.active ? '#ffcc80' : '#fff')};
67 | flex: 1;
68 | text-align: center;
69 | font-size: 18px;
70 | line-height: 100px;
71 | vertical-align: middle;
72 | `;
73 |
74 | export const WaveDetails = styled.div`
75 | height: 100px;
76 | color: #ffcc80;
77 | flex: 1;
78 | text-align: center;
79 | font-size: 24px;
80 | line-height: 100px;
81 | vertical-align: middle;
82 | `;
83 |
84 | export const WaveType = styled.div`
85 | width: 250px;
86 | display: flex;
87 | justify-content: center;
88 | align-items: center;
89 | font-size: 24px;
90 | margin: 0px 16px;
91 | `;
92 |
93 | export const InfoList = styled.div`
94 | display: flex;
95 | flex-direction: column;
96 | flex: 1;
97 | border-left: 1px solid #fff;
98 | font-size: 22px;
99 | justify-content: center;
100 | `;
101 |
102 | export const InfoText = styled.div`
103 | color: #fff;
104 | text-align: left;
105 | `;
106 |
107 | export const ControllerWrapper = styled.div`
108 | display: flex;
109 | flex-direction: column;
110 | margin: 16px;
111 | `;
112 |
113 | export const ButtonRow = styled.div`
114 | display: flex;
115 | margin: 16px 16px;
116 | `;
117 |
118 | export const TextWrapper = styled.div`
119 | display: flex;
120 | justify-content: center;
121 | align-items: center;
122 | `;
123 |
124 | export const Title = styled.div`
125 | color: ${props => props.theme.primary.main};
126 | font-size: 24px;
127 | text-align: center;
128 | `;
129 |
130 | export const BorderMaker = styled.div`
131 | border: 2px solid;
132 | border-color: ${props => props.theme.primary.main};
133 | border-radius: 4px;
134 | padding: 16px 8px;
135 | height: 138px;
136 | width: 510px;
137 | `;
138 |
139 | export const SliderContainer = styled.div`
140 | height: 40px;
141 | margin: 16px;
142 | display: flex;
143 | align-items: center;
144 | `;
145 |
146 | export const SliderWrapper = styled.div`
147 | height: 10px;
148 | margin: 0px 0px 0px 16px;
149 | flex: 1;
150 | `;
151 |
152 | export const ButtonContainer = styled.div`
153 | margin: 0px 0px 0px 16px;
154 | `;
155 |
--------------------------------------------------------------------------------
/src/screen/WaveGenerator/components/settingOptions.js:
--------------------------------------------------------------------------------
1 | export const options = {
2 | WaveForm: {
3 | sine: 'Sinusoidal',
4 | tria: 'Triangular',
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/src/screen/WaveGenerator/index.js:
--------------------------------------------------------------------------------
1 | import WaveGenerator from './WaveGenerator';
2 |
3 | export default WaveGenerator;
4 |
--------------------------------------------------------------------------------
/src/screen/WaveGenerator/styles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const Container = styled.div`
4 | width: 100%;
5 | height: 100%;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | background: ${props => props.theme.background.default};
10 | `;
11 |
12 | export const Wrapper = styled.div``;
13 |
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | import { createMuiTheme } from '@material-ui/core/styles';
2 |
3 | const theme = createMuiTheme({
4 | palette: {
5 | common: {
6 | black: '#000',
7 | white: '#fff',
8 | },
9 | background: {
10 | paper: 'rgba(255, 255, 255, 1)',
11 | default: 'rgba(181, 181, 181, 0.2)',
12 | },
13 | primary: {
14 | light: '#ff6659',
15 | main: '#d32f2f',
16 | dark: '#9a0007',
17 | contrastText: '#fff',
18 | },
19 | secondary: {
20 | light: '#757de8',
21 | main: '#3f51b5',
22 | dark: '#002984',
23 | contrastText: '#fff',
24 | },
25 | error: {
26 | light: '#e57373',
27 | main: '#f44336',
28 | dark: '#d32f2f',
29 | contrastText: '#fff',
30 | },
31 | text: {
32 | primary: 'rgba(0, 0, 0, 0.87)',
33 | secondary: 'rgba(0, 0, 0, 0.54)',
34 | disabled: 'rgba(0, 0, 0, 0.38)',
35 | hint: 'rgba(0, 0, 0, 0.38)',
36 | },
37 | linkColor: '#1890ff',
38 | headingColor: 'rgba(0, 0, 0, .85)',
39 | disabledColor: 'rgba(0, 0, 0, .25)',
40 | gradient1:
41 | 'linear-gradient(90deg, rgba(207,72,139,1) 5%, rgba(101,101,163,1) 48%, rgba(79,77,175,1) 100%)',
42 | iconBackground: '#ffffff',
43 | navigationBackground: '#bdbdbd',
44 | ch1Color: '#ff9800',
45 | ch2Color: '#03a9f4',
46 | ch3Color: '#4caf50',
47 | micColor: '#5e35b1',
48 | s1Color: '#ff9800',
49 | s2Color: '#03a9f4',
50 | sqr1Color: '#4caf50',
51 | sqr2Color: '#5e35b1',
52 | sqr3Color: '#ff9800',
53 | sqr4Color: '#03a9f4',
54 | },
55 | });
56 |
57 | export default theme;
58 |
--------------------------------------------------------------------------------
/src/utils/arithmetics.js:
--------------------------------------------------------------------------------
1 | export default function roundOff(num, roundTo = 2) {
2 | num = parseFloat(num);
3 | return +num.toFixed(roundTo);
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils/fileNameProcessor.js:
--------------------------------------------------------------------------------
1 | exports.fileNameTrimmer = (n, len) => {
2 | const ext = n.substring(n.lastIndexOf('.') + 1, n.length).toLowerCase();
3 | let filename = n.replace('.' + ext, '');
4 | if (filename.length <= len) {
5 | return n;
6 | }
7 | filename = filename.substr(0, len) + (n.length > len ? '...' : '');
8 | return filename + '.' + ext;
9 | };
10 |
--------------------------------------------------------------------------------
/src/utils/formStyles.js:
--------------------------------------------------------------------------------
1 | // The label background color is a workaround for issues with line through text
2 | // see https://github.com/mui-org/material-ui/issues/14530#issuecomment-463576879
3 | // The padding and negative margin allow for a little spacing whilst retaining
4 | // the alignment.
5 | export default theme => ({
6 | formControl: {
7 | margin: '0px 0px 0px 16px',
8 | },
9 | label: {
10 | margin: '0 -4px',
11 | padding: '0 4px',
12 | backgroundColor: 'white',
13 | },
14 | });
15 |
--------------------------------------------------------------------------------
/utils/preProcessor.js:
--------------------------------------------------------------------------------
1 | exports.oscilloscopeVoltageProcessor = parsedJSON => {
2 | const { data } = parsedJSON;
3 | const { keys } = parsedJSON;
4 | const { numberOfChannels } = parsedJSON;
5 | const numberOfDataPoints = data.length;
6 |
7 | let parsedOutput = [];
8 |
9 | switch (numberOfChannels) {
10 | case 1:
11 | try {
12 | for (let index = 0; index < numberOfDataPoints; index += 1) {
13 | parsedOutput = [
14 | ...parsedOutput,
15 | {
16 | [keys[0]]: data[index][0],
17 | [keys[1]]: data[index][1],
18 | },
19 | ];
20 | }
21 | } catch (error) {
22 | return false;
23 | }
24 | break;
25 | case 2:
26 | try {
27 | for (let index = 0; index < numberOfDataPoints; index += 1) {
28 | parsedOutput = [
29 | ...parsedOutput,
30 | {
31 | [keys[0]]: data[index][0],
32 | [keys[1]]: data[index][1],
33 | [keys[2]]: data[index][2],
34 | },
35 | ];
36 | }
37 | } catch (error) {
38 | return false;
39 | }
40 |
41 | break;
42 | case 3:
43 | try {
44 | for (let index = 0; index < numberOfDataPoints; index += 1) {
45 | parsedOutput = [
46 | ...parsedOutput,
47 | {
48 | [keys[0]]: data[index][0],
49 | [keys[1]]: data[index][1],
50 | [keys[2]]: data[index][2],
51 | [keys[3]]: data[index][3],
52 | },
53 | ];
54 | }
55 | } catch (error) {
56 | return false;
57 | }
58 |
59 | break;
60 | case 4:
61 | try {
62 | for (let index = 0; index < numberOfDataPoints; index += 1) {
63 | parsedOutput = [
64 | ...parsedOutput,
65 | {
66 | [keys[0]]: data[index][0],
67 | [keys[1]]: data[index][1],
68 | [keys[2]]: data[index][2],
69 | [keys[3]]: data[index][3],
70 | [keys[4]]: data[index][4],
71 | },
72 | ];
73 | }
74 | } catch (error) {
75 | return false;
76 | }
77 |
78 | break;
79 | default:
80 | break;
81 | }
82 |
83 | return parsedOutput;
84 | };
85 |
86 | exports.oscilloscopeXYProcessor = parsedJSON => {
87 | const { data } = parsedJSON;
88 | const { keys } = parsedJSON;
89 | const numberOfDataPoints = data.length;
90 |
91 | let parsedOutput = [];
92 | if (data[0][0] === undefined || data[0][1] === undefined) {
93 | return false;
94 | }
95 | for (let index = 0; index < numberOfDataPoints; index += 1) {
96 | parsedOutput = [
97 | ...parsedOutput,
98 | {
99 | [keys[0]]: data[index][0],
100 | [keys[1]]: data[index][1],
101 | },
102 | ];
103 | }
104 |
105 | return parsedOutput;
106 | };
107 |
108 | exports.LAProcessor = parsedJSON => {
109 | const {
110 | time1,
111 | voltage1,
112 | time2,
113 | voltage2,
114 | time3,
115 | voltage3,
116 | time4,
117 | voltage4,
118 | } = parsedJSON;
119 | const { numberOfChannels } = parsedJSON;
120 |
121 | let parsedOutput = {
122 | LA1Data: null,
123 | LA2Data: null,
124 | LA3Data: null,
125 | LA4Data: null,
126 | };
127 | if (numberOfChannels >= 1) {
128 | parsedOutput.LA1Data = [];
129 | time1.map((time, index) => {
130 | parsedOutput.LA1Data = [
131 | ...parsedOutput.LA1Data,
132 | {
133 | voltage: voltage1[index],
134 | time,
135 | },
136 | ];
137 | });
138 | }
139 | if (numberOfChannels >= 2) {
140 | parsedOutput.LA2Data = [];
141 | time2.map((time, index) => {
142 | parsedOutput.LA2Data = [
143 | ...parsedOutput.LA2Data,
144 | {
145 | voltage: voltage2[index],
146 | time,
147 | },
148 | ];
149 | });
150 | }
151 | if (numberOfChannels >= 3) {
152 | parsedOutput.LA3Data = [];
153 | time3.map((time, index) => {
154 | parsedOutput.LA3Data = [
155 | ...parsedOutput.LA3Data,
156 | {
157 | voltage: voltage3[index],
158 | time,
159 | },
160 | ];
161 | });
162 | }
163 | if (numberOfChannels >= 4) {
164 | parsedOutput.LA4Data = [];
165 | time4.map((time, index) => {
166 | parsedOutput.LA4Data = [
167 | ...parsedOutput.LA4Data,
168 | {
169 | voltage: voltage4[index],
170 | time,
171 | },
172 | ];
173 | });
174 | }
175 |
176 | return parsedOutput;
177 | };
178 |
--------------------------------------------------------------------------------