diff --git a/README.md b/README.md
index 931166f..fd13331 100644
--- a/README.md
+++ b/README.md
@@ -15,9 +15,9 @@ not conflict with other ChiliPeppr objects.
 | Name                  | Workspace / bastianf2 |
 | Description           | A ChiliPeppr Workspace bastianf2. |
 | chilipeppr.load() URL | http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html |
-| Edit URL              | http://ide.c9.io/bastianf/chillipeppr-test-2 |
+| Edit URL              | http://ide.c9.io/undefined/undefined |
 | Github URL            | http://github.com/bastian-f/workspace-bastianf2 |
-| Test URL              | https://preview.c9users.io/bastianf/chillipeppr-test-2/workspace.html |
+| Test URL              | https://preview.c9users.io/undefined/undefined/workspace.html |
 
 ## Example Code for chilipeppr.load() Statement
 
@@ -135,14 +135,15 @@ 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-bastianf2"<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 / bastianf2"</td></tr><tr valign="top"><td>desc</td><td>string</td><td>"A ChiliPeppr Workspace bastianf2."</td></tr><tr valign="top"><td>url</td><td>string</td><td>"http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html"</td></tr><tr valign="top"><td>fiddleurl</td><td>string</td><td>"http://ide.c9.io/bastianf/chillipeppr-test-2"</td></tr><tr valign="top"><td>githuburl</td><td>string</td><td>"http://github.com/bastian-f/workspace-bastianf2"</td></tr><tr valign="top"><td>testurl</td><td>string</td><td>"http://chillipeppr-test-2-bastianf.c9users.io/workspace.html"</td></tr><tr valign="top"><td>foreignSubscribe</td><td>object</td><td>Please see docs above.</td></tr><tr valign="top"><td>widgetConsole</td><td>object</td><td>Contains reference to the Console widget object. Hang onto the reference
+      <tr valign="top"><td>id</td><td>string</td><td>"com-chilipeppr-workspace-bastianf2"<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 / bastianf2"</td></tr><tr valign="top"><td>desc</td><td>string</td><td>"A ChiliPeppr Workspace bastianf2."</td></tr><tr valign="top"><td>url</td><td>string</td><td>"http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html"</td></tr><tr valign="top"><td>fiddleurl</td><td>string</td><td>"http://ide.c9.io/undefined/undefined"</td></tr><tr valign="top"><td>githuburl</td><td>string</td><td>"http://github.com/bastian-f/workspace-bastianf2"</td></tr><tr valign="top"><td>testurl</td><td>string</td><td>"http://undefined-undefined.c9users.io/workspace.html"</td></tr><tr valign="top"><td>foreignSubscribe</td><td>object</td><td>Please see docs above.</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>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>loadTemplateWidget</td><td>function</td><td>function (callback) <br><br>Load the Template widget via chilipeppr.load() so folks have a sample
-widget they can fork as a starting point for their own.</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>loadSenscapeBootloaderWidget</td><td>function</td><td>function (callback) <br><br>Load Senscape Bootloader Widget via chilipeppr.load()</td></tr>
+widget they can fork as a starting point for their own.</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>loadSenscapeBootloaderWidget</td><td>function</td><td>function (callback) <br><br>Load Senscape Bootloader 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/auto-generated-workspace.html b/auto-generated-workspace.html
index 011593f..387b07f 100644
--- a/auto-generated-workspace.html
+++ b/auto-generated-workspace.html
@@ -86,6 +86,24 @@
     padding: 4px 10px 10px 10px;
     background-color: rgba(255, 255, 255, 0.5);
 }
+
+.instructions-container {
+    border: 1px solid #ddd;
+    border-radius:5px;
+}
+
+.instructions {
+    text-align: justify;
+    text-justify: inter-word;
+    padding-right: 10px;
+}
+
+#instructions-title {
+    padding: 10px;
+    width: auto;
+    display: block;
+    border-bottom: 1px solid #ddd;
+}
     </style>
 
     <script type='text/javascript'>
@@ -134,9 +152,9 @@
         name: "Workspace / bastianf2", // The descriptive name of your widget.
         desc: `A ChiliPeppr Workspace bastianf2.`,
         url: "http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html", // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
-        fiddleurl: "http://ide.c9.io/bastianf/chillipeppr-test-2", // 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
+        fiddleurl: "http://ide.c9.io/undefined/undefined", // 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/bastian-f/workspace-bastianf2", // The backing github repo
-        testurl: "http://chillipeppr-test-2-bastianf.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
+        testurl: "http://undefined-undefined.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
            foreignSubscribe: {
             "/com-chilipeppr-elem-dragdrop/ondragover": "The Chilipeppr drag drop element will publish on channel /com-chilipeppr-elem-dragdrop/ondropped when a file is dropped so we subscribe to it so we can load a Gcode file when the user drags it onto the browser. It also adds a hover class to the bound DOM elem so we can add a CSS to hilite on hover",
             "/com-chilipeppr-elem-dragdrop/ondragleave": "We need to know when the drag is over to remove the CSS hilites.",
@@ -165,9 +183,9 @@
           //  this.loadDropTestWidget();
             
             // Create our workspace upper right corner triangle menu
-           // this.loadWorkspaceMenu();
+            this.loadWorkspaceMenu();
             // Add our billboard to the menu (has name, url, picture of workspace)
-         //   this.addBillboardToWorkspaceMenu();
+            this.addBillboardToWorkspaceMenu();
             
             // Setup an event to react to window resize. This helps since
             // some of our widgets have a manual resize to cleanly fill
@@ -289,7 +307,7 @@
          * Load the workspace menu and show the pubsubviewer and fork links using
          * our pubsubviewer widget that makes those links for us.
          */
-    /*    loadWorkspaceMenu: function(callback) {
+    loadWorkspaceMenu: function(callback) {
             // Workspace Menu with Workspace Billboard
             var that = this;
             chilipeppr.load(
@@ -311,7 +329,6 @@
                 }
             );
         },
-        */
     }
 });
     //]]>
@@ -331,13 +348,28 @@
                 <!-- 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-pad10">
-                    
+                    <div class="instructions-container"
+
+                    <p> <span class="panel-title" id="instructions-title" data-toggle="popover" data-original-title="" title="">Instructions</span> </p>
+                    <div class="instructions"><p>
+
+                            <ol>
+                                <li>Download the Serial Port Server: Click on the dropdown menu on upper right corner and choose your platform.
+                                    This will download a small program that establishes a connection to your Senscape Board. Execute it.</li>
+                                <li>Connect your Senscape Board and click on the 'Refresh' icon in the Serial Port Server Widget in the center of this page.
+                                    Choose the port corresponding to your Senscape Board.</li>
+                                <li>Upload the new version of the firmware by clicking on the 'Reprogram' button.</li>
+                            </ol>
+                        </p>
+                    </div>
+                    </div>
                 </div>
 
                 <!-- Center Column -->
                 <div class="col-md-5 col-pad10">
-                    
+
                     <div id="com-senscape-widget-bootloader-instance">
                         <p class="sample">Senscape Bootloader Widget goes here</p>
                     </div>
diff --git a/body-en.html b/body-en.html
new file mode 100644
index 0000000..076f609
--- /dev/null
+++ b/body-en.html
@@ -0,0 +1,62 @@
+<body>
+
+<!--   <div id="com-chilipeppr-widget-flash-instance"></div> -->
+
+<div id="com-chilipeppr-workspace-bastianf2" class="xhidden">
+
+    <div class="container-fluid">
+        <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-pad10">
+
+            </div>
+
+            <!-- Center Column -->
+            <div class="col-md-5 col-pad10">
+
+                <div id="com-senscape-widget-bootloader-instance">
+                    <p class="sample">Senscape Bootloader Widget goes here</p>
+                </div>
+
+                <div id="com-chilipeppr-widget-serialport-instance">
+                    Serial Port Widget goes here
+                </div>
+            </div>
+
+            <!-- Right Column -->
+            <div class="col-md-3 col-pad10">
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Keep this div hidden so it can be cloned and used by the Javascript -->
+<div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
+    <div class="billboard-content">
+        <h4 class="billboard-title" style="">Sample Workspace</h4>
+
+        <p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
+
+        </p>
+        <div class="billboard-imgcontain" style="">
+            <a href="http://chilipeppr.com/sample">
+                <div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
+            </a>
+            <div class="billboard-stats2">
+            </div>
+
+        </div>
+        <p class="billboard-desc">
+            A ChiliPeppr Workspace that lets you do stuff.
+        </p>
+    </div>
+</div>
+
+</body>
+
+</html>
+
diff --git a/head.html b/head.html
new file mode 100644
index 0000000..114e904
--- /dev/null
+++ b/head.html
@@ -0,0 +1,318 @@
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+    <title>Workspace / bastianf2</title>
+
+    <!-- ChiliPeppr is based on bootstrap CSS. -->
+    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+
+    <!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
+    ChiliPeppr's dependency system works as it's based on require.js. -->
+    <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
+
+    <style type='text/css'>
+        /* Workspace CSS */
+
+        .sample {
+            border:2px silver dashed;
+            border-radius:4px;
+            padding:10px;
+        }
+
+        .com-chilipeppr-ws-hdr {
+            padding:10px 15px;
+        }
+
+        .col-pad10 {
+            padding-left:5px;
+            padding-right:5px;
+        }
+        .col-nopadrt {
+            padding-right:0;
+        }
+
+        .col-nopadleft {
+            padding-left:0;
+        }
+        /* Feel free to remove this css tag to change the margin below the widgets */
+        .well, div.panel.panel-default {
+            margin-bottom:10px;
+        }
+
+        .billboard-content {
+            padding: 6px 20px;
+        }
+        .billboard-title {
+            margin-bottom:6px;
+        }
+        .billboard-url {
+            /* font-size: 9px; */
+            padding-top:0px;
+            margin-bottom:6px;
+            font-size:12px;
+        }
+        .billboard-img {
+            border:0px solid red;
+            border-radius: 5px;
+            position: relative;
+            width:100%;
+            height:160px;
+            background-position: center;
+            background-size: cover;
+        }
+        .billboard-imgcontain {
+            border:0px solid red;
+            position: relative;
+        }
+        .billboard-stats {
+            position: absolute;
+            top: 4px;
+            left: 10px;
+        }
+        .billboard-desc {
+            /* font-size:11px; */
+        }
+        .billboard-detail-title {
+            font-weight: bold;
+        }
+        .billboard-stats2 {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            padding: 4px 10px 10px 10px;
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+    </style>
+
+    <script type='text/javascript'>
+        //<![CDATA[
+        /* global cpdefine chilipeppr cprequire */
+        cprequire_test(["inline:com-chilipeppr-workspace-bastianf2"], function(ws) {
+
+            console.log("initting workspace");
+
+            /**
+             * The Root workspace (when you see the ChiliPeppr Header) auto Loads the Flash
+             * Widget so we can show the 3 second flash messages. However, in test mode we
+             * like to see them as well, so just load it from the cprequire_test() method
+             * so we have similar functionality when testing this workspace.
+             */
+            var loadFlashMsg = function() {
+                chilipeppr.load("#com-chilipeppr-widget-flash-instance",
+                    "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",
+                    function() {
+                        console.log("mycallback got called after loading flash msg module");
+                        cprequire(["inline:com-chilipeppr-elem-flashmsg"], function(fm) {
+                            //console.log("inside require of " + fm.id);
+                            fm.init();
+                        });
+                    }
+                );
+            };
+            loadFlashMsg();
+
+            // Init workspace
+            ws.init();
+
+            // Do some niceties for testing like margins on widget and title for browser
+            $('title').html("bastianf2 Workspace");
+            $('body').css('padding', '10px');
+
+        } /*end_test*/ );
+
+        // This is the main definition of your widget. Give it a unique name.
+        cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], function() {
+            return {
+                /**
+                 * The ID of the widget. You must define this and make it unique.
+                 */
+                id: "com-chilipeppr-workspace-bastianf2", // Make the id the same as the cpdefine id
+                name: "Workspace / bastianf2", // The descriptive name of your widget.
+                desc: `A ChiliPeppr Workspace bastianf2.`,
+                url: "http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html", // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
+                fiddleurl: "http://ide.c9.io/undefined/undefined", // 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/bastian-f/workspace-bastianf2", // The backing github repo
+                testurl: "http://undefined-undefined.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
+                foreignSubscribe: {
+                    "/com-chilipeppr-elem-dragdrop/ondragover": "The Chilipeppr drag drop element will publish on channel /com-chilipeppr-elem-dragdrop/ondropped when a file is dropped so we subscribe to it so we can load a Gcode file when the user drags it onto the browser. It also adds a hover class to the bound DOM elem so we can add a CSS to hilite on hover",
+                    "/com-chilipeppr-elem-dragdrop/ondragleave": "We need to know when the drag is over to remove the CSS hilites.",
+                    "/com-chilipeppr-widget-gcode/resize": "We watch if the Gcode viewer resizes so that we can reposition or resize other elements in the workspace. Specifically we ask the Serial Port Console to resize. We also redraw the 3D Viewer so it fills the whole screen."
+                },
+                /**
+                 * 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.
+                 */
+                init: function() {
+
+                    // Most workspaces will instantiate the Serial Port JSON Server widget
+                    this.loadSpjsWidget();
+                    // Most workspaces will instantiate the Serial Port Console widget
+                    this.loadSenscapeBootloaderWidget();
+                    //  this.loadDropTestWidget();
+
+                    // 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);
+
+                },
+                /**
+                 * 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.
+                 */
+                getBillboard: function() {
+                    var el = $('#' + this.id + '-billboard').clone();
+                    el.removeClass("hidden");
+                    el.find('.billboard-desc').text(this.desc);
+                    return el;
+                },
+                /**
+                 * Inject the billboard into the Workspace upper right corner pulldown which
+                 * follows the standard template for workspace pulldown menus.
+                 */
+                addBillboardToWorkspaceMenu: function() {
+                    // get copy of billboard
+                    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 Template widget via chilipeppr.load() so folks have a sample
+                 * widget they can fork as a starting point for their own.
+                 */
+                loadTemplateWidget: function(callback) {
+
+                    chilipeppr.load(
+                        "#com-chilipeppr-widget-template-instance",
+                        "http://raw.githubusercontent.com/chilipeppr/widget-template/master/auto-generated-widget.html",
+                        function() {
+                            // Callback after widget loaded into #myDivWidgetTemplate
+                            // Now use require.js to get reference to instantiated widget
+                            cprequire(
+                                ["inline:com-chilipeppr-widget-template"], // the id you gave your widget
+                                function(myObjWidgetTemplate) {
+                                    // Callback that is passed reference to the newly loaded widget
+                                    console.log("Widget / Template just got loaded.", myObjWidgetTemplate);
+                                    myObjWidgetTemplate.init();
+                                }
+                            );
+                        }
+                    );
+                },
+                /**
+                 * Load the Serial Port JSON Server widget via chilipeppr.load()
+                 */
+                loadSpjsWidget: function(callback) {
+
+                    var that = this;
+
+                    chilipeppr.load(
+                        "#com-chilipeppr-widget-serialport-instance",
+                        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",
+                        function() {
+                            console.log("mycallback got called after loading spjs module");
+                            cprequire(["inline:com-chilipeppr-widget-serialport"], function(spjs) {
+                                //console.log("inside require of " + fm.id);
+                                spjs.setSingleSelectMode();
+                                spjs.init({
+                                    isSingleSelectMode: true,
+                                    defaultBuffer: "default",
+                                    defaultBaud: 115200,
+                                    bufferEncouragementMsg: 'For your device please choose the "default" buffer in the pulldown and a 115200 baud rate before connecting.'
+                                });
+                                //spjs.showBody();
+                                //spjs.consoleToggle();
+
+                                that.widgetSpjs - spjs;
+
+                                if (callback) callback(spjs);
+
+                            });
+                        }
+                    );
+                },
+                /**
+                 * Load Senscape Bootloader Widget via chilipeppr.load()
+                 */
+                loadSenscapeBootloaderWidget: function(callback) {
+                    chilipeppr.load(
+                        "#com-senscape-widget-bootloader-instance",
+                        "http://raw.githubusercontent.com/bastian-f/widget-senscape-bootlader/master/auto-generated-widget.html",
+                        function() {
+                            // Callback after widget loaded into #myDivComSenscapeWidgetBootloader
+                            // Now use require.js to get reference to instantiated widget
+                            cprequire(
+                                ["inline:com-senscape-widget-bootloader"], // the id you gave your widget
+                                function(myObjComSenscapeWidgetBootloader) {
+                                    // Callback that is passed reference to the newly loaded widget
+                                    console.log("Widget / Senscape Bootloader just got loaded.", myObjComSenscapeWidgetBootloader);
+                                    myObjComSenscapeWidgetBootloader.init();
+                                }
+                            );
+                        }
+                    );
+                },
+                /**
+                 * Load the workspace menu and show the pubsubviewer and fork links using
+                 * our pubsubviewer widget that makes those links for us.
+                 */
+                loadWorkspaceMenu: function(callback) {
+                    // Workspace Menu with Workspace Billboard
+                    var that = this;
+                    chilipeppr.load(
+                        "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/",
+                        function() {
+                            require(['inline:com-chilipeppr-elem-pubsubviewer'], function(pubsubviewer) {
+
+                                var el = $('#' + that.id + ' .com-chilipeppr-ws-menu .dropdown-menu-ws');
+                                console.log("got callback for attachto menu for workspace. attaching to el:", el);
+
+                                pubsubviewer.attachTo(
+                                    el,
+                                    that,
+                                    "Workspace"
+                                );
+
+                                if (callback) callback();
+                            });
+                        }
+                    );
+                },
+            }
+        });
+        //]]>
+    </script>
+
+</head>
diff --git a/index-es.html b/index-es.html
new file mode 100644
index 0000000..ff7e438
--- /dev/null
+++ b/index-es.html
@@ -0,0 +1,474 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+    <title>Workspace / bastianf2</title>
+
+    <!-- ChiliPeppr is based on bootstrap CSS. -->
+    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+
+    <!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
+    ChiliPeppr's dependency system works as it's based on require.js. -->
+    <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
+
+    <style type='text/css'>
+        /* Workspace CSS */
+
+        .sample {
+            border:2px silver dashed;
+            border-radius:4px;
+            padding:10px;
+        }
+
+        .com-chilipeppr-ws-hdr {
+            padding:10px 15px;
+        }
+
+        .col-pad10 {
+            padding-left:5px;
+            padding-right:5px;
+        }
+        .col-nopadrt {
+            padding-right:0;
+        }
+
+        .col-nopadleft {
+            padding-left:0;
+        }
+        /* Feel free to remove this css tag to change the margin below the widgets */
+        .well, div.panel.panel-default {
+            margin-bottom:10px;
+        }
+
+        .billboard-content {
+            padding: 6px 20px;
+        }
+        .billboard-title {
+            margin-bottom:6px;
+        }
+        .billboard-url {
+            /* font-size: 9px; */
+            padding-top:0px;
+            margin-bottom:6px;
+            font-size:12px;
+        }
+        .billboard-img {
+            border:0px solid red;
+            border-radius: 5px;
+            position: relative;
+            width:100%;
+            height:160px;
+            background-position: center;
+            background-size: cover;
+        }
+        .billboard-imgcontain {
+            border:0px solid red;
+            position: relative;
+        }
+        .billboard-stats {
+            position: absolute;
+            top: 4px;
+            left: 10px;
+        }
+        .billboard-desc {
+            /* font-size:11px; */
+        }
+        .billboard-detail-title {
+            font-weight: bold;
+        }
+        .billboard-stats2 {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            padding: 4px 10px 10px 10px;
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .instructions-container {
+            border: 1px solid #ddd;
+            border-radius:5px;
+        }
+
+        .instructions {
+            text-align: justify;
+            text-justify: inter-word;
+            padding-right: 10px;
+        }
+
+        #instructions-title {
+            padding: 10px;
+            width: auto;
+            display: block;
+            border-bottom: 1px solid #ddd;
+        }
+    </style>
+
+    <script type='text/javascript'>
+        //<![CDATA[
+        /* global cpdefine chilipeppr cprequire */
+        cprequire_test(["inline:com-chilipeppr-workspace-bastianf2"], function(ws) {
+
+            console.log("initting workspace");
+
+            /**
+             * The Root workspace (when you see the ChiliPeppr Header) auto Loads the Flash
+             * Widget so we can show the 3 second flash messages. However, in test mode we
+             * like to see them as well, so just load it from the cprequire_test() method
+             * so we have similar functionality when testing this workspace.
+             */
+            var loadFlashMsg = function() {
+                chilipeppr.load("#com-chilipeppr-widget-flash-instance",
+                    "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",
+                    function() {
+                        console.log("mycallback got called after loading flash msg module");
+                        cprequire(["inline:com-chilipeppr-elem-flashmsg"], function(fm) {
+                            //console.log("inside require of " + fm.id);
+                            fm.init();
+                        });
+                    }
+                );
+            };
+            loadFlashMsg();
+
+            // Init workspace
+            ws.init();
+
+            // Do some niceties for testing like margins on widget and title for browser
+            $('title').html("bastianf2 Workspace");
+            $('body').css('padding', '10px');
+
+        } /*end_test*/ );
+
+        // This is the main definition of your widget. Give it a unique name.
+        cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], function() {
+            return {
+                /**
+                 * The ID of the widget. You must define this and make it unique.
+                 */
+                id: "com-chilipeppr-workspace-bastianf2", // Make the id the same as the cpdefine id
+                name: "Workspace / bastianf2", // The descriptive name of your widget.
+                desc: `A ChiliPeppr Workspace bastianf2.`,
+                url: "http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html", // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
+                fiddleurl: "http://ide.c9.io/undefined/undefined", // 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/bastian-f/workspace-bastianf2", // The backing github repo
+                testurl: "http://undefined-undefined.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
+                foreignSubscribe: {
+                    "/com-chilipeppr-elem-dragdrop/ondragover": "The Chilipeppr drag drop element will publish on channel /com-chilipeppr-elem-dragdrop/ondropped when a file is dropped so we subscribe to it so we can load a Gcode file when the user drags it onto the browser. It also adds a hover class to the bound DOM elem so we can add a CSS to hilite on hover",
+                    "/com-chilipeppr-elem-dragdrop/ondragleave": "We need to know when the drag is over to remove the CSS hilites.",
+                    "/com-chilipeppr-widget-gcode/resize": "We watch if the Gcode viewer resizes so that we can reposition or resize other elements in the workspace. Specifically we ask the Serial Port Console to resize. We also redraw the 3D Viewer so it fills the whole screen."
+                },
+                /**
+                 * 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.
+                 */
+                init: function() {
+
+                    // Most workspaces will instantiate the Serial Port JSON Server widget
+                    this.loadSpjsWidget();
+                    // Most workspaces will instantiate the Serial Port Console widget
+                    this.loadSenscapeBootloaderWidget();
+                    //  this.loadDropTestWidget();
+
+                    // 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);
+
+                },
+                /**
+                 * 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.
+                 */
+                getBillboard: function() {
+                    var el = $('#' + this.id + '-billboard').clone();
+                    el.removeClass("hidden");
+                    el.find('.billboard-desc').text(this.desc);
+                    return el;
+                },
+                /**
+                 * Inject the billboard into the Workspace upper right corner pulldown which
+                 * follows the standard template for workspace pulldown menus.
+                 */
+                addBillboardToWorkspaceMenu: function() {
+                    // get copy of billboard
+                    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 Template widget via chilipeppr.load() so folks have a sample
+                 * widget they can fork as a starting point for their own.
+                 */
+                loadTemplateWidget: function(callback) {
+
+                    chilipeppr.load(
+                        "#com-chilipeppr-widget-template-instance",
+                        "http://raw.githubusercontent.com/chilipeppr/widget-template/master/auto-generated-widget.html",
+                        function() {
+                            // Callback after widget loaded into #myDivWidgetTemplate
+                            // Now use require.js to get reference to instantiated widget
+                            cprequire(
+                                ["inline:com-chilipeppr-widget-template"], // the id you gave your widget
+                                function(myObjWidgetTemplate) {
+                                    // Callback that is passed reference to the newly loaded widget
+                                    console.log("Widget / Template just got loaded.", myObjWidgetTemplate);
+                                    myObjWidgetTemplate.init();
+                                }
+                            );
+                        }
+                    );
+                },
+                /**
+                 * Load the Serial Port JSON Server widget via chilipeppr.load()
+                 */
+                loadSpjsWidget: function(callback) {
+
+                    var that = this;
+
+                    chilipeppr.load(
+                        "#com-chilipeppr-widget-serialport-instance",
+                        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",
+                        function() {
+                            console.log("mycallback got called after loading spjs module");
+                            cprequire(["inline:com-chilipeppr-widget-serialport"], function(spjs) {
+                                //console.log("inside require of " + fm.id);
+                                spjs.setSingleSelectMode();
+                                spjs.init({
+                                    isSingleSelectMode: true,
+                                    defaultBuffer: "default",
+                                    defaultBaud: 115200,
+                                    bufferEncouragementMsg: 'For your device please choose the "default" buffer in the pulldown and a 115200 baud rate before connecting.'
+                                });
+                                //spjs.showBody();
+                                //spjs.consoleToggle();
+
+                                that.widgetSpjs - spjs;
+
+                                if (callback) callback(spjs);
+
+                            });
+                        }
+                    );
+                },
+                /**
+                 * Load Senscape Bootloader Widget via chilipeppr.load()
+                 */
+                loadSenscapeBootloaderWidget: function(callback) {
+                    chilipeppr.load(
+                        "#com-senscape-widget-bootloader-instance",
+                        "http://raw.githubusercontent.com/bastian-f/widget-senscape-bootlader/master/auto-generated-widget.html",
+                        function() {
+                            // Callback after widget loaded into #myDivComSenscapeWidgetBootloader
+                            // Now use require.js to get reference to instantiated widget
+                            cprequire(
+                                ["inline:com-senscape-widget-bootloader"], // the id you gave your widget
+                                function(myObjComSenscapeWidgetBootloader) {
+                                    // Callback that is passed reference to the newly loaded widget
+                                    console.log("Widget / Senscape Bootloader just got loaded.", myObjComSenscapeWidgetBootloader);
+                                    myObjComSenscapeWidgetBootloader.init();
+                                }
+                            );
+                        }
+                    );
+                },
+                /**
+                 * Load the workspace menu and show the pubsubviewer and fork links using
+                 * our pubsubviewer widget that makes those links for us.
+                 */
+                loadWorkspaceMenu: function(callback) {
+                    // Workspace Menu with Workspace Billboard
+                    var that = this;
+                    chilipeppr.load(
+                        "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/",
+                        function() {
+                            require(['inline:com-chilipeppr-elem-pubsubviewer'], function(pubsubviewer) {
+
+                                var el = $('#' + that.id + ' .com-chilipeppr-ws-menu .dropdown-menu-ws');
+                                console.log("got callback for attachto menu for workspace. attaching to el:", el);
+
+                                pubsubviewer.attachTo(
+                                    el,
+                                    that,
+                                    "Workspace"
+                                );
+
+                                if (callback) callback();
+                            });
+                        }
+                    );
+                },
+            }
+        });
+        //]]>
+    </script>
+
+</head>
+
+
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Brand</a>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav">
+                <!--    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>  -->
+                <!--   <li><a href="#">Link</a></li>  -->
+                <!--  <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                      <li><a href="#">Action</a></li>
+                      <li><a href="#">Another action</a></li>
+                      <li><a href="#">Something else here</a></li>
+                      <li role="separator" class="divider"></li>
+                      <li><a href="#">Separated link</a></li>
+                      <li role="separator" class="divider"></li>
+                      <li><a href="#">One more separated link</a></li>
+                    </ul>
+                  </li>  -->
+            </ul>
+            <form class="navbar-form navbar-left">
+                <!--   <div class="form-group">
+                     <input type="text" class="form-control" placeholder="Search">
+                   </div>  -->
+                <!--   <button type="submit" class="btn btn-default">Submit</button>  -->
+            </form>
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="index.html?forcerefresh=true   ">English</a></li>
+                <li class="active"><a href="#">Castellano<span class="sr-only">(current)</span></a></li>
+
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Descargar servidor de puerto serie <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Linux</a></li>
+                        <li><a href="#">Mac</a></li>
+                        <li><a href="#">Windows</a></li>
+                        <li role="separator" class="divider"></li>
+                        <li><a href="#">Separated link</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+</nav>
+
+
+
+<body>
+
+<!--   <div id="com-chilipeppr-widget-flash-instance"></div> -->
+
+<div id="com-chilipeppr-workspace-bastianf2" class="xhidden">
+
+    <div class="container-fluid">
+        <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-pad10">
+                <div class="instructions-container"
+
+                <p> <span class="panel-title" id="instructions-title" data-toggle="popover" data-original-title="" title="">Instrucciones</span> </p>
+                <div class="instructions"><p>
+
+                    <ol>
+                        <li>Descargar el servidor de puerto serie: Clicamos el menú desplegable arriba a la derecha y elegimos nuestra plataforma.
+                            Esto descargará un pequeño programa que establece una conexión con nuestra placa Senscape. Lo ejecutamos.
+                        </li>
+                        <li>Conectamos nuestra placa Senscape y clicamos en el icono de refrescar en el <i>widget</i> del servidor de puerto serie.
+                            Elegimos el puerto que corresponde a nuestra placa Senscape.</li>
+                        <li>Subimos la última versión del firmware clicando el botón 'Reprogram'.</li>
+                    </ol>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Center Column -->
+        <div class="col-md-5 col-pad10">
+
+            <div id="com-senscape-widget-bootloader-instance">
+                <p class="sample">Senscape Bootloader Widget goes here</p>
+            </div>
+
+            <div id="com-chilipeppr-widget-serialport-instance">
+                Serial Port Widget goes here
+            </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="col-md-3 col-pad10">
+        </div>
+
+    </div>
+</div>
+</div>
+
+<!-- Keep this div hidden so it can be cloned and used by the Javascript -->
+<div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
+    <div class="billboard-content">
+        <h4 class="billboard-title" style="">Sample Workspace</h4>
+
+        <p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
+
+        </p>
+        <div class="billboard-imgcontain" style="">
+            <a href="http://chilipeppr.com/sample">
+                <div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
+            </a>
+            <div class="billboard-stats2">
+            </div>
+
+        </div>
+        <p class="billboard-desc">
+            A ChiliPeppr Workspace that lets you do stuff.
+        </p>
+    </div>
+</div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index d374997..515003e 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,7 @@
 <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
-    <title>
-        <!--(auto-fill by runme.js-->
-    </title>
+    <title>Workspace / bastianf2</title>
 
     <!-- ChiliPeppr is based on bootstrap CSS. -->
     <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
@@ -15,137 +13,464 @@
     ChiliPeppr's dependency system works as it's based on require.js. -->
     <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
 
-    <!-- widget.css DON'T REMOVE -->
     <style type='text/css'>
-        /* widget.css will get inlined here by runme.js. don't remove this comment or inlining will fail. */
+        /* Workspace CSS */
+
+        .sample {
+            border:2px silver dashed;
+            border-radius:4px;
+            padding:10px;
+        }
+
+        .com-chilipeppr-ws-hdr {
+            padding:10px 15px;
+        }
+
+        .col-pad10 {
+            padding-left:5px;
+            padding-right:5px;
+        }
+        .col-nopadrt {
+            padding-right:0;
+        }
+
+        .col-nopadleft {
+            padding-left:0;
+        }
+        /* Feel free to remove this css tag to change the margin below the widgets */
+        .well, div.panel.panel-default {
+            margin-bottom:10px;
+        }
+
+        .billboard-content {
+            padding: 6px 20px;
+        }
+        .billboard-title {
+            margin-bottom:6px;
+        }
+        .billboard-url {
+            /* font-size: 9px; */
+            padding-top:0px;
+            margin-bottom:6px;
+            font-size:12px;
+        }
+        .billboard-img {
+            border:0px solid red;
+            border-radius: 5px;
+            position: relative;
+            width:100%;
+            height:160px;
+            background-position: center;
+            background-size: cover;
+        }
+        .billboard-imgcontain {
+            border:0px solid red;
+            position: relative;
+        }
+        .billboard-stats {
+            position: absolute;
+            top: 4px;
+            left: 10px;
+        }
+        .billboard-desc {
+            /* font-size:11px; */
+        }
+        .billboard-detail-title {
+            font-weight: bold;
+        }
+        .billboard-stats2 {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            padding: 4px 10px 10px 10px;
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .instructions-container {
+            border: 1px solid #ddd;
+            border-radius:5px;
+        }
+
+        .instructions {
+            text-align: justify;
+            text-justify: inter-word;
+            padding-right: 10px;
+        }
+
+        #instructions-title {
+            padding: 10px;
+            width: auto;
+            display: block;
+            border-bottom: 1px solid #ddd;
+        }
     </style>
-    <link rel="stylesheet" type="text/css" href="workspace.css">
-    <!-- DON'T REMOVE end widget.css -->
 
-    <!-- widget.js DON'T REMOVE -->
     <script type='text/javascript'>
         //<![CDATA[
-        /* widget.js will get inlined here by runme.js. don't remove this comment or inlining will fail. */
+        /* global cpdefine chilipeppr cprequire */
+        cprequire_test(["inline:com-chilipeppr-workspace-bastianf2"], function(ws) {
+
+            console.log("initting workspace");
+
+            /**
+             * The Root workspace (when you see the ChiliPeppr Header) auto Loads the Flash
+             * Widget so we can show the 3 second flash messages. However, in test mode we
+             * like to see them as well, so just load it from the cprequire_test() method
+             * so we have similar functionality when testing this workspace.
+             */
+            var loadFlashMsg = function() {
+                chilipeppr.load("#com-chilipeppr-widget-flash-instance",
+                    "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",
+                    function() {
+                        console.log("mycallback got called after loading flash msg module");
+                        cprequire(["inline:com-chilipeppr-elem-flashmsg"], function(fm) {
+                            //console.log("inside require of " + fm.id);
+                            fm.init();
+                        });
+                    }
+                );
+            };
+            loadFlashMsg();
+
+            // Init workspace
+            ws.init();
+
+            // Do some niceties for testing like margins on widget and title for browser
+            $('title').html("bastianf2 Workspace");
+            $('body').css('padding', '10px');
+
+        } /*end_test*/ );
+
+        // This is the main definition of your widget. Give it a unique name.
+        cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], function() {
+            return {
+                /**
+                 * The ID of the widget. You must define this and make it unique.
+                 */
+                id: "com-chilipeppr-workspace-bastianf2", // Make the id the same as the cpdefine id
+                name: "Workspace / bastianf2", // The descriptive name of your widget.
+                desc: `A ChiliPeppr Workspace bastianf2.`,
+                url: "http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html", // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
+                fiddleurl: "http://ide.c9.io/undefined/undefined", // 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/bastian-f/workspace-bastianf2", // The backing github repo
+                testurl: "http://undefined-undefined.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
+                foreignSubscribe: {
+                    "/com-chilipeppr-elem-dragdrop/ondragover": "The Chilipeppr drag drop element will publish on channel /com-chilipeppr-elem-dragdrop/ondropped when a file is dropped so we subscribe to it so we can load a Gcode file when the user drags it onto the browser. It also adds a hover class to the bound DOM elem so we can add a CSS to hilite on hover",
+                    "/com-chilipeppr-elem-dragdrop/ondragleave": "We need to know when the drag is over to remove the CSS hilites.",
+                    "/com-chilipeppr-widget-gcode/resize": "We watch if the Gcode viewer resizes so that we can reposition or resize other elements in the workspace. Specifically we ask the Serial Port Console to resize. We also redraw the 3D Viewer so it fills the whole screen."
+                },
+                /**
+                 * 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.
+                 */
+                init: function() {
+
+                    // Most workspaces will instantiate the Serial Port JSON Server widget
+                    this.loadSpjsWidget();
+                    // Most workspaces will instantiate the Serial Port Console widget
+                    this.loadSenscapeBootloaderWidget();
+                    //  this.loadDropTestWidget();
+
+                    // 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);
+
+                },
+                /**
+                 * 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.
+                 */
+                getBillboard: function() {
+                    var el = $('#' + this.id + '-billboard').clone();
+                    el.removeClass("hidden");
+                    el.find('.billboard-desc').text(this.desc);
+                    return el;
+                },
+                /**
+                 * Inject the billboard into the Workspace upper right corner pulldown which
+                 * follows the standard template for workspace pulldown menus.
+                 */
+                addBillboardToWorkspaceMenu: function() {
+                    // get copy of billboard
+                    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 Template widget via chilipeppr.load() so folks have a sample
+                 * widget they can fork as a starting point for their own.
+                 */
+                loadTemplateWidget: function(callback) {
+
+                    chilipeppr.load(
+                        "#com-chilipeppr-widget-template-instance",
+                        "http://raw.githubusercontent.com/chilipeppr/widget-template/master/auto-generated-widget.html",
+                        function() {
+                            // Callback after widget loaded into #myDivWidgetTemplate
+                            // Now use require.js to get reference to instantiated widget
+                            cprequire(
+                                ["inline:com-chilipeppr-widget-template"], // the id you gave your widget
+                                function(myObjWidgetTemplate) {
+                                    // Callback that is passed reference to the newly loaded widget
+                                    console.log("Widget / Template just got loaded.", myObjWidgetTemplate);
+                                    myObjWidgetTemplate.init();
+                                }
+                            );
+                        }
+                    );
+                },
+                /**
+                 * Load the Serial Port JSON Server widget via chilipeppr.load()
+                 */
+                loadSpjsWidget: function(callback) {
+
+                    var that = this;
+
+                    chilipeppr.load(
+                        "#com-chilipeppr-widget-serialport-instance",
+                        "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",
+                        function() {
+                            console.log("mycallback got called after loading spjs module");
+                            cprequire(["inline:com-chilipeppr-widget-serialport"], function(spjs) {
+                                //console.log("inside require of " + fm.id);
+                                spjs.setSingleSelectMode();
+                                spjs.init({
+                                    isSingleSelectMode: true,
+                                    defaultBuffer: "default",
+                                    defaultBaud: 115200,
+                                    bufferEncouragementMsg: 'For your device please choose the "default" buffer in the pulldown and a 115200 baud rate before connecting.'
+                                });
+                                //spjs.showBody();
+                                //spjs.consoleToggle();
+
+                                that.widgetSpjs - spjs;
+
+                                if (callback) callback(spjs);
+
+                            });
+                        }
+                    );
+                },
+                /**
+                 * Load Senscape Bootloader Widget via chilipeppr.load()
+                 */
+                loadSenscapeBootloaderWidget: function(callback) {
+                    chilipeppr.load(
+                        "#com-senscape-widget-bootloader-instance",
+                        "http://raw.githubusercontent.com/bastian-f/widget-senscape-bootlader/master/auto-generated-widget.html",
+                        function() {
+                            // Callback after widget loaded into #myDivComSenscapeWidgetBootloader
+                            // Now use require.js to get reference to instantiated widget
+                            cprequire(
+                                ["inline:com-senscape-widget-bootloader"], // the id you gave your widget
+                                function(myObjComSenscapeWidgetBootloader) {
+                                    // Callback that is passed reference to the newly loaded widget
+                                    console.log("Widget / Senscape Bootloader just got loaded.", myObjComSenscapeWidgetBootloader);
+                                    myObjComSenscapeWidgetBootloader.init();
+                                }
+                            );
+                        }
+                    );
+                },
+                /**
+                 * Load the workspace menu and show the pubsubviewer and fork links using
+                 * our pubsubviewer widget that makes those links for us.
+                 */
+                loadWorkspaceMenu: function(callback) {
+                    // Workspace Menu with Workspace Billboard
+                    var that = this;
+                    chilipeppr.load(
+                        "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/",
+                        function() {
+                            require(['inline:com-chilipeppr-elem-pubsubviewer'], function(pubsubviewer) {
+
+                                var el = $('#' + that.id + ' .com-chilipeppr-ws-menu .dropdown-menu-ws');
+                                console.log("got callback for attachto menu for workspace. attaching to el:", el);
+
+                                pubsubviewer.attachTo(
+                                    el,
+                                    that,
+                                    "Workspace"
+                                );
+
+                                if (callback) callback();
+                            });
+                        }
+                    );
+                },
+            }
+        });
         //]]>
     </script>
-    <script type='text/javascript' src="workspace.js"></script>
-    <!-- DON'T REMOVE end widget.js -->
 
 </head>
 
+
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Brand</a>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav">
+                <!--    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>  -->
+                <!--   <li><a href="#">Link</a></li>  -->
+                <!--  <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                      <li><a href="#">Action</a></li>
+                      <li><a href="#">Another action</a></li>
+                      <li><a href="#">Something else here</a></li>
+                      <li role="separator" class="divider"></li>
+                      <li><a href="#">Separated link</a></li>
+                      <li role="separator" class="divider"></li>
+                      <li><a href="#">One more separated link</a></li>
+                    </ul>
+                  </li>  -->
+            </ul>
+            <form class="navbar-form navbar-left">
+                <!--   <div class="form-group">
+                     <input type="text" class="form-control" placeholder="Search">
+                   </div>  -->
+                <!--   <button type="submit" class="btn btn-default">Submit</button>  -->
+            </form>
+            <ul class="nav navbar-nav navbar-right">
+                <li class="active"><a href="#">English <span class="sr-only">(current)</span></a></li>
+                <li><a href="index-es.html?forcerefresh=true">Castellano</a></li>
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Download Serial Port Server <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Linux</a></li>
+                        <li><a href="#">Mac</a></li>
+                        <li><a href="#">Windows</a></li>
+                        <li role="separator" class="divider"></li>
+                        <li><a href="#">Separated link</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+</nav>
+
+
+
+
+
+
+
 <body>
 
+<!--   <div id="com-chilipeppr-widget-flash-instance"></div> -->
 
-    <nav class="navbar navbar-default">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="#">Brand</a>
-    </div>
+<div id="com-chilipeppr-workspace-bastianf2" class="xhidden">
 
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav">
-        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a href="#">One more separated link</a></li>
-          </ul>
-        </li>
-      </ul>
-      <form class="navbar-form navbar-left">
-        <div class="form-group">
-          <input type="text" class="form-control" placeholder="Search">
-        </div>
-        <button type="submit" class="btn btn-default">Submit</button>
-      </form>
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a href="#">Separated link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </div><!-- /.navbar-collapse -->
-  </div><!-- /.container-fluid -->
-</nav>
+    <div class="container-fluid">
+        <div class="row">
 
- <!--   <div id="com-chilipeppr-widget-flash-instance"></div> -->
+            <!-- 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 id="com-chilipeppr-workspace-bastianf2" class="xhidden">
+            <div class="col-md-4 col-pad10">
+                <div class="instructions-container"
 
-        <div class="container-fluid">
-            <div class="row">
+                <p> <span class="panel-title" id="instructions-title" data-toggle="popover" data-original-title="" title="">Instructions</span> </p>
+                <div class="instructions"><p>
 
-                <!-- 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-pad10">
-                    
+                    <ol>
+                        <li>Download the Serial Port Server: Click on the dropdown menu on upper right corner and choose your platform.
+                            This will download a small program that establishes a connection to your Senscape Board. Execute it.</li>
+                        <li>Connect your Senscape Board and click on the 'Refresh' icon in the Serial Port Server Widget in the center of this page.
+                            Choose the port corresponding to your Senscape Board.</li>
+                        <li>Upload the new version of the firmware by clicking on the 'Reprogram' button.</li>
+                    </ol>
+                    </p>
                 </div>
+            </div>
+        </div>
 
-                <!-- Center Column -->
-                <div class="col-md-5 col-pad10">
-                    
-                    <div id="com-senscape-widget-bootloader-instance">
-                        <p class="sample">Senscape Bootloader Widget goes here</p>
-                    </div>
-                    
-                    <div id="com-chilipeppr-widget-serialport-instance">
-                        Serial Port Widget goes here
-                    </div>
-                </div>
+        <!-- Center Column -->
+        <div class="col-md-5 col-pad10">
 
-                <!-- Right Column -->
-                <div class="col-md-3 col-pad10">
-                </div>
+            <div id="com-senscape-widget-bootloader-instance">
+                <p class="sample">Senscape Bootloader Widget goes here</p>
+            </div>
 
+            <div id="com-chilipeppr-widget-serialport-instance">
+                Serial Port Widget goes here
             </div>
         </div>
-    </div>
 
-    <!-- Keep this div hidden so it can be cloned and used by the Javascript -->
-    <div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
-        <div class="billboard-content">
-            <h4 class="billboard-title" style="">Sample Workspace</h4>
+        <!-- Right Column -->
+        <div class="col-md-3 col-pad10">
+        </div>
+
+    </div>
+</div>
+</div>
 
-            <p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
+<!-- Keep this div hidden so it can be cloned and used by the Javascript -->
+<div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
+    <div class="billboard-content">
+        <h4 class="billboard-title" style="">Sample Workspace</h4>
 
-            </p>
-            <div class="billboard-imgcontain" style="">
-                <a href="http://chilipeppr.com/sample">
-                    <div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
-                </a>
-                <div class="billboard-stats2">
-                </div>
+        <p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
 
+        </p>
+        <div class="billboard-imgcontain" style="">
+            <a href="http://chilipeppr.com/sample">
+                <div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
+            </a>
+            <div class="billboard-stats2">
             </div>
-            <p class="billboard-desc">
-                A ChiliPeppr Workspace that lets you do stuff.
-            </p>
+
         </div>
+        <p class="billboard-desc">
+            A ChiliPeppr Workspace that lets you do stuff.
+        </p>
     </div>
+</div>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/index_old.html b/index_old.html
new file mode 100644
index 0000000..d374997
--- /dev/null
+++ b/index_old.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+    <title>
+        <!--(auto-fill by runme.js-->
+    </title>
+
+    <!-- ChiliPeppr is based on bootstrap CSS. -->
+    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+
+    <!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
+    ChiliPeppr's dependency system works as it's based on require.js. -->
+    <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
+
+    <!-- widget.css DON'T REMOVE -->
+    <style type='text/css'>
+        /* widget.css will get inlined here by runme.js. don't remove this comment or inlining will fail. */
+    </style>
+    <link rel="stylesheet" type="text/css" href="workspace.css">
+    <!-- DON'T REMOVE end widget.css -->
+
+    <!-- widget.js DON'T REMOVE -->
+    <script type='text/javascript'>
+        //<![CDATA[
+        /* widget.js will get inlined here by runme.js. don't remove this comment or inlining will fail. */
+        //]]>
+    </script>
+    <script type='text/javascript' src="workspace.js"></script>
+    <!-- DON'T REMOVE end widget.js -->
+
+</head>
+
+<body>
+
+
+    <nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Brand</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
+        <li><a href="#">Link</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">One more separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+      <form class="navbar-form navbar-left">
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Search">
+        </div>
+        <button type="submit" class="btn btn-default">Submit</button>
+      </form>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="#">Link</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>
+
+ <!--   <div id="com-chilipeppr-widget-flash-instance"></div> -->
+
+    <div id="com-chilipeppr-workspace-bastianf2" class="xhidden">
+
+        <div class="container-fluid">
+            <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-pad10">
+                    
+                </div>
+
+                <!-- Center Column -->
+                <div class="col-md-5 col-pad10">
+                    
+                    <div id="com-senscape-widget-bootloader-instance">
+                        <p class="sample">Senscape Bootloader Widget goes here</p>
+                    </div>
+                    
+                    <div id="com-chilipeppr-widget-serialport-instance">
+                        Serial Port Widget goes here
+                    </div>
+                </div>
+
+                <!-- Right Column -->
+                <div class="col-md-3 col-pad10">
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- Keep this div hidden so it can be cloned and used by the Javascript -->
+    <div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
+        <div class="billboard-content">
+            <h4 class="billboard-title" style="">Sample Workspace</h4>
+
+            <p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
+
+            </p>
+            <div class="billboard-imgcontain" style="">
+                <a href="http://chilipeppr.com/sample">
+                    <div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
+                </a>
+                <div class="billboard-stats2">
+                </div>
+
+            </div>
+            <p class="billboard-desc">
+                A ChiliPeppr Workspace that lets you do stuff.
+            </p>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/index_old2.html b/index_old2.html
new file mode 100644
index 0000000..0d1b611
--- /dev/null
+++ b/index_old2.html
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+    <title>Workspace / bastianf2</title>
+
+    <!-- ChiliPeppr is based on bootstrap CSS. -->
+    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+
+    <!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
+    ChiliPeppr's dependency system works as it's based on require.js. -->
+    <script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
+
+    <style type='text/css'>
+/* Workspace CSS */
+
+.sample {
+    border:2px silver dashed;
+    border-radius:4px;
+    padding:10px;
+}
+
+.com-chilipeppr-ws-hdr {
+    padding:10px 15px;
+}
+
+.col-pad10 {
+    padding-left:5px;
+    padding-right:5px;
+}
+.col-nopadrt {
+    padding-right:0;    
+}
+
+.col-nopadleft {
+    padding-left:0;    
+}
+/* Feel free to remove this css tag to change the margin below the widgets */
+.well, div.panel.panel-default {
+    margin-bottom:10px;
+}
+
+.billboard-content {
+    padding: 6px 20px;
+}
+.billboard-title {
+    margin-bottom:6px;
+}
+.billboard-url {
+    /* font-size: 9px; */
+    padding-top:0px;
+    margin-bottom:6px;
+    font-size:12px;
+}
+.billboard-img {
+    border:0px solid red;
+    border-radius: 5px;
+    position: relative;
+    width:100%;
+    height:160px;
+    background-position: center;
+    background-size: cover;
+}
+.billboard-imgcontain {
+    border:0px solid red; 
+    position: relative;
+}
+.billboard-stats {
+    position: absolute;
+    top: 4px;
+    left: 10px;
+}
+.billboard-desc {
+    /* font-size:11px; */
+}
+.billboard-detail-title {
+    font-weight: bold;
+}
+.billboard-stats2 {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    padding: 4px 10px 10px 10px;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+    </style>
+
+    <script type='text/javascript'>
+    //<![CDATA[
+/* global cpdefine chilipeppr cprequire */
+cprequire_test(["inline:com-chilipeppr-workspace-bastianf2"], function(ws) {
+
+    console.log("initting workspace");
+
+    /**
+     * The Root workspace (when you see the ChiliPeppr Header) auto Loads the Flash 
+     * Widget so we can show the 3 second flash messages. However, in test mode we
+     * like to see them as well, so just load it from the cprequire_test() method
+     * so we have similar functionality when testing this workspace.
+     */
+    var loadFlashMsg = function() {
+        chilipeppr.load("#com-chilipeppr-widget-flash-instance",
+            "http://fiddle.jshell.net/chilipeppr/90698kax/show/light/",
+            function() {
+                console.log("mycallback got called after loading flash msg module");
+                cprequire(["inline:com-chilipeppr-elem-flashmsg"], function(fm) {
+                    //console.log("inside require of " + fm.id);
+                    fm.init();
+                });
+            }
+        );
+    };
+    loadFlashMsg();
+        
+    // Init workspace
+    ws.init();
+    
+    // Do some niceties for testing like margins on widget and title for browser
+    $('title').html("bastianf2 Workspace");
+    $('body').css('padding', '10px');
+
+} /*end_test*/ );
+
+// This is the main definition of your widget. Give it a unique name.
+cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], function() {
+    return {
+        /**
+         * The ID of the widget. You must define this and make it unique.
+         */
+        id: "com-chilipeppr-workspace-bastianf2", // Make the id the same as the cpdefine id
+        name: "Workspace / bastianf2", // The descriptive name of your widget.
+        desc: `A ChiliPeppr Workspace bastianf2.`,
+        url: "http://raw.githubusercontent.com/bastian-f/workspace-bastianf2/master/auto-generated-workspace.html", // The final URL of the working widget as a single HTML file with CSS and Javascript inlined. You can let runme.js auto fill this if you are using Cloud9.
+        fiddleurl: "http://ide.c9.io/undefined/undefined", // 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/bastian-f/workspace-bastianf2", // The backing github repo
+        testurl: "http://undefined-undefined.c9users.io/workspace.html", // The standalone working widget so can view it working by itself
+           foreignSubscribe: {
+            "/com-chilipeppr-elem-dragdrop/ondragover": "The Chilipeppr drag drop element will publish on channel /com-chilipeppr-elem-dragdrop/ondropped when a file is dropped so we subscribe to it so we can load a Gcode file when the user drags it onto the browser. It also adds a hover class to the bound DOM elem so we can add a CSS to hilite on hover",
+            "/com-chilipeppr-elem-dragdrop/ondragleave": "We need to know when the drag is over to remove the CSS hilites.",
+            "/com-chilipeppr-widget-gcode/resize": "We watch if the Gcode viewer resizes so that we can reposition or resize other elements in the workspace. Specifically we ask the Serial Port Console to resize. We also redraw the 3D Viewer so it fills the whole screen."
+},
+        /**
+         * 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.
+         */
+        init: function() {
+
+            // Most workspaces will instantiate the Serial Port JSON Server widget
+            this.loadSpjsWidget();
+            // Most workspaces will instantiate the Serial Port Console widget
+            this.loadSenscapeBootloaderWidget();
+          //  this.loadDropTestWidget();
+            
+            // 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);
+
+        },
+        /**
+         * 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.
+         */
+        getBillboard: function() {
+            var el = $('#' + this.id + '-billboard').clone();
+            el.removeClass("hidden");
+            el.find('.billboard-desc').text(this.desc);
+            return el;
+        },
+        /**
+         * Inject the billboard into the Workspace upper right corner pulldown which
+         * follows the standard template for workspace pulldown menus.
+         */
+        addBillboardToWorkspaceMenu: function() {
+            // get copy of billboard
+            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 Template widget via chilipeppr.load() so folks have a sample
+         * widget they can fork as a starting point for their own.
+         */
+        loadTemplateWidget: function(callback) {
+
+            chilipeppr.load(
+                "#com-chilipeppr-widget-template-instance",
+                "http://raw.githubusercontent.com/chilipeppr/widget-template/master/auto-generated-widget.html",
+                function() {
+                    // Callback after widget loaded into #myDivWidgetTemplate
+                    // Now use require.js to get reference to instantiated widget
+                    cprequire(
+                        ["inline:com-chilipeppr-widget-template"], // the id you gave your widget
+                        function(myObjWidgetTemplate) {
+                            // Callback that is passed reference to the newly loaded widget
+                            console.log("Widget / Template just got loaded.", myObjWidgetTemplate);
+                            myObjWidgetTemplate.init();
+                        }
+                    );
+                }
+            );
+        },
+        /**
+         * Load the Serial Port JSON Server widget via chilipeppr.load()
+         */
+        loadSpjsWidget: function(callback) {
+
+            var that = this;
+
+            chilipeppr.load(
+                "#com-chilipeppr-widget-serialport-instance",
+                "http://fiddle.jshell.net/chilipeppr/vetj5fvx/show/light/",
+                function() {
+                    console.log("mycallback got called after loading spjs module");
+                    cprequire(["inline:com-chilipeppr-widget-serialport"], function(spjs) {
+                        //console.log("inside require of " + fm.id);
+                        spjs.setSingleSelectMode();
+                        spjs.init({
+                            isSingleSelectMode: true,
+                            defaultBuffer: "default",
+                            defaultBaud: 115200,
+                            bufferEncouragementMsg: 'For your device please choose the "default" buffer in the pulldown and a 115200 baud rate before connecting.'
+                        });
+                        //spjs.showBody();
+                        //spjs.consoleToggle();
+
+                        that.widgetSpjs - spjs;
+                        
+                        if (callback) callback(spjs);
+
+                    });
+                }
+            );
+        },
+        /**
+         * Load Senscape Bootloader Widget via chilipeppr.load()
+         */
+        loadSenscapeBootloaderWidget: function(callback) {
+            chilipeppr.load(
+                "#com-senscape-widget-bootloader-instance",
+                "http://raw.githubusercontent.com/bastian-f/widget-senscape-bootlader/master/auto-generated-widget.html",
+                function() {
+                    // Callback after widget loaded into #myDivComSenscapeWidgetBootloader
+                    // Now use require.js to get reference to instantiated widget
+                    cprequire(
+                        ["inline:com-senscape-widget-bootloader"], // the id you gave your widget
+                        function(myObjComSenscapeWidgetBootloader) {
+                            // Callback that is passed reference to the newly loaded widget
+                            console.log("Widget / Senscape Bootloader just got loaded.", myObjComSenscapeWidgetBootloader);
+                            myObjComSenscapeWidgetBootloader.init();
+                        }
+                    );
+                }
+            );
+        },
+        /**
+         * Load the workspace menu and show the pubsubviewer and fork links using
+         * our pubsubviewer widget that makes those links for us.
+         */
+    loadWorkspaceMenu: function(callback) {
+            // Workspace Menu with Workspace Billboard
+            var that = this;
+            chilipeppr.load(
+                "http://fiddle.jshell.net/chilipeppr/zMbL9/show/light/",
+                function() {
+                    require(['inline:com-chilipeppr-elem-pubsubviewer'], function(pubsubviewer) {
+
+                        var el = $('#' + that.id + ' .com-chilipeppr-ws-menu .dropdown-menu-ws');
+                        console.log("got callback for attachto menu for workspace. attaching to el:", el);
+
+                        pubsubviewer.attachTo(
+                            el,
+                            that,
+                            "Workspace"
+                        );
+                        
+                        if (callback) callback();
+                    });
+                }
+            );
+        },
+    }
+});
+    //]]>
+    </script>
+
+</head>
+
+<body>
+
+ <!--   <div id="com-chilipeppr-widget-flash-instance"></div> -->
+
+    <div id="com-chilipeppr-workspace-bastianf2" class="xhidden">
+
+        <div class="container-fluid">
+            <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-pad10">
+                    
+                </div>
+
+                <!-- Center Column -->
+                <div class="col-md-5 col-pad10">
+                    
+                    <div id="com-senscape-widget-bootloader-instance">
+                        <p class="sample">Senscape Bootloader Widget goes here</p>
+                    </div>
+                    
+                    <div id="com-chilipeppr-widget-serialport-instance">
+                        Serial Port Widget goes here
+                    </div>
+                </div>
+
+                <!-- Right Column -->
+                <div class="col-md-3 col-pad10">
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- Keep this div hidden so it can be cloned and used by the Javascript -->
+    <div id="com-chilipeppr-workspace-sample-billboard" class="hidden">
+        <div class="billboard-content">
+            <h4 class="billboard-title" style="">Sample Workspace</h4>
+
+            <p class="billboard-url" style=""><a href="http://chilipeppr.com/sample">chilipeppr.com/sample</a>
+
+            </p>
+            <div class="billboard-imgcontain" style="">
+                <a href="http://chilipeppr.com/sample">
+                    <div class="billboard-img" style="background-image: url('https://github.com/chilipeppr/workspace-sample/raw/master/billboard.png')" />
+                </a>
+                <div class="billboard-stats2">
+                </div>
+
+            </div>
+            <p class="billboard-desc">
+                A ChiliPeppr Workspace that lets you do stuff.
+            </p>
+        </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index_old3.html b/index_old3.html
new file mode 100644
index 0000000..425a2b7
--- /dev/null
+++ b/index_old3.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<script src="lib/w3.js"></script>
+
+<body>
+
+<div w3-include-html="auto-generated-workspace.html"></div> 
+
+<script>
+w3.includeHTML();
+</script>
+
+</body>
+</html>
diff --git a/lib/w3.js b/lib/w3.js
new file mode 100644
index 0000000..b5d3675
--- /dev/null
+++ b/lib/w3.js
@@ -0,0 +1,397 @@
+/* W3.JS 1.02 May 2017 by w3schools.com */
+"use strict";
+var w3 = {};
+w3.hide = function (sel) {
+  w3.hideElements(w3.getElements(sel));
+};
+w3.hideElements = function (elements) {
+  var i, l = elements.length;
+  for (i = 0; i < l; i++) {
+    w3.hideElement(elements[i]);
+  }
+};
+w3.hideElement = function (element) {
+  w3.styleElement(element, "display", "none");
+};
+w3.show = function (sel, a) {
+  var elements = w3.getElements(sel);
+  if (a) {w3.hideElements(elements);}
+  w3.showElements(elements);
+};
+w3.showElements = function (elements) {
+  var i, l = elements.length;
+  for (i = 0; i < l; i++) {
+    w3.showElement(elements[i]);
+  }
+};
+w3.showElement = function (element) {
+  w3.styleElement(element, "display", "block");
+};
+w3.addStyle = function (sel, prop, val) {
+  w3.styleElements(w3.getElements(sel), prop, val);
+};
+w3.styleElements = function (elements, prop, val) {
+  var i, l = elements.length;
+  for (i = 0; i < l; i++) {    
+    w3.styleElement(elements[i], prop, val);
+  }
+};
+w3.styleElement = function (element, prop, val) {
+  element.style.setProperty(prop, val);
+};
+w3.toggleShow = function (sel) {
+  var i, x = w3.getElements(sel), l = x.length;
+  for (i = 0; i < l; i++) {    
+    if (x[i].style.display == "none") {
+      w3.styleElement(x[i], "display", "block");
+    } else {
+      w3.styleElement(x[i], "display", "none");
+    }
+  }
+};
+w3.addClass = function (sel, name) {
+  w3.addClassElements(w3.getElements(sel), name);
+};
+w3.addClassElements = function (elements, name) {
+  var i, l = elements.length;
+  for (i = 0; i < l; i++) {
+    w3.addClassElement(elements[i], name);
+  }
+};
+w3.addClassElement = function (element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
+  }
+};
+w3.removeClass = function (sel, name) {
+  w3.removeClassElements(w3.getElements(sel), name);
+};
+w3.removeClassElements = function (elements, name) {
+  var i, l = elements.length, arr1, arr2, j;
+  for (i = 0; i < l; i++) {
+    w3.removeClassElement(elements[i], name);
+  }
+};
+w3.removeClassElement = function (element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);     
+    }
+  }
+  element.className = arr1.join(" ");
+};
+w3.toggleClass = function (sel, c1, c2) {
+  w3.toggleClassElements(w3.getElements(sel), c1, c2);
+};
+w3.toggleClassElements = function (elements, c1, c2) {
+  var i, l = elements.length;
+  for (i = 0; i < l; i++) {    
+    w3.toggleClassElement(elements[i], c1, c2);
+  }
+};
+w3.toggleClassElement = function (element, c1, c2) {
+  var t1, t2, t1Arr, t2Arr, j, arr, allPresent;
+  t1 = (c1 || "");
+  t2 = (c2 || "");
+  t1Arr = t1.split(" ");
+  t2Arr = t2.split(" ");
+  arr = element.className.split(" ");
+  if (t2Arr.length == 0) {
+    allPresent = true;
+    for (j = 0; j < t1Arr.length; j++) {
+      if (arr.indexOf(t1Arr[j]) == -1) {allPresent = false;}
+    }
+    if (allPresent) {
+      w3.removeClassElement(element, t1);
+    } else {
+      w3.addClassElement(element, t1);
+    }
+  } else {
+    allPresent = true;
+    for (j = 0; j < t1Arr.length; j++) {
+      if (arr.indexOf(t1Arr[j]) == -1) {allPresent = false;}
+    }
+    if (allPresent) {
+      w3.removeClassElement(element, t1);
+      w3.addClassElement(element, t2);          
+    } else {
+      w3.removeClassElement(element, t2);        
+      w3.addClassElement(element, t1);
+    }
+  }
+};
+w3.getElements = function (id) {
+  if (typeof id == "object") {
+    return [id];
+  } else {
+    return document.querySelectorAll(id);
+  }
+};
+w3.filterHTML = function(id, sel, filter) {
+  var a, b, c, i, ii, iii, hit;
+  a = w3.getElements(id);
+  for (i = 0; i < a.length; i++) {
+    b = w3.getElements(sel);
+    for (ii = 0; ii < b.length; ii++) {
+      hit = 0;
+      if (b[ii].innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
+        hit = 1;
+      }
+      c = b[ii].getElementsByTagName("*");
+      for (iii = 0; iii < c.length; iii++) {
+        if (c[iii].innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
+          hit = 1;
+        }
+      }
+      if (hit == 1) {
+        b[ii].style.display = "";
+      } else {
+        b[ii].style.display = "none";
+      }
+    }
+  }
+};
+w3.sortHTML = function(id, sel, sortvalue) {
+  var a, b, i, ii, y, bytt, v1, v2, cc, j;
+  a = w3.getElements(id);
+  for (i = 0; i < a.length; i++) {
+    for (j = 0; j < 2; j++) {
+      cc = 0;
+      y = 1;
+      while (y == 1) {
+        y = 0;
+        b = a[i].querySelectorAll(sel);
+        for (ii = 0; ii < (b.length - 1); ii++) {
+          bytt = 0;
+          if (sortvalue) {
+            v1 = b[ii].querySelector(sortvalue).innerHTML.toLowerCase();
+            v2 = b[ii + 1].querySelector(sortvalue).innerHTML.toLowerCase();
+          } else {
+            v1 = b[ii].innerHTML.toLowerCase();
+            v2 = b[ii + 1].innerHTML.toLowerCase();
+          }
+          if ((j == 0 && (v1 > v2)) || (j == 1 && (v1 < v2))) {
+            bytt = 1;
+            break;
+          }
+        }
+        if (bytt == 1) {
+          b[ii].parentNode.insertBefore(b[ii + 1], b[ii]);
+          y = 1;
+          cc++;
+        }
+      }
+      if (cc > 0) {break;}
+    }
+  }
+};
+w3.slideshow = function (sel, ms, func) {
+  var i, ss, x = w3.getElements(sel), l = x.length;
+  ss = {};
+  ss.current = 1;
+  ss.x = x;
+  ss.ondisplaychange = func;
+  if (!isNaN(ms) || ms == 0) {
+    ss.milliseconds = ms;
+  } else {
+    ss.milliseconds = 1000;
+  }
+  ss.start = function() {
+    ss.display(ss.current)
+    if (ss.ondisplaychange) {ss.ondisplaychange();}
+    if (ss.milliseconds > 0) {
+      window.clearTimeout(ss.timeout);
+      ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
+    }
+  };
+  ss.next = function() {
+    ss.current += 1;
+    if (ss.current > ss.x.length) {ss.current = 1;}
+    ss.start();
+  };
+  ss.previous = function() {
+    ss.current -= 1;
+    if (ss.current < 1) {ss.current = ss.x.length;}
+    ss.start();
+  };
+  ss.display = function (n) {
+    w3.styleElements(ss.x, "display", "none");
+    w3.styleElement(ss.x[n - 1], "display", "block");
+  }
+  ss.start();
+  return ss;
+};
+w3.includeHTML = function(cb) {
+  var z, i, elmnt, file, xhttp;
+  z = document.getElementsByTagName("*");
+  for (i = 0; i < z.length; i++) {
+    elmnt = z[i];
+    file = elmnt.getAttribute("w3-include-html");
+    if (file) {
+      xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+          elmnt.innerHTML = this.responseText;
+          elmnt.removeAttribute("w3-include-html");
+          w3.includeHTML(cb);
+        }
+      }      
+      xhttp.open("GET", file, true);
+      xhttp.send();
+      return;
+    }
+  }
+  if (cb) cb();
+};
+w3.getHttpData = function (file, func) {
+  w3.http(file, function () {
+    if (this.readyState == 4 && this.status == 200) {
+      func(this.responseText);
+    }
+  });
+};
+w3.getHttpObject = function (file, func) {
+  w3.http(file, function () {
+    if (this.readyState == 4 && this.status == 200) {
+      func(JSON.parse(this.responseText));
+    }
+  });
+};
+w3.displayHttp = function (id, file) {
+  w3.http(file, function () {
+    if (this.readyState == 4 && this.status == 200) {
+      w3.displayObject(id, JSON.parse(this.responseText));
+    }
+  });
+};
+w3.http = function (target, readyfunc, xml, method) {
+  var httpObj;
+  if (!method) {method = "GET"; }
+  if (window.XMLHttpRequest) {
+    httpObj = new XMLHttpRequest();
+  } else if (window.ActiveXObject) {
+    httpObj = new ActiveXObject("Microsoft.XMLHTTP");
+  }
+  if (httpObj) {
+    if (readyfunc) {httpObj.onreadystatechange = readyfunc;}
+    httpObj.open(method, target, true);
+    httpObj.send(xml);
+  }
+};
+w3.getElementsByAttribute = function (x, att) {
+  var arr = [], arrCount = -1, i, l, y = x.getElementsByTagName("*"), z = att.toUpperCase();
+  l = y.length;
+  for (i = -1; i < l; i += 1) {
+    if (i == -1) {y[i] = x;}
+    if (y[i].getAttribute(z) !== null) {arrCount += 1; arr[arrCount] = y[i];}
+  }
+  return arr;
+};  
+w3.dataObject = {},
+w3.displayObject = function (id, data) {
+  var htmlObj, htmlTemplate, html, arr = [], a, l, rowClone, x, j, i, ii, cc, repeat, repeatObj, repeatX = "";
+  htmlObj = document.getElementById(id);
+  htmlTemplate = init_template(id, htmlObj);
+  html = htmlTemplate.cloneNode(true);
+  arr = w3.getElementsByAttribute(html, "w3-repeat");
+  l = arr.length;
+  for (j = (l - 1); j >= 0; j -= 1) {
+    cc = arr[j].getAttribute("w3-repeat").split(" ");
+    if (cc.length == 1) {
+      repeat = cc[0];
+    } else {
+      repeatX = cc[0];
+      repeat = cc[2];
+    }
+    arr[j].removeAttribute("w3-repeat");
+    repeatObj = data[repeat];
+    if (repeatObj && typeof repeatObj == "object" && repeatObj.length != "undefined") {
+      i = 0;
+      for (x in repeatObj) {
+        i += 1;
+        rowClone = arr[j];
+        rowClone = w3_replace_curly(rowClone, "element", repeatX, repeatObj[x]);
+        a = rowClone.attributes;
+        for (ii = 0; ii < a.length; ii += 1) {
+          a[ii].value = w3_replace_curly(a[ii], "attribute", repeatX, repeatObj[x]).value;
+        }
+        (i === repeatObj.length) ? arr[j].parentNode.replaceChild(rowClone, arr[j]) : arr[j].parentNode.insertBefore(rowClone, arr[j]);
+      }
+    } else {
+      console.log("w3-repeat must be an array. " + repeat + " is not an array.");
+      continue;
+    }
+  }
+  html = w3_replace_curly(html, "element");
+  htmlObj.parentNode.replaceChild(html, htmlObj);
+  function init_template(id, obj) {
+    var template;
+    template = obj.cloneNode(true);
+    if (w3.dataObject.hasOwnProperty(id)) {return w3.dataObject[id];}
+    w3.dataObject[id] = template;
+    return template;
+  }
+  function w3_replace_curly(elmnt, typ, repeatX, x) {
+    var value, rowClone, pos1, pos2, originalHTML, lookFor, lookForARR = [], i, cc, r;
+    rowClone = elmnt.cloneNode(true);
+    pos1 = 0;
+    while (pos1 > -1) {
+      originalHTML = (typ == "attribute") ? rowClone.value : rowClone.innerHTML;
+      pos1 = originalHTML.indexOf("{{", pos1);
+      if (pos1 === -1) {break;}
+      pos2 = originalHTML.indexOf("}}", pos1 + 1);
+      lookFor = originalHTML.substring(pos1 + 2, pos2);
+      lookForARR = lookFor.split("||");
+      value = undefined;
+      for (i = 0; i < lookForARR.length; i += 1) {
+        lookForARR[i] = lookForARR[i].replace(/^\s+|\s+$/gm, ''); //trim
+        if (x) {value = x[lookForARR[i]];}
+        if (value == undefined && data) {value = data[lookForARR[i]];}
+        if (value == undefined) {
+          cc = lookForARR[i].split(".");
+          if (cc[0] == repeatX) {value = x[cc[1]]; }
+        }
+        if (value == undefined) {
+          if (lookForARR[i] == repeatX) {value = x;}
+        }
+        if (value == undefined) {
+          if (lookForARR[i].substr(0, 1) == '"') {
+            value = lookForARR[i].replace(/"/g, "");
+          } else if (lookForARR[i].substr(0,1) == "'") {
+            value = lookForARR[i].replace(/'/g, "");
+          }
+        }
+        if (value != undefined) {break;}
+      }
+      if (value != undefined) {
+        r = "{{" + lookFor + "}}";
+        if (typ == "attribute") {
+          rowClone.value = rowClone.value.replace(r, value);
+        } else {
+          w3_replace_html(rowClone, r, value);
+        }
+      }
+      pos1 = pos1 + 1;
+    }
+    return rowClone;
+  }
+  function w3_replace_html(a, r, result) {
+    var b, l, i, a, x, j;
+    if (a.hasAttributes()) {
+      b = a.attributes;
+      l = b.length;
+      for (i = 0; i < l; i += 1) {
+        if (b[i].value.indexOf(r) > -1) {b[i].value = b[i].value.replace(r, result);}
+      }
+    }
+    x = a.getElementsByTagName("*");
+    l = x.length;
+    a.innerHTML = a.innerHTML.replace(r, result);
+  }
+};
\ No newline at end of file
diff --git a/navbar-en.html b/navbar-en.html
new file mode 100644
index 0000000..4ce78a1
--- /dev/null
+++ b/navbar-en.html
@@ -0,0 +1,55 @@
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Brand</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <!--    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>  -->
+        <!--   <li><a href="#">Link</a></li>  -->
+        <!--  <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Action</a></li>
+              <li><a href="#">Another action</a></li>
+              <li><a href="#">Something else here</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#">Separated link</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#">One more separated link</a></li>
+            </ul>
+          </li>  -->
+      </ul>
+      <form class="navbar-form navbar-left">
+     <!--   <div class="form-group">
+          <input type="text" class="form-control" placeholder="Search">
+        </div>  -->
+     <!--   <button type="submit" class="btn btn-default">Submit</button>  -->
+      </form>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="active"><a href="#">English <span class="sr-only">(current)</span></a></li>
+        <li><a href="index-es.html?forcerefresh=true">Castellano</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Download Serial Port Server <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Linux</a></li>
+            <li><a href="#">Mac</a></li>
+            <li><a href="#">Windows</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>
+
diff --git a/runme.js b/runme.js
index f528a10..4dafeeb 100644
--- a/runme.js
+++ b/runme.js
@@ -24,6 +24,56 @@ var mimeTypes = {
   "css": "text/css"
 };
 
+
+var generateInlinedFile = function() {
+    // We are developing a widget with 3 main files of css, html, and js
+    // but ChiliPeppr really wants one monolithic file so we have to generate
+    // it to make things clean when chilipeppr.load() is called with a single
+    // URL to this widget. This file should get checked into Github and should
+    // be the file that is loaded by ChiliPeppr.
+    var fileCss = fs.readFileSync(fileCssPath).toString();
+    var fileHtml = fs.readFileSync(fileHtmlPath).toString();
+    var fileJs = widgetSrc; // fs.readFileSync("widget.js").toString();
+
+    // auto fill title if they're asking for it
+    if (widget) {
+        var re = /<title>[\s\r\n]*<!--\(auto-fill by runme\.js-->[\s\r\n]*<\/title>/i;
+        if (fileHtml.match(re)) {
+            fileHtml = fileHtml.replace(re, "<title>" + widget.name + "</title>");
+            console.log("Swapped in title for final HTML page.");
+        } else {
+            console.log('Went to swap in title, but the auto fill comment not found.');
+        }
+    } else {
+        console.log("Could not auto-fill title of HTML page because widget object not defined.");
+    }
+
+    // now inline css
+    var re = /<!-- widget.css[\s\S]*?end widget.css -->/i;
+    fileHtml = fileHtml.replace(re,
+        '<style type=\'text/css\'>\n' +
+        fileCss +
+        '\n    </style>'
+    );
+
+    // now inline javascript
+    var re = /<!-- widget.js[\s\S]*?end widget.js -->/i;
+    fileHtml = fileHtml.replace(re,
+        '<script type=\'text/javascript\'>\n' +
+        '    //<![CDATA[\n' +
+        fileJs +
+        '\n    //]]>\n    </script>'
+    );
+
+    // now write out the auto-gen file
+    fs.writeFileSync(fileAutoGeneratePath, fileHtml);
+    console.log("Updated " + fileAutoGeneratePath );
+
+}
+
+
+
+
 http.createServer(function(req, res) {
 
   var uri = url.parse(req.url).pathname;
@@ -391,6 +441,7 @@ requirejs = function() {}
 requirejs.config = function() {};
 cprequire_test = function() {};
 
+
 var generateWidgetReadme = function() {
 
   // First we have to eval so stuff is in memory
@@ -1248,51 +1299,6 @@ var forkYourOwnRepo = function() {
   */
 }
 
-var generateInlinedFile = function() {
-  // We are developing a widget with 3 main files of css, html, and js
-  // but ChiliPeppr really wants one monolithic file so we have to generate
-  // it to make things clean when chilipeppr.load() is called with a single
-  // URL to this widget. This file should get checked into Github and should
-  // be the file that is loaded by ChiliPeppr.
-  var fileCss = fs.readFileSync(fileCssPath).toString();
-  var fileHtml = fs.readFileSync(fileHtmlPath).toString();
-  var fileJs = widgetSrc; // fs.readFileSync("widget.js").toString();
-
-  // auto fill title if they're asking for it
-  if (widget) {
-    var re = /<title>[\s\r\n]*<!--\(auto-fill by runme\.js-->[\s\r\n]*<\/title>/i;
-    if (fileHtml.match(re)) {
-    fileHtml = fileHtml.replace(re, "<title>" + widget.name + "</title>");
-    console.log("Swapped in title for final HTML page.");
-    } else {
-      console.log('Went to swap in title, but the auto fill comment not found.');
-    }
-  } else {
-    console.log("Could not auto-fill title of HTML page because widget object not defined.");
-  }
-
-  // now inline css
-  var re = /<!-- widget.css[\s\S]*?end widget.css -->/i;
-  fileHtml = fileHtml.replace(re,
-    '<style type=\'text/css\'>\n' +
-    fileCss +
-    '\n    </style>'
-  );
-
-  // now inline javascript
-  var re = /<!-- widget.js[\s\S]*?end widget.js -->/i;
-  fileHtml = fileHtml.replace(re,
-    '<script type=\'text/javascript\'>\n' +
-    '    //<![CDATA[\n' +
-    fileJs +
-    '\n    //]]>\n    </script>'
-  );
-
-  // now write out the auto-gen file
-  fs.writeFileSync(fileAutoGeneratePath, fileHtml);
-  console.log("Updated " + fileAutoGeneratePath );
-
-}
 
 var getMainPage = function() {
   var html = "";
@@ -1370,4 +1376,7 @@ var getGithubUrl = function(callback) {
     
 }
 
-init();
\ No newline at end of file
+console.log("init");
+init();
+generateWidgetReadme();
+generateInlinedFile();
\ No newline at end of file
diff --git a/workspace.css b/workspace.css
index e03b197..f166677 100644
--- a/workspace.css
+++ b/workspace.css
@@ -69,4 +69,22 @@
     right: 0px;
     padding: 4px 10px 10px 10px;
     background-color: rgba(255, 255, 255, 0.5);
+}
+
+.instructions-container {
+    border: 1px solid #ddd;
+    border-radius:5px;
+}
+
+.instructions {
+    text-align: justify;
+    text-justify: inter-word;
+    padding-right: 10px;
+}
+
+#instructions-title {
+    padding: 10px;
+    width: auto;
+    display: block;
+    border-bottom: 1px solid #ddd;
 }
\ No newline at end of file
diff --git a/workspace.html b/workspace.html
index cc60217..0e28ed7 100644
--- a/workspace.html
+++ b/workspace.html
@@ -45,13 +45,28 @@
                 <!-- 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-pad10">
-                    
+                    <div class="instructions-container"
+
+                    <p> <span class="panel-title" id="instructions-title" data-toggle="popover" data-original-title="" title="">Instructions</span> </p>
+                    <div class="instructions"><p>
+
+                            <ol>
+                                <li>Download the Serial Port Server: Click on the dropdown menu on upper right corner and choose your platform.
+                                    This will download a small program that establishes a connection to your Senscape Board. Execute it.</li>
+                                <li>Connect your Senscape Board and click on the 'Refresh' icon in the Serial Port Server Widget in the center of this page.
+                                    Choose the port corresponding to your Senscape Board.</li>
+                                <li>Upload the new version of the firmware by clicking on the 'Reprogram' button.</li>
+                            </ol>
+                        </p>
+                    </div>
+                    </div>
                 </div>
 
                 <!-- Center Column -->
                 <div class="col-md-5 col-pad10">
-                    
+
                     <div id="com-senscape-widget-bootloader-instance">
                         <p class="sample">Senscape Bootloader Widget goes here</p>
                     </div>
diff --git a/workspace.js b/workspace.js
index 5b5bdc7..e84da11 100644
--- a/workspace.js
+++ b/workspace.js
@@ -73,9 +73,9 @@ cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], func
           //  this.loadDropTestWidget();
             
             // Create our workspace upper right corner triangle menu
-           // this.loadWorkspaceMenu();
+            this.loadWorkspaceMenu();
             // Add our billboard to the menu (has name, url, picture of workspace)
-         //   this.addBillboardToWorkspaceMenu();
+            this.addBillboardToWorkspaceMenu();
             
             // Setup an event to react to window resize. This helps since
             // some of our widgets have a manual resize to cleanly fill
@@ -197,7 +197,7 @@ cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], func
          * Load the workspace menu and show the pubsubviewer and fork links using
          * our pubsubviewer widget that makes those links for us.
          */
-    /*    loadWorkspaceMenu: function(callback) {
+    loadWorkspaceMenu: function(callback) {
             // Workspace Menu with Workspace Billboard
             var that = this;
             chilipeppr.load(
@@ -219,6 +219,5 @@ cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], func
                 }
             );
         },
-        */
     }
 });
\ No newline at end of file