Create and Add Smart Tools/Web Applications

Enhance your Showell account by adding Smart Tool applications!

Smart Tools: Introduction and getting started

A Smart Tool allows you to incorporate interactive and animated content into Showell. This can include calculators, forms, configurators, and 3D graphics. Smart Tools utilize HTML for markup, CSS for styling, and JavaScript for interactivity.

Getting Started

To add Smart Tools to Showell, you simply upload them as any other file.

Showell is available in both Landscape (1024x768) and Portrait (768x1024) orientations. It is recommended to design your application to be compatible with both orientations if possible.

When presenting documents in Showell, they are displayed in full screen mode without the status bar. The Navigation bar in Showell is located 50 pixels from the top and opens on top of the Smart Tool. Therefore, it is advisable to avoid placing control buttons or touch buttons in this area.

         

 

---

How to set up a Single-file Smart Tool (Web App)

• To create a single-file Smart Tool, the file must have a .html extension. For example, you could name it contact-form.html
• You are able to inline HTML/CSS/JavaScript coding into your Single-file Smart Tool
• You may embed images using Data URIs
• Avoid including gesture recognizers for left/right swipes in your application as Showell's navigation system already reserves these gestures.

 

---

How to set up a Multi-file/Archived Smart Tool (Web App)

(Simple example of an archived Smart Tool)

Archive the Smart Tool (Web App)

This must be compressed/Archived using ZIP and have a .zip file extension. For example, you can name it 3dmodel.zip

The Smart Tool must contain:

A launch file:

• The launch file must have one of the following names: index.html or app.html. It is recommended to use app.html if you want to enable left/right swipe gestures. Please note that these gestures need to be activated by the user in Showell by tapping the screen.
• The launch file should have relative paths to the source file.
  For example: src="./js/example.js"

A showell.json file:

• Click here to download a showell.json file.
• This JSON files enables Apache Cordova support:

{
     "cordova_support": true
}

• Important: Showell App for Windows works with WebView2, if your form does not function due to this, add "useWebview2": false to the showell.json file. For example:

{
     "cordova_support": true
     "useWebview2": false
}

• You can use a JSON validator to discover potential errors if you've made any changes to the file. Such as the JSONLint Validator

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.