Enventor

A. What is Enventor?

Enventor, which is also known as a dynamic EDC (Edje Data Collections) Editor, is a EDC script editor tool that supports text editing and previewing functions for the EDC source code.

When your application requires real-time changeable layouts like animated ones, you can write the layout design using EDC script, compile it into EDJ format file, and import it into your application using a UI layout component. You can also write design layouts from simple to complex ones using the EDC script with Enventor. Enventor helps you write EDC script code easier and finish your work faster. If you are not familiar with EDC programming, see Edje Programming Guide for more information.

Basically, Enventor view is divided into live view and text view. The live view on the left pane previews images corresponding to part objects of the EDC source code. The text view on the right pane contains the EDC source code. Because of its real-time update mechanism, Enventor updates the preview real-time while you modify the source code. Enventor also provides useful functions for you to develop your GUI. Before using Enventor, familiarize yourself with the following functionalities.

A. What is Enventor?
B. GUI Layout
C. Text View
D. EDC Navigator
E. Interactive Feedback
F. Live Edit
G. Workspace
H. Tool Functions
I. Status View
J. Templates
K. Settings
L. Command Line Usage

B. GUI Layout

Enventor view consists of the file browser, live view, text view, tools and the EDC navigator.

The following figure illustrates the Enventor layout sections.

  • Red: Tools
  • Cyan: File browser
  • Green: Live view
  • Blue: Text view
  • Orange: EDC navigator
  • Purple: Console view
  • White: File tab
  • Yellow: Status view

C. Text View

Enventor text view mainly supports text editing. You can write and modify EDC source code in this view. Once the part sections are written in the text view and the modified EDC source code is saved, the preview images corresponding to the part objects of EDC source code are displayed in the live view. Basically, this text editor applies syntax color and auto indentation for EDC with its own coding standard rules. If you open an EDC file which is not matched with Enventor coding standard rule, Enventor applies it to your source code automatically for your convenience. To disable this functionality, go to “Setting → Preference → Auto Indentation”.

Furthermore, the Text view supports the following features.

Auto-complete

To help you write EDC source code, the Text view supports an auto-complete function which lists the reserved keywords in a contextual pop-up.

When you enter a part of a reserved keyword, a contextual pop-up appears with a list of keywords beginning with your input string. Choose a keyword with the up and down arrow keys and press “Enter”. The keyword is selected and a related EDC code snippet is inserted in the text view automatically. In contrast, if you press “Backspace” key, the auto-complete function is cancelled and the contextual pop-up is dismissed. To enable or disable the auto-complete function, go to “Settings → Preferences → Auto Completion”.

You can also use auto-complete as a context help. Use the “Ctrl+Space” key combination to show a list of available keywords in the current cursor position context.

Candidate list

The EDC script provides a variety of pre-defined keywords, including part object types and program action types. To easily edit the keywords, the text view supports a candidate list function for the keywords. When you double-click a keyword in the text view, the available candidate keyword list based on the context pops up. If you select one of the candidate keywords, the double-clicked keyword is changed to a selected one.

The candidate list function also helps you to know the available range of numeric values based on the context. The numeric candidate function shows a range of available numbers. when you drag the sliders, Enventor updates the live view instantly.

Color selector

To change color values, use the color selector tool. Each time a “color” keyword is double-clicked, it displays the color selector.

Zooming text

Zooming in and out in the text view area changes the editor text font size relative to the zoom factor. This action can be done pressing the “Ctrl” key and rolling the mouse wheel up and down while the mouse cursor is placed the text area. To change the font size in the Text Editor Settings, go to Settings → Text Editor → Font Size“.

D. EDC Navigator

For easy navigation inside the EDC block, Enventor provides a tree-style visual tool, called EDC Navigator. You can expand and contract tree items and understand the structure of your EDC layout at a glance.

The following sets of blocks are supported in the EDC Navigator.

  • Group
  • Part
  • State
  • Program

To navigate the EDC source code through the EDC Navigator, click an item in the list. The editor cursor in the text view changes its position to the name of selected item. In case of program items in the tree, they provide the play and stop buttons to trigger or stop the programs in Enventor. This helps you to check the programs by seeing the results directly in the tool.

This tool can be enabled or disabled by the “F10” shortcut key.

E. Interactive Feedback

Enventor has the following ways of providing interactive feedback information when you edit the EDC source code.

Highlighting a Part Object

To easily identify the part object that you modify, Enventor provides a function for highlighting the preview image corresponding to a part object. Click a part section in the EDC source code and the preview image corresponding to the part object in live view is highlighted. Oppositely, clicking a part object of the preview image in live view moves the editor cursor to the corresponding EDC line in the text view.

Detecting Errors

To quickly notify about an EDC grammar error, Enventor compiles the EDC source code in the background and detects errors whenever the EDC source code is saved. The detected errors are printed in the console view, and an error code is highlighted with an underline in the text view. When errors are detected, the console view is activated automatically. It is deactivated when the errors are fixed. This behavior is only enabled if the Auto Hiding Console mode is enabled in “Settings → Preference → Auto Hiding Console”. You can change the size of the console view by dragging a pane divider between the text view and the console view. You can also toggle the console view visibility with the “Alt+up” and “Alt+down” shortcut keys.

Image Preview

To easily check the image files you use, the text view provides a function for previewing image files. Write an image keyword and an image file name in the EDC source code and click the image keyword. The preview image pop-up of the clicked image file opens. If other image files are written in a previous or a next line of the previewed image line, you can go to them using the up and down arrow keys or mouse wheel.

Reference popup

Reference popup is a kind of like a manual for EDC keywords that current cursor positioned on. It shows a description of an EDC keyword for the beginners, who don't familiar with the EDC programming script language, by understanding them its syntax. To pop up the reference, Press “F5” key after positioned the editor cursor on any EDC keywords.

F. Live Edit

Enventor also provides mode called live edit to add part objects easier. Click one of the part object buttons in tools to activate live edit mode. After that, you can add a part object using the live edit contextual pop-up and change its position and size by dragging. Once you confirm the new part, a code snippet describing the new part is inserted in the text editor. When the live edit mode is activated, the text view is disabled.

Adding a New Part Object

The tools contain 6 frequently-used part type buttons: Rect, Text, Image, Swallow, Textblock, and Spacer. Click a required part type button, and the corresponding part object appears in the live view.

Setting Position and Size

The position and size of a part object in pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed on a top left box and on bottom right box.

The position and size of a part object can be changed by dragging each control point. These control points are placed on each edge of a part object. To move the part object only, drag the object itself. To move the object position by 1 pixel, use the arrow keys.

Auto-Aligning

By default, the live edit mode provides an auto-aligning functionality which helps you place a control point, which you are dragging, near other parts. If the auto-aligning is activated, it highlights a control line with red color when it attaches to another part. Auto-aligning helps you construct a layout quickly and easily. You disable the auto-align functionality instantly by pressing a “Ctrl” while you drag a control point.

Fixed Size

Each part in a layout can be constructed with relative or fixed size. A part with a relative size expands or contracts its size to keep up other parts position and size or a layout size. On the other hand, if a part is constructed with the fixed size, its size does not scale with the other parts or the layout size. When live edit mode is activated, you can find a fixed size tool in the bottom of the live view. You can check fixed size options for width and height if you want the width and height values to be fixed. For more information about scalability concept in EDC, see Scalability Using Edje

Relative Positioning

In contrast to the fixed size, you can set a new part's position and size relative to other parts. Drag a control point to the edge of other existing parts. Once you release the mouse button, a contextual pop-up pops up. This popup displays a list of candidate parts that you can choose as relative to x and y coordinates to this new part.

Confirmation and Cancellation

After you have confirmed a new part, press “Enter” or double-click a mouse button to insert the part object in your layout. The live edit mode is terminated and the text view is enabled again. To cancel the live edit mode any time during editing, press “Esc” or “Backspace” key.

Dummy Parts

Enventor displays non-visual parts with symbols so that you can understand how their parts have positioned and sized. Typically, dummy parts are the swallow and spacer parts. You can toggle the dummy parts by pressing “Ctrl+U” to show or hide the symbols.

Wireframes

Wireframe is also one of useful functions for live editing. It displays outlines of all parts with solid lines so that you can understand the logical boundaries of the parts in a layout. You can toggle this function by pressing “Ctrl+W”.

G. Workspace

Set up the workspace if your EDC collections are consisted of multiple EDC files. The default workspace directory is where you launch the Enventor but if you launch Enventor with ”-w“ command option which specifies a workspace path, then Enventor regards that path is a current workspace directory. Workspace is designed to be used with the File browser (toggle shortcut key, F9) and the File tab (toggle shortcut key, F11) so that you can navigate multiple EDC files in those tools. Basically, the file browser displays the current workspace directory.

File Browser

You can open EDC files in the file browser. Just double click any EDC files on it. Then EDC text will be opened with a new file tab.

Enventor allows only one main EDC file that can be activated in the Live view. In the file browser, the main EDC file will be displayed with [main] tag. If the main EDC file contains multiple sub EDC files, then you can open and navigate through them. You can easily open those files in the file browser but you can also open them by pressing “F3” if the text editor cursor is placed on the “include” line in the text view. (ie, #include “subfile.edc”). “F4” shortcut key helps you to go back to the previous edit page quickly.

Enventor tracks a current focused EDC group to display it while you go through groups in one EDC collection. But If you open a new EDC file which contains another collection, then you need to manually set up that file to be a main. For this, press “F2” after selecting a new main EDC file in the file browser. Then Enventor understands that EDC has a collection to be adoptable with its subordinate files. You can also change a main EDC file in “Settings → EDC Build → Main EDC File”.

H. Tool Functions

Enventor provides useful tool functions. The following table shows the tool buttons at the top of the Enventor window along with their functions. To toggle the tools itself, use the “F7” shortcut key.

Icon Function Hotkey
Show a highlight effect on the selected part in the live view. Ctrl+H
Display virtual images for the swallow and spacer parts. Ctrl+U
Display wireframes to identify the parts boundaries. Ctrl+W
Invert the layout horizontally and review the designed layout in RTL, LTR settings. Ctrl+M
Add a Rect part to the live view.
Add a Text part to the live view.
Add a Image part to the live view.
Add a Swallow part to the live view.
Add a Textblock part to the live view.
Add a Spacer part to the live view.
Save the current script to a file. Ctrl+S
Undo text changes. Ctrl+Z
Redo text changes. Ctrl+R
Find or replace text. Ctrl+F
Open the go to window to move the cursor position. Ctrl+L
Display the script line numbers.
Insert the best code corresponding the current editor context. Ctrl+T
Display the console box which shows EDC build logs. Alt+Down
Display the file browser which shows a file list in current workspace. F9
Display the EDC navigator which shows the current group hierarchy tree. F10
Display the file tab in the bottom area. F11
Open the Enventor main menu. Esc

I. Status View

Enventor displays the status view on the bottom area. This status view provides extra functions. At times, it displays useful informative messages for your control. Most of times, you can change the live view zoom level and live view size. Otherwise, you can check the current mouse position, a name of the focused group and the text editor cursor line position. See the following sections for more information. To toggle the status view itself, use the “F8” shortcut key.

Zooming View

To change the live view zoom value, you can use a zoom level controller (Slider). Zooming can be done by pressing “Ctrl” and roling the mouse wheel up and down while you place the mouse cursor in the live view area. The range of the zoom is from 0.1x to 5.0x.

View Size

When a new group view comes in live view area, it will have a default view size, 300×300. You can change its view size. Click the resize expand button to display a slider to manipulate it. You could control slider indicator using the mouse dragging or the mouse wheel. Each group keeps individual view sizes so when you switch views they may have different view size. Also, you can swap the width and height of the live view instantly. This swap functionality can be used for simulating some scenarios, such as mobile device portrait and landscape modes. To change the default view size, go to “Settings → Preferences → View Size”.

J. Templates

Enventor provides various useful templates for a quick start. To choose a template, open a new file from the main menu. There are many templates designed to make you understand how to use EDC and how to make GUI designs with them. Also, it can bring you some ideas about what you can do with EDC programming. These templates contain simple samples and also practical examples.

K. Settings

The Settings window allows you to set and control the Enventor properties. This window contains 3 tabs: Preferences, Text Editor, and EDC Build.

Preferences

Preferences contain occasionally used options in Enventor. Also, it contains some unique function options such as Auto Hiding Console, Smart Redo/Undo, and Error Message Red Alert.

When the Auto Hiding Console option is turned on, Enventor hides the console box automatically when no messages are to be shown after you have fixed all grammatical errors.

When the Smart Undo/Redo option is turned on, Enventor redoes and undoes text word by word. If disabled, redoing and undoing works character by character.

When the Error Message Red Alert option is turned on, Enventor enables the error message red alert effect. When the EDC compilation fails because of a grammatical error, Enventor alerts you with a fading screen effect.

Text Editor

The Text Editor tab provides text options to control the font size and type. You can also change the text color highlighting scheme. Double-click a keyword in the preview to change its color.

EDC Build

This tab provides some options to control EDC build. You can change the image, sound, font, data, and even main EDC pathes here.

L. Command Line Usages

You could launch Enventor with commands. Please see the following.

  • Usage: enventor [input file] [output file] [-t] [-i image path] [-s sound path] [-f font path] [-d data path] [-w workspace]
Options Function
-t, –to Open template menu
-i=path, –id=path Images path
-s=path, –sd=path Sounds path
-f=path, –fd=path Fonts path
-d=path, –dd=path Data path
-w=path, –wd=path Workspace path
-v, –version show program version.
-c, –copyright show copyright.
-l, –license show license.
-h[=CATEGORY], –help[=CATEGORY] show this message. No categories available.

Examples of Enventor command line usage:

  • enventor
  • enventor input.edc -i ./images
  • enventor input.edc output.edj -i ./images
  • enventor -t
  • enventor newfile.edc -t
  • enventor input.edc output.edj -i ./images -s ./sounds -w ./workspace

Demo Video