[v3!] TopbarPlus v3.0.0 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

ForeverHD · May 5, 2021, 9:04am

Cheers for all your suggestions and help with testing, v2.4.1 is now out:

This means that mammoth of code…

ForeverHD:

local function selectLabel(icon)
	icon:setLabel("Nanoblox")
end
local function deselectLabel(icon)
	icon:setLabel("")
	icon:setSize(32)
end
local nanobloxIcon = Icon.new()
	:setImage(6326373239)
	:setImageYScale(0.5)
	:bindEvent("hoverStarted", function(icon)
		selectLabel(icon)
	end)
	:bindEvent("hoverEnded", function(icon)
		if icon.isSelected then
			-- This keeps the label open whilst the icon is selected
			selectLabel(icon)
			return
		end
		deselectLabel(icon)
	end)
	:bindEvent("deselected", function(icon)
		if not icon.hovering then
			-- This ensures the label returns to its deselected size and text
			deselectLabel(icon)
		end
	end)

… can be condensed into simply:

Icon.new()
	:setImage(6326373239)
	:setLabel("Nanoblox", "selected")
	:setLabel("Nanoblox", "hovering")

By utilising the new hovering iconState. More info on that at the bottom of the introduction page:

LocalWE · May 6, 2021, 1:52am

Hmm strange…

Am I doing something wrong? it should only show 1 and not 3.

local TopbarService = require(game:GetService("ReplicatedStorage").TopbarPlus)
local Map = workspace:WaitForChild("Map")

local LapsIcon = TopbarService.new()
LapsIcon:setRight()
--LapsIcon:setSize(100, 32)
LapsIcon:lock()
LapsIcon:setImage("rbxassetid://6295541655")
LapsIcon:setLabel("1/1")

local MaxLaps = Map:GetAttribute("MaxLaps")
local Lap = 1

LapsIcon:setLabel("1/"..MaxLaps)

local function AddLap()
	Lap += 1
	LapsIcon:setLabel(Lap.."/"..MaxLaps)
end

game:GetService("ReplicatedStorage").AddPlrLap.OnClientEvent:Connect(AddLap)
game:GetService("ReplicatedStorage").FinalLap.OnClientEvent:Connect(AddLap)

ForeverHD · May 6, 2021, 7:55am

Your code appears to work perfectly fine:

Where is your localscript located?

Also what version of TopbarPlus are you using (found in the ‘VERSION’ submodule, if that doesn’t appear, then grab the latest version).

LocalWE · May 6, 2021, 3:34pm

I put it inside a folder in the PlayerGui, and then I put it inside a ScreenGui. They both did the same thing. I inserted the module just before I scripted my lap counter. I currently don’t have access to Studio.

ForeverHD · May 6, 2021, 4:08pm

That’ll likely be why. Your localscript needs to be located in StarterPlayerScripts or a Gui with ResetOnSpawn set to false.

apenzijncoolenleuk1 · May 6, 2021, 4:16pm

Hi again.
I want to create a timer and found this awesome module: NumberSpinner Module.
Would it be possible to use this as a timer like in the example place?

In other words: is it possible to wrap an icon around the frame that is returned from the module?

ForeverHD · May 6, 2021, 6:23pm

That’s not possible at this stage in time as some internal workings would have to be modified. I’d recommend submitting a feature request for that at the repository (although I couldn’t guarantee it being completed anytime soon).

ForeverHD · May 7, 2021, 2:59pm

With v2.5.1 you can now convert icon labels into spinners by utilising the new convertLabelToNumberSpinner method and @boatbomber’s epic Number Spinner module:

dFyV6Mg

(A coded example can be found at the playground)

Credit to @apenzijncoolenleuk1 for the feature suggestion!

KasimAkram · May 9, 2021, 6:21pm

I’ve been experiencing 2 problems with this module. With update v2.5.1 I’ve been experiencing clipping issues on some of the letters after this latest update. (Ex. G, Y) (Image attached below)
Newest update [v2.5.1]
Screen Shot 2021-05-09 at 1.06.17 PM
Older update

The second problem I have is if edit the text of an button and the new text had more letters than the original one it would have a ton of space in between. [See example below]

Button with alot of letters Lets call this button A.
Screen Shot 2021-05-09 at 1.16.08 PM

Button B Text is shorter than button A although the button size itself stays the same.

Code

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)


local Hi = replicatedStorage:FindFirstChild("MusicTitle")

-- Apply BlueGradient Theme
IconController.setGameTheme(Themes.BlueGradient)

local Ye = Icon.new()
:setLabel('Song: ' .. Hi.Value)
:setOrder(3)
:bindEvent("selected", function()
	print("selected!")
end)
:bindEvent("deselected", function()
	print("deselected!")
end)

Hi.Changed:Connect(function()
	Ye:setLabel("Song".. Hi.Value)
end)

Apart from that as of right now I’ve been experiencing no issues; Thanks for making a great module!

tquti · May 9, 2021, 7:14pm

Is it possible to make a FPS counter with Topbar like how Criminality does? If so i would like to know. Thanks!

ForeverHD · May 9, 2021, 7:39pm

Thanks for the report, I’ve opened up a ticket which I’ll aim to complete for sometime this week:

Are you still experiencing this issue in v2.5.1? This bug should have been patched for that. If so, can you provide more example code which reproduces that bug. Thanks!

ForeverHD · May 9, 2021, 7:43pm

You can retrieve a clients FPS using this method by pobammer then with topbarplus simply construct your icon and whenever the FPS changes do:

icon:setLabel(tostring(FPSValue))

KasimAkram · May 9, 2021, 8:13pm

I’m no longer experiencing the second issue with v2.5.1, apologies for that.

tquti · May 10, 2021, 2:41am

Thank you this will help a lot!

tquti · May 10, 2021, 2:50am

Ok i still don’t know how to uses it. Is it something like this?

 local Icon = require(game:GetService("ReplicatedStorage").Icon)

Icon.new()
:setLabel("FPS")
:setCaption("FPS")

local RunService = game:GetService("RunService")
local FpsLabel = icon:setLabel(tostring())

local TimeFunction = RunService:IsRunning() and time or os.clock

local LastIteration, Start
local FrameUpdateTable = {}

local function HeartbeatUpdate()
	LastIteration = TimeFunction()
	for Index = #FrameUpdateTable, 1, -1 do
		FrameUpdateTable[Index + 1] = FrameUpdateTable[Index] >= LastIteration - 1 and FrameUpdateTable[Index] or nil
	end

	FrameUpdateTable[1] = LastIteration
	FpsLabel.Text = tostring(math.floor(TimeFunction() - Start >= 1 and #FrameUpdateTable or #FrameUpdateTable / (TimeFunction() - Start))) .. " FPS"
end

Start = TimeFunction()
RunService.Heartbeat:Connect(HeartbeatUpdate)

ForeverHD · May 10, 2021, 8:18am

Try this instead:

local UPDATE_LABEL_COOLDOWN = 0.1

local runService = game:GetService("RunService")
local replicatedStorage = game:GetService("ReplicatedStorage")
local timeFunction = runService:IsRunning() and time or os.clock

local Icon = require(replicatedStorage.Icon)
local fpsIcon = Icon.new()

local nextLabelUpdate = 0
local lastIteration, start
local frameUpdateTable = {}
start = timeFunction()
runService.Heartbeat:Connect(function()
	lastIteration = timeFunction()
	for Index = #frameUpdateTable, 1, -1 do
		frameUpdateTable[Index + 1] = frameUpdateTable[Index] >= lastIteration - 1 and frameUpdateTable[Index] or nil
	end
	frameUpdateTable[1] = lastIteration
	local labelText = tostring(math.floor(timeFunction() - start >= 1 and #frameUpdateTable or #frameUpdateTable / (timeFunction() - start))) .. " FPS"
	if lastIteration >= nextLabelUpdate then
		nextLabelUpdate = lastIteration + UPDATE_LABEL_COOLDOWN
		fpsIcon:setLabel(labelText)
	end
end)

I recommend checking out the Introduction and Features pages to understand what each icon method does:

ForeverHD · May 10, 2021, 8:51am

This should be fixed now in v2.5.2:

KasimAkram · May 10, 2021, 1:02pm

Works perfectly, thank you and have a great rest of your day!

tquti · May 10, 2021, 8:05pm

Thank you it worked! I’ve been looking for this for so long!

tquti · May 11, 2021, 10:30pm

This is really good but how would you be able to make a ping counter?