added pictures, data, new main template page

git-svn-id: svn://svn.siningsoft.de/myCar@6 4258477e-9397-4ceb-bd8a-6305f6291781

myCar.py

@@ -27,7 +27,7 @@ app = Flask(__name__)
 
 @app.route('/')
 def myCar_root():
-    return render_template('base.html')
+    return render_template('index.html')
 
 @app.route('/bluetooth/controller')
 def myCar_bluetooth_controller():

static/css/pure/side-menu.css

@@ -0,0 +1,248 @@
+body {
+    color: #777;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 150px;
+        width: 150px;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 1700px;
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.header {
+     margin: 0;
+     color: #333;
+     text-align: center;
+     padding: 2.5em 2em 0;
+     border-bottom: 1px solid #eee;
+ }
+    .header h1 {
+        margin: 0.2em 0;
+        font-size: 3em;
+        font-weight: 300;
+    }
+     .header h2 {
+        font-weight: 300;
+        color: #ccc;
+        padding: 0;
+        margin-top: 0;
+    }
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -150px; /* "#menu" width */
+    width: 150px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #999;
+        border: none;
+        padding: 0.6em 0 0.6em 0.6em;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+        /*
+        Change color of the anchor links on hover/focus.
+        */
+        #menu .pure-menu li a:hover,
+        #menu .pure-menu li a:focus {
+            background: #333;
+        }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        background: #1f8dd6;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 110%;
+        color: #fff;
+        margin: 0;
+    }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block; /* show this only on small screens */
+    top: 0;
+    left: 0; /* "#menu width" */
+    background: #000;
+    background: rgba(0,0,0,0.7);
+    font-size: 10px; /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+    .menu-link:hover,
+    .menu-link:focus {
+        background: #000;
+    }
+
+    .menu-link span {
+        position: relative;
+        display: block;
+    }
+
+    .menu-link span,
+    .menu-link span:before,
+    .menu-link span:after {
+        background-color: #fff;
+        width: 100%;
+        height: 0.2em;
+    }
+
+        .menu-link span:before,
+        .menu-link span:after {
+            position: absolute;
+            margin-top: -0.6em;
+            content: " ";
+        }
+
+        .menu-link span:after {
+            margin-top: 0.6em;
+        }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 150px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 150px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 150px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+}
+
+@media (max-width: 48em) {
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 150px;
+    }
+}

static/js/ui.js

@@ -0,0 +1,46 @@
+(function (window, document) {
+
+    var layout   = document.getElementById('layout'),
+        menu     = document.getElementById('menu'),
+        menuLink = document.getElementById('menuLink'),
+        content  = document.getElementById('main');
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/),
+            length = classes.length,
+            i = 0;
+
+        for(; i < length; i++) {
+          if (classes[i] === className) {
+            classes.splice(i, 1);
+            break;
+          }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleAll(e) {
+        var active = 'active';
+
+        e.preventDefault();
+        toggleClass(layout, active);
+        toggleClass(menu, active);
+        toggleClass(menuLink, active);
+    }
+
+    menuLink.onclick = function (e) {
+        toggleAll(e);
+    };
+
+    content.onclick = function(e) {
+        if (menu.className.indexOf('active') !== -1) {
+            toggleAll(e);
+        }
+    };
+
+}(this, this.document));

templates/base.html

@@ -8,6 +8,7 @@
     <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}"/>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/pure/pure-min.css') }}" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/pure/side-menu.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='static/css/pure/grids-responsive.css') }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
@@ -23,6 +24,10 @@
             <a class="pure-menu-heading" href="{{ url_for('myCar_root') }}">Home</a>
 
             <ul class="pure-menu-list">
+
+                <li class="pure-menu-item"><div class="pure-menu-link">Live Data</div></li>
+
+                <li class="pure-menu-item"><div class="pure-menu-link">Recordings</div></li>
    
                 <li class="pure-menu-item"><a href="{{ url_for('myCar_conf') }}" class="pure-menu-link">Configuration</a></li>
                 
@@ -38,11 +43,17 @@
 
     <div id="main">
         <div class="header">
-            <h1>myCar Appliance</h1>
-            <h2>A OBD2 automatic logger appliance</h2>
+
+
+            <table>
+
+                <tr><td><img src="{{ url_for('static', filename='img/logo_smaller.png') }}" class="pure-img"></td>
+                    <td><h1>myCar Appliance</h1><br><h2>A OBD2 automatic logger appliance</h2></td>
+                </tr>
+            </table>
         </div>
 
-        <div class="content">
+        <div class="content" max-width="1700px">
             <p>
                 {% block content %}
                 {% endblock %}
@@ -52,7 +63,17 @@
          <div id="footer">
         <br>
             {% block footer %}
-                 <a href="https://wiki.siningsoft.de/id=mycar:intro">wiki.siningsoft.de</a>.
+
+             <table>
+                <tr><td width="5%">  </td>
+                    <td>
+                        This is free software.<br>
+                        The license is yet undefined ...<br>
+                        <a href="https://wiki.siningsoft.de/id=mycar:intro">myCar project Page at wiki.siningsoft.de</a>
+                    </td>
+                </tr>
+            </table>
+                 
             {% endblock %}
         </div>
     </div>

templates/bluetooth/controller.html

@@ -11,9 +11,9 @@
     </table>
 {% endif %}
 <br>
-    <table>
+    <table class="pure-table pure-table-horizontal">
     <tr>
-        <th>ID</th><th>powered</th><th>Alias</th><th>MAC Address</th>
+        <th> ID </th><th> powered </th><th> Alias </th><th> MAC Address </th>
     </tr>
     {% for ctrl in bt_ctrl %}
         <tr>

templates/bluetooth/devices.html

@@ -14,9 +14,11 @@
 
 {% if bt_dev %}
     <form action='{{url_for('myCar_bluetooth_connect')}}' method='post'>
-    <table>
+
+
+    <table class="pure-table pure-table-horizontal">
     <tr>
-        <th>ID</th><th>Alias</th><th>MAC Address</th><th>RSSI</th>
+        <th>ID</th><th>Alias</th><th>MAC Address</th><th>RSSI</th><th>connect</th>
     </tr>
     {% for dev in bt_dev %}
         <tr>

templates/conf/main.html

@@ -12,25 +12,27 @@
 {% endif %}
 
 <br>
-    <form class="pure-form pure-form-aligned">
-        <fieldset>
-        {% for section in sections %}
-            <h1>Configuration Section <i>{{ section }}</i></h1>
-            
-            
-            {% for confval in config[section] %}
+    <center>
+        <form class="pure-form pure-form-aligned">
+            <fieldset>
+            {% for section in sections %}
+                <h1>Configuration Section <i>{{ section }}</i></h1>
+                
+                
+                {% for confval in config[section] %}
 
-                <div class="pure-control-group">
-                            <label for="[{{ section }}][{{ confval }}]">{{ confval }}</label>
-                            <input id="[{{ section }}][{{ confval }}]" value="{{ config[section][confval] }}" placeholder="{{ confval }}">
-                </div>
-          
+                    <div class="pure-control-group">
+                                <label for="[{{ section }}][{{ confval }}]">{{ confval }}</label>
+                                <input id="[{{ section }}][{{ confval }}]" value="{{ config[section][confval] }}" placeholder="{{ confval }}">
+                    </div>
+              
+                {% endfor %}
+            
             {% endfor %}
-        
-        {% endfor %}
 
-        </fieldset>
-    </form>
-    <button formmethod='post' name='configsend' value='nosave' class="pure-button"><img src='{{ url_for('static', filename='img/nosave.png') }}' width='30px' height='30px'></button>
-    <button formmethod='post' name='configsend' value='save' class="pure-button"><img src='{{ url_for('static', filename='img/save.png') }}' width='30px' height='30px'></button>
+            </fieldset>
+        </form>
+        <button formmethod='post' name='configsend' value='nosave' class="pure-button"><img src='{{ url_for('static', filename='img/nosave.png') }}' width='30px' height='30px'></button>
+        <button formmethod='post' name='configsend' value='save' class="pure-button"><img src='{{ url_for('static', filename='img/save.png') }}' width='30px' height='30px'></button>
+    </center>
 {% endblock %}

templates/index.html

@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+{% block content %}
+
+
+<h1>Statuspage</h1>
+
+<div class="pure-g">
+    <div class="pure-u-1-3"><img src="{{ url_for('static', filename='img/wireless_2.png') }}" class="pure-img"><p>Bluetooth Controller</p></div>
+    <div class="pure-u-1-3"><img src="{{ url_for('static', filename='img/wireless.png') }}" class="pure-img"><p>Wireless Network</p></div>
+    <div class="pure-u-1-3"><img src="{{ url_for('static', filename='img/location.png') }}" class="pure-img"><p>GPS Receiver</p></div>
+</div>
+
+{% endblock %}