Fix your module
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?
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
- Drop the module into ReplicatedStorage
- Create a LocalScript within StarterPlayerScripts
- 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
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!
5 Likes
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
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)
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).
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