Mercurial > bottledash
changeset 5:c49f7fe82743
changed the grid layout to a more responsive and compatible self-calculating JS based version
author | sean |
---|---|
date | Wed, 22 Jul 2015 10:25:27 +0200 |
parents | 3e66e2f92770 |
children | 3acc5164369e |
files | dash.conf dash.py views/hello_template.tpl |
diffstat | 3 files changed, 142 insertions(+), 71 deletions(-) [+] |
line wrap: on
line diff
--- a/dash.conf Wed Jul 15 15:13:07 2015 +0200 +++ b/dash.conf Wed Jul 22 10:25:27 2015 +0200 @@ -41,25 +41,15 @@ [tile4] type=mon -source=192.168.3.1 -status=down +source=192.168.4.3 +status=up [tile5] type=mon -source=192.168.4.5 +source=192.168.4.3 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 +source=192.168.4.3 +status=up \ No newline at end of file
--- a/dash.py Wed Jul 15 15:13:07 2015 +0200 +++ b/dash.py Wed Jul 22 10:25:27 2015 +0200 @@ -20,6 +20,8 @@ config = configparser.ConfigParser() config.read(CONFIG_FILE) + + #read the tiles read_tiles_config(config) @@ -70,7 +72,6 @@ """) file.close() - ##Bottle @route('/') @view('hello_template')
--- a/views/hello_template.tpl Wed Jul 15 15:13:07 2015 +0200 +++ b/views/hello_template.tpl Wed Jul 22 10:25:27 2015 +0200 @@ -3,79 +3,156 @@ License: GNU GPL >= v2. See LICENSE for details. --> <% - 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 + import math + from datetime import date + + ################# + # date and time # + ################# + + + today = date.today() + weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag", + "Freitag", "Samstag", "Sonntag")[today.weekday()] + month_name = ("Januar", "Februar", "März", "Aprill", "Mai", + "Juni", "Juli", "August", "September", "Oktober", + "November", "Dezember")[today.month-1] + + + ################## + # size of tiles # + ################## + + number_of_rows = 3 + + ################# + # viewport size # + ################# + + vp_size = "12px" + + #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 %> +<script type="text/javascript"> + + var global_width; + var global_height; + var tile_width; + var tile_height; + + var tiles = document.getElementsByClassName("tile"); + var border_width = 1; + var space_between_tiles = 8; + + var space_lr_borders; + var space_lr_margin; + + function calc_tile_with(){ + var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); + var distance = (space_between_tiles*2) + (border_width*2) + var tile_width = ((global_width / tiles_per_row ) - distance); + return tile_width; + } + + function resize_content(){ + global_width = document.getElementById("content").clientWidth; + global_height = document.getElementById("content").clientHeight; + + + tile_width = calc_tile_with(); + tile_height = (global_height / {{number_of_rows}}); + + for(var tile = 0; tile < tiles.length; tile++){ + tiles[tile].style.width= tile_width + 'px'; + tiles[tile].style.height= tile_height + 'px'; + } + } + + window.onresize = function(){ + resize_content(); + } + + document.addEventListener("DOMContentLoaded", function(event) { + resize_content(); + }); + +</script> + <style> *{ margin: 0 auto; padding: 0 auto; + font-family: "Lucida Console", Monaco, monospace; + } + + body { + overflow: hidden; } #wrapper{ - display: table; + background-color: #F2F2F2; color: black; - background-color: #F2F2F2; min-width: 100%; min-height: 100%; - border-spacing: 10px; + } + + #topbar{ + min-width: auto; + padding-left: 8px; + padding-top: 8px; + padding-bottom: 8px; + /*height: 5%;*/ + font-family: Arial, Helvetica, sans-serif; + } + + #content{ + min-width: 100%; + height:95%; } .tile{ + float: left; + margin: 8px; background-color: #FFFFFF; - display:table-cell; - - width: auto; - height: auto; border: 1px solid #999999; + border: none; 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; + height: 0px; clear: both; - margin: 0; - padding: 0; - height: 0; - overflow: hidden; } + /*tiles types*/ + .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{ + border: 1px solid #00cc00; background-color: #009900; } .dead{ + border: 1px solid #cc0000; background-color: #990000; } @@ -83,32 +160,35 @@ <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 id = "topbar"> + <b>{{weekday}}</b> {{today.day}}. {{month_name}} + </div> + <div id = "content"> + + <% + 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 {{type}} {{status}}"> {{text}} </div> - % if tilecounter == break_tile_lines: - <div class = "clear"></div> % end - % tilecounter += 1 - % end - -</div> + </div> +</div> \ No newline at end of file