Static asset management (#57)

Add web app with static asset management.

.gitignore

@@ -1,4 +1,22 @@
 settings.db
 database.db
+
+node_modules/
+bower_components/
+*.log
+
 *.py[cod]
 *~
+
+*.min.js
+*.min.css
+*.css.map
+.sass-cache/
+
+# Font files
+**/fonts/*.otf
+**/fonts/*.eot
+**/fonts/*.svg
+**/fonts/*.ttf
+**/fonts/*.woff
+**/fonts/*.woff2

.travis.yml

@@ -1,21 +1,23 @@
 language: python
 
 python:
+  - '3.5'
   - '3.4'
   - '2.7'
 
 addons:
   apt:
     packages:
     - tesseract-ocr
+    - nodejs
 
 services:
   - mongodb
 
 install:
-  - pip install coveralls
-  - pip install flake8
+  - pip install -r dev-requirements.txt
   - pip install -r requirements.txt
+  - npm install
 
 script:
   - flake8 salvius

Gruntfile.js

@@ -0,0 +1,77 @@
+module.exports = function(grunt) {
+
+var path = require('path');
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    uglify: {
+      options: {
+        mangle: true,
+        preserveComments: false
+      },
+      assets: {
+        files: {
+          'salvius/static/js/assets.min.js': [
+            'bower_components/jquery/dist/jquery.js',
+            'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
+            'bower_components/chartist/dist/chartist.js',
+            'bower_components/jquery-knob/js/jquery.knob.js',
+            'bower_components/jquery-network-camera/jquery.network-camera.js',
+            'bower_components/jquery-throttle-debounce/jquery.ba-throttle-debounce.js',
+            'bower_components/moment/moment.js',
+            'bower_components/virtualjoystick.js/virtualjoystick.js'
+          ]
+        }
+      },
+      robot: {
+        files: {
+          'salvius/static/js/robot.min.js': [
+            'salvius/static/js/robot.js',
+            'salvius/static/js/robot.torso.js',
+            'salvius/static/js/robot.status.js',
+            'salvius/static/js/robot.events.js',
+          ]
+        }
+      }
+    },
+
+    sass: {
+      dist: {
+        files: {
+          'salvius/static/css/assets.min.css': 'salvius/static/css/assets.sass'
+        }
+      }
+    },
+
+    copy: {
+      fonts: {
+        files: [
+          {
+            cwd: 'bower_components/font-awesome/fonts/',
+            src: '*',
+            dest: 'salvius/static/fonts/',
+            expand: true,
+            filter: 'isFile'
+          }
+        ]
+      }
+    }
+
+
+  });
+
+  // Load tasks
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-sass');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+
+  grunt.registerTask('default', [
+    'uglify:assets',
+    'uglify:robot',
+    'sass',
+    'copy:fonts'
+  ]);
+
+};

MANIFEST.in

@@ -0,0 +1,20 @@
+include license.md
+include readme.md
+include requirements.txt
+include dev-requirements.txt
+include apt-requirements.txt
+include bower.json
+include package.json
+
+recursive-include salvius/templates/* *.html
+recursive-include salvius/static/* *.sass
+recursive-include salvius/static/* *.js
+recursive-include scripts/*
+
+recursive-exclude bower_components
+recursive-exclude node_modules
+recursive-exclude * *.min.css
+recursive-exclude * *.css.map
+recursive-exclude * *.min.js
+recursive-exclude * *.pyc
+recursive-exclude * *.py~

apt-requirements.txt

@@ -11,3 +11,4 @@ sudo apt-get install python-pip pyaudio
 sudo apt-get install bison libasound2-dev swig python-dev mplayer
 # required only if the system is not x86-based Windows/Linux/OS X
 sudo apt-get install flac
+sudo apt-get install nodejs

bower.json

@@ -0,0 +1,33 @@
+{
+  "name": "salvius.interface",
+  "authors": [
+    "Gunther Cox <gunthercx@gmail.com>"
+  ],
+  "description": "Web based robot control panel.",
+  "license": "MIT",
+  "homepage": "http://salvius.org",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "^2.2.3",
+    "virtualjoystick.js": "*",
+    "chartist": "^0.9.7",
+    "moment": "^2.13.0",
+    "bootstrap-sass": "^3.3.7",
+    "font-awesome": "^4.6.3",
+    "jquery-network-camera": "^0.0.3",
+    "jquery-throttle-debounce": "https://github.com/cowboy/jquery-throttle-debounce.git#v1.1",
+    "jquery-knob": "^1.2.13"
+  },
+  "exportsOverride": {
+    "font-awesome": {
+      "fonts": "fonts/*"
+    }
+  }
+}

dev-requirements.txt

@@ -0,0 +1,2 @@
+coveralls
+flake8

license.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Gunther Cox
+Copyright (c) 2016 Gunther Cox
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "salvius.interface",
+  "author": {
+    "name": "Gunther Cox",
+    "email": "gunthercx@gmail.com",
+    "url": "https://github.com/gunthercox"
+  },
+  "repository": "https://github.com/gunthercox/salvius",
+  "description": "Visual interface for robots.",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "bower": "^1.7.9",
+    "grunt": "^1.0.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-uglify": "^2.0.0",
+    "grunt-sass": "^1.2.1"
+  },
+  "scripts": {
+    "postinstall": "bower install && grunt"
+  },
+  "bugs": {
+    "url": "https://github.com/gunthercox/salvius/issues"
+  }
+}

requirements.txt

@@ -1,4 +1,5 @@
 chatterbot>=0.3.5
+flask>=0.11,<0.12
 iot_analytics>=0.0.1
 psutil==2.2.1
 speechrecognition>=3.2.0

salvius/static/css/assets.sass

@@ -0,0 +1,5 @@
+@import '../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss'
+@import '../../../bower_components/font-awesome/scss/font-awesome.scss'
+@import '../../../bower_components/chartist/dist/scss/chartist.scss'
+@import 'variables.scss'
+@import 'style.scss'

salvius/static/css/style.scss

@@ -0,0 +1,142 @@
+body {
+    padding: 0px;
+}
+
+/* Range sliders */
+
+$range-input-gb: rgba(98, 4, 16, 0.32);
+$range-input-border: rgba(69, 13, 13, 0.44);
+$range-input-thumb: rgba(136, 0, 0, 0.4);
+
+input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    border-radius: 20px;
+    background-color: $range-input-thumb;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: $range-input-border;
+
+    height: 40px;
+    width: 40px;
+}
+
+input[type="range"].horizontal {
+    -webkit-appearance: none;
+
+    width: 100%;
+    height: 10px;
+    outline: none;
+    background-color: $range-input-gb;
+    vertical-align: middle;
+
+    margin-bottom: 10px;
+}
+
+/* Lists */
+
+ul {
+    list-style: none;
+}
+
+output {
+    color: #fff;
+}
+
+/* Conatiner overlays */
+
+.background-container {
+    height: 100vh;
+    background: black;
+    overflow: hidden;
+}
+
+.foreground-container {
+    height: 100vh;
+    width: 100%;
+    background: rgba(136, 0, 0, 0.4);
+    position: absolute;
+    top: 0;
+    padding-top: 15px;
+    overflow: auto;
+    padding-bottom: 70px;
+}
+
+/* Custom navbar */
+
+.navbar-inverse {
+    .btn-default {
+        background: transparent;
+        border-top-width: 0px;
+        border-bottom-width: 0px;
+        border-color: #010101;
+        border-radius: 0px;
+        color: #2FA875;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        text-shadow: 0 1px 0 #000;
+    }
+
+    .btn-default .fa {
+        font-size: 30px;
+    }
+
+    .btn-default .text-wide {
+        padding-top: 2px;
+        font-size: 10px;
+        letter-spacing: 3px;
+    }
+}
+
+.navbar-inverse>.btn-group>.btn-group:first-child>.btn {
+    border-left-color: transparent;
+}
+
+.navbar-inverse>.btn-group>.btn-group:not(:last-child)>.btn {
+    border-right-color: transparent;
+}
+
+.navbar-inverse>.btn {
+    overflow: hidden;
+}
+
+/* LEDs */
+
+.led {
+	width: 8px;
+	height: 8px;
+    display: inline-block;
+ 	border-radius: 4px;
+	-webkit-transition: background-color 350ms, box-shadow 700ms;
+ 	transition: background-color 350ms, box-shadow 700ms;
+}
+
+.led.red {
+	background-color: rgb(226,0,0);
+	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250, 5), 0px 0px 3px 2px rgba(226,0,0,0.5);
+}
+
+.led.green {
+	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250, 5), 0px 0px 3px 2px rgba(135,187,83,0.5);
+	background-color: rgb(135,187,83);
+}
+
+/* Additional components */
+
+.chat-log {
+    height: 200px;
+    resize: none;
+    overflow-y: auto;
+}
+
+.chat-log .text:nth-child(even) {
+    color: green;
+}
+
+.chat-log .text:nth-child(odd) {
+    color: blue;
+}
+
+.readout {
+    font-size: 10px;
+}