eric-hedengren / tclab-web-demo Goto Github PK

Currently, the code only utilizes heater 1, and returns the value of the same. If the value return is stable, you could also add the second one, which would give more variety to the graph and give users the full functionality of their TCLab.

This will most likely be the bulk of the project. Because of PyScript's limitations concerning external packages outside of the standard library, many things in the TCLab Package need to be rewritten, to allow for full functionality.

A simple header should be added to the top of the page to give users useful links to be redirected to, including the GitHub repository, TCLab main page, courses, and other important pages.

Reading values from a serial port using the Web Serial API is foundationally different as compared to the Python Serial Package. The Web Serial API uses asynchronous calls for data requests, as opposed to the Python Serial Package, which is called synchronously. In order to preserve the original structure of code which accesses the TCLab package, we need to make the backend code seem synchronous, even if it uses asynchronous code. The first issue we come across is reading values back from an asynchronous call. We can't gather the data collected by our asynchronous function because we're using PyScript, so instead we can have the asynchronous function write the data to a variable which we can pick up. This backend code also needs to be functional when it comes to looping, but if we loop the function call for reading data, it will create all of the tasks at once which will scatter our data when it is read. So in order to space out the time between calls for new data, we can create a loop that keeps running in the background, which will simply write to the variable that we had. This way, every time the user requests data, it will just grab the current value, instead of overloading the device with requests. But the problem with this method is as soon as the synchronous loop starts running, the asynchronous one must stop. This means no matter how long you try and wait for new data to come, you will still get the same value, because the background loop can't give the variable updated information. Therefore, the next step in getting the backend code to be fully functional when it comes to reading data, will be to make it compatible with looping.

Seeing that the graph auto deletes old data, users may want the ability to see further back on the graph to get a wider view. For this, a range selector should be implemented which would allow users to customize their graphs.

Add a color selector to the user interface, which will change the color of the temperature value.

One feature that would greatly enhance the user interface would be a tooltip for the graph, which would read the temperature of the location of where the user has their cursor laid. An example of the tooltip can be found here.