[FREE][STANDALONE] Port of Timer Bar 2 to FiveM

FiveM Releases
, , ,
1

CLM ProgressBar - Standalone

Hello, today I make available to everyone a port of TimerBar 2 created by Rootcause on ■■■■■■ for FiveM.

Original link: GitHub - root-cause/■■■■■■-timerbars

image

Installation

  1. Download the script. (GitHub - Daudeuf/clm_ProgressBar: Port of TimerBar 2 made by Rootcause for ■■■■■■ to FiveM)
  2. Extract wherever you want into your resources.
  3. Add ensure clm_ProgressBar
  4. Be sure not to rename the script

To use

Example

local API_ProgressBar = exports["clm_ProgressBar"]:GetAPI()

local bar_BarTimerBar
local bar_CheckpointTimerBar
local bar_PlayerTimerBar
local bar_TextTimerBar

RegisterCommand("example_add", function()

    -- Bar TimerBar
    bar_BarTimerBar = API_ProgressBar.add("BarTimerBar", "CAPTURING")

    bar_BarTimerBar.Func.setTitleColor({241, 64, 26, 255})
    bar_BarTimerBar.Func.setHighlightColor({241, 241, 26, 255})

    bar_BarTimerBar.Func.lib.BarTimerBar.setBackgroundColor({26, 241, 222, 255})
    bar_BarTimerBar.Func.lib.BarTimerBar.setForegroundColor({241, 26, 238, 255})

    Citizen.CreateThread(function()
        local progress = 0.0

        while true do
            Citizen.Wait(0)
            bar_BarTimerBar.Func.lib.BarTimerBar.setProgress(progress)
            progress = progress + 0.001
        end
    end)

    -- Checkpoint TimerBar
    bar_CheckpointTimerBar = API_ProgressBar.add("CheckpointTimerBar", "BASES", nil, 5)

    bar_CheckpointTimerBar.Func.setTitleColor({68, 241, 26, 255})
    bar_CheckpointTimerBar.Func.setHighlightColor({241, 166, 26, 255})

    bar_CheckpointTimerBar.Func.lib.CheckpointTimerBar.setColor({26, 241, 160, 255})
    bar_CheckpointTimerBar.Func.lib.CheckpointTimerBar.setInProgressColor({114, 26, 241, 255})
    bar_CheckpointTimerBar.Func.lib.CheckpointTimerBar.setFailedColor({241, 26, 26, 255})

    Citizen.CreateThread(function()
        local old = 3
        local last = 2
        local current = 1

        while true do
            Citizen.Wait(1000)

            bar_CheckpointTimerBar.Func.lib.CheckpointTimerBar.setCheckpointState(old, 2)
            bar_CheckpointTimerBar.Func.lib.CheckpointTimerBar.setCheckpointState(last, 1)
            bar_CheckpointTimerBar.Func.lib.CheckpointTimerBar.setCheckpointState(current, 0)

            old = last
            last = current
            current = current - 1
            if current == 0 then current = 5 end
        end
    end)

    -- Player TimerBar
    bar_PlayerTimerBar = API_ProgressBar.add("PlayerTimerBar", "Clem76", "1st")

    bar_PlayerTimerBar.Func.setTitleColor({241, 199, 26, 255})
    bar_PlayerTimerBar.Func.setHighlightColor({110, 102, 243, 255})

    -- Text TimerBar
    bar_TextTimerBar = API_ProgressBar.add("TextTimerBar", "MAP TIME", "00:08")

    bar_TextTimerBar.Func.setTitleColor({243, 151, 102, 255})
    bar_TextTimerBar.Func.setHighlightColor({243, 243, 102, 255})

    bar_TextTimerBar.Func.lib.TextTimerBar.setText("N0P3")
    bar_TextTimerBar.Func.lib.TextTimerBar.setTextColor({175, 102, 243, 255})
end)

RegisterCommand("example_remove_once", function()
    API_ProgressBar.remove(bar_PlayerTimerBar._id)
end)

RegisterCommand("example_remove_all", function()
    API_ProgressBar.clear()
end)

API

Func.getTitle() -- Return the title
Func.getTitleColor() -- Return the title color
Func.getHighlightColor() -- Return the title highlight color
Func.setTitle(String) -- Set the title
Func.setTitleColor({R, G, B, A}) -- Set the title color
Func.setHighlightColor({R, G, B, A}) -- Set the highlight color

Func.lib.TextTimerBar.getText() -- Return the text of the bar
Func.lib.TextTimerBar.getTextColor() -- Return the color of the text
Func.lib.TextTimerBar.setText(String) -- Set the text of the bar
Func.lib.TextTimerBar.setTextColor({R, G, B, A}) -- Set the color of the text

Func.lib.CheckpointTimerBar.getNumCheckpoints() -- Return the quantity of checkpoints
Func.lib.CheckpointTimerBar.getColor() -- Return the base color of a point
Func.lib.CheckpointTimerBar.getInProgressColor() -- Return the InProgress color of a point
Func.lib.CheckpointTimerBar.getFailedColor() -- Return the failed color of a point
Func.lib.CheckpointTimerBar.setColor({R, G, B, A}) -- Set the base color of a point
Func.lib.CheckpointTimerBar.setInProgressColor({R, G, B, A}) -- Set the InProgress color of a point
Func.lib.CheckpointTimerBar.setFailedColor({R, G, B, A}) -- Set the failed color of a point
Func.lib.CheckpointTimerBar.setCheckpointState(Index, State) -- Set the state of a checkpoint [ InProgress = 0, Completed = 1, Failed = 2 ]
Func.lib.CheckpointTimerBar.setAllCheckpointsState(State) -- Set the state of all checkpoints [ InProgress = 0, Completed = 1, Failed = 2 ]

Func.lib.BarTimerBar.getProgress() -- Return current bar progress percentage
Func.lib.BarTimerBar.getBackgroundColor() -- Return color of bar
Func.lib.BarTimerBar.getForegroundColor() -- Return color of empty bar
Func.lib.BarTimerBar.setProgress(Number) -- Set the current bar progress percentage [ min = 0.0, max = 1.0 ]
Func.lib.BarTimerBar.setBackgroundColor({R, G, B, A}) -- Set the bar color
Func.lib.BarTimerBar.setForegroundColor({R, G, B, A}) -- Set the empty bar color

Screenshot of the example
image
image

10 Likes
2

love :heart:

2 Likes
3

If you want more description or help to use it I can help you.

5

Hello, how to put only the map timer pls ?

Screenshot_20230423_124841_Chrome
Screenshot_20230423_124841_Chrome1080×2340 134 KB

6

Hi,

You can already load the API by putting:

local API_ProgressBar = exports[“clm_ProgressBar”]:GetAPI()

Then, to create a bar like the one you want, you can do:

local bar_TextTimerBar = API_ProgressBar.add(“TextTimerBar”, “MAP TIME”, “00:08”)

Then every second to change the displayed text, you can do:

bar_TextTimerBar.Func.lib.TextTimerBar.setText(“00:07”)

(the text can be changed at any time)

If you ever have any other questions, don’t hesitate :slight_smile:

7

For the bar_TextTimerBar is it possible to make a timer? If yes, how.

8

Hi,

Yes it is possible to put a timer, you have to change the text of the bar every second.

Here is an example :

local API_ProgressBar = exports["clm_ProgressBar"]:GetAPI()

local function formatNumber(num)
	return string.format("%02d:%02d", num//60, num%60)
end

RegisterCommand("test", function()
	local time = 120
    local progressBar = API_ProgressBar.add("TextTimerBar", "MAP TIME", formatNumber(time))
	
	for i=1, time, 1 do
		Citizen.Wait(1000)
		
		time = time - 1

		progressBar.Func.lib.TextTimerBar.setText(formatNumber(time))
	end
	
	API_ProgressBar.remove(progressBar._id)
end)

I hope this will help you

9

Hello, your work is fantastic, I would like to create a function that is triggered when the timer starts and stops at the end, but I can’t, do you have a solution?

1 Like
10

Hi, you can do this simply by adding a condition in your loop which increments the timer, if the time is at max, then you trigger the end function and just before starting the loop you trigger the start function.

11

Hello, do you have an example so that I can understand better, because I’m still having a little trouble, thank you!