Shopify Theme Work — 2026-06-28¶

Summary¶

Extracted connector wireframes from the LEMO Solutions Selection Guide PDF as reference for SVG line drawings. Created initial SVGs (user didn't like v1). Background-swapped a stylised plug image and attempted to convert a cable socket photo to matching style. Discussed SVG editors — Inkscape install blocked by sudo, user will try Canva.

Session Log¶

Solutions Selection Guide PDF — Connector Wireframes¶

Extracted pages 6-7 from /home/dini/Downloads/work/Solutions_Selection_Guide_web.pdf to view connector illustrations. The PDF contains small wireframe-style connector profiles for each series (B, K, T, S, E, P on page 6). These are the official LEMO line illustrations.

SVG Connector Images — Version 1¶

Created three SVG line drawings: - connector-panel-socket.svg - connector-cable-plug.svg - connector-cable-socket.svg

Pushed to theme assets. User didn't like v1 — too rough.

Stylised Plug Image — Background Swap¶

File: 2026-06-28_08-24.png (404×470) - Had grey background ~rgb(182,187,189) - Replaced with LEMO page background #f4f6f9 using -fuzz 15% + floodfill - Saved as 2026-06-28_08-24-lemo-bg.png - User liked the style — saved copy to theme assets as "REDEL P series plug.png"

P Series Cable Socket — Photo to Line Art Attempt¶

File: pr.webp (180×120, mostly white bg, small subject) - Tried multiple ImageMagick approaches: - Edge detection (v1c, v3c) — lines were sketchy/thin - Charcoal effect — clean but not line-art - Sketch effect — hatched style - Canny edge detection — incomplete outline - Morphology dilation (solid-1 through solid-4) — thicker lines but still poor - Root cause: source image too small and noisy for auto-trace - Result: all attempts came out as white blocks or sketchy lines - User will try Canva to create/trace the vector

SVG Editors & Workflow Discussion¶

Recommended Inkscape (free, native Linux) vs Figma (browser) vs manual SVG code
Tried sudo pacman -S inkscape — blocked by sudo password (non-interactive session)
User decided to try Canva for creating connector SVGs
Explained auto-trace vs manual path tracing in Inkscape

Key Learnings¶

Auto-trace (both ImageMagick and Inkscape's Trace Bitmap) struggles with small connector photos
Manual tracing or hand-coded SVG paths produce much cleaner results for product illustrations
ImageMagick -morphology Close can join broken edge-detection lines; Dilate thickens them
For store-quality connector images, vector tracing from official LEMO PDF wireframes is better than processing photos

Files Created/Modified¶

New files: - /home/dini/Downloads/work/dawn-theme/assets/REDEL P series plug.png — stylised plug image with LEMO bg

Work folder outputs (all in /home/dini/Downloads/work/): - 2026-06-28_08-24-lemo-bg.png — original stylised plug with #f4f6f9 bg - pr-lemo-bg.png — webp with white bg → #f4f6f9 (first pass) - pr-line-v1c.png — best edge detection result (but sketchy) - pr-line-v3c.png — posterize + edge variant - pr-solid-1.png through pr-solid-4.png — thickened line attempts - pr-test-*.png (7 variants) — charcoal, sketch, canny, threshold experiments

Next Steps¶

User creating PR cable socket SVG in Canva
Once SVG is ready, save to theme assets and style to match plug image
Continue refining connector illustrations for other series as needed

[[JBS LEMO Shopify Storefront]]
[[Things to Fix - LEMO Store]]