Understanding the Beanviser User Interface

Version added 2016-10-09 22:23:00| Modified 22-Jun-2017

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

beanviser-mainmenu-intro.jpg

 

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.

beanviser-control-buttons.jpg

  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 in 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).

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.

 

beanviser-navigationbar.jpg

Managing Custom Views

Views used on Beanviser are made as web app type, and Beanviser allows using custom views. You can add new view created with 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 configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  2. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  3. Click the Manage Custom Views.
    beanviser-select-managecustomviews.png
  4. Enter the details (Name, Chart Type, and Tab title) for the view.
  5. Click the ADD button. Then, the added view will be listed below table.
    beanviser-add-customview.png
  6. Click the SAVE Button. Once saved, Beanviser will be restarted to reflect change of Tabs UI.
  7.  A dialog requests answer to restart for reflecting change of Tabs UI. Click YES.

The newly added view will be shown as 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 configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  2. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  3. Click the Manage Custom Views.
    beanviser-select-managecustomviews.png
  4. Click the Edit or Remove button.
    • If you click the Edit button, you can change tab title or chart type.
    • If you click the Remove button, the selected view will be removed from the table.
  5. Click the SAVE Button. Once saved, Beanviser will be restarted to reflect change of Tabs UI.
    beanviser-modifydelete-customview.png
  6.  A dialog requests answer to restart for reflecting 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 sourcode 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 will collect 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 configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  3. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  4. Click the Start Logging button.
    beanviser-select-startlogging.png
  5. Enter the duration time (seconds) for logging.
  6. Then, click START button.
    beanviser-enter-logduration.png

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 configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  3. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  4. Click the Get Log from Target button. Then, Info diaglog will appear and show you where the log file is.
    beanviser-select-getlogfromtarget.png

Repackaging Beanviser Service

Beanviser server is a JavaScript service for weOS TV communicate with Beanviser to transfer monitoring data. When Beanviser connects to the target, Beanviser service is installed automatically with dummy app. If you modified Beanviser service, You should re-package 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 configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  3. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  4. Click the (Re)Package button. Then, Beanviser will display success message in seconds.
    beanviser-select-repackage.png

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 configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  3. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  4. Click the Uninstall button. Then, Beanviser will display success message in seconds.
    beanviser-select-uninstall.png

Re-ordering Views

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

  1. Click the Configuration button configuration_button.jpg on the top left corner. As the result, the device list will be displayed. 
  2. Click the Main Menu button mainmenubutton_20.jpg on the top left corner.
  3. Select the Favorite Views menu.
    beanviser-select-reorderviews.png
    As the result, the favorite view customization table will be displayed as shown below.
    beanviser-reorder-views.png
  4. To change the visibility of  the tabs, use the check boxes.
  5. To change the order of the tabs, use the arrow buttons.

Clearing All Views

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

  1. Click the Configuration button configuration_button.jpg on the top left corner. As the result, the device list will be displayed.
  2. Click the Main Menu button beanviser-mainmenu-clearallview.jpg on the top left corner.
  3. Select the Clear All Views menu. As the result, the charts on each tab will be cleared.
    beanviser-select-clearallviews.png
Navigation