Modals

Methods

(static) clearModal() → {void}

Description:

  • This function deletes every DOM elements within the popup modal including all event listeners and such.

Source:
Returns:
Type
void

(static) createSelect(options) → {object}

Description:

  • This function creates an html select input and fills it with the options passed to it. You can then assign the input anywhere within your page. Each option passed to the function must include a 'value' and 'text'. Value will be the value linked to the input when the option is selected. Text will be the text displayed to the user for each option field.

Source:
Example
const operationOptions = [
      {value: "none", text: "None"},
      {value: "add", text: "+"},
      {value: "sub", text: "-"},
      {value: "mult", text: "*"},
      {value: "div", text: "/"},
      {value: "squared", text: "²"},
      {value: "deriv", text: "derivative"},
      {value: "integral", text: "integral"},
      {value: "fft", text: "FFT"},
  ];

createSelect(operationOptions);
Parameters:
Name Type Description
options object

List of options to assign to the input.
Returns:

Returns a DOM input element filled with options.

Type
object

(static) displayBaseModal() → {void}

Description:

  • This function displays the 'base modal' on the screen. The base modal is blank by default and needs to be populated.

Source:
Returns:
Type
void

(static) hideModal() → {void}

Description:

  • This function hides the modal if displayed on screen.

Source:
Returns:
Type
void

(static) populateModalForCursors() → {void}

Description:

  • This function populates the base modal to select which measure cursors to display and the style of the information display. It's important to note that this function does not call any other function to display the cursors, these will display automatically whenever cursorOptions.isVerticalCursorOn or cursorOptions.isHorizontalCursorOn are set to true.

Source:
Fires:
  • event:CURSORS This function will fire when the user clicks on the CURSORS button.
Listens to Events:
  • event:resetButton Clicking on the reset button will remove all cursors currently displayed on screen.
Returns:
Type
void

(static) populateModalForDisplay() → {void}

Description:

  • This function populates the base modal to allow the user to :

    • Unzoom the screen.
    • Choose to display or not the grid.
    • Choose which theme to use (light / dark).
Source:
Fires:
  • event:DISPLAY This function will fire when the user clicks on the DISPLAY button.
Listens to Events:
  • unzoomButton When clicked,event: the function 'resetZoom' will be called if the screen is currently zoomed-in.
  • selectGridDisplay When changed,event: the variable 'config.gridDisplay' will be set to 1 or 0 depending on the user's choice.
  • selectTheme When changed,event: the variable 'config.theme' will be set to either 'light' or 'dark' depending on the user's choice.
Returns:
Type
void

(static) populateModalForMeasure_AUTO() → {void}

Description:

  • This function populates the base modal for the user to be able to select which auto-measures they wish to display on screen (vpp, rms, etc.).

Source:
Fires:
  • event:MEASURE This function will fire when the user clicks on the MEASURE button.
Listens to Events:
  • Measure When a user clicks on a measure to display/hide,event: the function 'toggleMeasurement' will be fired.
  • event:Reset 'resetMeasurements' will be called whenever a user clicks on the reset button.
  • event:Page-Change The modal will switch to the math operations when the user clicks on the 'autoSwitchButton'.
Returns:
Type
void

(static) populateModalForMeasure_MATHS() → {void}

Description:

  • This function populates the base modal for the user to be able to generate new signals. On this screen, the user can use math operations (+, -, fft, sqrd, etc.) to generate new signals from pre-existing ones.

Source:
Listens to Events:
  • event:Page-Change The modal will switch to auto-measures when the user clicks on the 'autoSwitchButton'.
  • event:saveButton Start the logic required to create a new signal when the user clicks it.
Returns:
Type
void

(static) populateModalForSave() → {void}

Description:

  • This function populates the base modal for the user to be able to choose which type of file they which to save the data under.

Source:
Fires:
  • event:SAVE This function will fire when the user clicks on the SAVE button.
Listens to Events:
  • csvButton Start the function 'downloadDataToCsv' and save the channels' data in a .event:csv file.
  • pngButton Start the function 'downloadCanvasAsImage' and save the channels' data as a .event:png picture.
  • jpegButton Start the function 'downloadCanvasAsImage' and save the channels' data as a .event:jpeg picture.
  • clipBoardButton Start the function 'copyCanvasToClipboard' and save the channels' data as a .event:png to the clipboard.
Returns:
Type
void

(static) populateModalForSetup() → {void}

Description:

  • This function populates the base modal for the setup sub-menu. It allows the user to select each channel's color both in dark and light mode. They can also change the grid's opacity from here. This function does not save the user's selections to the database, for this, the function 'saveColorChoices' is called.

Source:
Fires:
  • event:SETUP This function will fire when the user clicks on the SETUP button.
Listens to Events:
  • saveButton When clicked,event: the styles set by the user will be updated.
Returns:
Type
void

(static) populateModalForSize() → {void}

Description:

  • This function populates the base modal to allow the user to change the current screen size of the oscilloscope. The default value for the maximized display is "TD" because we can't prepare for every screen size available on the market.

Source:
Fires:
  • event:SIZE This function will fire when the user clicks on the SIZE button.
Listens to Events:
  • event:changeScreenSize Whenever the input is changed by the user.
Returns:
Type
void

(static) populateModalForTrigger() → {void}

Description:

  • This function populates the base modal to select the trigger related options.

Source:
Fires:
  • event:TRIGGER This function will fire when the user clicks on the TRIGGER button.
Listens to Events:
  • event:button Clicking on the button will save the selected settings.
Returns:
Type
void