Dreamview: making options configurable from parameters.yml

modules/dreamview/frontend/proto_bundle/point_cloud_proto_bundle.json

@@ -9,10 +9,7 @@
                 "num": {
                   "rule": "repeated",
                   "type": "float",
-                  "id": 1,
-                  "options": {
-                    "packed": false
-                  }
+                  "id": 1
                 }
               }
             }

modules/dreamview/frontend/src/components/PNCMonitor/ScatterGraph.js

@@ -84,8 +84,8 @@ export default class ScatterGraph extends React.Component {
                     ticks: {
                         min: setting.min,
                         max: setting.max,
-			minRotation: 0,
-			maxRotation: 0,
+                        minRotation: 0,
+                        maxRotation: 0,
                     },
                     gridLines: {
                         color: 'rgba(153, 153, 153, 0.5)',

modules/dreamview/frontend/src/components/SideBar/Menu.js

@@ -51,7 +51,7 @@ const MenuIdOptionMapping = {
         planningReference: 'showPlanningReference',
         planningDpOptimizer: 'showPlanningDpOptimizer',
         planningQpOptimizer: 'showPlanningQpOptimizer',
-        planningLine: 'showPlanning',
+        planningTrajectory: 'showPlanningTrajectory',
         positionLocalization: 'showPositionLocalization',
         positionGps: 'showPositionGps',
         mapCrosswalk: 'showMapCrosswalk',

modules/dreamview/frontend/src/components/Tasks/Others.js

@@ -9,7 +9,7 @@ export default class Others extends React.Component {
     render() {
         const { options, enableHMIButtonsOnly } = this.props.store;
 
-        const disablePanel = enableHMIButtonsOnly || options.tasksPanelLocked;
+        const disablePanel = enableHMIButtonsOnly || options.lockTaskPanel;
 
         return (
             <div className="others card">
@@ -31,12 +31,12 @@ export default class Others extends React.Component {
                                       this.props.store.handleOptionToggle('showPNCMonitor');
                                   }}/>
                     <CheckboxItem id={"toggleSimControl"}
-                                  title={"SimControl"}
-                                  isChecked={options.simControlEnabled}
-                                  disabled={options.tasksPanelLocked}
+                                  title={"Sim Control"}
+                                  isChecked={options.enableSimControl}
+                                  disabled={options.lockTaskPanel}
                                   onClick={() => {
-                                      WS.toggleSimControl(!options.simControlEnabled);
-                                      this.props.store.handleOptionToggle('simControlEnabled');
+                                      WS.toggleSimControl(!options.enableSimControl);
+                                      this.props.store.handleOptionToggle('enableSimControl');
                                   }}/>
                     <CheckboxItem id={"showVideo"}
                                   title={"Camera Sensor"}
@@ -47,10 +47,10 @@ export default class Others extends React.Component {
                                   }}/>
                     <CheckboxItem id={"panelLock"}
                                   title={"Lock Task Panel"}
-                                  isChecked={options.tasksPanelLocked}
+                                  isChecked={options.lockTaskPanel}
                                   disabled={false}
                                   onClick={() => {
-                                    this.props.store.handleOptionToggle('tasksPanelLocked');
+                                    this.props.store.handleOptionToggle('lockTaskPanel');
                                   }}/>
                 </div>
             </div>

modules/dreamview/frontend/src/components/Tasks/QuickStart.js

@@ -83,25 +83,25 @@ export default class QuickStarter extends React.Component {
 
     render() {
         const { hmi } = this.props.store;
-        const { tasksPanelLocked } = this.props.store.options;
+        const { lockTaskPanel } = this.props.store.options;
 
         return (
             <div className="card">
                 <div className="card-header"><span>Quick Start</span></div>
                 <div className="card-content-column">
-                    <CommandGroup disabled={tasksPanelLocked} commands={this.setup} />
-                    <CommandGroup disabled={tasksPanelLocked} commands={this.reset} />
-                    <CommandGroup disabled={!hmi.enableStartAuto || tasksPanelLocked}
+                    <CommandGroup disabled={lockTaskPanel} commands={this.setup} />
+                    <CommandGroup disabled={lockTaskPanel} commands={this.reset} />
+                    <CommandGroup disabled={!hmi.enableStartAuto || lockTaskPanel}
                                   commands={this.auto}
                                   extraButtonClass="start-auto-button"
                                   extraCommandClass="start-auto-command" />
                     {hmi.showRTKCommands &&
                         <CommandGroup name="Record"
-                                      disabled={tasksPanelLocked}
+                                      disabled={lockTaskPanel}
                                       commands={this.rtKRecord} />}
                     {hmi.showRTKCommands &&
                         <CommandGroup name="Replay"
-                                      disabled={tasksPanelLocked}
+                                      disabled={lockTaskPanel}
                                       commands={this.rtkReplay} />}
                 </div>
             </div>

modules/dreamview/frontend/src/renderer/trajectory.js

@@ -2,37 +2,6 @@ import STORE from "store";
 import PARAMETERS from "store/config/parameters.yml";
 import { drawThickBandFromPoints } from "utils/draw";
 
-const PLANNING_PROPERTIES = {
-    planning_reference_line: {
-        optionName: 'showPlanningReference',
-        width: 0.15,
-        color: 0x36A2EB,
-        opacity: 1,
-        zOffset: 7
-    },
-    DpPolyPathOptimizer: {
-        optionName: 'showPlanningDpOptimizer',
-        width: 0.4,
-        color: 0x8DFCB4,
-        opacity: 0.8,
-        zOffset: 6
-    },
-    QpSplinePathOptimizer: {
-        optionName: 'showPlanningQpOptimizer',
-        width: 0.65,
-        color: 0xd85656,
-        opacity: 0.8,
-        zOffset: 5
-    },
-    trajectory: {
-        optionName: 'showPlanning',
-        width: 0.8,
-        color: 0x01D1C1,
-        opacity: 0.65,
-        zOffset: 4
-    }
-};
-
 function normalizePlanningTrajectory(trajectory, coordinates) {
     if (!trajectory) {
         return [];
@@ -99,8 +68,8 @@ export default class PlanningTrajectory {
         }
 
         // Draw paths
-        for (const name in PLANNING_PROPERTIES) {
-            const property = PLANNING_PROPERTIES[name];
+        for (const name in PARAMETERS.planning.pathProperties) {
+            const property = PARAMETERS.planning.pathProperties[name];
             if (!STORE.options[property.optionName]) {
                 if (this.paths[name]) {
                     this.paths[name].visible = false;

modules/dreamview/frontend/src/store/config/MenuData.js

@@ -63,7 +63,7 @@ export default [
         type: 'checkbox',
         data: {
             planningCar: 'Planning Car',
-            planningLine: 'Planning Line',
+            planningTrajectory: 'Planning Trajectory',
             planningQpOptimizer: 'Qp Optimizer Line',
             planningDpOptimizer: 'Dp Optimizer Line',
             planningReference: 'Reference Line',

modules/dreamview/frontend/src/store/config/parameters.yml

@@ -40,27 +40,60 @@ planning:
   minInterval: 0.1
   defaults:
     width: 1.4
+  pathProperties:
+    trajectory:
+      optionName: 'showPlanningTrajectory'
+      width: 0.8
+      color: 0x01D1C1
+      opacity: 0.65
+      zOffset: 4
+    planning_reference_line:
+      optionName: 'showPlanningReference'
+      width: 0.15
+      color: 0x36A2EB
+      opacity: 1
+      zOffset: 7
+    DpPolyPathOptimizer:
+      optionName: 'showPlanningDpOptimizer'
+      width: 0.4
+      color: 0x8DFCB4
+      opacity: 0.8
+      zOffset: 6
+    QpSplinePathOptimizer:
+      optionName: 'showPlanningQpOptimizer'
+      width: 0.65
+      color: 0xd85656
+      opacity: 0.8
+      zOffset: 5
 options:
   defaults:
-    enableSimControl: false
+    # side bar options
+    showTasks: true
     showModuleController: false
     showMenu: false
+    showRouteEditingBar: false
     showPOI: false
     enableAudioCapture: false
-    showPNCMonitor: false
-    showRouteEditingBar: false
     showDataRecorder: false
-    showTasks: true
+
+    # task panel options
+    showPNCMonitor: false
+    enableSimControl: false
+    lockTaskPanel: false
     showVideo: false
+
+    # layer Menu options
+    cameraAngle: Default
+    showDecisionMain: true
+    showDecisionObstacle: true
+    showPlanningTrajectory: true
     showPlanningCar: false
     showPlanningReference: false
     showPlaningDpOptimizer: false
     showPlanningQpOptimizer: false
-    showPlanning: true
-    showDecisionMain: true
-    showDecisionObstacle: true
     showRouting: true
     showPerceptionLaneMarker: false
+    showPointCloud: false
     showPredictionMajor: true
     showPredictionMinor: true
     showObstaclesVehicle: true
@@ -75,7 +108,6 @@ options:
     showObstaclesHeading: true
     showObstaclesId: true
     showObstaclesInfo: true
-    showPointCloud: false
     showPositionGps: false
     showPositionLocalization: true
     showMapCrosswalk: true
@@ -87,7 +119,6 @@ options:
     showMapStopSign: true
     showMapSpeedBump: true
     showMapParkingSpace: true
-    cameraAngle: Default
 
 navigation:
   # possible options: BaiduMap or GoogleMap

modules/dreamview/frontend/src/store/options.js

-import { observable, action, computed } from "mobx";
+import { observable, action, computed, extendObservable } from "mobx";
 
 import PARAMETERS from "store/config/parameters.yml";
-import MENU_DATA from 'store/config/MenuData';
+import MENU_DATA from "store/config/MenuData";
 
 export default class Options {
-    // Side Bar options
-    @observable showModuleController = PARAMETERS.options.defaults.showModuleController;
-    @observable showMenu = PARAMETERS.options.defaults.showMenu;
-    @observable showRouteEditingBar = PARAMETERS.options.defaults.showRouteEditingBar;
-    @observable showPOI = PARAMETERS.options.defaults.showPOI;
-    @observable enableAudioCapture = PARAMETERS.options.defaults.enableAudioCapture;
-    @observable showDataRecorder = PARAMETERS.options.defaults.showDataRecorder;
-    @observable showVideo = PARAMETERS.options.defaults.showVideo;
-    @observable showTasks =
-        OFFLINE_PLAYBACK ? false : PARAMETERS.options.defaults.showTasks;
-
-
-    // Layer Menu options
-    @observable cameraAngle = PARAMETERS.options.defaults.cameraAngle;
-    @observable showDecisionMain = PARAMETERS.options.defaults.showDecisionMain;
-    @observable showDecisionObstacle = PARAMETERS.options.defaults.showDecisionObstacle;
-    @observable showPlanning = PARAMETERS.options.defaults.showPlanning;
-    @observable showPlanningCar = PARAMETERS.options.defaults.showPlanningCar;
-    @observable showPlanningReference = PARAMETERS.options.defaults.showPlanningReference;
-    @observable showPlanningDpOptimizer = PARAMETERS.options.defaults.showPlanningDpOptimizer;
-    @observable showPlanningQpOptimizer = PARAMETERS.options.defaults.showPlanningQpOptimizer;
-    @observable showRouting = PARAMETERS.options.defaults.showRouting;
-    @observable showPerceptionLaneMarker = PARAMETERS.options.defaults.showPerceptionLaneMarker;
-    @observable showPredictionMajor = PARAMETERS.options.defaults.showPredictionMajor;
-    @observable showPredictionMinor = PARAMETERS.options.defaults.showPredictionMinor;
-    @observable showObstaclesVehicle = PARAMETERS.options.defaults.showObstaclesVehicle;
-    @observable showObstaclesPedestrian = PARAMETERS.options.defaults.showObstaclesPedestrian;
-    @observable showObstaclesBicycle = PARAMETERS.options.defaults.showObstaclesBicycle;
-    @observable showObstaclesUnknownMovable =
-        PARAMETERS.options.defaults.showObstaclesUnknownMovable;
-    @observable showObstaclesUnknownUnmovable =
-        PARAMETERS.options.defaults.showObstaclesUnknownUnmovable;
-    @observable showObstaclesUnknown =
-        PARAMETERS.options.defaults.showObstaclesUnknown;
-    @observable showObstaclesVirtual =
-        PARAMETERS.options.defaults.showObstaclesVirtual;
-    @observable showObstaclesCipv =
-        PARAMETERS.options.defaults.showObstaclesCipv;
-    @observable showObstaclesVelocity =
-        PARAMETERS.options.defaults.showObstaclesVelocity;
-    @observable showObstaclesHeading =
-        PARAMETERS.options.defaults.showObstaclesHeading;
-    @observable showObstaclesId =
-        PARAMETERS.options.defaults.showObstaclesId;
-    @observable showObstaclesInfo =
-        PARAMETERS.options.defaults.showObstaclesInfo;
-    @observable showPointCloud = PARAMETERS.options.defaults.showPointCloud;
-    @observable showPositionGps = PARAMETERS.options.defaults.showPositionGps;
-    @observable showPositionLocalization = PARAMETERS.options.defaults.showPositionLocalization;
-    @observable showMapCrosswalk = PARAMETERS.options.defaults.showMapCrosswalk;
-    @observable showMapClearArea = PARAMETERS.options.defaults.showMapClearArea;
-    @observable showMapJunction = PARAMETERS.options.defaults.showMapJunction;
-    @observable showMapLane = PARAMETERS.options.defaults.showMapLane;
-    @observable showMapRoad = PARAMETERS.options.defaults.showMapRoad;
-    @observable showMapSignal = PARAMETERS.options.defaults.showMapSignal;
-    @observable showMapStopSign = PARAMETERS.options.defaults.showMapStopSign;
-    @observable showMapSpeedBump = PARAMETERS.options.defaults.showMapSpeedBump;
-    @observable showMapParkingSpace = PARAMETERS.options.defaults.showMapParkingSpace;
-
-    // Others
-    @observable showPNCMonitor = PARAMETERS.options.defaults.showPNCMonitor;
-    @observable simControlEnabled = PARAMETERS.options.defaults.enableSimControl;
-    @observable tasksPanelLocked = false;
-
-    @observable hideOptionToggle = {
-        'planningCar': true,
-        'planningQpOptimizer': true,
-        'planningDpOptimizer': true,
-        'planningReference': true,
-        'perceptionPointCloud': OFFLINE_PLAYBACK,
-        'perceptionLaneMarker': OFFLINE_PLAYBACK,
-    };
-
-    cameraAngleNames = null;
-    mainSideBarOptions = ['showTasks', 'showModuleController',
-        'showMenu', 'showRouteEditingBar', 'showDataRecorder'];
-    secondarySideBarOptions = ['showPOI', 'enableAudioCapture'];
+    constructor() {
+        const options = {};
+        Object.keys(PARAMETERS.options.defaults).forEach(option => {
+            let defaultValue = PARAMETERS.options.defaults[option];
+            if (OFFLINE_PLAYBACK && option === "showTasks") {
+                defaultValue = false;
+            }
+            options[option] = defaultValue;
+        });
+        extendObservable(this, options);
+
+        this.cameraAngleNames = null;
+        this.mainSideBarOptions = [
+            "showTasks",
+            "showModuleController",
+            "showMenu",
+            "showRouteEditingBar",
+            "showDataRecorder",
+        ];
+        this.secondarySideBarOptions = ["showPOI", "enableAudioCapture"];
+        this.hideOptionToggle = observable({
+            planningCar: true,
+            planningQpOptimizer: true,
+            planningDpOptimizer: true,
+            planningReference: true,
+            perceptionPointCloud: OFFLINE_PLAYBACK,
+            perceptionLaneMarker: OFFLINE_PLAYBACK,
+        });
+    }
 
     @computed get showTools() {
         return this.showTasks ||

modules/dreamview/frontend/src/store/websocket/websocket_realtime.js

@@ -49,7 +49,7 @@ export default class RosWebSocketEndpoint {
                     STORE.hmi.updateVehicleParam(message.data);
                     break;
                 case "SimControlStatus":
-                    STORE.setOptionStatus('simControlEnabled', message.enabled);
+                    STORE.setOptionStatus('enableSimControl', message.enabled);
                     break;
                 case "SimWorldUpdate":
                     this.checkMessage(message);