"App" development

Architecture

The general architecture of NeTV's demonstration app system is illustrated above. Please keep in mind that the architecture was created to assist with displaying primarily textual information in a news-crawler fashion. If you have other ambitions for applications, it may be better to create your own infrastructure.

The core of the system is the HTTP event aggregator. It accepts events from both local and remote sources. Local sources would tend to be javascript applications executed and controlled by the browser program running on the NeTV. Remote sources can be any internet source; a smartphone, a laptop, a network-connected arduino -- anything.

Both paths register events into the event aggregator using the TickerEvent API (http://kosagi.com/w/index.php?title=NeTV_web_services#TickerEvent).

The remote path allows you to use your favorite language, API, and libraries to send messages to your TV screen. You could write the event creator in C and run it on the NeTV; or you could write it in python and run it on a computer on the same local network. Or you could write an Android app and have it come from your smartphone. NeTV advertises itself over bonjour, so you may automatically discover the device as part of your application.

The local path constrains you to use the rest of the framework to create apps. The framework is basically javascript + HTML. To get started, there are a few things to keep in mind:

• The docroot for all web pages on netv is at

/www/netvserver

It is always a symlink to either a "failsafe" location, or a "downloaded" location.

• The initial "failsafe" location of the UI control code is in

 /usr/share/netvserver/docroot 

This code is read-only and meant to always be there for you in case you screw something up.

• Once the system has booted and connected to the network, it will "aggressively" attempt to fetch a more recent control panel from github. It fetches the one located at

https://github.com/sutajiokousagi/netv-controlpanel

And places it in

/media/storage/docroot

This directory is read-write. Once the system believes it has a copy of the github code, it will redirect the symlink to the downloaded location.

As a developer, if you modify the /media/storage/docroot location, unfortunately the aggressive fetcher will overwrite your code. So for development, you should do the following:

mkdir /media/storage/devroot
cp -r /usr/share/netvserver/docroot/* /media/storage/devroot/
echo "/media/storage/devroot" > /psp/homepage
/usr/share/netvserver/docroot/scripts/psphomepage.sh

This sequence of commands creates a fresh copy of the the reference code into your own directory, and creates a redirection path inside /psp (this is where configuration data is always stored). The psphomepage.sh script will handle swapping all of the symlinks for you. If you are successful, you should be able to open a browser and ask your NeTV what its new docroot is:

http://192.168.1.yourip/bridge?cmd=getdocroot

Will return

<xml><status>1</status><cmd>GETDOCROOT</cmd><value>/media/storage/devroot</value></xml>

From here, you can start hacking on the local code.

I would recommend starting by looking in the widgets directory (in this case, located at /media/storage/devroot/widgets). There, you will find many example apps, including twitter, facebook, engadget RSS reader, etc.

The key operative line in twitter, for example, can be found inside index.html at around line 95:

  var vBridgePath = "http://" + location.href.split("/")[2] + "/bridge";
  fXMLHttpRequest(vBridgePath, "post", {cmd : "TickerEvent", message : vTweet_message + " -\
  " + vTweet_createdAt, title: vTweet_title, image: vTweet_image}, function(vData) {  });

This, as you can see, does a post of a twitter to localhost with the exact same command syntax as you would a remote device.

To add and remove widgets from the event queue, edit

<path-to-devroot>/widgets/channelinfo.xml

You can create multiple channels and multiple apps inside each channel. An example of the syntax is shown below:

<channel>
        <name>Twitter Demo Channel</name>
        <playmode>default</playmode>
        <widgets>

                <widget>
                        <name>Twitter Widget 1</name>
                        <href>./widgets/twitter_0.3/index.html</href>
                        <thumbnail>./widgets/twitter_0.3/logo.png</thumbnail>
                        <contenttype>application/html</contenttype>
                        <needauth>true</needauth>
                        <parameters>

                        </parameters>
                </widget>
                <widget>
                        <name>Twitter Search Widget 2</name>
			<href>./widgets/twitter0.1/index.html</href>
			<thumbnail>./widgets/twitter0.1/tn.jpg</thumbnail>
			<contenttype>application/html</contenttype>
			<parameters>
                                <parameter value="" name="keyword"/>
			</parameters>
		</widget>
        </widgets>
</channel>