Render & Client functions Ideas (UI, ...)

[Falaxir]

Introduction
This is a big list of my ideas to improve and add new functions for UI
For now, only for client interface, but maybe later, include some of them to render directly into the server so that everyone can see (ex : Text displays name of pnj, circle on the ground for entity interaction like create/destroy car, ect)
I know that some functions of parameters will not be possible for now due to limitations.

Notes:
This list can be updated by me at anytime to precise some functions or add new ones
I use n for numbers
And sorry for my mistakes in this long message
It may be possible that i forgot some parameters in the functions
Also, some functions can be useless sometimes.

Before that, some bugs (not tested since discovered)

- Alpha color is not working

Now, good reading :)

---

This is a list for modifying existing functions

Before	After	Description
AddBox(number ID, Vector2D StartPosition, Vector2D EndPosition, number Thickness, Color Color)	AddBox(number ID, Vector2D StartPosition, Vector2D EndPosition, number Thickness, Color ThicknessColor, boolean isfilled, Color fillcolor)	Added if the box is filled with a defined color

---

NEW Functions that draws something

Function Name	Function description
AddConvexshapes(number ID, struct Locations, number ThicknessBorder, Color ThicknessBorderColor, boolean isfilled, Color fillcolor)	Draws a Convex shapes where each point is related so for example 0 with 1, 1 with 2 , ect, and the last one with the first one, locations (Vector2D) are stored in a structure so struct[0], struct[n] until nill
AddImage(number ID, string ImageLocation, Vector2D Position, number Scale, Vector2D putcustomsize, number Opacity, boolean backgcolor, Color backgrcolor)	Draws a image, can be .png, .jpg, or even animated (.gif), opacity (0-255), if putcustomsize is null, take origin image size
AddTextInput(number ID, Vector2D Position, string Basetext, number fontid, number fontsize, number CharacterLimit, Vector2D MaxCharSize)	Add a small text input with a number of maximum characters that can be put and MaxCharSize is defined by the number of characters of each width & height
AddNumberInput(number ID, Vector2D Position, number NumberInside, number fontid, number fontsize, number CharacterLimit, Vector2D MaxCharSize)	Add a small Number input with a maximum number limit and MaxCharSize of each width & height
AddButton(number ID, Vector2D StartPosition, Vector2D EndPosition, string Text, Color TextColor, number ThicknessBorder, Color ColorThicknessBorder, boolean isfilled, Color fillcolor, Color HoverColor)	Add a simple button, for HoverColor if isfilled is false then this color will be the ColorThicknessBorder when mouse hover the button, else, it will be the fillcolor
AddImageButton(number ID, string ImageLocation, Vector2D Position, number Scale, Vector2D Size, number Opacity, Color outlinehover, boolean backgcolor, Color backgrcolor)	Add a simple image button, image is stretched if Size X or Y is not the same as the image, opacity (0-255)
AddColorPicker(number ID, Vector2D StartPosition, Vector2D EndPosition, Color Background)	Add a simple color picker box of all RGBA value where player can choose the color he wants : example
AddBinder(number ID, Vector2D StartPosition, Vector2D EndPosition, string DefaultBind, Color TextColor, number ThicknessBorder, Color ColorThicknessBorder, boolean isfilled, Color fillcolor, Color HoverColor)	Add a simple binder for changing controls, so when clicking, it will displays press any key to bind when clicking, replace the old bind key by the new one
AddTable(number ID, Vector2D Position, Vector2D BoxSize, Vector2D TableSize, number ThicknessBorder, Color ThicknessColorBorder, boolean isfilled, Color fillcolor)	Add a simple Table where each box of the table have a custom size and how much of them per width and height
AddSlider(number ID, Vector2D StartPosition, Vector2D EndPosition, string ImageForOptionalCustomSliderIndicator, number DefaultValue, number SlideMinValue, number SlideMaxValue, Color LineColor, number ThicknessBorder, Color ColorThicknessBorder, boolean hasbackgrcolor, Color backgrcolor)	Add a simple slider with max and min values
AddModelPanel(number ID, Vector2D StartPosition, Vector2D EndPosition, string ModelLocation, number ThicknessBorder, Color ColorThicknessBorder, boolean hasbackgrcolor, Color backgroundcolor, boolean usercaninteract, Vector DefaultCameraPos, Rotator DefaultCameraRotation )	Add a model panel to view a model in 3d, it can be a prop/weapon or a character. For example like sketchfab model viewer
AddCheckBox(number ID, Vector2D StartPosition, Vector2D EndPosition, number ThicknessBorder, Color ColorThicknessBorder, boolean isfilled, Color fillcolor)	Add a simple checkbox

---

NEW events
Not sure about theses one in the events.

Event	Description
Button:on("Click", function( number id, type button)	Event when a button is clicked, button type is normal or image
Button:on("Hover", function( number id, type button)	Event when a button is hovered, button type is normal or image

Add custom events, pls

---

NEW get functions

Returns	Function	Description
Vector2D	GetConvexshapesPixels( number ID)	Get the size of a Convexshapes in pixels (only a giant square for the points in x,y extremity)
Vector2D	GetButtonSizePixels( number ID)	Get the size of a button (can be a normal or image one)
Vector2D	GetTableCaseSize( number ID)	Get the size of 1 box of the table of Render.AddTable
Vector2D	GetTableAllSizeNumber( number ID)	Get the size of the entire table of Render.AddTable
Vector2D	GetTableAllSizePixels( number ID)	Get the size of the entire table in pixels of Render.AddTable
boolean	GetCheckBoxResult( number ID)	Get if the checkbox is true or false Render.AddCheckBox
Vector2D	GetCheckBoxSize( number ID)	Get checkbox size in pixel of Render.AddCheckBox
string	GetTextInputOutput( number ID)	Get the text input output of a Render.AddTextInput
Vector2D	GetEntireTextInputSize( number ID)	Get the entire text input size in pixels of a Render.AddTextInput
number	GetTextInputLenght( number ID)	Get the text input leght of a Render.AddTextInput
number	GetNumberInput( number ID)	Get the number set on the Render.AddNumberInput
Vector2D	GetSliderSizePixels( number ID)	Get the size in pixels of Render.AddSlider
number	GetSliderNumber( number ID)	Get the number set on the Render.AddSlider
number	GetSliderPositionPercentage( number ID)	Get the distance travelled by the slider where left is 0% and right is 100%
string	GetModelInPanel( number ID)	Get model displayed on a Render.AddModelPanel
Vector	GetPanelModelCameraLocation( number ID)	Get camera location on Render.AddModelPanel
Rotator	GetPanelModelCameraRotation( number ID)	Get camera rotation on Render.AddModelPanel
Vector2D	GetEntirePanelModelSize( number ID)	Get the entire PanelModel size in pixels of a Render.AddPanelModel
Vector2D	GetBindSizePixels( number ID)	Get the bind size button in pixels of a Render.AddBinder
string	GetBind( number ID)	Get the bind of a Render.AddBinder
Color	GetColorCodePicked( number ID)	Get color set by Render.AddColorPicker
Vector2D	GetColorPickerSize( number ID)	Get ColorPicker size in pixel by Render.AddColorPicker
Vector2D	GetImageSize( number ID)	Return the size of a image (transformation included) - CLIENT
number	GetImageOpacity( number ID)	Return the opacity of the image - CLIENT
string	GetImageName( number ID)	Return the name of the image (path) - CLIENT
Vector2D	GetImageOriginSize( number ID)	Return the size of a image origin (no transformation) - CLIENT
Vector2D	GetPlayerScreenSize()	Return the resolution of client screen, usefull to avoid draws outside player screen - CLIENT
Vector	GetCharacterCameraLocation()	Return the camera location of the character - CHARACTER
Rotator	GetCharacterCameraRotation()	Return the camera rotation of the character - CHARACTER
Vector	GetCharacterCameraLookingAtLocation()	Return the position where the character is looking at - CHARACTER
String	GetModelNameCharacterLookingAt()	Return modelname of the prop where the character is looking at - CHARACTER

---

NEW set functions

Function	Description
SetCharacterCamera( Character Character, number ViewMode, Vector NewCameraPos, Rotator NewCameraRotation)	Move the position of the actual player camera to a defined one (example look to a object, camera facing the character face for character modification, ect) NOTE: if ViewMode is other than 0 (no fps), camera location is the center where the camera can look around
SetCharacterCameraToDefault( Character Character, number ViewMode)	Reset the player camera back to default

---

Draw in the map
Add possibility to draw and interact with UI elemements like in the screen but instead of being draw on the screen, theses can be draw on the server, in the map so for example in the map, in a certain location, a image when we can interact with it and draw buttons on it that can be interactive when the cursor is inside or when we click.

---

Voila, this thing cost me too much time, but here it is
If you have any suggestions, comment below
And sorry if sometimes i am not clear (or english mistakes :/)
Thanks.

---

---

---

EDITS
EDITS
EDITS
here i will make some editings

20:56 15/05/20
It could be good to add server redirection, for example when creating gamemode, some type of gamemode can require different servers to help seperate games.

Returns	Function	Description
	ConnectToServer( number ip, number port, string passwordIfAny)	Connect to a server with this ip and port and password
boolean	IsServerActive( number ip, number port)	Check if the server is online or offline
string	ServerGetName( number ip, number port)	Get the server name
string	ServerGetDescription( number ip, number port)	Get the server description
number	ServerGetMaxSlots( number ip, number port)	Get the server maximum slots
number	ServerGetSlotsCurrentPlayers( number ip, number port)	Get the server current player number connected to server

Of course, need limitations to avoid DDOS attacks.
Also it can be good that there is possibility to connect to a seperate mysql databse for example grades between server, communication of multiple server for a gamemode (see the state of a game, ect) But only server file to avoid steal password

Audio
Yes audio, great, ability to play music files
Example of functions

Returns	Function	Description
	AddAudio( number ID, string audiofile, number volume, boolean isloop)	Create a audio file but don't play it, can support .ogg, .mp3, .wav
	PlayAudio( number ID)	Play a audio file from start
	ResumeAudio( number ID)	Play a audio file from last time it stoped, else start from begining
	StopAudio( number ID)	stop a audio file (but don't destroy it)
	DestroyAudio( number ID)	Destroy a audio file created with this ID
	SetLoopAudio( number ID, boolean isloop)	Set if audio is loop or not
	SetVolumeAudio( number ID, number volume)	Set audio volume
number	GetVolumeAudio( number ID)	Get audio volume
boolean	GetLoopAudio( number ID)	Get if audio is loop or not
string	GetFileAudio( number ID)	Get audio file

HTML frame
Play videos, url for info, communities, ect
Add a option to Nanos game settings to disable it.

Returns	Function	Description
	AddHtml( number ID, string URL, Vector2D StartPosition, Vector2D EndPosition, number ThicknessBorder, Color ThicknessBorderColor)	Add Html page
	DestroyHtml( number ID)	Destroys html or can be replace by ClearItem function
	EnableAudioHtml( number ID, boolean audioplay)	Enable audio for this html id
	SetHtmlUrl( number ID, string URL)	Set another html url
string	GetCurrentHtmlUrl( number ID)	Get current html url
string	GetOriginHtmlUrl( number ID)	Get origin html url (what defined by html creation)
boolean	IsHtmlEnabled( number ID)	Returns if the client enabled html
Vector2D	GetHtmlSize( number ID)	Get current html size in pixels
Vector2D	GetHtmlLocation( number ID)	Get current html location

---

Forgot to add some get function for UI
EDIT 16/05/20

Returns	Function	Description
Vector2D	GetButtonCoordinates( number ID)	Get the coordinates of a button (top left because there is a function to have the size in pixels)
Vector2D	GetTableCoordinates( number ID)	Get the coordinates of a Table (top left because there is a function to have the size in pixels)
Vector2D	GetCheckBoxCoordinates( number ID)	Get the coordinates of a CheckBox (top left because there is a function to have the size in pixels)
Vector2D	GetTextInputCoordinates( number ID)	Get the coordinates of a TextInput(top left because there is a function to have the size in pixels)
Vector2D	GetNumberInputCoordinates( number ID)	Get the coordinates of a NumberInput (top left because there is a function to have the size in pixels)
Vector2D	GetModelPanelCoordinates( number ID)	Get the coordinates of a ModelPanel (top left because there is a function to have the size in pixels)
Vector2D	GetSliderCoordinates( number ID)	Get the coordinates of a ModelPanel (top left because there is a function to have the size in pixels)
Vector2D	GetImageCoordinates( number ID)	Get the coordinates of a Image (top left because there is a function to have the size in pixels)
Vector2D	GetBindCoordinates( number ID)	Get the coordinates of a BindBox (top left because there is a function to have the size in pixels)
Vector2D	GetColorPickerCoordinates( number ID)	Get the coordinates of a ColorPicker (top left because there is a function to have the size in pixels)

And also events
Again not really sure about theses ones

Event	Description
TypeInput:on("Click", function( number id, type input)	Event when a input field is clicked, type is number or text (so TextInput or NumberInput)
TypeInput:on("Type", function( number id, type input)	Event when a character/number is entered or deleted
TypeInput:on("Enter", function( number id, type input)	Event when a player press enter when finish typing
ColorPicker:on("Pick", function( number id)	Event when a player picked a color
Binder:on("NewBind", function( number id, type numberorcharacter)	Event when a player set a new bind, type is if the new bind is a character or a number
Slider:on("Slide", function( number id)	Event when a player slide the slider (so when value change)
CheckBox:on("Check", function( number id)	Event when a player change is the checkbox is true or false
ModelPanel:on("ClickInteract", function( number id)	Triggered when a player is interacting with the modelpanel, when he click inside the modelpanel to interact
ModelPanel:on("ClickExit", function( number id)	Triggered when a player is not interacting with the modelpanel, when he click outside the modelpanel

[derbl4ck]

There are many things here that are really great 👍

[gtnardy]

Fixed Alpha color is not working. Note: Lines still doesn't support Alpha

[gtnardy]

I've added AddTile which is a Filled Box

[olivatooo]

WE NEED TO FUND THIS!!!!

[Nogitsu]

Maybe the possibility to add fonts and use fonts' names instead of numbers ? 🤔

[gtnardy]

Audios and HTML frames got in! I think the other Canvas/UI functions are deprecated now with that xD.

[olivatooo]

Maybe we can close this issue?

[gtnardy]

It still contains some other stuff that are still valid suggestions

[MegaThorx]

I think the other Canvas/UI functions are deprecated now with that xD.

I think we should keep the Canvas/UI as it can be useful for quick and dirty debugging stuff.