NuWebKit Users Guide - Revision history

Rsalter at 17:05, 19 March 2026

2026-03-19T17:05:58Z

← Older revision		Revision as of 17:05, 19 March 2026
Line 32:		Line 32:

	;RAMs		;RAMs
	: RAMs (Runtime alterable modules) allow the author to provide the means for selecting sets of alternative algorithms used by the model. Authors may also use the RAM facility to enable a user to completely specify some model (these are called ~~UberRAMs, or URAMs~~).		: RAMs (Runtime alterable modules) allow the author to provide the means for selecting sets of alternative algorithms used by the model. Authors may also use the RAM facility to enable a user to completely specify some model (these are called DynSS apps).

	;NuML		;NuML
	: NuML (Numerus Modeling Language) is a small, simple, domain-specific language (dsl) that serves 2 functions: 1) to specify the algorithm or model in RAMs and ~~URAMs~~; and 2) to assert configuration changes to factory settings.		: NuML (Numerus Modeling Language) is a small, simple, domain-specific language (dsl) that serves 2 functions: 1) to specify the algorithm or model in RAMs and DynSS's; and 2) to assert configuration changes to factory settings.

	;Analysis Platforms		;Analysis Platforms
Line 74:		Line 74:
	* Presets		* Presets
	* NuML language		* NuML language
	* RAMS and ~~URAMS~~		* RAMS and DynSS apps
	* Configuration overrides		* Configuration overrides
	* Analysis platforms		* Analysis platforms
Line 158:		Line 158:
	The code used in Preset 1 is Javascript. Press the '''Compile''' button when your are ready. The '''Enlarge''' button opens a browser-wide editor window, making code entry easier. If you want to try your own User Input RAM, be sure to save in a preset or your code will be lost.		The code used in Preset 1 is Javascript. Press the '''Compile''' button when your are ready. The '''Enlarge''' button opens a browser-wide editor window, making code entry easier. If you want to try your own User Input RAM, be sure to save in a preset or your code will be lost.

	== ~~User-Defined Models (URAMs)~~ with Sensitivity Analysis ==		== DynSS apps with Sensitivity Analysis ==

	The RAM interface makes it possible to easily implement SD simulations defined entirely by the user. An example from the model library containing 4 user-defined presets is [https://www.cs.oberlin.edu/~rms/wk/sdnumml1/index.html SD User Defined].		The RAM interface makes it possible to easily implement SD simulations defined entirely by the user. An example from the model library containing 4 user-defined presets is [https://www.cs.oberlin.edu/~rms/wk/sdnumml1/index.html SD User Defined].

Rsalter at 16:57, 19 March 2026

2026-03-19T16:57:14Z

← Older revision		Revision as of 16:57, 19 March 2026
Line 1:		Line 1:
	~~Numerus WebKit (NWK)~~ is a technology for building powerful simulations that run in a Web browser. It consists of applications and APIs that support the design of models along the lines of NetLogo (NL) and Stella, but using conventional languages such as Java, JavaScript (JS) and Python.<ref>This API is under development.</ref> These applications are deployed either from a remote server, such as Amazon Web Services (AWS) Elastic Beanstalk (AWSEB), (or, in Java mode, any other server that supports WebSockets, or in JS mode, from any conventional Web or Cloud server); alternatively, they can be run locally without using any network connectivity using a ''localhost'' server. JS development only requires text editing, and Java development can take advantage of the Eclipse J2EE (Jakarta) platform using the Apache Tomcat server.		NuWebKit is a technology for building powerful simulations that run in a Web browser. It consists of applications and APIs that support the design of models along the lines of NetLogo (NL) and Stella, but using conventional languages such as Java, JavaScript (JS) and Python.<ref>This API is under development.</ref> These applications are deployed either from a remote server, such as Amazon Web Services (AWS) Elastic Beanstalk (AWSEB), (or, in Java mode, any other server that supports WebSockets, or in JS mode, from any conventional Web or Cloud server); alternatively, they can be run locally without using any network connectivity using a ''localhost'' server. JS development only requires text editing, and Java development can take advantage of the Eclipse J2EE (Jakarta) platform using the Apache Tomcat server.

	This Guide will introduce the ~~NWK~~ user interface (UI) and the many useful functions that enhance and support the user's experience. A separate document, the [[WebKit Authors Guide]], is under development.		This Guide will introduce the NuWebKit user interface (UI) and the many useful functions that enhance and support the user's experience. A separate document, the [[WebKit Authors Guide]], is under development.

	== Terminology ==		== Terminology ==
	; Model		; Model
	: A system that is initialized parametrically to an start state and is sequentially clocked to produce a new state and output vector on each clock strobe. ~~NWK~~ supports System Dynamic (SD), Spatial (Sp) and Individual-based (IB) models. Models in ~~NWK~~ are currently implemented either in Javascript or Java.		: A system that is initialized parametrically to an start state and is sequentially clocked to produce a new state and output vector on each clock strobe. NuWebKit supports System Dynamic (SD), Spatial (Sp) and Individual-based (IB) models. Models in NuWebKit are currently implemented either in Javascript or Java.

	;Simulation		;Simulation
Line 26:		Line 26:

	;"The Drawer"		;"The Drawer"
	: The ~~NWK~~ screen has a sliding partition on the right-hand side, controlled by the user, that reveals documentation and other features detailed below when slid leftward.		: The NuWebKit screen has a sliding partition on the right-hand side, controlled by the user, that reveals documentation and other features detailed below when slid leftward.

	;Presets		;Presets
	: ~~NWK~~ provides a storage facility to record and recall various choices for settings and parameters. The presets are like "radio buttons" selecting various alternative sets of configurations.		: NuWebKit provides a storage facility to record and recall various choices for settings and parameters. The presets are like "radio buttons" selecting various alternative sets of configurations.

	;RAMs		;RAMs
Line 44:		Line 44:

	== Platform Overview==		== Platform Overview==
	[[File:ui0.png\|thumb\|~~NWK~~ User Interface]]		[[File:ui0.png\|thumb\|NuWebKit User Interface]]
	This image shows the browser window running the sample individual-based site [https://www.cs.oberlin.edu/~rms/wk/rps/ "Rock Paper Scissors"]. The features are all described later in this guide.		This image shows the browser window running the sample individual-based site [https://www.cs.oberlin.edu/~rms/wk/rps/ "Rock Paper Scissors"]. The features are all described later in this guide.
	;Model Inputs		;Model Inputs
Line 86:		Line 86:
	[https://www.cs.oberlin.edu/~rms/wk/agents/index.html Agents] is a very simple simulation of agents of different sizes and shapes. The space in which they are moving has elastic walls off of which the agents bounce. They also behave like an ideal gas with respect to their physical interaction. (This behavior was a choice made by the site's author.) [https://www.cs.oberlin.edu/~rms/wk/agents1/index.html Agents (1)] has the same model, only initially empty.		[https://www.cs.oberlin.edu/~rms/wk/agents/index.html Agents] is a very simple simulation of agents of different sizes and shapes. The space in which they are moving has elastic walls off of which the agents bounce. They also behave like an ideal gas with respect to their physical interaction. (This behavior was a choice made by the site's author.) [https://www.cs.oberlin.edu/~rms/wk/agents1/index.html Agents (1)] has the same model, only initially empty.

	With ~~NWK~~ you can:		With NuWebKit you can:
	* Click and drag to create new initial configurations;		* Click and drag to create new initial configurations;
	* Save your configuration in the Presets.		* Save your configuration in the Presets.
Line 186:		Line 186:
	=== Sensitivity Analysis ===		=== Sensitivity Analysis ===

	One of the goals of ~~NWK~~ is to provide secondary platforms for optimization and analysis. To date one such platform exists to perform sensitivity analysis, primarily but not exclusively for SD models. Once again, refer to [https://www.cs.oberlin.edu/~rms/wk/sdnumml1/index.html SD User Defined] to see this in action. Open this site and click on the tab labeled '''Sensitivity'''.		One of the goals of NuWebKit is to provide secondary platforms for optimization and analysis. To date one such platform exists to perform sensitivity analysis, primarily but not exclusively for SD models. Once again, refer to [https://www.cs.oberlin.edu/~rms/wk/sdnumml1/index.html SD User Defined] to see this in action. Open this site and click on the tab labeled '''Sensitivity'''.

	[[File:sens0.png\|thumb\|Sensitivity Analysis Platform after a run]]		[[File:sens0.png\|thumb\|Sensitivity Analysis Platform after a run]]

Rsalter: Rsalter moved page WebKit Users Guide to NuWebKit Users Guide: Change of app name

2026-03-19T16:52:56Z

Rsalter moved page WebKit Users Guide to NuWebKit Users Guide: Change of app name

← Older revision

Revision as of 16:52, 19 March 2026

Rsalter at 16:35, 19 March 2026

2026-03-19T16:35:55Z

← Older revision		Revision as of 16:35, 19 March 2026
Line 34:		Line 34:
	: RAMs (Runtime alterable modules) allow the author to provide the means for selecting sets of alternative algorithms used by the model. Authors may also use the RAM facility to enable a user to completely specify some model (these are called UberRAMs, or URAMs).		: RAMs (Runtime alterable modules) allow the author to provide the means for selecting sets of alternative algorithms used by the model. Authors may also use the RAM facility to enable a user to completely specify some model (these are called UberRAMs, or URAMs).

	;~~NumML~~		;NuML
	: ~~NumML~~ (Numerus Modeling Language) is a small, simple, domain-specific language (dsl) that serves 2 functions: 1) to specify the algorithm or model in RAMs and URAMs; and 2) to assert configuration changes to factory settings.		: NuML (Numerus Modeling Language) is a small, simple, domain-specific language (dsl) that serves 2 functions: 1) to specify the algorithm or model in RAMs and URAMs; and 2) to assert configuration changes to factory settings.

	;Analysis Platforms		;Analysis Platforms
Line 73:		Line 73:
	* User initialization of spatial and agent-based models		* User initialization of spatial and agent-based models
	* Presets		* Presets
	* ~~NumML~~ language		* NuML language
	* RAMS and URAMS		* RAMS and URAMS
	* Configuration overrides		* Configuration overrides
Line 166:		Line 166:
	The example site includes 6 slider inputs, a line graph and a phase graph. Each of these 8 components need a "handle", an ID by which they can be referenced in the program. The sliders all run from 0 to 1 with 0.01 step size and have the IDs <code>Param1</code>, <code>Param2</code>..., <code>Param6</code>. The line and phase graphs are respectively given IDs <code>mainGraph</code> and <code>phaseGraph</code>.		The example site includes 6 slider inputs, a line graph and a phase graph. Each of these 8 components need a "handle", an ID by which they can be referenced in the program. The sliders all run from 0 to 1 with 0.01 step size and have the IDs <code>Param1</code>, <code>Param2</code>..., <code>Param6</code>. The line and phase graphs are respectively given IDs <code>mainGraph</code> and <code>phaseGraph</code>.

	Visit the model using the link and open the '''Model Definition''' RAM. It contains a single option ('''~~NumML~~ Code''') with a Code text area. Notice that, although 6 sliders were allotted, only 1 is visible in the default preset. This is a result of the UI configuration contained in the program. As you step through presets note that the input sliders appear and disappear as needed, and that slider and graph legends (names and titles) change to suit the model.		Visit the model using the link and open the '''Model Definition''' RAM. It contains a single option ('''NuML Code''') with a Code text area. Notice that, although 6 sliders were allotted, only 1 is visible in the default preset. This is a result of the UI configuration contained in the program. As you step through presets note that the input sliders appear and disappear as needed, and that slider and graph legends (names and titles) change to suit the model.

	Consider the code for the default Exponential Curve model:		Consider the code for the default Exponential Curve model:
Line 172:		Line 172:
	[[File:expocode.png\|400px\|Code for Exponential Model]]		[[File:expocode.png\|400px\|Code for Exponential Model]]
	</blockquote>		</blockquote>
	The first line consists of the string "numml". This is required to indicate that the contents are in ~~NumML~~ rather than Javascript. There are 2 sections: '''model''' and '''configurations'''. (Note that "//" is the comment character meaning that this line is ignored by the compiler). In the model section are 4 statements using the operator <code>@=</code>. In fact, each ~~NumML~~ statement uses Javascript syntax, but with 2 non-Javascript operators: <code>@=</code> and <code>#=</code>, which completely program the behavior and look and feel of the simulation. The former is used to specify the model generally in terms of differential (or difference) equations using program variables; the latter asserts properties for the visual components that fit with the particular model		The first line consists of the string "numml". This is required to indicate that the contents are in NuML rather than Javascript. There are 2 sections: '''model''' and '''configurations'''. (Note that "//" is the comment character meaning that this line is ignored by the compiler). In the model section are 4 statements using the operator <code>@=</code>. In fact, each NuML statement uses Javascript syntax, but with 2 non-Javascript operators: <code>@=</code> and <code>#=</code>, which completely program the behavior and look and feel of the simulation. The former is used to specify the model generally in terms of differential (or difference) equations using program variables; the latter asserts properties for the visual components that fit with the particular model

	The first block (lines 4 - 8) consists of 3 statements defining the variable of interest, <code>Exp</code>, and one defining an auxiliary variable <code>Rate</code> used in line 4. The latter is not entirely necessary; we could instead have written line 4 as <code>deriv(Exp) @= Param1 * Exp</code>, however the style we used relates the model directly to relabeling of the <code>Param1</code> slider to <code>Rate</code> and consequently is more readable. We will continue to see this approach used in the other models in this site.		The first block (lines 4 - 8) consists of 3 statements defining the variable of interest, <code>Exp</code>, and one defining an auxiliary variable <code>Rate</code> used in line 4. The latter is not entirely necessary; we could instead have written line 4 as <code>deriv(Exp) @= Param1 * Exp</code>, however the style we used relates the model directly to relabeling of the <code>Param1</code> slider to <code>Rate</code> and consequently is more readable. We will continue to see this approach used in the other models in this site.
Line 180:		Line 180:
	Lines 11 through 16 use operator <code>#=</code> to detail the appearance of the input sliders and output graphs. This is mostly self- explanatory, except for the entry for <code>statsGraph</code>, which will be discussed below. This code is not required, however the result will be a generic display with 6 input sliders labeled <code>Param1</code> through <code>Param6</code>, and graphs with no labels. Note that on line 16, setting the legend for the unused sliders to an empty string hides them.		Lines 11 through 16 use operator <code>#=</code> to detail the appearance of the input sliders and output graphs. This is mostly self- explanatory, except for the entry for <code>statsGraph</code>, which will be discussed below. This code is not required, however the result will be a generic display with 6 input sliders labeled <code>Param1</code> through <code>Param6</code>, and graphs with no labels. Note that on line 16, setting the legend for the unused sliders to an empty string hides them.

	Look at the remaining preset code. Preset 3, in particular, is a good example of the extent to which input sliders can be detailed. This is required because the generic slider properties do not match the value range required in the simulation. Refer to the [[~~NumML~~ Language Reference]] for a complete description of the ~~NumML~~ language.		Look at the remaining preset code. Preset 3, in particular, is a good example of the extent to which input sliders can be detailed. This is required because the generic slider properties do not match the value range required in the simulation. Refer to the [[NuML Language Reference]] for a complete description of the NuML language.

	'''If you make changes to any of these that you want to save to presets, you should compile before saving so that the compiled code will be loaded when you activate the preset.'''		'''If you make changes to any of these that you want to save to presets, you should compile before saving so that the compiled code will be loaded when you activate the preset.'''
Line 211:		Line 211:
	== Configuration Overrides ==		== Configuration Overrides ==
	[[File:config.png\|thumb\|Configuration Window]]		[[File:config.png\|thumb\|Configuration Window]]
	~~NumML~~ statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window. Shown at right is an override of the factory settings that changes the ''dt'' value and asserts Euler as the integration method. Other overrides will become available soon.		NuML statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window. Shown at right is an override of the factory settings that changes the ''dt'' value and asserts Euler as the integration method. Other overrides will become available soon.
	<br clear="both">		<br clear="both">

Rsalter: /* CSV Downloads */

2025-07-11T16:21:22Z

CSV Downloads

← Older revision		Revision as of 16:21, 11 July 2025
Line 215:		Line 215:

	== CSV Downloads ==		== CSV Downloads ==
			If a graph contains a '''CSV''' button, clicking that button once the graph has been filled will bring about a download of a CSV (comma separate values) file of the data from that graph. The settings used by the simulation will be recorded above the CSV header.

	<br clear="both">		<br clear="both">

Rsalter: /* Configuration Overrides */

2025-07-11T16:19:32Z

Configuration Overrides

← Older revision		Revision as of 16:19, 11 July 2025
Line 212:		Line 212:
	[[File:config.png\|thumb\|Configuration Window]]		[[File:config.png\|thumb\|Configuration Window]]
	NumML statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window. Shown at right is an override of the factory settings that changes the ''dt'' value and asserts Euler as the integration method. Other overrides will become available soon.		NumML statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window. Shown at right is an override of the factory settings that changes the ''dt'' value and asserts Euler as the integration method. Other overrides will become available soon.
			<br clear="both">

	== CSV Downloads ==		== CSV Downloads ==

	<br clear="both">		<br clear="both">

Rsalter: /* Configuration Overrides */

2025-07-11T16:18:41Z

Configuration Overrides

← Older revision		Revision as of 16:18, 11 July 2025
Line 211:		Line 211:
	== Configuration Overrides ==		== Configuration Overrides ==
	[[File:config.png\|thumb\|Configuration Window]]		[[File:config.png\|thumb\|Configuration Window]]
	NumML statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window.		NumML statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window. Shown at right is an override of the factory settings that changes the ''dt'' value and asserts Euler as the integration method. Other overrides will become available soon.

	== CSV Downloads ==		== CSV Downloads ==

	<br clear="both">		<br clear="both">

Rsalter: /* Configuration Overrides */

2025-07-11T16:08:08Z

Configuration Overrides

← Older revision		Revision as of 16:08, 11 July 2025
Line 210:		Line 210:

	== Configuration Overrides ==		== Configuration Overrides ==
			[[File:config.png\|thumb\|Configuration Window]]
			NumML statements using <code>#=</code> can be used to configure most models using the Configuration window below the Preset selection window.

	== CSV Downloads ==		== CSV Downloads ==

	<br clear="both">		<br clear="both">

Rsalter: /* Concepts */

2025-07-10T22:26:35Z

Concepts

← Older revision		Revision as of 22:26, 10 July 2025
Line 3:		Line 3:
	This Guide will introduce the NWK user interface (UI) and the many useful functions that enhance and support the user's experience. A separate document, the [[WebKit Authors Guide]], is under development.		This Guide will introduce the NWK user interface (UI) and the many useful functions that enhance and support the user's experience. A separate document, the [[WebKit Authors Guide]], is under development.

	== ~~Concepts~~ ==		== Terminology ==
	; Model		; Model
	: A system that is initialized parametrically to an start state and is sequentially clocked to produce a new state and output vector on each clock strobe. NWK supports System Dynamic (SD), Spatial (Sp) and Individual-based (IB) models. Models in NWK are currently implemented either in Javascript or Java.		: A system that is initialized parametrically to an start state and is sequentially clocked to produce a new state and output vector on each clock strobe. NWK supports System Dynamic (SD), Spatial (Sp) and Individual-based (IB) models. Models in NWK are currently implemented either in Javascript or Java.

Rsalter: /* Sensitivity Analysis */

2025-07-10T22:21:55Z

Sensitivity Analysis

← Older revision		Revision as of 22:21, 10 July 2025
Line 209:		Line 209:
	Note that except for '''statDat''', these settings are shown in textfields and merely initialize their parameters. They can be changed, and changes are saved to presets.		Note that except for '''statDat''', these settings are shown in textfields and merely initialize their parameters. They can be changed, and changes are saved to presets.

			== Configuration Overrides ==

			== CSV Downloads ==

	<br clear="both">		<br clear="both">