The PxPlus Dashboard

Overview

The Dashboard allows application developers to provide their end users with a simple means to view multiple source of information at the same time. Multiple web pages or sources can be displayed concurrently in an independent frame that can be both resized or placed wherever you want on the screen. Virtually any web site or web based display such as charts, graphs or tabular information can be used within the Dashboard.

Settings for dashboard are maintained unique to the user and held within the browser allowing each user to customize his/her layout and contents.

Running the Dashboard

To launch the dashboard the user will navigate to the dashboard URL which defaults to:

> http://your.website.com/services/dashboard

If it is the first time this user navigates to the dashboard (or they have cleared their browser settings) the default layout will be presented. This default setting is defined by a control file on the server and can be easily adapted to meet the needs of any site.

Once the dashboard is display the user can drag any of the panels around the screen using the caption line at the top of each panel. Panels can be resized by dragging the lower right corner of any panel.

Changes to the size/position of the panels is maintained automatically by the browser so that once changed when the user returns to the dashboard, the panels will be redrawn in the same location.

Two icons are provided in the top right corner of the Dashboard along with two additional icons on the top right corner of each panel.

Dashboard Settings

The Gear icon in the top right corner of the display will bring up the dashboard maintenance panel.

This panel has a check box that controls the "Auto Arrange" option for the dashboard. When Auto-Arrange is enabled all the panels will be arranged in order starting from the top left and proceeding left-to-right and top-to-bottom. Dragging a panel will only change the order of the panels and the Dashboard itself will determine where to display it. When Auto-Arrange is off, the user can place panels anywhere on the dashboard.

Also on the Dashboard Maintenance panel is a Reset button that, when pressed, will allow the user to abandon all their customized settings and revert back to the original default layout and panels.

The Plus Sign icon just below the gear in the top right corner allows the user to add panels. When a panel is added it will be added to the end of the display if Auto-Arrange is enabled or at the top-right corner if Auto-Arrange is not active.

Panel Settings

On the right side of the caption line for all the panels displayed are two icons. Clicking the first Icon (left/right circular pointing arrows) will refresh the contents of the panel. Clicking the Gear icon on the far right of the caption brings up the panel settings.

In the panel settings the user can define/change the caption title line contents, the URL of the web page to display, a refresh interval (in minutes) and the caption color. If the dashboard setup included a list of predefined web pages, these can be selected from a drop down list at the top of the settings display.

When specifying a URL always include the http:// (or https://) in front of the URL if the page is from another domain. If the page is from the domain, make sure you start the URL with a leading slash. Failure to do so may result in the system not finding the desired web page.

Once changes have been you need to press the SAVE button to have them take effect. If you with to simply close the Panel settings display, click the gear icon on the Caption line again to abandon the settings.

Also on the settings panel, in the bottom left corner is another refresh icon and a trash can icon that can be used to delete the panel.

Web Site Restrictions

While virtually all web sites and web data can be displayed in the dashboard, some sites such as Google prevent their site from being displayed inside another web page. In this case the Dashboard will not be able to display these sites.

If you wish you can verify why a web site is not displayed by checking the browser error log. Generally you will see something like:

> Refused to display 'https://www.google.com/?gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

This basically is saying that Google has decided that ONLY pages from Google can display the requested page inside another web page.

Dashboard Defaults

The PxPlus Dashboard allows the developer to pre-define the default layout and panels. This is done using a JSON file (dashboard.json) on the server. This file contains the information such as panel header, restrictions, predefined sites, and the default panels to display with their title, URL, color, position and size as follows:

Element | Value | Description
"title" | "Text" | Title for the dashboard page itself
"autoArrange" | true | false | Default setting for Auto-Arrange
"restrict" | true | false | If true the user can ONLY select URLs from the provided list. If false, the user can enter any URL they want
"icon" | "URL" | The URL for an ICON to display in the top left corner of the display. (optional)
"header1" | "Text" | The contents of an <h1> tag that will be inserted in the Dashboard HTML immediately following the icon. (optional)
"header2" | "Text" | The contents of an <h2> tag that will be inserted in the Dashboard HTML immediately following the header1. (optional)
"header3" | "Text" | The contents of an <h3> tag that will be inserted in the Dashboard HTML immediately following the header3. (optional)
"subheader" | "Text" | Text that will be inserted in the Dashboard HTML immediately following the header3. (optional)
"css" | "URL" | CSS file to be applied to the page. (optional)
"div" | Array | Array of panels to be displayed. (see below for elements)
"opt" | Array | Array of URLS that the user can select. (see below)
"div" Array Elements
"ttl" | "Text" | Caption line title
"url" | "URL" | URL to put in panel
"timer" | nnn | Minutes between auto-refresh cycles. (0=none)
"color" | "color" | Text color for title
"bgcolor" | "color" | Background color for title
"top" | nnn | Topmost pixel of the panel.
"left" | nnn | Leftmost pixel of the panel.
"wd" | nnn | Width in pixels
"hi | nnn | Height in pixels
"opt" Array Elements
"ttl" | "Text" | Caption line title
"url" | "URL" | URL to put in panel

To see what the dashboard.json would be for your current dashboard setup, hold the CTRL and SHIFT keys down and click the Gear Icon in the top right of the dashboard. The browser will open a new window with the contents of the JSON to recreate your current setrings.