{"id":"tripptrapp84/studiowidgets","name":"studiowidgets","scope":"tripptrapp84","platform":"roblox","description":"Mirrored from the Wally registry.","version":"0.2.5","latest":"0.2.5","versions":["0.1.0","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5"],"license":"Apache-2.0","licenseRating":"safe","licenseCaveats":["Modified files must carry a notice of changes. If the package ships a NOTICE file, its attributions must be preserved.","License identified from the packaged LICENSE file; the manifest declared none."],"licenseVerified":true,"dependencies":{},"integrity":"b2242548b89225893921afa3c8e401c60a9b18b6c52132784a309c2b3344be39","likes":0,"downloads":0,"install":"forest install tripptrapp84/studiowidgets","url":"https://forest.dev/p/roblox/tripptrapp84/studiowidgets","files":"https://api.forest.dev/ai/package/roblox/tripptrapp84/studiowidgets/files","readme":"Studio Widgets
\n\n\n\tA set of GUI elements to use in Roblox Plugins hosted in PluginGUIs. Widgets have a standard \"Studio\" look & feel.\n
\n\n
\n\n## Overview\nThis repo is likely the most up to date and maintained version of the StudioWidgets repo on github, and for now it's my hope to keep it that way. I will do my best to add and implement new and creative functionality to this library for myself and others to use in plugins.\n\n## Contributions\nContributions will fall under heavy scrutiny, but everyone is welcome to submit a pull request at any time.\n\n## Coding Conventions\nNo longer applicable.\n\n## Using the library\nSince this fork of the library uses plugin functionality, I have changed the way you use and load the library. In order to use the library from now on, load it first using the code below in your main script (so that it has access to the plugin object):\n```Lua\nlocal Widgets = require(StudioWidgetsFolder.Require)(plugin)\n```\nAfter the first time you load the library, subsequent requires can forgo the plugin object, like so:\n```Lua\nlocal Widgets = require(StudioWidgetsFolder.Require)()\n```\nNotice how it's the same code just without the plugin object.\n\nfrom here you simply index into the `Widgets` variable with the name of the class you'd like to create:\n```Lua\nlocal SomeTitleSection = Widgets.CollapsibleTitledSection.new() --Ignore the missing arguments\n```\n\n### Files\n\n* [CollapsibleTitledSection.lua](#collapsibletitledsectionlua)\n* [CustomTextButton.lua](#customtextbuttonlua)\n* [DropdownMenu.lua](#dropdownmenulua)\n* [GuiUtilities.lua](#customtextbuttonlua)\n* [ImageButtonWithText.lua](#imagebuttonwithtextlua)\n* [LabeledCheckbox.lua](#labeledcheckboxlua)\n* [LabeledMultiChoice.lua](#labeledmultichoicelua)\n* [LabeledSlider.lua](#labeledsliderlua)\n* [LabeledTextInput.lua](#labeledtextinputlua)\n* [RbxGui.lua](#rbxguilua)\n* [StatefulImageButton.lua](#statefulimagebuttonlua)\n* [VerticallyScalingListFrame.lua](#verticallyscalinglistframelua)\n* [VerticalScrollingFrame.lua](#verticalscrollingframelua)\n\n#### CollapsibleTitledSection.lua\nA \"Section\" containing one or more widgets, with titlebar. Title bar includes rotating arrow widget which can be used to collapse/expand the section.\n\n\n\n```Lua\nlocal collapse = CollapsibleTitledSection.new(\n\t\"suffix\", -- name suffix of the gui object\n\t\"titleText\", -- the text displayed beside the collapsible arrow\n\ttrue, -- have the content frame auto-update its size?\n\ttrue, -- minimizable?\n\tfalse -- minimized by default?\n)\n\n-- put things we want to be \"collapsed\" under the frame returned by the :GetContentsFrame() method\nlocal label = Instance.new(\"TextLabel\")\nlabel.Text = \"Peekaboo!\"\nlabel.Size = UDim2.new(0, 60, 0, 20)\nlabel.BackgroundTransparency = 1\nlabel.BorderSizePixel = 0\nlabel.Parent = collapse:GetContentsFrame()\n\n-- set the parent of the collapse object by setting the parent of the frame returned by the :GetSectionFrame() method\ncollapse:GetSectionFrame().Parent = widgetGui\n```\n\n#### CustomTextButton.lua\nA text button contained in an image (rounded rect). Button and frame highlight appropriately on hover and click.\n\n\n\n```Lua\nlocal button = CustomTextButton.new(\n\t\"button\", -- name of the gui object\n\t\"labelText\" -- the text displayed on the button\n)\n\n-- use the :getButton() method to return the ImageButton gui object\nlocal buttonObject = button:GetButton()\nbuttonObject.Size = UDim2.new(0, 70, 0, 25)\n\nbuttonObject.MouseButton1Click:Connect(function()\n\tprint(\"I was clicked!\")\nend)\n\nbuttonObject.Parent = widgetGui\n```\n\n#### DropdownMenu.lua\nA multi-choice menu containing an arbitrary number of buttons or \"choices\". Main button highlights appropriately on hover and click.\n\n\n```lua\n-- selections require 3 inputs: display text, value to return, and a unique identifier.\n-- display text and id must both be strings.\n-- id must be unique, or a warning will be thrown, and that selection will not be added.\n-- return value may be any value such as an int, number, string, bool, table, etc. \nlocal selectionTable = {\n-- {\"display text\", \"return value\", \"id\"}\n\t{\"option 0\", 0, \"0\"},\n\t{\"option 1\", 1, \"1\"},\n\t{\"option 2\", 2, \"2\"},\n}\n\nlocal dropdown = DropdownMenu.new(\n\t\"suffix\", -- name suffix of gui object\n\t\"Label text\", -- displayed label text\n\tselectionTable -- table of selection data, optional\n)\n\n-- add selections after creation\nlocal newSelection = {\"option 3\", 3, \"3\"}\ndropdown:AddSelection(newSelection)\n\n-- remove selection with the given id\ndropdown:RemoveSelection(\"0\")\n\n-- add selections from a table\nlocal moreSelections = {\n\t{\"option 4\", 4, \"4\"},\n\t{\"option 5\", 5, \"5\"},\n--\t...\n\t{\"option infinity\", \"yay\", \"inf\"}\n}\ndropdown:AddSelectionsFromTable(moreSelections)\n\n-- change the label text\ndropdown:ChangeLabel(\"New label text\")\n\n-- reset the selected choice\ndropdown:ResetChoice()\n\n-- get the selected choice\nprint(dropdown:GetChoice())\n\ndropdown:GetSectionFrame().Parent = widgetGui\n```\n\n#### GuiUtilities.lua\nGrab bag of functions and definitions used by the rest of the code: colors, spacing, etc.\n\n#### ImageButtonWithText.lua\nA button comprising an image above text. Button highlights appropriately on hover and click.\n\n\n```Lua\nlocal button = ImageButtonWithText.new(\n\t\"imgButton\", -- name of the gui object\n\t1, -- sets the sorting order for use with a UIGridStyleLayout object\n\t\"rbxassetid://924320031\", -- the asset id of the image\n\t\"text\", -- button text \n\tUDim2.new(0, 100, 0, 100), -- button size\n\tUDim2.new(0, 70, 0, 70), -- image size\n\tUDim2.new(0, 15, 0, 15), -- image position\n\tUDim2.new(0, 60, 0, 20), -- text size\n\tUDim2.new(0, 20, 0, 80) -- text position\n)\n\n-- use the :getButton() method to return an ImageButton gui object\nlocal buttonObject = button:getButton()\n\nbuttonObject.MouseButton1Click:Connect(function()\n\t-- use the :setSelected() method to highlight the button\n\t-- use the :getSelected() method to return a boolean that defines if the button is selected or not\n\tbutton:setSelected(not button:getSelected())\nend)\n\nbuttonObject.Parent = widgetGui\n```\n\n#### LabeledCheckbox.lua\nA widget comprising a text label and a checkbox. Can be configured in normal or \"small\" sizing. Layout and spacing change depending on size. \n\n\n\n```Lua\nlocal checkbox = LabeledCheckbox.new(\n\t\"suffix\", -- name suffix of gui object\n\t\"labelText\", -- text beside the checkbox\n\tfalse, -- initial value\n\tfalse -- initially disabled?\n)\n\n-- get/set current value of the checkbox\ncheckbox:SetValue(true)\nprint(checkbox:GetValue())\n\n-- disables and forces a checkbox value\ncheckbox:DisableWithOverrideValue(false)\nif (checkbox:GetDisabled()) then\n\tcheckbox:SetDisabled(false)\nend\n\n-- return the label or button frames\nprint(checkbox:GetLabel())\nprint(checkbox:GetButton())\n\n-- fire function when checkbox value changes\ncheckbox:SetValueChangedFunction(function(newValue)\n\tprint(newValue);\nend)\n\n-- use :GetFrame() to set the parent of the LabeledCheckbox\ncheckbox:GetFrame().Parent = widgetGui\n```\n\n#### LabeledMultiChoice.lua\nA widget comprising a top-level label and a family of radio buttons. Exactly one radio button is always selected. Buttons are in a grid layout and will adjust to flood-fill parent. Height updates based on content.\n\n\n\n```Lua\n-- each choice must have an Id and Text\nlocal choices = {\n\t{Id = \"choice1\", Text = \"a\"},\n\t{Id = \"choice2\", Text = \"b\"},\n\t{Id = \"choice3\", Text = \"c\"}\n}\n\nlocal multiChoice = LabeledMultiChoice.new(\n\t\"suffix\", -- name suffix of gui object\n\t\"labelText\", -- title text of the multi choice\n\tchoices, -- choices array\n\t1 -- the starting index of the selection (in this case choice 1)\n)\n\n-- get/set selection index\nmultiChoice:SetSelectedIndex(3) \nprint(multiChoice:GetSelectedIndex())\n\n-- fire function when index value changes\nmultiChoice:SetValueChangedFunction(function(newIndex)\n\tprint(choices[newIndex].Id, choices[newIndex].Text)\nend)\n\n-- use :GetFrame() to set the parent of the LabeledMultiChoice\nmultiChoice:GetFrame().Parent = widgetGui\n```\n\n#### LabeledSlider.lua\nA widget comprising a label and a slider control.\n\n\n\n```Lua\n-- note: the slider is clamped between [0, intervals]\nlocal slider = LabeledSlider.new(\n\t\"suffix\", -- name suffix of gui object\n\t\"labelText\", -- title text of the multi choice\n\t100, -- how many intervals to split the slider into\n\t50 -- the starting value of the slider\n)\n\n-- get/set values\nslider:SetValue(0)\nprint(slider:GetValue())\n\n-- fire function when slider value changes\nslider:SetValueChangedFunction(function(newValue)\n\tprint(newValue)\nend)\n\n-- use :GetFrame() to set the parent of the LabeledSlider\nslider:GetFrame().Parent = widgetGui\n```\n\n#### LabeledTextInput.lua\nA widget comprising a label and text edit control.\n\n\n\n```Lua\nlocal input = LabeledTextInput.new(\n\t\"suffix\", -- name suffix of gui object\n\t\"labelText\", -- title text of the multi choice\n\t\"Hello world!\" -- default value\n)\n\n-- set/get graphemes which is essentially text character limit but grapemes measure things like emojis too\ninput:SetMaxGraphemes(20)\ninput:GetMaxGraphemes()\n\n-- set/get values methods\ninput:SetValue(\"Hello world again...\")\nprint(input:GetValue())\n\n-- fire function when input value changes\ninput:SetValueChangedFunction(function(newValue)\n\tprint(newValue)\nend)\n\n-- use :GetFrame() to set the parent of the LabeledTextInput\ninput:GetFrame().Parent = widgetGui\n```\n\n#### RbxGui.lua\nHelper functions to support the slider control.\n\n#### StatefulImageButton.lua\nAn image button with \"on\" and \"off\" states.\n\n\n\n```Lua\nlocal button = StatefulImageButton.new(\n\t\"imgButton\", -- name of the gui object\n\t\"rbxassetid://924320031\", -- image asset id\n\tUDim2.new(0, 100, 0, 100) -- size of the button\n)\n\n-- set if the StatefulImageButton is selected or not\nlocal selected = false\nbutton:setSelected(selected)\n\n-- use the :getButton() method to return the ImageButton gui object\nlocal buttonObject = button:getButton()\nbuttonObject.MouseButton1Click:Connect(function()\n\tselected = not selected\n\tbutton:setSelected(selected)\nend)\nbuttonObject.Parent = widgetGui\n```\n\n#### VerticallyScalingListFrame.lua\nA frame that contains a list of sub-widgets. Will grow to accomodate size of children.\n\n```Lua\nlocal listFrame = VerticallyScalingListFrame.new(\n\t\"suffix\" -- name suffix of gui object\n)\n\nlocal label = Instance.new(\"TextLabel\")\nlabel.Text = \"labelText\"\nlabel.Size = UDim2.new(0, 60, 0, 20)\nlabel.BackgroundTransparency = 1\nlabel.BorderSizePixel = 0\nlocal label2 = label:Clone()\nlocal label3 = label:Clone()\n\n-- fire function when the listFrame resizes\nlistFrame:SetCallbackOnResize(function()\n\tprint(\"Frame was resized!\")\nend)\n\n-- add a gui element to the VerticallyScalingListFrame\nlistFrame:AddChild(label)\nlistFrame:AddChild(label2)\nlistFrame:AddChild(label3)\n\n-- add padding to the VerticallyScalingListFrame\nlistFrame:AddBottomPadding()\n\n-- use :GetFrame() to set the parent of the VerticallyScalingListFrame\nlistFrame:GetFrame().Parent = widgetGui\n```\n\n#### VerticalScrollingFrame.lua\nA frame that holds sub-widgets and gives the user the ability to scroll through them over a fixed space.\n\n\n\n```Lua\nlocal choices = {\n\t{Id = \"choice1\", Text = \"a\"},\n\t{Id = \"choice2\", Text = \"b\"},\n\t{Id = \"choice3\", Text = \"c\"}\n}\n\nlocal scrollFrame = ScrollingFrame.new(\"suffix\")\n\nlocal listFrame = VerticallyScalingListFrame.new(\"suffix\")\nlocal collapse = CollapsibleTitledSection.new(\"suffix\", \"titleText\", true, true, true)\nlocal multiChoice = LabeledMultiChoice.new(\"suffix\", \"labelText\", choices, 1)\nlocal multiChoice2 = LabeledMultiChoice.new(\"suffix\", \"labelText\", choices, 2)\n\nmultiChoice:GetFrame().Parent = collapse:GetContentsFrame()\nmultiChoice2:GetFrame().Parent = collapse:GetContentsFrame()\nlistFrame:AddChild(collapse:GetSectionFrame()) -- add child to expanding VerticallyScalingListFrame\n\nlocal collapse = CollapsibleTitledSection.new(\"suffix\", \"titleText\", true, false, false)\nlocal multiChoice = LabeledMultiChoice.new(\"suffix\", \"labelText\", choices, 1)\nlocal multiChoice2 = LabeledMultiChoice.new(\"suffix\", \"labelText\", choices, 2)\n\nmultiChoice:GetFrame().Parent = collapse:GetContentsFrame()\nmultiChoice2:GetFrame().Parent = collapse:GetContentsFrame()\nlistFrame:AddChild(collapse:GetSectionFrame()) -- add child to expanding VerticallyScalingListFrame\n\nlistFrame:AddBottomPadding() -- add padding to VerticallyScalingListFrame\n\nlistFrame:GetFrame().Parent = scrollFrame:GetContentFrame() -- scroll content will be the VerticallyScalingListFrame\nscrollFrame:GetSectionFrame().Parent = widgetGui -- set the section parent\n```\n\n### Bringing the project into studio\nThe easiest way to bring the project into studio is to use the [HttpService](https://www.robloxdev.com/api-reference/class/HttpService) to pull the contents directly from this github project into module scripts. After enabling the http service from `Game Settings` the following code can be run in the command bar.\n\n```Lua\nlocal HTTPService = game:GetService(\"HttpService\")\nlocal SourceRequest = HTTPService:GetAsync(\"https://api.github.com/repos/TrippTrapp84/StudioWidgets/contents/src\")\nlocal SourceFiles = HTTPService:JSONDecode(SourceRequest)\n\nlocal WidgetFolder = Instance.new(\"Folder\")\nWidgetFolder.Name = \"StudioWidgets\"\nWidgetFolder.Parent = game.ReplicatedStorage\n\nlocal RequireModule = Instance.new(\"ModuleScript\")\nRequireModule.Name = \"Require\"\nlocal RequireInd = 0\nfor i,v in pairs(SourceFiles) do\n\tif v.name == \"Require.lua\" then\n\t\tRequireInd = i\n\t\tbreak\n\tend\nend\nRequireModule.Source = HTTPService:GetAsync(SourceFiles[RequireInd].download_url)\nRequireModule.Parent = WidgetFolder\n\nlocal WidgetLibraryFolder = Instance.new(\"Folder\")\nWidgetLibraryFolder.Name = \"WidgetLibrary\"\nWidgetLibraryFolder.Parent = WidgetFolder\n\nlocal WidgetLibraryRequest = HTTPService:GetAsync(\"https://api.github.com/repos/TrippTrapp84/StudioWidgets/contents/src/WidgetLibrary\")\nlocal WidgetLibraryFiles = HTTPService:JSONDecode(WidgetLibraryRequest)\n\nfor i = 1, #WidgetLibraryFiles do\n\tlocal File = WidgetLibraryFiles[i]\n\tif (File.type == \"file\") then\n\t\tlocal Name = File.name:sub(1, File.name:len()-4)\n\t\tlocal Module = WidgetLibraryFolder:FindFirstChild(Name) or Instance.new(\"ModuleScript\")\n\t\tModule.Name = Name\n\t\tModule.Source = HTTPService:GetAsync(File.download_url)\n\t\tModule.Parent = WidgetLibraryFolder\n\tend\nend\n```\nAlternatively, if you are working with Rojo or some external IDE, a bat file is included for building a stripped studio or \nRojo ready folder with the widget library inside.\n\n## License\nAvailable under the Apache 2.0 license. See [LICENSE](LICENSE) for details.\n","readmeTruncated":false}