Resource:DGS: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
(`---'''Auto Completion''')
No edit summary
 
(243 intermediate revisions by 17 users not shown)
Line 1: Line 1:
<pageclass class="resource" subcaption="Resource"></pageclass>
<pageclass class="resource" subcaption="Resource"></pageclass>
[[Image:DGS_Logo.png|400px|thumb|right|DGS Logo By [[User:Allerek|Allerek]]]]
This resource is designed to allow you to create directX GUI's as an alternative to the original MTA:SA GUI functions.


This is a resource designed to allow you create dx gui on the screen instead of the original gui.
<span style="color:#DD2222;text-shadow:black 0em 0em 0.3em;">This wiki is always for the latest DGS version!</span>


'''Full Name''' : Thisdp's DX Graphical User Interface System ( Dx GUI Lib )
<div style="padding:10px; border-radius:2px;font-size:14px;">
'''Full Name''': Thisdp's DirectX Graphical User Interface System (DxGUI Lib)


'''Author''' : thisdp
'''State''': <span style="color:#FFFFFF;text-shadow:black 0em 0em 0.3em;">OpenSource</span> & <span style="color:#55FF55;text-shadow:black 0em 0em 0.3em;">Work in progress</span>


'''State''' : OpenSource (WIP)
'''Github Repo''': https://github.com/thisdp/dgs


'''GitHub Source''' : https://github.com/thisdp/dgs/tree/master
'''Resource Download''': [https://github.com/thisdp/dgs/releases/latest/download/dgs.zip dgs.zip]


=Features=
'''Server Discord''': https://discord.gg/QEs8q6W
'''How it works?'''
 
*DGS is just like the original gui system that is based on element system. I use a simple way that can make it easier to understand.
'''Current Version''': 3.522
*DGS elements are rendered in "onClientRender". There is two or more tables store DGS elements. When "onClientRender" is called, "for" loop will loop and calculate every DGS element.
 
'''Update Log''': [https://github.com/thisdp/dgs/releases/tag/3.522 Changes and Updates Log]
 
 
'''Auto Completion & Syntax  Highlight'''
 
Official:


'''Latest VSCode Snippets:''' [https://raw.githubusercontent.com/Armisael2k/mtasa-wiki-scrapper/master/functions.json VSCode Snippets (Last Update: Auto every month) By '''motar2k''']




'''What's different?'''
Use the following command in server console to crawl and generate the latest auto completion (Only support NotePad++/Sublime/VSCode).
*'''g2d -crawl npp/sublime/vscode'''
Or you can use the following link to download completed files instead of crawling by yourself.
*[https://drive.google.com/file/d/1H_PiG2gmEz1AyXqZN4956IVgtZOjgMi6/view?usp=sharing NotePad++]
*[https://drive.google.com/file/d/1_07WBEWjriTTucrNGI7jT-4SknALKG6B/view?usp=sharing Sublime]
*[https://drive.google.com/file/d/1J4qoSjzmXZz7yxHUZ2fExBu3zvCwRESn/view?usp=sharing VSCode (Old)]


*This resource is based on dx* functions. It allows us to edit our gui and make it in customlization.
3rd Party Auto Completion:
*1. [http://www.mediafire.com/file/m6dm7815d5dihax/lua.zip NotePad++ By '''Ahmed Ly''']
*2. [https://marketplace.visualstudio.com/items?itemName=ERAGON.mtasa-dgs-lua Visual Studio Code By '''BW~ERAGON >''' ]
</div>


=Features=


'''Update System'''
[[Image:DGSNetStatus.png|300px|thumb|right|DGS Network Monitor]]
*It have an update system that can keep your DGS latest.
*When a newer version has been pushed, it will detected and notice you to update dgs.
*Execute "updatedgs" to check the least version and update your DGS.
*You Can Check Files Resource Dgs by Command "dgsver"


[[Image:DGSS.png|400px|thumb|right|]]


'''Update logs'''
*'''2.84 Update:'''
1.Added Function: *addEasingFunction


2.Added Function: *removeEasingFunction
'''How does it work?'''
*DGS is based on [[element]] system, which just likes the cegui system. To make everything easy to use and understand, DGS has almost the same usage as CEGUI.
*DGS supports OOP syntax, if you don't like POP, then use OOP instead. But you should know that OOP is slower than POP.
*DGS elements are rendered in the event "onClientRender". When "onClientRender" is called, every DGS elements will be looped and calculated.




'''What's different from cegui?'''
*This resource is based on dx* functions, so its style will be more flexible than cegui, which means you can define the style by yourself.
*The latest '''Style System''' enables developer to define their own style such as changing color, loading images and even loading shaders with dgs elements on the server instead of using a lot of [[dgsSetProperty]]/[[dgsSetProperties]].




'''Update System'''
*It have an update system that can inform you of keeping your DGS latest.
*When a newer version has been released, it will detecte the version changing periodically and then notice you.
*Execute command "'''updatedgs'''" to check the least version and update your DGS.
*Also, you can check the version of DGS by inputting the command "dgsver"


'''Examples scripts'''
*1.https://community.multitheftauto.com/index.php?p=resources&s=details&id=14757 By (Ahmed Ly,Mahmod Algeriany)
*2. Also File test.lua its have more Examples You can See it


'''You Should Know'''
*This project was started from 2014.
*Some of DGS elements use '''Render Target''', which means if you don't have enough video memory, '''Render Target won't be created''', and therefore those dgs elements won't be shown.


'''Auto Completion'''
*1.link:http://www.mediafire.com/file/m6dm7815d5dihax/lua.zip(By Ahmed Ly)
*'''Note''':
*2.You must put it in file Notepad++\plugins\APIs


'''Debug'''
[[Image:Dx_7.PNG|400px|thumb|right|Example DGS Cmd]]


*You can enter debug mode by executing the command "debugdgs"
'''Examples scripts'''
*1.https://community.multitheftauto.com/index.php?p=resources&s=details&id=14757 By ([[User:Ahmed Ly|Ahmed Ly]] ,Mahmod Algeriany)
*2. Also File test.lua its have more Examples You can See it .
*3. This Video show you how to play a video by using Dgs https://www.youtube.com/watch?v=ZIq24zS5byI




'''DGS Type'''
'''Debug'''
* You can enter the debug mode by executing the command "'''debugdgs'''".
* "'''debugdgs'''": Simple debug mode. For basic information.
* "'''debugdgs 2 '''": Render debug mode. To see dgs elements' scale with a rainbow border
* "'''debugdgs 3 '''": Tracing debug mode. To trace something for example where the dgs elements' were created, and the tracing mode of some functions will be enabled to show the detail.


* Button (dgs-dxbutton): A button.
* Command (dgs-dxcmd): A command just like windows.
* Cyclehitshape (dgs-dxcyclehitshape): A check area that is cycle.
* Edit (dgs-dxedit): A edit.
* Gridlist (dgs-dxgridlist): A grid list.
* Image (dgs-dximage): A static image.
* Label (dgs-dxlabel): A text label.
* ScrollBar (dgs-dxscrollbar): A scroll bar.
* ScrollPane (dgs-dxscrollpane): A scroll pane.
* Tab Panel (dgs-dxtabpanel + dgs-dxtab) : A tab panel.
* Window (dgs-dxwindow): A window.
* Progress Bar (dgs-dxprogressbar): A Progress Bar.
* Radio Button (dgs-dxradiobutton): A Radio Button.
* Combo Box (dgs-dxcombobox + dgs-dxcombobox-Box) : A combo box.
* Check Box (dgs-dxcheckbox) : A check box that with 3 states (checked, unchecked and indeterminate).


'''Notice'''
'''Notice'''
*The resource name should be 'dgs'.
*It is recommended to change the resource name to 'dgs'.
*This is a resource. If you want to use the functions exported by this resource, you should add something in front of the function like 'exports.dgs:dgsDxCreateLabel(0,0,0.5,0.1,"text",true)'
*This is a resource, if you want to use the functions exported by this resource, you should use an exported function prefix ('''exports.dgs:''') call in your code, such as
<syntaxhighlight lang="lua">
label = exports.dgs:dgsCreateLabel(0, 0, 0.5, 0.1, "text", true)
</syntaxhighlight>
*Here is a feasible way to shorten the name of an exported function:
*Here is a feasible way to shorten the name of an exported function:
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
DGS = exports.dgs --shorten the export function prefix
DGS = exports.dgs --shorten the export function prefix
label = DGS:dgsDxCreateLabel(0,0,0.5,0.1,"text",false) --create a label
label = DGS:dgsCreateLabel(0,0,0.5,0.1,"text",true) --create a label
</syntaxhighlight>
*From the latest version, it no longer needs '''exports.dgs:''', instead we can do
<syntaxhighlight lang="lua">
loadstring(exports.dgs:dgsImportFunction())()-- load functions
label = dgsCreateLabel(0,0,0.5,0.1,"text",true) --create a label
</syntaxhighlight>
'''Object Oriented Programming'''
<syntaxhighlight lang="lua">
loadstring(exports.dgs:dgsImportOOPClass(true))()-- load OOP class
window = dgsWindow(0,0,0.5,0.1,"test",true) --create a window with oop
label = window:dgsLabel(0,0,1,1,"label",true) --create a label inside the window
label.text = "DGS OOP Test" --set text
</syntaxhighlight>
</syntaxhighlight>


'''Special thanks to the following for their help (Respect the contributors)''':
* Axel, Senpai, ZoNe
* DiGiTal, #Dv^, maksam07
* Scorpyo, Kingleonide, Bullet(.el3tar)
* Allerek, Deihim007, OmarSwaitti(HankVoight)
* FlyingFork, Lettify, Ahmed Ly
* ᴛᴇᴍᴏɪꜱ, Shady1


'''Thanks for their helps''' :
='''DGS Tips'''=
*Axel: Gives some tips and provide some functions.
*[[DGS Events and GUI Events]]
*Senpai: Helps write wiki.
*[[DGS Functions and GUI Functions]]
*ZoNe: Helps write wiki.
*[[DGS Grid List]]
*DiGiTal: Helps write wiki.
*[[DGS OOP Class]]
*Ahmed Ly: Helps write wiki.
*[[DGS Custom Plugin]]
*[[DGS Style System]]
*[[G2D|DGS GUI To DGS]]


='''DGS Element Properties'''=
='''DGS Element Properties'''=
Line 100: Line 136:


=Last=
=Last=
'''Welcome everyone else to made suggestions, tested the script, helped me to finish the wiki, etc'''
'''Everyone is welcome to make suggestions, test the script, help make adjustments/finish the wiki, etc.'''
[[Category:Resource]]
[[Category:Resource]]


[[ZH-CN:Slothbot]]
[[ar:Resource:Dgs]]
[[ZH-CN:Resource:Dgs]]
[[PL:Resource:Dgs]]
[[TR:Resource:Dgs]]

Latest revision as of 18:29, 3 January 2024

DGS Logo By Allerek

This resource is designed to allow you to create directX GUI's as an alternative to the original MTA:SA GUI functions.

This wiki is always for the latest DGS version!

Full Name: Thisdp's DirectX Graphical User Interface System (DxGUI Lib)

State: OpenSource & Work in progress

Github Repo: https://github.com/thisdp/dgs

Resource Download: dgs.zip

Server Discord: https://discord.gg/QEs8q6W

Current Version: 3.522

Update Log: Changes and Updates Log


Auto Completion & Syntax Highlight

Official:

Latest VSCode Snippets: VSCode Snippets (Last Update: Auto every month) By motar2k


Use the following command in server console to crawl and generate the latest auto completion (Only support NotePad++/Sublime/VSCode).

  • g2d -crawl npp/sublime/vscode

Or you can use the following link to download completed files instead of crawling by yourself.

3rd Party Auto Completion:

Features

DGS Network Monitor
DGSS.png


How does it work?

  • DGS is based on element system, which just likes the cegui system. To make everything easy to use and understand, DGS has almost the same usage as CEGUI.
  • DGS supports OOP syntax, if you don't like POP, then use OOP instead. But you should know that OOP is slower than POP.
  • DGS elements are rendered in the event "onClientRender". When "onClientRender" is called, every DGS elements will be looped and calculated.


What's different from cegui?

  • This resource is based on dx* functions, so its style will be more flexible than cegui, which means you can define the style by yourself.
  • The latest Style System enables developer to define their own style such as changing color, loading images and even loading shaders with dgs elements on the server instead of using a lot of dgsSetProperty/dgsSetProperties.


Update System

  • It have an update system that can inform you of keeping your DGS latest.
  • When a newer version has been released, it will detecte the version changing periodically and then notice you.
  • Execute command "updatedgs" to check the least version and update your DGS.
  • Also, you can check the version of DGS by inputting the command "dgsver"


You Should Know

  • This project was started from 2014.
  • Some of DGS elements use Render Target, which means if you don't have enough video memory, Render Target won't be created, and therefore those dgs elements won't be shown.


Example DGS Cmd

Examples scripts


Debug

  • You can enter the debug mode by executing the command "debugdgs".
  • "debugdgs": Simple debug mode. For basic information.
  • "debugdgs 2 ": Render debug mode. To see dgs elements' scale with a rainbow border
  • "debugdgs 3 ": Tracing debug mode. To trace something for example where the dgs elements' were created, and the tracing mode of some functions will be enabled to show the detail.


Notice

  • It is recommended to change the resource name to 'dgs'.
  • This is a resource, if you want to use the functions exported by this resource, you should use an exported function prefix (exports.dgs:) call in your code, such as
label = exports.dgs:dgsCreateLabel(0, 0, 0.5, 0.1, "text", true)
  • Here is a feasible way to shorten the name of an exported function:
DGS = exports.dgs --shorten the export function prefix
label = DGS:dgsCreateLabel(0,0,0.5,0.1,"text",true) --create a label
  • From the latest version, it no longer needs exports.dgs:, instead we can do
loadstring(exports.dgs:dgsImportFunction())()-- load functions
label = dgsCreateLabel(0,0,0.5,0.1,"text",true) --create a label

Object Oriented Programming 

loadstring(exports.dgs:dgsImportOOPClass(true))()-- load OOP class
window = dgsWindow(0,0,0.5,0.1,"test",true) --create a window with oop
label = window:dgsLabel(0,0,1,1,"label",true) --create a label inside the window
label.text = "DGS OOP Test" --set text

Special thanks to the following for their help (Respect the contributors):

  • Axel, Senpai, ZoNe
  • DiGiTal, #Dv^, maksam07
  • Scorpyo, Kingleonide, Bullet(.el3tar)
  • Allerek, Deihim007, OmarSwaitti(HankVoight)
  • FlyingFork, Lettify, Ahmed Ly
  • ᴛᴇᴍᴏɪꜱ, Shady1

DGS Tips

DGS Element Properties

General Properties

Unique Properties For DGS Core Elements

Extra Properties For DGS Plugins

Client Functions

Custom Cursor Functions

Multi Language Supports

Animation

3D Element

3D Interface

3D Line

3D Image

3D Text

Browser

Button

Check Box

Combo Box

Custom Renderer

Edit

Detect Area

Drag'N Drop

Grid List

Image

Memo

Menu

Label

Layout

Line

Progress Bar

Radio Button

Scale Pane

Scroll Bar

Scroll Pane

Selector

Style

Switch Button

Tab Panel

Window

Basic Shape Plugins

Circle

Quadrilateral

Rounded Rectangle

Other Plugins

Blur Box

Canvas

Chart

Color Picker

Effect 3D

Gradient

Mask

Media Browser

Nine Slice

Object Preview Supports

Paste Handler

QRCode

Remote Image

Screen Source

SVG

Tooltips

Client Events

General

Check Box

Combo Box

Drag'N Drop

Edit

Grid List

Menu

Selector

Mouse

Radio Button

Switch Button

Tab

Animation

Plugin

Media

Color Picker

QRCode

Remote Image

Last

Everyone is welcome to make suggestions, test the script, help make adjustments/finish the wiki, etc.

Retrieved from "https://wiki.multitheftauto.com/wiki/Resource:DGS?oldid=78751"