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

Ola

Download

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.

 

[Mashiane]

Step 1: Creating the Home Screen

 

[Mashiane]

Step 2: Creating the Settings Screen

 

[Mashiane]

Step 3: Creating the Devices Screen

 

[Mashiane]

Step 4: Creating Rooms

 

[Mashiane]

Step 5: Creating Home Status Logs

 

[Mashiane]

Step 6: Creating Scenes

 

[Mashiane]

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.

 

[Mashiane]

Bonus Material

BANanoZUI - Creating the Living Room, Turning Devices On Off and Playing TV