about enventor: update page.

finally, it's done!
This commit is contained in:
Hermet Park 2016-07-15 22:09:50 +09:00
parent 0ef09a1e8d
commit 4480818ee0
7 changed files with 85 additions and 45 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

BIN
media/enventor-status.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
media/enventor-template.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

View File

@ -7,24 +7,26 @@
===A. What is Enventor?===
Enventor, which is also known as EDC (Edje Data Collections) Editor, is a EDC script editor tool that supports text edit function and preview function for the EDC source code.
Enventor, which is also known as EDC (Edje Data Collections) Editor, is a EDC script editor tool that supports text edit function and preview function for EDC source code.
{{ :enventor-main.png?&300|}}
When your application requires realtime changeable layouts like animative ones, then you could write those layout design using EDC script, compile it to EDJ format file then import it into your application using a UI layout. But not only for that, you can write any kinds of design layouts from simple to complex ones if you use EDC script with Enventor. Enventor helps you write EDC script code eaiser and finish your work faster. If you are not familiar with EDC programming, then please visit to next, [[https://www.enlightenment.org/program_guide/edje_pg|Edje Programming Guide]] for more information.
When your application requires realtime changeable layouts like animative ones, then you could write those layout design using EDC script, compile it to EDJ format file then import it into your application using a UI layout component. But not only for that, you can write any kinds of design layouts from simple to complex ones if you use EDC script with Enventor. Enventor helps you write EDC script code eaiser and finish your work faster. If you are not familiar with EDC programming, then please visit to [[https://www.enlightenment.org/program_guide/edje_pg|Edje Programming Guide]] for more information.
Basically, Enventor view is divided into 2 sections, live view and text view. The live view is the left pane of Enventor window and it previews images corresponding to the part objects of the EDC source code. The text view is the right pane of Enventor window and it contains the EDC source code. Thanks to its realtime updation mechanism, Enventor updates the preview on realtime while you are modifying the source code that helps you to see the result on the spot. Other than that, Enventor provides quite nice fancy functions for you. Before using Enventor, familiarize yourself with the following:
Basically, Enventor view is divided into 2 sections, live view and text view. The live view is a left pane of Enventor window and it previews images corresponding to part objects of EDC source code. The text view is a right pane of Enventor window and it contains EDC source code. Thanks to its realtime updation mechanism, Enventor updates the preview on realtime while you are modifying source code. It brings you to see the result on the spot. Other than that, Enventor provides quite nice fancy functions for you. Before using Enventor, familiarize yourself with the following:
* Enventor Layout
* Text View
* EDC Navigator
* Interactive Feedback
* Live Edit
* Workspace
* Tool Functions
* Status View
* Configuration Setting
* Command Line Usage
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===
@ -39,11 +41,11 @@ The following figure illustrates each layout section of Enventor.
* Orange: EDC navigator
* Purple: Console view
* White: File tab
* Yellow: Status
* 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 part sections are written in the text view and the modified EDC source code is saved, preview images corresponding to the part objects of the EDC source code are displayed in the live view. Basically, this text editor applys syntax color and auto indentation for EDC with its one standard rule. If you open an edc file which doesn't matched with Enventor indentation rule, Enventor applies its indentation automatically for your convenient. If you don't like it, then you can toggle off that function in Preference Setting (Setting -> Preference -> Auto Indentation).
Enventor text view mainly supports text editing. You can write and modify EDC source code in this view. Once part sections are written in the text view and the modified EDC source code is saved, preview images corresponding to the part objects of EDC source code are displayed in the live view. Basically, this text editor applys syntax color and auto indentation for EDC with its own coding standard rule. If you open an edc file which doesn't matched with Enventor coding standard rule, Enventor applies it to your source code automatically for your convenient. If you don't like it, then you can toggle off that function in Preference Setting (Setting -> Preference -> Auto Indentation).
Furthermore, Text view supports the following fancy features:
@ -52,9 +54,9 @@ Furthermore, Text view supports the following fancy features:
==Auto-complete==
To help you write EDC source code, Text view supports auto-complete function which lists the reserved keywords in a contextual pop-up.
To help you write EDC source code, Text view supports auto-complete function which lists reserved keywords in a contextual pop-up.
When you enter a part of a reserved keyword, a contextual pop-up comes up with a list of keywords beginning with your input string. Choose one keyword with 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 will be dismissed. In addition, you can enable or disable the auto-complete function in the configuration setting.
When you enter a part of a reserved keyword, a contextual pop-up comes up with a list of keywords beginning with your input string. Choose one keyword with 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, auto-complete function is cancelled and the contextual pop-up will be dismissed. In addition, you can enable or disable auto-complete function in configuration setting (Settings -> Preferences -> Auto Completion).
You can also use auto-complete as context help. Press "Ctrl+Space" key combination to show a list of available keywords in the current cursor position context.
@ -63,37 +65,37 @@ You can also use auto-complete as context help. Press "Ctrl+Space" key combinati
==Candidate list==
The EDC script provides a variety of pre-defined keywords including part object types and program action types. To edit the keywords easier, 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 the selected one.
The EDC script provides a variety of pre-defined keywords including part object types and program action types. To edit the keywords easier, text view supports a candidate list function for the keywords. When you double-click a keyword in text view, 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 the numeric values based on the context. The numeric candidate function shows the range of the available number. While you are dragging the slider, Enventor updates the preview instantly.
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. While you are dragging a slider, Enventor updates preview instantly.
{{ :enventor-colorselector.png?&150|}}
==Color selector==
To change color values, use the color selector tool. Each time when the "color" keyword is double-clicked, it displays the color selector.
To change color values, use a color selector tool. Each time when "color" keyword is double-clicked, it displays the color selector.
==Zooming text==
Zooming in/out text view area changes the font size relative to the zoom factor. This action can be done by "Ctrl+Mouse Wheel Up/Down" while you placed the mouse cursor in the text area or changed font size inside Text Editor Setting (Settings -> Text Editor -> Font Size).
Zooming in/out text view area changes editor text font size relative to the zoom factor. This action can be done by "Ctrl+Mouse Wheel Up/Down" while you placed the mouse cursor in the text area or changed font size in Text Editor Setting (Settings -> Text Editor -> Font Size).
===D. EDC Navigator===
{{ :enventor-navigator.png?&300|}}
For easy navigation inside EDC block, Enventor provides tree-style visual tool, EDC Navigator. You can expand/contract tree items in it and understand the structure of your EDC layout at a glance.
For easy navigation inside EDC block, Enventor provides tree-style visual tool, EDC Navigator. You can expand/contract tree items and understand the structure of your EDC layout at a glance.
There are sets of blocks supported in the EDC Navigator.
There are sets of blocks supported in EDC Navigator.
* Group
* Part
* State
* Program
To navigate the source code through 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 play/stop buttons to trigger/stop the program in the Enventor. This helps you to check the programs by seeing results directly in the tool.
To navigate EDC source code through 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 play/stop buttons to trigger or stop the programs in Enventor. This helps you to check the programs by seeing results directly in the tool.
This tool can be enabled or disabled by "F10" hotkey.
@ -107,40 +109,40 @@ Enventor has the following ways of providing interactive feedback information wh
==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 the view gets highlighted. Oppositely, clicking a part object of the preview image in the live view that moves the editor cursor to the corresponding edc line in the text view.
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 EDC source code and the preview image corresponding to the part object in live view gets highlighted. Oppositely, clicking a part object of the preview image in live view that moves the editor cursor to the corresponding EDC line in the text view.
{{:enventor-errors.png?&250 |}}
==Detecting Errors==
To quickly notify about an EDC grammar error, Enventor compiles EDC source code in background and detects errors whenever EDC source code is saved. The detected errors are printed in the console view as well as the error code is highlighted with a underline in the text view. When it detects the errors, console view is activated automatically whereas it's deactivated if the errors were gone. This behavior is only enabled if the "Auto Hiding Console" mode were enabled which you can toggle on/off in the Preference Setting (Setting -> Preference -> Auto Hiding Console). You can change the size of the console view by dragging the pane divider between the text view and the console view. Moreover, you can toggle the console view visibility with the Hotkeys "Alt+Up" or "Alt+Down".
To quickly notify about an EDC grammar error, Enventor compiles EDC source code in background and detects errors whenever EDC source code is saved. The detected errors are printed in console view as well as error code is highlighted with a underline in text view. When it detects errors, console view is activated automatically whereas it's deactivated if the errors were gone. This behavior is only enabled if the "Auto Hiding Console" mode were enabled which you can toggle on/off in Preference Setting (Setting -> Preference -> Auto Hiding Console). You can change size of the console view by dragging a pane divider between the text view and the console view. Moreover, you can toggle the console view visibility with hotkeys "Alt+Up" or "Alt+Down".
{{ :enventor-preview.png?&150|}}
==Image Preview==
To easily check the image file you use, Text view provides a function for previewing image files. Write the 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 the previous or next line of the previewed image file, you can go to the preview image with "Up/Down" arrow keys or "Mouse Wheel".
To easily check image files you use, Text view provides a function for previewing image files. Write an image keyword and an image file name in 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 with "Up/Down" arrow keys or "Mouse Wheel".
{{:enventor-reference.png?&150 |}}
==Reference popup==
Reference popup is a kind of like a manual for the edc keyword that current cursor positioned on. It shows description of edc keywords for the beginners who don't familiar with the edc programming script language by understanding them its syntax. To pop up the reference, Press "F6" key after positioned the editor cursor on any edc keywords.
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 EDC programming script language, by understanding them its syntax. To pop up the reference, Press "F6" key after positioned the editor cursor on any EDC keywords.
==Highlighting the pair of braces==
In case the cursor stays near the brace, the brace pair is highlighted. This makes visual recognition of the EDC block more natural.
In case the editor cursor stays near braces, the brace pair is highlighted. This makes visual recognition of EDC block more natural.
===F. Live Edit===
{{ :enventor-liveedit1.png?&250|}}
Enventor also provides an another method called Live Edit function to add part objects easier. Click one of part object buttons in the tools to activate Live Edit function. After that, you can add a part object using the Live Edit contextual pop-up and chagne the position and size of the part object by dragging. Once you confirmed the new part, the code snippet with regards the new part will be inserted in the text editor. While the Live Edit function is activated, the text view is disabled.
Enventor also provides an another method called Live Edit function to add part objects easier. Click one of part object buttons in tools to activate Live Edit function. After that, you can add a part object using the Live Edit contextual pop-up and change its position and size of the part object by dragging. Once you confirmed the new part, a code snippet with regards the new part will be inserted in text editor. While Live Edit function is activated, text view is disabled.
{{:enventor-liveedit2.png?&150 |}}
@ -151,45 +153,45 @@ The tools contains 6 frequently-used part type buttons (Rect, Text, Image, Swall
==Setting position and size==
The position and size of the part object based on pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed on the left top box and on the right bottom box.
The position and size of a part object based on pixels are displayed in the center of the part object preview image. The relative position of the part object is displayed on a left top box and on a right bottom box.
The position and size of the part object can be changed by dragging each control points. These control points are placed in each edge of part object. If you want to move the part object only, you can drag the object itself. If you want to move the object position by 1 pixel, Use arrow keys "Up/Down/Left/Right".
The position and size of a part object can be changed by dragging each control points. These control points are placed in each edge of a part object. If you want to move the part object only, you can drag the object itself. If you want to move the object position by 1 pixel, Use arrow keys "Up/Down/Left/Right".
{{ :enventor-liveedit3.png?&150|}}
==Auto-Aligning==
In default, Live Edit provides auto aligning function 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 if it's attached to an other part. Thanks to this function, you will be able to construct a layout quick and easily. By some needs, If you don't want this auto aligning function, you could disable this instantly by pressing a hotkey, "Ctrl" while you are dragging a control point.
In default, Live Edit provides auto aligning function 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 attached to an other part. Thanks to this function, you will be able to construct a layout quickly and easily. By some needs, if you don't want this auto aligning function, you could disable this instantly by pressing a hotkey, "Ctrl" while you are dragging a control point.
{{:enventor-liveedit4.png?&150 |}}
==Fixed Size==
Each part in a layout can be constructed with relative or fixed size. A part with the relative size will expand or contract its size to keep up other parts position and size or a layout size. On the other hand, if the part is constructed with the fixed size, it's size won't be changed regardless of 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 the fixed size for width and height if you really mean this new part's width and height is fixed. If you need more information about scalability concept in EDC, Please see [[https://www.enlightenment.org/program_guide/scalability/scalability_using_edje|Scalability Using Edje]]
Each part in a layout can be constructed with relative or fixed size. A part with the relative size will expand or contract its size to keep up other parts position and size or a layout size. On the other hand, if the part is constructed with the fixed size, it's size won't be changed regardless of 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 sizes for width and height if you really mean this new part's width and height value is fixed. If you need more information about scalability concept in EDC, Please see [[https://www.enlightenment.org/program_guide/scalability/scalability_using_edje|Scalability Using Edje]]
{{ :enventor-liveedit5.png?&150|}}
==Relative Positioning==
The other way 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 mouse up the button, a contextual pop-up pops up. This popup displays a list of the candidate parts that you can choose one as the relative to the x coordinate and y coordinate to this new part.
The other way to the fixed size, you can set a new part's position and size relative to other parts. Drag a control point to an edge of other existing parts. Once you mouse up the button, a contextual pop-up pops up. This popup displays a list of candidate parts that you can choose one as a relative to x coordinate and y coordinate to this new part.
==Confirmation/Cancellation==
After confirmed the new part, Pressing "Enter" or double-click mouse button to insert the part object in your layout. Live Edit mode will be finished and text view will be enabled again. Anytime if you'd like to cancel the new part in the Live Edit mode, press "Esc" or "Backspace" key.
After confirmed a new part, Pressing "Enter" or double-click mouse button to insert the part object in your layout. Live Edit mode will be terminated and text view will be enabled again. Anytime if you'd like to cancel the Live Edit mode, press "Esc" or "Backspace" key.
===G. Workspace===
We'd like to propose to set up workspace if your edc collections are consisted of multiple edc files. The function of Enventor workspace is disabled in default but if you launch Enventor with "-w" command option which specifies a workspace path, then enventor regards that folder path is workspace directory. Once the workspace is specified, traditional File browser (toggle hotkey, F9) and File tab (toggle hotkey, F11) is available in Enventor so that you could navigate multiple edc files in that tool.
We'd like to propose to set up workspace if your EDC collections are consisted of multiple edc files. The function of Enventor workspace is disabled in default but if you launch Enventor with "-w" command option which specifies a workspace path, then Enventor regards that folder path is workspace directory. Once the workspace is specified, traditional File browser (toggle hotkey, F9) and File tab (toggle hotkey, F11) are available in Enventor so that you could navigate multiple edc files in that tools.
===H. Tool Functions===
Enventor provides useful tool functions. The following table shows the tool buttons at the top of the Enventor window and their functions. If you want to toggle the tools itself, use a hotkey "F7".
Enventor provides useful tool functions. The following table shows the tool buttons at the top of Enventor window and their functions. If you want to toggle the tools itself, use a hotkey "F7".
^Icon ^ Function ^Hotkey ^
|{{:enventor-tool-high.png?&20|}} |Show a highlight effect on the selected part in the live view |Ctrl+H |
@ -218,28 +220,64 @@ Enventor provides useful tool functions. The following table shows the tool butt
===I. Status View===
Enventor displays status view on the bottom area. This status view provides extra functions. At times, it displays useful informative messages for controls. Most of times, you could change live view zoom level and its size. Otherwise, you could check the current mouse position, a name of focused group and text editor cursor line position. Please check the followings for more details. If you want to toggle the status view itself, use a hotkey "F8".
Enventor displays 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 could change live view zoom level and live view size. Otherwise, you could check the current mouse position, a name of focused group and text editor cursor line position. Please check the followings for more details. If you want to toggle the status view itself, use a hotkey "F8".
{{ :enventor-view_scale.png?&150|}}
{{ :enventor-status.png?&300|}}
==Zooming View==
To change the zoom value, you can use a zoom level controller (Slider). Zooming action can be done by "Ctrl+Mouse Wheel Up/Down" while you place the mouse cursor in the live view area also. The range of the zoom is from 0.1x to 5.0x.
To change the live view zoom value, you can use a zoom level controller (Slider). Zooming action can be done by "Ctrl+Mouse Wheel Up/Down" while you place the mouse cursor in the live view area also. The range of the zoom is from 0.1x to 5.0x.
{{:enventor-view_size.png?&150 |}}
==View Size==
It's possible to change the live view size. Click the resize expand button to display the slider to manipulate it. Also, you can swap the width and height of the live view at once. This swap function can be used for simulating some situations such as mobile device portrait/landscape modes. If you want to change the view size in detail. Please go to the Preference Setting (Settings -> Preferences -> View Size).
It's possible to change the live view size. Click a resize expand button to display a slider to manipulate it. Also, you can swap width and height of the live view at once. This swap function can be used for simulating some scenarios such as mobile device portrait/landscape modes. If you want to change view size in detail, please go to Preference Setting (Settings -> Preferences -> View Size).
===J. Command Line Usages===
===J. Templates===
{{ :enventor-template.png?&200|}}
Enventor provides various useful templates for quick start. Please open a New File (hotkey, F2). You can choose a template code among a plenty of templates in a dialogue box. These templates are designed to understand you the way of how to use EDC and how to make a gui designs with them. Also, it may bring you some ideas that you can do with EDC programming. These templates not only contain simple samples but practical examples also.
===K. Settings===
Setting window allows you to set and control Enventor properties. This window contains 3 tabs, Preferences, Text Editor and EDC Build.
{{:enventor-setting-preference.png?&200 |}}
==Preferences==
Preferences have options about Enventor GUIs occasionally used. Also, it contains some unique function options such as Auto Hiding Console, Smart Redo/Undo and Error Message Red Alert.
When Auto Hiding Console is turned on, Enventor hides the console box automatically when no messages are to be shown. For example, when you have fixed all grammatical errors.
When Smart Undo/Redo is turned on, Enventor redo/undo text by word. If it's disabled, redoing and undoing works by character.
When Error Message Red Alert is turned on, Enventor enables error message red alert effect. When EDC compilation fails because of a grammar error, Enventor alerts you with a fading screen effect.
{{ :enventor-setting-text.png?&200|}}
==Text Editor==
Text Editor tab provides text options to control font size and type. You can also change text color highlighting scheme. Double click a keyword in the preview to chage its color.
==EDC Build==
This tab provides some options to control EDC build. You can change image, sound, font, data even workspace 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 |
@ -261,4 +299,6 @@ Examples of Enventor command line usage:
* enventor input.edc output.edj -i ./images -s ./sounds -w ./workspace
===Demo Video===
{{youtube>-DQVSspuoak?large}}