spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

fix map image scaling bugs

pull/1172/head
gabrielburnworth 2019-04-29 19:25:40 -07:00
parent e4b68524f5
commit 5041dad952
4 changed files with 139 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/farm_designer/map/layers/images/__tests__/images_layer_test.tsx
View File

@ -26,13 +26,12 @@ describe("<ImageLayer/>", () => {
images: [image],
mapTransformProps: fakeMapTransformProps(),
cameraCalibrationData: {
offset: { x: "0", y: "0" },
origin: "TOP_LEFT",
rotation: "0",
scale: "1",
calibrationZ: "0"
offset: { x: undefined, y: undefined },
origin: undefined,
rotation: undefined,
scale: undefined,
calibrationZ: undefined,
},
sizeOverride: { width: 10, height: 10 },
getConfigValue: jest.fn(),
};
}
@ -41,7 +40,7 @@ describe("<ImageLayer/>", () => {
const p = fakeProps();
const wrapper = shallow(<ImageLayer {...p} />);
const layer = wrapper.find("#image-layer");
expect(layer.find("MapImage").html()).toContain("x=\"0\"");
expect(layer.find("MapImage").html()).toContain("image");
});
it("toggles visibility off", () => {

23
frontend/farm_designer/map/layers/images/__tests__/map_image_test.tsx
View File

@ -45,9 +45,22 @@ describe("<MapImage />", () => {
const p = fakeProps();
p.image && (p.image.body.meta = { x: 0, y: 0, z: 0 });
const wrapper = mount(<MapImage {...p} />);
wrapper.setState({ width: 100, height: 100 });
expect(wrapper.html()).toContain("image_url");
});
it("gets image size", () => {
const p = fakeProps();
p.image && (p.image.body.meta = { x: 0, y: 0, z: 0 });
const wrapper = mount<MapImage>(<MapImage {...p} />);
expect(wrapper.state()).toEqual({ width: 0, height: 0 });
const img = new Image();
img.width = 100;
img.height = 200;
wrapper.instance().imageCallback(img)();
expect(wrapper.state()).toEqual({ width: 100, height: 200 });
});
interface ExpectedData {
size: { width: number, height: number };
sx: number;
@ -71,6 +84,7 @@ describe("<MapImage />", () => {
extra?: ExtraTranslationData) => {
it(`renders image: INPUT_SET_${num}`, () => {
const wrapper = mount(<MapImage {...inputData[num]} />);
wrapper.setState({ width: 480, height: 640 });
expect(wrapper.find("image").props()).toEqual({
xlinkHref: "image_url",
x: 0,
@ -100,7 +114,6 @@ describe("<MapImage />", () => {
INPUT_SET_1.mapTransformProps = fakeMapTransformProps();
INPUT_SET_1.mapTransformProps.gridSize = { x: 5900, y: 2900 },
INPUT_SET_1.mapTransformProps.quadrant = 3;
INPUT_SET_1.sizeOverride = { width: 480, height: 640 };
const INPUT_SET_2 = cloneDeep(INPUT_SET_1);
INPUT_SET_2.image && (INPUT_SET_2.image.body.meta = {
@ -125,13 +138,16 @@ describe("<MapImage />", () => {
const INPUT_SET_7 = cloneDeep(INPUT_SET_6);
INPUT_SET_7.cameraCalibrationData.origin = "BOTTOM_RIGHT";
const INPUT_SET_9 = cloneDeep(INPUT_SET_6);
INPUT_SET_9.cameraCalibrationData.origin = "TOP_LEFT";
const INPUT_SET_8 = cloneDeep(INPUT_SET_7);
INPUT_SET_8.mapTransformProps.xySwap = true;
const DATA = [
INPUT_SET_1,
INPUT_SET_1, INPUT_SET_2, INPUT_SET_3, INPUT_SET_4, INPUT_SET_5,
INPUT_SET_6, INPUT_SET_7, INPUT_SET_8
INPUT_SET_6, INPUT_SET_7, INPUT_SET_8, INPUT_SET_9,
];
const expectedSize = { width: 385.968, height: 514.624 };
@ -157,6 +173,9 @@ describe("<MapImage />", () => {
renderedTest(7, DATA, {
size: expectedSize, sx: 1, sy: 1, tx: 5436.016, ty: 2259.688
});
renderedTest(9, DATA, {
size: expectedSize, sx: -1, sy: -1, tx: -5821.984, ty: -2774.312
});
renderedTest(8, DATA, {
size: expectedSize, sx: 1, sy: 1, tx: 2388.344, ty: 5307.36
}, { rot: 90, sx: -1, sy: 1, tx: -514.624, ty: -514.624 });

53
frontend/farm_designer/map/layers/images/image_layer.tsx
View File

@ -6,37 +6,42 @@ import { MapImage } from "./map_image";
import { reverse, cloneDeep } from "lodash";
import { GetWebAppConfigValue } from "../../../../config_storage/actions";
import moment from "moment";
import { equals } from "../../../../util";
export interface ImageLayerProps {
visible: boolean;
images: TaggedImage[];
mapTransformProps: MapTransformProps;
cameraCalibrationData: CameraCalibrationData;
sizeOverride?: { width: number, height: number };
getConfigValue: GetWebAppConfigValue;
}
export function ImageLayer(props: ImageLayerProps) {
const {
visible, images, mapTransformProps, cameraCalibrationData, sizeOverride,
getConfigValue
} = props;
const imageFilterBegin = getConfigValue("photo_filter_begin");
const imageFilterEnd = getConfigValue("photo_filter_end");
return <g id="image-layer">
{visible &&
reverse(cloneDeep(images))
.filter(x => !imageFilterEnd ||
moment(x.body.created_at).isBefore(imageFilterEnd.toString()))
.filter(x => !imageFilterBegin ||
moment(x.body.created_at).isAfter(imageFilterBegin.toString()))
.map(img =>
<MapImage
image={img}
key={"image_" + img.body.id}
cameraCalibrationData={cameraCalibrationData}
sizeOverride={sizeOverride}
mapTransformProps={mapTransformProps} />
)}
</g>;
export class ImageLayer extends React.Component<ImageLayerProps> {
shouldComponentUpdate(nextProps: ImageLayerProps) {
return !equals(this.props, nextProps);
}
render() {
const {
visible, images, mapTransformProps, cameraCalibrationData, getConfigValue
} = this.props;
const imageFilterBegin = getConfigValue("photo_filter_begin");
const imageFilterEnd = getConfigValue("photo_filter_end");
return <g id="image-layer">
{visible &&
reverse(cloneDeep(images))
.filter(x => !imageFilterEnd ||
moment(x.body.created_at).isBefore(imageFilterEnd.toString()))
.filter(x => !imageFilterBegin ||
moment(x.body.created_at).isAfter(imageFilterBegin.toString()))
.map(img =>
<MapImage
image={img}
key={"image_" + img.body.id}
cameraCalibrationData={cameraCalibrationData}
mapTransformProps={mapTransformProps} />
)}
</g>;
}
}

134
frontend/farm_designer/map/layers/images/map_image.tsx
View File

@ -4,6 +4,7 @@ import { CameraCalibrationData, BotOriginQuadrant } from "../../../interfaces";
import { MapTransformProps } from "../../interfaces";
import { transformXY } from "../../util";
import { isNumber, round } from "lodash";
import { equals } from "../../../../util";
const PRECISION = 3; // Number of decimals for image placement coordinates
/** Show all images roughly on map when no calibration values are present. */
@ -33,21 +34,14 @@ const cameraZCheck =
Math.abs(imageZ - calibrationZ) < 5;
};
interface ImageSize {
width: number;
height: number;
}
/* Get the size of the image at the URL. Allow overriding for tests. */
const getImageSize = (url: string, size?: ImageSize): ImageSize => {
if (url.includes("placehold")) { return { width: 0, height: 0 }; }
if (size) { return size; }
/* Get the size of the image at the URL. */
const getImageSize = (
url: string,
onLoad: (img: HTMLImageElement) => () => void
): void => {
const imageData = new Image();
imageData.src = url;
return {
height: imageData.height || 480,
width: imageData.width || 640
};
imageData.onload = onLoad(imageData);
};
/* Flip (mirror) image based on orientation of camera. */
@ -113,11 +107,37 @@ const transform = (props: TransformProps): string => {
+ xySwapTransform;
};
interface ParsedCalibrationData {
noCalib: boolean;
imageScale: number | undefined;
imageOffsetX: number | undefined;
imageOffsetY: number | undefined;
imageOrigin: string | undefined;
}
/** If calibration data exists, parse it, usually to a number.
* Otherwise, return values for pre-calibration preview. */
const parseCalibrationData =
(props: CameraCalibrationData): ParsedCalibrationData => {
const { scale, offset, origin } = props;
const noCalib = PRE_CALIBRATION_PREVIEW && !parse(scale);
const imageScale = noCalib ? 0.6 : parse(scale);
const imageOffsetX = noCalib ? 0 : parse(offset.x);
const imageOffsetY = noCalib ? 0 : parse(offset.y);
const cleanOrigin = origin ? origin.split("\"").join("") : undefined;
const imageOrigin = noCalib ? "BOTTOM_LEFT" : cleanOrigin;
return { noCalib, imageScale, imageOffsetX, imageOffsetY, imageOrigin };
};
export interface MapImageProps {
image: TaggedImage | undefined;
cameraCalibrationData: CameraCalibrationData;
mapTransformProps: MapTransformProps;
sizeOverride?: ImageSize;
}
interface MapImageState {
width: number;
height: number;
}
/*
@ -125,43 +145,55 @@ export interface MapImageProps {
* Assume the image that is provided from the Farmware is rotated correctly.
* Require camera calibration data to display the image.
*/
// tslint:disable-next-line:cyclomatic-complexity
export function MapImage(props: MapImageProps) {
const { image, cameraCalibrationData, sizeOverride } = props;
const { scale, offset, origin, calibrationZ } = cameraCalibrationData;
const noCalib = PRE_CALIBRATION_PREVIEW && !parse(scale);
const imageScale = noCalib ? 1.5 : parse(scale);
const imageOffsetX = noCalib ? 0 : parse(offset.x);
const imageOffsetY = noCalib ? 0 : parse(offset.y);
const cleanOrigin = origin ? origin.split("\"").join("") : undefined;
const imageOrigin = noCalib ? "BOTTOM_LEFT" : cleanOrigin;
const { quadrant, xySwap } = props.mapTransformProps;
export class MapImage extends React.Component<MapImageProps, MapImageState> {
state: MapImageState = { width: 0, height: 0 };
/* Check if the image exists. */
if (image) {
const imageUrl = image.body.attachment_url;
const { x, y, z } = image.body.meta;
const imageAnnotation = image.body.meta.name;
const { width, height } = getImageSize(imageUrl, sizeOverride);
/* Check for all necessary camera calibration and image data. */
if (isNumber(x) && isNumber(y) && height > 0 && width > 0 &&
isNumber(imageScale) && imageScale > 0 &&
cameraZCheck(z, calibrationZ) && isRotated(imageAnnotation, noCalib) &&
isNumber(imageOffsetX) && isNumber(imageOffsetY) && imageOrigin) {
/* Use pixel to coordinate scale to scale image. */
const size = { x: width * imageScale, y: height * imageScale };
const o = { // Coordinates of top left corner of image for placement
x: x + imageOffsetX - size.x / 2,
y: y + imageOffsetY - size.y / 2
};
const qCoords = transformXY(o.x, o.y, props.mapTransformProps);
const transformProps = { quadrant, qCoords, size, imageOrigin, xySwap };
return <image
xlinkHref={imageUrl}
height={size.y} width={size.x} x={0} y={0}
transform={transform(transformProps)} />;
}
shouldComponentUpdate(nextProps: MapImageProps, nextState: MapImageState) {
const propsChanged = !equals(this.props, nextProps);
const stateChanged = !equals(this.state, nextState);
return propsChanged || stateChanged;
}
imageCallback = (img: HTMLImageElement) => () => {
const { width, height } = img;
this.setState({ width, height });
};
render() {
const { image, cameraCalibrationData } = this.props;
const {
noCalib, imageScale, imageOffsetX, imageOffsetY, imageOrigin
} = parseCalibrationData(cameraCalibrationData);
const { calibrationZ } = cameraCalibrationData;
const { quadrant, xySwap } = this.props.mapTransformProps;
/* Check if the image exists. */
if (image && !image.body.attachment_url.includes("placehold")) {
const imageUrl = image.body.attachment_url;
const { x, y, z } = image.body.meta;
const imageAnnotation = image.body.meta.name;
getImageSize(imageUrl, this.imageCallback);
const { width, height } = this.state;
/* Check for all necessary camera calibration and image data. */
if (isNumber(x) && isNumber(y) && height > 0 && width > 0 &&
isNumber(imageScale) && imageScale > 0 &&
cameraZCheck(z, calibrationZ) && isRotated(imageAnnotation, noCalib) &&
isNumber(imageOffsetX) && isNumber(imageOffsetY) && imageOrigin) {
/* Use pixel to coordinate scale to scale image. */
const size = { x: width * imageScale, y: height * imageScale };
const o = { // Coordinates of top left corner of image for placement
x: x + imageOffsetX - size.x / 2,
y: y + imageOffsetY - size.y / 2
};
const qCoords = transformXY(o.x, o.y, this.props.mapTransformProps);
const transformProps = { quadrant, qCoords, size, imageOrigin, xySwap };
return <image
xlinkHref={imageUrl}
height={size.y} width={size.x} x={0} y={0}
transform={transform(transformProps)} />;
}
}
return <image />;
}
return <image />;
}