Git Product home page Git Product logo

rprogress's Introduction

rprogress

Customisable radial progress bars for FiveM.

Table of contents

Demo Videos

Requirements

  • None!

Download & Installation

Configuration

Config.Async        = true  -- Whether to run the progress bar asyncronously

Config.From         = 0     -- Starting progress percentage
Config.To           = 100   -- Ending progress percentage

Config.Duration         = 5000          -- Duration of the progress
Config.Label            = "Loading..."  -- Text shown with the dial
Config.LabelPosition    = "bottom"

Config.Color        = "rgba(255, 255, 255, 1.0)"    -- Progress bar colour
Config.BGColor      = "rgba(0, 0, 0, 0.4)"          -- Progress background colour

Config.x            = 0.5 -- Horizontal position
Config.y            = 0.5 -- Vertical position


Config.Rotation     = 0     -- Rotation angle of dial in degrees
Config.MaxAngle     = 360   -- Max arc in degrees - 360 = full circle, 90 = quarter of a circle, etc
Config.Radius       = 60    -- Radius of the dial in pixels
Config.Stroke       = 10    -- stroke width of the dial in pixels

Config.ShowTimer    = true  -- Shows the timer countdown within the dial
Config.ShowProgress = false -- Shows the progress within the dial

Config.DisableControls = {
    Mouse           = false,    -- Disable mouse controls until progress is complete
    Player          = false,    -- Disable player movement until progress is complete
    Vehicle         = false     -- Disable vehicle control until progress is complete    
}

NOTE: Config.Position is based on screen size so setting Config.Position.x = 0.5 will be the center of the screen, Config.Position.x = 1.0 with be right-side of the screen, Config.Position.x = 0.0 will be the left-side of the screen, etc.

Client Functions

NOTE: DO NOT run these in a loop

Available exports:

-- starts the progress bar for the defined duration
-- This runs in sync so any code after this call won't be run until the progress is complete
exports.rprogress:Start(text, duration)

-- stops the progress bar early
exports.rprogress:Stop()

-- Display a custom progress bar by overriding config.lua values
exports.rprogress:Custom(options)
Display a progress bar with text for set duration
exports.rprogress:Start(text, duration)
Stop the progress bar early
exports.rprogress:Stop()
Override config.lua values
exports.rprogress:Custom({
    Async = true,
    x = 0.5,
    y = 0.5,
    From = 0,
    To = 100,
    Duration = 1000,
    Radius = 60,
    Stroke = 10,
    MaxAngle = 360,
    Rotation = 0,
    Label = "My Custom Label",
    LabelPosition = "right",
    Color = "rgba(255, 255, 255, 1.0)",
    BGColor = "rgba(0, 0, 0, 0.4)",
    DisableControls = {
        Mouse = true,
        Player = true,
        Vehicle = true
    },    
    onStart = function()
        -- do something when progress starts
    end	
    onComplete = function()
        -- do something when progress is complete
    end
})

Server Triggers

These won't run in async due to not being able to pass callbacks from server to client.

TriggerClientEvent('rprogress:start', source, text, duration)
TriggerClientEvent('rprogress:stop', source)
TriggerClientEvent('rprogress:custom', source, options)

Sync vs Async

The Start() method runs in sync so any code after the call to the method won't be run until the progress is complete. If you want a progress bar to run asyncronously, you can use the Custom() method with Async set to true and utilise the onStart and onComplete callbacks.

Async
print("before")

exports.rprogress:Custom({
    Async = true,
    Duration = 3000,
    onStart = function()
        print("start")
    end      
    onComplete = function()
        print("complete")
    end    
})

print("after")
Output
before
after
start
complete
Sync
print("before")

exports.rprogress:Custom({
    Async = false,
    Duration = 3000,
    onStart = function()
        print("start")
    end      
    onComplete = function()
        print("complete")
    end     
})

print("after")
Output
before
start
complete
after

Static Progress Bars

If you don't just want a progress bar that fills automatically, you can create a static one and update it as required.

Demo Video

-- Create new static progress bar
local ProgressBar = NewStaticProgress(options)

-- Show the progress bar
ProgressBar.Show()

-- Update the progress of the bar (0-100)
ProgressBar.SetProgress(progress)

-- Hide the progress bar
ProgressBar.Hide()

-- Destroy the bar (set as no longer needed)
ProgressBar.Destroy()

Partial Progress Bars

Too create a partial progress bar set the maxAngle property to the desired value:

exports.rprogress:Custom({
    maxAngle: 240
})

Result

You can also set rotation property to the desired value:

exports.rprogress:Custom({
    maxAngle: 240,
    rotation: -120
})

Result

Pie Progress

Setting the radius and stroke properties to equal values will produce a pie chart type progress:

exports.rprogress:Custom({
    Radius: 60,
    Stroke: 60
})

Result

Demo Commands

/rprogressStart [text] [duration]
/rprogressCustom [from] [to] [duration] [radius] [stroke] [MaxAngle] [rotation]
/rprogressSync [duration]
/rprogressAsync [duration]
/rprogressStatic

You can delete the demo.lua file and remove it's entry from fxmanifest.lua if these are not required.

Contributing

Pull requests welcome.

To Do

  • Allow sync and async
  • Allow bar colour customisation in config.lua
  • Allow control disable (Suggested by Korek)

Legal

License

rprogress - Customisable radial progress bars for FiveM.

Copyright (C) 2020 Karl Saunders

This program Is free software: you can redistribute it And/Or modify it under the terms Of the GNU General Public License As published by the Free Software Foundation, either version 3 Of the License, Or (at your option) any later version.

This program Is distributed In the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty Of MERCHANTABILITY Or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License For more details.

You should have received a copy Of the GNU General Public License along with this program. If Not, see http://www.gnu.org/licenses/.

rprogress's People

Contributors

mobius1 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.