Is it possible to store dat.gui presets for controls that are dynamically added?

I have a dynamic dat.gui interface where I add controls, but the "save settings" feature doesn't seem to recognize them.

var mygui = new dat.GUI();
mygui.remember(mygui);

// Example of adding a control in the standard way
mygui.control1 = 0.0;
var control = mygui.add(mygui, 'control1', -1, 1);

// Adding controls dynamically
var myArray = ['control2', 'control3'];
var controls = [];
for (x in myArray) {
    controls[myArray[x]] = 0.0;
    var newControl = mygui.add(controls, myArray[x], -1, 1);
}

All controls function correctly, but when I click the gear icon, the settings JSON only includes the first control, or any added controls using the standard method:

{
  "preset": "Default",
  "closed": false,
  "remembered": {
    "Default": {
      "0": {
        "control1": 0.5,
      }
    }
  },
  "folders": {}
}

It seems like the remember() functionality is getting confused, any suggestions on how to fix this?

Answer №1

Ensure that the following lines are present within the for loop:

mygui[myArray[x]] = 0.0;
var newControl = mygui2.add(mygui, myArray[x], -1, 1);

In the add function, the first parameter serves a dual purpose: it acts as both the source for the second parameter (the name of the control to be added, in this case myArray[x]) and the destination. While you can store control names anywhere, if the first parameter is not set to the gui, the controls will not be recognized by the remember() function. As a result, these controls will not be included in the gui's __rememberedObjects property or saved in the JSON object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the type of a DOM element based on the value of an AngularJS

My main goal is to dynamically change the type of a DOM element based on a scope variable. Imagine I have a scope variable like this: $scope.post = { title: 'Post title goes here!', slug: 'post-title-goes-here', category: ...

Developing modular applications with Vue.js and leveraging locally installed NPM packages

I am currently working on developing a modular application using Vue through the vue-cli-service. The main application and its modules are located in separate folders, with a structure that looks something like this: -- app/package.json /src/** -- mo ...

What could be the reason for the RecyclerView not displaying any content in this particular fragment?

Setting up a simple template app with a ViewPager to experiment and get acquainted with Fragments and ViewPagers was a fun learning experience. The TabbedActivity class in my app contains a fragment class called LinearFragment: public static class LinearF ...

405 status code returned for CORS request

Hello everyone, I need assistance with my CORS issue. I am trying to make an API request from another domain and encountering an error with the following code: var headers = { host: host, path: url + instance + '?action=reset', ...

Tips for retrieving the posted object in angularJS

My current challenge involves creating an object with a defined name, posting it into a database, and then immediately finding its position and obtaining its id. However, I have noticed that using "get" right after "post" retrieves the data before it' ...

Is your script tag not functioning properly with Promises?

Below is the code snippet used to dynamically append scripts in the DOM using promises. This piece of code is executed within an iframe for A-frame technology and it is generated using Google Blockly (Block-based coding). export const appendScript = asy ...

The equivalent to using $("div").toggle() in jQuery in plain JavaScript would be something like togg

I'm currently utilizing jQuery and am interested in converting certain methods to native JavaScript. When using jQuery, the code looks something like this: $("div").toggle() Is there a way to convert this to native JavaScript, perhaps like below? ...

I seem to be stuck on the Pokemon Damage Calculator kata on codewars. I've been trying to pass it, but I

My function seems to be working well, but I'm having trouble passing all the tests. Can anyone offer some assistance? You can find the kata at this link: function calculateDamage(yourType, opponentType, attack, defense) { let key = yourType + opp ...

What is the best way to retrieve widget options when inside an event?

Creating a custom jQuery widget: jQuery.widget("ui.test",{ _init: function(){ $(this.element).click(this.showPoint); }, showPoint: function(E){ E.stopPropagation(); alert(this.options.dir); } } Initializing the cu ...

Changes made to attribute values through Ajax success function are not immediately reflected and require a manual page refresh to take effect

Whenever I attempt to rename my object using an Ajax request triggered by a click event, followed by updating its element's attribute with the new name in the success function, I encounter a partial issue. Upon inspecting the element on Chrome, post- ...

The React ternary operator within HTML does not display the correct HTML output

I'm currently learning React and facing a challenge with using a ternary operator. My goal is to display a minus sign by default, and then switch it to a plus sign when clicked. I implemented the ternary operator in my JSX and set the initial state of ...

What is the best way to match the minimum height of one div to the height of another div?

I need to dynamically set the minimum height of #wrapper equal to the height of #sidebar, but the height of #sidebar is not fixed. Here is my attempt at achieving this with JavaScript: var sidebarHeight = jQuery('#sidebar').height; jQuery(&apos ...

What is the best way to swap out an observable array with an array retrieved from an API response

I have a custom material autocomplete input that allows users to select items in a dynamic form component. Since the fields of the form are dynamic, I need to filter the list of items every time a user types something into the input. filteredOptions: { [k ...

Issue: The function _lib_getAllUsers__WEBPACK_IMPORTED_MODULE_2___default(...) is not recognized as a valid function

I'm currently following the YouTube series on Next.js by Dave Gray. My goal is to import a function from the file "lib/getAllUsers" https://i.sstatic.net/1SQMg.png However, I'm encountering the following error: Unhandled Runtime Error Error: ...

Automatically adjusting maps according to internal criteria

I have an example of a map that looks like this const Map = new Map().set('123', [ [ 'foo', 'bar' ] ]).set('456', [ [ 'baz', 'qux' ], [ 'quux', 'corge' ] ]); /* The structure ...

How to render specific components in Next.js instead of rendering the entire page using React

Currently, I am exploring how to utilize next.js to display a component within a layout upon clicking a link. The layout structure I have is as follows: import * as React from "react" import { Box } from "@chakra-ui/layout" import { L ...

I attempted to append a character to a string every two seconds, but unfortunately, it was not successful. There were no errors displayed in the console. This was done within a Vue framework

It seems like a simple task, but for some reason it's not working. I have double-checked the implementation below and everything looks fine with this.showStr += this.mainStr.charAt(i). The issue seems to be related to the connection loop and setTimer. ...

Variable declared in $scope suddenly losing its definition

Within my directive controller, I've implemented a $watch function as follows: $scope.$watch(function () { return service.abc; }, function(newVal, oldVal) { $scope.abc = {abc: newVal}; }); However, I've encountered issues with the variabl ...

The index.ngfactory.ts file threw an unexpected token error, indicating that an appropriate loader may be necessary to handle this specific file

I've spent several hours trying to troubleshoot this persistent error, exhausting all online resources for solutions. The issue arises consistently with every module of Angular Material only during the build process using --env.prod. The webpack confi ...

Tips for maintaining position when refreshing a web page within a scrolling table

Recently, I came across a helpful tutorial on how to create a table with a fixed header and scrollable body. You can find it here. While the tutorial worked perfectly for me, I encountered an issue when trying to refresh the webpage and maintain my positio ...