Creating an Elementary Oscilloscope in PSLab’s Remote Framework
The last couple of blog posts explained how we could put together the versatility of ember components, the visual appeal of jqplot, the flexibility of Python Flask, and the simplicity of Python itself in order to make simple scripts for PSLab that would could be run on a server by a remote client anywhere on the web. We have also seen how callbacks could be assigned to widgets created in these scripts in order to make object oriented applications. In this blog post, we shall see how to assign a capture method to a button, and update a plot with the received data. It will also demonstrate how to use ember-lodash to perform array manipulations.
Specifying the return data type in the callback success routine
For a more instructive write-up on assigning callbacks, please refer to these posts .
Whenever the callback assigned to a button is a function that returns an array of elements, and the target for the resultant data is a plot, the stacking order of the returned array must be specified in order to change its shape to suit the plotting library. The default return data from a capture routine (oscilloscope) is made up of separate arrays for X coordinate and Y coordinate values. Since JQplot requires [X,Y] pairs , we must specify a stacking order of ‘xy’ so that the application knows that it must convert them to pairs (using lodash/zip) before passing the result to the plot widget. Similarly, different stacking orders for capture2, and capture4 must also be defined.
Creating an action that performs necessary array manipulations and plots the received data
It can be seen from the excerpt below, that if the onSuccess target for a callback is specified to be a plot in the actionDefinition object, then the stacking order is checked, and the returned data is modified accordingly
Relevant excerpt from controllers/user-home.js/runButtonAction
if (actionDefinition.success.type === 'update-plot') { if (actionDefinition.success.stacking === 'xy') { $.jqplot(actionDefinition.success.target, [zip(...resultValue)]).replot(); } else if (actionDefinition.success.stacking === 'xyy') { $.jqplot(actionDefinition.success.target, [zip(...[resultValue[0], resultValue[1]]), zip(...[resultValue[0], resultValue[2]])]).replot(); } else if (actionDefinition.success.stacking === 'xyyyy') { $.jqplot(actionDefinition.success.target, [zip(...[resultValue[0], resultValue[1]]), zip(...[resultValue[0], resultValue[2]]), zip(...[resultValue[0], resultValue[3]]), zip(...[resultValue[0], resultValue[4]])]).replot(); } else { $.jqplot(actionDefinition.success.target, resultValue).replot(); } }
With the above framework in place, we can add a plot with the line plt = plot(x, np.sin(x)) , and associate a button with a capture routine that will update its contents with a single line of code: button(‘capture1’,”capture1(‘CH1’,100,10)”,”update-plot”,target=plt)
Final Result
The following script created on the pslab-remote platform makes three buttons and plots, and sets the buttons to invoke capture1, capture2, and capture4 respectively when clicked.
import numpy as np x=np.linspace(0,2*np.pi,30) plt = plot(x, np.sin(x)) button('capture 1',"capture1('CH1',100,10)","update-plot",target=plt) plt2 = plot(x, np.sin(x)) button('capture 2',"capture2(50,10)","update-plot",target=plt2,stacking='xyy') plt3 = plot(x, np.sin(x)) button('capture 4',"capture4(50,10)","update-plot",target=plt3,stacking='xyyyy')
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
- Enhancing the functionality of user submitted scripts in pslab-remote
- Including a Graph Component in the Remote Access Framework for PSLab
