I’m looking to integrate an interactive tooth chart into WeWeb, where users can click on individual teeth to perform actions. I found this SVG-based example on CodePen: Tooth Chart CodePen.
The functionality I need is as follows:
Users should first select a tooth, then choose a procedure.
Depending on the selected procedure, a visual indicator should be applied to the tooth—either a circle inside the tooth or a dotted border around it.
I may also need to add arches for dentures.
Would creating a custom component be the only way to implement this in WeWeb, or are there any alternative approaches using built-in features?
I’d love to hear any suggestions or best practices!
There might be a better way of doing it, but If I had to do it I would just wrap it in a div with a set height and width, then I’d have each different tooth as an svg with position set to “absolute” so you could fine tune the layout.
You indeed can add event listeners to individual SVG paths, but it requires at the very least some code inside the editor. Ideally you’d wrap this in a reusable component, or just go straight for custom coded.
The issue with absolute positioning is that it’s hard to make it responsive. You’d need to mantain the aspect ratio of the wrapper, because otherwise any change would probably make it act funky.
A custom coded component for this could take like 2-3 hours from my experience (I built plenty). Unless you want more advanced features.
