SVGs in custom widgets, how to implement them

Yes if the component name is not one of the f7 or oh specific component names then it will just create a tag of that name. If you were basing your svg off of this:

Then that was written before the new arbitrary tag feature so it uses the old f7-row trick.

This feature is covered directly in the docs here:

There’s a more detailed, complex recent example here:

And here’s an example of an svg based widget with some more advanced svg features:

It is generally not recommended to edit the jsondb directly, but if you find yourself in a position where you have to, then you must stop OH to make the edits. The UI will not detect or respect external changes made to the jsondb documents while it is running and your changes will just be over-written the first time something else in that file changes. As for introducing errors into the jsondb, it may depend on the exact file, but I have seen jsondb error render the entire UI unable to function.

Because it is a very new feature it is only in the latest version of the docs right now:

In the 3D widget thread linked above there is also a link to the main PR that implemented the feature.

I’m sure when the release comes out later today there will also be a description of it in the release announcement blog.

1 Like