GST work in progress. Added point size. Added ability to redirect function…

GST work in progress. Added point size. Added ability to redirect function output to element. Updated some example demos. Refactoring code.

common/lib/xmodule/xmodule/gst_module.py

@@ -32,6 +32,7 @@ class GraphicalSliderToolModule(XModule):
         resource_string(__name__, 'js/src/graphical_slider_tool/sliders.js'),
         resource_string(__name__, 'js/src/graphical_slider_tool/inputs.js'),
         resource_string(__name__, 'js/src/graphical_slider_tool/graph.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/el_output.js'),
 
         resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')
       ]

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('ElOutput', ['logme'], function (logme) {
+
+    return ElOutput;
+
+    function ElOutput(config, state) {
+
+        if ($.isPlainObject(config.plot.function)) {
+            processFuncObj(config.plot.function);
+        } else if ($.isArray(config.plot.function)) {
+            (function (c1) {
+                while (c1 < config.plot.function.length) {
+                    if ($.isPlainObject(config.plot.function[c1])) {
+                        processFuncObj(config.plot.function[c1]);
+                    }
+
+                    c1 += 1;
+                }
+            }(0));
+        }
+
+        return;
+
+        function processFuncObj(obj) {
+            var outputEl, paramNames, funcString, func;
+
+            // We are only interested in functions that are meant for output to an
+            // element.
+            if (typeof obj['@output'] !== 'string') {
+                return;
+            }
+
+            if (obj['@output'].toLowerCase() !== 'element') {
+                return;
+            }
+
+            if (typeof obj['@el_id'] !== 'string') {
+                logme('ERROR: You specified "output" as "element", but did not spify "el_id".');
+
+                return;
+            }
+
+            if (typeof obj['#text'] !== 'string') {
+                logme('ERROR: Function body is not defined.');
+
+                return;
+            }
+
+            funcString = obj['#text'];
+
+            // Make sure that all HTML entities are converted to their proper
+            // ASCII text equivalents.
+            funcString = $('<div>').html(funcString).text();
+
+            outputEl = $('#' + obj['@el_id']);
+
+            if (outputEl.length !== 1) {
+                logme('ERROR: The element with id "' + obj['@el_id'] + '" was not found.');
+
+                return;
+            }
+
+            paramNames = state.getAllParameterNames();
+            paramNames.push(funcString);
+
+            try {
+                func = Function.apply(null, paramNames);
+            } catch (err) {
+                logme(
+                    'ERROR: The function body "' +
+                        funcString +
+                        '" was not converted by the Function constructor.'
+                );
+
+                paramNames.pop();
+
+                return;
+            }
+
+            paramNames.pop();
+
+            outputEl.html(func.apply(window, state.getAllParameterValues()));
+
+            state.addDynamicEl(outputEl, func);
+        }
+
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js

@@ -8,8 +8,8 @@ define(
     // Even though it is not explicitly in this module, we have to specify
     // 'GeneralMethods' as a dependency. It expands some of the core JS objects
     // with additional useful methods that are used in other modules.
-    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph', 'logme'],
-    function (State, GeneralMethods, Sliders, Inputs, Graph, logme) {
+    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph', 'ElOutput', 'logme'],
+    function (State, GeneralMethods, Sliders, Inputs, Graph, ElOutput, logme) {
 
     return GstMain;
 
@@ -67,6 +67,9 @@ define(
         // Configure and display the graph. Attach event for the graph to be
         // updated on any change of a slider or a text input.
         Graph(gstId, config, state);
+
+        // Configure functions that output to an element instead of the graph.
+        ElOutput(config, state);
     }
 });
 

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js

@@ -18,7 +18,9 @@ define('State', ['logme'], function (logme) {
 
     function State(gstId, config) {
         var parameters, allParameterNames, allParameterValues,
-            plotDiv;
+            plotDiv, dynamicEl;
+
+        dynamicEl = [];
 
         stateInst += 1;
         logme('MESSAGE: Creating state instance # ' + stateInst + '.');
@@ -92,7 +94,8 @@ define('State', ['logme'], function (logme) {
             'getAllParameterNames': getAllParameterNames,
             'getAllParameterValues': getAllParameterValues,
 
-            'bindUpdatePlotEvent': bindUpdatePlotEvent
+            'bindUpdatePlotEvent': bindUpdatePlotEvent,
+            'addDynamicEl': addDynamicEl
         };
 
         function getAllParameterNames() {
@@ -119,6 +122,13 @@ define('State', ['logme'], function (logme) {
             plotDiv.bind('update_plot', callback);
         }
 
+        function addDynamicEl(outputEl, func) {
+            dynamicEl.push({
+                'outputEl': outputEl,
+                'func': func
+            });
+        }
+
         function getParameterValue(paramName) {
 
             // If the name of the constant is not tracked by state, return an
@@ -238,6 +248,10 @@ define('State', ['logme'], function (logme) {
             // Update the helper array with the new parameter's value.
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
 
+            for (c1 = 0; c1 < dynamicEl.length; c1++) {
+                dynamicEl[c1].outputEl.html(dynamicEl[c1].func.apply(window, allParameterValues));
+            }
+
             return true;
         } // End-of: function setParameterValue