B4J Tutorial [BANanoZUI] Creating a Zoomable User Interface for a SmartHome Website / WebApp



Playlist on YouTube

The Source code for this is in the Demos\7. SmartHome folder

1. We created the library.
2. We also played around how the library works using BANano LiveSwapping
3. We will now create a SmartHome ZUI using BANanoZUI.

During the course of this 7 step tutorial and in completing this library development and success, we take a deep dive in terms of how one can create a ZUI for a smart home. One can use their imagination about other things.

The home page of this application will propose a feature like this: Fortunately we Live Swapping, we will create this app together along. It encompasses everything we learned especially from the LiveSwapping tutorial we did. So to best arm yourself with some know how, head over to the link in #2 above and explore the library. Its small and fast and it does exactly what its meant to do.

This library has a base of the VueJS framework and is based on the ZircleUI framework.

Last edited:


Licensed User
Longtime User
Step 7: Creating the Family Slide

Finally, we are done with the tutorial. Basically, the library has two things that one uses most. 1 the z view and then z-spots.

Z spots work like buttons / links to other pages and they need to be inside Z views. Both you can style anyway you want. We saw that you can also embed images, use UL and LI elements, H1, spans etc. These of couse use slot extensions.

Use your imagination, create something beautiful and amazing.