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

D0RYU · August 6, 2021, 1:16am

And I am the 300th reply

anyways I have been using the module and it is nice

ForeverHD · August 6, 2021, 4:10pm

v2.7.3

Added a dynamic healthbar to replace the static core healthbar. It appears to the right of the screen when the localPlayer is damaged.
Added IconController.disableHealthbar(bool)
Fixed the updating of menu and dropdown canvases when an icon within is resized.

These should hopefully resolve your issues @apenzijncoolenleuk1

KINGfarihin · August 7, 2021, 8:44am

my tobpar broken when i not close gui . how do i fix

debounce = false

local player = game:GetService(“Players”).LocalPlayer

local playerGui = player.PlayerGui

local replicatedStorage = game:GetService(“ReplicatedStorage”)

local iconModule = replicatedStorage.Icon

local Icon = require(iconModule)

local gui = playerGui:WaitForChild(“Menu”):WaitForChild(“Frame”)

local iconModule = game:GetService(“ReplicatedStorage”).Icon

local IconController = require(iconModule.IconController)

local Themes = require(iconModule.Themes)

local nanobloxIcon = Icon.new()

:setOrder(1)

:setName(“Menu”)

:setTheme(Themes.RedGradient)

:setImage(2038908845, “deselected”)

:setImageYScale(0.5, “deselected”)

:setImage(2038908845, “selected”)

:bindEvent(“selected”, function()

if debounce == false then

gui:TweenPosition(UDim2.new(0, 0,0.323, 0),“Out”,“Quad”,0.5)

wait(1)

debounce = true

end

end)

:bindEvent(“deselected”, function()

if debounce == true then

gui:TweenPosition(UDim2.new(0, -95,0.323, 0),“Out”,“Quad”,0.5)

wait(1)

debounce = false

end

end)

local icons = IconController.getIcons()

for _, icon in pairs(icons) do

IconController.clearIconOnSpawn(icon)

end

cloakedyoshi · August 7, 2021, 1:13pm

I recently updated to this new version, and I see two empty health bars when I die. Is this a bug or am I doing something wrong?

thebrickplanetboy · August 8, 2021, 12:31am

Why does the dynamic health bar don’t have a hurt overlay?

Hurt overlay (from core Health bar):
robloxapp-20210808-0729335.wmv (1.8 MB)

Lobestone · August 9, 2021, 12:42am

Is there a setting I’m missing that’ll make a Icon act on it’s own regardless if another Icon is clicked?

I’m trying to set an Icon as a simple toggle button, but when I click another Icon, the Icon ‘un-toggles’.

ForeverHD · August 9, 2021, 11:32am

v2.7.4

@KINGfarihin This should be fixed now. Please let me know if any problems persist after updating to the latest version.

@cloakedyoshi In addition to fixes mentioned in DMs, the fake healthbar’s been further improved to significantly reduce the potential of double-healthbars (although not 100% since Roblox unfortunately still don’t provide any signals).

@thebrickplanetboy This is a side effect of disabling the Healthbar Core Gui. I’ve improved the fake healthbar in this latest update so that it will activate only if you set an icon to the right.

@nurokoi Thanks for the report! This (and a few other related bugs) have now been fixed in the update.

ForeverHD · August 9, 2021, 11:33am

The deselectWhenOtherIconSelected property will help you there:

uhi_o · August 9, 2021, 11:45am

For some reason I’m not able to use this on mobile when there’s a label covering the topbar button.

Let’s say you have the topbar button, and we have a label on top of it. When pressing on it on PC, it works perfectly fine as intended. But on mobile I need to find the perfect area to click to trigger it which is the area without text on that label.

Any idea how I should go to fix this?

ForeverHD · August 9, 2021, 12:13pm

Can you provide a link to the place, a video on mobile if possible, and the construction code you used to make the icon?

uhi_o · August 10, 2021, 2:44pm

My bad, sorry for the late reply.

This is from another game, not the issue I said above but it’s the same problem.

Device is a Samsung S20. I couldn’t get the exact spot to click this time while recording. I assume this is a Roblox issue?

Note: The other buttons on screen work. In other games too.

And here’s the code I used for the topbar

NewIcon = Icon.new()
	:setLabel("Staff Chat", "deselected")
	:setLabel("Close Chat", "selected")
	:setRight()
	
	NewIcon.selected:Connect(function()
		TweenService:Create(script.Parent.Parent, TweenInfo.new(.5, Enum.EasingStyle.Quint, Enum.EasingDirection.Out), {
			Size = UDim2.new(1, 0, 1, 0)
		}):Play()
		NewIcon:clearNotices()
	end)
	
	NewIcon.deselected:Connect(function()
		TweenService:Create(script.Parent.Parent, TweenInfo.new(.25), {
			Size = UDim2.new(0.001, 0, 0.001, 0)
		}):Play()
	end)

Nothing else, other than :notify and :clearNotices

ForeverHD · August 10, 2021, 3:08pm

Cheers for the report. Making sure you’re using the most up to date TopbarPlus (simply re-add the model), can you change line 987 to 997 to the following please:

instances.iconButton.MouseButton1Click:Connect(function()
	if not self._draggingFinger and self.isSelected then
		self:deselect()
		return true
	end
	self:select()
end)

Does the problem fix after this?

uhi_o · August 10, 2021, 3:17pm

It appears to not work on pc anymore. Didn’t try on my phone.

Edit: I was changing the wrong lines
It’s working now, just can’t close.

ForeverHD · August 10, 2021, 3:39pm

Okay changing…

if not self._draggingFinger and self.isSelected then

to:

if self.isSelected then

should do the trick then.

I’ll officially deploy this for the next TopbarPlus update.

Not0ffSale · August 13, 2021, 11:21am

Edit: Problem fixed i needed to do

:bindEvent("selected", function()
  print("The icon was selected")
end)

and not

:selected:Connect(function()
    shopFrame.Visible = true
end)

PysephDEV · August 13, 2021, 1:36pm

Hey! I’ve started using this module, and I’ve a question I’d like to clarify on if possible - is there a way to change the TweenInfo information on how the items open/close? I find the elastic / bouncy behavior intrusive in terms of how visually “excessive” it is, and would much rather prefer something more easing to the eye such as Quad. Do I have to edit the source by myself? As I haven’t found any information after skimming through the API docs. Many thanks beforehand.

Nevermind, it seems that the themes module is exactly what I was looking for.

PysephDEV · August 13, 2021, 1:44pm

Adding onto this, an annoying issue I keep noticing is the fact that the icon keeps jumping back and forth when being selected & deselected. Is there a way to stop this behavior? I can’t seem to find anything in the themes module about this.

All actions use the default quad information, and the theme is set to the theme I am editing:

ForeverHD · August 13, 2021, 2:17pm

I’m guessing your icon looks something like this?

Icon.new()
	:setImage(4882429582)
	:setLabel("Mute Ambience", "hovering")

You don’t need the hovering state, simply remove that and it will automatically apply it to deselected and selected:

Icon.new()
	:setImage(4882429582)
	:setLabel("Mute Ambience")

More details on states at the bottom of this page:

PysephDEV · August 13, 2021, 2:19pm

That is not what I am looking for, as I only want the text to be visible upon hovering to minimize total space used.

PysephDEV · August 13, 2021, 2:24pm

Trying other ways to go about this, and ended up with this unexpected(?) behavior:

code:

local BGAudioIcon = Icon.new()
BGAudioIcon:setImage("rbxassetid://7248002480")
BGAudioIcon:setLabel("")

local State = "Mute Ambience"
BGAudioIcon.selected:Connect(function()
	BGAudioIcon:setImage("rbxassetid://7248002631")
	
	State = "Unmute Ambience"
	BGAudioIcon:setLabel(State)
end)
BGAudioIcon.deselected:Connect(function()
	BGAudioIcon:setImage("rbxassetid://7248002480")
	
	State = "Mute Ambience"
	BGAudioIcon:setLabel(State)
end)
BGAudioIcon.hoverStarted:Connect(function()
	BGAudioIcon:setLabel(State)
end)
BGAudioIcon.hoverEnded:Connect(function()
	BGAudioIcon:setLabel("")
end)