add grid module, fix the bars to render on bottom

pgodel · May 6, 2010 · 3213aaf · 3213aaf
1 parent fc26b75
commit 3213aaf
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 25 deletions.
diff --git a/README.markdown b/README.markdown
@@ -12,7 +12,7 @@ An 'update' of 0 indicates that module doesn't require updates, and thus whateve
 
 How It Works
 ====================
-The module's are loaded via a Javascript request 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 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.
 
 Notes
 ====================

diff --git a/config.json b/config.json
@@ -3,41 +3,51 @@
   "title": "Status Board",
   "rotate": "no",
   "modules": [
-    { "name": "clock",
-      "width": 200,
-      "update": 60
-    },
     {
-      "name": "countdown",
-      "width": 770,
-      "update": 3600,
+      "name": "bargraph",
+      "width": 1000,
+      "update": 15,
       "args": {
-        "event": "UNTIL T8",
-        "stop": 1274706000
+        "height": 300
       }
     },
     {
-      "name": "bargraph",
+      "name": "grid",
       "width": 1000,
-      "update": 15,
+      "update": 300
+    },
+    {
+      "name": "countdown",
+      "width": 1000,
+      "update": 3600,
       "args": {
-        "height": 300
+        "event": "UNTIL T8",
+        "stop": 1274706000
       }
     },
+
     {
       "name": "arrow",
+      "class": "mini",
       "width": 300,
       "update": 15
     },
-    {
-      "name": "meta",
-      "width": 670,
-      "update": 0
+
+    { "name": "clock",
+      "class": "mini",
+      "width": 200,
+      "update": 60
     },
     {
       "name": "weather",
-      "width": 400,
+      "class": "mini",
+      "width": 440,
       "update": 3600
+    },
+    {
+      "name": "meta",
+      "width": 1000,
+      "update": 0
     }
   ]
 }
diff --git a/index.php b/index.php
@@ -13,6 +13,8 @@
 }
 elseif ($data->rotate === 'right') {
     $rotate = '-webkit-transform: rotate(90deg);';
+} elseif ($data->rotate === 'flip') {
+    $rotate = '-webkit-transform: rotate(180deg);';
 } else {
     $rotate = FALSE;
 }
@@ -28,8 +30,7 @@ function render($module) {
         }
         $argstr = "'" . implode("&", $argstr) . "'";
     }
-
-    echo "<div class='module' id='$module->name' style='width: {$module->width}px'></div>\n";
+    echo "<div class='module $module->class' id='$module->name' style='width: {$module->width}px'></div>\n";
     echo "\t<script type='text/javascript'>activate_module('$module->name', $module->update, $argstr);</script>\n\n";
 }
 
@@ -55,6 +56,7 @@ function render($module) {
     </style>
 </head>
 <body>
+    <div id='spacer'></div>
     <div id='board'>
         <?php 
         foreach($data->modules as $module)

diff --git a/modules/bargraph.module.php b/modules/bargraph.module.php
@@ -31,9 +31,10 @@ function __construct($name, $height, $header) {
     $bar = $bars[$j];
     $count = $j + 1;
     $bar_height =  ($bar->height / $max_height) * $_GET['height'];
+    $top_offset = $_GET['height'] - $bar_height;
 
 ?>
-    <div class='bar'>
+    <div class='bar' style='margin-top: <?php echo $top_offset ?>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>
         <span class='title'><?php echo $bar->name ?></span>

diff --git a/modules/grid.module.php b/modules/grid.module.php
@@ -0,0 +1,27 @@
+<?php
+
+/* DATA */
+$data = array(
+  array('TRANSMIT',     'Blurb', 'Blarb', 'ZH'),
+  array('UNISON',       'Blurb', 'Blarb', 'ZLI'),
+  array('CODA',         'Blurb', 'Blarb', 'ZHP'),
+  array('OTHER THING',  'Blurb', 'Blarb', 'GL')
+);
+
+/* DISPLAY */
+?>
+
+<table border='0' width='100%' cellpadding='0' cellspacing='0'>
+<?php
+
+foreach($data as $row) {
+    echo '<tr>';
+    for($j = 0; $j < count($row); $j++) {
+        echo "<td class='cell_$j'>$row[$j]</td>";
+    }
+    echo '</tr>';
+}
+
+?>
+
+</table>
diff --git a/resources/TheFreakyFace.otf b/resources/TheFreakyFace.otf
diff --git a/resources/panic.css b/resources/panic.css
@@ -12,6 +12,13 @@
   font-style: normal;
 }
 
+@font-face {
+	font-family: 'FreakyFace';
+	src: url('TheFreakyFace.otf');
+	font-weight: normal;
+  	font-style: normal;
+}
+
 .icon {
 	font: normal 40px 'Cutouts';
 	color: #ded00b;
@@ -24,13 +31,16 @@ body {
 	color: #fff;
 }
 
+.mini {
+  background-color: #1c2020;
+  border: 5px solid #1c2020;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+}
+
 .module {
 	float: left;
 	text-align: center;
-	background-color: #171919;
-	-webkit-border-radius: 15px;
-	-moz-border-radius: 15px;
-	border: 5px solid #171919;
 	margin: 10px;
 }
 
@@ -42,15 +52,51 @@ body {
 	font-size: 40px;
 }
 
+#spacer {
+  margin-top: auto;
+  margin-bottom: 0;
+}
 
 
 
 
 
 
 
+/* GRID MODULE */
+table {
+	font-size: 40px;
+}
 
+td {
+	background-color: #1c2020;
+	border: 3px solid #050606;
+	-webkit-border-radius: 15px;
+	-moz-border-radius: 15px;
+}
+
+.cell_0 {
+	text-align: left;
+	padding-left: 10px;
+	width: 35%;
+}
+
+.cell_1 {
+	width: 20%;
+
+}
+
+.cell_2 {
+	width: 20%;
+
+}
+
+.cell_3 {
+	font: normal 80px 'FreakyFace';
+	width: 25%;
+}
 
+/* END GRID MODULE */
 
 /* ARROW MODULE */