add photos map legend toggle

db/migrate/20180211161515_add_show_images_to_web_app_configs.rb

@@ -0,0 +1,8 @@
+class AddShowImagesToWebAppConfigs < ActiveRecord::Migration[5.1]
+  def change
+    add_column  :web_app_configs,
+                :show_images,
+                :boolean,
+                default: false
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20180209134752) do
+ActiveRecord::Schema.define(version: 20180211161515) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -387,6 +387,7 @@ ActiveRecord::Schema.define(version: 20180209134752) do
     t.boolean "stub_config", default: false
     t.boolean "show_first_party_farmware", default: false
     t.boolean "enable_browser_speak", default: false
+    t.boolean "show_images", default: false
     t.index ["device_id"], name: "index_web_app_configs_on_device_id"
   end
 

webpack/__test_support__/fake_state/resources.ts

@@ -179,6 +179,7 @@ export function fakeWebAppConfig(): TaggedWebAppConfig {
     scaled_encoders: true,
     show_spread: false,
     show_farmbot: true,
+    show_images: false,
     show_plants: true,
     show_points: true,
     x_axis_inverted: false,

webpack/config_storage/web_app_configs.ts

@@ -40,6 +40,7 @@ export interface WebAppConfig {
   stub_config: boolean;
   show_first_party_farmware: boolean;
   enable_browser_speak: boolean;
+  show_images: boolean;
 }
 
 export type NumberConfigKey = "id"
@@ -77,4 +78,5 @@ export type BooleanConfigKey = "confirm_step_deletion"
     |"z_axis_inverted"
     |"stub_config"
     |"show_first_party_farmware"
-    |"enable_browser_speak";
+    |"enable_browser_speak"
+    |"show_images";

webpack/farm_designer/__tests__/farm_designer_test.tsx

@@ -57,6 +57,7 @@ describe("<FarmDesigner/>", () => {
     expect(legendProps.showPoints).toBeTruthy();
     expect(legendProps.showSpread).toBeFalsy();
     expect(legendProps.showFarmbot).toBeTruthy();
+    expect(legendProps.showImages).toBeFalsy();
     expect(legendProps.botOriginQuadrant).toEqual(2);
     // tslint:disable-next-line:no-any
     const gardenMapProps = wrapper.find("GardenMap").props() as any;

webpack/farm_designer/index.tsx

@@ -61,6 +61,7 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
     show_points: this.initializeSetting(BooleanSetting.show_points, true),
     show_spread: this.initializeSetting(BooleanSetting.show_spread, false),
     show_farmbot: this.initializeSetting(BooleanSetting.show_farmbot, true),
+    show_images: this.initializeSetting(BooleanSetting.show_images, false),
     bot_origin_quadrant: this.getBotOriginQuadrant(),
     zoom_level: calcZoomLevel(getZoomLevelIndex())
   };
@@ -109,6 +110,7 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
       show_points,
       show_spread,
       show_farmbot,
+      show_images,
       bot_origin_quadrant,
       zoom_level
     } = this.state;
@@ -134,7 +136,8 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
         showPlants={show_plants}
         showPoints={show_points}
         showSpread={show_spread}
-        showFarmbot={show_farmbot} />
+        showFarmbot={show_farmbot}
+        showImages={show_images} />
 
       <div className="panel-header gray-panel designer-nav">
         <div className="panel-tabs">
@@ -161,6 +164,7 @@ export class FarmDesigner extends React.Component<Props, Partial<State>> {
           showPlants={show_plants}
           showSpread={show_spread}
           showFarmbot={show_farmbot}
+          showImages={show_images}
           selectedPlant={this.props.selectedPlant}
           crops={this.props.crops}
           dispatch={this.props.dispatch}

webpack/farm_designer/interfaces.ts

@@ -37,6 +37,7 @@ export interface State extends TypeCheckerHint {
   show_points: boolean;
   show_spread: boolean;
   show_farmbot: boolean;
+  show_images: boolean;
   bot_origin_quadrant: BotOriginQuadrant;
   zoom_level: number;
 }
@@ -167,6 +168,7 @@ export interface GardenMapProps {
   showPoints: boolean | undefined;
   showSpread: boolean | undefined;
   showFarmbot: boolean | undefined;
+  showImages: boolean | undefined;
   dispatch: Function;
   designer: DesignerState;
   points: TaggedGenericPointer[];

webpack/farm_designer/map/__tests__/garden_map_legend_test.tsx

@@ -23,7 +23,8 @@ describe("<GardenMapLegend />", () => {
       showPlants: false,
       showPoints: false,
       showSpread: false,
-      showFarmbot: false
+      showFarmbot: false,
+      showImages: false,
     };
   }
 

webpack/farm_designer/map/__tests__/garden_map_test.tsx

@@ -32,6 +32,7 @@ function fakeProps(): GardenMapProps {
     showPlants: true,
     showSpread: false,
     showFarmbot: false,
+    showImages: false,
     selectedPlant: fakePlant(),
     crops: [],
     dispatch: jest.fn(),

webpack/farm_designer/map/__tests__/map_image_test.tsx

@@ -31,7 +31,8 @@ describe("<MapImage />", () => {
       mapTransformProps: {
         gridSize: { x: 0, y: 0 },
         quadrant: 1
-      }
+      },
+      showImages: true,
     };
   };
 

webpack/farm_designer/map/garden_map.tsx

@@ -313,6 +313,7 @@ export class GardenMap extends
           <MapImage
             image={this.props.latestImage}
             cameraCalibrationData={this.props.cameraCalibrationData}
+            showImages={this.props.showImages}
             mapTransformProps={mapTransformProps} />
           <SpreadLayer
             mapTransformProps={mapTransformProps}

webpack/farm_designer/map/garden_map_legend.tsx

@@ -16,7 +16,8 @@ export function GardenMapLegend(props: GardenMapLegendProps) {
     showPlants,
     showPoints,
     showSpread,
-    showFarmbot
+    showFarmbot,
+    showImages,
   } = props;
 
   const plusBtnClass = atMaxZoom() ? "disabled" : "";
@@ -64,6 +65,10 @@ export function GardenMapLegend(props: GardenMapLegendProps) {
           value={showFarmbot}
           label={t("FarmBot?")}
           onClick={toggle("show_farmbot")} />
+        <LayerToggle
+          value={showImages}
+          label={t("Photos?")}
+          onClick={toggle("show_images")} />
       </div>
       <div className="farmbot-origin">
         <label>

webpack/farm_designer/map/interfaces.ts

@@ -34,6 +34,7 @@ export interface GardenMapLegendProps {
   showPoints: boolean;
   showSpread: boolean;
   showFarmbot: boolean;
+  showImages: boolean;
 }
 
 export type MapTransformProps = {

webpack/farm_designer/map/map_image.tsx

@@ -91,6 +91,7 @@ const transform = (props: TransformProps): string => {
 export interface MapImageProps {
   image: TaggedImage | undefined;
   cameraCalibrationData: CameraCalibrationData;
+  showImages: boolean | undefined;
   mapTransformProps: MapTransformProps;
   sizeOverride?: ImageSize;
 }
@@ -101,7 +102,7 @@ export interface MapImageProps {
  * Require camera calibration data to display the image.
  */
 export function MapImage(props: MapImageProps) {
-  const { image, cameraCalibrationData, sizeOverride } = props;
+  const { image, cameraCalibrationData, sizeOverride, showImages } = props;
   const { scale, rotation, offset, origin } = cameraCalibrationData;
   const imageScale = parse(scale);
   const imageRotation = parse(rotation);
@@ -111,7 +112,7 @@ export function MapImage(props: MapImageProps) {
   const { quadrant, gridSize } = props.mapTransformProps;
 
   /* Check if the latest image exists. */
-  if (image) {
+  if (showImages && image) {
     const imageUrl = image.body.attachment_url;
     const { x, y } = image.body.meta;
     const { width, height } = getImageSize(imageUrl, sizeOverride);

webpack/session_keys.ts

@@ -11,6 +11,7 @@ export const BooleanSetting: Record<BooleanConfigKey, BooleanConfigKey> = {
   show_points: "show_points",
   show_spread: "show_spread",
   show_farmbot: "show_farmbot",
+  show_images: "show_images",
 
   /** "Labs" feature names. */
   stub_config: "stub_config",