dmvs_html: what a car HMI page needs - listeners, inline SVG, images

[JohnAmadis]

Summary

This adds what a second real page needed: a 480×272 car HMI in Tailwind, with tabs, a speedometer gauge, a map with a route, and a music player with album covers. Its layout comes out close to Chrome's. Tab navigation (with the crossfade) and the mini-player opening the player work on the STM32F746G-DISCO.

Scripts

• Load-time handlers: addEventListener('click', …) and el.onclick = … set up while the page loads. Arrow and function expressions close over their scope.
• Element lookup: querySelector() / querySelectorAll() (new css_select), forEach() unrolled at conversion, getAttribute().
• Running handlers: el.click() runs an element's handlers inline. String concatenation works.
• Combined class changes: several class changes of one element in one handler become one look of it (MOD_CLASSES "+a -b", a <id>_look variable).
• Fades: visibility: hidden fades as opacity 0.

Layout and style

• tailwind.config → theme.extend.fontFamily (Inter as font-sans).
• An absolutely positioned flex child gets its static position from justify-content / align-items.
• content: '' makes a ::before / ::after box (the nav indicator).

Images

• <img>: object-fit (cover, contain, fill with the aspect kept, none, scale-down) and object-position.
• Backgrounds: background-image: url() under its gradient layers, with background-size and background-position. These also work in the background shorthand. Tailwind's bg-cover, bg-center, object-cover and similar are mapped.
• Blur: filter: blur() on an element blurs its image. todmvs/todmvi make the blurred image once, at conversion.
• Unmapped images: an image URL with no file mapped to it is now reported.
• Inline <svg>: it is now a replaced element. Its subtree is written into an SVG file of its box's size ($TMPDIR/<page>-svg<index>.svg), with the viewBox and SVG's camelCase names kept and currentColor resolved. It is drawn as an image, and dmimg_svg rasterizes it.

Depends on

• dmvsi feature/image-size: dmvsi_image_t gets width / height / blur and the DMVSI_IMAGE_* placement flags.
• todmvs feature/image-sizes, todmvi feature/blur, dmod feature/image-blur-svg, dmimg_svg feature/decoder, for the whole path to the board.

Testing

• Unit tests: test_dmvs_html passes 8/8. Two steps are new:
  • dmvs_html_draws_svg_and_images: the SVG file and its attributes, object-fit: cover, background: url() right bottom / contain with blur();
  • dmvs_html_converts_listeners: querySelectorAll + forEach + addEventListener.
• Regression: the dmodOS fixture converts to a byte-identical .dmvs, compared with main.
• On the board: the car HMI view shows the speedometer arc and the album covers.

Known gaps

• Text that scripts write (clock, speed), timers, and the playlist generated in JS are not converted.
• classList.replace is not converted.
• Rounded clipping of images is not drawn.
• Progressive JPEG is not supported by dmimg_jpeg, so such images have to be baseline.

🤖 Generated with Claude Code