Add comprehensive tooltip support for scanner image split tool

- Create useScannerImageSplitTips with detailed explanations
- Explain use cases: photo album digitisation, flatbed scanning, collage splitting
- Add technical explanations for all 5 parameters with user-friendly language
- Include practical tips for optimal results
- Full GB translation support with British spelling consistency
- Integrate tooltip into main tool component

The tooltip helps users understand:
- What the tool does and when to use it
- How each technical parameter affects processing
- Best practices for scanning and image preparation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Anthony Stirling 2025-09-25 23:23:17 +01:00
parent ce2065aec4
commit d6a3774e9b
3 changed files with 101 additions and 0 deletions

View File

@ -1673,6 +1673,35 @@
"submit": "Extract Image Scans", "submit": "Extract Image Scans",
"error": { "error": {
"failed": "An error occurred while extracting image scans." "failed": "An error occurred while extracting image scans."
},
"tooltip": {
"title": "Extract Individual Photos from Scans",
"overview": {
"title": "What This Tool Does",
"description": "This tool automatically detects and extracts individual photos from scanned documents or images. Perfect for digitising old photo albums, extracting multiple photos from scanner flatbed scans, or splitting composite images."
},
"commonUseCases": "Common Use Cases:",
"useCase1": "Extracting multiple photos from a single flatbed scanner session",
"useCase2": "Splitting collages or composite images into individual photos",
"useCase3": "Digitising photo albums by scanning entire pages then extracting individual photos",
"useCase4": "Processing documents with embedded photos or images",
"settingsExplained": "Settings Explained:",
"angleThresholdTerm": "Angle Threshold (10°)",
"angleThresholdDef": "How much an image needs to be tilted before the tool tries to straighten it. Lower values detect smaller tilts.",
"toleranceTerm": "Tolerance (20)",
"toleranceDef": "How similar background colours need to be to be considered the same. Higher values group more varied colours together.",
"minAreaTerm": "Minimum Area (8000)",
"minAreaDef": "Smallest size (in pixels) for something to be considered a photo. Helps ignore small spots or artefacts.",
"minContourAreaTerm": "Minimum Contour Area (500)",
"minContourAreaDef": "Minimum edge detection size. Helps distinguish actual photo edges from noise or texture.",
"borderSizeTerm": "Border Size (1)",
"borderSizeDef": "Adds padding around detected photos to avoid cutting off edges. Increase if photos are getting cropped too tightly.",
"tips": "Tips for Best Results:",
"tip1": "Ensure good contrast between photos and background",
"tip2": "Place photos with some space between them on the scanner",
"tip3": "Use higher resolution scans for better edge detection",
"tip4": "Clean scanner glass to avoid dust spots being detected as photos",
"tip5": "For difficult images, try adjusting the tolerance and minimum area settings"
} }
}, },
"sign": { "sign": {

View File

@ -0,0 +1,69 @@
import { useTranslation } from 'react-i18next';
import { TooltipContent } from '../../types/tips';
export const useScannerImageSplitTips = (): TooltipContent => {
const { t } = useTranslation();
return {
header: {
title: t('scannerImageSplit.tooltip.title', 'Extract Individual Photos from Scans')
},
tips: [
{
title: t('scannerImageSplit.tooltip.overview.title', 'What This Tool Does'),
description: t('scannerImageSplit.tooltip.overview.description',
'This tool automatically detects and extracts individual photos from scanned documents or images. Perfect for digitising old photo albums, extracting multiple photos from scanner flatbed scans, or splitting composite images.'
)
},
{
title: t('scannerImageSplit.tooltip.commonUseCases', 'Common Use Cases'),
bullets: [
t('scannerImageSplit.tooltip.useCase1', 'Extracting multiple photos from a single flatbed scanner session'),
t('scannerImageSplit.tooltip.useCase2', 'Splitting collages or composite images into individual photos'),
t('scannerImageSplit.tooltip.useCase3', 'Digitising photo albums by scanning entire pages then extracting individual photos'),
t('scannerImageSplit.tooltip.useCase4', 'Processing documents with embedded photos or images')
]
},
{
title: t('scannerImageSplit.tooltip.angleThresholdTerm', 'Angle Threshold (10°)'),
description: t('scannerImageSplit.tooltip.angleThresholdDef',
'How much an image needs to be tilted before the tool tries to straighten it. Lower values detect smaller tilts.'
)
},
{
title: t('scannerImageSplit.tooltip.toleranceTerm', 'Tolerance (20)'),
description: t('scannerImageSplit.tooltip.toleranceDef',
'How similar background colours need to be to be considered the same. Higher values group more varied colours together.'
)
},
{
title: t('scannerImageSplit.tooltip.minAreaTerm', 'Minimum Area (8000)'),
description: t('scannerImageSplit.tooltip.minAreaDef',
'Smallest size (in pixels) for something to be considered a photo. Helps ignore small spots or artefacts.'
)
},
{
title: t('scannerImageSplit.tooltip.minContourAreaTerm', 'Minimum Contour Area (500)'),
description: t('scannerImageSplit.tooltip.minContourAreaDef',
'Minimum edge detection size. Helps distinguish actual photo edges from noise or texture.'
)
},
{
title: t('scannerImageSplit.tooltip.borderSizeTerm', 'Border Size (1)'),
description: t('scannerImageSplit.tooltip.borderSizeDef',
'Adds padding around detected photos to avoid cutting off edges. Increase if photos are getting cropped too tightly.'
)
},
{
title: t('scannerImageSplit.tooltip.tips', 'Tips for Best Results'),
bullets: [
t('scannerImageSplit.tooltip.tip1', 'Ensure good contrast between photos and background'),
t('scannerImageSplit.tooltip.tip2', 'Place photos with some space between them on the scanner'),
t('scannerImageSplit.tooltip.tip3', 'Use higher resolution scans for better edge detection'),
t('scannerImageSplit.tooltip.tip4', 'Clean scanner glass to avoid dust spots being detected as photos'),
t('scannerImageSplit.tooltip.tip5', 'For difficult images, try adjusting the tolerance and minimum area settings')
]
}
]
};
};

View File

@ -5,9 +5,11 @@ import { useScannerImageSplitParameters } from "../hooks/tools/scannerImageSplit
import { useScannerImageSplitOperation } from "../hooks/tools/scannerImageSplit/useScannerImageSplitOperation"; import { useScannerImageSplitOperation } from "../hooks/tools/scannerImageSplit/useScannerImageSplitOperation";
import { useBaseTool } from "../hooks/tools/shared/useBaseTool"; import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
import { BaseToolProps, ToolComponent } from "../types/tool"; import { BaseToolProps, ToolComponent } from "../types/tool";
import { useScannerImageSplitTips } from "../components/tooltips/useScannerImageSplitTips";
const ScannerImageSplit = (props: BaseToolProps) => { const ScannerImageSplit = (props: BaseToolProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const scannerImageSplitTips = useScannerImageSplitTips();
const base = useBaseTool( const base = useBaseTool(
'scannerImageSplit', 'scannerImageSplit',
@ -26,6 +28,7 @@ const ScannerImageSplit = (props: BaseToolProps) => {
title: "Settings", title: "Settings",
isCollapsed: base.settingsCollapsed, isCollapsed: base.settingsCollapsed,
onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined, onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
tooltip: scannerImageSplitTips,
content: ( content: (
<ScannerImageSplitSettings <ScannerImageSplitSettings
parameters={base.params.parameters} parameters={base.params.parameters}