Category Archives: Web Labs

What happened to the desktop Lab?

As of July, 2022, I am no longer providing downloads of the desktop versions of our software.

After retiring from the university eight years ago, I stopped maintaining the desktop (standalone, executable) versions for several reasons.

The main reason is that web technology has developed to the point that interactive web apps can be written once, then distributed and run on all varieties of smart phones and computers. One important development has been the dramatically increased speed of Javascript in web browsers, which enables fast computation and graphics animation.

Another reason is that I have chosen not to spend the cost in time and money required to update and build desktop executables for multiple operating systems, as the versions of our development tool, LiveCode, and operating systems change.

The source code of our desktop software is posted at our GitHub site.

Please see our Web Labs, for which the source code is also posted at our GitHub site.

Please send us a message letting us know what you think at support@reactorlab.net

Links to external sites open in new browser tabs.

The Web Labs are being used each day

We counted the number of runs in each of the Web Labs for the 13.4 days of Mon, 18 Oct 2021 21:16 to Mon, 1 Nov 2021 11:00

The reactor on the Home Page is seeing an average of 45 runs per day.

Lab 7, the Plug Flow Reactor is seeing an average of 30 runs per day during this period. Every Web Lab has been used.

We are happy the Web Labs are being found useful. Please let us know your thoughts via email to support@reactorlab.net

600 runs, Home Page reactor
406 runs, Lab 7, Plug Flow Reactor, including 7 Quiz for this period
271 runs, Lab 9, Hysteresis and multiple steady states in catalytic CSTRs in series
103 runs, Lab 13, Batch reactor, isothermal, nth order reaction
101 runs, Lab 3, Reactor T control with Tj inlet
83 runs, Lab 1, Water Tank Level Control
63 runs, Lab 14, CSTR, isothermal, nth order reaction
52 runs, Lab 15, PFR reactor, isothermal, nth order reaction
47 runs, Lab 5, Bioreactor Control
35 runs, Lab 18, Teddy Token blockchain
22 runs, Lab 000, Artificial Zoo, with the Dragon most popular
16 runs, Lab 00, Pendulum
10 runs, Lab 17, Cryptographic hash
9 runs, Lab 2, Dynamic diffusion and reaction in a porous solid catalyst
8 runs, Lab 8, Plug Flow Reactor + Heat Exchanger
7 runs, Lab FF, Forest fire
6 runs, Lab 0, Swarm of Objects
6 runs, Lab 16, RSA encryption
2 runs, Lab 1A, Level Control, two tanks in series
2 runs, Lab 4, Reactor T control with Tj
2 runs, Lab 6, Heat Exchanger

Getting started with Javascript

The interaction in our Web Labs is programmed with Javascript. Javascript is not as easy to code as is LiveCode, the language of our desktop app. But Javascript has other advantages: free to use, web browsers have Javascript interpreters built-in which execute Javascript very fast, and you can leverage the Javascript you learn to do many things with web pages.

Quick: How to write Javascript and display in web browser

1) Use a text editor like Apple’s TextEdit to create an .html file, e.g., mytest.html

2) In that file, write starting and ending html “script” tags, <script></script>, then enter your Javascript code between those tags. The script tags separate your Javascript code from the html in the file. Save the file.

3) Open that file using your web browser and see the output of Javascript document.write statements which you have typed between the script tags, e.g., document.write('hello');

4) After each change in your .html file, save the file and reload (refresh) the browser page to see the changes.

5) To view the output of the console.log statements, open the browser’s Javascript console. In Safari, select Develop > Show Javascript Console ( command-option-C ). New output appears at the bottom of the console window in Safari.

6) Example of a minimal .html text file to run Javascript in your web browser. All you need in the .html file is a script tag with your Javascript:

<script>
  // two slashes start a comment to help you remember what you are doing, does not execute
  document.write('hello'); // display output on web page
  // values between ' ' or " " are "strings" of text characters
  let aa = 3; // save value 3 in memory location you declare and label aa (aa is a "variable")
  console.log('minimal JS example, aa = ' + aa); // display in browser's Javascript console
  // now that a value is stored in new variable aa, we can use the value by using aa
  let bb = 2*aa; // multiply 2 times the value in aa and store value in new variable bb
  document.write('<br> bb = ' + bb); // note html line break tag <br> to start new line
</script>

7) console.log and document.write are standard, built-in “functions.” A function is a block of code to which you can supply input information within the parentheses (e.g., ‘hello’) and returns some output. You can write your own functions so that you don’t have to repeat the same code in different places.

8) You can view the html code of any web page in your browser. In Safari, select Develop > Show Page Source ( command-option-U ).

Here is a link to my examples of interactive controls https://richardherz.github.io/example-controls/index.html

The easiest way to view the code for one of these examples is to go to that example’s code at https://github.com/RichardHerz/example-controls

There are many sites that teach Javascript. Javascript.info looks good. W3schools is a great Javascript reference and place to learn other web technologies such as HTML, CSS, and graphics.

Evolution of Reactor Lab

Reactor Lab celebrated its 27th anniversary in March 2020. Starting in 2003, the desktop version was integrated with the Internet, with advanced features for that time.

These advanced features included automatic download and installation of updated files for off-line work, a conference (chat) room for discussions within Reactor Lab, and the ability to run process simulations involving local units and units at other locations in the same system. At that time, one could not assume constant connection to the Internet, as we do now. Once, from San Diego, I had a three-way discussion with a person in Michigan and a person in Turkey in the conference room.

I retired from the University of California at San Diego – UCSD – in 2014. Since then, my interest has shifted from the desktop version, which was constructed with LiveCode, to the HTML5-based Web Labs at this site.

This shift has been for a number of reasons, including omnipresent Internet connection in much of the world, almost everyone has access to the web and a web browser without having to download an application file, and the fast speed of Javascript built into web browsers.

That said, desktop apps have advantages over web pages such as saving data files to disk. In Web Labs, one has to go through an extra step to copy text from a popup window and save to a disk file. There are so many features that were built into the desktop Reactor Lab that duplicating them all in HTML5 might not happen.

I used to post standalone application files for Windows and Macintosh. With the evolution of operating systems and the evolution of LiveCode, I no longer wish to make the revisions necessary to build standalones.

However, one can continue to use the desktop Reactor Lab on Windows, Mac, and Linux. This can be done by opening Reactor Lab in LiveCode, version 8.0 or higher. LiveCode can be obtained at LiveCode.com. Download the free, open-source version of Reactor Lab from my github site at github.com/RichardHerz.

Instructions for how to do this are posted at the Download tab.

Web Lab development update

We now have six web labs posted. The newest is the dynamic heat exchanger simulation, and we recently updated the code structure of the reaction-diffusion lab and first temperature control lab to match the newest version.

In addition to the jquery and flot (plotting) libraries, each web lab is driven by six javascript files: (1) _main which runs the simulation loop, (2) _interface which handles the run-pause and reset buttons and gets and verifies inputs from the input fields, (3) _units which has simulation parameters and the process unit code, (4) _plot_info which contains definitions of the plots, (5) _plotter which makes the profile (static x,y) and strip chart (scrolling x,y) plots, and (6) _spacetime which makes the space-time, color-canvas plots.

Four of the six files are the same for all web labs. The two files specific to an individual web lab are the (3) _units and (4) _plot_info files.

We are amazed with the fast computational speed of javascript! Somewhere recently I read that the speed of javascript in browsers has increased by a factor of ten in the last year and a half. Years ago, computation in LiveCode (as MetaCard) was many times faster than javascript. Now, computation in javascript for our labs is much faster than native LiveCode script, although LiveCode 9 makes coupling to other languages for computation possible.

A feature unique to the heat exchanger lab is a check for attainment of steady state. When no significant changes to the system state are detected, the main simulation loop continues to run but unit computations and display updates cease until a change in input parameters is detected. When steady state is reached, the CPU load of the simulation decreases significantly. We don’t plan to implement this for the reaction-diffusion and temperature control labs because these usually operate under unsteady-state conditions.

The code is developing over time as we follow our usual development practice, which is repeat the following: (1) get something working, (2) notice repetition, (3) reduce repetition by writing functions and common library files.

Web Lab design progress

We have been working on our web page design project, lcCardLayoutToWeb, which is posted at GitHub. Here is a screenshot of a test page.

This project allows one to layout a web page in the LiveCode IDE, then export it to HTML and CSS files. The new work makes the process reversible. Exported pages can be edited to include links to Javascript files and references to Javascript functions in HTML events. Then the edited page can be imported into our LiveCode project for further editing of the layout: moving, adding and deleting elements. Then the revised page can be exported back to HTML and CSS files with the file and event references preserved.

This new work should allow us to make interactive web apps more easily.

See our newest Web Lab, “Dynamic diffusion and reaction in a porous solid catalyst” at the Web Labs tab above. See the latest version of this web lab in our open-source projects at GitHub, https://github.com/RichardHerz/.

Space-time plot added to web lab

Space-time plots are a beautiful way to view dynamic reaction-diffusion systems. We added one to the Web Lab, “Dynamic diffusion and reaction in a porous solid catalyst.” Here is a static screen shot from the lab.

Adding this dynamic plot required learning how to program the HTML5 canvas element with Javascript – an exciting combination!

We prepared static plots of space-time data for our previous research work, e.g., at http://escholarship.org/uc/item/9bc7v3kv. We were inspired to make them dynamically by the fluid dynamics simulations of Oliver Hunt at https://nerget.com/fluidSim/ and Daniel Schroeder at http://physics.weber.edu/schroeder/fluids/. Those pages showed us that this was possible to do in a web page.

New Web Lab posted, dynamic catalytic reaction-diffusion

We posted a new web lab with a simulation of dynamic diffusion and reaction in a porous, solid catalyst layer.

This our first web lab with multiple plots: two strip charts showing time history, and two profile charts showing time-varying concentration profiles in the catalyst layer. The way we handle data for these plots is different than we do in Lab 1, which has one strip chart plot. Our code structure continues to be under development.

Web Labs are a new name for our Web app experiments. We moved the link to the Web Labs out of Resources to the top menu bar. One reason is the we are getting more interested in HTML5 for interactive simulations. We initially developed the new lab with LiveCode but found its speed too slow to handle solution of the partial differential equations. Javascript was much faster for this application.

Web app code structure

The first two web labs listed at the Web Labs tab have the latest Javascript code structure. Our approach is to have a collection of Javascript code objects, each of which represent individual process units, or “unit operations” in chemical engineering terminology. Each process unit object contains definitions of variables that define the current unit state, and methods that update the unit state at each time step. One objective is to make the unit code objects as independent as possible so that they can be copied and used in other simulations.

In an earlier post, we mentioned the web apps being developed by Tony Butterfield. His web apps have a different structure than ours, and it is interesting to compare these two approaches. You can view the source code of the web apps by choosing View Source in your web browser.

Butterfield’s web apps have a parent code object that defines a child object for each variable in the simulation. This is in contrast to our collection of process unit objects. You might say his app structure is variable-centered, whereas ours is process-unit centered. His variable object definition appears to have been entered in a spreadsheet and then translated to Javascript, since it is minified.

Butterfield’s web apps have a single method that updates the state of the simulation at each time step, vs. our process unit objects, each of which contain a method to update themselves at each time step. For plotting, his web apps record variables values at each time step in each variable object, vs. our 3D numeric array that records the history of all variable values, with individual process objects storing only their current values.

Both approaches work, and it is valuable to have a choice for web app development.