added spanis version

bastian-f · Oct 18, 2017 · f8030be · f8030be
1 parent f18b9ad
commit f8030be
Show file tree

Hide file tree

Showing 15 changed files with 2,418 additions and 167 deletions.
diff --git 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
@@ -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
@@ -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>
+