Forum

Webplayer Control panel customization: possible?

Hi all,I'm very new to Blend4web, but I really appreciate this tool, and the results are fantastic.So I've purchased the Blend4Web SDK Pro version to have full access to all functionalities.

We are in mind to use the Webplayer to show our 3D contents, but we want to customize the control panel of the webplayer itself, leaving all the buttons related to social network connections (Facebook, Twitter, etc.), and also adding a brand new control panel to add some functionalities and interactions with the 3D model.My questions are:

1. Is it possible to customize the control panel?2. is ti possible to add a new customized control panel?3. is it possible to interact with my 3D content via HTML5 buttons?4. is it possible to obtain a HTML5 output without the embedded 2D control panel buttons and external CSS and js files more understandable and friendly?

1. Is it possible to customize the control panel?2. is ti possible to add a new customized control panel?

You need to modify two files under the sdk/apps_dev/webplayer folder:1) In the webplayer.css you can change any image as required. If you want to encode images to Base64 strings, you can use a service like this: https://www.base64-image.de/

2) In the webplayer_dev.html file you can add/remove buttons. They are in the div tag with "buttons_container" id:

<divid="buttons_container">
<divid="opened_button"class="control_panel_button"></div>
<divid="hor_button_section">
HERE YOU CAN PUT THE DESCRIPTION OF THE BUTTONS
</div>
</div>

After you've made some changes to these two files you can compile webplayer with our new project manager with just one click.

3. is it possible to interact with my 3D content via HTML5 buttons?

Yes, it is possible. We have several tutorials, which use such kind of interactions. For example this or this. In both these tutorials controls are just simple html elements.

4. is it possible to obtain a HTML5 output without the embedded 2D control panel buttons and external CSS and js files more understandable and friendly?

If I understood you correctly, you want to be able to change some page-elements without any coding, with only Blender's interface. For now, it is not possible, but our logic nodes constantly receive new abilities and this feature can also be supported in future.

Thank you for your answers.A little issue on your "index.html" page.I tried to launch Project Manager under "tools" section, but the link is incorrect.It searches a path like "../projects/" and so it reports an error "page not found".