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 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 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.
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.
We posted a new web lab with a simulation of dynamic diffusion and reaction in a porous, solid catalyst layer. See Web Labs, Lab 2.
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.
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 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.
The goal of our Web app experiments is a toolbox that enables development of interactive web simulations (“labs”). Our development practice is as follows.
First, Get something up on the screen. Often this involves finding an example on the web and modifying it. Don’t spend a lot of time designing and thinking before something simple gets running. We believe that it is better to get something useful running than it is to have a beautiful plan and theory in development but nothing working to show for your time.
Second, repeat the following:
- Add functionality.
- As we observe repetition of code and see patterns developing, generalize the code. Have the objective of maximizing code in libraries and minimizing code needed to build new labs.
- As we observe patterns developing in the user interfaces, refine the design of a user interface guideline that is as simple and general as possible in order to speed development of new labs and speed user comprehension when entering new labs.