Beanviser Developer Guide

Getting started

Here is a brief outline of tasks involved in measuring your app performance with Beanviser. Beanviser brief outline of tasks

1. Setting up

No installation is required; simply unpackage the downloaded file in the desired location. For download instructions, see Beanviser Installation.

2. Launching Beanviser

To measure app performance, launch Beanviser. Feel free to launch Beanviser before this stage; we have put this step here merely to make the order seem natural.

Operating SystemHow to launch
Linux
  1. Open a terminal on Linux, and go to the directory that contains the extracted Beanviser package.

  2. Type beanviser.sh and press  Enter on the terminal to launch Beanviser.

macOS
  1. Open a terminal on macOS, and go to the directory that contains the extracted Beanviser package.

  2. Type beanviser.sh and press  Enter on the terminal to launch Beanviser.

Windows

On windows, you can use a file explorer or command prompt. Using file explorer:

  1. Open a file explorer on Windows, and go to the directory that contains the extracted Beanviser package.

  2. Double-click beanviser.cmd to launch Beanviser.

Using command prompt:
  1. Open a command prompt on Windows, and go to the directory that contains the extracted Beanviser package.

  2. Type beanviser.cmd and press Enter on the command prompt to launch Beanviser.

3. Connecting Beanviser to target

To measure app performance, launch Beanviser and connect Beanviser to your target. See Connecting to Target Device for more information.

4. Measuring app performance

Now, you are ready to measure your app performance. Click the START button on the relevant tab.

Connecting to target device

To use Beanviser on a target device, you must first add the target device on Beanviser and then connect to that device as follows:

  1. Launch Beanviser.

  2. Click the Configuration button (...) to get a list of available devices. The Configuration button

    Note

    As the emulator is a basic device for testing, Beanviser has the emulator in its device list by default. In case you accidentally delete the emulator from the list, follow the steps given below to add the emulator again.

    Note

    If you already have the targets added by using IDE or ares-setup-device, Beanviser will show you the added targets automatically.

  3. Click the + button and provide the following details of the target device:

    1. Name - Enter a name for the device. Choose a name that can easily identify the device.
    2. Host
      • TV device: IP address of the TV device.
      • Emulator: 127.0.0.1
    3. Port
      • TV device: 9922
      • Emulator: 6622
  4. Username

    • TV device: prisoner
    • Emulator: developer
    Note

    You do not need to enter the Password and PrivateKey.  When you use real TV, enable the Developer Mode before connecting the target.

  5. To connect to a target device, select it from the device list and click the Connect button. The emulator setting items and Connect button

  6. You can now measure the performance of your app. Click the START button on the relevant tab.

Understanding Beanviser user interface

Beanviser provides multiple tabs (marked as Ⓑ in below image) where each tab provides the visualization of specific Beanviser functionality. Learn what features Beanviser provides through the user interface.

Screenshot of Beanviser highlighting main components using alphabets

Control buttons

These buttons are provided on all the tabs except the Compare System Logs tab. These buttons provide functions related to performance measuring.

Control buttons of Beanviser

  1. START -  Starts measuring the target performance metric. This button is enabled only when Beanviser is connected to a target.
  2. STOP - Pauses or temporarily stops measuring. This button is enabled only when measuring has started.
  3. CLEAR - Clears existing visualization charts from the tab. This option is enabled only when measuring is stopped and if there is a chart to be cleared.
  4. SAVE - Saves the measurement data on your computer. To save the data, you must first STOP measuring. The data is saved in the '[Beanviser installation path]/logs' directory. The log file name specifies the timestamp and the log type.
  5. IMPORT - Imports a saved log file from your computer and displays the log. This feature is enabled only when Beanviser is not connected to a target (TV device or emulator).
  6. HISTORY DATA- Shows reports for data older than one hour. You can choose to view either the overall trend of the historical data or select the interval for which to see the reports. Available from Beanviser v1.5.
  7. LIVE MONITORING - Shows live reports for the duration of one hour. Available from Beanviser v1.5.

Use the navigation bar to navigate the chart, zoom into a certain section, and zoom out. The following screenshot shows the navigation bar handles zoomed in from the default position to a certain time frame. Before moving the handles, the graph is showing the data from 05:05:00 to 05:15:00. After moving the handles, the graph is showing the data from 05:09:30 to 05:10:50. In other words, the graph has been zoomed in.

Usage of the navigation bar on Beanviser

Managing custom views

Views used on Beanviser are made as web app type, and Beanviser allows using custom views. You can add a new view created with a default view template that consists of HTML, JavaScript, and CSS files.

Creating a new view

To create a new view:

  1. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  2. Click the Main Menu button The Main Menu button on the top left corner.
  3. Click the Manage Custom Views menu. The Manage Custom Views menu
  4. Enter the details (Name, Chart Type, and Tab title) for the view.
  5. Click the ADD button. Then, the added view is listed on the below table. The detail items and Add button on the Add Custom View dialog
  6. Click the SAVE Button. Once saved, Beanviser is restarted to reflect the change of Tabs UI.
  7. A dialog requests the answer to restart for reflecting the change of Tabs UI. Click YES.

The newly added view is shown as a new tab. You can customize it with editing files of the corresponding view.

Modifying/Removing view

To modify or remove the added view:

  1. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  2. Click the Main Menu button The Main Menu button on the top left corner.
  3. Click the Manage Custom Views menu. The Manage Custom Views menu
  4. Click the Edit or Remove button.
    • If you click the Edit button, you can change the tab title or chart type.
    • If you click the Remove button, the selected view is removed from the table.
  5. Click the SAVE Button. Once saved, Beanviser is restarted to reflect the change of Tabs UI. The Edit, Remove, Save button on the Add Custom Views dialog
  6. A dialog requests the answer to restart for reflecting the change of Tabs UI. Click YES.

Customizing view

As above, Beanviser provides a new view with the default template that contains HTML, JavaScirpt, and CSS files. You can find corresponding files of the created view in viewer/elements.

File

Description

webos-[Specified Name].html

Layout file that contains  Control Buttons and chart area.

webos-[Specified Name].js

Contains source code for drawing chart.

webos-[Specified Name].css

Style sheet file.

Moreover, you can customize Beanviser service, a JavaScript Service, that runs on webOS TV and provides monitoring data to the Beanviser. If you customized Beanviser service, you need to repackage the Beanviser service to apply it. See Repackaging Beanviser Service

Starting background logging

Beanviser works not only in real-time when Beanviser connected to target but also starts background logging. The target device collects logs for the specified duration time. After background logging, you can get the collected log from the target.

To start background logging:

  1. Connect Beanviser to the target.
  2. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  3. Click the Main Menu button The Main Menu button on the top left corner.
  4. Click the Start Logging menu. The Start Logging menu
  5. Enter the duration time (seconds) for logging.
  6. Then, click the START button. The Time input box and START button on the Log duration dialog

Getting log from target

After background logging, you can get the log file from the target to your local storage ([Beanviser installation path]/logs).

To get the log file from the target:

  1. Connect Beanviser to the target.
  2. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  3. Click the Main Menu button The Main Menu button on the top left corner.
  4. Click the Get Log from Target menu. Then, the Info dialog appears and show you where the log file is. The Get Log from Target menu

Repackaging Beanviser service

Beanviser server is a JavaScript service for webOS TV communicated with Beanviser to transfer monitoring data. When Beanviser connects to the target, Beanviser service is installed automatically with a dummy app. If you modified Beanviser service, You should re-package the dummy app and re-install Beanviser service to apply your modification.

To update Beanviser service:

  1. Connect Beanviser to the target.
  2. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  3. Click the Main Menu button The Main Menu button on the top left corner.
  4. Click the (Re)Package menu. Then, Beanviser displays a success message in seconds. The (Re)Package menu

Uninstalling Beanviser service

After you disconnect Beanviser from the target, you can remove Beanviser service from the selected target. See the below steps:

  1. Select the target to uninstall Beanviser service.
  2. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  3. Click the Main Menu button The Main Menu button on the top left corner.
  4. Click the Uninstall menu. Then, Beanviser displays a success message in seconds. The Uninstall menu

Re-ordering views

You can customize the tab order and tab visibility within the Beanviser UI. To customize the tabs:

  1. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  2. Click the Main Menu button The Main Menu button on the top left corner.
  3. Select the Favorite Views menu. The Favorite Views menu As a result, the favorite view customization table is displayed as shown below. The select boxes on the Re-order/hide Views dialog
  4. To change the visibility of the tabs, use the checkboxes.
  5. To change the order of the tabs, use the arrow buttons.

Clearing all views

You can clear the charts in all tabs regardless of whether Beanviser is connected to a device or not. To clear all the charts:

  1. Click the Configuration button The Configuration button on the top left corner. As a result, the device list is displayed.
  2. Click the Main Menu button The Main Menu button on the top left corner.
  3. Select the Clear All Views menu. As a result, the charts on each tab are cleared. The Clear All Views menu
No Headings