Understanding the Beanviser User Interface

Beanviser provides multiple tabs (marked as Ⓑ in below image) where each tab provides the visualization of specific Beanviser functionality.

Screenshot of Beanviser highlighting main components using alphabets

Learn what features Beanviser provides through the user interface:

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 Packaging 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). Beanviser can load this file with COMPARE SYSTEM LOGS view.

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

Navigation