Scoreboard

Probaly a nooby question that anyone could do but i cant figure it out.
Here i have a scoreboard. Its the darkrp replacement scoreboard. I want to make some icons that certain ranks have. How would i do that?

You’d have to learn how to use vgui and DImages, or directly paint the texture using the surface library.

I know how to use that, But that dont fix my problem. I want to know how i can make that superadmin have a shield and users and vip have a default one.

Create a DImage element, and set the image based on the player rank / group.

Here’s all the icons if you need them by the way: http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png

How would i do that, confused :expressionless:

Something like this in your scoreboard row code:
[lua]local _icon = vgui.Create( “DImage”, parentPanel );
_icon:SetMaterial( “icon16/money_dollar.png” );
_icon:SizeToContents( );
_icon:SetPos( 0, 0 );[/lua]

All of the icons are where ShadowRanger linked you to; if you’d like an interactive way to search the icons go here: http://www.famfamfam.com/lab/icons/silk/preview.php

All of them are in Garry’s Mod in the icon16/ folder as pngs.

K so what is the rank going in of there

Are you sure you can do this yourself? Do you have any experience in Garry’s Mod Lua?

eh a little , But not Derma. I most do swep and just simple ents

Go look at derma tutorials.

If you want to make it look nice use the Panel:Paint(w,h) function to draw over it.

Maybe have a look at other scoreboard codes and see how they do it.

Alright, fair enough. As AIX-Who suggested, looking into some Derma tutorials and guides is a good idea. You could also have a look at other open source Garry’s Mod scoreboards and learn from them. There’s heaps of information that can help you on the internet with this which are openly available to you, even from a simple Google search.

I fixed the lua tags; must have forgotten the /…

For the rank, you’d just to an if/else around the SetMaterial portion; or even better have a table set up like so:

[lua]local RANKS = {
superadmin = “shield”;
admin = “shield”;
vip = “money_dollar”;
regular = “money_coins”;

 // Default rank, in the event the UserGroup is unset for some reason.
 default = "application";

};[/lua]

then simply use:

[lua]// Get the group name and make it lowercase; fallback to “default” in case UserGroup is not set.
local _group = string.lower( ply:GetNWString( “UserGroup” ) || “default” );

// Link the group-name to the icon to be displayed and turn it into an image string
local _icon_name = “icon16/” … RANKS[ _group ] … “.png”;

// Apply the material
_icon:SetMaterial( _icon_name );[/lua]

That’s pretty much the entire system; you only need to position it on the row…

So like how will i position it?

Have i made it right?
This is the scoreboard player_row.lua



surface.CreateFont( "ScoreboardPlayerName", {
	font 		= "coolvetica",
	size 		= 20,
	weight 		= 500,
} )

local texGradient = surface.GetTextureID("gui/center_gradient")

local PANEL = {}

--[[-------------------------------------------------------
Name: Paint
---------------------------------------------------------]]
function PANEL:Paint()
	if not IsValid(self.Player) then return end

	local color = team.GetColor(self.Player:Team())

	if self.Player:Team() == TEAM_CONNECTING then
		color = Color(200, 120, 50, 255)
	end

	draw.RoundedBox(4, 0, 0, self:GetWide(), 24, color)

	surface.SetTexture(texGradient)
	surface.SetDrawColor(255, 255, 255, 50)
	surface.DrawTexturedRect(0, 0, self:GetWide(), 24)

	return true
end

--[[-------------------------------------------------------
Name: UpdatePlayerData
---------------------------------------------------------]]
function PANEL:SetPlayer(ply)
	if not IsValid(ply) then return end
	self.Player = ply
	self:UpdatePlayerData()
end

--[[-------------------------------------------------------
Name: UpdatePlayerData
---------------------------------------------------------]]
function PANEL:UpdatePlayerData()
	if not IsValid(self.Player) then return end
	local Team = LocalPlayer():Team()
	self.lblName:SetText(self.Player:Name())
	self.lblName:SizeToContents()
	self.lblJob:SetText(self.Player.DarkRPVars and self.Player.DarkRPVars.job or team.GetName(self.Player:Team()) or "")
	self.lblJob:SizeToContents()
	self.lblPing:SetText(self.Player:Ping())
	self.lblWarranted:SetImage("icon16/exclamation.png")
	if self.Player.DarkRPVars and self.Player.DarkRPVars.wanted then
		self.lblWarranted:SetVisible(true)
	else
		self.lblWarranted:SetVisible(false)
	end
end

--------------
--Icon Ranks--
--------------
local RANKS = {
     superadmin = "shield";
     admin = "shield";
     vip = "money_dollar";

     // Default rank, in the event the UserGroup is unset for some reason.
     default = "application";
};

// Get the group name and make it lowercase; fallback to "default" in case UserGroup is not set.
local _group = string.lower( ply:GetNWString( "UserGroup" ) || "default" );

// Link the group-name to the icon to be displayed and turn it into an image string
local _icon_name = "icon16/" .. RANKS[ _group ] .. ".png";

// Apply the material
_icon:SetMaterial( _icon_name );


--[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:Init()
	self.Size = 24

	self.lblName = vgui.Create("DLabel", self)
	self.lblJob = vgui.Create("DLabel", self)
	self.lblPing = vgui.Create("DLabel", self)
	self.lblWarranted = vgui.Create("DImage", self)
	self.lblWarranted:SetSize(16,16)

	-- If you don't do this it'll block your clicks
	self.lblName:SetMouseInputEnabled(false)
	self.lblJob:SetMouseInputEnabled(false)
	self.lblPing:SetMouseInputEnabled(false)
	self.lblWarranted:SetMouseInputEnabled(false)
end

--[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:ApplySchemeSettings()
	self.lblName:SetFont("ScoreboardPlayerName")
	self.lblJob:SetFont("ScoreboardPlayerName")
	self.lblPing:SetFont("ScoreboardPlayerName")

	self.lblName:SetFGColor(color_white)
	self.lblJob:SetFGColor(color_white)
	self.lblPing:SetFGColor(color_white)
end

--[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:DoClick()

end

--[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:Think()
	if not self.PlayerUpdate or self.PlayerUpdate < CurTime() then
		self.PlayerUpdate = CurTime() + 0.5
		self:UpdatePlayerData()
	end
end

--[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:PerformLayout()
	self:SetSize(self:GetWide(), self.Size)
	self.lblName:SizeToContents()
	self.lblName:SetPos(24, 2)

	local COLUMN_SIZE = 50

	self.lblPing:SetPos(self:GetWide() - COLUMN_SIZE * 1, 0)
	self.lblJob:SetPos(self:GetWide() - COLUMN_SIZE * 7, 1)
	self.lblWarranted:SetPos(self:GetWide() - COLUMN_SIZE * 8.8, 5)
end

--[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:HigherOrLower(row)
	if not IsValid(row.Player) or not IsValid(self.Player) then return false end

	if self.Player:Team() == TEAM_CONNECTING then return false end
	if row.Player:Team() == TEAM_CONNECTING then return true end

	if team.GetName(self.Player:Team()) == team.GetName(row.Player:Team()) then
		return team.GetName(self.Player:Team()) < team.GetName(row.Player:Team())
	end

	return team.GetName(self.Player:Team()) < team.GetName(row.Player:Team())
end

vgui.Register("RPScorePlayerRow", PANEL, "Button")

Not quite…

The RANKS table would be in that area outside of a function.

But these:
[lua]// Get the group name and make it lowercase; fallback to “default” in case UserGroup is not set.
local _group = string.lower( ply:GetNWString( “UserGroup” ) || “default” );

// Link the group-name to the icon to be displayed and turn it into an image string
local _icon_name = “icon16/” … RANKS[ _group ] … “.png”;

// Apply the material
_icon:SetMaterial( _icon_name );[/lua]

would need to be inside of a function; and you’d need the other code I showed earlier making it look like:

[lua]// Get the group name and make it lowercase; fallback to “default” in case UserGroup is not set.
local _group = string.lower( ply:GetNWString( “UserGroup” ) || “default” );

// Link the group-name to the icon to be displayed and turn it into an image string
local _icon_name = “icon16/” … RANKS[ _group ] … “.png”;

local _icon = vgui.Create( “DImage”, parentPanel );
_icon:SetMaterial( _icon_name );
_icon:SizeToContents( );
_icon:SetPos( 0, 0 );[/lua]

inside of a function.

Looking at your code, we see this:
[lua]–[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:Init()
self.Size = 24

self.lblName = vgui.Create("DLabel", self)
self.lblJob = vgui.Create("DLabel", self)
self.lblPing = vgui.Create("DLabel", self)
self.lblWarranted = vgui.Create("DImage", self)
self.lblWarranted:SetSize(16,16)

-- If you don't do this it'll block your clicks
self.lblName:SetMouseInputEnabled(false)
self.lblJob:SetMouseInputEnabled(false)
self.lblPing:SetMouseInputEnabled(false)
self.lblWarranted:SetMouseInputEnabled(false)

end[/lua]

This is where other elements are created. To follow this same system, we do something like this:
[lua]–[[-------------------------------------------------------
Name: Initialize the panel
---------------------------------------------------------]]
function PANEL:Init()
self.Size = 24

self.lblName = vgui.Create("DLabel", self)
self.lblJob = vgui.Create("DLabel", self)
self.lblPing = vgui.Create("DLabel", self)
self.lblWarranted = vgui.Create("DImage", self)
self.lblWarranted:SetSize(16,16)

// We'll also rename it to conform to the way the code looks -Acecool
self.lblGroupIcon = vgui.Create( "DImage", self );

-- If you don't do this it'll block your clicks
self.lblName:SetMouseInputEnabled(false)
self.lblJob:SetMouseInputEnabled(false)
self.lblPing:SetMouseInputEnabled(false)
self.lblWarranted:SetMouseInputEnabled(false)
self.lblGroupIcon:SetMouseInputEnabled(false);

end[/lua]

Next, we find the function where the layout is managed ( positioning ) and modify it

[lua]–[[-------------------------------------------------------
Name: PerformLayout
---------------------------------------------------------]]
function PANEL:PerformLayout()
self:SetSize(self:GetWide(), self.Size)
self.lblName:SizeToContents()
self.lblName:SetPos(24, 2)

local COLUMN_SIZE = 50

self.lblPing:SetPos(self:GetWide() - COLUMN_SIZE * 1, 0)
self.lblJob:SetPos(self:GetWide() - COLUMN_SIZE * 7, 1)
self.lblWarranted:SetPos(self:GetWide() - COLUMN_SIZE * 8.8, 5)

// Play with this until you position it where you want it -Acecool
self.lblGroupIcon:SetPos( self:GetWide( ) - COLUMN_SIZE * 2, 5 );

end[/lua]

Next, we need to figure out how to populate the data and modify the function – This could be a good spot to put the RANKS table-data too:
[lua]local RANKS = {
superadmin = “shield”;
admin = “shield”;
vip = “money_dollar”;
regular = “money_coins”;

 // Default rank, in the event the UserGroup is unset for some reason.
 default = "application";

};

–[[-------------------------------------------------------
Name: UpdatePlayerData
---------------------------------------------------------]]
function PANEL:UpdatePlayerData()
if not IsValid(self.Player) then return end
local Team = LocalPlayer():Team()
self.lblName:SetText(self.Player:Name())
self.lblName:SizeToContents()
self.lblJob:SetText(self.Player.DarkRPVars and self.Player.DarkRPVars.job or team.GetName(self.Player:Team()) or “”)
self.lblJob:SizeToContents()
self.lblPing:SetText(self.Player:Ping())
self.lblWarranted:SetImage(“icon16/exclamation.png”)
if self.Player.DarkRPVars and self.Player.DarkRPVars.wanted then
self.lblWarranted:SetVisible(true)
else
self.lblWarranted:SetVisible(false)
end

// This block is what determines which icon and sets the icon -Acecool
// Get the group name and make it lowercase; fallback to "default" in case UserGroup is not set.
// Additionally, it'd be a good idea to CACHE this data so we're not constantly opening network vars - edit this to cache it if the GetNWString doesn't cache data.
// To do that, you'd essentially set write the following:
// If the expiry time doesn't exist or has expired or the group hasn't been set
--if ( !self.Player.__UserGroupCacheExpiry || CurTime( ) - self.Player.__UserGroupCacheExpiry &gt; 60 || !self.Player.__UserGroup ) then
--	// Set the expiry and set the group.
--	self.Player.__UserGroupCacheExpiry = CurTime( );
--	self.Player.__UserGroup = string.lower( self.Player:GetNWString( "UserGroup" ) || "default" );
--end
-- local _group = self.Player.__UserGroup
// If you use the caching method above, remove the _group variable below and make sure the above one is uncommented
local _group = string.lower( self.Player:GetNWString( "UserGroup" ) || "default" );

// Link the group-name to the icon to be displayed and turn it into an image string - Additional fail-safe called a ternary operation just in case the rank doesn't exist as a value in the table
local _icon_name = "icon16/" .. ( ( RANKS && RANKS[ _group ] ) && RANKS[ _group ] || "cancel" ) .. ".png";

// Apply the material - You can use SetMaterial or SetImage; if one doesn't work, use the other
self.lblGroupIcon:SetImage( _icon_name );

// This just ensures that it's kept the right size for the icon. Should be in the PerformLayout but lblName does it so why not...
self.lblGroupIcon:SizeToContents( );

end[/lua]