Reference code for customized zapper

This article goes through how an Digital Signage SDK customer can take the Amino zapper reference code and customize it for their needs.

Amino Zapper Code Structure

The Amino zapper code has as main page zapper.html that imports JS and CSS code and has the following structure:

• Zapper
  • CSS
    
    • channel_list.css
    • track_list.css
    • zapper.css
  • JS
    
    • app.js
    • config.js
    • lang.js
    • lineup.js
    • UI_channel_list.js
    • UI_dtv.js
    • UI_track_list.js
    • util.js
  • zapper.html

To customize and understand how the zapper works, check the following points:

• Customize the look and feel, should be modified the following CSS files:
  
  • CSS
    • channel_list.css
    • track_list.css
    • zapper.css

• Learn the JS API controlling STB/Player, should check the following javascript files:
  
  • JS
    
    • app.js

More information about the remote control key event, player and video window please see link H200 Javascript documentation

• To understand the logic of UI widgets, should check the following javascript files:
  
  • JS
    • UI_channel_list.js
    • UI_dtv.js
    • UI_track_list.js

The reference code can be downloaded in Download Area Digital Signage SDK  Zapper Sample Code

The zapper sample code is also attached to the article.