UI creation and clean-up suggestions needed

Hello. I'm attempting to create an interactive eLearning UI similar to the German brake example on the B4W demo page. Each UI button and object on screen needs to be interactive and respond accordingly when other objects are selected.

B4W is still pretty new to me, and I'm not sure if I'm creating the node logic tree correctly; it's getting very complicated and certain functions don't seem to be working correctly due to how I currently have everything set up. I don't know much about HTML, and am hoping there is a cleaner, more consolidated way to create the UI using the node logic tree.

Here is a list of where I'm struggling:

- Getting buttons to toggle scale when selected, and return to normal size when another button or object is selected. (One way I achieved this was using short animations that started and reset, but I removed those functions thinking it would be easier to use the transform object node… but the transform object node doesn't seem to work correctly based on the other logic I have already created.)

- The buttons on the left currently require a second click to activate their functions… i need this to be a single click to switch between buttons/functions.

- I would like only one object anchor, or button pop-up to appear at a time. For example, I have 8 anchors that appear in my scene when the ports are clicked on screen. I would like to set a limit of one appearing at a time… so clicking port 2 would show the anchor for port 2, and hide any other anchors that might already be showing.

- The overall node tree is getting cluttered due to repetition and most likely due to my improper construction… i believe this is causing issues such as the two click interaction described above.

- Trying to create a Mute button that mutes any/all audio without making the audio tracks start over again when un-muted.

The project I've attached is incomplete. Eventually all buttons will need to toggle in size to appear as if they are selected, each button will play it's own audio track, and show it's own pop-up text, image, or video.

Would it be possible to share the logic for the brake example I mentioned earlier (or for a similar project) ?.. I also like the idea of adding interactive quiz questions, drag and drops, etc. in order to make this a complete eLearning experience.

Any help is appreciated. Thanks!

Hello!
German brake example uses HTML buttons and logic is coded with javascript. And for rich functionality it is preferable to use HTML.

Currently audio pause and drag&drops are not supported by Logic Nodes.

I will give you some tips on logic nodes later, because I've found some bugs in the Logic Editor and we should decide whether we do a corrective release.

Thank you for the reply Alexander. I look forward to any tips you can share.

First of all you should update Blend4Web to 17.10.1 (there are some important fixes).

The main tip is to use logic functions (node Define Function and Call Function). It could help to reuse some repeating blocks.

Another tip: if you want some object to be loaded hidden, use Hidden flag on Object tab.

- I would like only one object anchor, or button pop-up to appear at a time. For example, I have 8 anchors that appear in my scene when the ports are clicked on screen. I would like to set a limit of one appearing at a time… so clicking port 2 would show the anchor for port 2, and hide any other anchors that might already be showing.

I've attached a possible solution.

I suggest you to try logic functions and watch the attached example. If you still have troubles, let me know .

Hello

I propose a simpler solution, it is about making the anchors children of an empty parent, with the Define Function node we will hide the parent and the children whenever there is a click and we will only see the selected anchors at that moment.
I attach an example.