Button Preset

A button that loads a small data set into number inputs.

Mission Objective

Load three number inputs and a few buttons into the DOM. Wire the buttons to the inputs. Store cache data sets for the inputs with the buttons so that on click it will load a corresponding data set into the inputs.

mkdom.lampSection()

We added another method to mkdom. It makes a dom tree as follows: a container that contains paragraph nodes containing a row of number inputs and a row of buttons.

mkdom() src code file link

mkdom.js

mkdom() src code screenshot

source code of mkdom.lampSection()

Preset Buttons{} App

We use the above mkdom method to create a section of a row of inputs and row of buttons. Then wire up the buttons to the inputs. Connect them as per usual by passing them to evl.addClicker() method and connect their callbacks by input name in the evl.clickers{} listener function map.

We made two sets each in their own source file. One called presetButtons(). It loads a preset buttons section in the main page. The other one called webglLampNumRowIJK() loads a preset buttons section in the left side panel. The code is much the same except for configuration changes. The event handling code is identical. If you were going to make a lot of these, you would the re-write the program in a prototype or class object form.

presetButtons() src code file link

presetButtons.js

webglLampNumRowIJK.js

presetButtons() src code screenshot

source code of presetButtons.js

Demo page

demo