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

Can you provide details on how you reproduce this? If you could share an uncopylocked stripped down-place of just the isolated bugged icons even better.

2 Likes

Hello,

I’m also getting this bug, I’ve only started playing around with it recently and have already ran into this bug.

What i have done:
Added a wait before the icon function – Same Bug
Reimported the script – Same Bug

As Overfearful says, going into freecam and out again fixes it.

Here is a portion of the code,

local Fly
local Flyimg = "https://www.roblox.com/library/3170108676/letter-f"
local GS
local GSimg = "https://www.roblox.com/library/419504645/Letter-G"
local S
local Simg = "https://www.roblox.com/library/195452703/Letter-S"

function MakeIcons()
	-- Quick shortcuts to certain things
	-- Fly
	Fly = icon.new()
	Fly:setImage(Flyimg)
	Fly:setTip("Lets you fly!")
	Fly:setOrder(2)
	GS = icon.new()
	GS:setImage(GSimg)
	GS:setTip("Lets you skip anything that needs a gamepass")
	GS:setOrder(3)
	--Spawn
	S = icon.new()
	S:setImage(Simg)
	S:setTip("Teleports you to spawn")
	S:setOrder(4)
end

MakeIcons()

And another intreasting bug is that the images aren’t showing up on the buttons, Even when the buttons overlap any idea on how to fix this (and the main bug)?

Thanks.

1 Like

What version of TopbarPlus are you using? Can you update to the latest version (i.e. re-add the model back into your game) and see what happens. This sounds very familiar to a bug we patched in a previous version.

Edit: I’ve just tested your code and there does appear to be a bug. Ill look into this now

1 Like

Thanks for the report, this should be patched now:

1 Like

Just imported into the game with the code and it works. Thanks!
I am still getting the promblem with the images though, Do you know anyway to fix that?

Make sure to use the AssetId instead of the WebsiteId.

An easy way to convert a WebsiteId into an AssetId is by pasting it into the Texture property of a Decal for instance.

You can also get the AssetId by right clicking an item in the toolbox!

2 Likes

Ah, Thanks again!

This is an amazing module with a useful api document to learn. This module lets user have shortcuts to different settings or just make the screen cleaner altogether. I would definitly recommend this to someone else if they needed something like this. :slight_smile:

3 Likes

Fix your module
image

See Topbarplus - Contributing for writing bug reports. The image you pasted is for a script called MilkAdmin instead of TopbarPlus.

4 Likes

Why did this happen?

image

Hi @ForeverHD

Thanks for making this awesome module!

I was wondering if it would be possible to have just the image on the topbar, and when the mouse hovers over the image, it would display the text next to it (smooth tweening motion).
Is this already possible?

That was some incorrect error handling on my behalf! Feel free to reinstall TopbarPlus and it should be fixed now:

3 Likes

Sure can, make sure you have the latest version which I just released and do something like below:

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)

You can can customise the resizing tween by setting the resizeTransitionInfo, for example:

:set("resizeTransitionInfo", TweenInfo.new(0.2, Enum.EasingStyle.Back))

I’ve also updated the playground to include this example:

4 Likes

Hi, thanks for the quick reply.
The solution you provided is pretty cool, but it doesn’t seem to support scaling/moving other icons. As you can see in this video: TopBarPlus resizing icons problem. - YouTube

It would also be nice if I only have to set one property like :setAutoScaling(true), instead of manually having to connect to all the events.

EDIT: It seems the image doesn’t tween along with the frame. It just snaps into place. It would be nice if that would tween to.

1 Like

Yeah taking a relook at the construction code today it certainly isn’t code-friendly and accessible for beginners. I’ll start working towards a more significant update which includes an intuitive method like setAutoScaling and fixing the bugs you mentioned alongside more thorough testing.

This is your desired outcome right?

If there’s any other bugs/features you’d like added/fixed please do let me know asap and I can have these included in the update!

2 Likes

Yes that’s exactly what I want.
Does the image snap into place instantly or does it tween smoothly? I can’t really tell since it’s so fast.
I would prefer the latter.

I’m not aware of other bugs.

1 Like

Not currently, but here’s something I’ve put together at the development place of how it could work:

(This example uses the ‘Bounce’ tween, you could of course change that via the resizeTransitionInfo setting)

Speed of 0.2:

Speed of 2:

I’ll also likely add a separate repositionTransitionInfofor when the icons themselves shift on the topbar (currently it uses toggleTransitionInfo which is for everything else such as colors, transparency, etc) and potentially rename 1 or 2 action settings.

I’ll aim to release this update for sometime next week.

3 Likes

i dont understand how to use this plugin

  1. Drop the module into ReplicatedStorage
  2. Create a LocalScript within StarterPlayerScripts
  3. Require the module and create icons!

All info here:

local Icon = require(game:GetService("ReplicatedStorage").Icon)
local icon = Icon.new()
    :setImage(6326373239)
    :setLabel("Nanoblox")
3 Likes

I didn’t look through this thread alot but I have a question, how would I make multiple buttons able to be activated?

for example: i’m making a mute radio and mute music button, i want players to be able to mute both.

The music is in SoundService and it’s a soundgroup called “MainSounds”
The radio music is in SoundService and it’s a soundgroup called “Radios”

when working on the buttons this is what i got so far;

-- Within a LocalScript in StarterPlayerScripts and assuming TopbarPlus is placed in ReplicatedStorage
local Icon = require(game:GetService("ReplicatedStorage").Icon)


local icon = Icon.new()
:setImage(6748815045, "deselected")
:setImage(6748815950, "selected")
:bindToggleKey(Enum.KeyCode.M)
:setLeft()

icon.deselected:Connect(function()
	game.SoundService.MainSounds.Volume = 2
end)
icon.selected:Connect(function()
	game.SoundService.MainSounds.Volume = 0
end)



local icon2 = Icon.new()
:setImage(6748816692, "deselected")
:setImage(6748817462, "selected")
:bindToggleKey(Enum.KeyCode.N)
:setLeft()

icon2.deselected:Connect(function()
	game.SoundService.Radios.Volume = 2
end)
icon2.selected:Connect(function()
	game.SoundService.Radios.Volume = 0
end)

even the buttons don’t work it just changes icon

1 Like