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

Your code appears to work perfectly fine:

image

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).

image

1 Like

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.

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

2 Likes

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?

1 Like

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).

3 Likes

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!

10 Likes

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
Screen Shot 2021-05-09 at 1.10.45 PM

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.
Screen Shot 2021-05-09 at 1.07.10 PM

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!

4 Likes

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

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!

2 Likes

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))
2 Likes

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

1 Like

Thank you this will help a lot!

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)
1 Like

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:

4 Likes

This should be fixed now in v2.5.2:

1 Like

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

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

1 Like

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

1 Like

If you find a method of reliably measuring a player’s ping, yes.

Just ran upon that since the Topbar goes along with Roblox’s current state it’s impossible to natively make a topbar 100% out of this.

I’ve since changed a few lines of code in the module thinking that Roblox’s topbar is on and remove the additional spacing on the left and right sides.

Would be nice to have a native feature to not turn the topbar off along with Roblox’s topbar.

1 Like