Skip to content

Instantly share code, notes, and snippets.

@industrialinternet
Last active December 21, 2015 06:18
Show Gist options
  • Save industrialinternet/6262728 to your computer and use it in GitHub Desktop.
Save industrialinternet/6262728 to your computer and use it in GitHub Desktop.
Web sliders
//T5 Analog Outputs
const ON=1
const OFF=0
// Array that holds the state of each pin
pinState <- [ 0, 0, 0, 0, 0, 0];
// Pins array channel 1 is channelPin[0] in array
Pins <- [ hardware.pin1, hardware.pin2, hardware.pin5, hardware.pin7, hardware.pin8, hardware.pin9 ];
// Register imp
imp.configure("T5 Analog Outputs",[],[]);
server.log("T5_Analog_Outputs - v1.0");
agent.on("setValues", function(agentMSG) {
local val = agentMSG.sliderVal.tofloat()/100;
if(agentMSG.sliderID =="slider1"){
server.log("slider1:"+val);
Pins[0].write(val);
} else if (agentMSG.sliderID =="slider2"){
server.log("slider2:"+val);
Pins[2].write(val);
} else if (agentMSG.sliderID =="slider3"){
server.log("slider3:"+val);
// Only 2 DACs on an imp01
}
});
// Configure output pins
Pins[0].configure(ANALOG_OUT);
Pins[0].write(0);
Pins[2].configure(ANALOG_OUT);
Pins[2].write(0);
//Set slider valves
server.log("T5 Analog Outputs v1.1");
function requestHandler(request,res){
server.log("reqMethod:"+request.method);
res.header("Access-Control-Allow-Origin", "*");
if(request.method=="OPTIONS"){
res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
res.header("Access-Control-Allow-Headers", "origin, x-csrftoken, content-type, accept");
res.send(200,"OK.OPTIONS");
}
if(request.method=="POST"){
local settings = http.jsondecode(request.body);
server.log(settings.sliderID+","+settings.sliderVal);
if("sliderID" in settings && "sliderVal" in settings){
device.send("setValues",settings);
res.header("AgentResponce", "Settings_OK");
} else {
res.header("AgentResponce", "Settings_Error");
}
res.header("Access-Control-Expose-Headers", "AgentResponce");
res.send(200,"OK.POST");
} else {
res.header("Access-Control-Expose-Headers", "AgentResponce");
res.send(400,"Error.POST");
}
}
http.onrequest(requestHandler);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="cc_startup.png" />
<link rel="apple-touch-icon" href="cc_screen_icon.png" />
<title>T5 Analog Outputs</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$( function() {
// Get the Agent external URl from HTML5 local storage
var externalURL ="";
if (localStorage["agentURL"]) {
externalURL=localStorage["agentURL"];
}
$(".ui-slider").on("slidestop", function (event) {
console.log("id:"+event.target.id+" value: " + event.target.value);
impSetValue(event.target.id,event.target.value);
});
function impSetValue(_sliderID,_slider_value){
// Build the json
var objs = {"sliderID": _sliderID , "sliderVal":_slider_value};
agentActions = JSON.stringify(objs);
console.log("agentActions:"+ agentActions);
// POST to Agent
$.ajax({
type: "POST",
url: "https://agent.electricimp.com/"+externalURL,
data: agentActions,
contentType: "application/json; charset=utf-8",
dataType: "json",
complete: function(jqXHR, textStatus){
_header= jqXHR.getResponseHeader("AgentResponce");
console.log("textStatus: "+jqXHR.responseText+" AgentResponce:"+_header);
}
});
}
});
</script>
<style>
@media only screen and (min-width: 321px){
#c1 {width: 390px !important; margin:0 !important; position: relative !important;}
#h1 {width: 420px !important; margin:0 !important; position: relative !important;}
}
.ui-li {list-style-position:inside !important;}
.ui-li h3 {margin:0 0 0 135px; padding:0; width: 50%; }
.ui-li p { padding-top: 20px; border:0px solid blue;}
p.dev { padding-top: 10px; border:0px solid blue;}
p.msg { padding: 0px 0 0 115px; overflow: visible; white-space: pre-wrap; 0}
.ui-li p span{ padding-left: 81px;}
.ui-li-thumb {height:80px !important; left: 140px !important; right : auto; padding:0; opacity:0.6;}
label {display: block; float:left; width:100px; text-align:left; padding-top: 12px; xborder:1px solid red; }
</style>
</head>
<body>
<div data-role="page" id="sliders"><!-- Home -->
<div data-theme="a" data-role="header">
<h3 style="margin-left: 38px; text-align:left"><span style="font-size:0.86em; padding:0 14px 0 0; color:#909090;">T5 Analog Outputs</span></h3>
<a href="options.html" data-role="button" data-inline="false" data-icon="gear" data-iconpos="notext" data-iconshadow="false" data-rel="dialog">Agent External URL</a>
</div>
<div data-role="content" id="sliders">
<div data-role="fieldcontain" style="xwidth:470px; xborder:1px solid red; " id="foooo">
<fieldset data-role="controlgroup" id="fs1">
<label for="slider1">Pin1</label>
<input type="range" name="slider1" id="slider1" value="0" min="0" max="100" data-highlight="false" data-theme="c" step="1" data-type="range" /> <br />
<label for="slider2">Pin5</label>
<input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="false" data-theme="c" step="1" /> <br />
<label for="slider3">Anything</label>
<input type="range" name="slider3" id="slider3" value="0" min="0" max="100" data-highlight="false" data-theme="c" step="1" /> <br />
</fieldset>
</div>
</div> <!-- Eof content -->
</div> <!-- Eof JQM page -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment