Description:

DirectGuiDesigner 22.4.1

DirectGuiDesigner
A Visual Editor for Panda3Ds Direct GUI
Features

Toolbox with all DirectGui elements
Drag and drop to re-position elements in the designer
Properties editor for most common element options
Place elements freely or with a guidance grid
GUI structure viewer
Save and load projects as json files
Export to python script for easy integration
Support for custom DirectGui like elements

Screenshots



Requirements

Python 3.x
Panda3D 1.10.4.1+
DirectFolderBrowser
DirectGuiExtension

To install them, using pip:
pip install -r requirements.txt
Manual
Hit F1 to see the help screen
Startup
To start the DirectGUI Designer, simply run the main.py script
python main.py
Build binaries
To create binaries of the Designer, call the following
python setup.py build_apps
This will create a new folder called build with sub-directories for the various operating systems which will contain the binaries.
Basic Editing

Click on an element in the toolbox.
-> this will place the element at (0,0,0) parented to the selected element or the root if nothing was selected.
Left click on the item you want to edit.
Drag and Drop to position the element and use the properties panel to set all desired options.

Editor Scale
The editor supports two units of measurement, the default window aspect related one where ranges usually go from -1 to 1 and the center being in the middle of the window. The other system uses the pixel2d nodepath and hence scales according to pixels. It 0 location is at the top left corner of the editor and extends to 1920 by -1080 by default. It usually don't go into a negative value for screen coordinates but you can set negative pixel values for relative positioning.
To switch between those scales, just hit the button in the menu bar that has the ruler symbol on it.
Remove elements
Click on the X in the structure view, hit Ctrl-Delete or use the respective button from the toolbar
Undo/Redo cycle
Using the usual Ctrl-Z and Ctrl-Y you can undo and redo most of the changes done in the editor. There is no limit to the undo/redo steps and using Ctrl-Shift-Y you can cycle through different redo paths.
Save and export
To save The designed GUI as a DirectGuiDesigner project, hit Ctrl-S or the respective button in the toolbar.
This will save a Json file that can later be loaded by the designer again.
To export as a python script that can directly be used in projects, either hit Ctrl-E or click the button in the toolbar.
If enabled in the settings, the python exporter will create scripts that can directly be run.
Autosave
The designer will automatically save the project after a specific time has elapsed. If the project has not been saved before, the autosave file will be created in your systems temp directory. Otherwise it will be placed next to your saved project with a .1 appended at the end.
To change the autosave delay, open the options dialog and change the value in the spinner box dedicated for the autosave delay or change the config variable autosave-delay. The minimum value is set to 10 and the max value is set to 3600 (1 hour) while the default delay is set to 60 (1 minute).
Use exported scripts
The python script will always contain a class called Gui which you can pass a NodePath to be used as root parent element for the GUI. Simply instancing the class will make the GUI visible by default. If this is not desired, hide the root NodePath as given on initialization. As you shouldn't edit the exported class due to edits being overwritten with a new export, you should create another python module which will handle the connection of the apps logic with the gui. This dedicated module could for example implement a show and hide method to easily change the visibility of the gui or set and gather values of the GUI without having to change the actual GUI design module code.
Here is a small example of how to load and instantiate a GUI. We expect the gui to be exported to a file called myGui.py:
from myGui import GUI as MyGui
myGui = MyGui()

In a real world application you may want to create a handler class around your GUI class to cleanely abstract your data from the view. A simple example of such a class could look like the following.
from myGui import GUI as MyGui
class MyGuiHandler(MyGui):
    def __init__(self):
        MyGui.__init__(self)
    def setData(self, someData):
        self.someElemnt["text"] = someData.text

Configuration
To change configurations, simply use the editors settings dialog available through the menubar Tools>Options or the cogwheel in the toolbar.
These custom configuration variables have been introduced for the editor.



Name
Type
Description




skip-ask-for-quit
bool
If set to True, the dialog to ask for confirmation when quitting the Designer will not be shown. Defaults to False


create-executable-scripts
bool
If set to True, the saved python scripts will contain everything to directly run. Defaults to False


show-toolbar
bool
If set to True, the toolbar over the editor area will be shown, otherwise only the menubar will be displayed. Defaults to True


custom-widgets-path
String
The path to a folder which will contain custom designed DirectGui widgets.


custom-model-path
String
A path to a folder containing textures, models and other assets required by your gui. You cann add this property more than once and each line should only contain one path.


autosave-delay
Integer
Delay in seconds at which the project is automatically saved to a special auto-save file.



The Designer will create a hidden configuration file called .DirectGuiDesigner.prc in the users Home directory. It will contain all custom configurations from the list above with their default values and can be changed/extended with other Panda3D configurations.
Custom Widgets
To add your own DirectGui elements to the editor you must make sure the following points are given.

Put all your widgets in one dedicated folder and make sure it's through the custom-widgets-path configuration.
Widgets have to adhere to the usual DirectGui coding style
All widgets need a .widget definition file. See below for further information

Widget Definition files
A .widget definition file is necessary to add support for your custom widget in the designer. Those files are simple json files containing information about your element like display name, class name and so on. An example of such a file can be found in the customWidgetSample folder. Here's a list of keys that should be given in the definition file:



Name
Type
Description
Optional




name
String
The unique name or ID of this widget
No


moduleName
String
The name of the python module
No


displayName
String
The name of the widget as it will be displayed in the toolbox
No


className
String
The class name in the module which should be used
No


classfilePath
String
Path to the python file which should be imported
No


baseWidget
String
The name of the widget this custom widget is based uppon, e.g. DirectFrame or DirectButton
Yes


customProperties
List
A list information for custom properties
No


addItemFunctionName
String
A special function name which should be called when other elements get parented to this widget
Yes


removeItemFunctionName
String
A special function name which should be called when other elements get removed from this widget
Yes


importPath
String
The import statement which should be added to exported python file
No



Custom Properties
The customProperties list will contain definition dictionaries of your widgets properties.
These dictionaries will have the following structure, not all options are mandatory though, see below for further information:
{
    "internalName":"thePropertiesName",
    "visiblename":"The display name",
    "internalType":"int",
    "editType":"integer",
    "nullable":false,
    "supportStates":false,
    "valueOptions":"",
    "isInitOption":"",
    "getFunctionName":"",
    "setFunctionName":"",
    "addToExtraOptions":"",
    "loaderFunc":"",
    "postProcessFunctionName":"",
    "canGetValueFromElement":""
}




Name
Type
Description
Optional
values




internalName
String
The name of this property as it is used on the widget e.g. widget["internalName"]
No



visiblename
String
The visible name of this property as it will be shown in the Designer
No



internalType
String
The data type representation for this property
Yes
int", "float", "bool", "str", "function", "list", "tuple", "object"


editType
String
The edit type of this property. This value can also be automatically determined by the internalType
Yes
"integer", "float", "bool", "text", "base2", "base3", "base4", "command", "path", "optionmenu", "list", "tuple", "resetFrameSize", "fitToChildren"


nullable
Bool
Determines if this property can be set to None
Yes



supportStates
Bool
Determines if this property support the multiple states of a widget (e.g. the Buttons normal/hover/clicked/disabled state)
Yes



valueOptions
Value
The value or values stored in here will be used dependent on the type of property. In case it's a selectable option, the value must be a dictionary consisting of user visible key and code value If it is a runnable command, it should be the name of the function to be called from the element itself.
Yes



isInitOption
Bool
define if this is a value only to be set at initialization time.
Yes



getFunctionName
String
Function name to get the property
Yes



setFunctionName
String
Function name to set the property
Yes



addToExtraOptions
Bool
This is for special properties which can not be directly set on the item in the editor but should rather be stored seprately
Yes



loaderFunc
String
A function which is passed the value entered in the editor to process it prior to setting it in the property (e.g. loadFont or loadModel) The value can be given to the function by using value. E.g. "loader.loadFont(value) which will call the load Font given the properties value
Yes



postProcessFunctionName
String
A Function name which will be called after setting this property
Yes



canGetValueFromElement
Bool
Determines if the value of this property can be got directly from it using the ["internalName"]
Yes




The values for the internalType are defined as follow:



Name
Description




integer
Integer values


float
Floating point values


base2
Two floating point values


base3
Three floating point values


base4
Four floating point values


text
A String entry


path
A path selection


bool
A Bolean selection


tuple
An extendable list of values representing a python tuple


list
An extendable list of values representing a python list


optionMenu
A selection using the values in valueOptions


command
Used in combination with the customCommandName value to create a button that will call the command


resetFrameSize
A special command to reset the widgets frameSize


fitToChildren
A special command to fit the widgets frameSize to its children

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter