--- a/dash.conf	Sun Jul 12 18:00:57 2015 +0200
+++ b/dash.conf	Wed Jul 15 14:06:03 2015 +0200
@@ -1,1 +1,65 @@
- 
+### bottledash default configuration
+### created by sean engelhardt >sean.engelhardt@intevation.de
+### license: GNU GPL >= v2
+###
+### Usage:
+### define the tiles for the dashboard in sections
+###
+### options for tiles:
+###
+### type
+### values: mon, d3.js
+###
+### source (only if type = mon)
+### value: IP or FQDN
+### status
+###
+### status (for debug purpose only | only if type = mon)
+### values: up, down
+###
+### example:
+### [tile1]
+### type=mon
+### source=192.168.0.2
+### status=up
+
+
+[tile1]
+type=mon
+source=192.168.0.2
+status=down
+
+[tile2]
+type=mon
+source=192.168.2.3
+status=up
+
+[tile3]
+type=mon
+source=192.168.4.3
+status=up
+
+[tile4]
+type=mon
+source=192.168.3.1
+status=down
+
+[tile5]
+type=mon
+source=192.168.4.5
+status=up
+
+[tile6]
+type=mon
+source=192.168.3.2
+status=down
+
+[tile7]
+type=mon
+source=192.168.4.12
+status=up
+
+[tile8]
+type=mon
+source=192.168.3.66
+status=down

--- a/dash.py	Sun Jul 12 18:00:57 2015 +0200
+++ b/dash.py	Wed Jul 15 14:06:03 2015 +0200
@@ -1,9 +1,75 @@
-from bottle import get, post, request, view, response, route, template, run, static_file, error
+from bottle import get, post, request, view, response, route
+from bottle import template, run, static_file, error
+import configparser
+import os.path
 
+CONFIG_FILE = "dash.conf"
+tiles = []
+
+def read_config():
+
+    if os.path.isfile(CONFIG_FILE) == False:
+        write_default_config()
+
+    config = configparser.ConfigParser()
+    config.read(CONFIG_FILE)
+
+    #read the tiles
+    read_tiles_config(config)
+
+def read_tiles_config(config):
+    for section in config.items():
+        if "tile" in section[0]:
+            tiles.append(section[1])
+    # print(tiles[0]["type"])
+
+def write_default_config():
+    file = open("dash.conf", "w")
+    file.write("""
+
+### bottledash default configuration
+### created by sean engelhardt >sean.engelhardt@intevation.de
+### license: GNU GPL >= v2
+###
+### Usage:
+### define the tiles for the dashboard in sections
+###
+### options for tiles:
+###
+### type
+### values: mon, d3.js
+###
+### source (only if type = mon)
+### value: IP or FQDN
+### status
+###
+### status (for debug purpose only | only if type = mon)
+### values: up, down
+###
+### example:
+### [tile1]
+### type=mon
+### source=192.168.0.2
+### status=up
+
+[tile1]
+type=mon
+source=192.168.0.2
+status=down
+
+[tile2]
+type=mon
+source=192.168.2.1
+status=up
+""")
+    file.close()
+
+
+##Bottle
 @route('/')
 @view('hello_template')
 def call_dashboard():
-    return dict()
+    return dict(tiles=tiles)
 
 @route('/config')
 def call_config():
@@ -18,5 +84,6 @@
 def error404(error):
     return 'Nothing here, sorry <br /> 404'
 
-
+read_config()
+print(tiles)
 run(host='localhost', port=8080, debug=True)

--- a/views/hello_template.tpl	Sun Jul 12 18:00:57 2015 +0200
+++ b/views/hello_template.tpl	Wed Jul 15 14:06:03 2015 +0200
@@ -1,21 +1,110 @@
+<%
+    import math
+    break_tile_lines = math.ceil(len(tiles)/2)
+    tilecounter = 1
+    vp_size = 1;
+
+    if len(tiles) <= 2:
+        vp_size = "6vw"
+    elif len(tiles) >2 and len(tiles) <=4 :
+        vp_size = "5vw"
+    elif len(tiles) >4 and len(tiles) <=6 :
+        vp_size = "4vw"
+    elif len(tiles) >6 and len(tiles) <=8 :
+        vp_size = "3vw"
+    end
+%>
 
 <style>
+    *{
+        margin: 0 auto;
+        padding: 0 auto;
+    }
+
     #wrapper{
-        color: red;
+        display: table;
+        color: black;
+        background-color: #F2F2F2;
+        min-width: 100%;
+        min-height: 100%;
+        border-spacing: 10px;
     }
 
     .tile{
+        background-color: #FFFFFF;
+        display:table-cell;
+
+        width: auto;
+        height: auto;
+        border: 1px solid #999999;
+        text-align:center;
+        vertical-align: middle;
+
+        -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
+        -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
+        box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
+
+    }
+
+    .clear{
+        display: table-row;
+        clear: both;
+        margin: 0;
+        padding: 0;
+        height: 0;
+        overflow: hidden;
+    }
+
+    .statusmon{
+        border: 1px solid #000000;
         color: white;
+        font-size: {{vp_size}};
+        font-family: "Lucida Console", Monaco, monospace;
+    }
+
+    .chart{
+        font-size: {{vp_size}};
+        font-family: "Lucida Console", Monaco, monospace;
+    }
+
+    .active{
+        background-color: #009900;
+    }
+
+    .dead{
+        background-color: #990000;
     }
 
 </style>
 
 <div id = "wrapper">
 
+    % for tile in tiles :
+        % type = ""
+        % text = ""
+        % status = ""
+        % if tile["type"] == "mon" :
+            % type = "statusmon"
+            % text = tile["source"]
+            % if tile["status"] == "up" :
+                % status = "active"
+            % elif tile["status"] == "down" :
+                % status = "dead"
+            % end
+        % elif tile["type"] == "d3.js" :
+            % type = "chart"
+            % text = "place for a chart!"
+        % end
 
-<div class = "tile">
+        <div class = "tile {{type}} {{status}}">
+            {{text}}
+        </div>
+
+        % if tilecounter == break_tile_lines:
+            <div class = "clear"></div>
+        % end
+
+        % tilecounter += 1
+    % end
 
 </div>
-dsndsakj
-
-</div>