From 2729e60ac6881a924161231be8625987abea6be5 Mon Sep 17 00:00:00 2001 From: gabrielburnworth Date: Thu, 15 Nov 2018 17:16:00 -0800 Subject: [PATCH] add photo footer to all flippers --- webpack/css/image_flipper.scss | 69 +++++++++---------- .../__tests__/camera_calibration_test.tsx | 1 + .../camera_calibration/camera_calibration.tsx | 1 + .../farmware/camera_calibration/interfaces.ts | 1 + webpack/farmware/images/photos.tsx | 2 +- webpack/farmware/index.tsx | 1 + .../__tests__/image_workspace_test.tsx | 37 +++++----- .../weed_detector/image_workspace.tsx | 9 ++- webpack/farmware/weed_detector/index.tsx | 1 + 9 files changed, 64 insertions(+), 58 deletions(-) diff --git a/webpack/css/image_flipper.scss b/webpack/css/image_flipper.scss index a112062748..06a6d22b6c 100644 --- a/webpack/css/image_flipper.scss +++ b/webpack/css/image_flipper.scss @@ -57,45 +57,42 @@ } } -.photos { - .photos-footer { - display: flex; - position: relative; - left: 2.5rem; - bottom: -1rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - width: 90%; - justify-content: space-between; - label { - font-weight: normal; - } - span { - font-weight: bold; - } +.photos-footer { + display: flex; + position: relative; + bottom: 1rem; + justify-content: space-between; + label { + font-weight: normal; + } + span { + font-weight: bold; + } +} + +.image-metadata { + display: flex; + label { + margin-left: 1rem; + margin-right: 0.5rem; } - .image-metadata { - display: flex; - label { - margin-left: 1rem; - margin-right: 0.5rem; - } +} + +.image-created-at { + span { + white-space: nowrap; } - .image-created-at { - span { - white-space: nowrap; - } - label { - margin-right: 0.5rem; - } + label { + margin-right: 0.5rem; } - .farmware-button { - p { - float: right; - margin-top: 0.75rem; - margin-right: 1rem; - color: $medium_gray; - } +} + +.farmware-button { + p { + float: right; + margin-top: 0.75rem; + margin-right: 1rem; + color: $medium_gray; } } diff --git a/webpack/farmware/camera_calibration/__tests__/camera_calibration_test.tsx b/webpack/farmware/camera_calibration/__tests__/camera_calibration_test.tsx index 11cf618481..2e9b97fd2e 100644 --- a/webpack/farmware/camera_calibration/__tests__/camera_calibration_test.tsx +++ b/webpack/farmware/camera_calibration/__tests__/camera_calibration_test.tsx @@ -35,6 +35,7 @@ describe("", () => { syncStatus: "synced", shouldDisplay: () => false, saveFarmwareEnv: jest.fn(), + timeOffset: 0, }); it("renders", () => { diff --git a/webpack/farmware/camera_calibration/camera_calibration.tsx b/webpack/farmware/camera_calibration/camera_calibration.tsx index 12ca596b02..608279d2cc 100644 --- a/webpack/farmware/camera_calibration/camera_calibration.tsx +++ b/webpack/farmware/camera_calibration/camera_calibration.tsx @@ -45,6 +45,7 @@ export class CameraCalibration extends images={this.props.images} currentImage={this.props.currentImage} onChange={this.change} + timeOffset={this.props.timeOffset} iteration={this.props.iteration} morph={this.props.morph} blur={this.props.blur} diff --git a/webpack/farmware/camera_calibration/interfaces.ts b/webpack/farmware/camera_calibration/interfaces.ts index 936ace9aa7..6fa2b2ef56 100644 --- a/webpack/farmware/camera_calibration/interfaces.ts +++ b/webpack/farmware/camera_calibration/interfaces.ts @@ -21,4 +21,5 @@ export interface CameraCalibrationProps { syncStatus: SyncStatus | undefined; shouldDisplay: ShouldDisplay; saveFarmwareEnv: SaveFarmwareEnv; + timeOffset: number; } diff --git a/webpack/farmware/images/photos.tsx b/webpack/farmware/images/photos.tsx index eed100f8ec..5488f8d262 100644 --- a/webpack/farmware/images/photos.tsx +++ b/webpack/farmware/images/photos.tsx @@ -72,7 +72,7 @@ const PhotoButtons = (props: { ; }; -const PhotoFooter = ({ image, timeOffset }: { +export const PhotoFooter = ({ image, timeOffset }: { image: TaggedImage | undefined, timeOffset: number }) => { diff --git a/webpack/farmware/index.tsx b/webpack/farmware/index.tsx index e0ff78d6bb..0dfaa0d8cf 100644 --- a/webpack/farmware/index.tsx +++ b/webpack/farmware/index.tsx @@ -141,6 +141,7 @@ export class FarmwarePage extends React.Component { H_HI={envGet("CAMERA_CALIBRATION_H_HI", this.props.env)} S_HI={envGet("CAMERA_CALIBRATION_S_HI", this.props.env)} V_HI={envGet("CAMERA_CALIBRATION_V_HI", this.props.env)} + timeOffset={this.props.timeOffset} shouldDisplay={this.props.shouldDisplay} botToMqttStatus={this.props.botToMqttStatus} />; case "plant_detection": diff --git a/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx b/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx index f2dca8904c..88859e4bc6 100644 --- a/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx +++ b/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx @@ -1,26 +1,25 @@ -import { ImageWorkspace } from "../image_workspace"; +import { ImageWorkspace, ImageWorkspaceProps } from "../image_workspace"; import { fakeImage } from "../../../__test_support__/fake_state/resources"; import { TaggedImage } from "farmbot"; describe("", () => { - function fakeProps() { - return { - onFlip: jest.fn(), - onProcessPhoto: jest.fn(), - onChange: jest.fn(), - currentImage: undefined as TaggedImage | undefined, - images: [] as TaggedImage[], - iteration: 9, - morph: 9, - blur: 9, - H_LO: 2, - S_LO: 4, - V_LO: 6, - H_HI: 8, - S_HI: 10, - V_HI: 12 - }; - } + const fakeProps = (): ImageWorkspaceProps => ({ + onFlip: jest.fn(), + onProcessPhoto: jest.fn(), + onChange: jest.fn(), + currentImage: undefined as TaggedImage | undefined, + images: [] as TaggedImage[], + iteration: 9, + morph: 9, + blur: 9, + H_LO: 2, + S_LO: 4, + V_LO: 6, + H_HI: 8, + S_HI: 10, + V_HI: 12, + timeOffset: 0, + }); it("triggers onChange() event", () => { const props = fakeProps(); diff --git a/webpack/farmware/weed_detector/image_workspace.tsx b/webpack/farmware/weed_detector/image_workspace.tsx index 656c85fb48..00b7a4841a 100644 --- a/webpack/farmware/weed_detector/image_workspace.tsx +++ b/webpack/farmware/weed_detector/image_workspace.tsx @@ -6,6 +6,7 @@ import { HSV } from "./interfaces"; import { WeedDetectorSlider } from "./slider"; import { TaggedImage } from "farmbot"; import { t } from "i18next"; +import { PhotoFooter } from "../images/photos"; const RANGES = { H: { LOWEST: 0, HIGHEST: 179 }, @@ -31,13 +32,14 @@ export interface NumericValues { type NumericKeyName = keyof NumericValues; -interface Props extends NumericValues { +export interface ImageWorkspaceProps extends NumericValues { onFlip(uuid: string | undefined): void; onProcessPhoto(image_id: number): void; currentImage: TaggedImage | undefined; images: TaggedImage[]; onChange(key: NumericKeyName, value: number): void; invertHue?: boolean; + timeOffset: number; } /** Mapping of HSV values to FBOS Env variables. */ @@ -47,7 +49,7 @@ const CHANGE_MAP: Record = { V: ["V_LO", "V_HI"] }; -export class ImageWorkspace extends React.Component { +export class ImageWorkspace extends React.Component { /** Generates a function to handle changes to blur/morph/iteration. */ numericChange = (key: NumericKeyName) => (e: React.SyntheticEvent) => { @@ -160,6 +162,9 @@ export class ImageWorkspace extends React.Component { onFlip={this.props.onFlip} images={this.props.images} currentImage={this.props.currentImage} /> + ; } } diff --git a/webpack/farmware/weed_detector/index.tsx b/webpack/farmware/weed_detector/index.tsx index a66dcf71a6..801e638f06 100644 --- a/webpack/farmware/weed_detector/index.tsx +++ b/webpack/farmware/weed_detector/index.tsx @@ -79,6 +79,7 @@ export class WeedDetector currentImage={this.props.currentImage} images={this.props.images} onChange={this.change} + timeOffset={this.props.timeOffset} iteration={envGet(this.namespace("iteration"), this.props.env)} morph={envGet(this.namespace("morph"), this.props.env)} blur={envGet(this.namespace("blur"), this.props.env)}