# outsider notify advanced

{% hint style="danger" %}
Announce is server side only!
{% endhint %}

<details>

<summary>Announce notify</summary>

{% code lineNumbers="true" fullWidth="true" %}

```lua
-- SERVER SIDE ONLY
RegisterCommand("announce",function()

local data = { 
        message = {
            title = "Server Announcement !!!",
            text = "first message",
            --text2 = "second message", -- this is optional
        },
        barType = "linear", -- or circular, this is to show the duration
        barColor = "lightblue" -- any color
        duration = 8000,                  -- message duration if text2 defined will be displayed at the half of duration
        sound = {                         -- remove if no sound needed
            name = "alert.wave",          -- sounds found in sounds folder
            volume = 0.5                  -- volume
        },
        image = {                           -- remove if no image needed
            name = "generic_horse_mod.png", -- can use image from images folder must contain the extension , can also use nui path 
            animType = "bounce", -- anim types a list is found below        
        },
 }
 
-- -1 will show to all players
exports.outsider_notifications:NotifyAnnounce(-1, data)

--USE EXPORT OR EVENT ONLY ONE IS NEEDED
--TriggerClientEvent(source,"outsider_notifications:NotifyAnnounce",data)
end, false)
```

{% endcode %}

</details>

<figure><img src="https://1829272483-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDj5GR14ds8g9h62arvtA%2Fuploads%2FQvaUvxWm0JAVuSZm0INn%2FScreenshot%202024-09-11%20004052.png?alt=media&#x26;token=7d0699c8-663e-433d-9cb8-cbe93950329c" alt="" width="375"><figcaption></figcaption></figure>

<details>

<summary>Simple notify</summary>

<pre class="language-lua" data-line-numbers><code class="lang-lua"><strong>--SHARED
</strong>RegisterCommand("simple",function()
-- this example is for client side
<strong>local data = {
</strong>        message = {
            text = "first message add text color ~b~wherever~ ",-- supports colors anywhere or images or cash
        },
        duration = 9000,
        position = "center-right",               -- or top-right, bottom-left, bottom-right
        sound = {                         -- remove if no sound
            name = "alert.wave",
            volume = 0.2
        },
}
<strong>exports.outsider_notifications:NotifySimple(data)
</strong><strong>end, false)
</strong><strong>
</strong><strong>--CLIENT SIDE PICK ONE ONLY export or event
</strong>--TriggerEvent("outsider_notifications:NotifySimple",data)
--exports.outsider_notifications:NotifySimple(data)

--SERVER SIDE
<strong>--TriggerClientEvent("outsider_notifications:NotifySimple",source,data)
</strong><strong>--exports.outsider_notifications:NotifySimple(source,data)
</strong>
-- more options at the bottom of this page
</code></pre>

</details>

<figure><img src="https://1829272483-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDj5GR14ds8g9h62arvtA%2Fuploads%2FWTlQzWUlvA4rndHJCXbo%2FScreenshot%202024-09-11%20002012.png?alt=media&#x26;token=4acc925f-636e-4622-bda8-d994faff8908" alt="" width="316"><figcaption></figcaption></figure>

<details>

<summary>Adavanced notify</summary>

{% code lineNumbers="true" %}

```lua
--SHARED
RegisterCommand("advanced",function()
local data = {
    message = {
        title = "Notification tittle", -- can add colors
        text = "first message can include images",
        --text2 = "second text" -- optional
    },
    barType = "circular", -- or linear
    barColor = "lightgreen",
    duration = 8000,
    position = "top-left",
    sound = { -- remove if not wanted
        name = "alert.wav", -- must be in sounds folder
        volume = 0.2
    },
    image = { -- remove if not needed 
        name = "generic_horse_mod.png", -- to use path start with nui this is for the main icon
        animType = "coin-roll",         -- if defined will play animation this is for the main icon
            -- text images and animations can be added to the text and text2 THESE ARE OPTIONAL
        text = ("nui://outsider_policeman/web/images/%s.png"):format("provision_trinket_deputy_star"),  -- only if you have text defined
        textAnimType = "bounce",                                                                        -- zoom-in only if you have the above defined
        text2 = ("nui://outsider_policeman/web/images/%s.png"):format("provision_trinket_deputy_star"), -- only if you have text2 defined
        text2AnimType = "coin-roll",  
    },
}
exports.outsider_notifications:NotifyAdvanced(data)
end,false)

--CHOOSE EXPORT OR EVENT DO NOT USE BOTH
--CLIENT
--TriggerEvent("outsider_notifications:NotifyAdvanced",data)
--exports.outsider_notifications:NotifyAdvanced(data)

--SERVER
--TriggerClientEvent("outsider_notifications:NotifyAdvanced",source,data)
--exports.outsider_notifications:NotifyAdvanced(source,data)

-- se more options at the bottom of this page
```

{% endcode %}

</details>

<figure><img src="https://1829272483-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDj5GR14ds8g9h62arvtA%2Fuploads%2FTEX9fIwuVQyX9fiRRpkK%2FScreenshot%202024-09-10%20162048.png?alt=media&#x26;token=216a163a-d2b1-4e53-a7fd-2e66bc5c67ac" alt="" width="375"><figcaption></figcaption></figure>

## How to use the notify system

<details>

<summary>Advanced Key press</summary>

{% code lineNumbers="true" %}

```lua
-- CLIENT SIDE ONLY
RegisterCommand("advanced",function()
local data = {
    message = {
        title = "Notification ~2~tittle~",
        text = "press [enter] to accept or [backspace] to reject", -- using brackets it will add key cap effect
        --text2 = "this is optional"
    },
    barType = "circular", -- or linear
    barColor = "lightgreen",
    duration = 8000,
    position = "top-left",
    sound = { -- remove if not wanted
        name = "alert.wav", -- must be in sounds folder
        volume = 0.2
    },
    image = { -- remove if not needed 
        name = "generic_horse_mod.png", -- to use path start with nui this is for the main icon
        animType = "coin-roll",         -- if defined will play animation this is for the main icon
            -- text images and animations can be added to the text and text2 THESE ARE OPTIONAL
        text = ("nui://outsider_policeman/web/images/%s.png"):format("provision_trinket_deputy_star"),  -- only if you have text defined
        textAnimType = "bounce",                                                                        -- zoom-in only if you have the above defined
        text2 = ("nui://outsider_policeman/web/images/%s.png"):format("provision_trinket_deputy_star"), -- only if you have text2 defined
        text2AnimType = "coin-roll",  
    },
    keyPress = { "enter", "backspace" }, -- this is the keys to press
}
-- this is a sync export it will wait for the return
local keypressed = exports.outsider_notifications:NotifyKeyPress(data)
if keypressed == -1 then return print("time expired") end
if keypress ~= -1 then
 print(keypressed) -- will print the key you added
 if keypress == "enter" then
   -- do code
 end
end
end,false)

--FOR ASYNC USE EVENT
-- example
TriggerEvent("outsider_notifications:NotifyKeyPress",data, function(keypressed)
    print("key pressed", keypressed) -- -1 means time run out to press key
end)
```

{% endcode %}

</details>

<figure><img src="https://1829272483-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDj5GR14ds8g9h62arvtA%2Fuploads%2F4FIh4nMuwXrCzSHifa4r%2FScreenshot%202025-01-09%20000335.png?alt=media&#x26;token=3b0e1d9c-dae3-4dd1-af49-0fcff0e79f0f" alt="" width="375"><figcaption><p>it will wait for player to press a key or duration to finish</p></figcaption></figure>

***

### COLORS

* #### colors available can be found in the \*\*parse.js file\*\* add more if you want&#x20;
* prefix must be add wrapping around the text **\~b\~ hello\~**&#x20;
* works for title text and text2

{% code lineNumbers="true" %}

```lua
-- using colors in your title text and text2

---@example
message = {
  title = "Notification ~b~Title~" -- Ttile will be displayed in lightblue
  text = "theres ~2~9 possible positions~ for the notifications" --  will be displayed in lightblue
  text2 = "theres ~2~9 possible positions~ for the notifications" -- this is optional
}

```

{% endcode %}

<figure><img src="https://1829272483-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDj5GR14ds8g9h62arvtA%2Fuploads%2FTEX9fIwuVQyX9fiRRpkK%2FScreenshot%202024-09-10%20162048.png?alt=media&#x26;token=216a163a-d2b1-4e53-a7fd-2e66bc5c67ac" alt="" width="375"><figcaption><p>dynamic color in text</p></figcaption></figure>

***

### IMAGES&#x20;

* text can include images **(Announce notify dont have this option)**
* add the prefix **{image}** anywhere in your text the image must be defined in **Images table**
* note that the image increases the text height so be mindfull were you use it
* note that simple notify does not need a title

{% code lineNumbers="true" %}

```lua
--images on the text and text 2 for both advanced or simple notify

---@example
message = {
  title = "Notification title" -- !simple notify dont have titles
  text = "first message can include images {image}" -- will display image for last
  text2 = "second message {image} can have images" -- will display image where you put it
}

image = {
  name = "imagename.png" -- will apply the image for the title, message.title does not need {image}
  text = "imagename.png" -- this image will be applied to text where {image} is
  text2 = "imagename.png" --this image will be for text 2 where {image} is
} 

```

{% endcode %}

<figure><img src="https://1829272483-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDj5GR14ds8g9h62arvtA%2Fuploads%2FJ1M03ckdPMKlf9r3y5lO%2FScreenshot%202024-09-10%20161718.png?alt=media&#x26;token=aee9380d-cc88-458f-a5f7-7fdf6de56677" alt="" width="375"><figcaption></figcaption></figure>

***

### CUSTOM STLYES

* you can apply custom style to the text like addinga bold property or text height or anything else

{% code lineNumbers="true" %}

```lua
-- if styles is defined it will apply them be sure to know what you are doing

---@example
message = {
  text = "first message can include images"
  text2 = "second messahe can have images" -- this is optional
  styles = {
    fontWeight = 'bold' -- text and text 2 will be bold
    textShadow = '2px 2px 5px rgba(0, 0, 0, 0.7)' -- text and text2 will have shadow
  }
}
  
```

{% endcode %}

***

### SOUNDS

* you can apply sounds to notifications
* sounds must be found in sounds folder of this script

{% code lineNumbers="true" %}

```lua
-- if sound is defined it will apply sound to t notificatios

---@example

sound = {                         
    name = "alert.wave", -- some sounds are included look in sounds folder
    volume = 0.5 -- control sound
},


```

{% endcode %}

***

### ANIMATIONS

* can make images have animations &#x20;

{% code lineNumbers="true" %}

```lua
-- if the animTyoes are defined they will play animations

---@example
message = {
  title = "Notification title" -- simple notify dont have titles
  text = "first message can include images {image}"
  text2 = "second messahe can have images {image}" -- this is optional
}

image = {
  name = "imagename.png" -- will apply the image for the title, title does not need{image}
  animType = "coin-roll" -- zoom-in also is available this will play animation for the image title
  text = "imagename.png" -- this image will be applied to text where {image} is
  textAnimType = "coin-roll" -- this will play animation for any image found on the text
  text2 = "imagename.png" --this image will be for text 2 where {image} is
  text2AnimType = "zoom-in" -- this will play animation for any image found in text2
}


```

{% endcode %}

***

{% code title="animations available" lineNumbers="true" %}

```markdown
- zoom-in
- coin-roll
- bounce
- pulse
- shake
 rotate
```

{% endcode %}

### CASH  DISPLAY

* can display animation of cash going up or going down in notifications
* this works for simple notifications and advanced

{% code lineNumbers="true" %}

```lua
-- if cash is defined then it will play the animation 
message = {
  title = "Notification title" -- simple notify dont have titles
  text = "first message can include images {cash}" -- define where to display by adding {cash}
}
cash = { from = 20, to = 220 } -- an animation from 20 to 220 will play

```

{% endcode %}

***

### POSITIONS

* there's 9 possible posiitons for simple and davanced notify

{% code lineNumbers="true" %}

```lua
 -- available notify positions

top-right
top-left
top-center
center
center-left
center-right
bottom-right
bottom-left
bottom-center
```

{% endcode %}

***

### KEY CAP DISPLAY

* will display a keyboard cap to symbolize a key press&#x20;
* note this can be used in any notification and it doesnt send press key event, only adds the key cap&#x20;

{% code lineNumbers="true" %}

```lua
message = {
  title = "Notification title" -- simple notify dont have titles
  text = "press [escape] to see pause menu" -- will display a key cap with name escape
}

```

{% endcode %}
