Y7 Aspect Ratio Picker

Aspect Ratio Picker<div style="font-size: 0.8em"><div id="Y7_shortdesc" style="margin-bottom: 15px;">Interactive 2D canvas for picking image width and height by dragging.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">Click or drag anywhere in the canvas to set width (X axis, left→right) and height (Y axis, bottom→top).</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">A filled rectangle shows the selected proportions; the dot marks the current position.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">The simplified aspect ratio (e.g. 16:9, 4:3, 1:1) is displayed at the bottom of the canvas.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">Current width and height values are shown in the right panel. Double-click either value to type a number directly.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">Click the Swap button (below the height value) to swap width and height (portrait ↔ landscape).</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">Snapping to step increments is on by default. Hold Shift while dragging to temporarily disable snapping.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">Node properties (right-click → Properties):</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">valueX</code> / <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">valueY</code>: Current width and height.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">minX</code> / <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">maxX</code> / <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">minY</code> / <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">maxY</code>: Range for each axis.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">stepX</code> / <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">stepY</code>: Snap increment for each axis.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">snap</code>: Whether dragging snaps to step increments by default.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">dots</code>: Show grid dots at each step position.</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">Outputs:</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">width</code>: Selected width in pixels (INT).</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 20px; font-size: 12px;">- <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">height</code>: Selected height in pixels (INT).</div></div><div style="font-size: 0.8em"><div style="margin-bottom: 8px; margin-left: 0px; font-size: 12px;">The right panel also shows the total megapixel count (e.g. <code style="border: 1px solid #666; border-radius: 3px; padding: 0px 1px; font-family: monospace; display: inline-block;">1.0MP</code> at 1024×1024).</div></div>