Skip to content
Browse files

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

…ttempt which fails
  • Loading branch information...
1 parent 6c4946e commit f4cf845970d61cd75accfb23ccfdc173553ee739 @allynbauer allynbauer committed May 11, 2010
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,20 +25,33 @@ 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;
$bar_height = ($bar->height / $max_height) * $_GET['height'];
$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,30 +21,27 @@
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;
font-size: 18px;
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>

0 comments on commit f4cf845

Please sign in to comment.
Something went wrong with that request. Please try again.