Obsidian

https://docs.mspaint.cc/obsidian
Admin
Obsidian is a clean and simple Roblox UI Library designed for the mspaint script hub, offering...
Tokens:30,264
Snippets:325
Trust Score:3.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### Full Slider Example with Callback

Source: https://docs.mspaint.cc/obsidian/elements/sliders

An example demonstrating the complete setup of a Slider with a Suffix and an OnChanged callback. This code snippet shows how to initialize a slider with specific properties and then attach a function that executes whenever the slider's value changes, printing the new value to the console.

```lua
local Options = Library.Options

Groupbox:AddSlider("Sensitivity", {
    Text = "Sensitivity",
    Default = 50,
    Min = 0,
    Max = 100,
    Rounding = 0,
    Suffix = "%",
})

Options.Sensitivity:OnChanged(function(value)
    print("Slider changed to", value)
end)
```

--------------------------------

### Dropdown Example: Initialization and Event Handling

Source: https://docs.mspaint.cc/obsidian/elements/dropdowns

A complete example showing the initialization of a Dropdown with specific options and how to handle the selection change event using the OnChanged callback. It also demonstrates setting an initial value.

```lua
local Options = Library.Options

local Dropdown = Groupbox:AddDropdown("MyDropdown", {
    Text = "A dropdown",
    Values = { "This", "is", "a", "dropdown" },
    Default = 1,
})

Options.MyDropdown:OnChanged(function()
    print("Selected value:", Options.MyDropdown.Value)
end)

Options.MyDropdown:SetValue("This")
```

--------------------------------

### Complete Keybind Usage Example (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

A comprehensive example illustrating the integration of a keybind with a toggle. It shows how to initialize the keybind, set up click and change event handlers, and access keybind state and modifiers.

```Lua
local Options = Library.Options
 
local Toggle = Groupbox:AddToggle("AutoFarm", {
    Text = "Enable Auto Farm",
    Default = false,
})
 
local Keybind = Toggle:AddKeyPicker("AutoFarmKey", {
    Default = "F",
    Text = "Auto Farm Key",
    Mode = "Toggle",
})
 
Options.AutoFarmKey:OnClick(function()
    print("Keybind clicked:", Options.AutoFarmKey:GetState())
end)
 
Options.AutoFarmKey:OnChanged(function()
    print("Key changed to:", table.unpack(Options.AutoFarmKey.Modifiers or {}), Options.AutoFarmKey.Value)
end)
```

--------------------------------

### Obsidian Checkbox Example: Simple and Advanced Usage

Source: https://docs.mspaint.cc/obsidian/elements/checkboxes

Provides examples of setting up a checkbox and handling its state changes. The advanced example shows how to access the toggle's state and print it when changed.

```lua
local Options = Library.Options
local Toggles = Library.Toggles
 
-- Setup UI elements first
local MyToggle = Groupbox:AddCheckbox("MyToggle", {
    Text = "Enable Speed Hack",
    Default = true,
})
 
-- Then after creating all UI elements, add callbacks
-- MyToggle:OnChanged(...) also works
Toggles.MyToggle:OnChanged(function(state)
    print("Toggle state changed to " .. tostring(state))
end)
```

--------------------------------

### Full Color Picker Example with Event Handling (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/colorpickers

A comprehensive example illustrating the creation of a Color Picker attached to a toggle, setting its initial properties, and handling the 'OnChanged' event to print color and transparency updates. It also shows how to programmatically set the color using SetValueRGB.

```lua
local Options = Library.Options
 
local Toggle = Groupbox:AddToggle("MyToggle", {
    Text = "This is a toggle",
    Default = true,
})
 
local ColorPicker = Toggle:AddColorPicker("ColorPicker1", {
    Default = Color3.new(1, 0, 0),
    Title = "Some color",
    Transparency = 0,
})
 
Options.ColorPicker1:OnChanged(function()
    print("Color changed!", Options.ColorPicker1.Value)
    if Options.ColorPicker1.Transparency then
        print("Transparency changed!", Options.ColorPicker1.Transparency)
    end
end)
 
Options.ColorPicker1:SetValueRGB(Color3.fromRGB(0, 255, 140))
```

--------------------------------

### Start Video Playback (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/videos

A convenience method to start video playback.

```lua
Video:Play()
```

--------------------------------

### Complete UI Passthrough Example

Source: https://docs.mspaint.cc/obsidian/elements/ui-passthrough

Demonstrates the creation and manipulation of a UI passthrough element. It shows how to add a passthrough, set its initial properties, and then update its visibility, instance, and height.

```Lua
local Passthrough = Groupbox:AddUIPassthrough("CustomUI", {
    Instance = CustomViewport,
    Height = 180,
})

Passthrough:SetVisible(true)
Passthrough:SetInstance(AnotherFrame)
Passthrough:SetHeight(220)
```

--------------------------------

### Quick Start: Initialize and Apply ThemeManager in Obsidian

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

This snippet demonstrates how to initialize the ThemeManager addon, register a UI library, and apply it to a tab for user customization. It also shows how to load the default theme.

```lua
local repo = "https://raw.githubusercontent.com/deividcomsono/Obsidian/main/"
local Library = loadstring(game:HttpGet(repo .. "Library.lua"))()
local ThemeManager = loadstring(game:HttpGet(repo .. "addons/ThemeManager.lua"))()

-- register the library so ThemeManager can manipulate controls
ThemeManager:SetLibrary(Library)

-- optional: keep themes inside a custom folder
ThemeManager:SetFolder("MyScriptHub")

local Tab = Window:AddTab("UI Settings", "settings")

-- automatically creates the color pickers, theme lists and buttons
ThemeManager:ApplyToTab(Tab)

-- apply whatever theme is flagged as default (built-in or custom)
ThemeManager:LoadDefault()
```

--------------------------------

### Setup Lucide Icons with Obsidian Library in Roblox Studio

Source: https://docs.mspaint.cc/obsidian/installation/roblox-studio

This code demonstrates how to set up Lucide icon support within the Obsidian library. It requires both the Obsidian library and the Lucide icon registry, then registers the icon module with the library before creating any UI elements.

```lua
local Library = require(game:GetService("ReplicatedStorage"):WaitForChild("Obsidian"))
local Icons = require(game:GetService("ReplicatedStorage"):WaitForChild("Lucide"))

-- Set Library Icon Module
Library:SetIconModule(Icons)
```

--------------------------------

### Example: Dynamic Draggable Label (FPS/Ping)

Source: https://docs.mspaint.cc/obsidian/core/library

Demonstrates how to create and update a draggable label dynamically to display real-time FPS and network ping. It utilizes the RunService.RenderStepped event for continuous updates.

```lua
-- Sets the draggable label visibility
local DraggableLabel = Library:AddDraggableLabel("Obsidian demo")
DraggableLabel:SetVisible(true)

-- Example of dynamically-updating draggable label with common traits (fps and ping)
local FrameTimer = tick()
local FrameCounter = 0;
local FPS = 60;

local WatermarkConnection = game:GetService('RunService').RenderStepped:Connect(function()
    FrameCounter += 1;

    if (tick() - FrameTimer) >= 1 then
        FPS = FrameCounter;
        FrameTimer = tick();
        FrameCounter = 0;
    end;

    DraggableLabel:SetText(('Obsidian demo | %s fps | %s ms'):format(
        math.floor(FPS),
        math.floor(game:GetService('Stats').Network.ServerStatsItem['Data Ping']:GetValue())
    ));
end);
```

--------------------------------

### Install Obsidian UI with shadcn/ui CLI

Source: https://docs.mspaint.cc/obsidian/installation/next

Automates the installation of Obsidian UI components into your Next.js project using the shadcn/ui command-line interface. This command fetches and integrates the necessary components and configurations.

```bash
pnpm dlx shadcn@latest add "https://www.mspaint.cc/r/obsidian"
```

--------------------------------

### ThemeManager:ApplyToGroupbox

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Installs the ThemeManager UI into an existing groupbox.

```APIDOC
## ThemeManager:ApplyToGroupbox

### Description
Installs the ThemeManager UI into an existing groupbox.

### Method
`ThemeManager:ApplyToGroupbox(groupbox)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```lua
ThemeManager:ApplyToGroupbox(groupbox)
```

### Response
#### Success Response (200)
This method does not return a value, but modifies the provided groupbox by installing the ThemeManager UI.

#### Response Example
None
```

--------------------------------

### Advanced Toggle Usage with Callback (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/toggles

Provides a comprehensive Lua example of setting up a toggle and attaching an OnChanged callback to handle state changes. It shows how to access the toggle's state within the callback.

```lua
local Options = Library.Options
local Toggles = Library.Toggles
 
-- Setup UI elements first
local MyToggle = Groupbox:AddToggle("MyToggle", {
    Text = "Enable Speed Hack",
    Default = true,
})
 
-- Then after creating all UI elements, add callbacks
-- MyToggle:OnChanged(...) also works
Toggles.MyToggle:OnChanged(function(state)
    print("Toggle state changed to " .. tostring(state))
end)
```

--------------------------------

### ThemeManager:ApplyToTab

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Creates a groupbox within the specified tab and installs the ThemeManager UI into it.

```APIDOC
## ThemeManager:ApplyToTab

### Description
Creates a groupbox within the tab and installs the ThemeManager UI into it.

### Method
`ThemeManager:ApplyToTab(tab)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```lua
ThemeManager:ApplyToTab(tab)
```

### Response
#### Success Response (200)
This method does not return a value, but modifies the provided tab by adding a groupbox with the ThemeManager UI.

#### Response Example
None
```

--------------------------------

### Initialize and Configure SaveManager Addon

Source: https://docs.mspaint.cc/obsidian/core/addons/savemanager

This snippet demonstrates the initial setup and configuration of the SaveManager addon. It involves loading the necessary libraries, setting up UI tabs, defining ignore lists, mapping folder structures, and initializing the autoload configuration.

```lua
local repo = "https://raw.githubusercontent.com/deividcomsono/Obsidian/main/"
local Library = loadstring(game:HttpGet(repo .. "Library.lua"))()
local SaveManager = loadstring(game:HttpGet(repo .. "addons/SaveManager.lua"))()

local Tabs = {
	Main = Window:AddTab("Main", "user"),
	["UI Settings"] = Window:AddTab("UI Settings", "settings"),
}

-- Set the library
SaveManager:SetLibrary(Library)

-- Don't save theme settings in configuration
SaveManager:IgnoreThemeSettings()

-- Manual Ignore List (will ignore all Toggles/Options with the indexes provided)
-- Here we are ignoring the menu keybind
SaveManager:SetIgnoreIndexes({ "MenuKeybind" })

-- Map out folder structure
SaveManager:SetFolder("MyScriptHub/specific-game")
SaveManager:SetSubFolder("Lobby") -- if the game has multiple places inside of it (for example: DOORS)
-- you can use this to save configs for those places separately
-- The path in this script would be: MyScriptHub/specific-game/settings/specific-place
-- [ This is optional ]

-- Builds our config menu on the right side of our tab
SaveManager:BuildConfigSection(Tabs["UI Settings"])

-- Load the autoload config
SaveManager:LoadAutoloadConfig()
```

--------------------------------

### Configure and Manipulate Image (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/images

Provides an example of creating an Image with various configuration options and then using its methods to dynamically update its properties. This includes setting the image source, transparency, color, rectangle offset and size, scale type, and height.

```lua
local Options = Library.Options

local Image = Groupbox:AddImage("MyAgaImage", {
    Image = "http://www.roblox.com/asset/?id=135666356081915",
    Transparency = 0,
    Color = Color3.new(1, 1, 1),
    RectOffset = Vector2.zero,
    RectSize = Vector2.zero,
    ScaleType = Enum.ScaleType.Fit,
    Height = 200,
})

Image:SetImage(getcustomasset("mspaint.png"))
Image:SetTransparency(0.1)
Image:SetColor(Color3.fromRGB(255, 200, 200))
```

--------------------------------

### Install ThemeManager Addon with Obsidian Library in Roblox Studio

Source: https://docs.mspaint.cc/obsidian/installation/roblox-studio

This snippet illustrates how to install and require the ThemeManager addon for Obsidian in Roblox Studio. It first gets the Obsidian module from ReplicatedStorage and then requires the ThemeManager addon, which is expected to be a child of the Obsidian module.

```lua
local Obsidian = game:GetService("ReplicatedStorage"):WaitForChild("Obsidian")

local Library = require(Obsidian)
local ThemeManager = require(Obsidian:WaitForChild("ThemeManager"))
```

--------------------------------

### Install TailwindCSS for Obsidian (HTML)

Source: https://docs.mspaint.cc/obsidian/installation/html

This snippet shows how to include the TailwindCSS library in the `<head>` section of an HTML file, which is a prerequisite for using Obsidian.

```html
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
```

--------------------------------

### Apply Theme to Groupbox using ThemeManager

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Installs the ThemeManager UI into an existing groupbox. This function takes a 'Groupbox' object as input to populate with the UI elements.

```lua
ThemeManager:ApplyToGroupbox(groupbox)
```

--------------------------------

### Install Obsidian Library in Roblox Studio

Source: https://docs.mspaint.cc/obsidian/installation/roblox-studio

This snippet shows how to require the main Obsidian library module from ReplicatedStorage in Roblox Studio. It assumes the 'Obsidian' module is already placed there.

```lua
local Library = require(game:GetService("ReplicatedStorage"):WaitForChild("Obsidian"))
```

--------------------------------

### Create Simple Timed Notification

Source: https://docs.mspaint.cc/obsidian/core/library

Creates a basic notification that appears for a specified duration. It uses positional arguments for quick setup.

```lua
Library:Notify("Hello world!", 4)
```

--------------------------------

### Install Obsidian Library in Executor Environment (Lua)

Source: https://docs.mspaint.cc/obsidian/installation/executor

This snippet demonstrates how to load the Obsidian library using `game:HttpGet` within an executor environment. It requires a Lua-compatible environment and fetches the library from a specified URL.

```lua
local Library = loadstring(game:HttpGet("https://raw.githubusercontent.com/deividcomsono/Obsidian/refs/heads/main/Library.lua"))()
```

--------------------------------

### Apply Theme to Tab using ThemeManager

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Installs the ThemeManager UI into a groupbox within a specified tab. This function requires a 'Tab' object, typically obtained from `Window:AddTab`.

```lua
ThemeManager:ApplyToTab(tab)
```

--------------------------------

### Dropdown Methods: SetValue, SetValues, AddValues

Source: https://docs.mspaint.cc/obsidian/elements/dropdowns

Provides examples of methods to manage the selected values within a Dropdown. SetValue updates the selection, SetValues replaces all current values, and AddValues appends new values to the existing list.

```lua
Dropdown:SetValue(value)
Dropdown:SetValues(table)
Dropdown:AddValues(value)
```

--------------------------------

### Interact with Viewport Element in Lua

Source: https://docs.mspaint.cc/obsidian/elements/viewports

Provides examples of using various methods to interact with an existing Viewport element. These methods allow changing the displayed object, updating the camera, toggling interactivity, adjusting height, and focusing the camera on the object.

```lua
local Options = Library.Options

local Viewport = Groupbox:AddViewport("DemoViewport", {
    Object = Instance.new("Part"),
    Camera = Instance.new("Camera"),
    Interactive = true,
    AutoFocus = true,
    Height = 240,
})

Viewport:SetInteractive(true)
Viewport:SetHeight(260)
Viewport:Focus()
```

--------------------------------

### Create Window with Default Properties

Source: https://docs.mspaint.cc/obsidian/core/library

Demonstrates how to create a basic window using Library:CreateWindow with essential properties like Title, Footer, and Icon. This is the foundational step for building UI elements.

```lua
local Window = Library:CreateWindow({
    Title = "mspaint",
    Footer = "version: example",
    Icon = 95816097006870,
    NotifySide = "Right",
})
```

--------------------------------

### Control Video Playback State (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/videos

Starts or pauses the video playback. Accepts a boolean value where true starts playback and false pauses it.

```lua
Video:SetPlaying(playing)
```

--------------------------------

### Configure Window with Sidebar Resize Options

Source: https://docs.mspaint.cc/obsidian/core/library

Shows how to enable and configure sidebar resizing for a window. It includes setting the window title and optional parameters like MinSidebarWidth and SidebarCompactWidth to control the sidebar's behavior.

```lua
local Window = Library:CreateWindow({
    Title = "mspaint",
    EnableSidebarResize = true,

    -- Optional Sidebar Settings
    MinSidebarWidth = 200, -- stop shrinking when the sidebar hits 200px
    SidebarCompactWidth = 56,
})
```

--------------------------------

### Create and Manage Tabs in Obsidian

Source: https://docs.mspaint.cc/obsidian/structure/tabs

Demonstrates how to create multiple tabs using Window:AddTab, storing them in a table for easy management. It also shows how to add UI elements to these tabs using groupboxes and tabboxes.

```lua
local Tabs = {
    Main = Window:AddTab("Main", "user"),
    ["UI Settings"] = Window:AddTab("UI Settings", "settings"),
}
```

--------------------------------

### Keybind Creation and Configuration

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Demonstrates how to add a Keybind to a toggle or label using the AddKeyPicker method and outlines the available configuration options.

```APIDOC
## POST /websites/mspaint_cc_obsidian/keybinds

### Description
This endpoint allows for the creation of keybinds, which attach keyboard shortcuts to toggles or labels for quick actions within the Obsidian interface. Keybinds can be associated with any element that returns a reference, such as toggles or labels.

### Method
POST

### Endpoint
/websites/mspaint_cc_obsidian/keybinds

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **Index/ID of the keybind** (string) - Required - The unique identifier for the keybind.
- **Keybind configuration table** (table) - Optional - A table containing various properties to configure the keybind's behavior and appearance.
  - **Text?** (string) - The text displayed for the keybind.
  - **Default?** (string) - The default key shortcut for the keybind.
  - **DefaultModifiers?** (table) - Default modifier keys for the keybind.
  - **Mode?** (string) - The mode of the keybind (e.g., 'Toggle', 'Hold', 'AlwaysPress').
  - **SyncToggleState?** (boolean) - Whether to keep the toggle value in sync with the keybind state.
  - **WaitForCallback?** (boolean) - Whether to wait for a callback before proceeding.
  - **Modes?** (table) - A list of custom modes for the keybind.
  - **NoUI?** (boolean) - Whether to hide the keybind from the menu.
  - **Callback?** (function) - A function to be called when the keybind is activated.
  - **ChangedCallback?** (function) - A function to be called when the keybind's value changes.
  - **Clicked?** (function) - A function to be called when the keybind is clicked.

### Request Example
```lua
local Toggle = Groupbox:AddToggle("MyToggle", {
    Text = "Example Toggle",
    Default = false,
})

local Keybind = Toggle:AddKeyPicker("MyKeybind", {
    Text = "Example Keybind",
    Default = "F",
    Mode = "Toggle",
})
```

### Response
#### Success Response (200)
- **Keybind Reference** (object) - A reference to the newly created keybind object.

#### Response Example
```json
{
  "message": "Keybind created successfully",
  "keybindId": "MyKeybind"
}
```
```

--------------------------------

### Get Keybind State (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Shows how to retrieve the current active state of a keybind. This is useful for checking if the keybind is currently engaged or has been triggered.

```Lua
local state = Keybind:GetState()
```

--------------------------------

### DependencyGroupbox:SetupDependencies Method Signature

Source: https://docs.mspaint.cc/obsidian/structure/dependencygroupboxes

Provides the method signature for `SetupDependencies`, which is used to define the conditions under which a Dependency Groupbox will be displayed. It takes a table of dependencies as an argument.

```lua
DependencyGroupbox:SetupDependencies(dependencies)
```

--------------------------------

### Get Current Sidebar Width

Source: https://docs.mspaint.cc/obsidian/core/library

Retrieves the current width of the window's sidebar in pixels. This method is useful for responsive design or dynamic layout adjustments.

```lua
local CurrentWidth = Window:GetSidebarWidth()
```

--------------------------------

### Configure and Control VideoFrame (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/videos

Shows how to initialize a VideoFrame with various properties and then use its methods to update playback settings. This includes setting volume, pausing, and playing the video.

```lua
local Trailer = Groupbox:AddVideo("Trailer", {
    Video = "rbxassetid://1234567890",
    Looped = true,
    Playing = true,
    Volume = 0.4,
    Height = 240,
})

Trailer:SetVolume(0.6)
Trailer:Pause()
Trailer:Play()
```

--------------------------------

### Create Keybind with AddKeyPicker (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Demonstrates how to create a keybind associated with a toggle element using the AddKeyPicker method. It shows the basic arguments required for initialization, including the keybind's ID, text, default key, and mode.

```Lua
local Toggle = Groupbox:AddToggle("MyToggle", {
    Text = "Example Toggle",
    Default = false,
})
 
local Keybind = Toggle:AddKeyPicker("MyKeybind", {
    Text = "Example Keybind",
    Default = "F",
    Mode = "Toggle",
})
```

--------------------------------

### Get Autoload Configuration Name with SaveManager

Source: https://docs.mspaint.cc/obsidian/core/addons/savemanager

Retrieves the name of the configuration file that is currently marked to be automatically loaded on script startup. If no configuration is set for autoload, it returns the literal string 'none'.

```lua
local name = SaveManager:GetAutoloadConfig()
```

--------------------------------

### Basic Obsidian UI Layout with Components

Source: https://docs.mspaint.cc/obsidian/installation/next

Illustrates the fundamental structure of an Obsidian UI layout using React components. It shows how to set up the main Obsidian container, tabs, and groupboxes with various interactive elements.

```javascript
<Obsidian
  title="mspaint"
  icon="/mspaint.png"
  footer="version: example"
  //width={720}
  //height={600}
>
  <ObsidianTab name="General" order={0} icon="Settings">
    <ObsidianLeft>
      <ObsidianGroupbox name="Basics" order={0}>
        <ObsidianToggle text="Enable feature" defaultChecked />
        <ObsidianSlider
          text="Opacity"
          min={0}
          max={100}
          value={80}
          suffix="%"
        />
        <ObsidianInput text="Display name" placeholder="Type your name" />
        <ObsidianDivider />
        <ObsidianDropdown text="Mode" options={["Simple", "Advanced"]} />
        <ObsidianButton text="Apply" />
      </ObsidianGroupbox>
    </ObsidianLeft>

    <ObsidianRight>
      <ObsidianGroupbox name="Info" order={0}>
        <ObsidianLabel text="This is a label." />
        <ObsidianImage text="Logo" image="/next.svg" height={200} />
      </ObsidianGroupbox>
    </ObsidianRight>
  </ObsidianTab>
</Obsidian>
```

--------------------------------

### API: ApplyTheme - Apply Built-in or Custom Theme

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Applies a specified theme, which can be either a pre-packaged built-in theme or a custom theme saved on disk. The theme name is provided as a string argument.

```lua
ThemeManager:ApplyTheme(name)
```

--------------------------------

### Save Autoload Configuration Marker with SaveManager

Source: https://docs.mspaint.cc/obsidian/core/addons/savemanager

Sets a specific configuration to be automatically loaded when the script starts. This function marks the configuration by name and returns a success status or an error message if the operation fails.

```lua
local success, err = SaveManager:SaveAutoloadConfig(name)
```

--------------------------------

### Color Picker Creation and Configuration

Source: https://docs.mspaint.cc/obsidian/elements/colorpickers

Demonstrates how to add a Color Picker to a toggle or label, with configuration options.

```APIDOC
## POST /websites/mspaint_cc_obsidian/colorpicker

### Description
Adds a color picker to a UI element (toggle or label) with specified configurations.

### Method
POST

### Endpoint
/websites/mspaint_cc_obsidian/colorpicker

### Parameters
#### Path Parameters
- **element_reference** (string) - Required - The reference to the toggle or label to attach the color picker to.

#### Query Parameters
None

#### Request Body
- **id** (string) - Required - The unique identifier for the color picker.
- **config** (table) - Optional - Configuration options for the color picker.
  - **Default** (Color3) - Optional - The default color value (RGB).
  - **Title** (string) - Optional - The title displayed for the color picker.
  - **Transparency** (number) - Optional - The initial transparency value (0 to 1).
  - **Callback** (function) - Optional - A function to be called when the color picker is initialized.
  - **Changed** (function) - Optional - A function to be called when the color value changes.

### Request Example
```json
{
  "id": "ColorPicker1",
  "config": {
    "Default": "Color3.new(1, 0, 0)",
    "Title": "Some color",
    "Transparency": 0
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Color picker added successfully."
}
```
```

--------------------------------

### Create Notification with Configuration Table

Source: https://docs.mspaint.cc/obsidian/core/library

Creates a notification using a configuration table, allowing for more detailed control over properties like Title, Description, and Time. This method offers greater flexibility than positional arguments.

```lua
Library:Notify({
    Title = "mspaint",
    Description = "Hello world!",
    Time = 4,
})
```

--------------------------------

### Add Button using Configuration Table (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/buttons

Shows how to create a button with various properties defined in a configuration table, including text and a callback function. This method offers more customization options.

```Lua
Groupbox:AddButton({
    Text = "This is a button",
    Func = function()
        print("Button clicked!")
    end
})
```

--------------------------------

### API: LoadDefault - Load the Default Theme

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Reads the saved default theme marker and applies the corresponding theme, whether it's a built-in scheme or a custom one previously saved.

```lua
ThemeManager:LoadDefault()
```

--------------------------------

### Add Dependency Groupbox and Configure

Source: https://docs.mspaint.cc/obsidian/structure/dependencygroupboxes

Demonstrates how to add a Dependency Groupbox to a parent groupbox and configure its visibility based on a toggle's state. This involves creating the groupbox, adding UI elements within it, and then setting up the dependencies.

```lua
local Toggles = Library.Toggles
local LeftGroupbox = MainTab:AddLeftGroupbox("Settings", "wrench")

LeftGroupbox:AddToggle("EnableAudio", {
    Text = "Enable Audio",
    Default = false
})

local AudioSettings = LeftGroupbox:AddDependencyGroupbox()

AudioSettings:AddSlider("Volume", {
    Text = "Volume",
    Default = 50,
    Min = 0,
    Max = 100,
    Rounding = 0
})

AudioSettings:SetupDependencies({
    { Toggles.EnableAudio, true }, -- Only show if EnableAudio is true
})
```

--------------------------------

### Create Label using Configuration Table (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/labels

Shows how to create a label using a configuration table for more readable options. The `AddLabel` method accepts a table with properties like `Text` and `DoesWrap`. An optional label ID can also be provided.

```lua
local LabelOptions = {
    Text = "This is a label",
    DoesWrap = false
}

local Label = Groupbox:AddLabel(LabelOptions)
-- or local Label = Groupbox:AddLabel("MyLabel", LabelOptions)
-- which allows you to do: Library.Labels.MyLabel:SetText("This is a label")
```

--------------------------------

### Add Callback for Input Changes - Lua

Source: https://docs.mspaint.cc/obsidian/elements/inputs

Presents the Lua code for the `OnChanged` method, which is the recommended way to attach a callback function to an input field to handle changes. The provided example shows how to set up a callback after creating UI elements.

```Lua
Input:OnChanged(function)
```

```Lua
local Options = Library.Options
local Toggles = Library.Toggles

-- Setup UI elements first
local MyInput = Groupbox:AddInput("MySoundID", {
    Text = "Notification Sound ID",
    Placeholder = "rbxassetid://",
    Default = "rbxassetid://",
})

-- Then after creating all UI elements, add callbacks
-- MyInput:OnChanged(...) also works
Options.MyInput:OnChanged(function(state)
    -- Options.MyInput.Value == state
    print("Input changed to " .. Options.MyInput.Value)
end)
```

--------------------------------

### Create Label using Positional Arguments (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/labels

Demonstrates creating a label with text and wrap settings using positional arguments. The `AddLabel` method on a Groupbox is used. It takes the label text and a boolean indicating if text should wrap.

```lua
local Label = Groupbox:AddLabel("This is a label", false)
```

--------------------------------

### Slider Methods: SetValue, SetText, SetMin, SetMax, SetDisabled, SetVisible, SetPrefix, SetSuffix, OnChanged

Source: https://docs.mspaint.cc/obsidian/elements/sliders

Provides examples of various methods available for interacting with a Slider object after its creation. These methods allow dynamic updates to the slider's value, text, range, visibility, and callbacks. The OnChanged method is particularly useful for triggering actions when the slider's value is modified.

```lua
Slider:SetValue(number)
Slider:SetText(text)
Slider:SetMin(number)
Slider:SetMax(number)
Slider:SetDisabled(boolean)
Slider:SetVisible(boolean)
Slider:SetPrefix(text)
Slider:SetSuffix(text)
Slider:OnChanged(function)
```

--------------------------------

### Create Dropdown with AddDropdown

Source: https://docs.mspaint.cc/obsidian/elements/dropdowns

Demonstrates how to create a new Dropdown instance within a Groupbox. It takes an ID and a configuration table as arguments, allowing customization of text, values, default selection, and multi-select behavior.

```lua
local Dropdown = Groupbox:AddDropdown("MyDropdown", {
    Text = "A dropdown",
    Values = { "This", "is", "a", "dropdown" },
    Default = 1,
    Multi = false,
})
```

--------------------------------

### Create and Add Elements to Key Tab in Obsidian

Source: https://docs.mspaint.cc/obsidian/structure/tabs

Illustrates creating a Key Tab using Window:AddKeyTab and adding UI elements like labels and key boxes. Key Tabs are designed for menu-like displays and handle key inputs via callbacks.

```lua
local KeyTab = Window:AddKeyTab("Key System", "key")

KeyTab:AddLabel({
	Text = "mspaint key system",
	DoesWrap = true,
	Size = 20,
})

KeyTab:AddLabel({
	Text = "Your support helps us continue developing mspaint, thank you!",
	DoesWrap = true,
	Size = 16,
})

KeyTab:AddKeyBox(function(ReceivedKey)
	local Success = true -- your key check here

	print("Success:", Success)
	Library:Notify("Success: " .. tostring(Success), 4)
end)
```

--------------------------------

### Add Button using Positional Arguments (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/buttons

Demonstrates how to create a button with text and a callback function using positional arguments. This is a quick way to add a basic button.

```Lua
Groupbox:AddButton("This is a button", function()
    print("Button clicked!")
end)
```

--------------------------------

### Create and Configure Viewport in Lua

Source: https://docs.mspaint.cc/obsidian/elements/viewports

Demonstrates how to create a new Viewport element within a Groupbox and configure its initial properties. It takes the viewport's name and a table of configuration options as arguments.

```lua
local Viewport = Groupbox:AddViewport("MyViewport", {
    Object = Instance.new("Part"),
    Camera = Instance.new("Camera"),
    Interactive = true,
    AutoFocus = true,
    Height = 200,
})
```

--------------------------------

### Keybind Methods

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Details the available methods for interacting with a Keybind object, including setting its value, retrieving its state, updating its display, and managing callbacks.

```APIDOC
## API Methods for Keybind Objects

### Description
This section details the methods available to interact with Keybind objects after they have been created. These methods allow for dynamic control and state management of keybinds.

### Methods

#### SetValue
Sets the key and mode for the keybind.

- **Method:** POST
- **Endpoint:** `/keybinds/{keybindId}/value`
- **Parameters:**
  - **Path Parameters:**
    - **keybindId** (string) - Required - The ID of the keybind to update.
  - **Request Body:**
    - **value** (table) - Required - A table containing `{ key, mode, modifiers? }`.
      - **key** (string) - The key to set.
      - **mode** (string) - The mode to set (e.g., 'Toggle', 'Hold', 'AlwaysPress').
      - **modifiers?** (table) - Optional - Modifier keys (e.g., 'Ctrl', 'Shift', 'Alt').

#### GetState
Returns the current active state of the keybind.

- **Method:** GET
- **Endpoint:** `/keybinds/{keybindId}/state`
- **Parameters:**
  - **Path Parameters:**
    - **keybindId** (string) - Required - The ID of the keybind to query.
- **Response:**
  - **Success Response (200):**
    - **state** (boolean) - True if the keybind is active, false otherwise.

#### SetText
Updates the text displayed for the keybind.

- **Method:** PUT
- **Endpoint:** `/keybinds/{keybindId}/text`
- **Parameters:**
  - **Path Parameters:**
    - **keybindId** (string) - Required - The ID of the keybind to update.
  - **Request Body:**
    - **text** (string) - Required - The new text for the keybind.

#### Update
Refreshes the keybind's display to reflect any changes.

- **Method:** POST
- **Endpoint:** `/keybinds/{keybindId}/update`
- **Parameters:**
  - **Path Parameters:**
    - **keybindId** (string) - Required - The ID of the keybind to update.

#### OnClick
Sets a callback function to be executed when the keybind is clicked.

- **Method:** POST
- **Endpoint:** `/keybinds/{keybindId}/callbacks/click`
- **Parameters:**
  - **Path Parameters:**
    - **keybindId** (string) - Required - The ID of the keybind to set the callback for.
  - **Request Body:**
    - **callback** (function) - Required - The function to execute on click.

#### OnChanged
Sets a callback function to be executed when the keybind's value changes.

- **Method:** POST
- **Endpoint:** `/keybinds/{keybindId}/callbacks/changed`
- **Parameters:**
  - **Path Parameters:**
    - **keybindId** (string) - Required - The ID of the keybind to set the callback for.
  - **Request Body:**
    - **callback** (function) - Required - The function to execute when the keybind changes.

### Example Usage
```lua
-- Assuming 'Options.AutoFarmKey' is a reference to a Keybind object

-- Set a new value for the keybind
Options.AutoFarmKey:SetValue({ "G", "Toggle" })

-- Get the current state of the keybind
local isActive = Options.AutoFarmKey:GetState()

-- Update the text of the keybind
Options.AutoFarmKey:SetText("New Auto Farm Key")

-- Manually refresh the keybind display
Options.AutoFarmKey:Update()

-- Set a click callback
Options.AutoFarmKey:OnClick(function()
    print("Keybind clicked!")
end)

-- Set a changed callback
Options.AutoFarmKey:OnChanged(function()
    print("Keybind value changed.")
end)
```
```

--------------------------------

### Create Color Picker with Toggle Reference (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/colorpickers

Demonstrates how to add a Color Picker to a toggle UI element. It shows the necessary arguments for initialization, including default color and title. The Color Picker can be configured with transparency options.

```lua
local Toggle = Groupbox:AddToggle("MyToggle", {
    Text = "This is a toggle",
    Default = true,
})
 
local ColorPicker = Toggle:AddColorPicker("ColorPicker1", {
    Default = Color3.new(1, 0, 0),
    Title = "Some color",
})
```

--------------------------------

### Dependency Groupbox Usage

Source: https://docs.mspaint.cc/obsidian/structure/dependencygroupboxes

Demonstrates how to add and configure a Dependency Groupbox, including setting up dependencies for conditional visibility.

```APIDOC
## AddDependencyGroupbox

### Description
Adds a dependency groupbox to the parent groupbox. This groupbox will conditionally display its contents based on the set dependencies.

### Method
`AddDependencyGroupbox`

### Endpoint
N/A (This is a library method, not an HTTP endpoint)

### Parameters
None directly for `AddDependencyGroupbox`, but it operates on a parent groupbox.

### Request Example
```lua
local Toggles = Library.Toggles
local LeftGroupbox = MainTab:AddLeftGroupbox("Settings", "wrench")

LeftGroupbox:AddToggle("EnableAudio", {
    Text = "Enable Audio",
    Default = false
})

local AudioSettings = LeftGroupbox:AddDependencyGroupbox()

AudioSettings:AddSlider("Volume", {
    Text = "Volume",
    Default = 50,
    Min = 0,
    Max = 100,
    Rounding = 0
})

AudioSettings:SetupDependencies({
    { Toggles.EnableAudio, true }, -- Only show if EnableAudio is true
})
```

### Response
N/A (This is a UI element creation method)

## SetupDependencies

### Description
Sets up the dependencies for the dependency groupbox, determining when it should be visible.

### Method
`SetupDependencies`

### Endpoint
N/A (This is a library method, not an HTTP endpoint)

### Parameters
#### Arguments
- **dependencies** (table) - A table containing dependency rules. Each rule is a table with two elements: the toggle object and the boolean value it should match for visibility.

### Request Example
```lua
AudioSettings:SetupDependencies({
    { Toggles.EnableAudio, true }, -- Only show if EnableAudio is true
})
```

### Response
N/A (This is a configuration method)
```

--------------------------------

### API: GetCustomTheme - Load Custom Theme from File

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Loads and decodes a custom theme from a JSON file located in the theme directory. It returns the theme data as a table or nil if the file is not found or cannot be decoded.

```lua
local theme = ThemeManager:GetCustomTheme(name)
```

--------------------------------

### Create Left and Right Tabboxes in Obsidian

Source: https://docs.mspaint.cc/obsidian/structure/tabboxes

Demonstrates how to create a left-aligned and a right-aligned tabbox using the AddLeftTabbox and AddRightTabbox methods. These methods are essential for organizing UI elements within tabs.

```lua
local LeftTabBox = Tab:AddLeftTabbox("Left Tabbox")
local RightTabBox = Tab:AddRightTabbox("Right Tabbox")
```

--------------------------------

### Import Obsidian Widget Script (HTML)

Source: https://docs.mspaint.cc/obsidian/installation/html

This snippet demonstrates how to import the Obsidian widget script into the `<head>` section of an HTML file, making the Obsidian component available for use.

```html
<script src="https://www.mspaint.cc/widgets/obsidian.js"></script>
```

--------------------------------

### Set Keybind Click Callback (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Shows how to assign a function to be executed when the keybind is clicked. This allows for custom actions to be triggered by user interaction with the keybind.

```Lua
Keybind:OnClick(function)
```

--------------------------------

### API: SetLibrary - Register UI Library for ThemeManager

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Registers the UI library instance with ThemeManager, enabling it to read and update color pickers and other UI elements for theme manipulation.

```lua
ThemeManager:SetLibrary(Library)
```

--------------------------------

### Keybinds Menu Configuration

Source: https://docs.mspaint.cc/obsidian/core/library

Configuration option for the Keybinds Menu to display toggle states as buttons, improving usability for mobile players.

```APIDOC
## Keybinds Menu

The keybinds menu surfaces every registered keybind alongside its current state. When a keybind is configured in `Toggle` mode the menu also renders tap-friendly buttons, giving mobile players parity with keyboard users.

### Configuration

```lua
Library.ShowToggleFrameInKeybinds = true -- Show toggle state in keybind menu
```
```

--------------------------------

### Menu Keybind

Source: https://docs.mspaint.cc/obsidian/core/library

Configures a keybind in Obsidian to toggle the main MSPaint CC window. This involves adding a menu label and associating a key picker with it.

```APIDOC
## Menu Keybind

### Description
In Obsidian, there is a helper field that you can set that allows you to easily bind a Keybind to toggle the main window.

### Method
`MenuGroup:AddLabel("Menu bind"):AddKeyPicker("MenuKeybind", options)`
`Library.ToggleKeybind = Options.MenuKeybind`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```lua
MenuGroup:AddLabel("Menu bind"):AddKeyPicker({
    Default = "RightShift",
    NoUI = true,
    Text = "Menu keybind"
})

Library.ToggleKeybind = Options.MenuKeybind
```

### Response
#### Success Response (200)
No specific return value documented, implies success if no error occurs.

#### Response Example
None
```

--------------------------------

### Import and Use Extracted UI Data in React

Source: https://docs.mspaint.cc/obsidian/installation/next

Shows how to import a JSON file containing UI data (extracted using the Lua script) and pass it to the `uiData` prop of the Obsidian component. This allows for dynamic UI configuration.

```javascript
import UIData from "@/data/ObsidianExtracted.json";

<Obsidian
  title="mspaint"
  icon="/mspaint.png"
  footer="version: example"
  uiData={UIData}
/>
```

--------------------------------

### API: CreateGroupBox - Helper to Create Theme Groupbox

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

A helper function that creates a standard "Themes" groupbox on the left side of a tab. The returned groupbox can be further customized before passing it to `CreateThemeManager`.

```lua
local groupbox = ThemeManager:CreateGroupBox(tab)
```

--------------------------------

### Set Keybind Change Callback (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Demonstrates how to register a callback function that is executed whenever the keybind's configuration (key or mode) is changed. This is useful for reacting to user modifications.

```Lua
Keybind:OnChanged(function)
```

--------------------------------

### Import Obsidian UI Components in React

Source: https://docs.mspaint.cc/obsidian/installation/next

Demonstrates how to import various Obsidian UI components into your React application. These components are essential for building the user interface with the Obsidian library.

```javascript
import {
  Obsidian,
  ObsidianTab,
  ObsidianLeft,
  ObsidianRight,
  ObsidianGroupbox,
  ObsidianTabWarning,
  ObsidianToggle,
  ObsidianSlider,
  ObsidianInput,
  ObsidianDropdown,
  ObsidianButton,
  ObsidianLabel,
  ObsidianDivider,
  ObsidianImage,
} from "@/components/obsidian/obsidian";
```

--------------------------------

### AddButton to Groupbox (Positional Arguments)

Source: https://docs.mspaint.cc/obsidian/elements/buttons

Demonstrates how to add a button to a Groupbox using positional arguments for text and a callback function.

```APIDOC
## POST /Groupbox/AddButton (Positional)

### Description
Adds a button to a Groupbox using positional arguments. This is a quick way to create a basic button.

### Method
POST

### Endpoint
/Groupbox/AddButton

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **Text** (string) - Required - The text displayed on the button.
- **Func** (function) - Optional - The callback function to execute when the button is clicked.

### Request Example
```json
{
  "Text": "This is a button",
  "Func": "function() print(\"Button clicked!\") end"
}
```

### Response
#### Success Response (200)
- **Button** (object) - The newly created button object.

#### Response Example
```json
{
  "Button": {
    "Text": "This is a button",
    "Func": "function() print(\"Button clicked!\") end"
  }
}
```
```

--------------------------------

### Register Color Picker Change Callback (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/colorpickers

Shows how to register a callback function that executes whenever the Color Picker's value or transparency changes. This allows for real-time updates and reactions to user input.

```lua
ColorPicker:OnChanged(function)
```

--------------------------------

### Add Image to Groupbox (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/images

Demonstrates how to create an Image element and add it to a Groupbox. It takes an ID and a configuration table for initial properties like image source, height, transparency, color, offset, size, and scale type.

```lua
Groupbox:AddImage("MyImage", {
    Image = "http://www.roblox.com/asset/?id=135666356081915",
    Height = 200,
})
```

--------------------------------

### Refresh Configuration List with SaveManager

Source: https://docs.mspaint.cc/obsidian/core/addons/savemanager

Scans the designated configuration folder tree and returns an array containing the names of all available configuration files, excluding their extensions.

```lua
local configs = SaveManager:RefreshConfigList()
```

--------------------------------

### Set Keybind Value (Lua)

Source: https://docs.mspaint.cc/obsidian/elements/keybinds

Illustrates how to programmatically set the key and mode for an existing keybind. This method allows dynamic updates to the keybind's configuration after its initial creation.

```Lua
Keybind:SetValue({ "F", "Toggle" })
```

--------------------------------

### API: SaveCustomTheme - Save Current Theme to File

Source: https://docs.mspaint.cc/obsidian/core/addons/thememanager

Serializes the current UI theme settings (from color pickers) into a JSON file within the specified theme folder. The filename is determined by the provided name argument.

```lua
ThemeManager:SaveCustomTheme(name)
```

--------------------------------

### BuildConfigSection

Source: https://docs.mspaint.cc/obsidian/core/addons/savemanager

Creates the SaveManager UI in the specified tab for managing configurations.

```APIDOC
## POST /websites/mspaint_cc_obsidian/SaveManager/BuildConfigSection

### Description
Creates the SaveManager UI in your library tab so users can create, load, overwrite and manage configs directly. This call also ignores the config management controls when saving.

### Method
POST

### Endpoint
/websites/mspaint_cc_obsidian/SaveManager/BuildConfigSection

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **tab** (table) - Required - The tab to populate with the SaveManager UI.

### Request Example
```json
{
  "tab": {}
}
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the SaveManager UI was successfully created.

#### Response Example
```json
{
  "success": true
}
```
```

--------------------------------

### Build SaveManager Configuration Section

Source: https://docs.mspaint.cc/obsidian/core/addons/savemanager

Generates the UI elements for the configuration section within a specified tab, allowing users to interact with save, load, and delete functionalities.

```lua
SaveManager:BuildConfigSection(Tabs["UI Settings"])
```
Tokens:
Raw