Made some changes to ChiliPeppr myWorkspace using Cloud9

bastian-f · Jan 27, 2016 · 3634978 · 3634978
1 parent 47713bc
commit 3634978
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -135,11 +135,13 @@ The table below shows, in order, the methods and properties inside the workspace
           </tr>
       </thead>
       <tbody>
-      <tr valign="top"><td>id</td><td>string</td><td>"com-chilipeppr-workspace-sample"<br><br>The ID of the widget. You must define this and make it unique.</td></tr><tr valign="top"><td>name</td><td>string</td><td>"Workspace / sample"</td></tr><tr valign="top"><td>desc</td><td>string</td><td>"A ChiliPeppr Workspace sample."</td></tr><tr valign="top"><td>url</td><td>string</td><td>"http://raw.githubusercontent.com/johnlauer/workspace-nodemcu/master/auto-generated-workspace.html"</td></tr><tr valign="top"><td>fiddleurl</td><td>string</td><td>"http://ide.c9.io/johnlauer/workspace-nodemcu"</td></tr><tr valign="top"><td>githuburl</td><td>string</td><td>"http://github.com/johnlauer/workspace-nodemcu"</td></tr><tr valign="top"><td>testurl</td><td>string</td><td>"http://workspace-nodemcu-johnlauer.c9users.io/workspace.html"</td></tr><tr valign="top"><td>init</td><td>function</td><td>function () <br><br>The workspace's init method. It loads the all the widgets contained in the workspace
+      <tr valign="top"><td>id</td><td>string</td><td>"com-chilipeppr-workspace-sample"<br><br>The ID of the widget. You must define this and make it unique.</td></tr><tr valign="top"><td>name</td><td>string</td><td>"Workspace / sample"</td></tr><tr valign="top"><td>desc</td><td>string</td><td>"A ChiliPeppr Workspace sample."</td></tr><tr valign="top"><td>url</td><td>string</td><td>"http://raw.githubusercontent.com/johnlauer/workspace-nodemcu/master/auto-generated-workspace.html"</td></tr><tr valign="top"><td>fiddleurl</td><td>string</td><td>"http://ide.c9.io/johnlauer/workspace-nodemcu"</td></tr><tr valign="top"><td>githuburl</td><td>string</td><td>"http://github.com/johnlauer/workspace-nodemcu"</td></tr><tr valign="top"><td>testurl</td><td>string</td><td>"http://workspace-nodemcu-johnlauer.c9users.io/workspace.html"</td></tr><tr valign="top"><td>widgetConsole</td><td>object</td><td>Contains reference to the Console widget object. Hang onto the reference
+so we can resize it when the window resizes because we want it to manually
+resize to fill the height of the browser so it looks clean.</td></tr><tr valign="top"><td>widgetSpjs</td><td>object</td><td>Contains reference to the Serial Port JSON Server object.</td></tr><tr valign="top"><td>init</td><td>function</td><td>function () <br><br>The workspace's init method. It loads the all the widgets contained in the workspace
 and inits them.</td></tr><tr valign="top"><td>getBillboard</td><td>function</td><td>function () <br><br>Returns the billboard HTML, CSS, and Javascript for this Workspace. The billboard
 is used by the home page, the workspace picker, and the fork pulldown to show a
 consistent name/image/description tag for the workspace throughout the ChiliPeppr ecosystem.</td></tr><tr valign="top"><td>addBillboardToWorkspaceMenu</td><td>function</td><td>function () <br><br>Inject the billboard into the Workspace upper right corner pulldown which
-follows the standard template for workspace pulldown menus.</td></tr><tr valign="top"><td>loadSpjsWidget</td><td>function</td><td>function (callback) <br><br>Load the Serial Port JSON Server widget via chilipeppr.load()</td></tr><tr valign="top"><td>loadWorkspaceMenu</td><td>function</td><td>function (callback) <br><br>Load the workspace menu and show the pubsubviewer and fork links using
+follows the standard template for workspace pulldown menus.</td></tr><tr valign="top"><td>setupResize</td><td>function</td><td>function () <br><br>Listen to window resize event.</td></tr><tr valign="top"><td>onResize</td><td>function</td><td>function () <br><br>When browser window resizes, forcibly resize the Console window</td></tr><tr valign="top"><td>loadSpjsWidget</td><td>function</td><td>function (callback) <br><br>Load the Serial Port JSON Server widget via chilipeppr.load()</td></tr><tr valign="top"><td>loadConsoleWidget</td><td>function</td><td>function (callback) <br><br>Load the Console widget via chilipeppr.load()</td></tr><tr valign="top"><td>loadWorkspaceMenu</td><td>function</td><td>function (callback) <br><br>Load the workspace menu and show the pubsubviewer and fork links using
 our pubsubviewer widget that makes those links for us.</td></tr>
       </tbody>
   </table>

diff --git a/asdf.png b/asdf.png
diff --git a/auto-generated-workspace.html b/auto-generated-workspace.html
@@ -20,25 +20,16 @@
     padding:10px 15px;
 }
 
-#com-chilipeppr-workspace-nodemcu .nodemcu-install {
-    padding:0;
-}
-
-#com-chilipeppr-workspace-nodemcu .col-nopadrt {
+.col-nopadrt {
     padding-right:0;    
 }
 
-#com-chilipeppr-workspace-nodemcu .col-nopadleft {
+.col-nopadleft {
     padding-left:0;    
 }
 
-#com-chilipeppr-widget-nodemcusamples .panel-body {
-    max-height:250px;
-    overflow:auto;
-}
-
-#com-chilipeppr-widget-nodemcusamples .tab-pane {
-    /*overflow:auto;    */
+.well, .panel.panel-default {
+    margin-bottom:10px;
 }
 
 .billboard-content {
@@ -136,6 +127,16 @@
         fiddleurl: "http://ide.c9.io/johnlauer/workspace-nodemcu", // The edit URL. This can be auto-filled by runme.js in Cloud9 if you'd like, or just define it on your own to help people know where they can edit/fork your widget
         githuburl: "http://github.com/johnlauer/workspace-nodemcu", // The backing github repo
         testurl: "http://workspace-nodemcu-johnlauer.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
+        /**
+         * Contains reference to the Console widget object. Hang onto the reference
+         * so we can resize it when the window resizes because we want it to manually
+         * resize to fill the height of the browser so it looks clean.
+         */
+        widgetConsole: null,
+        /**
+         * Contains reference to the Serial Port JSON Server object.
+         */
+        widgetSpjs: null,
         /**
          * The workspace's init method. It loads the all the widgets contained in the workspace
          * and inits them.
@@ -144,10 +145,21 @@
 
             // Most workspaces will instantiate the Serial Port JSON Server widget
             this.loadSpjsWidget();
+            // Most workspaces will instantiate the Serial Port Console widget
+            this.loadConsoleWidget(function() {
+                setTimeout(function() { $(window).trigger('resize'); }, 100);
+            });
             // Create our workspace upper right corner triangle menu
             this.loadWorkspaceMenu();
             // Add our billboard to the menu (has name, url, picture of workspace)
             this.addBillboardToWorkspaceMenu();
+
+            // Setup an event to react to window resize. This helps since
+            // some of our widgets have a manual resize to cleanly fill
+            // the height of the browser window. You could turn this off and
+            // just set widget min-height in CSS instead
+            this.setupResize();
+            setTimeout(function() { $(window).trigger('resize'); }, 100);
 
         },
         /**
@@ -170,6 +182,18 @@
             var billboardEl = this.getBillboard();
             $('#' + this.id + ' .com-chilipeppr-ws-billboard').append(billboardEl);
         },
+        /**
+         * Listen to window resize event.
+         */
+        setupResize: function() {
+            $(window).on('resize', this.onResize.bind(this));
+        },
+        /**
+         * When browser window resizes, forcibly resize the Console window
+         */
+        onResize: function() {
+            if (this.widgetConsole) this.widgetConsole.resize();
+        },
         /**
          * Load the Serial Port JSON Server widget via chilipeppr.load()
          */
@@ -194,12 +218,45 @@
                         //spjs.showBody();
                         //spjs.consoleToggle();
 
+                        that.widgetSpjs - spjs;
+
                         if (callback) callback(spjs);
 
                     });
                 }
             );
         },
+        /**
+         * Load the Console widget via chilipeppr.load()
+         */
+        loadConsoleWidget: function(callback) {
+            var that = this;
+            chilipeppr.load(
+                "#com-chilipeppr-widget-spconsole-instance",
+                "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/",
+                function() {
+                    // Callback after widget loaded into #com-chilipeppr-widget-spconsole-instance
+                    cprequire(
+                        ["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget
+                        function(mywidget) {
+                            // Callback that is passed reference to your newly loaded widget
+                            console.log("My Console widget just got loaded.", mywidget);
+                            that.widgetConsole = mywidget;
+
+                            // init the serial port console
+                            // 1st param tells the console to use "single port mode" which
+                            // means it will only show data for the green selected serial port
+                            // rather than for multiple serial ports
+                            // 2nd param is a regexp filter where the console will filter out
+                            // annoying messages you don't generally want to see back from your
+                            // device, but that the user can toggle on/off with the funnel icon
+                            that.widgetConsole.init(true, /myfilter/);
+                            if (callback) callback(mywidget);
+                        }
+                    );
+                }
+            );
+        },
         /**
          * Load the workspace menu and show the pubsubviewer and fork links using
          * our pubsubviewer widget that makes those links for us.
@@ -243,10 +300,10 @@
             <div class="row">
 
                 <!-- Left Column -->
+                <!-- Change the width by adjusting col-md-4 to be col-md-3 for skinnier, or col-md-5 for wider -->
+                <!-- You must have all columns add up to 12 since we use bootstrap's col-md technique, i.e. col-md-2, col-md-7, col-md-3 adds to 12 -->
                 <div class="col-md-4 col-nopadrt col-nopadleft">
 
-
-
                     <div class="com-chilipeppr-ws-hdr well">
 
                         Workspace - Sample
@@ -271,14 +328,13 @@
 
                     </div>
 
-
-
                     <div id="mywidget1-instance">
-                        Widget 1 goes here
+                        <p>Widget 1 goes here</p>
                     </div>
 
-
-                    <div id="consoleWidget"></div>
+                    <div id="com-chilipeppr-widget-spconsole-instance">
+                        Serial Port Console goes here.
+                    </div>
 
                 </div>
 

diff --git a/workspace.css b/workspace.css
@@ -4,25 +4,16 @@
     padding:10px 15px;
 }
 
-#com-chilipeppr-workspace-nodemcu .nodemcu-install {
-    padding:0;
-}
-
-#com-chilipeppr-workspace-nodemcu .col-nopadrt {
+.col-nopadrt {
     padding-right:0;    
 }
 
-#com-chilipeppr-workspace-nodemcu .col-nopadleft {
+.col-nopadleft {
     padding-left:0;    
 }
 
-#com-chilipeppr-widget-nodemcusamples .panel-body {
-    max-height:250px;
-    overflow:auto;
-}
-
-#com-chilipeppr-widget-nodemcusamples .tab-pane {
-    /*overflow:auto;    */
+.well, .panel.panel-default {
+    margin-bottom:10px;
 }
 
 .billboard-content {

diff --git a/workspace.html b/workspace.html
@@ -43,10 +43,10 @@
             <div class="row">
 
                 <!-- Left Column -->
+                <!-- Change the width by adjusting col-md-4 to be col-md-3 for skinnier, or col-md-5 for wider -->
+                <!-- You must have all columns add up to 12 since we use bootstrap's col-md technique, i.e. col-md-2, col-md-7, col-md-3 adds to 12 -->
                 <div class="col-md-4 col-nopadrt col-nopadleft">
 
-
-
                     <div class="com-chilipeppr-ws-hdr well">
 
                         Workspace - Sample
@@ -71,14 +71,13 @@
 
                     </div>
 
-
-
                     <div id="mywidget1-instance">
-                        Widget 1 goes here
+                        <p>Widget 1 goes here</p>
                     </div>
 
-
-                    <div id="consoleWidget"></div>
+                    <div id="com-chilipeppr-widget-spconsole-instance">
+                        Serial Port Console goes here.
+                    </div>
 
                 </div>
 

diff --git a/workspace.js b/workspace.js
@@ -45,6 +45,16 @@ cpdefine("inline:com-chilipeppr-workspace-sample", ["chilipeppr_ready"], functio
         fiddleurl: "(auto fill by runme.js)", // The edit URL. This can be auto-filled by runme.js in Cloud9 if you'd like, or just define it on your own to help people know where they can edit/fork your widget
         githuburl: "(auto fill by runme.js)", // The backing github repo
         testurl: "(auto fill by runme.js)", // The standalone working widget so can view it working by itself
+        /**
+         * Contains reference to the Console widget object. Hang onto the reference
+         * so we can resize it when the window resizes because we want it to manually
+         * resize to fill the height of the browser so it looks clean.
+         */
+        widgetConsole: null,
+        /**
+         * Contains reference to the Serial Port JSON Server object.
+         */
+        widgetSpjs: null,
         /**
          * The workspace's init method. It loads the all the widgets contained in the workspace
          * and inits them.
@@ -53,10 +63,21 @@ cpdefine("inline:com-chilipeppr-workspace-sample", ["chilipeppr_ready"], functio
 
             // Most workspaces will instantiate the Serial Port JSON Server widget
             this.loadSpjsWidget();
+            // Most workspaces will instantiate the Serial Port Console widget
+            this.loadConsoleWidget(function() {
+                setTimeout(function() { $(window).trigger('resize'); }, 100);
+            });
             // Create our workspace upper right corner triangle menu
             this.loadWorkspaceMenu();
             // Add our billboard to the menu (has name, url, picture of workspace)
             this.addBillboardToWorkspaceMenu();
+
+            // Setup an event to react to window resize. This helps since
+            // some of our widgets have a manual resize to cleanly fill
+            // the height of the browser window. You could turn this off and
+            // just set widget min-height in CSS instead
+            this.setupResize();
+            setTimeout(function() { $(window).trigger('resize'); }, 100);
 
         },
         /**
@@ -79,6 +100,18 @@ cpdefine("inline:com-chilipeppr-workspace-sample", ["chilipeppr_ready"], functio
             var billboardEl = this.getBillboard();
             $('#' + this.id + ' .com-chilipeppr-ws-billboard').append(billboardEl);
         },
+        /**
+         * Listen to window resize event.
+         */
+        setupResize: function() {
+            $(window).on('resize', this.onResize.bind(this));
+        },
+        /**
+         * When browser window resizes, forcibly resize the Console window
+         */
+        onResize: function() {
+            if (this.widgetConsole) this.widgetConsole.resize();
+        },
         /**
          * Load the Serial Port JSON Server widget via chilipeppr.load()
          */
@@ -103,12 +136,45 @@ cpdefine("inline:com-chilipeppr-workspace-sample", ["chilipeppr_ready"], functio
                         //spjs.showBody();
                         //spjs.consoleToggle();
 
+                        that.widgetSpjs - spjs;
+
                         if (callback) callback(spjs);
 
                     });
                 }
             );
         },
+        /**
+         * Load the Console widget via chilipeppr.load()
+         */
+        loadConsoleWidget: function(callback) {
+            var that = this;
+            chilipeppr.load(
+                "#com-chilipeppr-widget-spconsole-instance",
+                "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/",
+                function() {
+                    // Callback after widget loaded into #com-chilipeppr-widget-spconsole-instance
+                    cprequire(
+                        ["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget
+                        function(mywidget) {
+                            // Callback that is passed reference to your newly loaded widget
+                            console.log("My Console widget just got loaded.", mywidget);
+                            that.widgetConsole = mywidget;
+
+                            // init the serial port console
+                            // 1st param tells the console to use "single port mode" which
+                            // means it will only show data for the green selected serial port
+                            // rather than for multiple serial ports
+                            // 2nd param is a regexp filter where the console will filter out
+                            // annoying messages you don't generally want to see back from your
+                            // device, but that the user can toggle on/off with the funnel icon
+                            that.widgetConsole.init(true, /myfilter/);
+                            if (callback) callback(mywidget);
+                        }
+                    );
+                }
+            );
+        },
         /**
          * Load the workspace menu and show the pubsubviewer and fork links using
          * our pubsubviewer widget that makes those links for us.