Как вызвать функцию с помощью DAT.Gui как кнопку?
Я едва знаю JavaScript, но знаю достаточно, чтобы знать, как создавать соединения функций, таймеры, редактировать CSS/HTML и многое другое, но я не понимаю, как использовать этот "dat.GUI" в качестве моего текущего дизайна проекта. .. ну .. Это отстой.
Все мои кнопки — это просто ссылки <a>, которые я использовал для создания минималистского дизайна. Просто взгляните на это: codepen.io.. Итак, я хотел перейти на Dat.GUI, но я не знаю, как сделать графический интерфейс, так как все уроки, которые я пробовал, обычно заканчивались невидимым графическим интерфейсом (он не даже появляются) и ничего не работает.
Итак, я пришел сюда, чтобы спросить, есть ли у кого-нибудь информация и, возможно, несколько примеров, на которых я могу работать? В моем проекте, который я разместил выше, я включил код, который я сделал до сих пор для части dat.gui, в самом низу JavaScript.
Для тех, кто собирается опубликовать ответ с включенным этим примером: хромэксперименты НЕТ. Я не ищу это снова и снова, я не могу понять, как это использовать, и это не объясняет это на том уровне детализации, который я могу понять (я не неумелый javascripter). Я также начал использовать этот пример на codepen для обучения: codepen.io
Количество кода, которое у меня есть в моем проекте, немного... Не подходит для использования/вставки сюда. Вот мой текущий код для запуска. Скажем, у меня есть function raintest() {
intervalID = window.setInterval(myCallback, 100);
}, который запускает интервал, который запускает myCallback каждые 100 миллисекунд, который нажимает кнопку на моем экране, что-то делает, это не так важно, но как мне запустить функцию raintest() с dat.gui и другими функциями?
Вот код dat.gui, который у меня есть, и я пытаюсь работать с ним. Пока все, что он делает, это показывает вкладку закрытия/открытия, и я не знаю, как добавить кнопки в список:
window.onload = function() {
var gui = new dat.GUI();
gui.add(text, 'message').onChange(setValue);
};
Текущие результаты пусты, я не знаю, как правильно подключить код JavaScript к dat.gui. В данный момент он просто загружает вкладку для базового графического интерфейса. Я на самом деле хочу, чтобы он мог открываться и иметь в нем все мои кнопки со всеми моими функциями, поэтому у меня есть доступные параметры настройки ткани, не заполняющие верхнюю часть экрана 24/7.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Запустите графический интерфейс с
window.onload = function() {
text = new sampleText();
setValue();
var gui = new dat.GUI();
sampleText представляет ваши точки доступа в графическом интерфейсе.
Name1 представляет собой название вашей кнопки/вкладки. Под var gui добавить gui.add(text, 'Name1'); Это представляет вашу первую кнопку.
Это даст вам доступ к функциям, если вы хотите прикрепить кнопку к функции, сначала напишите:
var sampleText = function() {
this.Name1 = DataType;
DataType (представляет собой тип значения) следует заменить на имя вашей функции, а в случае переключателя или оператора true/false вы должны написать там true или false. (С функциями Исключить закрывающие скобки, просто имя (function test1 () {} > this.Name1 = test1)
Если вы хотите создать радиокнопку, которая вызывает 2 разных кода переменных, сделайте следующее:
- добавить
this.NameOfButton = false;в конецvar sampleText затем добавьте
gui.add(text, 'NameOfButton').onChange(setValue);под var Gui и создайте новую функцию с именемфункция setValue () { если (текст.ИмяКнопки) { ПеременнаяИлиЧто-то = 1000; } еще { ПеременнаяИлиЧто-то = 0; } }
ELSE — это то, что вызывается, когда радиокнопка не отмечена (false), IF — это то, что вызывается, когда она отмечена (true).
КСТАТИ: Если вы настроите его неправильно или не подключите его функции/код к компонентам графического интерфейса, он может принудительно не работать. и обычно заканчивается тем, что графический интерфейс НЕ ПОЯВЛЯЕТСЯ. Поэтому я рекомендую размещать компоненты следующим образом: сначала поместите ваш тип данных var (var sampleText), затем ваш графический интерфейс (var gui), наконец, вашу функцию setValue. Также я рекомендую разместить все это в ОЧЕНЬ НИЗ вашего javascript :)