Incorporate sliders into Dat.gui for every item within the array

Looking for assistance with adding sliders to a JavaScript object that contains various parameters.

var settings = {bgColor: 0x5886a0, 
  ambientColor:0xffffff,
  opacityCS:[ 1.0, 1.0, 1.0, 1.0, 1.0, 1.0], 
  whiteThreshold:[160,160,160,160,160,160] };

I need sliders for each element in the arrays opacityCs and whiteThreshold.

Adding sliders for other parameters is straightforward:

gui.addColor( settings, 'ambientColor' ).onChange( function(){/**/});

or

gui.add( settings, 'variable', -0.5, 0.5, 0.005  );

However, I'm having trouble figuring out how to add sliders for array elements. Can anyone offer guidance?

javascriptarraysjavascript-objectsdat.gui

Answer №1

It seems like there isn't a straightforward way to manipulate arrays directly. What I did was transform each array into an object with keys corresponding to the indices. You can give it a try using this approach:

const settings = {
  backgroundColor: 0x5886a0, 
  ambientColor: 0xffffff,
  opacityValues: [1.0, 1.0, 1.0, 1.0, 1.0, 1.0], 
  thresholdValues: [160, 160, 160, 160, 160, 160]
};
  
settings.opacityValues = Object.assign({}, settings.opacityValues);
settings.thresholdValues = Object.assign({}, settings.thresholdValues);

const interface = new dat.GUI();
interface.addColor(settings, 'backgroundColor');
interface.addColor(settings, 'ambientColor');
const opacityFolder = interface.addFolder("Opacity Values");
Object.keys(settings.opacityValues).forEach((key) => {
  opacityFolder.add(settings.opacityValues, key);
});
const thresholdFolder = interface.addFolder("Threshold Values");
Object.keys(settings.thresholdValues).forEach((key) => {
thresholdFolder.add(settings.thresholdValues, key);
})
 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

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

What is the reasoning behind assigning initial values to this function variable?

Upon logging arr early in this function, the displayed values are as follows. I initially anticipated it would display [[null,null],[null,null]]; however, it instead shows the value of arr once the function is completed. updateBounds() { let arr = [ ...

javascriptarraysreactjs

Halt scrolling news feed when hovering over with the mouse

I'm currently working on a news ticker on this jsfiddle, but it's not functioning as I'd like. Here are the issues I'm facing: When I increase the width and height of all the divs, it doesn't work properly as the last divs over ...

javascriptjquery

Spacing between posts using CSS and jQuery

Currently, my code is creating a random number of new articles within the body of my webpage. I have successfully implemented different colors for each article, but I am encountering an issue with padding. Being new to web development, I am attempting to s ...

javascriptjquerycsshtml

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

javascriptphpjqueryhtmlwordpress

Adding a newline character ( ) to each element in the array before converting

Why, when I use JSON.stringify, is appending to the value? Take a look at this example link: http://jsfiddle.net/7nketLmy/ var formData = new Array(); if ($(this).get(0).tagName.toUpperCase() === 'DIV' ){ content = $(this).html(); ...

javascriptjqueryhtmljsonstringify

JavaScript code to locate the most pertinent strings within an array based on a specific substring

I'm working with a large array containing names of people, such as: let names = [ "John Brown", "Tristan Black", "Carl Jobbs", "Aidan Burrows", "Taylor Joe" ]; When given an input, I want to return the top 5 most relevant results ...

javascriptarrayssearch

MongoDB Client > Error: No operations provided - cannot proceed

NPM Library: "mongodb": "3.1.4" Encountering an issue while attempting to bulk insert a list of data: Here is the code snippet: db.collection('products').insertManyAsync(products, {ordered: false}) The error message displayed: An Invalid O ...

javascriptmongodbnpm

Hiding javascript code within comment tags "<!-- //-->"

Years ago, I started a practice of enclosing all my JavaScript code in files with <!-- Code goes here //--> I'm not entirely sure why I did this. Maybe it was to hide the code from old browsers, is that right? Do I still need to do this? I ...

javascriptjquerytagscommentscdata

The Intl.NumberFormat function does not support conversion to the pt-BR (Brazilian Portuguese) locale

A code sample is provided below: const formCurrency = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 }) Assuming the input is: var money = 1000.50 formCurrency.fo ...

javascriptnode.js

How can I combine three dynamic dropdown menus into a single dynamic multi-level dropdown using PHP and Javascript?

Hello everyone, I've created a three-level dynamic dropdown menu that includes categories, subcategories, and questions. Each category has a corresponding subcategory, and each subcategory has corresponding questions. Below is the code for this functi ...

javascriptphpjqueryhtmlajax

Guide on displaying the AJAX response within an HTML or JSP element pulled from a database

description of image 1description of image 2How can I display an AJAX response from a database (map) on a JSP screen? I am able to retrieve the response in the browser console but unsure how to visually render it on the JSP page, like in a table or any ot ...

javascriptjavajqueryajaxjsp

Boost the elements' worth within an array

Assume I am working with an array shown below... let myArr = [0,0,2,0,0]; I am aiming to generate a ripple effect where the modified array becomes [0,1,2,1,0] ...

javascriptarrays

Adding more rows to the array and then inserting them into the database

Seeking some clarity and appreciation in advance for any assistance! I've organized an array of information within a table that I can edit and then sync with my database once updated. <input type='button' value='add row' id=&a ...

phpjavascriptjquerymysql

Adding hash history to a sortable showcase: A step-by-step guide

I am in the process of developing a filterable portfolio feature for my website. Once a user clicks on a filter, it adds a hashtag to the end of the URL. For example, clicking on 'design' would result in www.yourdomain.com/#design. I am wonderin ...

javascriptjqueryhtmlfiltering

Is there a way to determine if a user has already liked a post in order to prevent them from liking it again?

I am in the process of developing a website that allows users to create posts and like them. I have successfully incorporated a like button that tracks and stores the number of likes for each post in an array. However, I've encountered an issue where ...

javascriptnode.jsaxios

Why does the Roman to Integer conversion in JS only convert the first character?

Struggling with Leedcode question 13: Given a roman numeral, convert it to an integer. The input is guaranteed to be within the range from 1 to 3999. I've written some code below, but I'm puzzled as to why it only converts the first character in ...

javascriptintegerroman-numerals

What is the best way to incorporate a 'category filter' in Angular2?

Unique Scenario In my Angular2 application, I have implemented code in a component's view parent.component.html that iterates through an array of items and generates a new component for each item: <div class="list-items"> <!-- The colored ...

javascriptangularmasonryjquery-isotope

Using jQuery to Iterate Through an AJAX Response

I'm working on a tagger application. When a user submits a tag, ajax sends the following response: {"returnmessage":"The Ajax operation was successful.","tagsinserted":"BLAH, BLOOOW","returncode":"0"} My goal is to extract the tags inserted and dyna ...

javascriptjqueryajaxloops

Exploring the behavior of nested for loops in a shell script

There are two shell script arrays containing elements. The first array consists of two elements, which will also be present in the second array along with an additional element. The nested for loop is designed to eliminate matching strings from the second ...

arraysshelliterationnested-loopsunset

Before clicking the submit button, send field values using Ajax

Is it possible to send values using ajax before submitting form data with a submit button? I have the code below. It successfully reaches the success function, but I am unable to retrieve the posted data. Any ideas on how to solve this issue? Your help an ...

javascriptphpjqueryajaxforms