Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar

Resources Community Resources
#37

Similar to the fake chat, you can achieve most of this, by doing:

View code 
-- LOCAL
local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local gui = playerGui:WaitForChild("TestGUIs")
local replicatedStorage = game:GetService("ReplicatedStorage")
local starterGui = game:GetService("StarterGui")
local topbarPlus = replicatedStorage:WaitForChild("HDAdmin"):WaitForChild("Topbar+")
local iconController = require(topbarPlus.IconController)


-- CREATE ICONS
-- Fake Chat
local icon = iconController:createFakeChat()
icon:notify()

-- Fake backpack
local icon = iconController:createIcon("_Inventory", nil, 1)
icon:setToggleFunction(function()
	local isSelected = icon.toggleStatus == "selected"
	-- Toggle the backpack on/off here
end)
local inventoryTheme = {
	image = {
		selected = {
			Image = "rbxasset://textures/ui/TopBar/inventoryOn.png"
		},
		deselected = {
			Image = "rbxasset://textures/ui/TopBar/inventoryOff.png"
		}
	}
}
icon:setTheme(inventoryTheme)
icon:setImageSize(36)
starterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)

However, I can’t find any API to toggle the backpack/inventory itself, leaving the only options to fork the core gui or create your own custom.

For example, for the fake chat, I do:

local chatMainModule = players.LocalPlayer.PlayerScripts:WaitForChild("ChatScript").ChatMain
local chatMain = require(chatMainModule)
icon:setToggleFunction(function()
	local visibility = icon.toggleStatus == "selected"
	chatMain.CoreGuiEnabled:fire(visibility)
	chatMain:SetVisible(visibility)
end)

Unfortunately, there doesn’t appear to be a method to do this for the backpack. If anyone does find one, please do let me know and I’ll update the Topbar+ examples.

5 Likes
#38

For the toggle menus to persist, you must ensure the GuiObject has ‘ResetOnSpawn’ set to false , or that you are calling Icon:setToggleMenu(guiObject) every time the player respawns.

I’ve updated the docs and its examples to include this information:
https://1foreverhd.github.io/HDAdmin/projects/topbarplus/icon/#settogglemenu

2 Likes
#39

:+1: works perfectly, amazing creations like always :smiley:

#40

just a question, but how do you notify another player’s icon, I’m having trouble making chat message notifications lol, just seem to notify the person that chatted

#41

is there a download button here somewhere?

#42

@AnasBahauddinI978

You can use remote events to achieve this. Wevetments has a great tutorial on this.

Then on the client, simply prompt a notification by doing icon:notify().

@BuilderNoob_Ozgur2nd

You can clone the project from our repository, or more simply take or require the MainModule.

2 Likes
#43

Thank you. I suppose ill just make a backpac gui which is binded to the button

1 Like
#44

Great work! I love your creations ForeverHD!

1 Like
#45

Great system, however my custom decal icons aren’t appearing.

image

I’m changing the icons within the main localscript

image

The icons were approved by moderation perfectly fine.
@ForeverHD

1 Like
#46

You’re retrieving the website ID as apposed to the asset ID. Right click on the image instead in the toolbox and press ‘Copy AssetId’ to grab the real working ID:

image
image682×915 187 KB

For example, the ID in your “Games” example should be 4621599120 instead of 4621599129.

1 Like
#47

Thank you so much! This is great.

1 Like
#48

Updates

Thanks to @Lucke0051 for a lot of these suggestions.

IconController

  • Significantly improved the fakeChat mimicking, including notifications, and automatically hiding/showing the icon when StarterGui:SetCoreGuiEnabled("Chat", bool) is called.

  • All icons now automatically hide/show when StarterGui:SetCore("TopbarEnabled", bool) is called.

  • Added method removeFakeChat.

  • Added method setTopbarEnabled.

  • Added method setDisplayOrder.

Icon

3 Likes
#49

Wow! This is very cool! I can’t wait to use this in my game. Thank you for making this!

1 Like
#50

Is it possible to change the roblox :roblox_light: logo in the corner?

#51

You can also use the Imiji plugin.

#52

Apart from modifying it locally on your device, this isn’t currently possible.

#53

Do you have any size recommendation for the icon that the top bar icon to have? (i.e. : 32x32)

#54

Here is a mint green theme. If you edit it I would like to see what you have edited. So please share it. Thank you!

image
image1585×528 109 KB 

local theme = {
    -- TOGGLE EFFECT
    ["toggleTweenInfo"] = TweenInfo.new(0.35, Enum.EasingStyle.Quart, Enum.EasingDirection.Out),

    -- OBJECT PROPERTIES
    ["button"] = {
        selected = {
            ImageTransparency = 0.35,
            ImageColor3 = Color3.fromRGB(0, 255, 200),
        },
        deselected = {
            ImageTransparency = 0.35,
			ImageColor3 = Color3.fromRGB(15,15,15)
        },
    },
    ["image"] = {
        selected = {
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
        deselected = {
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
    ["notification"] = {
        selected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
			ImageColor3 = Color3.fromRGB(70, 133, 107),
        },
        deselected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
            ImageColor3 = Color3.fromRGB(55, 145, 103),

        },
    },
    ["amount"] = {
        selected = {
            TextColor3 = Color3.fromRGB(255,255,255),
        },
        deselected = {
            TextColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
}
#55

This is great! Really opens up a whole new world for ui. That being said, especially as someone new to the world of Lua, it’s not very clear on how to go about setting it up. It’d be good to throw together a quick guide on how to set up the whole hierarchy. Right now it appears as though it goes over the individual aspects of the project, but not the overall thing itself. Other than that, great work.

1 Like
#57

Also, I found a bug; if you have chat selected, it allows you to select something else.
@ForeverHD