Skip to content

How To: Adding a custom scan again button to my awe app

awe.media edited this page Mar 15, 2019 · 1 revision

Adding a custom scan again button to my awe app

Some awe designers want to add a persistent button to their awe app that will take their users directly to the Scan UI.

You can add a Scan button as an object in your scene

In the object editor UI:

  • select the object you want as your Scan button
  • click on the ... button
  • select Actions then select Custom script

Then in the Javascript area add this code.

util.setURLData(application.current_view.name+"/scan");

Now go to the live preview and tap or click on that object and you will be taken to the Scan UI. See the note below about What if not all my views are image based?

Or you can add a Scan button as your HTML overlay image

Click on the orange circle in the bottom left corner (the doodat), then select Settings, then select the Custom code section. Then add the code below inside the default go() function defined in the Javascript area. This code will add an onclick handler to your HTML overlay image (defined under the Custom branding section of your Settings area). Please make sure that the On select option of your HTML overlay image is set to Do nothing to avoid any conflicts.

function setup_overlay_image() {
  if (!overlay_image) {
    overlay_image = document.getElementById('user_overlay_image')
  }
  if (overlay_image) {
    overlay_image.addEventListener('click', function(){
      util.setURLData(application.current_view.name+"/scan");
    })
  }
}

What if not all my views are image based?

If this is the case then not all your views will support the /scan sub-path. So links on these non-image views that point to application.current_view.name+"/scan" will break. To avoid this just replace the application.current_view.name part with a pre-defined image view name. e.g.

Change this

util.setURLData(application.current_view.name+"/scan");

Into this

util.setURLData("/your_default_image_view_name_goes_here/scan");

NOTE: Please make sure you include the / in front of your_default_image_view_name_goes_here

Where is the default go() function?

When you first open the Custom code section of your app's Settings section you'll see some default Javascript. This shows you how to setup a simple function that is called once your app has fully loaded. By putting your code inside here you are ensuring it is only run after all the relevant parts of your awe app are fully setup. This default function is named go(). Here's the code again in case you have removed it.

if (awe_boot._state == 'ready') { go(); } else { awe_boot.subscribe_to_state('ready', go); }
function go() {
  // put your code here
}