CR response

modules/dreamview/backend/perception_camera_updater/perception_camera_updater.cc

@@ -189,8 +189,7 @@ void PerceptionCameraUpdater::OnImage(
   }
   current_image_timestamp_ = next_image_timestamp;
   camera_update_.set_image(&(tmp_buffer[0]), tmp_buffer.size());
-  camera_update_.set_img_width(width);
-  camera_update_.set_img_height(height);
+  camera_update_.set_image_aspect_ratio((double)width / height);
 }
 
 void PerceptionCameraUpdater::OnLocalization(

modules/dreamview/frontend/proto_bundle/sim_world_proto_bundle.json

@@ -789,13 +789,9 @@
                   "type": "bytes",
                   "id": 3
                 },
-                "imgHeight": {
-                  "type": "uint32",
+                "imageAspectRatio": {
+                  "type": "double",
                   "id": 4
-                },
-                "imgWidth": {
-                  "type": "uint32",
-                  "id": 5
                 }
               }
             }

modules/dreamview/frontend/src/components/Layouts/MainView.js

@@ -28,9 +28,8 @@ class SceneView extends React.Component {
         if (options.showCameraView) {
             // Set width/height same as camera image ratio to ensure scene align to image
             // thus the height won't change no matter whether there's menu under scene
-            const ASPECT_RATIO = cameraData.imageWidth / cameraData.imageHeight;
             width = sceneDimension.width;
-            height = width / ASPECT_RATIO;
+            height = width / cameraData.imageAspectRatio;
         } else {
             width = sceneDimension.width;
             height = sceneDimension.height - sceneHeightOffset;

modules/dreamview/frontend/src/components/Scene/index.js

@@ -34,8 +34,7 @@ export default class Scene extends React.Component {
                     }}>
                     {options.showGeo && <Geolocation />}
                 </div>
-                { (options.showCameraView && !RENDERER.routingEditor.isInEditingMode()) &&
-                    <img id="camera-image" /> }
+                { (options.showCameraView && !options.showRouteEditingBar) && <img id="camera-image" /> }
             </React.Fragment>
         );
     }

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

@@ -155,7 +155,7 @@ class Renderer {
     }
 
     updateDimension(width, height) {
-        if (width < Styles.minSceneWidth) {
+        if (width < Styles.MIN_SCENE_WIDTH) {
             // Min width of main view is 600, so we need not update
             // camera/renderer dimension anymore
             return;

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

@@ -9,8 +9,7 @@ export default class CameraData {
     @observable initDynamicRotation = observable.map();
     @observable deltaDynamicRotation = observable.map();
     @observable imageSrcData = null;
-    @observable imageWidth = null;
-    @observable imageHeight = null;
+    @observable imageAspectRatio = null;
 
     constructor() {
         ['x', 'y', 'z'].forEach((axis) => {
@@ -39,8 +38,7 @@ export default class CameraData {
             this.imageSrcData = 'data:image/jpeg;base64,' + new Buffer(data.image).toString('base64');
         }
 
-        this.imageWidth = data.imgWidth;
-        this.imageHeight = data.imgHeight;
+        this.imageAspectRatio = data.imageAspectRatio;
 
         // Camera dynamic transformation matrix: the dynamic localization matrix
         const localizationMatrix = new THREE.Matrix4();

modules/dreamview/frontend/src/styles/main.scss

@@ -2,7 +2,7 @@
 
 $min-scene-width: 600;
 
-:export { minSceneWidth: $min-scene-width; }
+:export { MIN_SCENE_WIDTH: $min-scene-width; }
 
 @mixin monitor-item-common-properties($text-width: calc(100% - 17px)) {
     display: flex;

modules/dreamview/proto/camera_update.proto

@@ -14,7 +14,6 @@ message CameraUpdate {
     // Camera image data
     optional bytes image = 3;
 
-    // Camera image width and height
-    optional uint32 img_height = 4;
-    optional uint32 img_width = 5;
+    // Camera image aspect ratio = width / height
+    optional double image_aspect_ratio = 4;
 }