1. technology and computing
2. programming languages
3. javascript

STATUS BOARD
How to make your own table.
!
!!
Changelog
! Version 1.3 (November 2013): Added how to access data from Dropbox; how to
•
provide table headers in HTML Format section; “Debugging” section.
!
!
!
Introduction
!You can specify your data in one of two formats: an HTML <table> tag, or CSV. CSV is
simpler, but HTML allows much richer presentation, including images and bar graphs.
!
CSV Format
!The easiest way to create a CSV file is to use spreadsheet software like Excel or
Numbers. Creating the data is as simple as entering a table like this:
!
!The numbers in the top row are optional; they represent the column width.
!
Saving to CSV Format
!
In Numbers: Choose File ➜ Export… and choose CSV.
In Excel: Choose File ➜ Save As… and choose CSV from the "Save As Type" menu.
!
Adding a table to your status board
!Go into Edit Mode by tapping the “gear” icon in the upper left of your iPad’s screen.
Drag a table panel onto your board (pictured below), placing and sizing it however you’d
like.
!
!
!
!
!
Making your data accessible to Status Board
!Now that your table data is in a file, you need to put that file in a location where Status
Board can access it. There are two ways to do this:
!!
1. Storing your file on Dropbox
!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 Table 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 table. When changes are made to the
file on your Dropbox, those changes should be reflected on your status board within a
few minutes.
!!
2. Storing your file on a web server
!This method requires that you know how to place a file on a web server. (Not to
mention: if your table data is generated dynamically, this is the way to go.)
! 1. Store your file on a web server of your choosing.
2. While in Edit Mode, tap on your Table 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 table. When changes are made to
the file on your web server, those changes should be reflected on your status board
within a few minutes.
!
!
!
HTML Format
!If you want to display richer data in your table, including images and bars, you should
use a <table> HTML tag rather than CSV format. The HTML below produces this table:
!
!The contents of this file are simply an HTML <table> tag, with a few additions.
!1) If you want to put images in each cell, simply use an <img> tag inside a <td>. Note
that all images will, by default, get scaled to a height of 30 px. To use images of any
size, give the parent <td> element the class “noresize”.
!
!2) If you want to use table headers, use the standard <th> tag. The text will be
displayed in a half-height, dimmed font.
!
3) If you want a sequence of bars (as at the last column of the sample table), assign a
<td class="noresize">
!!
"projectsBars" class to your <td> tag. Then, for each segment you want to display,
include <div class="barSegment value1"></div>, <div class="barSegment value2"></
div>, and so on, up to barSegment 8.
<table id="projects">
<tr>
<td class="projectIcon"><img src="statusboard.png" /></td>
<td class="projectName" style="width: 265px">Edit this project
list</td>
<td class="projectVersion">1.0</td>
<td class="projectPersons">
<img class="person" src="cabel.png" />
<img class="person" src="dan.png" />
<img class="person" src="dave.png" />
<img class="person" src="garrett.png" />
</td>
</tr>
<tr>
</tr>
<tr>
<td class="projectsBars">
<div class="barSegment value1"></div>
</td>
<td
<td
<td
<td
class="projectIcon"><img src="panic.png" /></td>
class="projectName">Tap to learn more</td>
class="projectVersion">2.0</td>
class="projectPersons">
<img class="person" src="greg.png" />
<img class="person" src="james.png" />
<img class="person" src="les.png" />
<img class="person" src="mike.png" />
</td>
<td class="projectsBars">
<div class="barSegment value1"></div>
<div class="barSegment value2"></div>
</td>
<td
<td
<td
<td
class="projectIcon"><img src="fantasia.png" /></td>
class="projectName">Happy coding!</td>
class="projectVersion">3.0</td>
class="projectPersons">
<img class="person" src="neven.png" />
<img class="person" src="steve.png" />
<img class="person" src="tim.png" />
<img class="person" src="will.png" />
<img class="person" src="wade.png" />
</td>
<td class="projectsBars">
<div class="barSegment value1"></div>
<div class="barSegment value2"></div>
<div class="barSegment value3"></div>
<div class="barSegment value4"></div>
<div class="barSegment value5"></div>
<div class="barSegment value6"></div>
<div class="barSegment value7"></div>
<div class="barSegment value8"></div>
</td>
</tr>
</table>
!!
!
!
Sharing Tables via URL
!It's possible to have one of your customers install a table panel onto a Status Board via
a URL on a web page. Use the following format:
!
!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 table on their Status Board.
!
!
!
Debugging
!Debug your table by quad-tapping on it (four taps in a row) with your Status Board in
panicboard://?url=[%-encoded table data url]&panel=table
&sourceDisplayName=[your %-encoded company name]
“locked” (non-edit) mode. This will bring up a debug window that will let you see the
table data 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 table by triple-tapping on it in “locked” (non-edit) mode.
(Triple-tapping forces any panel to refresh, not just table panels. Exception: for list
panels, use pull-to-refresh.)
!
!