Including a Graph Component in the Remote Access Framework for PSLab
The remote-lab software of the pocket science lab enables users to access their devices remotely via the Internet. It includes an API server designed with Python Flask, and a web-app designed with EmberJS that allows users to access the API and carry out various tasks such as writing and executing Python scripts. In a series of blog posts, various aspects of this framework such as remote execution of function strings, automatic deployment on various domains, creating and submitting python scripts which will be run on the remote server etc have already been explored. This blog post deals with the inclusion of a graph component in the webapp that will be invoked when the user utilises the `plot` command in their scripts.
The JQPLOT library is being used for this purpose, and has been found to be quite lightweight and has a vast set of example code .
Task list for enabling the plotting feature
- Add a plot method to the codeEvaluator module in the API server and allow access to it by adding it to the evalGlobals dictionary
- Create an EmberJS component for handling plots
- Create a named div in the template
- Invoke the Jqplot initializer from the JS file and pass necessary arguments and data to the jqplot instance
- Add a conditional statement to include the jqplot component whenever a plot subsection is present in the JSON object returned by the API server after executing a script
Adding a plot method to the API server
Thus far, in addition to the functions supported by the sciencelab.py instance of PSLab, users had access to print, print_, and button functions. We shall now add a plot function.
def plot(self,x,y,**kwargs): self.generatedApp.append({"type":"plot","name":kwargs.get('name','myPlot'),"data":[np.array([x,y]).T.tolist()]})
The X,Y datasets provided by the user are stacked in pairs because jqplot requires [x,y] pairs . not separate datasets.
We also need to add this to evalGlobals, so we shall modify the __init__ routine slightly:
self.evalGlobals['plot']=self.plot
Building an Ember component for handling plots
First, well need to install jqplot: bower install –save jqplot
And this must be followed by including the following files using app.import statements in ember-cli-build.js
- bower_components/jqplot/jquery.jqplot.min.js
- bower_components/jqplot/plugins/jqplot.cursor.js
- bower_components/jqplot/plugins/jqplot.highlighter.js
- bower_components/jqplot/plugins/jqplot.pointLabels.js
- bower_components/jqplot/jquery.jqplot.min.css
In addition to the jqplot js and css files, we have also included a couple of plugins we shall use later.
Now we need to set up a new component : ember g component jqplot-graph
Our component will accept an object as an input argument. This object will contain the various configuration options for the plot
Add the following line in templates/components/jqplot-graph.hbs:
style="solid gray 1px;" id="{{data.name}}">
The JS file for this template must invoke the jqplot function in order to insert a complete plot into the previously defined <div> after it has been created. Therefore, the initialization routine must override the didInsertElement routine of the component.
components/jqplot-graph.js
import Ember from 'ember'; export default Ember.Component.extend({ didInsertElement () { Ember.$.jqplot(this.data.name,this.data.data,{ title: this.title, axes: { xaxis: { tickInterval: 1, rendererOptions: { minorTicks: 4 } }, }, highlighter: { show: true, showLabel: true, tooltipAxes: 'xy', sizeAdjust: 9.5 , tooltipLocation : 'ne' }, legend: { show: true, location: 'e', rendererOptions: { numberColumns: 1, } }, cursor:{ show: true, zoom:true, showTooltip:false } }); } });
Our component is now ready to be used , and we must make the necessary changes to user-home.hbs in order to include the plot component if the output JSON of a script executed on the server contains it.
The following excerpt from the results modal shows how the plot component can be inserted
{{#each codeResults as |element|}}
{{#if (eq element.type 'text')}}
{{element.value}}<br>
{{/if}}
{{#if (eq element.type 'plot')}}
{{jqplot-graph data=element}}
{{/if}}
{{/each}}
Most of the other components such as buttons and spans have been removed for clarity. Note that the element object is passed to the jqplot-graph component as an argument so that the component may configure itself accordingly.
In conclusion, the following screencast shows what we have created. A simple plot command creates a fancy plot in the output which includes data point highlighting, and can be easily configured to do a lot more. In the next blog post we shall explore how to use this plot to create a persistent application such as an oscilloscope.
Resources:
- Ember components documentation : https://www.emberjs.com/api/ember/2.14/classes/Ember.Component
- Jqplot homepage : http://www.jqplot.com/
- JQplot examples : http://www.jqplot.com/examples/line-charts.php
- Designing A Virtual Laboratory With PSLab
- Designing a Remote Laboratory with PSLab using Python Flask Framework
- Designing A Remote Laboratory With PSLab: execution of function strings
