How do I implement an HTML5 (Smart Tool) application?

Enhance your Showell account by adding HTML5 (Smart Tool) applications!

➡️What is an HTML5 application?

  • An HTML5 application makes it possible to have interactive and/or animated content within Showell.
    For example: calculators, forms, configurators and 3D graphics.
  • HTML5 is a term used for web apps. It functions with:
    • HTML (markup)
    • CSS (style)
    • JavaScript (interactivity)

➡️How do I add my HTML5 app to Showell?



💡This article will cover:

General Guidelines and preparations

  • When developing a HTML5 app, we recommend to test it with one of our Native Apps (Windows, iOS or Android). HTML5 applications are not supported by Showell's Online App
  • Showell is available in both Landscape (1024x768) and Portrait (768x1024) orientation, we recommend to design your application for both orientations if possible.
    • Showell Presents documents in Full screen mode without the status bar
    • Showell's Navigation bar is 50 pixels from the top and opens on top of the HTML5 Application, therefore we recommend to avoid placing control (touch) buttons in this area.

         



How to set up a Single-file HTML5 application

  • Single-file applications must have a .html file extension
    For Example: contact-form.html
  • You are able to inline HTML/CSS/JavaScript coding into your Single-file HTML5 application
  • You may embed images using Data URIs
  • Gesture recognizers for left/right swipes should not be included in the application as they are already reserved by the Showell navigation itself



How to set up a Multi-file/Archived HTML5 application


Multi-file/Archived applications:

  • Must use a ZIP compression
  • Must have a .html.zip file extension
    For example: 3dmodel.html.zip
  • Must contain a launch file with the following name:
    • index.html
      ➡️ This is recommended if you don't need to implement left/right swipe gestures.
    • OR app.html
      ➡️ This is recommended if you would like to implement left/right swipe gestures. Note that this will have to be activated by a user in Showell by tapping the screen.
  • May naturally contain multiple files
    For example: CSS files, JavaScript files, images
  • May also link to other .html files within the archive, but it is recommended to implement the applications as so called single-page applications.

☝️ If you would like to know more about how to implement HTML5 tools to your account: Please contact Support

Showell