Move Interactive checkbox to the top of the form.

Author: Dmitry Zelenkovsky

Docs/docs/simulations-tab.md

@@ -19,11 +19,11 @@ A `Simulation` can be in the following states.
 		[![](images/web-simulation-general.png)](images/full_size_images/web-simulation-general.png)
 
 	2. `Map & Vehicles`
+		- `Interactive Mode`: Check this to enable Simulation controls
 		- `Select Map`: From the dropdown, choose the map that will be used
 		- `Select Vehicle`: From the dropdown, choose the vehicle that will be spawned
 			- `Bridge Connection String`: If the chosen vehicle has a Bridge Type, an IP:port must be provided to the bridge host
 		- `+`: Adds an additional vehicle. Vehicles will spawn in `Spawn Info` positions of the map in order
-		- `Interactive Mode`: Check this to enable Simulation controls
 
 		[![](images/web-simulation-mapVehicle.png)](images/full_size_images/web-simulation-mapVehicle.png)
 

WebUI/src/components/SimulationManager/FormGeneral.js

@@ -102,7 +102,7 @@ function FormGeneral() {
             </p>
             <Checkbox
                 checked={apiOnly}
-                label={apiOnly ? "Use API to control simulation" : "Not using API to control simulation"}
+                label="Use API to control simulation"
                 name={'apiOnly'}
                 onChange={changeApiOnly}/>
             <br />
@@ -114,11 +114,12 @@ function FormGeneral() {
             </p>
             <Checkbox
                 checked={headless}
-                label={headless ? "Runing in Headless Mode" : "Running in Normal Mode"}
+                label="Run simulation in Headless Mode"
                 name={'headless'}
                 disabled={interactive}
                 onChange={changeHeadless} />
-            </div>)
+            </div>
+        )
 }
 
 export default FormGeneral;

WebUI/src/components/SimulationManager/FormMapVehicles.js

@@ -149,6 +149,19 @@ function FormMapVehicles() {
                 </Alert>
             }
             <div>
+                <h4 className={appCss.inputLabel}>
+                    Interactive Mode
+                </h4>
+                <p className={appCss.inputDescription}>
+                    Running simulation in interactive mode allows to control time flow, create snapshots interact with environment and control vehicles manually.
+                </p>
+                <Checkbox
+                    checked={interactive}
+                    label="Run simulation in interactive mode"
+                    name={'interactive'}
+                    disabled={apiOnly || headless}
+                    onChange={changeInteractive} />
+                <br />
                 <h4 className={appCss.inputLabel}>
                     Select Map
                 </h4>
@@ -166,7 +179,6 @@ function FormMapVehicles() {
                     disabled={apiOnly}
                 />
                 <br />
-                <br />
                 <h4 className={appCss.inputLabel}>
                     Select Vehicles
                 </h4>
@@ -223,19 +235,6 @@ function FormMapVehicles() {
                     </div>
                 }
                 <IoIosAdd className={css.formIcons} onClick={addVehicleField}/><br />
-                <br />
-                <h4 className={appCss.inputLabel}>
-                    Interactive Mode
-                </h4>
-                <p className={appCss.inputDescription}>
-                    Running simulation in interactive mode allows to control time flow, create snapshots interact with environment and control vehicles manually.
-                </p>
-                <Checkbox
-                    checked={interactive}
-                    label={interactive ? "Simulation will run using Interactive Mode" : "Simulation will not run using Interactive Mode"}
-                    name={'interactive'}
-                    disabled={apiOnly || headless}
-                    onChange={changeInteractive} />
             </div>
             <span className={appCss.formWarning}>{formWarning}</span>
         </div>)

WebUI/src/components/SimulationManager/FormTraffic.js

@@ -40,19 +40,25 @@ function FormTraffic() {
                 name={'hasSeed'}
                 checked={hasSeed}
                 onChange={changeHasSeed}
-                label={hasSeed ? "Use predefiend seed" : "Use different random seed everytime"} />
+                label="Use predefiend random seed"
+                disabled={apiOnly} />
             {hasSeed && <input
                 name={'seed'}
                 value={seed || ''}
-                onChange={changeSeed} />}
+                onChange={changeSeed}
+                disabled={apiOnly} />}
+            <br />
             <br />
             <h4 className={appCss.inputLabel}>
-                Enable NPC
+                Random Traffic
             </h4>
+            <p className={appCss.inputDescription}>
+                When enabled other vehicles start to roam around randomly across the map during the simulation.
+            </p>
             <Checkbox
                 name={'enableNpc'}
                 checked={useTraffic}
-                label={useTraffic ? "NPC is enabled" : "NPC is disabled"}
+                label="Enabled random traffic"
                 disabled={apiOnly}
                 onChange={changeUseTraffic} />
             <br />
@@ -65,7 +71,7 @@ function FormTraffic() {
             <Checkbox
                 name={'usePedestrians'}
                 checked={usePedestrians}
-                label={usePedestrians ? "Pedestrians are enabled" : "Pedestrians are disabled"}
+                label="Enable random pedestrians"
                 disabled={apiOnly}
                 onChange={changeusePedestrians} />
         </div>)

WebUI/src/components/SimulationManager/FormWeather.js

@@ -14,7 +14,7 @@ import "react-datepicker/dist/react-datepicker.css";
 
 function FormWeather() {
     const [simulation, setSimulation] = useContext(SimulationContext);
-    const {weather} = simulation;
+    const {weather, apiOnly} = simulation;
     let {rain, wetness, fog, cloudiness} = weather || {};
     const [formWarning, setFormWarning] = useState('');
     function validNumberInput(val, min, max, ) {
@@ -84,6 +84,7 @@ function FormWeather() {
                     timeIntervals={30}
                     dateFormat="HH:mm"
                     timeCaption="Time"
+                    disabled={apiOnly}
                 />
             </div>
             <div className={css.weatherInput}>
@@ -101,7 +102,9 @@ function FormWeather() {
                     min="0"
                     max="1"
                     step="0.01"
-                    placeholder="rain"/>
+                    placeholder="rain"
+                    disabled={apiOnly}
+                />
             </div>
             <div className={css.weatherInput}>
                 <h4 className={appCss.inputLabel}>
@@ -118,7 +121,9 @@ function FormWeather() {
                     min="0"
                     max="1"
                     step="0.01"
-                    placeholder="wetness"/>
+                    placeholder="wetness"
+                    disabled={apiOnly}
+                />
             </div>
             <div className={css.weatherInput}>
                 <h4 className={appCss.inputLabel}>
@@ -135,7 +140,9 @@ function FormWeather() {
                     min="0"
                     max="1"
                     step="0.01"
-                    placeholder="fog"/>
+                    placeholder="fog"
+                    disabled={apiOnly}
+                />
             </div>
             <div className={css.weatherInput}>
                 <h4 className={appCss.inputLabel}>
@@ -152,7 +159,9 @@ function FormWeather() {
                     min="0"
                     max="1"
                     step="0.01"
-                    placeholder="cloudiness"/>
+                    placeholder="cloudiness"
+                    disabled={apiOnly}
+                />
             </div>
             <span className={appCss.formWarning}>{formWarning}</span>
         </div>)