[FREE][STANDALONE] bulletin - Customisable Notifications

FiveM Resource Development & Modding Releases
,
1

bulletin

Customisable notifications for FiveM. Mimics native GTAV notifications, but allows more customisation

b1
b1332×599 47.6 KB

Features

  • No external libraries
  • Modern JS - no jQuery bloat
  • Customisable screen position
  • Customise the look by adding your own css overrides to ui/css/custom.css
  • Animated auto-arrange
  • Supports default GTA:V and custom notification pictures
  • Supports queueing
  • Supports stacking
  • Supports color codes (~r~, ~b~, ~h~, etc)
  • Supports HTML as message

Demo Videos

Usage

Standard Notification

exports.bulletin:Send(message, timeout, position, progress, theme, exitAnim, flash)

-- or 

exports.bulletin:Send({
    message = 'Message',
    timeout = 5000,
    theme = 'success'
    ...
})

Advanced notification

exports.bulletin:SendAdvanced(message, title, subject, icon, timeout, position, progress, theme, exitAnim, flash)

-- or

exports.bulletin:SendAdvanced({
    message = 'Some Message',
    title = 'Some Title',
    subject = 'Some Subtitle',
    icon = 'CHAR_MAZE_BANK',
    ...
})

Pinned notification

local pinID = exports.bulletin:SendPinned({
    type = 'advanced' -- or 'standard'
    message = 'This is pinned!',
    title = 'Title',
    subject = 'Subject',
    icon = 'CHAR_MAZE_BANK'
})

-- unpin
exports.bulletin:Unpin(pinID)

-- unpin multiple
exports.bulletin:Unpin({pinID1, pinID2, pinID3, ...})

-- unpin all
exports.bulletin:Unpin()

Helper Functions

These are shorthand methods for sending themed notification. They take the same params / table as the Send() method:

-- Send standard success notification
exports.bulletin:SendSuccess(...)

-- Send standard info notification
exports.bulletin:SendInfo(...)

-- Send standard warning notification
exports.bulletin:SendWarning(...)

-- Send standard error notification
exports.bulletin:SendError(...)

Server Events

All methods can be triggered from both the client and server:

-- standard
TriggerClientEvent('bulletin:send', source, ...)

-- advanced
TriggerClientEvent('bulletin:sendAdvanced', source, ...)

-- pinned
TriggerClientEvent('bulletin:sendPinned', source, ...)

-- unpin
TriggerClientEvent('bulletin:unpin', source, ...)

Further documentation available on the GitHub page.

This is free and open-source, but if you’re feeling generous, you can pay what you want here

Links

GitHub
Latest Release

Changelog

Show

1.1.7

  • Fixed broken themes

1.1.6

  • Added support for pinning notifications with SendPinned() and Unpin() methods (See docs)
  • Added events for pinning from server side
  • Code cleanup

1.1.5

  • Hotfix

1.1.4

  • Added option to pass a table of options to Send() and SendAdvanced() methods
  • Added flash param to make the notifictation blink
  • Added support for animate.css for exit animations
  • Fixed exitAnim not working on advanced notifications

1.1.3

  • Added missing color for ~p~ code
  • Added Config.Stacking to enable / disable stacking
  • Added Config.ShowStackedCount to enable / disable stack counter
  • Code clean up

1.1.2

  • Adds support for stacking

1.1.1

  • Added support for notification sound

1.1.0

  • Fixed missing theme param in SendAdvanced method
  • Fixed queueing not working as intended
  • Added info to themes
  • Added shortcut methods SendSuccess, SendInfo, SendWarning and SendError

1.0.0

  • initial Commit

Other Releases

rprogress
esx_xp

32 Likes
2

Nice Release!

2 Likes
3

amazing work ,nice release

1 Like
4

lovely work keep it up! :hearts:

1 Like
5

Hey, @Mobius01.

Really nice release.
Good job!

1 Like
6

good work, best notifications!

1 Like
7

That looks clean

1 Like
8

I absolutely love this.

1 Like
9

looks really clean, nice work!

10

Hello we have the problem that the color purple is simply white and red is more pink

11

Awesome!

12

v1.1.3 Released

  • Added missing color for ~p~ code
  • Added Config.Stacking to enable / disable stacking
  • Added Config.ShowStackedCount to enable / disable stack counter
  • Code clean up

Download

13

You can customise the colors in ui/css/app.css

.bulletin-notification .w,
.bulletin-notification .s {
    color: #fff;
}

.bulletin-notification .r {
    color: #ef075d;
}

.bulletin-notification .g {
    color: #a3ff12;
}

.bulletin-notification .b {
    color: #0099cc;
}

.bulletin-notification .y {
    color: #ffcc00
}

.bulletin-notification .o {
    color: #F76A2E;
}

.bulletin-notification .h {
    font-weight: bold;
}

I forgot to add the class definition for the ~p~ code that’s why it’s white. It’s fixed in v1.1.3.

2 Likes
14

Thanks for fast Fix good support :grin: :scream_cat:

1 Like
15

Hello! How do we use it in server-sided scripts?

2 Likes
16

Love this, very clean notification.

2 Likes
17 
TriggerClientEvent('bulletin:send', source, message)

TriggerClientEvent("bulletin:sendAdvanced", source, message, title, subject, icon)
18

how to put in all notifications in es extended?

19

Open es_extended/client/functions.lua and edit the functions:

ESX.ShowNotification = function(msg)
    exports.bulletin:Send(msg)
end

ESX.ShowAdvancedNotification = function(sender, subject, msg, textureDict, iconType, flash, saveToBrief, hudColorIndex)
    exports.bulletin:SendAdvanced(msg, sender, subject, textureDict)
end
20

Very Thanks!!!

1 Like