├── .gitignore ├── LICENSE ├── README.md ├── datasource.jsheader ├── datasource.template ├── docs ├── freeboard_add_ds.png ├── freeboard_create_widget.png ├── freeboard_save_ds.png ├── freeboard_widget.png └── node_red_flow.png ├── freeboard-widget-rag-files ├── jquery.keyframes.min.js └── widget.ragIndicator.js ├── freeboard.html ├── freeboard.js ├── package.json └── rewritefiles.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | 3 | ### Node template 4 | # Logs 5 | logs 6 | *.log 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 20 | .grunt 21 | 22 | # node-waf configuration 23 | .lock-wscript 24 | 25 | # Compiled binary addons (http://nodejs.org/api/addons.html) 26 | build/Release 27 | 28 | # Dependency directory 29 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 30 | node_modules 31 | 32 | 33 | ### JetBrains template 34 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion 35 | 36 | *.iml 37 | 38 | ## Directory-based project format: 39 | .idea/ 40 | # if you remove the above rule, at least ignore the following: 41 | 42 | # User-specific stuff: 43 | # .idea/workspace.xml 44 | # .idea/tasks.xml 45 | # .idea/dictionaries 46 | 47 | # Sensitive or high-churn files: 48 | # .idea/dataSources.ids 49 | # .idea/dataSources.xml 50 | # .idea/sqlDataSources.xml 51 | # .idea/dynamic.xml 52 | # .idea/uiDesigner.xml 53 | 54 | # Gradle: 55 | # .idea/gradle.xml 56 | # .idea/libraries 57 | 58 | # Mongo Explorer plugin: 59 | # .idea/mongoSettings.xml 60 | 61 | ## File-based project format: 62 | *.ipr 63 | *.iws 64 | 65 | ## Plugin-specific files: 66 | 67 | # IntelliJ 68 | /out/ 69 | 70 | # mpeltonen/sbt-idea plugin 71 | .idea_modules/ 72 | 73 | # JIRA plugin 74 | atlassian-ide-plugin.xml 75 | 76 | # Crashlytics plugin (for Android Studio and IntelliJ) 77 | com_crashlytics_export_strings.xml 78 | crashlytics.properties 79 | crashlytics-build.properties 80 | 81 | 82 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Please note that freeboard itself is created and licensed by Jim Heising and Bug Labs and therefor might have different license terms than the node-red plugin itself. 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "{}" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright {yyyy} {name of copyright owner} 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | 204 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Freeboard Dashboard for Node-RED 2 | 3 | #Installation 4 | Just install this plugin to your Node Red installation by using npm: "npm install node-red-contrib-freeboard" in your Node Red root directory 5 | 6 | #Usage 7 | Drag the freeboard node into your workspace and connect it appropriatley with some JSON emitting node. 8 | ![Node RED Flow](./docs/node_red_flow.png) 9 | ``` 10 | [{"id":"176e3fcd.e891c","type":"freeboard","name":"[Node-RED] Freeboard","x":715,"y":233,"z":"681a559a.97e5ac","wires":[]},{"id":"41e8ab5f.be1754","type":"inject","name":"Send Random Value","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":268,"y":233,"z":"681a559a.97e5ac","wires":[["c822ddf4.37dd2"]]},{"id":"c822ddf4.37dd2","type":"function","name":"","func":"msg.payload={value:Math.floor(Math.random()*100)};\nreturn msg;","outputs":1,"x":502,"y":233,"z":"681a559a.97e5ac","wires":[["176e3fcd.e891c"]]}] 11 | ``` 12 | 13 | Then go to your freeboard dashboard (is bundled with this node - no need to set up something; should run under /freeboard) and add the freeboard node from Node-RED as Datasource 14 | Click "ADD" below "DATASOURCE" 15 | ![Add Datasource](./docs/freeboard_add_ds.png) 16 | 17 | Choose the Type that has the Name of your Node-RED node (in this case "[Node-RED] Freeboard") and give it a name that you want it to be available under in Freeboard. 18 | ![Save Datasource](./docs/freeboard_save_ds.png) 19 | 20 | Now you can add a Widget using the Datasource: Click on "ADD PANE" on the top left and in the new created pane on the "+" sign in the title 21 | ![Create Widget](./docs/freeboard_create_widget.png) 22 | Choose the appropriate datasource. If Freeboard already received data from your node it will also offer you available properties - so best would be to hit the inject node within Node-RED at least once. 23 | 24 | Thats it, here is your widget: 25 | 26 | ![Widget](./docs/freeboard_widget.png) 27 | 28 | Don't forget to save your dashboard by hitting "SAVE FREEBOARD" (then "[MINIFIED]") on the top left. 29 | 30 | #Contributions 31 | Thanks to reyiyo and adamfr33man for their contributions to this project! -------------------------------------------------------------------------------- /datasource.jsheader: -------------------------------------------------------------------------------- 1 | var ux={freeboard:{}}; 2 | ux.freeboard.datasources={}; 3 | ux.freeboard.addDatasource=function(datasource){ 4 | ux.freeboard.datasources[datasource.id]=datasource; 5 | } 6 | ux.freeboard.removeDatasource=function(datasource){ 7 | delete(ux.freeboard.datasources[datasource.id]); 8 | } 9 | ux.freeboard.poll=function(){ 10 | $.ajax({ 11 | url: "../freeboard_api/datasourceupdate" 12 | }).done(function(data) { 13 | var pdata=JSON.parse(data); 14 | for(var name in pdata) 15 | { 16 | if (pdata.hasOwnProperty(name)) 17 | { 18 | if (typeof(ux.freeboard.datasources[name])!=="undefined"){ 19 | ux.freeboard.datasources[name].update(pdata[name]); 20 | } 21 | } 22 | } 23 | ux.freeboard.poll(); 24 | }); 25 | } 26 | ux.freeboard.poll(); 27 | -------------------------------------------------------------------------------- /datasource.template: -------------------------------------------------------------------------------- 1 | //https://github.com/Freeboard/plugins/blob/master/datasources/plugin_example.js 2 | (function(){ 3 | var dsid="{{id}}"; 4 | freeboard.loadDatasourcePlugin({ 5 | "type_name": "{{name}}", 6 | "display_name": "{{display_name}}", 7 | "description": "{{description}}", 8 | "settings": [ 9 | ], 10 | 11 | newInstance: function(settings, newInstanceCallback, updateCallback) { 12 | newInstanceCallback(new myDatasourcePlugin(settings, updateCallback)); 13 | } 14 | }); 15 | var myDatasourcePlugin = function(settings, updateCallback) { 16 | var self = this; 17 | var currentSettings = settings; 18 | self.id=dsid; 19 | 20 | ux.freeboard.addDatasource(self); 21 | self.update = function(data){ 22 | updateCallback(data); 23 | } 24 | self.onSettingsChanged = function(newSettings) { 25 | currentSettings = newSettings; 26 | } 27 | self.updateNow = function() { 28 | $.ajax({ 29 | url: "../freeboard_api/datasourceupdate?direct=true" 30 | }).done(function(data) { 31 | var pdata=JSON.parse(data); 32 | if (typeof(pdata[dsid])!=="undefined"){ 33 | updateCallback(pdata[dsid]); 34 | } 35 | }); 36 | } 37 | self.onDispose = function() { 38 | ux.freeboard.removeDatasource(self); 39 | } 40 | } 41 | })(); -------------------------------------------------------------------------------- /docs/freeboard_add_ds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urbiworx/node-red-contrib-freeboard/f70d771117cfd90c586ee28c44afdf864e5aeea0/docs/freeboard_add_ds.png -------------------------------------------------------------------------------- /docs/freeboard_create_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urbiworx/node-red-contrib-freeboard/f70d771117cfd90c586ee28c44afdf864e5aeea0/docs/freeboard_create_widget.png -------------------------------------------------------------------------------- /docs/freeboard_save_ds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urbiworx/node-red-contrib-freeboard/f70d771117cfd90c586ee28c44afdf864e5aeea0/docs/freeboard_save_ds.png -------------------------------------------------------------------------------- /docs/freeboard_widget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urbiworx/node-red-contrib-freeboard/f70d771117cfd90c586ee28c44afdf864e5aeea0/docs/freeboard_widget.png -------------------------------------------------------------------------------- /docs/node_red_flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/urbiworx/node-red-contrib-freeboard/f70d771117cfd90c586ee28c44afdf864e5aeea0/docs/node_red_flow.png -------------------------------------------------------------------------------- /freeboard-widget-rag-files/jquery.keyframes.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StyleFix 1.0.3 & PrefixFree 1.0.7 3 | * @author Lea Verou 4 | * MIT license 5 | */ 6 | (function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=(/^[a-z]{3,10}:/.exec(i)||[""])[0],o=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(i)||[""])[0],u=/^([^?]*)\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()};l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^\/\//.test(n)?'url("'+s+n+'")':/^\//.test(n)?'url("'+o+n+'")':/^\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var l=document.createElement("style");l.textContent=n;l.media=t.media;l.disabled=t.disabled;l.setAttribute("data-href",t.getAttribute("href"));a.insertBefore(l,t);a.removeChild(t);l.media=t.media}};try{f.open("GET",r);f.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){f=new XDomainRequest;f.onerror=f.onprogress=function(){};f.onload=l;f.open("GET",r);f.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)>=0?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);n.valueProperties.indexOf(r)>=0&&(e=t("properties","(^|\\s|,)","($|\\s|,)","$1"+n.prefix+"$2$3",e));return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a"+n+"").attr({"class":"keyframe-style",id:e,type:"text/css"}).appendTo("head")};$.keyframe={debug:!1,getVendorPrefix:function(){return t},isSupported:function(){return e},generate:function(e){var i=e.name||"",o="@"+t+"keyframes "+i+" {";for(var r in e)if("name"!==r&&"media"!==r&&"complete"!==r){o+=r+" {";for(var s in e[r])o+=s+":"+e[r][s]+";";o+="}"}o=PrefixFree.prefixCSS(o+"}"),e.media&&(o="@media "+e.media+"{"+o+"}");var f=$("style#"+e.name);if(f.length>0){f.append(o);var l=$("*").filter(function(){return this.style[n+"Name"]===i});l.each(function(){var e=$(this),n=e.data("keyframeOptions");e.resetKeyframe(function(){e.playKeyframe(n)})})}else a(i,o)},define:function(e){if(e.length)for(var n=0;n'); 19 | var stateElement = $('
'); 20 | var indicatorElement = $('
'); 21 | var currentSettings = settings; 22 | 23 | //define our keyframes for our flashing lights 24 | $.keyframe.define([{ 25 | name: 'green-flash', 26 | '0%': {'background-color': '#2A2A2A', 'box-shadow': '0px 0px 0px #2A2A2A'}, 27 | '100%': {'background-color': '#00B60E', 'box-shadow': '0px 0px 15px #00B60E'} 28 | 29 | }]); 30 | $.keyframe.define([{ 31 | name: 'amber-flash', 32 | '0%': {'background-color': '#2A2A2A', 'box-shadow': '0px 0px 0px #2A2A2A'}, 33 | '100%': {'background-color': '#E49B00', 'box-shadow': '0px 0px 15px #E49B00'} 34 | 35 | }]); 36 | $.keyframe.define([{ 37 | name: 'red-flash', 38 | '0%': {'background-color': '#2A2A2A', 'box-shadow': '0px 0px 0px #2A2A2A'}, 39 | '100%': {'background-color': '#D90000', 'box-shadow': '0px 0px 15px #D90000'} 40 | 41 | }]); 42 | 43 | //store our calculated values in an object 44 | var stateObject = {}; 45 | 46 | //array of our values: 0=Green, 2=Amber, 3=Red 47 | var stateArray = ["green", "amber", "red"]; 48 | 49 | function updateState() { 50 | 51 | //Remove all classes from our indicator light 52 | indicatorElement 53 | .removeClass('red') 54 | .removeClass('amber') 55 | .removeClass('green') 56 | .removeClass('green-flash') 57 | .removeClass('amber-flash') 58 | .removeClass('red-flash') 59 | .removeClass('dim') 60 | 61 | var ragValue = _.isUndefined(stateObject.value) ? -1 : stateObject.value; 62 | //If we have a valid value set, continue 63 | if (stateArray[stateObject.value]) { 64 | indicatorElement.addClass(stateArray[stateObject.value]); 65 | var indicatorText = stateArray[stateObject.value] + '_text'; 66 | //Get our Indicator Type 67 | stateElement.html((_.isUndefined(stateObject[indicatorText]) ? "" : stateObject[indicatorText])); 68 | var indicatorType = (_.isUndefined(stateObject.indicator_type) ? "" : stateObject.indicator_type.toLowerCase()); 69 | 70 | switch (indicatorType) { 71 | case 'dim' : 72 | indicatorElement.addClass('dim'); 73 | break; 74 | case 'flash' : 75 | var indicatorTypeClass = stateArray[stateObject.value] + '-flash'; 76 | indicatorElement.addClass(indicatorTypeClass); 77 | break; 78 | default: 79 | //this is normal 80 | } 81 | } else { 82 | //stateElement.html('Error'); 83 | } 84 | 85 | } 86 | 87 | this.render = function (element) { 88 | $(element).append(titleElement).append(indicatorElement).append(stateElement); 89 | } 90 | 91 | this.onSettingsChanged = function (newSettings) { 92 | currentSettings = newSettings; 93 | titleElement.html((_.isUndefined(newSettings.title) ? "" : newSettings.title)); 94 | updateState(); 95 | } 96 | 97 | this.onCalculatedValueChanged = function (settingName, newValue) { 98 | //whenever a calculated value changes, store them in the variable 'stateObject' 99 | stateObject[settingName] = newValue; 100 | updateState(); 101 | } 102 | 103 | this.onDispose = function () { 104 | } 105 | 106 | this.getHeight = function () { 107 | return 1; 108 | } 109 | 110 | this.onSettingsChanged(settings); 111 | }; 112 | 113 | freeboard.loadWidgetPlugin({ 114 | type_name: "ragIndicator", 115 | display_name: "RAG Indicator", 116 | external_scripts: [ 117 | "plugins/thirdparty/jquery.keyframes.min.js" 118 | ], 119 | settings: [ 120 | { 121 | name: "title", 122 | display_name: "Title", 123 | type: "text" 124 | }, 125 | { 126 | name: "value", 127 | display_name: "Value (G=0, A=1, R=2)", 128 | type: "calculated" 129 | }, 130 | { 131 | name: "green_text", 132 | display_name: "Green Text", 133 | type: "calculated" 134 | }, 135 | { 136 | name: "amber_text", 137 | display_name: "Amber Text", 138 | type: "calculated" 139 | }, 140 | { 141 | name: "red_text", 142 | display_name: "Red Text", 143 | type: "calculated" 144 | }, 145 | { 146 | name: "indicator_type", 147 | display_name: "Type (Normal, Dim, Flash)", 148 | type: "calculated" 149 | } 150 | 151 | 152 | ], 153 | newInstance: function (settings, newInstanceCallback) { 154 | newInstanceCallback(new ragWidget(settings)); 155 | } 156 | }); 157 | }()); 158 | -------------------------------------------------------------------------------- /freeboard.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 23 | 24 | 28 | 29 | 48 | -------------------------------------------------------------------------------- /freeboard.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Urbiworx 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | **/ 16 | var express=require("express"); 17 | var mustache=require("mustache"); 18 | var fs=require("fs"); 19 | var bodyParser = require('body-parser') 20 | module.exports = function(RED) { 21 | "use strict"; 22 | var userDir=""; 23 | if (RED.settings.userDir){ 24 | userDir=RED.settings.userDir+"/"; 25 | } 26 | 27 | var dstemplate; 28 | var dslib; 29 | var pendingresponses=new Array(); 30 | fs.readFile(__dirname+"/datasource.template", function (err, data) { 31 | if (err) throw err; 32 | dstemplate=data.toString(); 33 | }); 34 | fs.readFile(__dirname+"/datasource.jsheader", function (err, data) { 35 | if (err) throw err; 36 | dslib=data.toString(); 37 | }); 38 | 39 | var nodes=new Array(); 40 | function Freeboard(n) { 41 | RED.nodes.createNode(this,n); 42 | this.name = n.name.trim(); 43 | nodes.push(this); 44 | var that = this; 45 | this.on("input", function(msg) { 46 | that.lastValue=msg.payload; 47 | postValue(that.id,that.lastValue); 48 | }); 49 | this.on("close",function() { 50 | var index = nodes.indexOf(that); 51 | if (index > -1) { 52 | nodes.splice(index, 1); 53 | } 54 | }); 55 | } 56 | 57 | function postValue(id,value){ 58 | var resp=pendingresponses; 59 | pendingresponses=new Array(); 60 | for (var i in resp){ 61 | var ret={}; 62 | ret[id]=value 63 | resp[i].end(JSON.stringify(ret)); 64 | } 65 | } 66 | 67 | function interval(){ 68 | var resp=pendingresponses; 69 | pendingresponses=new Array(); 70 | for (var i in resp){ 71 | resp[i].end(JSON.stringify({})); 72 | } 73 | } 74 | setInterval(interval,60000); 75 | 76 | 77 | RED.httpNode.use(bodyParser.urlencoded({ 78 | extended: true 79 | })); 80 | RED.httpNode.use("/freeboard",express.static(__dirname + '/node_modules/freeboard')); 81 | RED.httpNode.get("/freeboard_api/datasources", 82 | function (req,res){ 83 | res.write(dslib); 84 | for (var i in nodes){ 85 | res.write(mustache.render(dstemplate,{name:nodes[i].name,display_name:nodes[i].name,description:'',id:nodes[i].id})); 86 | } 87 | res.end(); 88 | } 89 | ); 90 | RED.httpNode.post("/freeboard_api/dashboard", 91 | function (req,res){ 92 | fs.writeFile(userDir+"freeboard_"+req.body.name+".json", req.body.content, function (err, data) { 93 | if (err) throw err; 94 | res.end(); 95 | }); 96 | 97 | } 98 | ); 99 | RED.httpNode.get("/freeboard_api/datasourceupdate", 100 | function (req,res){ 101 | if(req.param("direct",false)){ 102 | var ret={}; 103 | for (var i in nodes){ 104 | ret[nodes[i].id]=nodes[i].lastValue; 105 | } 106 | res.end(JSON.stringify(ret)); 107 | } else { 108 | pendingresponses.push(res); 109 | } 110 | } 111 | ); 112 | RED.httpNode.get("/freeboard_api/dashboard/:name", 113 | function (req,res){ 114 | fs.readFile(userDir+"freeboard_"+req.params.name+".json", function (err, data) { 115 | if (err) { 116 | res.end(JSON.stringify({empty:true})); 117 | } else { 118 | res.end(data.toString()); 119 | } 120 | }); 121 | 122 | } 123 | ); 124 | RED.nodes.registerType("freeboard",Freeboard); 125 | } 126 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-red-contrib-freeboard", 3 | "version": "0.0.7", 4 | "description": "Freeboard Dashboard Node for Node-RED", 5 | "dependencies": { 6 | "body-parser": "1.12.0", 7 | "express": "4.12.0", 8 | "freeboard": "git://github.com/freeboard/freeboard#94306b7", 9 | "mustache": "1.1.0" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/urbiworx/node-red-contrib-freeboard.git" 14 | }, 15 | "keywords": [ 16 | "node-red", 17 | "freeboard", 18 | "dashboard" 19 | ], 20 | "node-red": { 21 | "nodes": { 22 | "freeboard": "freeboard.js" 23 | } 24 | }, 25 | "scripts": { 26 | "postinstall": "node rewritefiles.js" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /rewritefiles.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | 3 | var head= 4 | 'head.js("js/freeboard.js","js/freeboard.plugins.min.js", "../freeboard_api/datasources", "plugins/thirdparty/jquery.keyframes.min.js", "plugins/thirdparty/widget.ragIndicator.js",\n'+ 5 | 'function(){'+ 6 | ' $(function()\n'+ 7 | ' { //DOM Ready\n'+ 8 | ' freeboard.initialize(true);\n'+ 9 | ' var hash = window.location.hash;\n'+ 10 | ' if (hash !== null) {\n'+ 11 | ' $.get("/freeboard_api/dashboard/"+hash.substring(1), function(data) {\n'+ 12 | ' var datap=JSON.parse(data);\n'+ 13 | ' if (!datap.empty){\n'+ 14 | ' freeboard.loadDashboard(datap, function() {\n'+ 15 | ' freeboard.setEditing(false);\n'+ 16 | ' });\n'+ 17 | ' }\n'+ 18 | ' });\n'+ 19 | ' }\n'+ 20 | ' });\n'+ 21 | ' });\n'+ 22 | ' '; 23 | 24 | fs.readFile('node_modules/freeboard/index.html' , 'utf8', function (err,data) { 25 | if (err) { 26 | return console.log(err); 27 | } 28 | var result = data.replace(/head.js[\s\S]*?<\/script>/g, head); 29 | fs.writeFile('node_modules/freeboard/index.html', result, 'utf8', function (err) { 30 | if (err) return console.log(err); 31 | }); 32 | }); 33 | 34 | var saveDashboard= 35 | 'this.saveDashboard = function(_thisref, event)\n'+ 36 | '{\n'+ 37 | ' var pretty = $(event.currentTarget).data("pretty");\n'+ 38 | ' var hash=window.location.hash;\n'+ 39 | ' if (typeof(hash)=="undefined"||hash==null||hash==""){\n'+ 40 | ' hash="start-"+Math.floor(Math.random()*99999);\n'+ 41 | ' window.location.hash=hash;\n'+ 42 | ' } else {\n'+ 43 | ' hash=hash.substring(1);\n'+ 44 | ' }\n'+ 45 | ' var contentType = "application/octet-stream";\n'+ 46 | ' var a = document.createElement("a");\n'+ 47 | ' $.ajax({\n'+ 48 | ' type:"POST",\n'+ 49 | ' url:"../freeboard_api/dashboard",\n'+ 50 | ' data:{\n'+ 51 | ' content:pretty?JSON.stringify(self.serialize(), null, "\t"):JSON.stringify(self.serialize()),\n'+ 52 | ' name:hash\n'+ 53 | ' }\n'+ 54 | ' }).done(function(){\n'+ 55 | ' new DialogBox("Dashboard is saved, make sure to bookmark the URL.", "Info", "OK");\n'+ 56 | ' });\n'+ 57 | '}\n'; 58 | 59 | fs.readFile('node_modules/freeboard/js/freeboard.js' , 'utf8', function (err,data) { 60 | if (err) { 61 | return console.log(err); 62 | } 63 | var result = data.replace(/this\.saveDashboard =[\s\S]*?a\.click[\s\S]*?\}/g, saveDashboard); 64 | fs.writeFile('node_modules/freeboard/js/freeboard.js', result, 'utf8', function (err) { 65 | if (err) return console.log(err); 66 | }); 67 | }); 68 | 69 | // Copy the plugins across 70 | fs.createReadStream('freeboard-widget-rag-files/jquery.keyframes.min.js').pipe(fs.createWriteStream('node_modules/freeboard/plugins/thirdparty/jquery.keyframes.min.js')); 71 | fs.createReadStream('freeboard-widget-rag-files/widget.ragIndicator.js').pipe(fs.createWriteStream('node_modules/freeboard/plugins/thirdparty/widget.ragIndicator.js')); --------------------------------------------------------------------------------