adding organized units

application-manager-new
Rasika 10 years ago
parent 3ceed63107
commit 9cd77d88a0

@ -25,15 +25,18 @@ var log = new Log("api/device-api.jag");
var constants = require("/modules/constants.js");
var dcProps = require('/config/dc-props.js').config();
var deviceModule = require("/modules/user.js").deviceModule;
var carbon = require('carbon');
var carbonHttpServletTransport = carbon.server.address('http');
var carbonHttpsServletTransport = carbon.server.address('https');
var result;
if (uriMatcher.match("/{context}/api/device/sketch/")) {
if (uriMatcher.match("/{context}/api/device/sketch/download")) {
sketchType = request.getParameter("sketchType");
deviceType = request.getParameter("deviceType");
if (!sketchType) {
log.error("Sketch Type is empty");
}
@ -44,33 +47,35 @@ if (uriMatcher.match("/{context}/api/device/sketch/")) {
exit();
}
//URL: /iotdevices/FireAlarmManager/device/firealarm/download
fireAlarmManagerService = carbonHttpsServletTransport + "/" + deviceType + "/manager";
sketchDownloadEndPoint = fireAlarmManagerService + "/device/" + sketchType + "/download";
//URL: https://localhost:9443/{deviceType}/download?owner={username}
deviceManagerService = carbonHttpsServletTransport + "/" + deviceType + "/manager";
sketchDownloadEndPoint = deviceManagerService + "/device/" + sketchType + "/download";
response.sendRedirect(sketchDownloadEndPoint + "?owner=" + user.username);
exit();
}
if (uriMatcher.match("/{context}/api/devices/")) {
var constants = require("/modules/constants.js");
exit();//stop execution
} else if (uriMatcher.match("/{context}/api/devices/all")) {
var user = session.get(constants.USER_SESSION_KEY);
if (!user) {
response.sendRedirect(dcProps.appContext + "login?#login-required");
exit();
exit();//stop execution
}
//URL: /iotdevices/DevicesManager/devices/username
devicesManagerService = carbonHttpsServletTransport + "/devicecloud/manager";
listAllDevicesEndPoint = devicesManagerService + "/devices/username/" + user.username;
//URL: https://localhost:9443/devicecloud/manager/devices/username/{username}
deviceCloudService = carbonHttpsServletTransport + "/devicecloud/manager";
listAllDevicesEndPoint = deviceCloudService + "/devices/username/" + user.username;
var data = {};
//XMLHTTPRequest's GET
result = get(listAllDevicesEndPoint, data, "json");
//response.sendRedirect(listAllDevicesEndPoint + "?username="+user.username);
//exit();
} else if (uriMatcher.match("/{context}/api/devices/types")) {
var user = session.get(constants.USER_SESSION_KEY);
if (!user) {
response.sendRedirect(dcProps.appContext + "login?#login-required");
exit();//stop execution
}
result = deviceModule.getAllDevicesTypes();
}
// returning the result.

@ -31,14 +31,23 @@ var statsClient = new Packages.org.wso2.carbon.device.mgt.iot.common.devicecloud
if (uriMatcher.match("/{context}/api/stats")) {
var deviceId = request.getParameter("deviceId");
var from = request.getParameter("from");
var to = request.getParameter("to");
deviceId = request.getParameter("deviceId");
deviceType = request.getParameter("deviceType");
from = request.getParameter("from");
to = request.getParameter("to");
user = session.get(constants.USER_SESSION_KEY);
if (!user) {
response.sendRedirect(dcProps.appContext + "login?#login-required");
exit();
}
log.info("deviceId : " + deviceId + " from : " + from + " to : " + to);
result = getData(getUsername(), deviceId, from, to);
if(deviceType=="firealarm"){
result = getFireAlarmData(user.username, deviceId, from, to);
}else if(deviceType=="sensebot"){
result = getSensebotData(user.username, deviceId, from, to);
}
}
// returning the result.
@ -46,29 +55,23 @@ if (result) {
print(result);
}
function getUsername() {
var user = session.get(constants.USER_SESSION_KEY);
if (user) {
log.info("username: "+ user.username);
return user.username;
} else {
log.info("username is null");
return null;
}
function getSensebotData(user, deviceId, from, to){
result = new Object();
result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY","sonar",user, deviceId, from, to);
result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY","motion",user, deviceId, from, to);
result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY","light",user, deviceId, from, to);
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY","TEMPERATURE",user, deviceId, from, to);
return result;
}
function getData(user, deviceId, from, to) {
function getFireAlarmData(user, deviceId, from, to){
result = new Object();
result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY","sonar",user, deviceId, from, to);
result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY","motion",user, deviceId, from, to);
result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY","light",user, deviceId, from, to);
//result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY","sonar",user, deviceId, from, to);
//result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY","motion",user, deviceId, from, to);
//result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY","light",user, deviceId, from, to);
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY","TEMPERATURE",user, deviceId, from, to);
result['fanData'] = getSensorData("DEVICE_FAN_USAGE_SUMMARY","status",user, deviceId, from, to);
result['bulbData'] = getSensorData("DEVICE_BULB_USAGE_SUMMARY","status",user, deviceId, from, to);
@ -77,7 +80,13 @@ function getData(user, deviceId, from, to) {
function getSensorData(table, column, user, deviceId, from, to) {
var fetchedData = statsClient.getDeviceStats(table, column, user, deviceId, from, to);
var fetchedData = null;
try {
fetchedData = statsClient.getDeviceStats(table, column, user, deviceId, from, to);
}catch(error){
log.info(error);
}
var temperatureData = [];
@ -93,54 +102,4 @@ function getSensorData(table, column, user, deviceId, from, to) {
return temperatureData;
}
// ------------- Sample data generation -----------------
function getSampleData() {
result = new Object();
result['bulbStatusData'] = getBulbStatusSampleData();
result['fanStatusData'] = getFanStatusSampleData();
result['temperatureData'] = getTemperatureSampleData();
return result;
}
function getBulbStatusSampleData(from, to) {
var bulbStatusData = [];
for (var i = 0; i < 100; i++) {
bulbStatusData.push({
time: Date.now() + (i * 1000),
value: Math.floor((Math.random() * 100) + 1) % 2 == 0 ? 'ON' : 'OFF'});
}
return bulbStatusData;
};
function getFanStatusSampleData(from, to) {
var fanStatusData = [];
for (var i = 0; i < 100; i++) {
fanStatusData.push({time: Date.now() + (i * 1000), value: Math.floor((Math.random() * 100) + 1) % 2 == 0 ? 'ON' : 'OFF'});
}
return fanStatusData;
}
function getTemperatureSampleData(from, to) {
var temperatureData = [];
for (var i = 0; i < 100; i++) {
temperatureData.push({time: Date.now() + (i * 1000), value: Math.random() * 100});
}
return temperatureData;
}
%>

@ -30,14 +30,16 @@ var utility = require("/modules/utility.js").utility;
var result;
if (uriMatcher.match("/{context}/api/user/login/")) {
username = request.getParameter("username");
password = request.getParameter("password");
var username = request.getParameter("username");
var password = request.getParameter("password");
try {
userModule.login(username, password, function (user) {
utility.insertAppPermissions(userModule, "login");
if (log.isDebugEnabled()) {
log.debug("User Logged In : " + user);
}
utility.insertAppPermissions(userModule, "login");
response.sendRedirect(constants.WEB_APP_CONTEXT);
}, function () {
response.sendRedirect(dcProps.appContext + "login?#auth-failed");
@ -46,22 +48,27 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
log.error("Exception occurred while a user tried to login to DC", e);
response.sendRedirect(dcProps.appContext + "login?#error");
}
} else if (uriMatcher.match("/{context}/api/user/logout/")) {
userModule.logout(function () {
response.sendRedirect(dcProps.appContext + "login");
});
} else if (uriMatcher.match("/{context}/api/users/register")) {
addUserFormData = request.getContent();
addUserFormData = request.getContent();
username = addUserFormData.username;
firstname = addUserFormData.firstname;
lastname = addUserFormData.lastname;
emailAddress = addUserFormData.emailAddress;
password = addUserFormData.password;
//enable internal subscriptions for APIM
userRoleStr = "Internal/subscriber,Internal/everyone" ;
userRoles = String(userRoleStr).split(",");
if (!addUserFormData.userRoles) {
userRoles = null;
} else {
userRoles = String(addUserFormData.userRoles).split(",");
}
try {
result = userModule.registerUser(username, firstname, lastname, emailAddress, password,
@ -71,10 +78,12 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
// http status code 400 refers to - Bad request.
result = 400;
}
} else if (uriMatcher.match("/{context}/api/users/add")) {
if (userModule.isAuthorized("/permission/device-mgt/admin/users/add")) {
addUserFormData = request.getContent();
addUserFormData = request.getContent();
username = addUserFormData.username;
firstname = addUserFormData.firstname;
lastname = addUserFormData.lastname;
@ -97,10 +106,14 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
// http status code 403 refers to - forbidden.
result = 403;
}
} else if (uriMatcher.match("/{context}/api/users/{username}/remove")) {
if (userModule.isAuthorized("/permission/device-mgt/admin/users/remove")) {
elements = uriMatcher.elements();
username = elements.username;
try {
result = userModule.removeUser(username);
} catch (e) {
@ -108,10 +121,12 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
// http status code 400 refers to - Bad request.
result = 400;
}
} else {
// http status code 403 refers to - forbidden.
result = 403;
}
}
// returning the result.

@ -82,8 +82,40 @@ var route;
};
var renderStatic = function (unit, path) {
log.debug('[' + requestId + '] for unit "' + unit + '" a request received for a static file "' + path + '"');
var staticFile = fuse.getFile(unit, 'public' + path);
var unitModel = null;
var unitName = "";
var parts = (unit + path).split("/");
//'unitName' name can be "unitA" or "categoryA/unitA" or "categoryA/categoryAb/unitB"...etc
//incrementally trying to resolve a unit using url path parts.
for (var i = 0; i < parts.length; i++) {
if (unitName == "") {
unitName = parts[i];
} else {
unitName += "/" + parts[i];
}
try {
var model = fuse.getUnitDefinition(unitName);
if (model) {
unitModel = {
name: model.name,
path: parts.splice(i + 1).join("/")
};
break;
}
} catch (err) {
//unit not found, ignore error
}
}
if (unitModel == null) {
throw '[' + requestId + '] unit "' + unit + path + '" does not exits';
}
var staticFile = fuse.getFile(unitModel.name, 'public' + "/" + unitModel.path);
if (staticFile.isExists() && !staticFile.isDirectory()) {
response.addHeader('Content-type', getMime(path));
response.addHeader('Cache-Control', 'public,max-age=12960000');

@ -1,7 +1,7 @@
//public function declarations
var getHbsFile, getFile, toRelativePath, cleanupAncestors,
getUnitPath, getMatchedUnitDefinitions, getZoneDefinition, getUnitDefinition,
getUnitDefinitions, getLayoutPath;
getUnitDefinitions, getLayoutPath, readUnitDefinitions;
(function () {
//private
@ -15,6 +15,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
for (var i = 0; i < definitions.length; i++) {
var definition = definitions[i];
lookUpTable[definition.name] = i;
//log.info("initLookUp()"+definition.name+"<-"+i);
}
}
};
@ -45,6 +46,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
};
var getAncestorModels = function (unit) {
//log.info('[' + requestId + '] getAncestorModels()'+unit);
var unitModel = getUnitDefinition(unit);
var ancestors = [unitModel];
var parentName;
@ -148,8 +150,10 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
};
getUnitDefinition = function (unit) {
//log.info('[' + requestId + '] getUnitDefinition()'+unit);
var definitions = getUnitDefinitions();
initLookUp(definitions);
//log.info('[' + requestId + '] lookUpTable[unit]:'+unit);
var model = definitions[lookUpTable[unit]];
if (!model) {
log.warn('[' + requestId + '] unit "' + unit + '" does not exits');
@ -187,27 +191,39 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
}
var unitDirs = new File('/units').listFiles();
definitions = readUnitDefinitions("",unitDirs,definitions);
//log.info(definitions);
addPageUnitDefinitions(definitions);
initLookUp(definitions);
flattenAllInheritance(definitions);
return definitions;
};
readUnitDefinitions = function(basePath, unitDirs, definitions){
for (var i = 0; i < unitDirs.length; i++) {
var unitDir = unitDirs[i];
if (unitDir.isDirectory()) {
var unitName = unitDir.getName();
//log.info("reading: "+unitName + " basePath:'" + basePath + "'");
var definitionFile = new File(fuse.getUnitPath(basePath+unitName) + '/' + unitName + '.json');
if(definitionFile.isExists()) {
var unitModel = {
name: unitName,
path: unitDir.getPath()
};
if(basePath!=""){
unitModel.name = basePath + unitName;
}
// unit definition is read form is the <unit name>.json file.
// if doesn't exits it will be an empty json.
var definitionFile = new File(fuse.getUnitPath(unitName) + '/' + unitName + '.json');
if (definitionFile.isExists() && !definitionFile.isDirectory()) {
var path = definitionFile.getPath();
log.debug('[' + requestId + '] reading file "' + path + '"');
unitModel.definition = require(path);
} else {
log.warn('[' + requestId + '] for unit "' + unitName + '", unable to find a definition file');
unitModel.definition = {};
}
// add the information derived by parsing hbs file to the same model
var hbsMetadata = getHbsMetadata(unitModel);
@ -217,14 +233,13 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
}
definitions.push(unitModel);
}else{
var unitSubDirs = new File(fuse.getUnitPath(basePath+"/"+unitName)).listFiles();
readUnitDefinitions(basePath+unitName+"/",unitSubDirs,definitions);
}
}
}
addPageUnitDefinitions(definitions);
initLookUp(definitions);
flattenAllInheritance(definitions);
return definitions;
};
@ -289,14 +304,20 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
if (unit.path.indexOf('.hbs', unit.path.length - 4) !== -1) {
return new File(unit.path);
} else {
if(unit.name.indexOf('/') !== -1){//a subcategory unit
var rawParts = unit.name.split("/");
return new File(unit.path + '/' + rawParts[rawParts.length-1] + '.hbs');
}else {
return new File(unit.path + '/' + unit.name + '.hbs');
}
}
};
var getHbsMetadata = function (unit) {
var zoneDef = {'zones': []};
var hbsFile = getHbsFile(unit);
if (!hbsFile.isExists()) {
log.error("Couldn't find .hbs file at: `" + unit.path + "`");
return zoneDef;
}
var output = handlebars.Handlebars.compileFile(hbsFile)({});
@ -364,11 +385,18 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
* @returns {File}
*/
getFile = function (unitName, path, opt_suffix) {
//log.info("getFile() unitName:"+unitName+", path:"+path+", opt_suffix:"+opt_suffix);
var slashPath = ((path[0] === '/') ? '' : '/') + path;
var selfFileName = '';
var fileName = '';
if (opt_suffix) {
selfFileName = unitName + opt_suffix;
if(unitName.indexOf('/') !== -1) {//a subcategory unit
var rawParts = unitName.split("/");
selfFileName = rawParts[rawParts.length - 1];
}else {
selfFileName = unitName;
}
selfFileName = selfFileName + opt_suffix;
slashPath = slashPath + ((slashPath[slashPath.length - 1] === '/') ? '' : '/');
}
@ -376,8 +404,10 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
var unitDef = getUnitDefinition(unitName);
if (unitDef.path.indexOf('.hbs', unitDef.path.length - 4) !== -1) {
if (opt_suffix.indexOf('.hbs', opt_suffix.length - 4) !== -1) {
//log.info("1:"+unitDef.path);
return new File(unitDef.path);
} else {
//log.info("2:"+unitDef.path.replace(/.hbs$/, opt_suffix));
return new File(unitDef.path.replace(/.hbs$/, opt_suffix));
}
}
@ -388,13 +418,17 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
'[' + requestId + '] for unit "' + unitName + '" file resolved : "'
+ slashPath + selfFileName + '" -> "' + selfFile.getPath() + '"'
);
//log.info("3:"+getUnitPath(unitName) + slashPath + selfFileName);
return selfFile;
}
var ancestors = getAncestorModels(unitName);
for (var i = 1; i < ancestors.length; i++) {
var ancestorName = ancestors[i].name;
if(ancestorName.indexOf('/') !== -1) {//a subcategory unit
var rawParts = ancestorName.split("/");
ancestorName = rawParts[rawParts.length - 1];
}
if (opt_suffix) {
fileName = ancestorName + opt_suffix;
}
@ -404,6 +438,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
'[' + requestId + '] for unit "' + unitName + '" file resolved : "'
+ slashPath + selfFileName + '" -> "' + file.getPath() + '"'
);
//log.info("4:"+getUnitPath(ancestorName) + slashPath + fileName);
return file;
}
}
@ -411,6 +446,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
'[' + requestId + '] for unit "' + unitName + '" (non-excising) file resolved : "'
+ slashPath + selfFileName + '" -> "' + selfFile.getPath() + '"'
);
//log.info("5:"+getUnitPath(unitName) + slashPath + selfFileName);
return selfFile;
};

@ -0,0 +1,43 @@
/*
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var deviceModule;
var carbon = require('carbon');
var carbonHttpServletTransport = carbon.server.address('http');
var carbonHttpsServletTransport = carbon.server.address('https');
deviceModule = function () {
var log = new Log("modules/device.js");
var constants = require("/modules/constants.js");
var utility = require("/modules/utility.js").utility;
var publicMethods = {};
var privateMethods = {};
publicMethods.getAllDevicesTypes = function(){
//URL: https://localhost:9443/devicecloud/manager/devices/username/{username}
deviceCloudService = carbonHttpsServletTransport + "/devicecloud/manager";
listAllDeviceTypesEndPoint = deviceCloudService + "/devices/types";
var data = {};
//XMLHTTPRequest's GET
return get(listAllDeviceTypesEndPoint, data, "json");
};
}();

@ -4,5 +4,5 @@
{{/zone}}
{{#zone "body"}}
{{unit "appbar"}}
{{unit "arduino"}}
{{unit "devices/arduino"}}
{{/zone}}

@ -4,5 +4,5 @@
{{/zone}}
{{#zone "body"}}
{{unit "appbar"}}
{{unit "digitaldisplay"}}
{{unit "devices/digitaldisplay"}}
{{/zone}}

@ -4,5 +4,5 @@
{{/zone}}
{{#zone "body"}}
{{unit "appbar"}}
{{unit "firealarm"}}
{{unit "devices/firealarm"}}
{{/zone}}

@ -4,5 +4,5 @@
{{/zone}}
{{#zone "body"}}
{{unit "appbar"}}
{{unit "sensebot"}}
{{unit "devices/sensebot"}}
{{/zone}}

@ -16,6 +16,7 @@
<tr class="grey-bg">
<th class="uppercase">Device ID</th>
<th class="uppercase">Name</th>
<th class="uppercase">Type</th>
<th class="uppercase center">Action</th>
</tr>
</thead>
@ -23,7 +24,7 @@
{{! All devices will be listed here @see: alldevices_util.js}}
<tr class="border-top">
<th scope="row"></th>
<td colspan="2">
<td colspan="3">
No Devices available.
</td>
</tr>

@ -2,23 +2,3 @@ function onRequest(context) {
context.myDevicePath = "/iot/mydevice";
return context;
}
//{
// "device": [
// {
// "dateOfEnrolment": 1432978481443,
// "dateOfLastUpdate": 1432978481443,
// "deviceIdentifier": "qhnva32dy2ck",
// "deviceTypeId": 1,
// "id": 1,
// "name": "rasikas_firealarm_qhn",
// "owner": "rasika",
// "properties": {
// "name": "DEVICE_NAME",
// "value": "rasikas_firealarm_qhn"
// },
// "status": "ACTIVE",
// "type": "firealarm"
// }
//]
//}

@ -1,6 +1,6 @@
function getAllDevices(){
function getAllDevices() {
var getDevicesRequest = $.ajax({
url: "api/devices",
url: "api/devices/all/",
method: "GET",
contentType: "application/json"
});
@ -17,31 +17,33 @@ function getAllDevices(){
function updateDevicesTable(data) {
devices = data.data.device;
if (devices) {
$('#devicesTable tbody > tr').remove();
if (devices.length > 0) {
clearTable('devicesTable');
for (var i = 0; i < devices.length; i++) {
var deviceIdentifier = devices[i].deviceIdentifier;
var deviceName = devices[i].name;
var deviceType = devices[i].type;
$('#devicesTable tbody').append(
"<tr class='border-top'><th scope='row'>"+deviceIdentifier+"</th>"+
"<td>"+deviceName+"</td>"+
"<td class='float-right border-top '>"+
"<button class='btn-black-action' name='deviceId' value='"+deviceIdentifier+"'>"+
"<i class='fw fw-view padding-right'></i>View</button>"+
"<button class='btn-black-action' name='deviceId' value='"+deviceIdentifier+"'>"+
"<i class='fw fw-edit padding-right'></i>Edit</button>"+
"<button class='btn-black-action' name='deviceId' value='"+deviceIdentifier+"'>"+
"<i class='fw fw-delete padding-right'></i>Remove</button>"+
"<tr class='border-top'><th scope='row'>" + deviceIdentifier + "</th>" +
"<td>" + deviceName + "</td>" +
"<td>" + deviceType + "</td>" +
"<td class='float-right border-top '>" +
"<input type='hidden' name='deviceType' value='" + deviceType + "' >" +
"<button class='btn-black-action' name='deviceId' value='" + deviceIdentifier + "'>" +
"<i class='fw fw-view padding-right'></i>View</button>" +
"<button class='btn-black-action' name='deviceId' value='" + deviceIdentifier + "'>" +
"<i class='fw fw-edit padding-right'></i>Edit</button>" +
"<button class='btn-black-action' name='deviceId' value='" + deviceIdentifier + "'>" +
"<i class='fw fw-delete padding-right'></i>Remove</button>" +
"</td></tr>");
}
}
}
function clearTable(tableId){
$('#'+tableId+' tbody > tr').remove();
function clearTable(tableId) {
$('#' + tableId + ' tbody > tr').remove();
}
$(document).ready(function() {
console.log("getAllDevices()");
$(document).ready(function () {
getAllDevices();
});

@ -11,7 +11,7 @@
</div>
<div class="row margin-bottom-double">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{self.publicURL}}/images/Arduino_Uno_-_R3.png" class="img-responsive">
<img src="{{self.publicURL}}/images/arduino.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h2 class="uppercase">Ingredients</h2>

@ -0,0 +1,4 @@
function onRequest(context){
context.sketchPath = "api/device/sketch/download";
return context;
}

@ -11,7 +11,7 @@
</div>
<div class="row margin-bottom-double">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{self.publicURL}}/images/digital_display.png" class="img-responsive">
<img src="{{self.publicURL}}/images/digitaldisplay.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h2 class="uppercase">Ingredients</h2>

@ -0,0 +1,4 @@
function onRequest(context){
context.sketchPath = "api/device/sketch/download";
return context;
}

@ -0,0 +1,4 @@
function onRequest(context){
context.sketchPath = "api/device/sketch/download";
return context;
}

@ -0,0 +1,4 @@
function onRequest(context){
context.sketchPath = "api/device/sketch/download";
return context;
}

@ -8,7 +8,7 @@
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'moment'], factory);
define(['jquery.daterangepicker.js', 'moment.min'], factory);
} else if (typeof exports === 'object' && typeof module !== 'undefined') {
// CommonJS. Register as a module
module.exports = factory(require('jquery'), require('moment'));

@ -1,4 +0,0 @@
function onRequest(context){
context.sketchPath = "api/device/sketch";
return context;
}

@ -1,4 +0,0 @@
function onRequest(context){
context.sketchPath = "api/device/sketch";
return context;
}

@ -1,11 +1,12 @@
{{#zone "topCss"}}
<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>
<!--<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>-->
<link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
{{/zone}}
{{#zone "topJs"}}
<!-- -->
<script src="{{self.publicURL}}/js/d3.min.js"></script>
<script src="{{self.publicURL}}/js/nv.d3.js"></script>
<!--<script src="{{self.publicURL}}/js/d3.min.js"></script>-->
<!--<script src="{{self.publicURL}}/js/nv.d3.js"></script>-->
<script src="{{self.publicURL}}/js/Chart.min.js"></script>
<script src="{{self.publicURL}}/js/stream_layers.js"></script>
<script src="{{self.publicURL}}/js/moment.min.js"></script>
<script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
@ -30,53 +31,51 @@
</div>
<div class="clear"></div>
<div class="row margin-double">
<div class="chart1">
<div>
<h2 class="grey ">Temperature</h2>
<hr>
<svg></svg>
<div id="canvas-wrapper1">No data available...</div>
</div>
<hr>
</div>
<div class="row margin-double padding-double "></div>
<div class="row margin-double">
<div class="chart2">
<div>
<h2 class="grey ">Light</h2>
<hr>
<svg></svg>
<div id="canvas-wrapper2">No data available...</div>
</div>
<hr>
</div>
<div class="row margin-double">
<div class="chart3">
<div>
<h2 class="grey ">Motion</h2>
<hr>
<svg></svg>
<div id="canvas-wrapper3">No data available...</div>
</div>
<hr>
</div>
<div class="row margin-double">
<div class="chart4">
<div>
<h2 class="grey ">Sonar</h2>
<hr>
<svg></svg>
<div id="canvas-wrapper4">No data available...</div>
</div>
<hr>
</div>
<div class="row margin-double">
<div class="chart5">
<h2 class="grey ">Fan</h2>
<div>
<h2 class="grey ">Fan Status</h2>
<hr>
<svg></svg>
<div id="canvas-wrapper5">No data available...</div>
</div>
<hr>
</div>
<div class="row margin-double">
<div class="chart6">
<h2 class="grey ">Bulb</h2>
<div>
<h2 class="grey ">Bulb Status</h2>
<hr>
<svg></svg>
<div id="canvas-wrapper6">No data available...</div>
</div>
<hr>
</div>
@ -87,10 +86,10 @@ When they are moved the script tags get repeated for some reason :-(
-->
<script src="{{self.publicURL}}/js/graph_util.js"></script>
<script src="{{self.publicURL}}/js/bulb.js"></script>
<script src="{{self.publicURL}}/js/fan_graph.js"></script>
<script src="{{self.publicURL}}/js/bulb_graph.js"></script>
<script src="{{self.publicURL}}/js/temperature_graph.js"></script>
<script src="{{self.publicURL}}/js/light_graph.js"></script>
<script src="{{self.publicURL}}/js/motion_graph.js"></script>
<script src="{{self.publicURL}}/js/sonar_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/fan_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/bulb_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/temperature_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/light_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/motion_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/sonar_graph.js"></script>
{{/zone}}

@ -1,216 +1,7 @@
/********************
* SVG CSS
*/
svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Trying to get SVG to act like a greedy block in all browsers */
display: block;
width:100%;
height:100%;
}
/********************
Default CSS for an svg element nvd3 used
*/
svg.nvd3-svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
display: block;
}
/********************
Box shadow and border radius styling
*/
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/********************
* TOOLTIP CSS
*/
.nvtooltip {
position: absolute;
background-color: rgba(255,255,255,1.0);
padding: 1px;
border: 1px solid rgba(0,0,0,.2);
z-index: 10000;
font-family: Arial;
font-size: 13px;
text-align: left;
pointer-events: none;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Give tooltips that old fade in transition by
putting a "with-transitions" class on the container div.
*/
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
transition: opacity 50ms linear;
-moz-transition: opacity 50ms linear;
-webkit-transition: opacity 50ms linear;
transition-delay: 200ms;
-moz-transition-delay: 200ms;
-webkit-transition-delay: 200ms;
}
.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
padding: 8px;
}
.nvtooltip h3 {
margin: 0;
padding: 4px 14px;
line-height: 18px;
font-weight: normal;
background-color: rgba(247,247,247,0.75);
text-align: center;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 1px 5px 0 0;
}
.nvtooltip p {
margin: 0;
padding: 5px 14px;
text-align: center;
}
.nvtooltip span {
display: inline-block;
margin: 2px 0;
}
.nvtooltip table {
margin: 6px;
border-spacing:0;
}
.nvtooltip table td {
padding: 2px 9px 2px 0;
vertical-align: middle;
}
.nvtooltip table td.key {
font-weight:normal;
}
.nvtooltip table td.value {
text-align: right;
font-weight: bold;
}
.nvtooltip table tr.highlight td {
padding: 1px 9px 1px 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-style: solid;
border-top-width: 1px;
}
.nvtooltip table td.legend-color-guide div {
width: 8px;
height: 8px;
vertical-align: middle;
}
.nvtooltip .footer {
padding: 3px;
text-align: center;
}
.nvtooltip-pending-removal {
position: absolute;
pointer-events: none;
}
.nvd3 text {
font: normal 12px Arial;
}
.nvd3 .title {
font: bold 14px Arial;
}
.nvd3 .nv-background {
fill: white;
fill-opacity: 0;
}
.nvd3.nv-noData {
font-size: 18px;
font-weight: bold;
}
/**********
* Brush
*/
.nv-brush .extent {
fill-opacity: .125;
shape-rendering: crispEdges;
}
/**********
* Legend
*/
.nvd3 .nv-legend .nv-series {
cursor: pointer;
}
.nvd3 .nv-legend .nv-disabled circle {
fill-opacity: 0;
}
/**********
* Axes
*/
.axis {
opacity: 1;
}
.axis.nv-disabled {
opacity: 0;
}
/* nvd3 version 1.8.1 (https://github.com/novus/nvd3) 2015-06-17 */
.nvd3 .nv-axis {
pointer-events:none;
opacity: 1;
}
.nvd3 .nv-axis path {
@ -235,7 +26,7 @@ svg.nvd3-svg {
}
.nvd3 .nv-axis .zero line,
/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
stroke-opacity: .75;
}
@ -249,27 +40,11 @@ svg.nvd3-svg {
text-anchor: middle
}
/**********
* Brush
*/
.nv-brush .resize path {
fill: #eee;
stroke: #666;
}
/**********
* Bars
*/
.nvd3 .nv-bars .negative rect {
zfill: brown;
.nvd3 .nv-axis.nv-disabled {
opacity: 0;
}
.nvd3 .nv-bars rect {
zfill: steelblue;
fill-opacity: .75;
transition: fill-opacity 250ms linear;
@ -293,11 +68,6 @@ svg.nvd3-svg {
fill: rgba(0,0,0,1);
}
/**********
* Bars
*/
.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-discretebar .nv-groups rect {
@ -310,6 +80,7 @@ svg.nvd3-svg {
.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover {
fill-opacity: 1;
}
@ -321,65 +92,115 @@ svg.nvd3-svg {
stroke: rgba(0,0,0,0);
}
/***********
* Pie Chart
*/
/* boxplot CSS */
.nvd3 .nv-boxplot circle {
fill-opacity: 0.5;
}
.nvd3.nv-pie path {
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
.nvd3 .nv-boxplot circle:hover {
fill-opacity: 1;
}
.nvd3 .nv-boxplot rect:hover {
fill-opacity: 1;
}
.nvd3.nv-pie .nv-pie-title {
font-size: 24px;
fill: rgba(19, 196, 249, 0.59);
.nvd3 line.nv-boxplot-median {
stroke: black;
}
.nvd3.nv-pie .nv-slice text {
stroke: #000;
stroke-width: 0;
.nv-boxplot-tick:hover {
stroke-width: 2.5px;
}
/* bullet */
.nvd3.nv-bullet { font: 10px sans-serif; }
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
.nvd3.nv-bullet .nv-subtitle { fill: #999; }
.nvd3.nv-pie path {
stroke: #fff;
.nvd3.nv-bullet .nv-range {
fill: #bababa;
fill-opacity: .4;
}
.nvd3.nv-bullet .nv-range:hover {
fill-opacity: .7;
}
.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
stroke-width: 1px;
stroke-opacity: 1;
}
.nvd3.nv-pie .hover path {
fill-opacity: .7;
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
stroke-width: 2px;
}
.nvd3.nv-pie .nv-label {
pointer-events: none;
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
stroke: #2ca02c;
fill: #2ca02c;
}
.nvd3.nv-pie .nv-label rect {
fill-opacity: 0;
stroke-opacity: 0;
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
stroke: #d62728;
fill: #d62728;
}
/**********
* Lines
*/
.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
.nvd3 .nv-groups path.nv-line {
fill: none;
stroke-width: 1.5px;
}
.nvd3 .nv-groups path.nv-line.nv-thin-line {
stroke-width: 1px;
.nvd3.nv-candlestickBar .nv-ticks line {
stroke: #333;
}
.nvd3 .nv-groups path.nv-area {
stroke: none;
.nvd3 .nv-legend .nv-disabled rect {
/*fill-opacity: 0;*/
}
.nvd3 .nv-line.hover path {
stroke-width: 6px;
.nvd3 .nv-check-box .nv-box {
fill-opacity:0;
stroke-width:2;
}
.nvd3 .nv-check-box .nv-check {
fill-opacity:0;
stroke-width:4;
}
.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
fill-opacity:0;
stroke-opacity:0;
}
.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
opacity: 0;
}
/* line plus bar */
.nvd3.nv-linePlusBar .nv-bar rect {
fill-opacity: .75;
}
.nvd3.nv-linePlusBar .nv-bar rect:hover {
fill-opacity: 1;
}
.nvd3 .nv-groups path.nv-line {
fill: none;
}
.nvd3 .nv-groups path.nv-area {
stroke: none;
}
.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
@ -407,110 +228,215 @@ svg.nvd3-svg {
stroke-opacity: .95 !important;
}
.nvd3 .nv-point-paths path {
stroke: #aaa;
stroke-opacity: 0;
fill: #eee;
fill-opacity: 0;
.nvd3 .nv-point-paths path {
stroke: #aaa;
stroke-opacity: 0;
fill: #eee;
fill-opacity: 0;
}
.nvd3 .nv-indexLine {
cursor: ew-resize;
}
/********************
* SVG CSS
*/
/********************
Default CSS for an svg element nvd3 used
*/
svg.nvd3-svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
display: block;
width:100%;
height:100%;
}
/********************
Box shadow and border radius styling
*/
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nvd3 text {
font: normal 12px Arial;
}
.nvd3 .title {
font: bold 14px Arial;
}
.nvd3 .nv-background {
fill: white;
fill-opacity: 0;
}
.nvd3.nv-noData {
font-size: 18px;
font-weight: bold;
}
/**********
* Brush
*/
.nv-brush .extent {
fill-opacity: .125;
shape-rendering: crispEdges;
}
.nv-brush .resize path {
fill: #eee;
stroke: #666;
}
/**********
* Legend
*/
.nvd3 .nv-legend .nv-series {
cursor: pointer;
}
.nvd3 .nv-legend .nv-disabled circle {
fill-opacity: 0;
}
/* focus */
.nvd3 .nv-brush .extent {
fill-opacity: 0 !important;
}
.nvd3 .nv-brushBackground rect {
stroke: #000;
stroke-width: .4;
fill: #fff;
fill-opacity: .7;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
stroke-width: 1px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
stroke-width: 2px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
stroke: #2ca02c;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
stroke: #d62728;
}
.nvd3 .nv-indexLine {
cursor: ew-resize;
.nvd3 .background path {
fill: none;
stroke: #EEE;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.nvd3 .foreground path {
fill: none;
stroke-opacity: .7;
}
/**********
* Distribution
*/
.nvd3 .nv-parallelCoordinates-brush .extent
{
fill: #fff;
fill-opacity: .6;
stroke: gray;
shape-rendering: crispEdges;
}
.nvd3 .nv-distribution {
pointer-events: none;
.nvd3 .nv-parallelCoordinates .hover {
fill-opacity: 1;
stroke-width: 3px;
}
/**********
* Scatter
*/
.nvd3 .missingValuesline line {
fill: none;
stroke: black;
stroke-width: 1;
stroke-opacity: 1;
stroke-dasharray: 5, 5;
}
.nvd3.nv-pie path {
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 20px;
stroke-opacity: .5;
}
.nvd3 .nv-scatter .nv-point.hover {
fill-opacity: 1;
.nvd3.nv-pie .nv-pie-title {
font-size: 24px;
fill: rgba(19, 196, 249, 0.59);
}
.nvd3.nv-pie .nv-slice text {
stroke: #000;
stroke-width: 0;
}
/**********
* Stacked Area
*/
.nvd3.nv-pie path {
stroke: #fff;
stroke-width: 1px;
stroke-opacity: 1;
}
.nvd3.nv-stackedarea path.nv-area {
.nvd3.nv-pie .hover path {
fill-opacity: .7;
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
}
.nvd3.nv-stackedarea path.nv-area.hover {
fill-opacity: .9;
.nvd3.nv-pie .nv-label {
pointer-events: none;
}
.nvd3.nv-stackedarea .nv-groups .nv-point {
stroke-opacity: 0;
.nvd3.nv-pie .nv-label rect {
fill-opacity: 0;
stroke-opacity: 0;
}
/**********
* Line Plus Bar
*/
.nvd3.nv-linePlusBar .nv-bar rect {
fill-opacity: .75;
/* scatter */
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 20px;
stroke-opacity: .5;
}
.nvd3.nv-linePlusBar .nv-bar rect:hover {
.nvd3 .nv-scatter .nv-point.hover {
fill-opacity: 1;
}
/**********
* Bullet
*/
.nvd3.nv-bullet { font: 10px sans-serif; }
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
.nvd3.nv-bullet .nv-subtitle { fill: #999; }
.nvd3.nv-bullet .nv-range {
fill: #bababa;
fill-opacity: .4;
}
.nvd3.nv-bullet .nv-range:hover {
fill-opacity: .7;
.nv-noninteractive {
pointer-events: none;
}
.nv-distx, .nv-disty {
pointer-events: none;
}
/**********
* Sparkline
*/
/* sparkline */
.nvd3.nv-sparkline path {
fill: none;
}
@ -522,7 +448,7 @@ svg.nvd3-svg {
.nvd3.nv-sparklineplus .nv-hoverValue line {
stroke: #333;
stroke-width: 1.5px;
}
}
.nvd3.nv-sparklineplus,
.nvd3.nv-sparklineplus g {
@ -559,81 +485,151 @@ svg.nvd3-svg {
font-weight: bold;
font-size: 1.1em;
}
/* stacked area */
.nvd3.nv-stackedarea path.nv-area {
fill-opacity: .7;
stroke-opacity: 0;
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
}
/**********
* historical stock
*/
.nvd3.nv-stackedarea path.nv-area.hover {
fill-opacity: .9;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
stroke-width: 1px;
.nvd3.nv-stackedarea .nv-groups .nv-point {
stroke-opacity: 0;
fill-opacity: 0;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
stroke-width: 2px;
.nvtooltip {
position: absolute;
background-color: rgba(255,255,255,1.0);
color: rgba(0,0,0,1.0);
padding: 1px;
border: 1px solid rgba(0,0,0,.2);
z-index: 10000;
display: block;
font-family: Arial;
font-size: 13px;
text-align: left;
pointer-events: none;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
stroke: #2ca02c;
.nvtooltip {
background: rgba(255,255,255, 0.8);
border: 1px solid rgba(0,0,0,0.5);
border-radius: 4px;
}
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
stroke: #d62728;
/*Give tooltips that old fade in transition by
putting a "with-transitions" class on the container div.
*/
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
transition: opacity 50ms linear;
-moz-transition: opacity 50ms linear;
-webkit-transition: opacity 50ms linear;
transition-delay: 200ms;
-moz-transition-delay: 200ms;
-webkit-transition-delay: 200ms;
}
.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
font-weight: bold;
.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
padding: 8px;
}
.nvd3.nv-historicalStockChart .nv-dragTarget {
fill-opacity: 0;
stroke: none;
cursor: move;
.nvtooltip h3 {
margin: 0;
padding: 4px 14px;
line-height: 18px;
font-weight: normal;
background-color: rgba(247,247,247,0.75);
color: rgba(0,0,0,1.0);
text-align: center;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.nvd3 .nv-brush .extent {
fill-opacity: 0 !important;
.nvtooltip p {
margin: 0;
padding: 5px 14px;
text-align: center;
}
.nvd3 .nv-brushBackground rect {
stroke: #000;
stroke-width: .4;
fill: #fff;
fill-opacity: .7;
.nvtooltip span {
display: inline-block;
margin: 2px 0;
}
.nvtooltip table {
margin: 6px;
border-spacing:0;
}
/**********
* Parallel Coordinates
*/
.nvd3 .background path {
fill: none;
stroke: #EEE;
stroke-opacity: .4;
shape-rendering: crispEdges;
.nvtooltip table td {
padding: 2px 9px 2px 0;
vertical-align: middle;
}
.nvd3 .foreground path {
fill: none;
stroke-opacity: .7;
.nvtooltip table td.key {
font-weight:normal;
}
.nvtooltip table td.value {
text-align: right;
font-weight: bold;
}
.nvd3 .brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
.nvtooltip table tr.highlight td {
padding: 1px 9px 1px 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-style: solid;
border-top-width: 1px;
}
.nvd3 .axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.nvtooltip table td.legend-color-guide div {
width: 8px;
height: 8px;
vertical-align: middle;
}
.nvtooltip table td.legend-color-guide div {
width: 12px;
height: 12px;
border: 1px solid #999;
}
.nvd3 .axis text {
text-shadow: 0 1px 0 #fff;
.nvtooltip .footer {
padding: 3px;
text-align: center;
}
.nvtooltip-pending-removal {
pointer-events: none;
display: none;
}
/****
Interactive Layer
*/

File diff suppressed because one or more lines are too long

@ -1,64 +0,0 @@
var bulbChart;
nv.addGraph(function () {
bulbChart = nv.models.lineChart()
.interpolate("step-after")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
bulbChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
bulbChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
bulbChart.yAxis
.axisLabel('ON / OFF')
.tickValues(1)
.tickFormat(function(d) {
return d == 1 ? 'ON' : 'OFF'
})
;
d3.select('.chart6 svg')
.datum(getBulbChartData())
.call(bulbChart);
nv.utils.windowResize(bulbChart.update);
return bulbChart;
});
function getBulbChartData() {
return [
{
area: true,
values: [],
key: "Bulb",
color: "#34500e"
}
];
}
function updateBulbGraph(fanData) {
var chartData = getBulbChartData();
chartData[0]['values'] = fanData;
d3.select('.chart6 svg')
.datum(chartData)
.transition().duration(500)
.call(bulbChart);
}

@ -1,64 +0,0 @@
var bulbStatusChart;
nv.addGraph(function () {
bulbStatusChart = nv.models.lineChart()
.interpolate("step-after")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
bulbStatusChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
bulbStatusChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
bulbStatusChart.yAxis
.axisLabel('ON / OFF')
.tickValues(1)
.tickFormat(function (d) {
return d == 1 ? 'ON' : 'OFF'
})
;
d3.select('.chart3 svg')
.datum(getBulbStatusChartData)
.call(bulbStatusChart);
nv.utils.windowResize(bulbStatusChart.update);
return bulbStatusChart;
});
function getBulbStatusChartData() {
return [
{
area: true,
step: true,
values: [],
key: "Bulb Status",
color: "#ff500e"
}
];
}
function updateBulbStatusGraph(bulbStatusData) {
var chartData = getBulbStatusChartData();
chartData[0]['values'] = bulbStatusData;
d3.select('.chart3 svg')
.datum(chartData)
.transition().duration(500)
.call(bulbStatusChart);
}

File diff suppressed because one or more lines are too long

@ -1,63 +0,0 @@
var fanChart;
nv.addGraph(function () {
fanChart = nv.models.lineChart()
.interpolate("step-after")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
fanChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
fanChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
fanChart.yAxis
.axisLabel('Fan (Status)')
.tickFormat(function(d) {
return d == 1 ? 'ON' : 'OFF'
})
;
d3.select('.chart5 svg')
.datum(getFanChartData())
.call(fanChart);
nv.utils.windowResize(fanChart.update);
return fanChart;
});
function getFanChartData() {
return [
{
area: true,
values: [],
key: "Fan",
color: "#34500e"
}
];
}
function updateFanGraph(fanData) {
var chartData = getFanChartData();
chartData[0]['values'] = fanData;
d3.select('.chart5 svg')
.datum(chartData)
.transition().duration(500)
.call(fanChart);
}

@ -1,63 +0,0 @@
var fanStatusChart;
nv.addGraph(function () {
fanStatusChart = nv.models.lineChart()
.interpolate("step-after")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
fanStatusChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
fanStatusChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
fanStatusChart.yAxis
.axisLabel('ON / OFF')
.tickValues(1)
.tickFormat(function (d) {
return d == 1 ? 'ON' : 'OFF'
})
;
d3.select('.chart2 svg')
.datum(getFanStatusChartData)
.call(fanStatusChart);
nv.utils.windowResize(fanStatusChart.update);
return fanStatusChart;
});
function getFanStatusChartData() {
return [
{
area: true,
step: true,
values: [],
key: "Fan Status",
color: "#ff7f0e"
}
];
}
function updateFanStatusGraph(fanStatusData) {
var chartData = getFanStatusChartData();
chartData[0]['values'] = fanStatusData;
d3.select('.chart2 svg')
.datum(chartData)
.transition().duration(500)
.call(fanStatusChart);
}

@ -42,17 +42,40 @@ $('#date-range1').dateRangePicker(configObject)
toDate = dateRange.date2 != "Invalid Date" ? dateRange.date2.getTime() / 1000 : null;
});
var now = new Date();
var startDate = new Date(now.getTime() - (60*60*24*100));
var endDate = new Date(now.getTime());
var DateRange = customFormatDate(startDate,configObject.format) +" "+ configObject.separator +" "+ customFormatDate(endDate,configObject.format);
console.log(DateRange);
$( document ).ready(function() {
$('#date-range1').val(DateRange);
$('#date-range1').trigger('datepicker-apply',
{
'value': DateRange,
'date1' : startDate,
'date2' : endDate
});
$('#btn-draw-graphs').trigger("click");
});
//26.04.2015 08:46 to 22.07.2015 08:46
$('#btn-draw-graphs').on('click', function () {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
console.log("device id:"+deviceId);
getStats(deviceId, fromDate, toDate);
getStats(deviceId, deviceType, fromDate, toDate);
});
function getStats(deviceId, from, to) {
function getStats(deviceId, deviceType, from, to) {
var requestData = new Object();
requestData['deviceId'] = deviceId;
requestData['deviceType'] = deviceType;
if (from) {
requestData['from'] = from;
@ -108,6 +131,8 @@ function updateGraphs(stats) {
updateFanGraph(convertStateStatsToGraphData(fanData));
var bulbData = stats['bulbData'];
console.log("bulbData...");
console.log(bulbData);
updateBulbGraph(convertStateStatsToGraphData(bulbData));
}
@ -115,7 +140,7 @@ function updateGraphs(stats) {
function convertStatsToGraphData(stats) {
var graphData = new Array();
if(!stats){return graphData;}
for (var i = 0; i < stats.length; i++) {
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: stats[i]['value']})
}
@ -128,7 +153,7 @@ function convertStatsToGraphData(stats) {
function convertStateStatsToGraphData(stats){
var graphData = new Array();
if(!stats){return graphData;}
var yValue;
for(var i = 0; i < stats.length; i++){
yValue = -1;
@ -144,3 +169,45 @@ function convertStateStatsToGraphData(stats){
return graphData;
}
function arrayMin(arr) {
var len = arr.length, min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
};
function arrayMax(arr) {
var len = arr.length, max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
};
function customFormatDate(timeStamp, formatString){
console.log("came"+formatString);
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YYYY=timeStamp.getFullYear();
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
formatString = formatString.replace("YYYY",YYYY).replace("MM",MM).replace("DD",DD).replace("D",D);
console.log(formatString);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("hhh",hhh).replace("HH",hh).replace("h",h).replace("mm",mm).replace("m",m).replace("ss",ss).replace("s",s).replace("ampm",ampm).replace("AMPM",AMPM);
}

@ -0,0 +1,144 @@
//var bulbChart;
//
//nv.addGraph(function () {
//
// bulbChart = nv.models.lineChart()
// .interpolate("step-after")
// .options({
// transitionDuration: 300,
// useInteractiveGuideline: true
// })
// ;
//
// bulbChart.xScale(d3.time.scale());
//
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
// bulbChart.xAxis
// .axisLabel("Date/Time")
// .ticks(d3.time.seconds)
// .tickFormat(function (d) {
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
// })
// .staggerLabels(true)
// ;
//
// bulbChart.yAxis
// .axisLabel('ON / OFF')
// .tickValues(1)
// .tickFormat(function(d) {
// return d == 1 ? 'ON' : 'OFF'
// })
// ;
//
// d3.select('.chart6 svg')
// .datum(getBulbChartData())
// .call(bulbChart);
//
// nv.utils.windowResize(bulbChart.update);
//
// return bulbChart;
//});
//
//function getBulbChartData() {
//
// return [
// {
// area: true,
// values: [],
// key: "Bulb",
// color: "#34500e"
// }
// ];
//
//}
//
function updateBulbGraph(bulbData) {
//var chartData = getBulbChartData();
//chartData[0]['values'] = fanData;
//
//d3.select('.chart6 svg')
// .datum(chartData)
// .transition().duration(500)
// .call(bulbChart);
renderBulbChart(bulbData);
}
function renderBulbChart(chartData){
var chartWrapperElmId = "#canvas-wrapper5";
var chartCanvasId="canvas5";
if(chartData.length==0){
$(chartWrapperElmId).html("No data available...");
return;
}
var label=[];
var data=[];
var maxLabels=20;
var showLabel=Math.floor(chartData.length/maxLabels);
for(i=0;i<chartData.length;i++) {
if(i%showLabel==0) {
var timeStamp = new Date(chartData[i].x);
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
}else{
label.push("");
}
data.push(chartData[i].y);
}
console.log(data);
console.log(label);
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
var lineChartData = {
labels : label,
datasets : [
{
fillColor : "rgba(61, 144, 215, 0.2)",
strokeColor : "rgba(61, 144, 215, 1)",
pointColor : "rgba(61, 144, 215, 1)",
pointStrokeColor : "#fff",
data : data
}
]
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false,
scaleLabel: function (valuePayload) {
if (Number(valuePayload.value) === 0) {
return 'OFF';
} else if (Number(valuePayload.value) === 1) {
return 'ON';
}else{
return '';
}
},
scaleStartValue: 0
});
}
function customFormat(timeStamp, formatString){
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
}

@ -0,0 +1,143 @@
//var fanChart;
//
//nv.addGraph(function () {
//
// fanChart = nv.models.lineChart()
// .interpolate("step-after")
// .options({
// transitionDuration: 300,
// useInteractiveGuideline: true
// })
// ;
//
// fanChart.xScale(d3.time.scale());
//
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
// fanChart.xAxis
// .axisLabel("Date/Time")
// .ticks(d3.time.seconds)
// .tickFormat(function (d) {
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
// })
// .staggerLabels(true)
// ;
//
// fanChart.yAxis
// .axisLabel('Fan (Status)')
// .tickFormat(function(d) {
// return d == 1 ? 'ON' : 'OFF'
// })
// ;
//
// d3.select('.chart5 svg')
// .datum(getFanChartData())
// .call(fanChart);
//
// nv.utils.windowResize(fanChart.update);
//
// return fanChart;
//});
//
//function getFanChartData() {
//
// return [
// {
// area: true,
// values: [],
// key: "Fan",
// color: "#34500e"
// }
// ];
//
//}
//
function updateFanGraph(fanData) {
//var chartData = getFanChartData();
//chartData[0]['values'] = fanData;
//
//d3.select('.chart5 svg')
// .datum(chartData)
// .transition().duration(500)
// .call(fanChart);
renderFanChart(fanData);
}
function renderFanChart(chartData){
var chartWrapperElmId = "#canvas-wrapper6";
var chartCanvasId="canvas6";
if(chartData.length==0){
$(chartWrapperElmId).html("No data available...");
return;
}
var label=[];
var data=[];
var maxLabels=20;
var showLabel=Math.floor(chartData.length/maxLabels);
for(i=0;i<chartData.length;i++) {
if(i%showLabel==0) {
var timeStamp = new Date(chartData[i].x);
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
}else{
label.push("");
}
data.push(chartData[i].y);
}
console.log(data);
console.log(label);
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
var lineChartData = {
labels : label,
datasets : [
{
fillColor : "rgba(221,100,64, 0.2)",
strokeColor : "rgba(221,100,64, 1)",
pointColor : "rgba(221,100,64, 1)",
pointStrokeColor : "#fff",
data : data
}
]
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false,
scaleLabel: function (valuePayload) {
if (Number(valuePayload.value) === 0) {
return 'OFF';
} else if (Number(valuePayload.value) === 1) {
return 'ON';
}else{
return '';
}
},
scaleStartValue: 0
});
}
function customFormat(timeStamp, formatString){
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
}

@ -0,0 +1,130 @@
//var lightChart;
//
//nv.addGraph(function () {
//
// lightChart = nv.models.lineChart()
// .interpolate("linear")
// .options({
// transitionDuration: 300,
// useInteractiveGuideline: true
// })
// ;
//
// lightChart.xScale(d3.time.scale());
//
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
// lightChart.xAxis
// .axisLabel("Date/Time")
// .ticks(d3.time.seconds)
// .tickFormat(function (d) {
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
// })
// .staggerLabels(true)
// ;
//
// lightChart.yAxis
// .axisLabel('Light')
// ;
//
// d3.select('.chart2 svg')
// .datum(getLightChartData())
// .call(lightChart);
//
// nv.utils.windowResize(lightChart.update);
//
// return lightChart;
//});
//
//function getLightChartData() {
//
// return [
// {
// area: true,
// values: [],
// key: "Light",
// color: "#34500e"
// }
// ];
//
//}
//
function updateLightGraph(lightData) {
//var chartData = getLightChartData();
//chartData[0]['values'] = lightData;
//
//d3.select('.chart2 svg')
// .datum(chartData)
// .transition().duration(500)
// .call(lightChart);
renderLightChart(lightData);
}
function renderLightChart(chartData){
var chartWrapperElmId = "#canvas-wrapper2";
var chartCanvasId="canvas2";
if(chartData.length==0){
$(chartWrapperElmId).html("No data available...");
return;
}
var label=[];
var data=[];
var maxLabels=20;
var showLabel=Math.floor(chartData.length/maxLabels);
for(i=0;i<chartData.length;i++) {
if(i%showLabel==0) {
var timeStamp = new Date(chartData[i].x);
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
}else{
label.push("");
}
data.push(chartData[i].y);
}
console.log(data);
console.log(label);
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
var lineChartData = {
labels : label,
datasets : [
{
fillColor : "rgba(255, 174, 0, 0.2)",
strokeColor : "rgba(255, 174, 0, 1)",
pointColor : "rgba(255, 174, 0, 1)",
pointStrokeColor : "#fff",
data : data
}
]
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
});
}
function customFormat(timeStamp, formatString){
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
}

@ -0,0 +1,130 @@
//var motionChart;
//
//nv.addGraph(function () {
//
// motionChart = nv.models.lineChart()
// .interpolate("linear")
// .options({
// transitionDuration: 300,
// useInteractiveGuideline: true
// })
// ;
//
// motionChart.xScale(d3.time.scale());
//
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
// motionChart.xAxis
// .axisLabel("Date/Time")
// .ticks(d3.time.seconds)
// .tickFormat(function (d) {
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
// })
// .staggerLabels(true)
// ;
//
// motionChart.yAxis
// .axisLabel('Motion')
// ;
//
// d3.select('.chart3 svg')
// .datum(getMotionChartData())
// .call(motionChart);
//
// nv.utils.windowResize(motionChart.update);
//
// return motionChart;
//});
//
//function getMotionChartData() {
//
// return [
// {
// area: true,
// values: [],
// key: "Motion",
// color: "#34500e"
// }
// ];
//
//}
//
function updateMotionGraph(motionData) {
//var chartData = getMotionChartData();
//chartData[0]['values'] = motionData;
//
//d3.select('.chart3 svg')
// .datum(chartData)
// .transition().duration(500)
// .call(motionChart);
renderMotionChart(motionData);
}
function renderMotionChart(chartData){
var chartWrapperElmId = "#canvas-wrapper3";
var chartCanvasId="canvas3";
if(chartData.length==0){
$(chartWrapperElmId).html("No data available...");
return;
}
var label=[];
var data=[];
var maxLabels=20;
var showLabel=Math.floor(chartData.length/maxLabels);
for(i=0;i<chartData.length;i++) {
if(i%showLabel==0) {
var timeStamp = new Date(chartData[i].x);
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
}else{
label.push("");
}
data.push(chartData[i].y);
}
console.log(data);
console.log(label);
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
var lineChartData = {
labels : label,
datasets : [
{
fillColor : "rgba(255, 0, 115, 0.2)",
strokeColor : "rgba(255, 0, 115, 1)",
pointColor : "rgba(255, 0, 115, 1)",
pointStrokeColor : "#fff",
data : data
}
]
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
});
}
function customFormat(timeStamp, formatString){
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
}

@ -0,0 +1,130 @@
//var sonarChart;
//
//nv.addGraph(function () {
//
// sonarChart = nv.models.lineChart()
// .interpolate("linear")
// .options({
// transitionDuration: 300,
// useInteractiveGuideline: true
// })
// ;
//
// sonarChart.xScale(d3.time.scale());
//
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
// sonarChart.xAxis
// .axisLabel("Date/Time")
// .ticks(d3.time.seconds)
// .tickFormat(function (d) {
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
// })
// .staggerLabels(true)
// ;
//
// sonarChart.yAxis
// .axisLabel('Sonar')
// ;
//
// d3.select('.chart4 svg')
// .datum(getSonarChartData())
// .call(sonarChart);
//
// nv.utils.windowResize(sonarChart.update);
//
// return sonarChart;
//});
//
//function getSonarChartData() {
//
// return [
// {
// area: true,
// values: [],
// key: "Sonar",
// color: "#34500e"
// }
// ];
//
//}
//
function updateSonarGraph(sonarData) {
//
// var chartData = getSonarChartData();
// chartData[0]['values'] = sonarData;
//
// d3.select('.chart4 svg')
// .datum(chartData)
// .transition().duration(500)
// .call(sonarChart);
renderSonarChart(sonarData);
}
function renderSonarChart(chartData){
var chartWrapperElmId = "#canvas-wrapper4";
var chartCanvasId="canvas4";
if(chartData.length==0){
$(chartWrapperElmId).html("No data available...");
return;
}
var label=[];
var data=[];
var maxLabels=20;
var showLabel=Math.floor(chartData.length/maxLabels);
for(i=0;i<chartData.length;i++) {
if(i%showLabel==0) {
var timeStamp = new Date(chartData[i].x);
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
}else{
label.push("");
}
data.push(chartData[i].y);
}
console.log(data);
console.log(label);
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
var lineChartData = {
labels : label,
datasets : [
{
fillColor : "rgba(90, 130, 232, 0.2)",
strokeColor : "rgba(90, 130, 232, 1)",
pointColor : "rgba(90, 130, 232, 1)",
pointStrokeColor : "#fff",
data : data
}
]
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
});
}
function customFormat(timeStamp, formatString){
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
}

@ -0,0 +1,137 @@
//var temperatureChart;
//
//nv.addGraph(function () {
// var height = 350;
// temperatureChart = nv.models.lineChart();
//
// temperatureChart.margin({left: 100}) ; //Adjust chart margins to give the x-axis some breathing room.
// temperatureChart.useInteractiveGuideline(true) ; //We want nice looking tooltips and a guideline!
// temperatureChart.showLegend(true) ; //Show the legend, allowing users to turn on/off line series.
// temperatureChart.showYAxis(true) ; //Show the y-axis
// temperatureChart.showXAxis(true) ; //Show the x-axis
// temperatureChart.height(height) ; //Show the x-axis
//
//
// temperatureChart.xScale(d3.time.scale());
// temperatureChart.forceY([0,100]);
//
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
// temperatureChart.xAxis
// .axisLabel("Date/Time")
// .ticks(d3.time.seconds)
// .tickFormat(function (d) {
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
// })
// .staggerLabels(true)
// ;
//
// temperatureChart.yAxis
// .axisLabel('Temperature (C)')
// ;
//
// d3.select('.chart1 svg')
// .datum(getTemperatureChartData())
// .call(temperatureChart)
// .transition().duration(500)
// .style({'height': height });
// nv.utils.windowResize(temperatureChart.update);
//
// return temperatureChart;
//});
//
//function getTemperatureChartData() {
//
// return [
// {
// area: true,
// values: [],
// key: "Temperature"
// }
// ];
//
//}
function updateTemperatureGraph(temperatureData) {
//var chartData = getTemperatureChartData();
//chartData[0]['values'] = temperatureData;
//
//d3.select('.chart1 svg')
// .datum(chartData)
// .transition().duration(500)
// .call(temperatureChart);
//
//temperatureChart.forceY([0,30]);
//
//nv.utils.windowResize(temperatureChart.update);
console.log("temperatureData");
renderTemperatureChart(temperatureData);
}
function renderTemperatureChart(chartData){
var chartWrapperElmId = "#canvas-wrapper1";
var chartCanvasId="canvas1";
if(chartData.length==0){
$(chartWrapperElmId).html("No data available...");
return;
}
var label=[];
var data=[];
var maxLabels=20;
var showLabel=Math.floor(chartData.length/maxLabels);
for(i=0;i<chartData.length;i++) {
if(i%showLabel==0) {
var timeStamp = new Date(chartData[i].x);
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
}else{
label.push("");
}
data.push(chartData[i].y);
}
console.log(data);
console.log(label);
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
var lineChartData = {
labels : label,
datasets : [
{
fillColor : "rgba(49, 195, 166, 0.2)",
strokeColor : "rgba(49, 195, 166, 1)",
pointColor : "rgba(49, 195, 166, 1)",
pointStrokeColor : "#fff",
data : data
}
]
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
});
}
function customFormat(timeStamp, formatString){
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
}

@ -1,60 +0,0 @@
var lightChart;
nv.addGraph(function () {
lightChart = nv.models.lineChart()
.interpolate("linear")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
lightChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
lightChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
lightChart.yAxis
.axisLabel('Light')
;
d3.select('.chart2 svg')
.datum(getLightChartData())
.call(lightChart);
nv.utils.windowResize(lightChart.update);
return lightChart;
});
function getLightChartData() {
return [
{
area: true,
values: [],
key: "Light",
color: "#34500e"
}
];
}
function updateLightGraph(lightData) {
var chartData = getLightChartData();
chartData[0]['values'] = lightData;
d3.select('.chart2 svg')
.datum(chartData)
.transition().duration(500)
.call(lightChart);
}

@ -1,4 +0,0 @@
function onRequest(context){
context.sketchPath = "api/device/sketch";
return context;
}

@ -1,60 +0,0 @@
var motionChart;
nv.addGraph(function () {
motionChart = nv.models.lineChart()
.interpolate("linear")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
motionChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
motionChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
motionChart.yAxis
.axisLabel('Motion')
;
d3.select('.chart3 svg')
.datum(getMotionChartData())
.call(motionChart);
nv.utils.windowResize(motionChart.update);
return motionChart;
});
function getMotionChartData() {
return [
{
area: true,
values: [],
key: "Motion",
color: "#34500e"
}
];
}
function updateMotionGraph(motionData) {
var chartData = getMotionChartData();
chartData[0]['values'] = motionData;
d3.select('.chart3 svg')
.datum(chartData)
.transition().duration(500)
.call(motionChart);
}

@ -1,60 +0,0 @@
var sonarChart;
nv.addGraph(function () {
sonarChart = nv.models.lineChart()
.interpolate("linear")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
sonarChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
sonarChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
sonarChart.yAxis
.axisLabel('Sonar')
;
d3.select('.chart4 svg')
.datum(getSonarChartData())
.call(sonarChart);
nv.utils.windowResize(sonarChart.update);
return sonarChart;
});
function getSonarChartData() {
return [
{
area: true,
values: [],
key: "Sonar",
color: "#34500e"
}
];
}
function updateSonarGraph(sonarData) {
var chartData = getSonarChartData();
chartData[0]['values'] = sonarData;
d3.select('.chart4 svg')
.datum(chartData)
.transition().duration(500)
.call(sonarChart);
}

@ -1,60 +0,0 @@
var temperatureChart;
nv.addGraph(function () {
temperatureChart = nv.models.lineChart()
.interpolate("linear")
.options({
transitionDuration: 300,
useInteractiveGuideline: true
})
;
temperatureChart.xScale(d3.time.scale());
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
temperatureChart.xAxis
.axisLabel("Date/Time")
.ticks(d3.time.seconds)
.tickFormat(function (d) {
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
})
.staggerLabels(true)
;
temperatureChart.yAxis
.axisLabel('Temperature (C)')
;
d3.select('.chart1 svg')
.datum(getTemperatureChartData())
.call(temperatureChart);
nv.utils.windowResize(temperatureChart.update);
return temperatureChart;
});
function getTemperatureChartData() {
return [
{
area: true,
values: [],
key: "Temperature",
color: "#34500e"
}
];
}
function updateTemperatureGraph(temperatureData) {
var chartData = getTemperatureChartData();
chartData[0]['values'] = temperatureData;
d3.select('.chart1 svg')
.datum(chartData)
.transition().duration(500)
.call(temperatureChart);
}

@ -14,7 +14,7 @@
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/Fire-alarm.png" >
<img src="{{self.publicURL}}/images/firealarm-thumb.png" >
</div>
<h2 class="white center">Fire Alarm</h2>
<div class="text-wrapper">
@ -29,7 +29,7 @@
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/sensebot.png" >
<img src="{{self.publicURL}}/images/sensebot-thumb.png" >
</div>
<h2 class="white center">SenseBot</h2>
<div class="text-wrapper">
@ -44,7 +44,7 @@
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/digitaldisplay.png" >
<img src="{{self.publicURL}}/images/digitaldisplay-thumb.png" >
</div>
<h2 class="white center">Digital Display</h2>
<div class="text-wrapper">
@ -58,7 +58,7 @@
<div class=" col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
<div class="product-wrapper rounded dark-grey center">
<div class="icon-wrapper">
<img src="{{self.publicURL}}/images/ArduinoUno.png" >
<img src="{{self.publicURL}}/images/arduino-thumb.png" >
</div>
<h2 class="white center">ArduinoUno</h2>
<div class="text-wrapper">

Loading…
Cancel
Save