Skip to content

Commit

Permalink
Merge pull request #5 from netpieio/dev
Browse files Browse the repository at this point in the history 
add a toggle widget
  • Loading branch information
@chavee
chavee authored Jun 23, 2016
2 parents 53e4c9b + 3c49b9f commit fe6d4bf
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 35 deletions.
72 changes: 72 additions & 0 deletions css/netpie.plugins.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.netpie-button {
height : 36px;
width : 50%;
display : inline-block;
box-shadow : 0px 1px 0px 1px #111111;
border-radius : 4px;
text-decoration : none;
text-align : center;
outline : none;
font-size : 125%;
float : left;
}
.netpie-button-text {
vertical-align : bottom;
padding : 8px 0px 0px 15px;
float : left;
}

.netpie-toggle {
float : left;
position: relative; width: 100px; margin-top: 6px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.netpie-toggle-text {

vertical-align : top;
padding : 15px 0px 0px 15px;
float : left;
}
.netpie-toggle-checkbox {
display: none;
}

.netpie-toggle-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.netpie-toggle-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.1s ease-in 0s;
}
.netpie-toggle-inner:before, .netpie-toggle-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.netpie-toggle-inner:before {
content: attr(ontext);
padding-left: 15px;
background-color: #2ecc71; color: #FFFFFF;
text-align: left;
}
.netpie-toggle-inner:after {
content: attr(offtext);
padding-right: 15px;
background-color: #E74C3C; color: #FFFFFF;
text-align: right;
}
.netpie-toggle-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 66px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.1s ease-in 0s;
}
.netpie-toggle-checkbox:checked + .netpie-toggle-label .netpie-toggle-inner {
margin-left: 0;
}
.netpie-toggle-checkbox:checked + .netpie-toggle-label .netpie-toggle-switch {
right: 0px;
}
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content = "width = device-width, initial-scale = 1, user-scalable = no" />

<link href="css/freeboard.min.css" rel="stylesheet" />
<script src="js/freeboard.thirdparty.min.js"></script>
<script type="text/javascript">
Expand All @@ -30,6 +29,7 @@
});
});
</script>
<link href="css/netpie.plugins.css" rel="stylesheet" />
</head>
<body ng-app="starter">
<div id="board-content">
Expand Down
23 changes: 22 additions & 1 deletion js/netpie.plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,13 @@ if (typeof microgear === "undefined") {
"description" : "Topics of the messages that this datasource will consume, the default is /# which means all messages in this app ID.",
"default_value": "/#",
"required" : false
}
},
{
"name" : "onConnectedAction",
"display_name" : "onConnected Action",
"type" : "text",
"description" : "JS code to run after a microgear datasource is connected"
}

],

Expand Down Expand Up @@ -146,8 +152,23 @@ if (typeof microgear === "undefined") {
else if (settings.name) {
self.mg.setAlias(settings.name);
}

if (settings.onConnectedAction) {
var timer = setInterval(function() {
if (Object.getOwnPropertyNames(microgear).length > 0) {
clearInterval(timer);
eval(settings.onConnectedAction);
}
},200);
}

if (typeof(onConnectedHandler) != 'undefined') {
onConnectedHandler(settings.microgearRef);
}
})



self.mg.connect(settings.appid, function(){

});
Expand Down
166 changes: 133 additions & 33 deletions js/netpie.widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,25 @@ if (typeof globalStore === "undefined") {
globalStore = {};
}

function randomString(length) {
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
}

function runCode(cmd) {
eval(eval(cmd));
}

function onConnectedHandler(microgearRef) {
/* add code th handle microgearRef connected event */
}

(function() {
var bcolor = {red:["#551111","#ee8888"],green:["#115511","#88ee88"],blue:["#111155","#8888ee"],yellow:["#555511","#eeee88"],white:["#222222","#FFFFFF"],grey:["#000000","#666666"]};
var bcolor = {red:["#FFF","#e74c3c"],green:["#FFF","#2ecc71"],blue:["#FFF","#3498db"],yellow:["#FFF","#f1c40f"],white:["#454545","#ecf0f1"],grey:["#FFF","#bdc3c7"]};

freeboard.loadWidgetPlugin({
"type_name" : "Button",
"display_name": "Button",
"description" : "A simple button widget that can perform Javascript action.",
/*"external_scripts": [
],*/
"fill_size" : false,
"settings" : [
{
Expand Down Expand Up @@ -68,25 +74,28 @@ function runCode(cmd) {
"display_name": "onClick action",
"type" : "calculated",
"description" : "Add some Javascript here. You can chat and publish with a datasource's microgear like this : microgear[\"mygear\"].chat(\"mylamp\",\"ON\"), where \"mygear\" is a microgear reference."
},
{
"name" : "onCreatedAction",
"display_name" : "onCreated Action",
"type" : "text",
"description" : "JS code to run after a button is created"
}

],
newInstance : function(settings, newInstanceCallback) {
newInstanceCallback(new buttonWidgetPlugin(settings));
}
});


function randomString(length) {
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
}

var buttonWidgetPlugin = function(settings) {
var self = this;
var currentSettings = settings;

self.widgetID = randomString(16);
var buttonElement = $("<input type=\"button\" id=\""+self.widgetID+"\" value=\""+settings.caption+"\" onClick=\"runCode('globalStore[\\'"+self.widgetID+"\\'][\\'onClick\\']')\">");
var textElement = $("<div>"+(settings.text?settings.text:"")+"</div>");

var buttonElement = $("<input type=\"button\" class=\"netpie-button\" id=\""+self.widgetID+"\" value=\""+settings.caption+"\" onClick=\"runCode('globalStore[\\'"+self.widgetID+"\\'][\\'onClick\\']')\">");
var textElement = $("<div class=\"netpie-button-text\">"+(settings.text?settings.text:"")+"</div>");

globalStore[self.widgetID] = {};
globalStore[self.widgetID]['onClick'] = settings.onClick;
Expand All @@ -100,25 +109,6 @@ function runCode(cmd) {
}
}

buttonElement.css({
"height" : "36px",
"width" : "55%",
"box-shadow" : "0px 1px 0px 1px #333333",
"text-decoration" : "none",
"border-radius" : "4px",
"text-align" : "center",
"outline" : "none",
"font-size" : "125%",
"display" : "inline-block",
"float" : "left",
});

textElement.css({
"vertical-align" : "bottom",
"padding" : "8px 0px 0px 10px",
"float" : "left"
});

updateButtonColor(settings.color);

self.render = function(containerElement) {
Expand All @@ -131,13 +121,10 @@ function runCode(cmd) {

self.onSettingsChanged = function(newSettings) {
currentSettings = newSettings;

document.getElementById(self.widgetID).value = newSettings.caption;

updateButtonColor(newSettings.color);
textElement.text(newSettings.text?newSettings.text:"");

globalStore[self.widgetID]['onClickAction'] = newSettings.onClickAction;
globalStore[self.widgetID]['onClick'] = newSettings.onClick;
}

self.onCalculatedValueChanged = function(settingName, newValue) {
Expand All @@ -148,6 +135,119 @@ function runCode(cmd) {

self.onDispose = function() {
}

if (settings.onCreatedAction) {
var timer = setInterval(function() {
if (Object.getOwnPropertyNames(microgear).length > 0) {
clearInterval(timer);
eval(settings.onCreatedAction);
}
},200);
}
}

freeboard.loadWidgetPlugin({
"type_name" : "Toggle",
"display_name": "Toggle",
"description" : "A simple toggle widget that can perform Javascript action.",
"fill_size" : false,
"settings" : [
{
"name" : "caption",
"display_name": "Toggle Caption",
"type" : "text"
},
{
"name" : "state",
"display_name" : "Toggle State",
"type" : "calculated",
"description" : "true = on, false = off"
},
{
"name" : "ontext",
"display_name" : "On Text",
"type" : "text",
"default_value" : "ON"
},
{
"name" : "offtext",
"display_name" : "Off Text",
"type" : "text",
"default_value" : "OFF"
},
{
"name" : "onaction",
"display_name" : "onToggleOn Action",
"type" : "text",
"description" : "JS code to run when a toggle is switched to ON"
},
{
"name" : "offaction",
"display_name" : "onToggleOff Action",
"type" : "text",
"description" : "JS code to run when a toggle is switched to OFF"
},
{
"name" : "onCreatedAction",
"display_name" : "onCreated Action",
"type" : "text",
"description" : "JS code to run after a toggle is created"
}

],
newInstance : function(settings, newInstanceCallback) {
newInstanceCallback(new toggleWidgetPlugin(settings));
}
});

var toggleWidgetPlugin = function(settings) {
var self = this;
self.widgetID = randomString(16);

var currentSettings = settings;
var toggleElement = $("<div class=\"netpie-toggle\"><input type=\"checkbox\" name=\"toggle\" class=\"netpie-toggle-checkbox\" id=\""+self.widgetID+"\" onClick=\"runCode(globalStore['"+self.widgetID+"'][this.checked?'onaction':'offaction']); if(typeof(globalStore['"+self.widgetID+"']['statesource'])!='undefined' && globalStore['"+self.widgetID+"']['statesource']!='') {this.checked = !this.checked} ; \"><label class=\"netpie-toggle-label\" for=\""+self.widgetID+"\"><span class=\"netpie-toggle-inner\" ontext=\""+(settings.ontext||'')+"\" offtext=\""+(settings.offtext||'')+"\" id=\""+self.widgetID+"_inner\"></span><span class=\"netpie-toggle-switch\"></span></label></div><div class=\"netpie-toggle-text\" id=\""+self.widgetID+"_toggleText\">"+(settings.caption||"")+"</div>");

globalStore[self.widgetID] = {};
globalStore[self.widgetID]['onaction'] = settings.onaction;
globalStore[self.widgetID]['offaction'] = settings.offaction;
globalStore[self.widgetID]['statesource'] = settings.state;

self.render = function(containerElement) {
$(containerElement).append(toggleElement);
}

self.getHeight = function() {
return 1;
}

self.onSettingsChanged = function(newSettings) {
currentSettings = newSettings;

globalStore[self.widgetID]['onaction'] = newSettings.onaction;
globalStore[self.widgetID]['offaction'] = newSettings.offaction;
globalStore[self.widgetID]['statesource'] = newSettings.state;
$('#'+self.widgetID+'_inner').attr('ontext',newSettings.ontext||'');
$('#'+self.widgetID+'_inner').attr('offtext',newSettings.offtext||'');
document.getElementById(self.widgetID+'_toggleText').innerHTML = newSettings.caption||'';
}

self.onCalculatedValueChanged = function(settingName, newValue) {
if (settingName == 'state') {
document.getElementById(self.widgetID).checked = newValue;
}
}

self.onDispose = function() {
}

if (settings.onCreatedAction) {
var timer = setInterval(function() {
if (Object.getOwnPropertyNames(microgear).length > 0) {
clearInterval(timer);
eval(settings.onCreatedAction);
}
},200);
}

}
}());

0 comments on commit fe6d4bf

Please sign in to comment.