Merge pull request #76 from FRC2713/image_input

add image input

Author: tytremblay

README.md

@@ -84,7 +84,7 @@ The basic structure of the config.json file is as follows:
 
 `title`: The name of this field
 
-`type`: One of "text", "number", "boolean", "range", "select", "counter", "image", "timer", or "multiselect". Describes the type of input this is.
+`type`: One of "text", "number", "boolean", "range", "select", "counter", "timer", "multi-select", or "image". Describes the type of input this is.
 
 `required`: a boolean indicating if this must be filled out before the QRCode is generated. If any field with this set to true is not filled out, QRScout will not generate a QRCode when the commit button is pressed.
 
@@ -192,3 +192,72 @@ For example, in a game where robots can score in multiple locations, you might c
 ```
 
 This allows scouts to quickly record all locations where a robot successfully scored during a match.
+
+### Using Image Input
+
+The image input type allows you to display static images in your scouting form. This is useful for showing field layouts, robot diagrams, game piece locations, or any visual reference that helps scouts accurately record data.
+
+#### Configuration in config.json
+
+To configure an image field in your `config.json`:
+
+```json
+{
+  "title": "Field Layout",
+  "type": "image",
+  "required": false,
+  "code": "fieldLayout",
+  "description": "Reference diagram of the field",
+  "defaultValue": "https://example.com/path/to/field-layout.jpg",
+  "width": 400,
+  "height": 300,
+  "alt": "2024 FRC Field Layout Diagram",
+  "formResetBehavior": "preserve"
+}
+```
+
+#### Image Input Properties
+
+- **defaultValue**: The URL to the statically hosted image. This should be a publicly accessible URL.
+- **width** (optional): The width of the image in pixels. If not specified, the image will use responsive sizing.
+- **height** (optional): The height of the image in pixels. If not specified, the image will maintain its aspect ratio.
+- **alt** (optional): Alternative text for the image for accessibility. If not provided, it will use the title.
+
+#### Interactive Features
+
+- **Click to Enlarge**: Users can click on any image to open a full-size version in a dialog. This is particularly useful for detailed diagrams or when images need to be examined more closely.
+
+#### Best Practices for Image Input
+
+1. **Host Images Reliably**: Ensure your images are hosted on a reliable service that will be accessible during competition, even with limited internet connectivity.
+2. **Optimize Image Size**: Use appropriately sized and compressed images to ensure fast loading times, especially on tablets or devices with slower connections.
+3. **Consider Offline Use**: For critical reference images, consider embedding them directly in your application or providing a local fallback.
+4. **Use Descriptive Alt Text**: Provide meaningful alternative text to ensure accessibility for all users.
+5. **Provide Context**: Let users know they can click on images to view them in full size, especially for detailed diagrams or maps.
+
+#### FRC Scouting Examples
+
+Image inputs are particularly useful for FRC scouting in scenarios like:
+
+- **Field Layout Reference**: Show the competition field with labeled zones for more accurate position reporting
+- **Robot Diagram**: Display a diagram of a robot with numbered components for reference
+- **Scoring Locations**: Visualize different scoring positions or game elements
+- **Strategy Diagrams**: Show predefined strategies or paths that scouts should watch for
+- **Game Piece Identification**: Display images of the current season's game pieces for reference
+
+For example, to include a field diagram in your scouting form:
+
+```json
+{
+  "title": "Field Reference",
+  "type": "image",
+  "required": false,
+  "code": "fieldReference",
+  "description": "Use this diagram to identify field positions",
+  "defaultValue": "https://yourteam.org/resources/field-diagram-2024.jpg",
+  "width": 500,
+  "formResetBehavior": "preserve"
+}
+```
+
+This allows scouts to reference the field layout while recording robot positions or movements during a match.

config/2025/config.json

@@ -138,6 +138,18 @@
             "SP1": "Deep",
             "SP2": "Shallow"
           }
+        },
+        {
+          "title": "Field Layout",
+          "description": "Reference diagram of the field",
+          "type": "image",
+          "required": false,
+          "code": "fieldLayout",
+          "defaultValue": "https://firstfrc.blob.core.windows.net/frc2025/Manual/HTML/2025GameManual_files/image008.png",
+          "width": 400,
+          "height": 300,
+          "alt": "2025 FRC Field Layout Diagram",
+          "formResetBehavior": "preserve"
         }
       ]
     },

src/components/inputs/BaseInputProps.ts

@@ -10,6 +10,7 @@ export const inputTypeSchema = z
     'counter',
     'timer',
     'multi-select',
+    'image',
   ])
   .describe('The type of input');
 
@@ -82,6 +83,17 @@ export const timerInputSchema = inputBaseSchema.extend({
   defaultValue: z.number().default(0).describe('The default value'),
 });
 
+export const imageInputSchema = inputBaseSchema.extend({
+  type: z.literal('image'),
+  defaultValue: z
+    .string()
+    .default('')
+    .describe('The URL to a statically hosted image'),
+  width: z.number().optional().describe('The width of the image in pixels'),
+  height: z.number().optional().describe('The height of the image in pixels'),
+  alt: z.string().optional().describe('The alt text for the image'),
+});
+
 export const sectionSchema = z.object({
   name: z.string(),
   fields: z.array(
@@ -94,6 +106,7 @@ export const sectionSchema = z.object({
       rangeInputSchema,
       booleanInputSchema,
       timerInputSchema,
+      imageInputSchema,
     ]),
   ),
 });
@@ -105,7 +118,7 @@ const shadcnColorSchema = z
 const shadcnRadiusSchema = z
   .string()
   .regex(/([0-9]*.[0-9]+rem)/)
-  .optional()
+  .optional();
 
 export const colorSchemeSchema = z.object({
   background: shadcnColorSchema,
@@ -227,6 +240,7 @@ export type CounterInputData = z.infer<typeof counterInputSchema>;
 export type RangeInputData = z.infer<typeof rangeInputSchema>;
 export type BooleanInputData = z.infer<typeof booleanInputSchema>;
 export type TimerInputData = z.infer<typeof timerInputSchema>;
+export type ImageInputData = z.infer<typeof imageInputSchema>;
 
 export type InputPropsMap = {
   text: StringInputData;
@@ -237,6 +251,7 @@ export type InputPropsMap = {
   'multi-select': MultiSelectInputData;
   counter: CounterInputData;
   timer: TimerInputData;
+  image: ImageInputData;
 };
 
 export type SectionProps = z.infer<typeof sectionSchema>;

src/components/inputs/ConfigurableInput.tsx

@@ -1,6 +1,7 @@
 import { InputTypes } from './BaseInputProps';
 import CheckboxInput from './CheckboxInput';
 import CounterInput from './CounterInput';
+import ImageInput from './ImageInput';
 import NumberInput from './NumberInput';
 import RangeInput from './RangeInput';
 import SelectInput from './SelectInput';
@@ -17,6 +18,8 @@ export default function ConfigurableInput(props: ConfigurableInputProps) {
   switch (props.type) {
     case 'text':
       return <StringInput {...props} key={props.code} />;
+    case 'image':
+      return <ImageInput {...props} key={props.code} />;
     case 'select':
       return <SelectInput {...props} key={props.code} />;
     case 'number':

src/components/inputs/ImageInput.tsx

@@ -0,0 +1,107 @@
+import { useEvent } from '@/hooks';
+import React, { useCallback, useEffect } from 'react';
+import { inputSelector, updateValue, useQRScoutState } from '../../store/store';
+import { Card } from '../ui/card';
+import { ImageInputData } from './BaseInputProps';
+import { ConfigurableInputProps } from './ConfigurableInput';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogClose } from '../ui/dialog';
+
+export default function ImageInput(props: ConfigurableInputProps) {
+  const data = useQRScoutState(
+    inputSelector<ImageInputData>(props.section, props.code),
+  );
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+
+  if (!data) {
+    return <div>Invalid input</div>;
+  }
+
+  const [value, setValue] = React.useState(data.defaultValue);
+
+  const resetState = useCallback(
+    ({ force }: { force: boolean }) => {
+      console.log(
+        `resetState ${data.code}`,
+        `force: ${force}`,
+        `behavior: ${data.formResetBehavior}`,
+      );
+      if (force) {
+        setValue(data.defaultValue);
+        return;
+      }
+      if (data.formResetBehavior === 'preserve') {
+        return;
+      }
+      setValue(data.defaultValue);
+    },
+    [data.defaultValue],
+  );
+
+  useEvent('resetFields', resetState);
+
+  useEffect(() => {
+    updateValue(props.code, value);
+  }, [value]);
+
+  if (!data) {
+    return <div>Invalid input</div>;
+  }
+
+  // If no image URL is provided, show a placeholder
+  if (!value) {
+    return (
+      <Card className="flex items-center justify-center p-4 bg-muted text-muted-foreground">
+        No image provided
+      </Card>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <img
+        src={value}
+        alt={data.alt || `${data.title} image`}
+        className={cn(
+          'w-full h-auto object-contain rounded-md cursor-pointer',
+          data.disabled && 'opacity-50',
+        )}
+        style={{
+          width: data.width ? `${data.width}px` : '100%',
+          height: data.height ? `${data.height}px` : 'auto',
+        }}
+        onClick={() => setIsDialogOpen(true)}
+      />
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-[90vw] max-h-[90vh] p-0 overflow-hidden">
+          <div className="relative w-full h-full">
+            <img
+              src={value}
+              alt={data.alt || `${data.title} image`}
+              className="w-full h-full object-contain"
+            />
+            <DialogClose className="absolute right-2 top-2 rounded-full bg-background/80 p-2 hover:bg-background/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+              <span className="sr-only">Close</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </DialogClose>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}