Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add bubble list module, fix bar graph, introduce vertical centering a…

…ttempt which fails
  • Loading branch information...
commit f4cf845970d61cd75accfb23ccfdc173553ee739 1 parent 6c4946e
@allynbauer allynbauer authored
View
22 LICENSE
@@ -0,0 +1,22 @@
+ Copyright (c) 2010 Allyn Bauer
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
View
13 README.markdown
@@ -12,8 +12,17 @@ An 'update' of 0 indicates that module doesn't require updates, and thus whateve
How It Works
====================
-The module's are loaded on the initial page load. From there, Ajax is used to update each module every x seconds, where x is specified in config.json for each module. You could have some modules refresh every minute and others refresh every week.
+The modules are loaded on the initial page load. From there, Ajax is used to update each module every x seconds, where x is specified in config.json for each module. You could have some modules refresh every minute and others refresh every week.
Notes
====================
-This will currently work best on a WebKit browser such as Safari or Chrome. It will also work on Firefox, but I'm not testing it there very often, so it will always be a couple versions behind.
+This will currently work best on a WebKit browser such as Safari or Chrome. It will also work on Firefox, but I'm not testing it there very often, so it will always be a couple versions behind.
+
+Have a suggestion? Excellent - let me know.
+
+Have a photo of a status board you made with statuspanic? Excellent - I want to see it!
+
+Example
+====================
+I've got a working version on my website. It's basically just a direct installation - no editing has been done from the default configuration. It basically lets you see what it does without trying (since that's a stated goal of this project..)
+[Example Installation](http://allynbauer.com)[http://allynbauer.com/software/statuspanic]
View
20 config.json
@@ -7,6 +7,7 @@
"name": "bargraph",
"width": 1000,
"update": 15,
+ "class": "middle",
"args": {
"height": 300
}
@@ -21,33 +22,44 @@
"width": 1000,
"update": 3600,
"args": {
- "event": "UNTIL T8",
+ "event": "UNTIL SOMETHING",
"stop": 1274706000
}
},
{
"name": "arrow",
- "class": "mini",
+ "class": "mini middle",
"width": 300,
"height": 120,
"update": 15
},
{ "name": "clock",
- "class": "mini",
+ "class": "mini middle",
"width": 200,
"height": 120,
"update": 60
},
{
"name": "weather",
- "class": "mini",
+ "class": "mini middle",
"width": 440,
"height": 120,
"update": 3600
},
{
+ "name": "space",
+ "width": 310,
+ "update": 0
+ },
+ {
+ "name": "bubblelist",
+ "width": 200,
+ "update": 0,
+ "class": "mini"
+ },
+ {
"name": "meta",
"width": 1000,
"update": 0
View
14 index.php
@@ -22,14 +22,13 @@
$width = (isset($data->width) ? $data->width . 'px' : '100%');
function render($module) {
- $argstr = "''";
- if (isset($module->args)) {
- $argstr = array();
- foreach($module->args as $key => $val) {
- $argstr[] = "$key=" . urlencode($val);
- }
- $argstr = "'" . implode("&", $argstr) . "'";
+ $argstr = array();
+ $args = $module->args;
+ $args->width = $module->width;
+ foreach($args as $key => $val) {
+ $argstr[] = "$key=" . urlencode($val);
}
+ $argstr = "'" . implode("&", $argstr) . "'";
$style = "width: {$module->width}px;";
if ($module->height) $style .= " height: {$module->height}px";
@@ -59,7 +58,6 @@ function render($module) {
</style>
</head>
<body>
- <div id='spacer'></div>
<div id='board'>
<?php
foreach($data->modules as $module)
View
8 modules/arrow.module.php
@@ -19,6 +19,8 @@
$code = 'K';
}
?>
-
-<span class='<?php echo $class ?>' id='arrow_icon'><?php echo $code ?></span>
-<span class='mega'><?php echo $num ?>%</span>
+
+<div>
+ <span class='<?php echo $class ?>' id='arrow_icon'><?php echo $code ?></span>
+ <span class='mega'><?php echo $num ?>%</span>
+</div>
View
20 modules/bargraph.module.php
@@ -14,6 +14,7 @@ function __construct($name, $height, $header) {
$bars[] = new Bar('CODA', 29, '29 / 3');
$bars[] = new Bar('UNISON', 48, '48 / 3');
$bars[] = new Bar('CANDYBAR', 8, '8 / 2');
+$bars[] = new Bar('SECRETS', 15, '15 / 2');
$max = rand(3, 100);
$bars[] = new Bar('GENERAL', $max, "$max / 0");
@@ -24,9 +25,20 @@ function __construct($name, $height, $header) {
if ($bar->height > $max_height)
$max_height = $bar->height;
}
+
+// change these
+$max_bar_width = 300;
+$default_padding = 12;
+
+// don't change these
+$total_outer = ($default_padding * 2); // (paddings + borders)
+$max_width = $_GET['width'];
+$num_bars = count($bars);
+$bar_width = min($max_bar_width, ($max_width - ($total_outer * $num_bars)) / $num_bars);
+$final_padding = max($default_padding, ($max_width - (($bar_width + $total_outer) * $num_bars)) / $num_bars / 2);
?>
-<div id='graph' style='height: <?php echo $_GET['height'] ?>px'>
+<div>
<?php for($j = 0; $j < count($bars); $j++) {
$bar = $bars[$j];
$count = $j + 1;
@@ -34,10 +46,12 @@ function __construct($name, $height, $header) {
$top_offset = $_GET['height'] - $bar_height;
?>
- <div class='bar' style='margin-top: <?php echo $top_offset ?>px'>
+ <div class='bar' style='margin-top: <?php echo $top_offset . 'px; width: ' .
+ $bar_width . 'px; padding: 0 ' . $final_padding . 'px;' ?>'>
<span class='header'><?php echo $bar->header ?></span>
- <div class='view' id='graph_<?php echo $count ?>' style='height: <?php echo $bar_height; ?>px;'></div>
+ <div class='view' id='bar_<?php echo $count ?>' style='height: <?php echo $bar_height; ?>px;'></div>
<span class='title'><?php echo $bar->name ?></span>
</div>
<?php } ?>
+<div style='clear:both'></div>
</div>
View
28 modules/bubblelist.module.php
@@ -0,0 +1,28 @@
+<?php
+
+$items = array(
+ // 'bubble' => 'line'
+ '4|orange' => '1:02',
+ '9|red' => '9 min',
+ '14|red' => '5 min',
+ '19|red' => '11 min',
+ '20|orange' => '3:55'
+);
+
+?>
+
+<ul>
+ <?php foreach($items as $bubble => $line) {
+ $bubble = explode('|', $bubble);
+ $color = $bubble[1];
+ $bubble = $bubble[0];
+ ?>
+ <li>
+ <span class='<?php echo $color ?> bubble'>
+ <span class='background'>E</span>
+ <span class='display'><?php echo $bubble ?></span>
+ </span>
+ <span class='content'><?php echo $line ?></span>
+ </li>
+ <?php } ?>
+</ul>
View
6 modules/clock.module.php
@@ -2,10 +2,12 @@
date_default_timezone_set('America/Chicago');
+/* DATA */
$time = date('g:i a');
+/* DISPLAY */
?>
-<p class='jumbo' style='line-height: 50px'>
+<div class='jumbo'>
<span class='icon'>H</span><?php echo $time; ?>
-</p>
+</div>
View
7 modules/countdown.module.php
@@ -2,8 +2,11 @@
date_default_timezone_set('America/Chicago');
+/* DATA */
// http://php.net/manual/en/function.mktime.php
$stop = $_GET['stop'];
+
+/* DISPLAY */
$diff = $stop - time();
$days = floor($diff/(60*60*24));
@@ -15,6 +18,6 @@
?>
-<p class='mega'>
+<div class='mega'>
<span class='icon'>H</span><?php echo $result; ?>
-</p>
+</div>
View
0  modules/gmail.module.php
No changes.
View
35 modules/grid.module.php
@@ -5,25 +5,28 @@
array('TRANSMIT', 'Blurb', 'Blarb', 'ZH'),
array('UNISON', 'Blurb', 'Blarb', 'ZLI'),
array('CODA', 'Blurb', 'Blarb', 'ZHP'),
- array('OTHER THING', 'Blurb', 'Blarb', 'GL')
+ array('OTHER THING', 'Blurb', 'Blarb', 'GL'),
+ array('EXCITING', 'Blurb', 'Blarb', 'LGI')
);
/* DISPLAY */
?>
-<table border='0' width='100%' cellpadding='0' cellspacing='10'>
-<?php
-$count = 0;
-foreach($data as $row) {
- $class = ($count % 2 == 1 ? " class='alt'" : '');
- echo "<tr$class>";
- for($j = 0; $j < count($row); $j++) {
- echo "<td class='cell_$j'>$row[$j]</td>";
+<div>
+ <table border='0' width='100%' cellpadding='0' cellspacing='10'>
+ <?php
+ $count = 0;
+ foreach($data as $row) {
+ $class = ($count % 2 == 1 ? " class='alt'" : '');
+ echo "<tr$class>";
+ for($j = 0; $j < count($row); $j++) {
+ echo "<td class='cell_$j'>$row[$j]</td>";
+ }
+ echo '</tr>';
+ $count++;
}
- echo '</tr>';
- $count++;
-}
-
-?>
-
-</table>
+
+ ?>
+
+ </table>
+</div>
View
5 modules/meta.module.php
@@ -1 +1,4 @@
-<span class='jumbo'>Created by <a href='http://allynbauer.com'>Allyn Bauer</a><br />DL from <a href='http://github.com/ajb/statuspanic'>GitHub</a></span>
+<div class='jumbo'>
+ Created by <a href='http://allynbauer.com'>Allyn Bauer</a><br />
+ Get it at <a href='http://github.com/ajb/statuspanic'>GitHub</a>
+</div>
View
3  modules/space.module.php
@@ -0,0 +1,3 @@
+<div>
+ &nbsp;
+</div>
View
0  modules/twitter.module.php
No changes.
View
18 modules/weather.module.php
@@ -1,5 +1,10 @@
<?php
+/* DATA */
+$zipcode ='50613';
+
+/* DISPLAY */
+
// found at php.net
function xml2array($url, $get_attributes = 1, $priority = 'tag') {
$contents = "";
@@ -140,9 +145,6 @@ function xml2array($url, $get_attributes = 1, $priority = 'tag') {
}
-$zipcode ='50613';
-
-/* DATA */
while(true) {
$url = 'http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=';
$data = xml2array($url . $zipcode);
@@ -155,11 +157,11 @@ function xml2array($url, $get_attributes = 1, $priority = 'tag') {
$data = $data['current_observation'];
-
-/* DISPLAY */
?>
-<span class='jumbo'>Weather in <?php echo $data['display_location']['city'] ?></span>
<div>
- <?php echo $data['temp_f'] . '&deg; F, ' . $data['weather'] ?></li>
-</div>
+ <span class='jumbo'>Weather in <?php echo $data['display_location']['city'] ?></span>
+ <div>
+ <?php echo $data['temp_f'] . '&deg; F, ' . $data['weather'] ?></li>
+ </div>
+</div>
View
13 resources/board.js
@@ -7,4 +7,15 @@ function activate_module(name, seconds, args) {
if (seconds > 0) {
setInterval("render_module('"+name+"', '"+args+"')", (seconds * 1000));
}
-}
+}
+
+$(document).ready(function() {
+ $('.middle').each(function(id, val) {
+ var outer_height = $(val).height();
+ var inner_height = $(val).children().first().height();
+ var buffer = (outer_height - inner_height) / 2;
+ var SEL = '#' + $(val).attr('id') + '>div';
+ $(SEL).css('marginTop', buffer);
+ $(SEL).css('marginBottom', buffer);
+ });
+});
View
160 resources/panic.css
@@ -1,3 +1,5 @@
+/* @group FONT */
+
@font-face {
font-family: 'Cutouts';
src: url('cutouts.ttf') format('truetype');
@@ -19,16 +21,9 @@
font-style: normal;
}
-@font-face {
- font-family: 'FunnyFaces';
- src: url('face.ttf') format('truetype');
-}
+/* @end */
-.icon {
- color: #ded00b;
- font-style: normal;
- font-family: 'Cutouts';
-}
+/* @group GENERAL */
body {
font-family: verdana, arial, helvetica, sans-serif;
@@ -36,13 +31,17 @@ body {
background-color: #0a0a0a;
color: #fff;
vertical-align: middle;
+ height: 100%;
}
-.mini {
- background-color: #1c2020;
- border: 5px solid #1c2020;
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
+#board {
+ margin: 0 auto;
+}
+
+.icon {
+ color: #ded00b;
+ font-style: normal;
+ font-family: 'Cutouts';
}
.module {
@@ -51,6 +50,13 @@ body {
margin: 10px;
}
+.mini {
+ background-color: #1c2020;
+ border: 5px solid #1c2020;
+ -webkit-border-radius: 15px;
+ -moz-border-radius: 15px;
+}
+
.jumbo {
font-size: 28px;
}
@@ -59,18 +65,19 @@ body {
font-size: 40px;
}
-#spacer {
- margin-top: auto;
- margin-bottom: 0;
+.middle {
+ /* .middle centers vertically with javascript */
}
+.center {
+ color: #fff;
+ font-style: normal;
+ font-family: 'Cutouts';
+}
+/* @end */
+/* @group GRID MODULE */
-
-
-
-
-/* GRID MODULE */
table {
font-size: 40px;
}
@@ -80,9 +87,9 @@ td {
border: 1px solid #1c2020;
text-align: left;
padding-left: 10px;
+ margin: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
- margin: 10px;
}
.alt td {
@@ -94,10 +101,13 @@ tr {
}
+/* widths */
.cell_0 { width: 35%; }
.cell_1 { width: 20%; }
.cell_2 { width: 20%; }
+.cell_3 { width: 25%; }
+/* custom bling */
.cell_3 {
font: normal 80px/50px 'FreakyFace';
padding-left: 5px;
@@ -106,9 +116,19 @@ tr {
letter-spacing: 4px;
}
-/* END GRID MODULE */
+/* @end */
+/* @group META MODULE */
+
+#countdown>div {
+ margin: 25px 0;
+}
+
+a {
+ color: #fff;
+}
-/* ARROW MODULE */
+/* @end */
+/* @group ARROW MODULE */
#arrow_icon {
font: normal 65px 'Cutouts';
@@ -129,27 +149,79 @@ tr {
color: #3d69fe;
}
-/* END ARROW MODULE */
+/* @end */
+/* @group BUBBLE LIST MODULE */
+
+ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ clear: left;
+}
+
+li {
+ display: block;
+ float: left;
+ clear: left;
+ padding: 5px;
+}
+
+li .content {
+ display: block;
+ line-height: 40px;
+ float: left;
+ margin-left: 10px;
+ font-size: 28px;
+}
+
+.bubble span {
+ display: block;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ padding: 0;
+ margin: 0;
+ float: left;
+}
+
+.bubble .background {
+ font-style: normal;
+ font-family: 'Cutouts';
+ font-size: 70px;
+}
+
+.bubble.red .background {
+ color: #d81817;
+}
+
+.bubble.orange .background {
+ color: #fc5005;
+}
+
+.bubble .display {
+ text-align: center;
+ margin-left: -30px;
+ font-size: 20px;
+}
+
+/* @end */
+/* @group COUNTDOWN MODULE */
-/* COUNTDOWN MODULE */
.event {
color: #9c9b98;
}
-/* END COUNTDOWN MODULE */
-/* GRAPH MODULE */
-.graph {
- margin-right: auto;
- margin-left: auto;
- width: auto;
+/* @end */
+/* @group GRAPH MODULE */
+
+#bargraph>div {
}
.bar {
position: relative;
height: auto;
- width: 170px;
float: left;
- padding: 0 12px 0 12px;
+ padding: 0 12px;
}
.bar .view {
@@ -159,34 +231,40 @@ tr {
-moz-border-radius: 3px;
}
-#graph_1 {
+#bar_1 {
background: #FABD15;
border-color: #FABD15;
border-left-color: #d5a110;
}
-#graph_2 {
+#bar_2 {
background: #49C817;
border-color: #49C817;
border-left-color: #38a410;
}
-#graph_3 {
+#bar_3 {
background: #FD3B15;
border-color: #FD3B15;
border-left-color: #cd2e14;
}
-#graph_4 {
+#bar_4 {
background: #7554BF;
border-color: #7554BF;
border-left-color: #6345a5;
}
-#graph_5 {
+#bar_5 {
background: #107CF8;
border-color: #107CF8;
border-left-color: #3368d7;
}
-/* END GRAPH MODULE */
+#bar_6 {
+ background: #d8d309;
+ border-color: #beba06;
+ border-left-color: #d8d309;
+}
+
+/* @end */
View
46 test.html
@@ -0,0 +1,46 @@
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <title>Status Board</title>
+ <link rel='stylesheet' type='text/css' href='resources/panic.css' />
+ <style type='text/css'>
+
+
+ </style>
+</head>
+<body>
+ <div class='icon'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
+ <ul>
+ <li>
+ <span class='red bubble'>
+ <span class='background'>E</span>
+ <span class='display'>1</span>
+ </span>
+ <span class='content'>Line Item 1</span>
+ </li>
+ <li>
+ <span class='orange bubble'>
+ <span class='background'>E</span>
+ <span class='display'>12</span>
+ </span>
+ <span class='content'>Line Item 2</span>
+ </li>
+ <li>
+ <span class='red bubble'>
+ <span class='background'>E</span>
+ <span class='display'>12</span>
+ </span>
+ <span class='content'>Lime Item 1!</span>
+ </li>
+ <li>
+ <span class='orange bubble'>
+ <span class='background'>E</span>
+ <span class='display'>5</span>
+ </span>
+ <span class='content'>Limes..mmm delicious</span>
+ </li>
+ </ul>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.