Merge pull request #41 from NordicSemiconductor/fix/sliders

Replace slider components

Author: bencefr

actions/rssiActions.js

@@ -37,9 +37,8 @@
 import { logger } from 'nrfconnect/core';
 import SerialPort from 'serialport';
 
-let port;
+let port = null;
 
-let maxScans = 30;
 const theRssiData = [];
 const theRssiDataMax = [];
 
@@ -75,9 +74,11 @@ function rssiData() {
 
 function writeAndDrain(cmd) {
     return new Promise(resolve => {
-        port.write(cmd, () => {
-            port.drain(resolve);
-        });
+        if (port) {
+            port.write(cmd, () => {
+                port.drain(resolve);
+            });
+        }
     });
 }
 
@@ -91,16 +92,12 @@ async function stopReading() {
     resetRssiData();
 }
 
-export function setDelay(delay) {
-    return () => writeAndDrain(`set delay ${delay}\r`);
-}
-
-export function setScanRepeatTimes(repeatTimes) {
-    return () => writeAndDrain(`set repeat ${repeatTimes}\r`);
+export function writeDelay() {
+    return (dispatch, getState) => writeAndDrain(`set delay ${getState().app.delay}\r`);
 }
 
-export function setMaxScans(scans) {
-    maxScans = scans;
+export function writeScanRepeat() {
+    return (dispatch, getState) => writeAndDrain(`set repeat ${getState().app.scanRepeat}\r`);
 }
 
 export function scanAdvertisementChannels(enable) {
@@ -115,7 +112,7 @@ export function toggleLED() {
 }
 
 function openWhenClosed(serialPort) {
-    return dispatch => {
+    return (dispatch, getState) => {
         port = new SerialPort(serialPort.comName, {
             baudRate: 115200,
         }, () => {
@@ -124,9 +121,8 @@ function openWhenClosed(serialPort) {
 
             (async () => {
                 await scanAdvertisementChannels(false)();
-                await setDelay(100)();
-                await setScanRepeatTimes(1)();
-                await setMaxScans(30);
+                await dispatch(writeDelay());
+                await dispatch(writeScanRepeat());
                 await startReading();
             })();
 
@@ -144,7 +140,7 @@ function openWhenClosed(serialPort) {
                     const [ch, d] = buf.splice(0, 2);
                     if (ch !== 0xff && d !== 0xff) {
                         theRssiData[ch].unshift(d);
-                        theRssiData[ch].splice(maxScans);
+                        theRssiData[ch].splice(getState().app.maxScans);
                         theRssiDataMax[ch] = Math.min(...(theRssiData[ch]));
                     }
                 }
@@ -167,6 +163,7 @@ export function close() {
         if (port && (typeof (port.isOpen) === 'function' ? port.isOpen() : port.isOpen)) {
             await stopReading();
             await new Promise(resolve => port.close(resolve));
+            port = null;
         } else {
             resetRssiData();
         }

components/ControlPanel.jsx

@@ -36,12 +36,20 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactBootstrapSlider from 'react-bootstrap-slider';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 
+import Slider from 'react-rangeslider';
+import 'react-rangeslider/lib/index.css';
+
 const ControlPanel = props => {
     const {
+        delay,
+        scanRepeat,
+        maxScans,
+        animationDuration,
+        writeDelay,
+        writeScanRepeat,
         onDelayChange,
         onMaxScansChange,
         onChannelScanRepeatChange,
@@ -51,48 +59,46 @@ const ControlPanel = props => {
         onToggleLED,
         disabled,
     } = props;
-    const sliderDisabled = disabled ? 'disabled' : null;
     return (
         <Form>
-            Sweep Delay (ms)<br />
-            <ReactBootstrapSlider
-                value={10}
-                slideStop={event => onDelayChange(event.target.value)}
+            <Form.Label>Sweep Delay (ms)</Form.Label>
+            <Slider
+                value={delay}
+                title={delay}
                 max={1000}
                 min={5}
-                ticks={[5, 1000]}
-                ticks_labels={['5', '1000']}
-                disabled={sliderDisabled}
+                onChangeComplete={writeDelay}
+                onChange={value => onDelayChange(value)}
+                labels={{ 5: '5', [delay]: `${delay}`, 1000: '1000' }}
+                tooltip={false}
             />
-            # of sweeps to display maximum value
-            <ReactBootstrapSlider
-                value={30}
-                slideStop={event => onMaxScansChange(event.target.value)}
+            <Form.Label># of sweeps to display maximum value</Form.Label>
+            <Slider
+                value={maxScans}
                 max={100}
                 min={1}
-                ticks={[1, 100]}
-                ticks_labels={['1', '100']}
-                disabled={sliderDisabled}
+                onChange={value => onMaxScansChange(value)}
+                labels={{ 1: '1', [maxScans]: `${maxScans}`, 100: '100' }}
+                tooltip={false}
             />
-            Channel scan repeat
-            <ReactBootstrapSlider
-                value={1}
-                slideStop={event => onChannelScanRepeatChange(event.target.value)}
+            <Form.Label>Channel scan repeat</Form.Label>
+            <Slider
+                value={scanRepeat}
                 max={100}
                 min={1}
-                ticks={[1, 100]}
-                ticks_labels={['1', '100']}
-                disabled={sliderDisabled}
+                onChangeComplete={writeScanRepeat}
+                onChange={value => onChannelScanRepeatChange(value)}
+                labels={{ 1: '1', [scanRepeat]: `${scanRepeat}`, 100: '100' }}
+                tooltip={false}
             />
-            Animation duration (ms)
-            <ReactBootstrapSlider
-                value={500}
-                slideStop={event => onAnimationDurationChange(event.target.value)}
+            <Form.Label>Animation duration (ms)</Form.Label>
+            <Slider
+                value={animationDuration}
                 max={1000}
                 min={10}
-                ticks={[10, 1000]}
-                ticks_labels={['10', '1000']}
-                disabled={sliderDisabled}
+                onChange={value => onAnimationDurationChange(value)}
+                labels={{ 10: '10', [animationDuration]: `${animationDuration}`, 1000: '1000' }}
+                tooltip={false}
             />
             <Form.Group controlId="advCheck">
                 <Form.Check
@@ -116,6 +122,12 @@ const ControlPanel = props => {
 };
 
 ControlPanel.propTypes = {
+    delay: PropTypes.number.isRequired,
+    scanRepeat: PropTypes.number.isRequired,
+    maxScans: PropTypes.number.isRequired,
+    animationDuration: PropTypes.number.isRequired,
+    writeDelay: PropTypes.func.isRequired,
+    writeScanRepeat: PropTypes.func.isRequired,
     onDelayChange: PropTypes.func.isRequired,
     onMaxScansChange: PropTypes.func.isRequired,
     onChannelScanRepeatChange: PropTypes.func.isRequired,

index.jsx

@@ -76,6 +76,12 @@ export default {
     ),
     decorateSidePanel: SidePanel => (
         ({
+            delay,
+            scanRepeat,
+            maxScans,
+            animationDuration,
+            writeDelay,
+            writeScanRepeat,
             onDelayChange,
             onMaxScansChange,
             onChannelScanRepeatChange,
@@ -87,6 +93,12 @@ export default {
         }) => (
             <SidePanel>
                 <ControlPanel
+                    delay={delay}
+                    scanRepeat={scanRepeat}
+                    maxScans={maxScans}
+                    animationDuration={animationDuration}
+                    writeDelay={writeDelay}
+                    writeScanRepeat={writeScanRepeat}
                     onDelayChange={onDelayChange}
                     onMaxScansChange={onMaxScansChange}
                     onChannelScanRepeatChange={onChannelScanRepeatChange}
@@ -101,11 +113,20 @@ export default {
     ),
     mapSidePanelDispatch: (dispatch, props) => ({
         ...props,
-        onDelayChange: delay => dispatch(RssiActions.setDelay(delay)),
-        onMaxScansChange: maxScans => dispatch(RssiActions.setMaxScans(maxScans)),
-        onChannelScanRepeatChange: scanRepeat => dispatch(
-            RssiActions.setScanRepeatTimes(scanRepeat),
-        ),
+        writeDelay: () => dispatch(RssiActions.writeDelay()),
+        writeScanRepeat: () => dispatch(RssiActions.writeScanRepeat()),
+        onDelayChange: delay => dispatch({
+            type: 'RSSI_CHANGE_DELAY',
+            delay,
+        }),
+        onMaxScansChange: maxScans => dispatch({
+            type: 'RSSI_CHANGE_MAX_SCANS',
+            maxScans,
+        }),
+        onChannelScanRepeatChange: scanRepeat => dispatch({
+            type: 'RSSI_CHANGE_SCAN_REPEAT',
+            scanRepeat,
+        }),
         onAnimationDurationChange: animationDuration => dispatch({
             type: 'RSSI_CHANGE_ANIMATION_DURATION',
             animationDuration,
@@ -119,8 +140,12 @@ export default {
         }),
         onToggleLED: () => dispatch(RssiActions.toggleLED()),
     }),
-    mapSidePanelState: (state, props) => ({
-        disabled: state.app.port === null,
+    mapSidePanelState: ({ app }, props) => ({
+        disabled: app.port === null,
+        delay: app.delay,
+        scanRepeat: app.scanRepeat,
+        maxScans: app.maxScans,
+        animationDuration: app.animationDuration,
         ...props,
     }),
     mapDeviceSelectorState: (state, props) => ({

package.json

@@ -35,7 +35,7 @@
     "chart.js": "2.7.3",
     "jquery": "3.4.0",
     "pc-nrfconnect-devdep": "git+https://github.com/NordicSemiconductor/pc-nrfconnect-devdep.git#semver:^3.0.0",
-    "react-bootstrap-slider": "2.2.2",
+    "react-rangeslider": "2.2.0",
     "react-chartjs-2": "2.7.4"
   },
   "dependencies": {},

reducers/appReducer.js

@@ -37,6 +37,9 @@
 const initialState = {
     data: [],
     dataMax: [],
+    delay: 10,
+    scanRepeat: 1,
+    maxScans: 30,
     animationDuration: 500,
     separateFrequencies: false,
     port: null,
@@ -50,6 +53,21 @@ export default function reduceApp(state = initialState, action) {
                 data: action.data,
                 dataMax: action.dataMax,
             };
+        case 'RSSI_CHANGE_DELAY':
+            return {
+                ...state,
+                delay: action.delay,
+            };
+        case 'RSSI_CHANGE_MAX_SCANS':
+            return {
+                ...state,
+                maxScans: action.maxScans,
+            };
+        case 'RSSI_CHANGE_SCAN_REPEAT':
+            return {
+                ...state,
+                scanRepeat: action.scanRepeat,
+            };
         case 'RSSI_CHANGE_ANIMATION_DURATION':
             return {
                 ...state,

resources/css/index.scss

@@ -1,5 +1,3 @@
-@import '../../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css';
-
 .core-main-view {
   height: 100%;
 }
@@ -18,6 +16,37 @@
   font-size: large;
 }
 
-.slider.slider-horizontal {
-  width: 100%;
+
+.rangeslider {
+    flex: 1;
+    margin: 5px 10px 40px 10px;
+    .rangeslider__handle {
+        width: 10px;
+        border-radius: 0px;
+        box-shadow: none;
+        transform: translate(-50%, -50%);
+        &:after {
+            display: none;
+        }
+    }
+    .rangeslider__handle:focus {
+        outline: none;
+    }
+    .rangeslider__labels .rangeslider__label-item {
+        transform: translate(-50%, 0);
+    }
+
+    li.rangeslider__label-item:nth-child(2) {
+        background: white;
+        z-index: 100;
+        padding: 0 10px;
+        font-weight: bold;
+    }
+}
+.rangeslider-horizontal {
+    border-radius: 0px;
+    .rangeslider__fill {
+        background-color: #0080B7;
+        border-radius: 0px;
+    }
 }