🪛Custom App

Making a special application for Gksphone v2

Config

App settings will be added to the AppStore section in gksphone/config/config.json or see the server side export example

• name => Uniq Custom Name

• icons => Icon of the app

• categori => In which category the app will appear ( jobs, mix, social, finance )

• appurl => You should write the file path of the resource you want to run in the application ( If you want to add a site, make sure it has iframe support )

• url => Don't touch this part

• blockedjobs => Jobs that will not see the app

• allowjob => Only jobs that can see this application

    {
      "name": "UniqCustomName",
      "icons": "/html/img/icons/qbit.png",
      "categori": "mix",
      "appurl": "https://cfx-nui-gksphone-app/ui/index.html",
      "url": "/customapp",
      "blockedjobs": {
         "police": "police"
      },
      "allowjob": {
         "ambulance": "ambulance"
      },
      "signal": true,
      "show": true
    }

You can access the custom app template on github and start making the app you want.

Open App

Add this client and this will be triggered every time you enter the application.

RegisterNUICallback('getInfo', function(data, cb)
    print("The function that will run when it enters the application")
    cb('ok')
end)

Exports - Client

InputChange

To prevent walking while filling in input fields

local data = true -- true or false
exports["gksphone"]:InputChange(data)

<input type="text" onfocus="inputFocused(false)" onblur="inputFocused(true)">

<script>
   async function inputFocused(value) {
       //await NuiFetch("input", value);
   }
</script>

NuiSendMessage

You have to use this export instead of SendNUIMessage

exports["gksphone"]:NuiSendMessage({event = 'showMessage', hello = "world"})

window.addEventListener('message', (event) => {
    if (!event.data) return;
    const e = event.data
    if (e.event === "showMessage") {
        console.log(`Hello ${e.hello}!`)
    }
})

Exports - Server - Client

CustomApp

local appData = {
	name = "mdt", --- A unique name
	icons = "/html/img/icons/mdt.png",  -- logo url
	description = ""  -- App description that will appear in the app store
        appurl = "https://cfx-nui-gksphone-app/ui/index.html",  -- custom app url
	url = "/customapp",   -- do not touch this part
	blockedjobs = {},
	allowjob = {},
	signal = true,
	show = true,
	labelLangs = {   -- App name by languages
		af = "MDT",
		ar = "MDT",
		cs = "MDT",
		de = "MDT",
		en = "MDT",
		es = "MDT",
		fr = "MDT",
		id = "MDT",
		nl = "MDT",
		["pt-PT"] = "MDT",
		ro = "MDT",
		sv = "MDT",
		th = "MDT",
		tr = "MDT",
		uk = "MDT",
		["zh-TW"] = "MDT"
	}
}
exports["gksphone"]:AddCustomApp(appData)

Javascript UI

document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        if (window.gksphone) {
            console.log(`GKSPHONE functions available`)
        }
    }, 100);
});

Dark Mode Check

const isDarkMode = window.gksphone.isDarkMode();
console.log(isDarkMode)  // true or false

Loading Poup

window.gksphone.loadingPopup("Loading...");
setTimeout(() => {
   window.gksphone.closeLoadingPopup();
}, 1000)

Notify

var timeout = 2000
window.gksphone.notify("This is a notification message", timeout);

Call

const phoneNumber = "55555"  // Number to call
const anonymous = false
window.gksphone.calling(phoneNumber, anonymous);

Video Call

const phoneNumber = "55555"  // Number to call
window.gksphone.videoCall(phoneNumber);

Camera Open

const PhotoActive = true  // Photo option on or off
const VideoActive = false  // Video option on or off
const photourl = window.gksphone.CameraOpen(PhotoActive, VideoActive);
console.log(photourl) // Link to the photo or video taken

Get Gallery Poup

const onlyVideo = true // Show video in options?
const onlyPicture = true // Show photo in options?
const multiple = false // Select multiple images or videos
const camera = false // Camera shooting option on/off
const photourl = window.gksphone.GetGallery(onlyVideo, onlyPicture, multiple, camera);
console.log(photourl) // { data = link, opencamera = true/false } 
// When the camera icon is clicked, "opencamera" returns true
// The data section contains the selected image or video link. 
// If the camera option is clicked, it will return false.

Image or Video Viewer

const url = "photo link"
window.gksphone.FullScreenImage(url);

Emoji Poup Open

const url = "photo link"
window.gksphone.SelectEmoji(url);

window.addEventListener('message', (event) => {
    const e = event.data
    if (e.type === 'emojiSelected') {
        gksphoneFunctions?.notify(`Emoji selected: ${e.eventData}`, 2000)
    }
})

setStatusBarColor

const color = "#000000'
window.gksphone.setStatusBarColor(color);