Dat.gui 使用教程

简介: Dat.gui 使用教程

Dat.gui 使用教程

官方站点:http://workshop.chromeexperiments.com/examples/gui/

Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo 提供参数的设置。并且很容易上手。是个不错的写例子或测试单元ui组件。

基础用法

引入js 文件

<script type="text/javascript" src="https://raw.github.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>

初始化配置

var Options = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.button = function() {};
};

window.onload = function() {
  var options = new Options();
  var gui = new dat.GUI();

  gui.add(options, 'message');
  gui.add(options, 'speed', -5, 5);
  gui.add(options, 'displayOutline');
  gui.add(options, 'button');
};

这里,在你的配置项:FizzyText 里,GUI 会根据你设置的属性类型来渲染不同的控件

如果是Number 类型则用 slider来控制
如果是 Boolean 类型,则用 Checkbox来控制

如果是 Function 类型则用 button 来控制
如果是 String 类型则用 input 来控制

控制输入限制

控制限制输入项输入类型以及值

gui.add(text, 'noiseStrength').step(5); // 增长的步长
gui.add(text, 'growthSpeed', -5, 5); // 最大、最小值
gui.add(text, 'maxSize').min(0).step(0.25); // 最大值和步长

// 文本输入项
gui.add(text, 'message', [ 'pizza', 'chrome', 'hooray' ] );

// 下拉框形式选择文案
gui.add(text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );

选项组

可以使用文件夹给选项分组

var gui = new dat.GUI();

var f1 = gui.addFolder('Flow Field');
f1.add(text, 'speed');
f1.add(text, 'noiseStrength');

var f2 = gui.addFolder('Letters');
f2.add(text, 'growthSpeed');
f2.add(text, 'maxSize');
f2.add(text, 'message');

f2.open();

颜色值的输入

提供4种类型颜色输入控制

CSS

RGB
RGBA
Hue

var Options = function() {
  this.color0 = "#ffae23"; // CSS string
  this.color1 = [ 0, 128, 255 ]; // RGB array
  this.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
  this.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
};

window.onload = function() {

  var options = new Options();
  var gui = new dat.GUI();

  gui.addColor(options, 'color0');
  gui.addColor(options, 'color1');
  gui.addColor(options, 'color2');
  gui.addColor(options, 'color3');
};

存储

可以使用 remember 方法开启 GUI 的存储模式,而且可以分组存储


var Options = function() {
  this.color0 = "#ffae23"; // CSS string
};

window.onload = function() {
  var options = new Options();
  var gui = new dat.GUI();

  gui.remember(options); 
  
  gui.addColor(options, 'color0');
};

当然你也可以把之前保存的数据在初始化时导入

var Options = function() {
  this.number = 1;
};

window.onload = function() {
  var options = new Options();
  var gui = new dat.GUI({
    load:{
      "preset": "kkkkk",
      "closed": false,
      "remembered": {
        "Default": {
          "0": {
            "number": 4
          }
        },
        "kkkkk": {
          "0": {
            "number": 6
          }
        }
      },
      "folders": {}
    }
  });

  gui.remember(options);
  gui.add(options, 'number').min(0).max(10).step(1);
};

可以通过 preset 配置项指定使用哪个分组的配置

事件

你可以为每一项设置一个监听事件 onChange 和 onFinishChange

var Options = function() {
  this.number = 1;
};

window.onload = function() {
  var options = new Options();
  var gui = new dat.GUI();
  var controller = gui.add(options, 'number').min(0).max(10).step(1);

  controller.onChange(function(value) {
    console.log("onChange:" + value)
  });

  controller.onFinishChange(function(value) {
    console.log("onFinishChange" + value)
  });
};

获取面板DOM对象

可以通过 gui.domElement 获取原生 dom 对象

从GUI外部控制配置项

如果你想从外部控制选项,你可以为选项调用 listen 方法,则你改变option时,也会同步到面板里

var Options = function() {
  this.number = 1;
};

window.onload = function() {
  var options = new Options();
  var gui = new dat.GUI();
  var controller = gui.add(options, 'number').min(0).max(10).step(1).listen();

  setInterval(function() {
    options.number = Math.random() * 10;
  }, 500)
};

目录
相关文章
|
2月前
|
机器学习/深度学习 算法 计算机视觉
Yolov5 + 界面PyQt5 +.exe文件部署运行
Yolov5 + 界面PyQt5 +.exe文件部署运行
179 2
|
2月前
|
存储 安全 数据挖掘
【工具】HxD Hex Editor 的安装、使用详细教程
【工具】HxD Hex Editor 的安装、使用详细教程
619 0
|
25天前
|
IDE 开发工具 数据安全/隐私保护
【干货】Qt Creator快速下载、安装、使用教程
【干货】Qt Creator快速下载、安装、使用教程
85 2
|
8月前
|
Python
如何快速打开python文件 GUI
如何快速打开python文件 GUI
43 0
|
10月前
|
XML 数据格式 Python
『PyQt5-基础篇』| 05 Qt Designer保存的.ui文件如何生成.py文件?
『PyQt5-基础篇』| 05 Qt Designer保存的.ui文件如何生成.py文件?
111 0
|
11月前
|
XML 数据管理 编译器
Qt+GDAL开发笔记(二):在windows系统msvc207x64编译GDAL库、搭建开发环境和基础Demo
上一篇使用mingw32版本的gdal,过程曲折,为更好的更方便搭建环境,在windows上msvc方式对于库比较友好。
|
12月前
|
XML 数据管理 Linux
Qt+GDAL开发笔记(一):在windows系统mingw32编译GDAL库、搭建开发环境和基础Demo
麒麟系统上做全球北斗定位终端开发,调试工具要做一个windows版本方便校对,北斗GPS发过来的是大地坐标,应用需要的是经纬度坐标,所以需要转换,可以使用公式转换,但是之前涉及到了另一个shang市公司项目使用WG,最终选择了GDAL库进行转换。
|
XML 编译器 数据库
QT --- VS嵌入QT开发环境搭建
QT --- VS嵌入QT开发环境搭建
151 0
|
存储 编解码 数据可视化
如何通过Python打开GSMap数据集(解决.dat无法打开的问题)?
如何通过Python打开GSMap数据集(解决.dat无法打开的问题)?
240 0
|
存储 IDE 开发工具
LVGL GUI GUIder使用教程
LVGL GUI GUIder使用教程