glitchdotcom / solari-board

A JavaScript solari board

Solari Board

Fog Creek has used its Big Board for close to three years...and now you can have your own!

The Solari Board jQuery application will accept JSON from any source. The support team at Fog Creek feeds in tech call information from FogBugz, but the possibilities are limitless!

The application expects a JSON array wrapped in a function call (JSONP) and filled with objects that have the following properties:

• sDate: the day of the appointment. The Solari board can handle values like yesterday or today.
• sTime: the time of the appointment. Format like 22:45 and remember the leading zero on the hours. If this appointment does not have a time, make it an empty string.
• sDeparture: an arbitrary string; on our board, it's the email address of the support technition who has the support call.
• nStatus: allows you to set the status to one of four statuses: "All Aboard" (nStatus = 1), "On Time" (nStatus = 2), "Delayed" (nStatus = 3) or "Departed"(nStatus = 4).
• nTrack: an arbitrary integer between 0 and 99; we use it to indicate which extension the call should be on, but you can use it for whatever purpose you want.
• fLight: should be set to true if you want the lightbulb by that row illuminated, and false otherwise.

Here's an example:

jsonpCallback(
 [
    {'sDate': 'today',
     'sTime': '13:30', 
     'sDeparture': '[email protected]',
     'nStatus': 1,
     'nTrack': 17,
     'fLight': true
    },
    {'sDate': 'yesterday', 
     'sTime': '16:00',
     'sDeparture': '[email protected]',
     'nStatus': 2,
     'nTrack': 19,
     'fLight':false
    },
    {'sDate': 'July 8th, 2013',
     'sTime': '16:30',
     'sDeparture': '[email protected]',
     'nStatus': 2,
     'nTrack': 23,
     'fLight':false
    }
 ]
)

How do I use it?

It's simple!

1. Include the following lines in your HTML:

   <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.transit.min.js"></script> <script type="text/javascript" src="js/date.js"></script> <script type="text/javascript" src="js/solari.js"></script> Your browser does not support the audio element.

2. Add the following script to your webpage's head:

   <script> $(document).ready(function() { //remove the div parameter to append directly to body addSolariBoard("#myDIv"); }); </script>

3. Point the board to the script that will feed it jsonp

   $.post('../example/postJson.py') // replace this with your own script

Currently, Google Chrome and Internet Explorer are the only supported browsers. This is due to an issue in animating the CSS property backgroundPositionY on other browsers. We'd welcome patches that help resolve this issue.

Additional Configuration and Examples

• Toggle status_override in solari.js to have the board automatically change the status column using time and date due.
• The sDate field takes any date.js parsable string (e.g. today, next monday)
• There are two included examples, postJsonp.py is a basic script that statically sends the sample payload given above to the solari board. postFogbugz.py connects to a FogBugz installation through the xml api. To use either example, Just place all files and folders onto a Python-enabled CGI server, then edit fbsettings.py with your FogBugz URL and FogBugz token if needed.

Copyright

Copyright © 2013 Fog Creek Software, Inc. All rights reserved.

Licensing

The Solari Board is licensed under the MIT license.

solari-board's Issues

wiki needs updating as well as readme

Hi, I'd like to point out a mistake, hopefully get a question answered, and offer contribute a php file that will deliver json to be provided as an example. I have access to php more often than python.

The error in your configuration documentation:
Your read me and wiki still contain information about editing $.post

1. Point the board to the script that will feed it jsonp
   $.post('../example/postJson.py') // replace this with your own script
   when the project has changed to require editing this in solari.js
   var URL = "../example/postJsonp.py"

I do have a question. I'm attempting to send json from php to the board and I am having zero luck. The board displays but get the the fail wale EVERY time.

my settings:
-index.html file in example/ based off readme,
-provider.php in example/ (this sends jsonp)

My test of php is to call the provider.php from a browser (chrome) like so.
http://localhost/board/example/provider2.php?callback=test

the response is:
test ([{"sDate":"today","sTime":"13:30","sDeparture":"[email protected]","nStatus":1,"nTrack":17,"fLight":true},{"sDate":"today","sTime":"13:30","sDeparture":"[email protected]","nStatus":1,"nTrack":17,"fLight":true},{"sDate":"today","sTime":"13:30","sDeparture":"[email protected]","nStatus":1,"nTrack":17,"fLight":true}])

The only difference is single vs. double quotes that php json_encode() function puts in. (i'm pulling in values from a multidimensional array. I used the project sample data to test.

Is there something else this that I am missing??? I just don't see what it would be unless I'm not submitting the json payload as mentioned in solari.js properly.

thank you,
Ryan

My php file is simply this. It requires php 5.2 and up

'today', 'sTime' => '13:30', 'sDeparture' => '[email protected]', 'nStatus' => 1, 'nTrack' => 17, 'fLight' => true)); array_push($data, array("sDate" => 'today', 'sTime' => '13:30', 'sDeparture' => '[email protected]', 'nStatus' => 1, 'nTrack' => 17, 'fLight' => true)); array_push($data, array("sDate" => 'today', 'sTime' => '13:30', 'sDeparture' => '[email protected]', 'nStatus' => 1, 'nTrack' => 17, 'fLight' => true)); $json = json_encode($data); header("Content-type: application/json"); //echo 'callbackname (' . $json . ')'; #test echo $_GET['callback'] . ' (' . $json . ')'; ?>

Doesn't appear to work in Chrome

Droped js, css, images and audio folders alongside the example HTML file.

Fail whale doesn't display, only the title for it.

Modify solari.js updateSolariBoard() to hard code solariData to the example JSON and everything appears to work, except the content doesn't appear.

mistake in readme/wiki need to replace info about editing $.post in js

Hi, I'd like to point out a mistake, hopefully get a question answered, and offer contribute a php file that will deliver json to be provided as an example. I have access to php more often than python.

The error in your configuration documentation:
Your read me and wiki still contain information about editing $.post

1. Point the board to the script that will feed it jsonp
   $.post('../example/postJson.py') // replace this with your own script
   when the project has changed to require editing this in solari.js
   var URL = "../example/postJsonp.py"

I do have a question. I'm attempting to send json from php to the board and I am having zero luck. The board displays but get the the fail whale EVERY time.

my settings:
-index.html file in example/ based off readme,
-provider.php in example/ (this sends jsonp)
-var URL = "../example/provider.php" //this changed in solari.js (no other changes elsewhere, in this file or others)

My test of php is to call the provider.php from a browser (chrome) like so.
http://localhost/board/example/provider.php?callback=test

the response is:
test ([{"sDate":"today","sTime":"13:30","sDeparture":"[email protected]","nStatus":1,"nTrack":17,"fLight":true},{"sDate":"today","sTime":"13:30","sDeparture":"[email protected]","nStatus":1,"nTrack":17,"fLight":true},{"sDate":"today","sTime":"13:30","sDeparture":"[email protected]","nStatus":1,"nTrack":17,"fLight":true}])

The only difference is single vs. double quotes that php json_encode() function puts in. (i'm pulling in values from a multidimensional array. I used the project sample data to test.

Is there something else this that I am missing??? I just don't see what it would be unless I'm not submitting the json payload as mentioned in solari.js properly.

thank you,
Ryan

My php file is simply this. It requires php 5.2 and up

'today', 'sTime' => '13:30', 'sDeparture' => '[email protected]', 'nStatus' => 1, 'nTrack' => 17, 'fLight' => true)); array_push($data, array('sDate' => 'today', 'sTime' => '13:30', 'sDeparture' => '[email protected]', 'nStatus' => 1, 'nTrack' => 17, 'fLight' => true)); array_push($data, array('sDate' => 'today', 'sTime' => '13:30', 'sDeparture' => '[email protected]', 'nStatus' => 1, 'nTrack' => 17, 'fLight' => true)); $json = json_encode($data); header("Content-type: application/json"); //echo 'callbackname (' . $json . ')'; #test echo $_GET['callback'] . ' (' . $json . ')'; ?>

Documentation Error : Parameter fLight should be bLight

I think this might be typo, I cannot get the light to show if I send fLight as the light parameter. But bLight works.

How was the letters sprite sheet made?

How was this made? Was it just a manual process using an image editor?

Fill in board

Is there someone who can help me how to fill the board in, i've got the html from the examples. But the board is empty and i cant fill it in :(
Basically i do not understand this line of instructons:

INSTRUCTIONS:

• The solari board app takes an arbitrary json payload from a post command to target url via jsonp (wrapped in a function call)
• Currently, the solari board assumes a json structure in the following format: