TLDR; local DatGUI = require(game.ReplicatedStorage:WaitForChild("dat.GUI"))
local obj = {
Name = "Alex Rodin",
Num = 1,
Winner = true
}
local gui = DatGUI.new()
gui.add(obj, 'Name')
gui.add(obj, 'Num', 1, 50).step(1)
gui.add(obj, 'Winner') You can do the installation directly from Roblox Studio, through the Toolbox search for dat.GUI, this is the minified version of the engine (https://www.roblox.com/library/5802329341/dat-GUI). If you want to work with the original source code (for debugging or working on improvements), access the repository at https://github.com/nidorx/roblox-dat-gui Allows you to easily manipulate variables and fire functions on the fly, inspired by the venerable dat-gui. dat.GUI magically generates a graphical user interface (sliders, color selector, etc) for each of your variables. dat.gui's niche is in listening to and controlling data such that it can be visualized into charts or other graphics. Creating a new DAT.GUI instance provides a new sliding pane for which to add controls to: In your script, import the dat.GUI and instantiate it local DatGUI = require(game.ReplicatedStorage:WaitForChild("dat.GUI"))
-- Create an instance, which also creates a UI pane
local gui = DatGUI.new(); local color3Value = Instance.new('Color3Value') local Color3Object = { Color3 = Color3.fromRGB(255, 0, 255), Color3Value = color3Value } gui.add(Color3Object, 'Color3').listen().onChange(function(value) assert(Color3Object.Color3.R == value.R) assert(Color3Object.Color3.G == value.G) assert(Color3Object.Color3.B == value.B) end) gui.add(Color3Object, 'Color3Value').listen().onChange(function(value) assert(Color3Object.Color3Value.Value.R == value.R) assert(Color3Object.Color3Value.Value.G == value.G) assert(Color3Object.Color3Value.Value.B == value.B) end) Boolean, BoolValuelocal boolValue = Instance.new('BoolValue') local BooleansObject = { Bool = true, BoolValue = boolValue } gui.add(BooleansObject, 'Bool').listen().onChange(function(value) assert(BooleansObject.Bool == value) end) gui.add(BooleansObject, 'BoolValue').listen().onChange(function(value) assert(BooleansObject.BoolValue.Value == value) end) Number, NumberValue
local numberValue = Instance.new('NumberValue') local NumbersObject = { Number = 25, NumberSlider = 0.5, NumberDouble = 33, NumberValue = numberValue, NumberValueSlider = numberValue } gui.add(NumbersObject, 'Number').step(1).listen().onChange(function(value) assert(NumbersObject.Number == value) end) gui.add(NumbersObject, 'NumberSlider', 0, 1).listen().onChange(function(value) assert(NumbersObject.NumberSlider == value) end) gui.add(NumbersObject, 'NumberDouble').step(0.001).listen().onChange(function(value) assert(NumbersObject.NumberDouble == value) end) gui.add(NumbersObject, 'NumberValue').listen().onChange(function(value) assert(NumbersObject.NumberValue.Value == value) end) gui.add(NumbersObject, 'NumberValueSlider', 0, 100).listen().onChange(function(value) assert(NumbersObject.NumberValueSlider.Value == value) end) String, StringValue
local stringValue = Instance.new('StringValue') local StringsObject = { String = 'Lorem ipsum dolor', StringValue = stringValue, StringMultiline = 'Lorem ipsum dolor \nLorem ipsum dolor ' } gui.add(StringsObject, 'String').listen().onChange(function(value) assert(StringsObject.String == value) end) gui.add(StringsObject, 'StringValue').listen().onChange(function(value) assert(StringsObject.StringValue.Value == value) end) gui.add(StringsObject, 'StringMultiline', true).listen().onChange(function(value) assert(StringsObject.StringMultiline == value) end) Options = Enum, EnumItem, Array (Strings), Object (Key => Value string)local OptionsObject = { OptionsEnum = 2, OptionsEnumItem = Enum.ScaleType.Slice, OptionsArray = 1, OptionsObject = 'THREE', } gui.add(OptionsObject, 'OptionsEnum', Enum.ScaleType).listen().onChange(function(value, text) assert(OptionsObject.OptionsEnum == value) end) gui.add(OptionsObject, 'OptionsEnumItem').listen().onChange(function(value, text) assert(OptionsObject.OptionsEnumItem == value) end) gui.add(OptionsObject, 'OptionsArray', {'One', 'Two', 'Three'}).listen().onChange(function(value, text) assert(OptionsObject.OptionsArray == value) end) gui.add(OptionsObject, 'OptionsObject', { ONE = 'One', TWO = 'Two', THREE = 'Three' }).listen().onChange(function(value, text) assert(OptionsObject.OptionsObject == value) end) Vector3, Vector3Value
local vector3Value = Instance.new('Vector3Value') local Vector3Object = { Vector3 = Vector3.new(10, 11, 12), Vector3Slider = Vector3.new(10, 11, 12), Vector3Value = vector3Value } gui.add(Vector3Object, 'Vector3').step(1).listen().onChange(function(value) assert(Vector3Object.Vector3:FuzzyEq(value)) end) gui.add(Vector3Object, 'Vector3Slider', 0, 100).listen().onChange(function(value) assert(Vector3Object.Vector3Slider:FuzzyEq(value)) end) gui.add(Vector3Object, 'Vector3Value', 0, 100).listen().onChange(function(value) assert(Vector3Object.Vector3Value.Value:FuzzyEq(value)) end) Function, removeChild and changeNamelocal toggleVec3Controller local Vector3Object = { ToggleVector3Slider = function() if vec3Controller ~= nil then guiVector3.removeChild(vec3Controller) vec3Controller = nil toggleVec3Controller.name('AddVector3Slider') else vec3Controller = guiVector3.add(Vector3Object, 'Vector3Slider', 0, 100).listen().onChange(function(value) assert(Vector3Object.Vector3Slider:FuzzyEq(value)) end) toggleVec3Controller.name('RemoveVector3Slider') end end } toggleVec3Controller = gui.add(Vector3Object, 'ToggleVector3Slider') More...
APIFolder (GUI)
Controller
LibDat.GUI exposes the various components used internally. For usage details see source code DatGUI.Lib = { Panel = Panel, Popover = Popover, Scrollbar = Scrollbar, GUIUtils = GUIUtils, GuiEvents = GuiEvents, Constants = Constants } DatGUI.Lib.Panel The basic structure of the GUI. Can be used to create custom dashboards outside of the DAT.GUI framework
DatGUI.Lib.Popover Popover is a tooltip-like component that allows displaying content above other screen elements. Internally used in ColorController and OptionController. There are 4 popover placement options ("left"|"top"|"bottom"|"right")
DatGUI.Lib.GuiEvents Utility methods to facilitate interaction with interface events on elements
DatGUI.Lib.Scrollbar DatGUI.Lib.GUIUtils DatGUI.Lib.Constants Building your own dat.GUITo edit
To buildIn the terminal, enter the following: npm install npm run build Feedback, Requests and RoadmapPlease use GitHub issues for feedback, questions or comments. If you have specific feature requests or would like to vote on what others are recommending, please go to the GitHub issues section as well. I would love to see what you are thinking. ContributingYou can contribute in many ways to this project. Translating and documentingI'm not a native speaker of the English language, so you may have noticed a lot of grammar errors in this documentation. You can FORK this project and suggest improvements to this document (https://github.com/nidorx/roblox-dat-gui/edit/master/README.md). If you find it more convenient, report a issue with the details on GitHub issues. Reporting IssuesIf you have encountered a problem with this component please file a defect on GitHub issues. Describe as much detail as possible to get the problem reproduced and eventually corrected. Fixing defects and adding improvementsLicenseThis code is distributed under the terms and conditions of the MIT license. Developed on JetBrains Intellij Page 2TLDR; local DatGUI = require(game.ReplicatedStorage:WaitForChild("dat.GUI"))
local obj = {
Name = "Alex Rodin",
Num = 1,
Winner = true
}
local gui = DatGUI.new()
gui.add(obj, 'Name')
gui.add(obj, 'Num', 1, 50).step(1)
gui.add(obj, 'Winner') You can do the installation directly from Roblox Studio, through the Toolbox search for dat.GUI, this is the minified version of the engine (https://www.roblox.com/library/5802329341/dat-GUI). If you want to work with the original source code (for debugging or working on improvements), access the repository at https://github.com/nidorx/roblox-dat-gui Allows you to easily manipulate variables and fire functions on the fly, inspired by the venerable dat-gui. dat.GUI magically generates a graphical user interface (sliders, color selector, etc) for each of your variables. dat.gui's niche is in listening to and controlling data such that it can be visualized into charts or other graphics. Creating a new DAT.GUI instance provides a new sliding pane for which to add controls to: In your script, import the dat.GUI and instantiate it local DatGUI = require(game.ReplicatedStorage:WaitForChild("dat.GUI"))
-- Create an instance, which also creates a UI pane
local gui = DatGUI.new(); Color3, Color3Valuelocal color3Value = Instance.new('Color3Value') local Color3Object = { Color3 = Color3.fromRGB(255, 0, 255), Color3Value = color3Value } gui.add(Color3Object, 'Color3').listen().onChange(function(value) assert(Color3Object.Color3.R == value.R) assert(Color3Object.Color3.G == value.G) assert(Color3Object.Color3.B == value.B) end) gui.add(Color3Object, 'Color3Value').listen().onChange(function(value) assert(Color3Object.Color3Value.Value.R == value.R) assert(Color3Object.Color3Value.Value.G == value.G) assert(Color3Object.Color3Value.Value.B == value.B) end) Boolean, BoolValuelocal boolValue = Instance.new('BoolValue') local BooleansObject = { Bool = true, BoolValue = boolValue } gui.add(BooleansObject, 'Bool').listen().onChange(function(value) assert(BooleansObject.Bool == value) end) gui.add(BooleansObject, 'BoolValue').listen().onChange(function(value) assert(BooleansObject.BoolValue.Value == value) end) Number, NumberValue
local numberValue = Instance.new('NumberValue') local NumbersObject = { Number = 25, NumberSlider = 0.5, NumberDouble = 33, NumberValue = numberValue, NumberValueSlider = numberValue } gui.add(NumbersObject, 'Number').step(1).listen().onChange(function(value) assert(NumbersObject.Number == value) end) gui.add(NumbersObject, 'NumberSlider', 0, 1).listen().onChange(function(value) assert(NumbersObject.NumberSlider == value) end) gui.add(NumbersObject, 'NumberDouble').step(0.001).listen().onChange(function(value) assert(NumbersObject.NumberDouble == value) end) gui.add(NumbersObject, 'NumberValue').listen().onChange(function(value) assert(NumbersObject.NumberValue.Value == value) end) gui.add(NumbersObject, 'NumberValueSlider', 0, 100).listen().onChange(function(value) assert(NumbersObject.NumberValueSlider.Value == value) end) String, StringValue
local stringValue = Instance.new('StringValue') local StringsObject = { String = 'Lorem ipsum dolor', StringValue = stringValue, StringMultiline = 'Lorem ipsum dolor \nLorem ipsum dolor ' } gui.add(StringsObject, 'String').listen().onChange(function(value) assert(StringsObject.String == value) end) gui.add(StringsObject, 'StringValue').listen().onChange(function(value) assert(StringsObject.StringValue.Value == value) end) gui.add(StringsObject, 'StringMultiline', true).listen().onChange(function(value) assert(StringsObject.StringMultiline == value) end) Options = Enum, EnumItem, Array (Strings), Object (Key => Value string)local OptionsObject = { OptionsEnum = 2, OptionsEnumItem = Enum.ScaleType.Slice, OptionsArray = 1, OptionsObject = 'THREE', } gui.add(OptionsObject, 'OptionsEnum', Enum.ScaleType).listen().onChange(function(value, text) assert(OptionsObject.OptionsEnum == value) end) gui.add(OptionsObject, 'OptionsEnumItem').listen().onChange(function(value, text) assert(OptionsObject.OptionsEnumItem == value) end) gui.add(OptionsObject, 'OptionsArray', {'One', 'Two', 'Three'}).listen().onChange(function(value, text) assert(OptionsObject.OptionsArray == value) end) gui.add(OptionsObject, 'OptionsObject', { ONE = 'One', TWO = 'Two', THREE = 'Three' }).listen().onChange(function(value, text) assert(OptionsObject.OptionsObject == value) end) Vector3, Vector3Value
local vector3Value = Instance.new('Vector3Value') local Vector3Object = { Vector3 = Vector3.new(10, 11, 12), Vector3Slider = Vector3.new(10, 11, 12), Vector3Value = vector3Value } gui.add(Vector3Object, 'Vector3').step(1).listen().onChange(function(value) assert(Vector3Object.Vector3:FuzzyEq(value)) end) gui.add(Vector3Object, 'Vector3Slider', 0, 100).listen().onChange(function(value) assert(Vector3Object.Vector3Slider:FuzzyEq(value)) end) gui.add(Vector3Object, 'Vector3Value', 0, 100).listen().onChange(function(value) assert(Vector3Object.Vector3Value.Value:FuzzyEq(value)) end) Function, removeChild and changeNamelocal toggleVec3Controller local Vector3Object = { ToggleVector3Slider = function() if vec3Controller ~= nil then guiVector3.removeChild(vec3Controller) vec3Controller = nil toggleVec3Controller.name('AddVector3Slider') else vec3Controller = guiVector3.add(Vector3Object, 'Vector3Slider', 0, 100).listen().onChange(function(value) assert(Vector3Object.Vector3Slider:FuzzyEq(value)) end) toggleVec3Controller.name('RemoveVector3Slider') end end } toggleVec3Controller = gui.add(Vector3Object, 'ToggleVector3Slider') More...
APIFolder (GUI)
Controller
LibDat.GUI exposes the various components used internally. For usage details see source code DatGUI.Lib = { Panel = Panel, Popover = Popover, Scrollbar = Scrollbar, GUIUtils = GUIUtils, GuiEvents = GuiEvents, Constants = Constants } DatGUI.Lib.Panel The basic structure of the GUI. Can be used to create custom dashboards outside of the DAT.GUI framework
DatGUI.Lib.Popover Popover is a tooltip-like component that allows displaying content above other screen elements. Internally used in ColorController and OptionController. There are 4 popover placement options ("left"|"top"|"bottom"|"right")
DatGUI.Lib.GuiEvents Utility methods to facilitate interaction with interface events on elements
DatGUI.Lib.Scrollbar DatGUI.Lib.GUIUtils DatGUI.Lib.Constants Building your own dat.GUITo edit
To buildIn the terminal, enter the following: npm install npm run build Feedback, Requests and RoadmapPlease use GitHub issues for feedback, questions or comments. If you have specific feature requests or would like to vote on what others are recommending, please go to the GitHub issues section as well. I would love to see what you are thinking. ContributingYou can contribute in many ways to this project. Translating and documentingI'm not a native speaker of the English language, so you may have noticed a lot of grammar errors in this documentation. You can FORK this project and suggest improvements to this document (https://github.com/nidorx/roblox-dat-gui/edit/master/README.md). If you find it more convenient, report a issue with the details on GitHub issues. Reporting IssuesIf you have encountered a problem with this component please file a defect on GitHub issues. Describe as much detail as possible to get the problem reproduced and eventually corrected. Fixing defects and adding improvementsLicenseThis code is distributed under the terms and conditions of the MIT license. Developed on JetBrains Intellij |