From c5d8424d096cc200e33b6209507151a60843443b Mon Sep 17 00:00:00 2001 From: bastian Date: Tue, 26 Sep 2017 11:37:44 +0000 Subject: [PATCH] Made some changes to ChiliPeppr myWorkspace using Cloud9 --- README.md | 2 +- auto-generated-workspace.html | 82 --------- workspace.1.js | 305 ++++++++++++++++++++++++++++++++++ workspace.js | 82 --------- 4 files changed, 306 insertions(+), 165 deletions(-) create mode 100644 workspace.1.js diff --git a/README.md b/README.md index c86d710..d801b92 100644 --- a/README.md +++ b/README.md @@ -142,7 +142,7 @@ and inits them.getBillboardfunction 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.addBillboardToWorkspaceMenufunctionfunction ()

Inject the billboard into the Workspace upper right corner pulldown which follows the standard template for workspace pulldown menus.setupResizefunctionfunction ()

Listen to window resize event.onResizefunctionfunction ()

When browser window resizes, forcibly resize the Console windowloadTemplateWidgetfunctionfunction (callback)

Load the Template widget via chilipeppr.load() so folks have a sample -widget they can fork as a starting point for their own.loadSpjsWidgetfunctionfunction (callback)

Load the Serial Port JSON Server widget via chilipeppr.load()loadSenscapeBootloaderWidgetfunctionfunction (callback)

Load Senscape Bootloader Wedget via chilipeppr.load()loadDropTestWidgetfunctionfunction (callback)

Load Senscape Bootloader Wedget via chilipeppr.load()loadLuaEditorWidgetfunctionfunction (callback)

Load the Lua Editor Widget widget via chilipeppr.load()loadConsoleWidgetfunctionfunction (callback)

Load the Console widget via chilipeppr.load()loadWorkspaceMenufunctionfunction (callback)

Load the workspace menu and show the pubsubviewer and fork links using +widget they can fork as a starting point for their own.loadSpjsWidgetfunctionfunction (callback)

Load the Serial Port JSON Server widget via chilipeppr.load()loadSenscapeBootloaderWidgetfunctionfunction (callback)

Load Senscape Bootloader Wedget via chilipeppr.load()loadWorkspaceMenufunctionfunction (callback)

Load the workspace menu and show the pubsubviewer and fork links using our pubsubviewer widget that makes those links for us. diff --git a/auto-generated-workspace.html b/auto-generated-workspace.html index 95adb95..af19c9f 100644 --- a/auto-generated-workspace.html +++ b/auto-generated-workspace.html @@ -161,13 +161,7 @@ // Most workspaces will instantiate the Serial Port JSON Server widget this.loadSpjsWidget(); // Most workspaces will instantiate the Serial Port Console widget - this.loadConsoleWidget(function() { - setTimeout(function() { $(window).trigger('resize'); }, 100); - }); - - this.loadTemplateWidget(); this.loadSenscapeBootloaderWidget(); - this.loadLuaEditorWidget(); this.loadDropTestWidget(); // Create our workspace upper right corner triangle menu @@ -290,82 +284,6 @@ ); } ); - }, - /** - * Load Senscape Bootloader Wedget via chilipeppr.load() - */ - loadDropTestWidget: function(callback) { - chilipeppr.load( - "#drop-test-instance", - "http://raw.githubusercontent.com/chilipeppr/elem-dragdrop/master/auto-generated-widget.html", - function() { - // Callback after widget loaded into #myDivElemDragdrop - // Now use require.js to get reference to instantiated widget - cprequire( - ["inline:drop-test"], // the id you gave your widget - function(myObjElemDragdrop) { - // Callback that is passed reference to the newly loaded widget - console.log("Element / Drag Drop just got loaded.", myObjElemDragdrop); - myObjElemDragdrop.init(); - } - ); - } -); - }, - /** - * Load the Lua Editor Widget widget via chilipeppr.load() - */ - loadLuaEditorWidget: function(callback) { - - var that = this; - - chilipeppr.load( - "#com-chilipeppr-luaeditor-instance", - "http://raw.githubusercontent.com/chilipeppr/widget-luaeditor/master/auto-generated-widget.html", - function() { - // Callback after widget loaded into #myDivWidgetLuaeditor - // Now use require.js to get reference to instantiated widget - cprequire( - ["inline:com-chilipeppr-widget-luaeditor"], // the id you gave your widget - function(myObjWidgetLuaeditor) { - // Callback that is passed reference to the newly loaded widget - console.log("Widget / Lua Editor just got loaded.", myObjWidgetLuaeditor); - myObjWidgetLuaeditor.init(); - } - ); - } - ); - }, - /** - * Load the Console widget via chilipeppr.load() - */ - loadConsoleWidget: function(callback) { - var that = this; - chilipeppr.load( - "#com-chilipeppr-widget-spconsole-instance", - "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/", - function() { - // Callback after widget loaded into #com-chilipeppr-widget-spconsole-instance - cprequire( - ["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget - function(mywidget) { - // Callback that is passed reference to your newly loaded widget - console.log("My Console widget just got loaded.", mywidget); - that.widgetConsole = mywidget; - - // init the serial port console - // 1st param tells the console to use "single port mode" which - // means it will only show data for the green selected serial port - // rather than for multiple serial ports - // 2nd param is a regexp filter where the console will filter out - // annoying messages you don't generally want to see back from your - // device, but that the user can toggle on/off with the funnel icon - that.widgetConsole.init(true, /myfilter/); - if (callback) callback(mywidget); - } - ); - } - ); }, /** * Load the workspace menu and show the pubsubviewer and fork links using diff --git a/workspace.1.js b/workspace.1.js new file mode 100644 index 0000000..372118d --- /dev/null +++ b/workspace.1.js @@ -0,0 +1,305 @@ +/* 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: "(auto fill by runme.js)", // 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: "(auto fill by runme.js)", // The edit URL. This can be auto-filled by runme.js in Cloud9 if you'd like, or just define it on your own to help people know where they can edit/fork your widget + githuburl: "(auto fill by runme.js)", // The backing github repo + testurl: "(auto fill by runme.js)", // The standalone working widget so can view it working by itself + 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.loadConsoleWidget(function() { + setTimeout(function() { $(window).trigger('resize'); }, 100); + }); + + this.loadTemplateWidget(); + this.loadSenscapeBootloaderWidget(); + this.loadLuaEditorWidget(); + 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 Wedget 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 Senscape Bootloader Wedget via chilipeppr.load() + */ + loadDropTestWidget: function(callback) { + chilipeppr.load( + "#drop-test-instance", + "http://raw.githubusercontent.com/chilipeppr/elem-dragdrop/master/auto-generated-widget.html", + function() { + // Callback after widget loaded into #myDivElemDragdrop + // Now use require.js to get reference to instantiated widget + cprequire( + ["inline:drop-test"], // the id you gave your widget + function(myObjElemDragdrop) { + // Callback that is passed reference to the newly loaded widget + console.log("Element / Drag Drop just got loaded.", myObjElemDragdrop); + myObjElemDragdrop.init(); + } + ); + } +); + }, + /** + * Load the Lua Editor Widget widget via chilipeppr.load() + */ + loadLuaEditorWidget: function(callback) { + + var that = this; + + chilipeppr.load( + "#com-chilipeppr-luaeditor-instance", + "http://raw.githubusercontent.com/chilipeppr/widget-luaeditor/master/auto-generated-widget.html", + function() { + // Callback after widget loaded into #myDivWidgetLuaeditor + // Now use require.js to get reference to instantiated widget + cprequire( + ["inline:com-chilipeppr-widget-luaeditor"], // the id you gave your widget + function(myObjWidgetLuaeditor) { + // Callback that is passed reference to the newly loaded widget + console.log("Widget / Lua Editor just got loaded.", myObjWidgetLuaeditor); + myObjWidgetLuaeditor.init(); + } + ); + } + ); + }, + /** + * Load the Console widget via chilipeppr.load() + */ + loadConsoleWidget: function(callback) { + var that = this; + chilipeppr.load( + "#com-chilipeppr-widget-spconsole-instance", + "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/", + function() { + // Callback after widget loaded into #com-chilipeppr-widget-spconsole-instance + cprequire( + ["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget + function(mywidget) { + // Callback that is passed reference to your newly loaded widget + console.log("My Console widget just got loaded.", mywidget); + that.widgetConsole = mywidget; + + // init the serial port console + // 1st param tells the console to use "single port mode" which + // means it will only show data for the green selected serial port + // rather than for multiple serial ports + // 2nd param is a regexp filter where the console will filter out + // annoying messages you don't generally want to see back from your + // device, but that the user can toggle on/off with the funnel icon + that.widgetConsole.init(true, /myfilter/); + if (callback) callback(mywidget); + } + ); + } + ); + }, + /** + * Load the workspace menu and show the pubsubviewer and fork links using + * our pubsubviewer widget that makes those links for us. + */ + 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(); + }); + } + ); + }, + } +}); \ No newline at end of file diff --git a/workspace.js b/workspace.js index 372118d..9bb8978 100644 --- a/workspace.js +++ b/workspace.js @@ -69,13 +69,7 @@ cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], func // Most workspaces will instantiate the Serial Port JSON Server widget this.loadSpjsWidget(); // Most workspaces will instantiate the Serial Port Console widget - this.loadConsoleWidget(function() { - setTimeout(function() { $(window).trigger('resize'); }, 100); - }); - - this.loadTemplateWidget(); this.loadSenscapeBootloaderWidget(); - this.loadLuaEditorWidget(); this.loadDropTestWidget(); // Create our workspace upper right corner triangle menu @@ -198,82 +192,6 @@ cpdefine("inline:com-chilipeppr-workspace-bastianf2", ["chilipeppr_ready"], func ); } ); - }, - /** - * Load Senscape Bootloader Wedget via chilipeppr.load() - */ - loadDropTestWidget: function(callback) { - chilipeppr.load( - "#drop-test-instance", - "http://raw.githubusercontent.com/chilipeppr/elem-dragdrop/master/auto-generated-widget.html", - function() { - // Callback after widget loaded into #myDivElemDragdrop - // Now use require.js to get reference to instantiated widget - cprequire( - ["inline:drop-test"], // the id you gave your widget - function(myObjElemDragdrop) { - // Callback that is passed reference to the newly loaded widget - console.log("Element / Drag Drop just got loaded.", myObjElemDragdrop); - myObjElemDragdrop.init(); - } - ); - } -); - }, - /** - * Load the Lua Editor Widget widget via chilipeppr.load() - */ - loadLuaEditorWidget: function(callback) { - - var that = this; - - chilipeppr.load( - "#com-chilipeppr-luaeditor-instance", - "http://raw.githubusercontent.com/chilipeppr/widget-luaeditor/master/auto-generated-widget.html", - function() { - // Callback after widget loaded into #myDivWidgetLuaeditor - // Now use require.js to get reference to instantiated widget - cprequire( - ["inline:com-chilipeppr-widget-luaeditor"], // the id you gave your widget - function(myObjWidgetLuaeditor) { - // Callback that is passed reference to the newly loaded widget - console.log("Widget / Lua Editor just got loaded.", myObjWidgetLuaeditor); - myObjWidgetLuaeditor.init(); - } - ); - } - ); - }, - /** - * Load the Console widget via chilipeppr.load() - */ - loadConsoleWidget: function(callback) { - var that = this; - chilipeppr.load( - "#com-chilipeppr-widget-spconsole-instance", - "http://fiddle.jshell.net/chilipeppr/rczajbx0/show/light/", - function() { - // Callback after widget loaded into #com-chilipeppr-widget-spconsole-instance - cprequire( - ["inline:com-chilipeppr-widget-spconsole"], // the id you gave your widget - function(mywidget) { - // Callback that is passed reference to your newly loaded widget - console.log("My Console widget just got loaded.", mywidget); - that.widgetConsole = mywidget; - - // init the serial port console - // 1st param tells the console to use "single port mode" which - // means it will only show data for the green selected serial port - // rather than for multiple serial ports - // 2nd param is a regexp filter where the console will filter out - // annoying messages you don't generally want to see back from your - // device, but that the user can toggle on/off with the funnel icon - that.widgetConsole.init(true, /myfilter/); - if (callback) callback(mywidget); - } - ); - } - ); }, /** * Load the workspace menu and show the pubsubviewer and fork links using