DevelopWDTVExtPlugin

Develop - WDTV Ext's Plugin

WDTV Ext allow to add custom plugins/extensions to WDlxTV firmware.

All plugins start with Javascript file.

Filename

To load your plugin, the first Javascript filename needs to ends with ".plugin.js".

Event

Menu Event

Variable

• menuitem
  • name - Menu name
  • title - Menu displayed title
  • image - Path to menu displayed icon
  • focusedImage - Path to selected menu icon
  • visible - Visible or not

Event

YourPlugin.prototype.doBuildMenus = function() { }

YourPlugin.prototype.onMenuSelect = function(menuItem){ }

YourPlugin.prototype.onMenuDeselect = function(menuItem) { }

Page Event

Variable

• page
  • markupFileName - OSD XML Filename
  • extraContent - XML Content to append the original XML File
  • isMediaListPage
  • selectedMedia
    • name
    • folder
    • path
  • setParam(paramName, value)
  • getParam(paramName)

Event

YourPlugin.prototype.onPageCreated = function(page){ }

YourPlugin.prototype.onPageEnter = function(page){ }

YourPlugin.prototype.onPageKey = function(page, key){ }

YourPlugin.prototype.onPageLeave = function(page){ }

YourPlugin.prototype.onPageTimer = function(page){ }

Getting Started...

I will try to explain here how to start developing WDTVExt plugins. I'm by no means a 'programmer' and learned javascript just recently while dicovering WDTVExt. So if I'm doing thins wrong here, please correct me.

What can we do with WDTVExt? (v0.23.5)

• File [1]
  • read and write files (can also be used to execute shell commands and retrieve the output)
• XML [2]
  • parse/manipulate XML content
• Curl
  • fetch web content with curl
• Page Control
  • add extra XML content
  • introduce new @@variables to page
  • read all @@variables from page
  • write all @@variables to page
  • force redraw of page
  • react to keys pressed on remote
• Menu Control
  • add new menu items
  • add new submenu item
  • maniplulate menu and submenu items (title, image, focusedImage, handler, ...)

What can't we do with WDTVExt? (v0.23.5)

• create entire custom pages
• create menu items that link to a folder or file
• create setup pages

Now, let's start creating our first WDTVext plugin: Example.plugin.js

Example Plugin

Basic Plugin Skeleton

Every Plugin strats with some basic plugin constructor:

// all traces both trace and traceln will output in /tmp/dmaosd.log (or /tmp/wdtvext.log)
traceln("Plugin.Example: Start loading Example plugin")

function ExamplePlugin(path) {
    this.rootPath = path;
    traceln("Plugin.Example:   base path is " + this.rootPath);
}

// chain ExamplePlugin with proper inheritance - classical in javascript
ExamplePlugin.prototype = new Plugin();
ExamplePlugin.prototype.constructor = ExamplePlugin;

//
// our later to develop code and functions will
//
// go here, left blank for now
//

// create our plugin with baseParg pointing to current script path
// global variables scriptName, scriptLocation and scriptFullPath are available, no need to do the following
ExamplePlugin.instance = new ExamplePlugin(scriptPath);

// register our plugin with WDTVext
Plugin.registerPlugin(ExamplePlugin.instance);

traceln("Plugin.MediaFolder: End loading MediaFolder plugin");

All occurances of ExamplePlugin are of course to be substituted with the name of your plugin.

Page Control

Page.getParam() / Page.setParam()

This can be used in any function you create to read or write @@variables. The @@variables are referenced without @@!

Page.setParam("exampleVariable", "Hello World!")
var exampleVariable = Page.getParam("exampleVariable")

Page.redraw()

Call this with argument true to force a page redraw:

Page.redraw(true)

onPageCreated

This is called when a new page is created. This is the place where we add our extra content to display some cool output on the screen. So we are going to add two text lines to the menu page (fill this code into the above at the mentioned space).

ExamplePlugin.prototype.onPageCreated =  function(page){
    // villa_home.xml is the menu page we want our text only to show on this page...
    if(page.markupFileName == "villa_home.xml"){
        // check for existing extraContent 
        if(!page.extraContent) {
            page.extraContent = ""
        }
        // now we add our own extra content...
        page.extraContent += <wrapper>
            <text text="@@exampleText" x="50" y="50" w="768" h="20" textcolor="0xffffff" align="left" fontsize="18"/>
            <text text="@@exampleKey" x="50" y="80" w="768" h="20" textcolor="0xffffff" align="left" fontsize="18"/>
        </wrapper>;
        // sometimes it's needed to redraw the page, we will do this just in cast, try if your plugin needs it.
        Page.redraw(true)
    }
}

This creates two lines of white text in the upper left area of the screen, which will display the contents of the two variables @@exampleText and @@exampleKey. Since we haven't set those variables yet, we see... nothing! ;)