Pepper's tablet has Android 4.0.4, which runs a web browser. Probably it seems to be the default browser for Android, and JavaScript etc. (although it is 4.0.4, so it may be difficult) works. However, even if you use the default box etc., the log surroundings are a little poor as it is, and development seems to be difficult. That's why I tried some, so that memo.

The trial code for this time can be found at https://github.com/yacchin1205/pepper-tablet.

Define tablet content in your application

First, let's briefly summarize how to define resources for tablets within your application. Basically, as in Take an image with Pepper and display it on your tablet.

Create a html folder in your application and put ʻindex.html` and other necessary resources in it.
Place the Show App box in the tablet box library. Basically, only the following boxes are OK

However, with the version of Choregraphe distributed at Pepper TechFes 2014, there is a problem with the path configuration that the tablet related box assumes, so Look at the implementation of the Show Image box -Akihabara / items / 87def938b6553ee9c1e9 #% E8% A3% 9C% E8% B6% B3show-image% E3% 83% 9C% E3% 83% 83% E3% 82% AF% E3% 82% B9% E3% 81% AE% E5% AE% 9F% E8% A3% 85% E3% 82% 92% E3% 81% BF% E3% 81% A6% E3% 81% BF% E3% 82% 8B) It is necessary to modify the processing part.

You should now see the content defined in ʻindex.html` on your tablet. Displaying the content itself is relatively easy.

The atmosphere of the html directory in your application is similar to the public_html of the user's home directory being visible via a web server. It seems that the local web server in Pepper can be referenced from the browser of the tablet.

Get messages that occur in the tablet browser

By default, even if an error occurs in JavaScript, it seems that nothing is said on the Choregraphe log, so even if an error occurs, I do not know at all. This makes development difficult, so you'll want to log the error or output the status with console.log.

In addition, this time I tried to display the following contents on the tablet and tested it. There is a button that intentionally raises an error and a button that calls console.log, as shown below.

Well, I want something like Chrome Developer Tools like the screenshot, but anyway, just the log is output ...

Get in memory event

For the time being, considering the architecture of NAOqi, if you look at the API docs while wondering if logs will appear as memory events, you will find a lot of them.

Event: "ALTabletService/message" callback(std::string eventName, std::string subscriberIdentifier)

Raised when message occurs.

While monitoring ʻALTabletService / message` with a memory watcher, if you intentionally make an error in the content, it looks like this.

Umm ...!

Well, it's a little hard to check if it's only a memory watcher (probably only the last output log is displayed). Humanity is what makes you want to see it in the log viewer at least.

Stream to log

When I was looking at the API docs, I found ʻALTabletService :: onConsoleMessage (message)`. It seems that the touch event acquisition of the tablet box library is done by this Signals mechanism, and processing with this signal seems to be the AL TabletService API style. So, I modified the Show App box as follows.

You can find the modified version of the code in the webview-console project on github where I first wrote it.

Add consoleMessageCallback method

Create a method to receive the console message. Add the following code to the end of the Python script in the Show App box.

    def consoleMessageCallback(self, message):
        self.logger.info("[ConsoleMessage] %s" % message)

When I receive the message, I use self.logger to output the log.

Modify onInput_onStart method

Add the following code before executing tabletService.loadApplication.

                #Start monitoring the console
                if not self.consoleConnectId:
                    self.consoleConnectId = tabletService.onConsoleMessage.connect(self.consoleMessageCallback)

You can now set consoleMessageCallback to respond to ʻonConsoleMessage`.

Modify onLoad and onUnload methods

Unregister the handler when unloading. Add the following code to the ʻonUnload` method.

        #End console monitoring
        if self.consoleConnectId:
            try:
                self._getTabletService().onConsoleMessage.disconnect(self.consoleConnectId)
                self.consoleConnectId = None
            except Exception as e:
                self.logger.error(e)

Also, initialize the members when loading. Add the following code to the ʻonLoad` method.

        self.consoleConnectId = None

move

If you run the project with this modification, you can see the log in the log viewer. If an error occurs, it looks like this.

[INFO ] behavior.box :consoleMessageCallback:80 _Behavior__lastUploadedChoregrapheBehaviorbehavior_1143658480__root__ShowApp_2: [ConsoleMessage] Uncaught TypeError: Cannot call method 'call' of null

I forgot to record it, but I can see the output of console.log. It's not enough, but I think this will make debugging a lot easier. Expected. I want to play with how much it works with JavaScript on Pepper tablets ...

[JAVA] Log message processing on Pepper tablets