HTML 5 support in Media Editor - VRED Demo Scene

Autodesk Support

May 18, 2017


Dear VRED Users,

we would like to share with you an Autodesk VRED2018 Pro scene that contains several examples showing the possibility of the NEW Media Editor we have introduced in the latest release. We have created this demo scene to help and share best practices with our customers. 

In the download section, you can find a demo scene that contains several items with different HTML5 examples assigned. Also, a Python script that can be used in the Script Editor if you want to experience this demo in VR with HTC VIVE controller. 

Activate the VRED Web Server (Port:8888) in the Preferences to make sure the two-way-communication between VRED2018 Pro and HTML5 content is working correctly. Edit > Preferences > WebInterface > Enable Web Server

Example - Music Player:

Communication from VRED2018 Professional to HTML5

  • The MP3 Player User Interface is designed with multiple html pages for different apps. All pages are stored next to the .vpb file in the ADSK_MP3_Player windows folder and use the same CSS Stylesheet and JavaScript. The applications are designed for Google Chrome Browser.
  • The Music Player "Home Button" in the demo scene is triggered with a Touch Sensor that connects the "Home Button" geometry to a Variant Set that executes a simple Python command
  • With the Python command sendToWebEngine(name, event, data) it is possible to send an custom event ("VRED_HOME_Btn") to a specific WebEngine in the VRED Media Editor

     

  • The Music Player example is using a JavaScript DOM EventListener in the .js file that listening to "VRED_Home_Btn" event and executes a function that resets the page to the main index.html

     

Communication from HTML5 to VRED

  • A mouse click on the "Bluetooth App" icon in the index.html triggers a function in the JavaScript
  • This function creates a "dummy" IMG HTML5 element and sends an URL to the localhost:8888 afterwards
  • Example triggers the "IconAnim" variant in the VSet module

     

Example - Calculator:

  • It is also possible to write HTML5 code directly in the Media Editor. Click on the  icon to open the HTML Editor.
  • CSS styles and the Java code must be integrated in the HTML5 page at the correlated <style></style> and <script></script> section

Example - Alarm Clock:

  • This example is explaining how to use the background-color alpha channel property for transparent content
  • Open the HTML Editor for the WebEngine_SystemClock in the Media Editor using the  icon
  • In the style section, the background-color is set with a value of 0 for the alpha channel (line 35)

     

  • Also, the alpha channel in the diffuse slot of the corresponding Display_System_Clock Plastic Material must be activated

Example - Tablet:

  • It also possible to create a WebEngine in the Media Editor and use an URL like www.autodesk.com
  • Note that web browser specific elements like Reload Page, History or Favorites will not be displayed
  • In our Tablet example we have created the web browser specific elements in HTML5 and embedded the A360 webpage using an IFrame tag

     

Example - Graphic Board:

  • This example is done very similar to the calculator
  • All code and SVG icons are embedded in the HTML Editor of the Media Editor

 

- Sincerely, your VRED Product Development Team -

 

License:

Portions related to OpenStreetMap are © OpenStreetMap contributors and licensed under the Open Database License, available at www.openstreetmap.org/copyright or www.opendatacommons.org/licenses/odblThis demo is using map tiles from osm.org which are licensed under a Creative Commons Attribution 2.0 License, available at https://creativecommons.org/licenses/by/2.0/. The associated website is www.openstreetmap.org/copyright.

This demo also contains music that is generated with http://www.fakemusicgenerator.com/

Please note:

These sample scenes are not supported under any Autodesk standard support program or service. The sample scenes are provided without warranty of any kind. Autodesk disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scenes and documentation remains with you.



Was this information helpful?


Need help? Ask the Autodesk Assistant!

The Assistant can help you find answers or contact an agent.


What level of support do you have?

Different subscription plans provide distinct categories of support. Find out the level of support for your plan.

View levels of support