[Release] pNotify - In-game JS Notifications Using NOTY

pNotify:

pNotify simply implements a Javascript notification library called NOTY.

I didn’t like all of the notifications in the chat box so I threw this together real quick, I didn’t plan on making it public so this may confuse some people. Just look at the examples and you should be able to understand how it works. This just simply sends a NUI message which then runs a JS function, that creates a notification, provided by the NOTY library.

Download:

https://github.com/Nick78111/pNotify

Preview:

http://i.imgur.com/QJm4ovX.jpg

Sorry for the low bit rate, I had to keep it low because I have a horrible upload speed.
The code ran in this video will be posted below in the examples.

Sending A Notification:

Client:

exports.pNotify:SendNotification({options})
or
TriggerEvent("pNotify:SendNotification", {options})

Server:

TriggerClientEvent("pNotify:SendNotification", -1, {options})

Setting a Queues Max:

~ This sets how many notifications, in the same queue, can be visible at a given time ~ If this isn't called before sending the first notification of that queue, it will be set to 5. It only needs to be set once.

Client:

exports.pNotify:SetQueueMax(queueName, Max)
or
TriggerEvent("pNotify:SetQueueMax", queueName, Max)

Server:

TriggerClientEvent("pNotify:SetQueueMax", -1, queueName, Max)

Options:

~ This is an array that contains the properties of the notification
  • type
  • layout
  • theme
  • text
  • timeout
  • queue
  • killer

You can view what these options do on their website.
There are also a lot more options but I won’t go ever them.

Valid Options:

~ Options marked with * are default
  • layout
  • top, topLeft, topCenter, topRight *
  • center, cenerLeft, centerRight
  • bottom, bottomLeft, bottomCenter, bottomRight
  • type
  • alert
  • success *
  • error
  • warning
  • info
  • theme - Changes the look of the notifications, you can edit or create custom themes inside html/themes.css
  • gta *
  • mint
  • relax
  • metroui

queue is set to “global” by default

Finally, an Example:

~ The result of these examples are in the screenshot above ~ These were ran in a chatCommand EventHandler

Client:

if cmd == "/notify" then
    exports.pNotify:SetQueueMax("global", 8)

    for i = 0, 5 do
        exports.pNotify:SendNotification({text = "Testing Notification", type = "error", timeout = math.random(1000, 10000)})
    end
    for i = 0, 3 do
        exports.pNotify:SendNotification({text = "You were given $100", type = "success", timeout = math.random(1000, 10000)})
    end	
    for i = 0, 4 do
        exports.pNotify:SendNotification({text = "Press F8 for more info", type = "info", timeout = math.random(1000, 10000)})
    end
end

if cmd == "/notify2" then
    exports.pNotify:SetQueueMax("left", 4)

    for i = 0, 5 do
        exports.pNotify:SendNotification({
            text = "Testing Notification",
            type = "error",
            timeout = math.random(1000, 10000),
            layout = "centerLeft",
            queue = "left"
        })
    end

    for i = 0, 3 do
        exports.pNotify:SendNotification({
            text = "You were given $100", 
            type = "success", 
            timeout = math.random(1000, 10000),
            layout = "centerLeft",
            queue = "left"
        })
    end	
    for i = 0, 4 do
        exports.pNotify:SendNotification({
            text = "Press F8 for more info", 
            type = "info", 
            timeout = math.random(1000, 10000), 
            layout = "centerLeft", 
            queue = "left"
        })
    end
end

if cmd == "/notify3" then
    TriggerEvent("pNotify:SetQueueMax", "right", 2)

    for i = 0, 5 do
        TriggerEvent("pNotify:SendNotification", {
            text = "SUCCCCEEESSSS",
            type = "success",
            timeout = math.random(1000, 10000),
            layout = "centerRight",
            queue = "right"
        })
    end

    for i = 0, 3 do
        TriggerEvent("pNotify:SendNotification", {
            text = "THIS BE A WARNING",
            type = "warning",
            timeout = math.random(1000, 10000),
            layout = "centerRight",
            queue = "right"
        })
    end
    exports.pNotify:SendNotification({text = "SUCCESS", type = "success", timeout = 200, layout = "centerRight", queue = "right"})
    exports.pNotify:SendNotification({text = "Hello?", type = "info", timeout = 2000, layout = "centerRight", queue = "right"})
    exports.pNotify:SendNotification({text = "Vehicle unlocked", type = "success", timeout = 200, layout = "centerRight", queue = "right"})
end

Error notification code:

  • The sound doesn’t come with the download
local oldError = error

function error(...)
	exports.pNotify:SetQueueMax("error", 2)
	exports.pNotify:SendNotification({
		text = "<b style='color:yellow'>There was a Lua error!</b> <br /><br /> <b style='color:red'> ".. ... .."</b><br /><br /><b style='color:yellow'>Press F8 to view it in the console.</b>",
		type = "error",
		queue = "error",
		timeout = 15000,
		layout = "bottomRight",
		sounds = {
			sources = {"sound-example.wav"}, -- For sounds to work, you place your sound in the html folder and then add it to the files array in the __resource.lua file.
			volume = 0.2,
			conditions = {"docVisible"} -- This means it will play the sound when the notification becomes visible.
		}
	})
	oldError(unpack({...}))
end

Server:

if message == "/notify4" then
    TriggerClientEvent("pNotify:SetQueueMax", -1, "lmao", 1)

    for i = 0 , 5 do 
        TriggerClientEvent("pNotify:SendNotification", -1, {
            text = "Testing Notification",
            type = "error",
            queue = "lmao",
            timeout = 10000,
            layout = "bottomCenter"
        })
    end
end

If this is too confusing, you can look at the documentation for NOTY here.

27 Likes

Thanks for the release :wink:

1 Like

Thats pretty neat! That demo looks sexy af! definitely using this, thanks alot!

Oh god, that’s so beautiful - Thank’s dude !

Thanks for the release! Is there any way to make them a little bigger?

Is -1 send to client Only? on all in the server?

-1 is to send to all clients, if you want to send it to a certain client, you put their id there.

so TriggerClientEvent(“pNotify:SendNotification”, source, {

right?

You can make it bigger by editing html/themes.css. You can also use html tags inside the text option. For example, text = "<h1>hello</h1>" would make the text really big.

That would be correct.

Use the code tags when showing code :wink:

`code` for one-liners and
```
– Code
```
for multi-lines :slight_smile:

1 Like

Works great , thanks saved me a bit of time :slight_smile:

Sweet… Thanks for an amazing way to show notifications

Hey guys, Im new to this, Could sombody show me an example at all? I sort of understand how it works, but at the same time unsure would be really appreciated!

So if i wanted this to use the pNotify, How would i go tabout doing that?

RegisterServerEvent('meleeInProgress')
AddEventHandler('meleeInProgress', function(street1, street2, sex)
	TriggerClientEvent("outlawNotify", -1, "~r~Fight initiated by a ~w~"..sex.." ~r~between ~w~"..street1.."~r~ and ~w~"..street2)
end)

Would i just do this? i may be wrong.

RegisterServerEvent('meleeInProgress')
AddEventHandler('meleeInProgress', function(street1, street2, sex)
	TriggerClientEvent("pNotify:SendNotification", -1, "~r~Fight initiated by a ~w~"..sex.." ~r~between ~w~"..street1.."~r~ and ~w~"..street2)
end)

[EDIT] Never mind i got it all figured out :smiley:

Really nice work. Thanks for the contrib.

Could you post what you figured out? would be nice if you shared it with the rest of us so we can give it a try aswell…

2 Likes

I have to convert a server to aSync at the moment, But its fairly simple me try get you an example:

In your pNotify/cl_notify you have an example in there

function SendNotifacation(options)

There is pretty much a template on a full custom notifaction so you can edit to your needs, and then what i did was this (to test)

Here is before i edited my code:

RegisterNetEvent("ls:lock")
AddEventHandler("ls:lock", function(lockStatus, vehicle)

		if lockStatus == 1 or lockStatus == 0 then

			SetVehicleDoorsLocked(vehicle, 2)
			SetVehicleDoorsLockedForPlayer(vehicle, PlayerId(), false)

			TriggerEvent("ls:notify", "Vehicle locked.", 0.080)
			if SoundEnable then
				TriggerEvent('InteractSound_CL:PlayOnOne', 'lock', 1.0)
			end

			TriggerServerEvent("ls:changeLockStatus", 2, plate)

		else

			SetVehicleDoorsLocked(vehicle, 1)
			SetVehicleEngineOn(vehicle, false, false, true)
			if SoundEnable then
				TriggerEvent('InteractSound_CL:PlayOnOne', 'unlock', 1.0)
			end
			TriggerEvent("ls:notify", "Vehicle unlocked.", 0.080)

			TriggerServerEvent("ls:changeLockStatus", 1, plate)
		end
end)

Here is what it looked like after:

RegisterNetEvent("ls:lock")
AddEventHandler("ls:lock", function(lockStatus, vehicle)

		if lockStatus == 1 or lockStatus == 0 then

			SetVehicleDoorsLocked(vehicle, 2)
			SetVehicleDoorsLockedForPlayer(vehicle, PlayerId(), false)

			TriggerEvent("pNotify:SendNotification", {lock})
			if SoundEnable then
				TriggerEvent('InteractSound_CL:PlayOnOne', 'lock', 1.0)
			end

			TriggerServerEvent("ls:changeLockStatus", 2, plate)

		else

			SetVehicleDoorsLocked(vehicle, 1)
			SetVehicleEngineOn(vehicle, false, false, true)
			if SoundEnable then
				TriggerEvent('InteractSound_CL:PlayOnOne', 'unlock', 1.0)
			end
			TriggerEvent("pNotify:SendNotification", {options})

			TriggerServerEvent("ls:changeLockStatus", 1, plate)
		end
end)

As you can see its now linked to the options function in pNotify instead of triggering a notification event :slight_smile:

You also dont need to string it to that code you can also do it like this ( i beleive i may be wrong)

RegisterNetEvent("ls:lock")
AddEventHandler("ls:lock", function(lockStatus, vehicle)

		if lockStatus == 1 or lockStatus == 0 then

			SetVehicleDoorsLocked(vehicle, 2)
			SetVehicleDoorsLockedForPlayer(vehicle, PlayerId(), false)

			TriggerEvent("pNotify:SendNotification", {lock})
			if SoundEnable then
				TriggerEvent('InteractSound_CL:PlayOnOne', 'lock', 1.0)
			end

			TriggerServerEvent("ls:changeLockStatus", 2, plate)

		else

			SetVehicleDoorsLocked(vehicle, 1)
			SetVehicleEngineOn(vehicle, false, false, true)
			if SoundEnable then
				TriggerEvent('InteractSound_CL:PlayOnOne', 'unlock', 1.0)
			end
			TriggerEvent("pNotify:SendNotification", {
                        text = "EXAMPLE TEXT",
                        type = "warning",
                        timeout = math.random(1000, 10000),
                        layout = "centerRight",
                        queue = "right"
                    })

			TriggerServerEvent("ls:changeLockStatus", 1, plate)
		end
end)

This one could be wrong but that the principle,
I also just woke up so i may have spelling mistakes etc xD

Hope this helped

Oh ok, thanks ill try this when I get home aswell :smiley: thank you

1 Like

Your basicly instead of triggering chat events and notification events you just trigger the pNotify instead :smiley:

1 Like

Here is a working example i did with a carlock script :slight_smile:

Before:

TriggerEvent("ls:notify", "Vehicle locked.", 0.080)

And After :smiley:

TriggerEvent("pNotify:SendNotification",{
            text = "Notification: <br /> Vehicle Locked.",
            type = "success",
            timeout = (1000),
            layout = "centerRight",
            queue = "global"
        })
1 Like