This code primarily powers an interactive user interface for managing...

August 29, 2025 at 06:17 PM

var AnalogWebbRest;$(function(){function l(){return'<span class="symbol">&#xe74d;<\/span>'}function a(n,t,i,r,u){var e=u,f=!1;switch(e.State){case"end":case"stopped":case"paused":f=!0}return f?"<span class='playButton symbol'>&#xe768;<\/span>":"<span class='pauseButton symbol'>&#xe769;<\/span>"}function v(n,t,i,r,u){var e=u,f=!1;switch(e.State){case"end":case"paused":case"playing":f=!0}return f?"<span class='stopButton symbol'>&#xe71a;<\/span>":""}function y(){var i=[{id:"Delete",cssClass:"tableCell",width:40,headerCssClass:"tableHeader",formatter:l},{id:"Name",name:"Name",field:"Name",width:375,cssClass:"tableCell",headerCssClass:"tableHeader"},{id:"PlayPause",cssClass:"tableCell",width:25,headerCssClass:"tableHeader",formatter:a},{id:"Stop",cssClass:"tableCell",width:25,headerCssClass:"tableHeader",formatter:v}];n=new Slick.Data.DataView;n.beginUpdate();n.setItems([]);n.endUpdate();t=new Slick.Grid("#recordingsGrid",n,i,{enableCellNavigation:!0,enableColumnReorder:!1,showHeaderRow:!1,syncColumnCellResize:!0,autoHeight:!0,rowHeight:35});t.onClick.subscribe(p);n.onRowCountChanged.subscribe(function(){t.updateRowCount();t.render()});n.onRowsChanged.subscribe(function(n,i){t.invalidateRows(i.rows);t.render()});$(window).resize(function(){t.resizeCanvas()})}function p(i){var u=t.getCellFromEvent(i),r=n.getItems()[u.row],f=t.getColumns()[u.cell].id;switch(f){case"Delete":d(r);break;case"Stop":k(r);break;case"PlayPause":r.State=="playing"?b(r):w(r)}}function w(n){var t;t=n.Loaded?h(n):tt(n).then(h);t.then(u);c()}function b(n){rt(n).then(u)}function k(n){ut(n).then(it).then(u)}function d(n){nt(n).then(function(){o()})}function e(){var n=new AnalogWebbRest;$("#controlModeType option[value='3']").remove();$("#controlModeType option[value='2']").remove();n.getSimulationControlMode().done(function(n){n.mode==3?$("#controlModeType").append($("<option><\/option>").attr("value",3).text("Legacy")):n.mode==2&&$("#controlModeType").append($("<option><\/option>").attr("value",2).text("Remote"));$("#controlModeType").val(n.mode)}).fail(function(n){i("Failed to get control mode!",n)})}function o(){var u=new AnalogWebbRest;u.getSimulationRecordings().done(function(i){var u=[],f=i.recordings;r={};$.each(f,function(n,t){var i={id:t,Name:t,Loaded:!1,State:"stopped"};u.push(i);r[i.Name]=i});n.beginUpdate();n.setItems(u);t.invalidate();n.endUpdate();g()}).fail(function(n){i("Failed to get recordings",n)})}function g(){var n=new AnalogWebbRest;n.getLoadedSimulationRecordings().done(function(n){var f=n.recordings,i,t;$.each(f,function(n,t){var i=r[t];i&&(i.Loaded=!0,u(i))});for(i in r)t=r[i],t.Loaded?s(t).then(u):u(t)})}function s(n){var t=new AnalogWebbRest;return t.getSimulationRecordingPlaybackState(n.Name).then(function(t){return n.State=t.state,n})}function nt(n){var t=new AnalogWebbRest;return t.deleteSimulationRecording(n.Name).then(function(){return n.Loaded=!1,n.State="stopped",n},function(n){i("Failed to delete recording!",n)})}function tt(n){var t=new AnalogWebbRest;return t.loadSimulationRecording(n.Name).then(function(){return n.Loaded=!0,n},function(n){i("Failed to load recording!",n)})}function it(n){var t=new AnalogWebbRest;return t.unloadSimulationRecording(n.Name).then(function(){return n.Loaded=!1,n.State="stopped",n},function(n){i("Failed to unload recording!",n)})}function h(n){var t=new AnalogWebbRest;return t.playSimulationRecording(n.Name).then(function(){return n.State="playing",n},function(n){i("Failed to play recording!",n)})}function rt(n){var t=new AnalogWebbRest;return t.pauseSimulationRecording(n.Name).then(function(){return n.State="paused",n},function(n){i("Failed to pause recording!",n)})}function ut(n){var t=new AnalogWebbRest;return t.stopSimulationRecording(n.Name).then(function(){return n.State="stopped",n},function(n){i("Failed to stop recording!",n)})}function u(t){n.updateItem(t.Name,t)}function c(){f==null&&(f=setTimeout(ft,1e3))}function ft(){var t=!1,i,n;for(i in r)(n=r[i],n.State=="playing")&&(s(n).then(u),t=!0);f=null;t&&c()}function i(n,t){var r="",u=n,i;t!=undefined&&t.responseText!=undefined&&(i=jQuery.parseJSON(t.responseText),i!=undefined&&i.Reason!=undefined&&i.Reason.length!=0&&(r=i.Reason,i.CodeText!=undefined&&i.CodeText.length!=0&&(r=r+" "+i.CodeText)));r.length!=0&&(u=u+"\r\n"+r);alert(u)}var t,n,r={},f=null;$("#setControlModeButton").click(function(){var n=new AnalogWebbRest,t=$("#controlModeType option:selected").val();$("#setControlModeButton").prop("disabled",!0);n.setSimulationControlMode(t).done(function(){$("#setControlModeButton").prop("disabled",!1);e()}).fail(function(n){$("#setControlModeButton").prop("disabled",!1);i("Failed to set control mode!",n);e()})});$("#uploadRecordingButton").click(function(){$("#recordingFile").click()});$("#recordingFile").change(function(){var t=$("#recordingFile").prop("files")[0],n;t&&(n=new FormData,n.append("file",t),$.ajax({url:"/api/holographic/simulation/playback/file",cache:!1,contentType:!1,processData:!1,data:n,type:"post"}).done(function(){o();$("#fileUpload").get(0).reset()}).fail(function(){i("Failed to upload file!")}))});y();e();o()})

This code primarily powers an interactive user interface for managing simulation recordings. Here's a breakdown of its functionality:

Overall Purpose:

The JavaScript code defines a web-based control panel or dashboard that interacts with an underlying service via REST APIs, leveraging the AnalogWebbRest class (potentially a library or abstraction layer for REST operations). It centers around managing simulation recordings that can be in multiple states such as playing, paused, or stopped.


Key Functionalities:

  1. Grid Setup for Displaying Recordings:

    • Uses SlickGrid to create a grid-based table UI for displaying recording data.

    • The table includes columns for:

      • Delete (deletes a recording).
      • Name (recording name).
      • Play/Pause (toggles between playing and pausing).
      • Stop (stops the simulation playback).
    • Clicking on grid cells triggers appropriate actions (Delete, Play/Pause, Stop) depending on the context.

  2. Simulation Control Modes:

    • Adds a dropdown #controlModeType and buttons for managing "control modes".
    • Modes are fetched dynamically from a service using the AnalogWebbRest.getSimulationControlMode() method.
    • Allows setting a new control mode via the dropdown and updates the state on the UI using AnalogWebbRest.setSimulationControlMode().
  3. Recording Management:

    • Functions (loadSimulationRecording, deleteSimulationRecording, etc.) define how to interact with an API to manage simulation recordings.
      • Upload recordings: Provides a file input (#recordingFile) for uploading new recording files.
      • Load recordings: Dynamically fetches existing simulations using APIs (e.g., getSimulationRecordings, getLoadedSimulationRecordings) and populates the grid.
      • Delete recordings: Deletes a recording through a REST API call.
    • Supports playback functions such as:
      • Playing, pausing, and stopping recordings.
      • Loading or unloading recordings.
  4. REST-based Interaction:

    • AnalogWebbRest is used throughout to interact with simulation APIs for operations like fetching recordings, starting/stopping playback, and managing states.
  5. Playback State Management:

    • Periodically checks for the state of all recordings (e.g., whether they are playing) using getSimulationRecordingPlaybackState().
    • Updates the grid in real-time to reflect changes in playback or other recording states.
  6. Responsive UI Updates:

    • Redraws the grid or resizes it (resizeCanvas) in response to window resizing.
    • Listens for state changes in recordings (onRowCountChanged, onRowsChanged) to keep the grid updated.
  7. Error Handling:

    • Displays error messages using alert when API calls fail.
    • Provides feedback to the user when operations like file uploads or control mode setting fail.

Key Components:

  • Functions and Handlers:

    • e(): Updates the control mode dropdown and current mode.
    • o(): Fetches and initializes the list of simulation recordings.
    • g(): Updates the grid with "loaded" recordings.
    • p(): Handles user interactions (e.g., clicking play, stop, or delete in the grid).
    • ft(): Periodically checks playback states and updates the grid.
  • SlickGrid Setup:

    • The grid (#recordingsGrid) manages recordings and their states through columns and custom formatters (e.g., l(), a(), v()).
  • UI Elements:

    • Buttons and file inputs with specific IDs (#setControlModeButton, #uploadRecordingButton, etc.) provide user interaction points.
  • Global Variables:

    • t: The SlickGrid instance.
    • n: The DataView for the grid.
    • r: A dictionary for current recordings, keyed by name.
    • f: Timer for periodic state checks.

Execution Flow:

  1. Upon page load ($(function() {...})):

    • Initializes the grid and associated handlers (y()).
    • Fetches the list of available recordings (o()) and control modes (e()).
  2. Handles user interactions:

    • Clicking buttons or grid cells triggers playback actions (p()), file uploads, or control mode changes.
  3. Periodically syncs playback states:

    • Uses a timer (ft()) to check and update playback states for all recordings.
  4. Dynamically updates the UI:

    • Refreshes the grid when recordings or states change.

Summary:

This code provides a robust client-side system for managing simulation recordings through a web interface, tightly integrating with backend REST APIs for real-time updates and playback management. These functionalities would suit scenarios like controlling playback systems in a simulation environment, interactive demos, or educational tools.

Generate your own explanations
Download our vscode extension
Read other generated explanations

Built by @thebuilderjr
Sponsored by beam analytics
Read our terms and privacy policy
Forked from openai-quickstart-node