Merge pull request #543 from apitiot/2022.3.0

NF: conditional check for hardware accelerated WebGL support

src/core/GUI.js

@@ -266,6 +266,9 @@ export class GUI
 	/**
 	 * @callback GUI.onOK
 	 */
+	/**
+	 * @callback GUI.onCancel
+	 */
 	/**
 	 * Show a message to the participant in a dialog box.
 	 *
@@ -275,15 +278,19 @@ export class GUI
 	 * @param {string} options.message - the message to be displayed
 	 * @param {Object.<string, *>} options.error - an exception
 	 * @param {string} options.warning - a warning message
-	 * @param {boolean} [options.showOK=true] - specifies whether to show the OK button
+	 * @param {boolean} [options.showOK=true] - whether to show the OK button
 	 * @param {GUI.onOK} [options.onOK] - function called when the participant presses the OK button
+	 * @param {boolean} [options.showCancel=false] - whether to show the Cancel button
+	 * @param {GUI.onCancel} [options.onCancel] - function called when the participant presses the Cancel button
 	 */
 	dialog({
 		message,
 		warning,
 		error,
 		showOK = true,
-		onOK
+		onOK,
+		showCancel = false,
+		onCancel
 	} = {})
 	{
 		// close the previously opened dialog box, if there is one:
@@ -364,9 +371,17 @@ export class GUI
 			markup += `<p>${message}</p>`;
 		}
 
+		if (showOK || showCancel)
+		{
+			markup += "<hr>";
+		}
+		if (showCancel)
+		{
+			markup += "<button id='dialogCancel' class='dialog-button' aria-label='Close dialog'>Cancel</button>";
+		}
 		if (showOK)
 		{
-			markup += "<hr><button id='dialogOK' class='dialog-button' aria-label='Close dialog'>Ok</button>";
+			markup += "<button id='dialogOK' class='dialog-button' aria-label='Close dialog'>Ok</button>";
 		}
 		markup += "</div></div>";
 
@@ -394,6 +409,20 @@ export class GUI
 				}
 			};
 		}
+		if (showCancel)
+		{
+			this._cancelButton = document.getElementById("dialogCancel");
+			this._cancelButton.onclick = () =>
+			{
+				this.closeDialog();
+
+				// execute callback function:
+				if (typeof onCancel !== "undefined")
+				{
+					onCancel();
+				}
+			};
+		}
 	}
 
 	/**

src/core/PsychoJS.js

@@ -119,7 +119,8 @@ export class PsychoJS
 		topLevelStatus = true,
 		autoStartScheduler = true,
 		saveResults = true,
-		captureErrors = true
+		captureErrors = true,
+		checkWebGLSupport = false
 	} = {})
 	{
 		// logging:
@@ -178,6 +179,9 @@ export class PsychoJS
 		// whether to start the scheduler when the experiment starts:
 		this._autoStartScheduler = autoStartScheduler;
 
+		// whether to check for actual hardware accelerated WebGL support:
+		this._checkWebGLSupport = checkWebGLSupport;
+
 		// whether to save results at the end of the experiment:
 		this._saveResults = saveResults;
 
@@ -415,19 +419,43 @@ export class PsychoJS
 			// start the asynchronous download of resources:
 			this._serverManager.prepareResources(resources);
 
-			// start the experiment:
-			this.status = PsychoJS.Status.STARTED;
-			this.logger.info("[PsychoJS] Start Experiment.");
-			if (this._autoStartScheduler)
+			// if WebGL is not actually available, warn the participant and ask them whether they want to go ahead
+			if (this._checkWebGLSupport && !Window.checkWebGLSupport())
 			{
-				await this._scheduler.start();
+				// add an entry to experiment results to warn the designer about a potential WebGL issue:
+				this._experiment.addData('hardware_acceleration', 'NOT SUPPORTED');
+				this._experiment.nextEntry();
+
+				this._gui.dialog({
+					warning: "It appears that hardware acceleration is either not supported by your browser or currently switched off.<br>As a consequence, this experiment will be rendered using software emulation and advanced features, such as gratings and gamma correction, will not be available.<br><br>You may want to press Cancel, change your browser settings, and reload the experiment. Otherwise press OK to proceed as is.",
+					showCancel: true,
+					onCancel: () =>
+					{
+						this.quit();
+					},
+					onOK: () =>
+					{
+						this.status = PsychoJS.Status.STARTED;
+						this.logger.info("[PsychoJS] Start Experiment (software emulation mode).");
+						this._scheduler.start();
+					}
+				});
 			}
+			else
+			{
+				if (this._autoStartScheduler)
+				{
+					this.status = PsychoJS.Status.STARTED;
+					this.logger.info("[PsychoJS] Start Experiment.");
+					this._scheduler.start();
+				}
+			}
+
 		}
 		catch (error)
 		{
 			this.status = PsychoJS.Status.ERROR;
 			throw { ...response, error };
-			// this._gui.dialog({ error: { ...response, error } });
 		}
 	}
 

src/util/Scheduler.js

@@ -118,7 +118,7 @@ export class Scheduler
 	 *
 	 * <p>Note: tasks are run after each animation frame.</p>
 	 */
-	async start()
+	start()
 	{
 		const self = this;
 		const update = async (timestamp) =>