In-Game Tablet with Web Based CAD/MDT Support


#1

Tabby

NUI Tablet for FiveM Servers for anyone to use. You may add to the tablet for your needs but by no means is it to be re-released without my permission.

Getting Started

These instructions will get you a copy of the project up and running on your server for production use.

Prerequisites

  • You should already have a functioning FiveM Server set up and running before you can install this mod.
  • Basic HTML experience.

Download Link

Installing

A step by step series of examples that tell you how to get the tablet up and running on your server.

1.) Place the "tab" folder under your resources folder in your FiveM server files.

2.) Add "start tab" to your server config file.

3.) Either restart your server or use the /refresh then /start tab command.

** Do Not Change The File Name From Tab It Is Made To Work With That Name. **

Usage

  • “M” key to open the tablet.

  • “ESC” to close the tablet and leave it on the page you were on next time it opens.

  • The tablet button on the bottom of the tablet will bring you back to the home screen with one click and then click it again to close.

  • Hover over an app to see a description of it. Select the app you wish to open.

  • To edit the web pages you’ll need to find the page you wish to edit (the actual HTML page in the files). I have left templates from my old server in there to help you with ideas and things to add in. For your CAD/MDT make sure you add your address in the iframe correctly on the opencad.html page.

Photos

Photos are a little outdated I haven’t been playing for awhile, just been busy. But you get the idea of it.

Update Notes

We are working on a new version of the tablet, release date unknown at this point. Any major issues will be fixed right away if needed.

  • V0.2 2018/06/16

  • Redesigned YouTube Page

  • V0.2 2018/01/17

  • New home screen

  • New home screen menu

  • Added new apps and information

  • Added home button functions click once to return to home screen click again to exit

  • Changed design of tablet to allow full web pages

  • Added theme

Known Bugs

  • Some tablet “apps” don’t render full screen on the tablet.

  • When closing with the “ESC” key, the “M” key may need to be pressed twice to open the tablet.

  • UPDATE Some bubble apps are not appearing or they hide drop-down menus. For the drop down menus please use your arrow keys. If your Bubble app is displaying blank, please contact support at bubble and request for your app to be allowed to be iframed.

  • The tablet doesn’t seem to like pop out/pop-ups web pages or redirects. Also, a lot of sites block iframes and may result in a white page display. E.G. Don’t click the watch on YouTube button, that makes a pop-up. Don’t click on any links that will make a pop up on web pages people may add. I’m sure there are lots more examples. Here is a solution to stopping pops but I am unsure if it break anything. It needs testing but here it is:
    On line 250 in the ui.html, paste this over the whole iframe section make sure you remove the other one and it is replaced with this one:

<iframe id="iframe" class="empty" src="about:blank" onload="HandleLocationChange(this, this.contentWindow.location.href)" sandbox="allow-forms allow-pointer-lock allow-scripts allow-same-origin" ></iframe>

Let me know how that works thru PM or thru the links provided in the readme on GitHub.

  • Please report any bugs you find to the author.

Support

Please file an issue on GitHub or check the readme on GitHub for information on how to reach the author.

Authors

  • Amin Yabut - Initial work

License

Not to be shared without explicit permission.

Community Shared Additions(tested)

Discord found by @Chip_W_Gaming

1 - Invite this bot to your Discord server: https://discordapp.com/oauth2/authorize?=&client_id=299403260031139840&scope=bot&permissions=536083583
https://forum.fivem.net/uploads/default/original/3X/0/0/00c187a74a6160c670f983e737942c230ff54a35.png

2 - Visit this website: https://titanembeds.com/ and login in the upper right corner with your Discord login, then click “Start here”

3 - On the next page, authorize the bot.

4 - The page after that, select the server you invited the bot to by clicking “Modify”
https://forum.fivem.net/uploads/default/original/3X/b/2/b2a45dad834ed98d82c354f278794bdc2b553711.png

5 - The page you are brought to will have a bunch of configurable settings. Edit as you see fit. When you edit the settings on the Titan website, you can set it to not open the sign in part in a separate popup.

Set this option to “true”.

6 - Once you get to the bottom of the page, you will see some links. Copy the “Embed” link

https://forum.fivem.net/uploads/default/original/3X/6/b/6b04175227ea9d18cda0c163d72d94b0284048f0.png

7 - Now open the “ui.html”

8 - Add a new link

<li data-title="Discord">
     	<a class="nav-myframe" href="https://titanembeds.com/embed/yourlink">
     	<i class="myicon material-icons">group</i>
     	</a>
    </li>

9 - To change the icon, visit: https://material.io/tools/icons/?style=baseline
Use one of the image names here and replace the word “group” in the code above.

10 - Restart the resource and open it. The first time you enter it, you will be asked for a name to use. DO NOT CLICK ANYTHING!!! Type in your name and press the ENTER key. You will need to log in again if you are away from it for too long or you restart your server.

Chat Command to Open Tablet

In the client.lua go to the bottom and comment out this block of code:

if (IsControlJustPressed(1, whatever this number will be)) then
                tabEnabled = not tabEnabled -- Toggle tablet visible state
                REQUEST_NUI_FOCUS(tabEnabled)
                print("The tablet state is: " .. tostring(tabEnabled))
                Citizen.Wait(0)
 end

Then above it add in this block of code to open the tablet with a chat command instead:

RegisterCommand("tab", function()
                tabEnabled = not tabEnabled -- Toggle tablet visible state
                REQUEST_NUI_FOCUS(tabEnabled)
                print("The tablet state is: " .. tostring(tabEnabled))
                Citizen.Wait(0)
 end)

Now /tab should open it instead of using a keybind. Thanks to @Chip_W_Gaming for writing the code. We will include it in the next update as an option.

Acknowledgments

  • This wouldn’t have been possible without the help of @throwarray.
  • Hat tip to anyone else who’s code was used.
  • Big thanks to codepen.io for ideas and examples.
  • Inspiration.

[HELP] Police "Tablet"
[Question] Can we use PHP on FiveM?
[Question] Ingame Tab / send steamid
Website in game
#2

@BlockBa5her


#3

Ooo nice man, cool stuff


#4

Too anyone that has downloaded this before this comment you should re-download as i forgot to add the Tab folder.


#5

Happens to Best of us…


#6

I am really really really in love with this! THIS IS AMAZING! Big thanks to making this :smiley:


#7

Is there a discord for support?


#8

I almost had it working, if someone wants to contribute to it im more then happy to add it. I got spotify to half work also.


#9

I work alot these days so I haven’t had time to do much with it.


#10

If you need someone for Discord, I can help ya set that up. Just message me @Rage#8986 and I’ll set it up for ya.


#11

Oh I misread your post ya i suppose I could offer support when I’m available.


#12

Ha that’s fine. Yeah lol I thought U also meant like you needed someone to design your Discord.


#13

This is super sweet now people have no excuse not to register on cads and other things


#14

dude, this is just fucking incredible mate!!!


#15

Love this been waiting for someone to make this. I hope someone will find a fix for the drop down menus. anything with a drop down menu for a cad doesn’t seem to work. I added a picture of a drop down menu i am referring to.

Pics of Cad



#16

I can look into that for you. I havent experienced that yet so ill need to try to recreate it.


#17

Use your arrow keys to select it


#18

Umm do i have to request access ? to the CAD


#19

the arrow keys worked thanks. just wish the menu would drop. but for now till a fix is found. that works :slight_smile:


#20

You need to have a web based CAD system up and running then you can show it thru the tablet.