Skip to content

Commit

Permalink
Initial commit of proof of concept for admin page:
Browse files Browse the repository at this point in the history 
-added new html page + javascript
-used jquery to fetch list of servos from bellhouse
-modified gulpfile to support browserifying of multiple js files
-updated package.json with required dependencies
  • Loading branch information
Pablo Toledo committed Jun 1, 2017
1 parent 5455271 commit ea502b4
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 63 deletions.
56 changes: 40 additions & 16 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
'use strict';

var gulp = require('gulp');

var del = require('del');

var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass');

var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var browserify = require('browserify');

var browserSync = require('browser-sync').create();
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
rename = require('gulp-rename'),
browserify = require('browserify'),
glob = require('glob'),
es = require('event-stream'),
del = require('del'),
htmlmin = require('gulp-htmlmin'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
buffer = require('vinyl-buffer'),
uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create();

const BUILD_DEST = "./build";

Expand Down Expand Up @@ -41,7 +40,32 @@ gulp.task('build:html', function () {
.pipe(gulp.dest(BUILD_DEST));
});

gulp.task('build:js', function () {
/*browserify and merge multiple js files together. See
https://fettblog.eu/gulp-browserify-multiple-bundles/ */
gulp.task('build:js', function(done) {
glob('./src/js/**.js', function(err, files) {
if(err) done(err);

var tasks = files.map(function(entry) {
return browserify({ entries: [entry] })
.bundle()
.pipe(source(entry))
.pipe(rename({
dirname : './',
extname : '.min.js'
}))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(uglify()) //minify
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(BUILD_DEST+'/js/'));
});
es.merge(tasks).on('end', done);
})
});

/*gulp.task('build:js', function () {
// set up the browserify instance on a task basis
var b = browserify({
entries: './src/js/main.js'
Expand All @@ -55,7 +79,7 @@ gulp.task('build:js', function () {
.pipe(uglify()) //minify
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(BUILD_DEST+'/js/'));
});
});*/

gulp.task('build:css', function () {
return gulp.src('./src/sass/*')
Expand Down
5 changes: 5 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"description": "EUPORIAS - ceramic bell project - video stream sampler",
"author": "tpowellmeto <[email protected]>",
"main": "src/js/main.js",
"setup": "src/js/setup.js",
"engines": {
"node": ">=7.9.0"
},
Expand All @@ -17,12 +18,16 @@
"browser-sync": "^2.14.0",
"browserify": "^13.1.0",
"del": "^2.2.1",
"event-stream": "^3.3.4",
"glob": "^7.1.2",
"gulp": "^3.9.1",
"gulp-htmlmin": "^2.0.0",
"gulp-rename": "1.2.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"jquery": "^3.2.1",
"minimatch": "^3.0.3",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
Expand Down
94 changes: 47 additions & 47 deletions src/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,62 @@
<head>
<meta charset="UTF-8">
<title>EUPORIAS :: Ceramic Bell Project :: Video Stream Sampler</title>
<script src="https://use.fontawesome.com/3c353addfa.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<script src="https://use.fontawesome.com/3c353addfa.js"></script>
</head>
<body>
<div id="header" class="pure-g">
<div class="pure-u-1-2">
<img src="./images/bellhouse.png" class="pure-img"/>
</div>
<div class="pure-u-1-2">
<div>
<button class="pure-button pure-button-primary" id="record-button" type="button"><i class="fa fa-play-circle" aria-hidden="true"></i> Start Recording</button>
<div id="header" class="pure-g">
<div class="pure-u-1-2">
<img src="./images/bellhouse.png" class="pure-img"/>
</div>
<br />
<div>
<label>Play Recording:</label>
</div>
<div>
<form class="pure-form">
<fieldset>
<select id="records-list"></select>
<button class="pure-button" id="play-record-button" type="button"><i class="fa fa-play-circle" aria-hidden="true"></i></button>
</fieldset>
</form>
<div class="pure-u-1-2">
<div>
<button class="pure-button pure-button-primary" id="record-button" type="button"><i class="fa fa-play-circle" aria-hidden="true"></i> Start Recording</button>
</div>
<br />
<div>
<label>Play Recording:</label>
</div>
<div>
<form class="pure-form">
<fieldset>
<select id="records-list"></select>
<button class="pure-button" id="play-record-button" type="button"><i class="fa fa-play-circle" aria-hidden="true"></i></button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div id="controls" class="pure-g">
<form class="pure-form pure-u-1-1">
<label><i class="fa fa-th" aria-hidden="true"></i> Sample grid size
<input id="grid-dim-1" type="number" value="8" min="1" max="10"/>
x
<input id="grid-dim-2" type="number" value="6" min="1" max="10"/>
</label>
<label><i class="fa fa-clock-o" aria-hidden="true"></i> Sampling interval
<input id="sample-interval" type="number" step="any" value="3" min="0.1" max="10"/>
seconds
</label>
<label><i class="fa fa-cog" aria-hidden="true"></i> Sampling threshold
<input id="sample-threshold" type="number" step="any" value="5" min="0" max="50"/>
</label>
<button id="sampling-button" type="button"><i class="fa fa-video-camera" aria-hidden="true"></i> Start Sampling</button>
</form>
</div>
<div id="content" class="pure-g">
<div class="pure-u-1-2">
<canvas id="videoCanvas"></canvas>
<div id="controls" class="pure-g">
<form class="pure-form pure-u-1-1">
<label><i class="fa fa-th" aria-hidden="true"></i> Sample grid size
<input id="grid-dim-1" type="number" value="8" min="1" max="10"/>
x
<input id="grid-dim-2" type="number" value="6" min="1" max="10"/>
</label>
<label><i class="fa fa-clock-o" aria-hidden="true"></i> Sampling interval
<input id="sample-interval" type="number" step="any" value="3" min="0.1" max="10"/>
seconds
</label>
<label><i class="fa fa-cog" aria-hidden="true"></i> Sampling threshold
<input id="sample-threshold" type="number" step="any" value="5" min="0" max="50"/>
</label>
<button id="sampling-button" type="button"><i class="fa fa-video-camera" aria-hidden="true"></i> Start Sampling</button>
<button id="setup-button" type="button"><i class="fa fa-cog" aria-hidden="true"></i> Setup</button>
</form>
</div>
<div class="pure-u-1-2">
<div id="samples"></div>
<div id="content" class="pure-g">
<div class="pure-u-1-2">
<canvas id="videoCanvas"></canvas>
</div>
<div class="pure-u-1-2">
<div id="samples"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer">

</div>
<!--<script type="text/javascript" src="js/adapter.js"></script>-->
<script type="text/javascript" src="js/app.min.js"></script>
</div>
<script src="js/main.min.js"></script>
</body>
</html>
36 changes: 36 additions & 0 deletions src/html/setup.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EUPORIAS :: Ceramic Bell Project :: Setup</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<script src="https://use.fontawesome.com/3c353addfa.js"></script>
</head>
<body>
<div id="header" class="pure-g">
<div class="pure-u-1-2">
<img src="./images/bellhouse.png" class="pure-img"/>
</div>
<div class="pure-u-1-2">
<div>
<label>Setup Page</label>
</div>
</div>
</div>
<div id="controls" class="pure-g">
<form class="pure-form pure-u-1-1">
<label>Add Bells
<input id="bell-count" type="number" step="any" value="1" min="0" max="32"/>
</label>
<button id="add-bells-button" type="button"><i class="fa fa-plus" aria-hidden="true"></i> Add </button>
<button id="reset-bells-button" type="button"><i class="fa fa-remove" aria-hidden="true"></i> Reset </button>
<button id="home-button" type="button"><i class="fa fa-check" aria-hidden="true"></i> Done </button>
</form>
</div>
<div id="servos">
</div>

<script src="js/setup.min.js"></script>
</body>
</html>
8 changes: 8 additions & 0 deletions src/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ var threshold = 5;
var samplingInterval, sampleLoop, sample, sampleDiv;
var video, videoCanvas, videoCanvasCtx;

/*Setup event listeners for controls on homepage */
initControls();
initVideo();


function initVideo() {
video = document.createElement('video');
video.width = 600;
Expand All @@ -40,6 +42,7 @@ function initControls() {
var samplingButton = document.getElementById('sampling-button');
var recordingButton = document.getElementById('record-button');
var playRecordingButton = document.getElementById('play-record-button')
var setupButton = document.getElementById('setup-button');


dim1.addEventListener('change', function (evt) {
Expand Down Expand Up @@ -133,6 +136,11 @@ function initControls() {
}
});

setupButton.addEventListener('click', function(evt) {
window.location.href="setup.html"
});


listRecordings();
sampleDiv = document.getElementById('samples');
setGridDims(dim1.value, dim2.value);
Expand Down
44 changes: 44 additions & 0 deletions src/js/setup.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
'use strict';
const CAMERA_FRAME_RATE = 1000 / 20;
const BELL_SERVER = "http://192.168.1.83:5000";

var $ = require("jquery");
var request = require('request');

/*Setup event listeners for controls on setup page */
initSetupPage();



/*Setup event listeners for controls on bell setup page*/
function initSetupPage(){
var homeButton = document.getElementById('home-button');

homeButton.addEventListener('click', function(evt) {
console.log('Clicked done');
window.location.href="index.html"
});

getServos();

}

function getServos() {
var servos = document.getElementById('servos');
$.ajax({
url: 'http://bellhouse.eu.ngrok.io/servos',
method: 'GET'
}).then(function(response) {
console.log("got a response");
$.each(response, function(i, resultset){
console.log(i + ": " + resultset);
$.each(resultset, function(i, result){
console.log(i + ": " + result);
var listItem = document.createElement("li");
var listItemText = document.createTextNode("id: " + result.id + ", rotate by degrees: " + result.rotate_to_deg);
listItem.appendChild(listItemText);
servos.appendChild(listItem);
});
});
});
};

0 comments on commit ea502b4

Please sign in to comment.