Library

Introduction

Do-It-Yourself panels are web pages hosted outside of the app. They can be located on a public web server, or on an internal one; any web page you can reach via an URL will work. The page is rendered as-is, with no modification to its appearance or behavior. This document will help you make your panel match the general appearance of Status Board.

Panel Size

Status Board panels can be resized to a fixed set of sizes, on a grid of 64-point tiles. The smallest panel size is 256 X 64 point (4 X 1 tiles). Horizontally, panels can be stretched to 1, 1.5, 2, or 3 multiples of that minimum size. Vertically, panels can be resized in increments of 64 points. Below is the table of possible panel sizes:

<tr>
	<td>256 x 64</td>
	<td>384 x 64</td>
	<td>512 x 64</td>
	<td>768 x 64</td>
</tr>

<tr>
	<td>256 x 128</td>
	<td>384 x 128</td>
	<td>512 x 128</td>
	<td>768 x 128</td>
</tr>

<tr>
	<td>256 x 192</td>
	<td>384 x 192</td>
	<td>512 x 192</td>
	<td>768 x 192</td>
</tr>

<tr>
	<td>256 x 256</td>
	<td>384 x 256</td>
	<td>512 x 256</td>
	<td>768 x 256</td>
</tr>

<tr>
	<td>256 x 320</td>
	<td>384 x 320</td>
	<td>512 x 320</td>
	<td>768 x 320</td>
</tr>

<tr>
	<td>256 x 256+64n</td>
	<td>384 x 256+64n</td>
	<td>512 x 256+64n</td>
	<td>768 x 256+64n</td>
</tr>

Metadata

You can specify information about how your panel should behave when placed on a status board by adding a <meta> tag to your HTML like so:

<meta data-refresh-every-n-seconds="300"
      application-name="People In Space"
      data-allows-resizing="YES"
      data-default-size="4,4"
      data-min-size="4,4"
      data-max-size="8,4"
      data-allows-scrolling="NO" />

All attributes are optional:

  • data-refresh-every-n-seconds: The refresh interval for your panel. If you do not specify this tag, your panel will refresh at the default interval (set to 10 minutes in Status Board 2.0.).

  • application-name: The name of your panel that will display when the user is editing their status board.

  • data-allows-resizing: YES or NO, default is YES. Allows the user to adjust the size of your panel.

  • data-default-size: All size values are specified in Status Board tiles. (Tiles are represented by single grid blocks on the layout screen.) Default is 4,4 (width, height). Largest default size allowed is 12,12.

  • data-min-size: The minimum size that the user can make your panel, in tiles. Smallest allowable size is 4,1 (four units wide, one tall).

  • data-max-size: The maximum size that the user can make your panel, in tiles. (A portrait-size status board is 12 units across; landscape is 16.) Largest allowable size is 16,16.

  • data-allows-scrolling: YES or NO, default is YES. Set to NO if you don’t want the user to be able to scroll the content in your panel.

Any of the above units can also be specified in points. So, providing 256,256 as default size is equivalent to specifying 4,4. (Each tile is 64 x 64 points.) No need to specify which unit system is being used; small values equate to tiles, large values equate to points.

Appearance

Your web page will be placed in a panel frame with a light gray border surrounding it. This element will be drawn below your web page.

Status Board panels use the font Univers. Two variants are included in the app:

  • Status Board Font Light (specify as font-family: "StatusBoardFontLight") is typically used for labels and table headers.

  • Status Board Font (specify as font-family: "StatusBoardFont") is typically used for content.

Colors

Panels typically use two shades of gray for text: white for the most important information, and 50% gray for secondary labels. Graphs, clock, and other colorful panels use this color palette. (Values given are RGB.)

<tr>
	<td>255,198,0</td>
	<td>0,186,0</td>
	<td>255,48,0</td>
	<td>155,0,194</td>
	<td>0,108,230</td>
</tr>

<tr>
	<td>100,112,118</td>
	<td>252,88,181</td>
	<td>0,159,153</td>
	<td>252,107,0</td>
	<td>174,183,188</td>
</tr>

Sample Code

View the source of the page here. It produces a simple, 256 x 256-px panel that displays the number of humans currently in space. You can tweak this project and place it on a web server to quickly get started building your own Do-It-Yourself panel.

Known Issues

When your Status Board is displayed on an HDTV or in the horizontal orientation, the dimensions of the panels are changed to accommodate the larger resolution. Currently, there is no easy way for your web page to change along with the Status Board size or orientation. In the future, we will provide the necessary JS and CSS hooks to tell your web page how and where it’s being shown.

Sharing DIY Panels via URL

It’s possible to have one of your customers install your DIY panel onto a Status Board via a URL on a web page. Use the following format:

panicboard://?url=[diy%20encoded%20url]&panel=diy&sourceDisplayName=[your%20encoded%20company%20name]

The sourceDisplayName argument is optional.

When the user taps on that link on their iPad, Status Board will launch and ask the user if they’d like to install the DIY panel on their Status Board.

Adding a DIY Panel to your status board

Go into Edit Mode by tapping the “gear” icon in the upper left of your iPad’s screen, then tap Edit. Drag a DIY panel onto your board (the block with the <> logo), placing and sizing it however you’d like.

Making your data accessible to Status Board

Now that your DIY panel is defined, you need to put that file in a location where Status Board can access it. There are two ways to do this.

Storing your file on Dropbox

Note: as of October 2016, Dropbox will stop hosting HTML files for non-paying users, and in September 2017, will stop hosting HTML for all users. At that time you will need to use a solution other than Dropbox for DIY data.

This is the simplest method, especially if you’re already a Dropbox user.

  1. You’ll need the Dropbox application installed on your iPad.
  2. While in Edit Mode, tap on your DIY panel to display the panel’s customizer.
  3. Tap Dropbox.
  4. The Dropbox app will open; grant Status Board permission to access your Dropbox. (Status Board will only access the file you specify, and will not access any other file on your Dropbox.)
  5. After you grant access, Status Board will re-open. Browse through your Dropbox folder hierarchy and find the file that contains your table data. Tap on that filename.

You’re done! Status Board should display your DIY panel. When changes are made to the file on your Dropbox, those changes should be reflected on your status board within a few minutes.

Storing your file on a web server

This method requires that you know how to place a file on a web server.

  1. Store your file on a web server of your choosing.
  2. While in Edit Mode, tap on your DIY panel to display the panel’s customizer.
  3. Tap URL.
  4. Enter the URL of your file.
  5. Tap Save.

You’re done! Status Board should now display your DIY panel. When changes are made to the file on your web server, those changes should be reflected on your status board within a few minutes.

Debugging

Debug your panel by quad-tapping on it (four taps in a row) with your Status Board in “locked” (non-edit) mode. This will bring up a debug window that will let you see the HTML your server is sending to Status Board, as well as the modified HTML that Status Board displays on your iPad display and external display (if you’re using an external display.)

Force a refresh of your panel by triple-tapping on it in “locked” (non-edit) mode. (Triple-tapping forces any panel to refresh, not just DIY panels. Exception: for list panels, use pull-to-refresh.)

This article was last updated on November 2, 2016