Creating a One-Click UI Layer Selection Toggle Plugin for Roblox Studio

Help and Feedback Scripting Support
#1

I want to create a plugin that allows users to toggle UI layer selection on and off with a single click in the Plugins tab.
Currently, selecting UI elements requires multiple steps:

  1. enabling UI mode, searching for the frame in the explorer
  2. selecting a UI frame in the explorer.
  3. Clicking on the desired UI via mouse button

This process can be very time-consuming and disruptive to workflow.

I’ve searched the Developer Hub and existing plugins but haven’t found a solution that specifically addresses this need. I’m familiar with basic plugin development but need guidance on what APIs roblox provides that would help here

Additional details:

  • The plugin should add a button to the Plugins tab
  • Clicking the button should toggle UI layer selection on/off
  • When active, users should be able to directly select UI elements without additional steps
#2

what do you mean by toggle ui selection, you mean the mode where you can press the UI?

#3

yes, the mode where clicking on the UI will enable me to drag it and resize it etc.

#4

im not sure how to go around this, do you have any solutions to the issue, or your here to find one?

#5

techinically somethign you can do is just make it so the player selects a gui object, and then deselect it, so then its in the mode

#6

I wrote a quick hack to make this work

-- Services
local UserInputService = game:GetService("UserInputService")
local Selection = game:GetService("Selection")

-- Plugin setup
local toolbar = plugin:CreateToolbar("UISelect")
local button = toolbar:CreateButton(
    "UI Select", 
    "Allows you to select user interface without having to be on the UI layer.", 
    "rbxassetid://114471616525959"
)

-- State
local isEnabled = false

-- Function to select UI element
local function selectUIElement(position)
    -- Get UI objects at mouse position
    local guiObjects = game.StarterGui:GetGuiObjectsAtPosition(position.X, position.Y)
    
    -- Select the first GUI object if any are found
    if #guiObjects > 0 then
        Selection:Set({guiObjects[1]})
        return true
    end
    return false
end

-- Toggle button state and select UI on click
button.Click:Connect(function()
    isEnabled = not isEnabled
    button:SetActive(isEnabled)
    
    if isEnabled then
        -- Get current mouse position
        local mousePosition = UserInputService:GetMouseLocation()
        
        -- Attempt to select UI element at mouse position
        local success = selectUIElement(mousePosition)
        
        -- If a UI element was successfully selected, disable the plugin
        if success then
            isEnabled = false
            button:SetActive(isEnabled)
        end
    end
end)

when the plugin button is pressed, it automatically enables the ui layer by selecting the first UI the mouse is hovering over, and then disables the plugin. Then on subsequent clicks I can select whatever UI I really want to select.

This way I can bind the plugin to a hotkey to toggle the UI layer

1 Like
#7

does it work, because if not i think i noticed a bug

#8

Maybe instead of binding a hotkey, you can just make it so the first click after the button is activated will not only select the corresponding UI element under the mouse but also disable the plugin’s button. Or you can also make it so every click (when the plugin is activated) will select the corresponding UI element, until the button is disabled. Just some ideas!

#9

you can just make it so the first click after the button is activated will not only select the corresponding UI element under the mouse but also disable the plugin’s button.

I originally did this. It’s actually one more click to do this for my use case:

OLD:
hotkey → click screen (and disables plugin) → click the actual UI I want

NEW:
hotkey (and disables plugin) → click the actual UI I want

Just for clarification the plugin right now selects whatever UI is on top, regardless if its visible or not. This means it usually selects some outer frame thats invisible that takes over most of the screen (I have many of these wrapper frames for my UI) .
I use the plugin to mainly to just toggle the UI layer, not to actually select the UI I want to edit

1 Like
#10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.