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

Resources Community Resources
#84

For this you’ll want the deselectWhenOtherIconSelected property:

As an additional tip, you can also chain events and properties using bindEvent and setProperty.

So your final code looks like…

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


Icon.new()
	:setImage(6748815045, "deselected")
	:setImage(6748815950, "selected")
	:bindToggleKey(Enum.KeyCode.M)
	:setLeft()
	:setProperty("deselectWhenOtherIconSelected", false)
	:bindEvent("deselected", function()
		game.SoundService.MainSounds.Volume = 2
	end)
	:bindEvent("selected", function()
		game.SoundService.MainSounds.Volume = 0
	end)


local icon2 = Icon.new()
	:setImage(6748816692, "deselected")
	:setImage(6748817462, "selected")
	:bindToggleKey(Enum.KeyCode.N)
	:setLeft()
	:setProperty("deselectWhenOtherIconSelected", false)
	:bindEvent("deselected", function()
		game.SoundService.Radios.Volume = 2
	end)
	:bindEvent("selected", function()
		game.SoundService.Radios.Volume = 0
	end)

Et voila!

image

5 Likes
#85

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

This means that mammoth of code…

… 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:

3 Likes
#86

Hmm strange…
image
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)
#87

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
#88

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.

#89

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

2 Likes
#90

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
#91

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
#92

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!

11 Likes
#93

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
#94

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

#95

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
#96

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
#97

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

1 Like
#98

Thank you this will help a lot!

#99

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

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
#101

This should be fixed now in v2.5.2:

1 Like
#102

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

#103

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

1 Like