Added Sight Tutorial feature

Author: dlymonkai

apps/demo-app/src/local-config.json

@@ -14,7 +14,7 @@
   },
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
-  "enableSightTutorial": false,
+  "enableSightTutorial": true,
   "enableTutorial": "first_time_only",
   "startTasksOnComplete": true,
   "showCloseButton": false,
@@ -207,6 +207,18 @@
       ]
     }
   ],
+  "sightTutorial": [
+    {
+      "en": "Kneel or bend low in front of the car, aligned with the grille. Centre the car in the frame, ensuring the front grille, headlights, and registration plate are fully visible. Include the top of the car and the bottom of the bumper in the shot.",
+      "fr": "Agenouillez-vous ou penchez-vous devant la voiture, aligné avec la calandre. Centrez la voiture dans le cadre, en vous assurant que la calandre avant, les phares et la plaque d'immatriculation soient bien visibles. Veillez à inclure le toit de la voiture et le bas du pare-chocs dans la photo.",
+      "nl": "Kniel of buk laag voor de auto, uitgelijnd met het rooster. Centreer de auto in het frame, zorg ervoor dat het voorrooster, de koplampen en het kenteken volledig zichtbaar zijn. Zorg ervoor dat de bovenkant van de auto en de onderkant van de bumper in de foto zichtbaar zijn.",
+      "de": "Knien oder beugen Sie sich vor dem Auto, ausgerichtet mit dem Kühlergrill. Zentrieren Sie das Auto im Bild, sodass der vordere Kühlergrill, die Scheinwerfer und das Nummernschild vollständig sichtbar sind. Achten Sie darauf, dass das Dach des Autos und der untere Teil der Stoßstange im Bild zu sehen sind.",
+      "imageReferenceBySightId": {
+        "jgc21-QIvfeg0X": null,
+        "haccord-8YjMcu0D": "https://storage.googleapis.com/monk-sight-images/jgc21-QIvfeg0X.jpeg"
+      }
+    }
+  ],
   "requiredApiPermissions": [
     "monk_core_api:compliances",
     "monk_core_api:damage_detection",

documentation/src/utils/schemas.ts

@@ -105,6 +105,14 @@ export const SightGuidelineSchema = z.object({
   nl: z.string(),
 });
 
+export const SightTutorialSchema = z.object({
+  imageReferenceBySightId: z.record(z.string().nullable()),
+  en: z.string(),
+  fr: z.string(),
+  de: z.string(),
+  nl: z.string(),
+});
+
 export const AccentColorVariantsSchema = z.object({
   xdark: z.string(),
   dark: z.string(),
@@ -315,6 +323,7 @@ export const LiveConfigSchema = z
     enableTutorial: z.nativeEnum(PhotoCaptureTutorialOption).optional(),
     allowSkipTutorial: z.boolean().optional(),
     enableSightTutorial: z.boolean().optional(),
+    sightTutorial: z.array(SightGuidelineSchema).optional(),
     defaultVehicleType: z.nativeEnum(VehicleType),
     allowManualLogin: z.boolean(),
     allowVehicleTypeSelection: z.boolean(),

packages/common-ui-web/README.md

@@ -283,6 +283,60 @@ function App() {
 
 ---
 
+## IconAroundVehicle
+### Description
+Component used to display an icon representing a vehicle and a point of view (POV) indicator.
+
+### Example
+```tsx
+import { useState } from 'react';
+import { IconAroundVehicle } from '@monkvision/common-ui-web';
+
+function MyComponent() {
+
+  return <IconAroundVehicle positionAroundVehicle={90}/>;
+}
+```
+
+### Props
+| Prop                  | Type     | Description                                                                                               | Required | Default Value |
+|-----------------------|----------|-----------------------------------------------------------------------------------------------------------|----------|---------------|
+| size                  | number   | The size (width and height, in pixels) of the icon..                                                      |          | `50`          |
+| positionAroundVehicle | number   | Pov position angle to the north (0: POV in the front of the car / 180: POV is behind the back of the car) |          | `0`           |
+| orientationAngle      | number   | POV orientation angle: (0: POV is facing north / 180: POV is facing south).                               |          |               |
+| showCircle            | boolean  | Boolean indicating if the circle should be visible.                                                       |          | `true`        |
+| isPovClose            | boolean  | Boolean indicating if the POV should be closer to the center.                                             |          | `true`        |
+
+---
+
+## IconVerticalPosition
+### Description
+Component used to display an icon representing a vehicle and a point of view (POV) indicator.
+
+### Example
+
+```tsx
+import {useState} from 'react';
+import {IconVerticalPosition} from '@monkvision/common-ui-web';
+import {CameraHeight} from "@monkvision/types";
+
+function MyComponent() {
+
+  return <IconVerticalPosition position={CameraHeight.MID}/>;
+}
+```
+
+### Props
+| Prop                  | Type     | Description                                                                                               | Required | Default Value |
+|-----------------------|----------|-----------------------------------------------------------------------------------------------------------|----------|---------------|
+| size                  | number   | The size (width and height, in pixels) of the icon..                                                      |          | `50`          |
+| positionAroundVehicle | number   | Pov position angle to the north (0: POV in the front of the car / 180: POV is behind the back of the car) |          | `0`           |
+| orientationAngle      | number   | POV orientation angle: (0: POV is facing north / 180: POV is facing south).                               |          |               |
+| showCircle            | boolean  | Boolean indicating if the circle should be visible.                                                       |          | `true`        |
+| isPovClose            | boolean  | Boolean indicating if the POV should be closer to the center.                                             |          | `true`        |
+
+---
+
 ## ImageDetailedView
 ### Description
 This component is used to display the preview of an inspection image, as well as additional data such as its label etc.

packages/common-ui-web/src/components/IconAroundVehicle/IconAroundVehicle.styles.ts

@@ -0,0 +1,71 @@
+import { Styles } from '@monkvision/types';
+import { useResponsiveStyle } from '@monkvision/common';
+
+export const styles: Styles = {
+  container: {
+    padding: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  car: { position: 'absolute' },
+  pov: {
+    position: 'absolute',
+  },
+};
+
+export interface IconAroundVehicleParams {
+  size: number;
+  positionAroundVehicle: number;
+  orientationAngle?: number;
+  isPovClose?: boolean;
+}
+
+function getPointOnCircle(angleDegrees: number, radius: number): { x: number; y: number } {
+  const shiftedAngleDegrees = angleDegrees - 90;
+  const angleRadians = shiftedAngleDegrees * (Math.PI / 180);
+
+  const x = Math.round(radius * Math.cos(angleRadians));
+  const y = Math.round(radius * Math.sin(angleRadians)) * -1;
+
+  return { x, y };
+}
+
+export function useIconAroundVehicleStyle({
+  size,
+  positionAroundVehicle,
+  orientationAngle,
+  isPovClose,
+}: IconAroundVehicleParams) {
+  const { responsive } = useResponsiveStyle();
+
+  const baseRadius = size / 2;
+  const closeUpRadius = baseRadius * 0.3;
+
+  const position = getPointOnCircle(positionAroundVehicle, baseRadius);
+  const orientation =
+    orientationAngle !== undefined ? getPointOnCircle(orientationAngle, size / 2) : null;
+  const x = orientation ? position.x - orientation.x : 0;
+  const y = orientation ? position.y - orientation.y : 0;
+
+  const angle = orientationAngle ?? positionAroundVehicle;
+
+  const closeUpOffset = isPovClose
+    ? getPointOnCircle(positionAroundVehicle, closeUpRadius)
+    : { x: 0, y: 0 };
+
+  return {
+    container: {
+      ...styles['container'],
+      ...responsive(styles['containerSmall']),
+      width: size,
+      height: size,
+    },
+    pov: {
+      ...styles['pov'],
+      transform: ` translate(${x - closeUpOffset.x}px, ${
+        y - closeUpOffset.y
+      }px) rotate(${-angle}deg)`,
+    },
+  };
+}

packages/common-ui-web/src/components/IconAroundVehicle/IconAroundVehicle.tsx

@@ -0,0 +1,36 @@
+import { DynamicSVG } from '../DynamicSVG';
+import { assets } from './assets';
+import { styles, useIconAroundVehicleStyle } from './IconAroundVehicle.styles';
+import { IconAroundVehicleProps } from './IconAroundVehicle.types';
+
+/**
+ * Component used to display an icon representing a vehicle and a point of view (POV) indicator.
+ */
+export function IconAroundVehicle({
+  size = 50,
+  positionAroundVehicle = 0,
+  orientationAngle,
+  showCircle = true,
+  isPovClose = false,
+  ...passThroughProps
+}: IconAroundVehicleProps) {
+  const style = useIconAroundVehicleStyle({
+    size,
+    positionAroundVehicle,
+    orientationAngle,
+    isPovClose,
+  });
+  const { CAR_SVG, CIRCLE_SVG, POV_SVG } = assets;
+  const carSize = size * 0.6;
+  const povSize = size * 1.1;
+
+  return (
+    <div style={style.container} {...passThroughProps}>
+      {showCircle && (
+        <DynamicSVG svg={CIRCLE_SVG} width={size} height={size} style={styles['car']} />
+      )}
+      <DynamicSVG svg={CAR_SVG} width={carSize} height={carSize} style={styles['car']} />
+      <DynamicSVG svg={POV_SVG} width={povSize} height={povSize} style={style.pov} />
+    </div>
+  );
+}

packages/common-ui-web/src/components/IconAroundVehicle/IconAroundVehicle.types.ts

@@ -0,0 +1,37 @@
+/**
+ * Props accepted by the IconAroundVehicle component.
+ */
+export interface IconAroundVehicleProps {
+  /**
+   * The size (width and height, in pixels) of the icon.
+   *
+   * @default 50
+   */
+  size?: number;
+  /**
+   * Pov position angle to the north:
+   * - 0: POV in the front of the car
+   * - 180: POV is behind the back of the car
+   *
+   * @default 0
+   */
+  positionAroundVehicle?: number;
+  /**
+   * POV orientation angle:
+   * - 0: POV is facing north
+   * - 180: POV is facing south.
+   */
+  orientationAngle?: number;
+  /**
+   * Boolean indicating if the circle should be visible.
+   *
+   * @default true
+   */
+  showCircle?: boolean;
+  /**
+   * Boolean indicating if the POV should be closer to the center.
+   *
+   * @default false
+   */
+  isPovClose?: boolean;
+}

packages/common-ui-web/src/components/IconAroundVehicle/assets.ts

@@ -0,0 +1,8 @@
+export const assets = {
+  CAR_SVG:
+    '<svg fill="none" viewBox="0 0 44 87" xmlns="http://www.w3.org/2000/svg"><path fill="#F2F2F7" fill-rule="evenodd" d="M42.343 74.861c0 2.638-1.251 5.12-3.371 6.69a27.75 27.75 0 0 1-33.027 0 8.325 8.325 0 0 1-3.371-6.69V73.53c-.916 0-1.658-3.296-1.658-7.362 0-4.066.742-7.363 1.657-7.363V29.363C1.658 29.362.916 26.066.916 22c0-4.066.742-7.363 1.657-7.363V11.23a8.324 8.324 0 0 1 5.435-7.806 41.62 41.62 0 0 1 28.9 0 8.324 8.324 0 0 1 5.434 7.806v3.409h.001C43.258 14.637 44 17.933 44 22c0 4.066-.742 7.362-1.657 7.362V58.805c.915 0 1.657 3.297 1.657 7.363 0 4.066-.742 7.362-1.657 7.362v1.331ZM37.12 56.153a3.077 3.077 0 0 1-1.828 4.466l-2.59.748a36.927 36.927 0 0 1-20.492 0l-2.59-.748a3.077 3.077 0 0 1-1.828-4.466l4.722-8.392.98.181a49.239 49.239 0 0 0 17.925 0l.98-.181 4.721 8.392Zm-3.244-40.967c2.303.483 3.235 3.268 1.684 5.039l-2.042 2.334a3.077 3.077 0 0 1-2.798 1.012l-.547-.087a49.238 49.238 0 0 0-15.433 0l-.547.087a3.077 3.077 0 0 1-2.798-1.012l-2.043-2.334c-1.55-1.771-.62-4.556 1.685-5.039l3.849-.806a36.927 36.927 0 0 1 15.14 0l3.85.806Z" clip-rule="evenodd"/></svg>',
+  POV_SVG:
+    '<svg fill="none" viewBox="0 0 164 164" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#test_svg__a)"><path fill="url(#test_svg__b)" d="M14.257 68.215c-3.948-5.83-2.212-13.776 3.807-17.427l19.243-11.674c27.466-16.663 61.92-16.663 89.386 0l19.243 11.674c6.019 3.651 7.755 11.598 3.807 17.427L93 152H71L14.257 68.215Z"/><circle cx="82" cy="152" r="11" fill="#FFC000" stroke="#fff" stroke-width="2"/></g><defs><linearGradient id="test_svg__b" x1="85.071" x2="85.071" y1="70.834" y2="151.615" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC000" stop-opacity="0"/><stop offset="1" stop-color="#FFC000"/></linearGradient><clipPath id="test_svg__a"><path fill="#fff" d="M0 0h164v164H0z"/></clipPath></defs></svg>',
+  CIRCLE_SVG:
+    '<svg fill="none" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><circle cx="72" cy="72" r="70" fill="#1C1C1E" fill-opacity=".75" stroke="#F2F2F7" stroke-dasharray="4 20" stroke-linecap="round" stroke-width="4"/></svg>',
+};

packages/common-ui-web/src/components/IconAroundVehicle/index.ts

@@ -0,0 +1,2 @@
+export { IconAroundVehicle } from './IconAroundVehicle';
+export { type IconAroundVehicleProps } from './IconAroundVehicle.types';

packages/common-ui-web/src/components/IconVerticalPosition/IconVerticalPosition.tsx

@@ -0,0 +1,38 @@
+import { CameraHeight } from '@monkvision/types';
+import { DynamicSVG } from '../DynamicSVG';
+import {
+  IconVerticalPositionProps,
+  IconVerticalPositionVariant,
+} from './IconVerticalPosition.types';
+import { assets } from './assets';
+
+function getSvg(position: CameraHeight, variant: IconVerticalPositionVariant): string {
+  const { MONK_MID_SVG, HIGH_SVG, MONK_LOW_SVG, LOW_SVG, MID_SVG, MONK_HIGH_SVG } = assets;
+  const svgMap = {
+    [CameraHeight.HIGH]: {
+      [IconVerticalPositionVariant.PRIMARY]: HIGH_SVG,
+      [IconVerticalPositionVariant.SECONDARY]: MONK_HIGH_SVG,
+    },
+    [CameraHeight.MID]: {
+      [IconVerticalPositionVariant.PRIMARY]: MID_SVG,
+      [IconVerticalPositionVariant.SECONDARY]: MONK_MID_SVG,
+    },
+    [CameraHeight.LOW]: {
+      [IconVerticalPositionVariant.PRIMARY]: LOW_SVG,
+      [IconVerticalPositionVariant.SECONDARY]: MONK_LOW_SVG,
+    },
+  };
+
+  return svgMap[position]?.[variant] || svgMap[CameraHeight.MID][variant];
+}
+
+/**
+ * Component used to display an icon representing a vehicle and a point of view (POV) indicator.
+ */
+export function IconVerticalPosition({
+  size = 50,
+  position = CameraHeight.MID,
+  variant = IconVerticalPositionVariant.PRIMARY,
+}: IconVerticalPositionProps) {
+  return <DynamicSVG svg={getSvg(position, variant)} width={size} height={size} />;
+}

packages/common-ui-web/src/components/IconVerticalPosition/IconVerticalPosition.types.ts

@@ -0,0 +1,30 @@
+import { CameraHeight } from '@monkvision/types';
+
+export enum IconVerticalPositionVariant {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+}
+
+/**
+ * Props accepted by the IconVerticalPosition component.
+ */
+export interface IconVerticalPositionProps {
+  /**
+   * The size (width and height, in pixels) of the icon.
+   *
+   * @default 50
+   */
+  size?: number;
+  /**
+   * The height position of the icon.
+   *
+   * @default CameraHeight.MID
+   */
+  position?: CameraHeight;
+  /**
+   * The height position of the icon.
+   *
+   * @default primary
+   */
+  variant?: IconVerticalPositionVariant;
+}