hermet pushed a commit to branch master.
http://git.enlightenment.org/website/www-content.git/commit/?id=4480818ee0cb2d6f9662656e8e4349dcad2afb87
commit 4480818ee0cb2d6f9662656e8e4349dcad2afb87
Author: Hermet Park <her...@hermet.pe.kr>
Date: Fri Jul 15 22:09:50 2016 +0900
about enventor: update page.
finally, it's done!
---
media/enventor-setting-preference.png | Bin 0 -> 38059 bytes
media/enventor-setting-text.png | Bin 0 -> 62407 bytes
media/enventor-status.png | Bin 0 -> 45218 bytes
media/enventor-template.png | Bin 0 -> 113417 bytes
media/enventor-view_scale.png | Bin 24037 -> 0 bytes
media/enventor-view_size.png | Bin 26283 -> 0 bytes
pages/about-enventor.txt | 130 ++++++++++++++++++++++------------
7 files changed, 85 insertions(+), 45 deletions(-)
diff --git a/media/enventor-setting-preference.png
b/media/enventor-setting-preference.png
new file mode 100644
index 0000000..2bce8ee
Binary files /dev/null and b/media/enventor-setting-preference.png differ
diff --git a/media/enventor-setting-text.png b/media/enventor-setting-text.png
new file mode 100644
index 0000000..9f3bd51
Binary files /dev/null and b/media/enventor-setting-text.png differ
diff --git a/media/enventor-status.png b/media/enventor-status.png
new file mode 100644
index 0000000..3257095
Binary files /dev/null and b/media/enventor-status.png differ
diff --git a/media/enventor-template.png b/media/enventor-template.png
new file mode 100644
index 0000000..339a070
Binary files /dev/null and b/media/enventor-template.png differ
diff --git a/media/enventor-view_scale.png b/media/enventor-view_scale.png
deleted file mode 100644
index 485cb9c..0000000
Binary files a/media/enventor-view_scale.png and /dev/null differ
diff --git a/media/enventor-view_size.png b/media/enventor-view_size.png
deleted file mode 100644
index 729f399..0000000
Binary files a/media/enventor-view_size.png and /dev/null differ
diff --git a/pages/about-enventor.txt b/pages/about-enventor.txt
index fa3b231..f5f467c 100644
--- a/pages/about-enventor.txt
+++ b/pages/about-enventor.txt
@@ -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 vi [...]
+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 [...]
-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 [...]
+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 [...]
- * 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 a [...]
+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, Env [...]
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 i [...]
+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 config [...]
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 [...]
+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 Prefer [...]
{{ :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 re [...]
+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 reall [...]
{{ :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 [...]
+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 [...]
===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. 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.
-===J. Command Line Usages===
+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}}
--
