This means that C++ new/delete operators do not have to be used (or paired) in the user code (RAII idiom).
Of course there's no way of stopping users from allocating heap memory, but calls to the new operator can be minimised.
-<h2 class="pg">What does 'implicit smart-pointer semantics' mean in the case of Dali?</h2>
+<h2 class="pg">What does 'implicit smart-pointer semantics' mean in the case of DALi?</h2>
Since DALi objects are just handles, they can be copied by value. When a DALi object is copied, both the copy and original will point to the same DALi resource.
The internal DALi resources are reference counted; copying a DALi object will increase the reference count. A resource will not be deleted until all its Dali::Object handles are destroyed, or reset.
- returned from functions
*/
-
/*! \page hello-world Hello World - explained
-The following steps are required for displaying the sentence 'Hello World' with Dali:
+The following steps are required for displaying the sentence 'Hello World' with DALi:
- initialize the DALi library
- create an Actor showing text
* The Image View is constructed by passing a Dali::Image object or by a url path.<br>
*
* <h3 class="pg">Loading from a url path</h3>
- * Image View will load a file from a given url path. Using a url path is the prefered way of displaying an image as the Dali engine can do optimsations to
+ * Image View will load a file from a given url path. Using a url path is the prefered way of displaying an image as the DALi engine can do optimisations to
* reuse shaders and perform automatic image atlassing.<br>
* This can be a path to a image file:
* @code
Properties can be set externally by an application, allowing that application to change the configuration or behaviour of an actor.
This could include the physical geometry of the actor, or how it is drawn or moves.
-Properties can also be read. This feature can be used in conjunction with constraints to allow changes to a property within one actor to cause changes to the property of another actor. For example, an actor following the movement of another separate actor (that it is not a child of).
+Properties can also be read. This feature can be used in conjunction with constraints to allow changes to a property within one actor to cause changes to the property of another actor. For example, an actor following the movement of another separate actor (that it is not a child of).
Properties can be used to expose any useful information or behaviour of an actor.
Other actor variables that are used to implement this bevahiour, or do not make useful sense from an application developers point of view should not be exposed.
-<h2 class="pg">How to implement a property within Dali-core:</h2>
+<h2 class="pg">How to implement a property within DALi Core:</h2>
<b>There are two stages:</b>
- The parameter to DALI_PROPERTY_TABLE_END should match the start index of the property enumeration.
<br>
-<h2 class="pg">How to implement a property within Dali-toolkit controls and application-side custom controls:</h2>
+<h2 class="pg">How to implement a property within DALi Toolkit controls and application-side custom controls:</h2>
Macros are used to define properties for the following reasons:
Accessibility describes functionality designed to aid usage by the visually impaired.
This includes:
-- Reading out selections or other on-screen items via text-to-speach.
+- Reading out selections or other on-screen items via text-to-speech.
- Item selection being controlled with gestures to aid selecting other small hard to select entities.
DALi will pick up the system's current accessibility state (and subsequent changes to it) and enable its internal accessibility mode based on this.
-DALi includes an Accessibility Manager which prodives public API control of the order of object selection by gesture, and text to be read out per actor or control.
+DALi includes an Accessibility Manager which provides public API control of the order of object selection by gesture, and text to be read out per actor or control.
It further provides many signals that represent accessibility gestures. These gestures can range from a simple actor selection through to a more control-specific concept like "page-up", which an application developer may want to provide an implementation for.
![ ](../assets/img/accessibility/accessibility-focus.png) ![ ](./accessibility-focus.png)
</div>
-Visibily, when enabled, accessibility will typically show an actor (or actors) as focused. This is represented by default with yellow rectangular frame around the actor. See this section for [modifying the appearance of the accessibility focus](#accessibilityfocusappearance).
+Visibly, when enabled, accessibility will typically show an actor (or actors) as focused. This is represented by default with yellow rectangular frame around the actor. See this section for [modifying the appearance of the accessibility focus](#accessibilityfocusappearance).
Once in accessibility mode, normal control is disabled and accessibility gestures must be used to access content.
DALi actors and controls will no longer receive tap gestures or click events when they are touched once (as they normally would).
-Note: The accessibility focus is also refered to as the Focus Indicator.
+Note: The accessibility focus is also referred to as the Focus Indicator.
### Moving the focus with gestures {#accessibilitygestures}
-Accessibility recognises many gesture types to move the accessibility focus from actor to actor.
+Accessibility recognizes many gesture types to move the accessibility focus from actor to actor.
Note:
Activation describes an operation performed on a selected actor, typically an on-tap or on-click event.
Activating an actor in accessibility mode will call a virtual function, as well as signal, for that actor.
-Depending on the platform this can br triggered in different ways.
+Depending on the platform this can be triggered in different ways.
When activated, the built in actor types (like PushButton) will do the equivalent of a tap.
Custom-built actor types will need to implement activation in order to perform a specific behaviour. See the [Custom Controls](#accessibilitycustomcontrol) section.
### Modifying the appearance of the accessibility focus {#accessibilityfocusappearance}
-The focus graphic itself can be customised.
+The focus graphic itself can be customized.
It can be an image (EG. A nine-patch border) or any other type of actor.
It can be set using this method within C++:
Wrap mode allows the focus to wrap back to the beginning once the end is reached.
-In group mode this will move to the beggining of the current focus group.
+In group mode this will move to the beginning of the current focus group.
~~~{.cpp}
AccessibilityManager accessibilityManager = AccessibilityManager::Get();
This example sets up a 3 by 3 grid of actors with the following accessibility functionality:
- They have a focus order that moves from top left to bottom right (when using the accessibility next and previous gestures).
- - They contain text that will be spoken out loud (via text-to-speach) when the focus changes.
+ - They contain text that will be spoken out loud (via text-to-speech) when the focus changes.
Note that all the above is set via the AccessibilityManager and not as properties within the actors.
// Set the focus order of this actor.
accessibilityManager.SetFocusOrder( tile, tileNumber );
- // Set up the accessibility information for this actor (this will be read out with text-to-speach).
+ // Set up the accessibility information for this actor (this will be read out with text-to-speech).
accessibilityManager.SetAccessibilityAttribute( tile, Dali::Toolkit::AccessibilityManager::ACCESSIBILITY_LABEL, tileNames[tileNumber] );
accessibilityManager.SetAccessibilityAttribute( tile, Dali::Toolkit::AccessibilityManager::ACCESSIBILITY_TRAIT, "Tile" );
accessibilityManager.SetAccessibilityAttribute( tile, Dali::Toolkit::AccessibilityManager::ACCESSIBILITY_HINT, "You can run this example");
| Method | Description |
|----------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| OnAccessibilityActivated | When the control is *activated* or selected, in accessibility mode. |
-| OnAccessibilityPan | When an accessibility pan gesture occurs while this control is focussed. |
+| OnAccessibilityPan | When an accessibility pan gesture occurs while this control is focused. |
| OnAccessibilityTouch | Touch events are delivered differently in Accessibility mode. This method should be overridden if some special behaviour is required when these touch events are received. |
-| OnAccessibilityValueChange | When a value is changed while this control is focussed (e.g. value change of a slider control). |
-| OnAccessibilityZoom | Should be overridden if behaviour is required when the magnification level changes when this control is focussed. |
+| OnAccessibilityValueChange | When a value is changed while this control is focused (e.g. value change of a slider control). |
+| OnAccessibilityZoom | Should be overridden if behaviour is required when the magnification level changes when this control is focused. |
If these events are consumed, then the method should return true.
The default behaviour in the control base classes returns false, i.e. not consumed.
For more specific control of functionality when accessibility is enabled, there are several signals within the accessibility manager's public API that can be connected to.
-The main catagories of signals are:
+The main categories of signals are:
- The signal when the accessibility status is detected as being toggled on or off: StatusChangedSignal()
- Focus changes can cause FocusChangedSignal() and FocusOvershotSignal(). These can be connected to in order to provide custom actions when the focus is moved around the screen.
### Animating Properties
-There are two distint ways in which properties can be animated within DALi:
+There are two distinct ways in which properties can be animated within DALi:
- **AnimateTo:** The property will animate **TO** the value in the given time.
- **AnimateBy:** The property will animate **BY** the value in the given time.
|[PASTE][CLIPBOARD] buttons shown| [CUT][COPY], [SELECT ALL] unless all text selected and [PASTE][CLIPBOARD] if content to paste. |
| ![ ](../assets/img/text-controls/EmptyTextClipboardHasContent.png) ![ ](./EmptyTextClipboardHasContent.png) | ![ ](../assets/img/text-controls/SelectingText.png) ![ ](./SelectingText.png) |
| Condition: Long press/double tap popup when text-control contains just whitespace | Condition: Empty text & clipboard empty |
-| Whitespace treated as regular text, [CUT][COPY] shown and [PASTE][CLIPBOARD] if content to paste. As all text is selected there is no need for [SELECT ALL] | No popup shown after longpress/double tap|
+| Whitespace treated as regular text, [CUT][COPY] shown and [PASTE][CLIPBOARD] if content to paste. As all text is selected there is no need for [SELECT ALL] | No popup shown after long press/double tap|
| ![ ](../assets/img/text-controls/SelectAllWhitespace.png) ![ ](./SelectAllWhitespace.png) | ![ ](../assets/img/text-controls/EmptyTextAndNoContentToPaste.png) ![ ](./EmptyTextAndNoContentToPaste.png)|
-| Condition: Longpress/(double tap) on whitespace which is following text | Condition: Tapping text or panning grab handle |
+| Condition: Long press/(double tap) on whitespace which is following text | Condition: Tapping text or panning grab handle |
| [PASTE][CLIPBOARD] shown if something to paste. [SELECT ALL] as more text to select | If content in clipboard [PASTE][CLIPBOARD] popup will be shown. |
| ![ ](../assets/img/text-controls/SelectWhitespaceAfterText.png) ![ ](./SelectWhitespaceAfterText.png) | ![ ](../assets/img/text-controls/TapAfterCopyingText.png) ![ ](./TapAfterCopyingText.png) |
+ A **hover event** is when a pointer moves within the bounds of a custom actor (e.g. mouse pointer or hover pointer).
+ A **wheel event** is when the mouse wheel (or similar) is moved while hovering over an actor (via a mouse pointer or hover pointer).
-If the control needs to utilise hover and wheel events, then the correct behaviour flag should be used when constructing the control and then the appropriate method should be overridden.
+If the control needs to utilize hover and wheel events, then the correct behaviour flag should be used when constructing the control and then the appropriate method should be overridden.
~~~{.cpp}
// C++
bool MyUIControlImpl::OnHoverEvent( const HoverEvent& event )
+ Provides Layers to aid in 2D UI layout
+ Easy to use Animation framework
+ Automatic background loading of resources ( images / text / meshes )
- + Runs all animations in a seperate thread. This helps maintain 60 FPS even if JavaScript is performing a long operation ( e.g. Garbage Collection ).
+ + Runs all animations in a separate thread. This helps maintain 60 FPS even if JavaScript is performing a long operation ( e.g. Garbage Collection ).
+ Provides keyboard / touch / mouse handling
![ ](screen-shot.png)
## Enable debug rendering
-Setting DALI_DEBUG_RENDERING environment variable will enable the visual debuging.
+Setting DALI_DEBUG_RENDERING environment variable will enable the visual debugging.
Then, every concrete visual ( ColorVisual, BorderVisual, ImageVisual, GradientVisual, etc. ) is replaced with a DebugVisual object.
Debug visual renders a simple quad wireframe, so that the control layout and scene structure is clearly displayed.
<!--
/**-->
-# Writing documentation for the DALi programing guide {#documentationguide}
+# Writing documentation for the DALi programming guide {#documentationguide}
To allow documentation to be shared between C++ and JavaScript, please follow these guidelines:
[Go To MyChapter](@ref my-chapter)
~~~
-Code blocks can be enclosed within 2 blocks of 3 tildas(~).
+Code blocks can be enclosed within 2 blocks of 3 tildes(~).
You can even specify your language type, for example:
~~~{.md}
Dali-Core can be built using with Emscripten producing a Javascript version of DALi.
A web page can then be made with HTML, and by embedding Javascript can reference and control the DALi Javascript canvas.
-This allows you to have a DALi canvas within a webpage that can either:
+This allows you to have a DALi canvas within a web page that can either:
- Run autonomously
-- Be controlled by HTML / Javascript controls elsewhere on the webpage
+- Be controlled by HTML / Javascript controls elsewhere on the web page
The necessary scripts for building are included within each DALi repository.
- Building dali-adaptor Emscripten replacement with a separate build script found in dali-adaptor
- Installing the examples within the dali-demo repository
-## Build Artefacts {#emscripten-artefacts}
+## Build Artifacts {#emscripten-artifacts}
-Each step in the build process will produce artefacts that will be written to the DALi environment directory.
+Each step in the build process will produce artifacts that will be written to the DALi environment directory.
- dali-core: Produces a dali-core.so in bytecode.
- dali-adaptor: Produces:
# Running The Live Unit Tests {#emscripten-tests}
Included are some live unit tests.
-These run as a webpage within a browser, a DALi canvas is created and used to run each test.
+These run as a web page within a browser, a DALi canvas is created and used to run each test.
The QUnit test suite is used (included within the repository for compatibility).
![ ](../assets/img/emscripten/emscripten-tests.png) ![ ](./emscripten-tests.png)
<br>
-For the tests to work correctly, the webpage should be run through a webserver, rather than directly with a browser.
+For the tests to work correctly, the web page should be run through a web server, rather than directly with a browser.
This can be achieved simply using npms's zero configuration command line server: "http-server".
To install "http-server":
flexContainer.Add( item1 );
Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
-flexContainer.Add( item2 ); // item2 is aligned at the beginning of ther container
+flexContainer.Add( item2 ); // item2 is aligned at the beginning of the container
Dali::Toolkit::Control item3 = Dali::Toolkit::Control::New();
item3.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::ALIGN_SELF, Dali::Toolkit::FlexContainer::ALIGN_FLEX_END ); // Align item3 at the bottom of the container
flexContainer.Add( item3 );
Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
-flexContainer.Add( item4 ); // item4 is aligned at the beginning of ther container
+flexContainer.Add( item4 ); // item4 is aligned at the beginning of the container
~~~
flexContainer.add(item1);
var item2 = new dali.Control();
-flexContainer.add(item2); // item2 is aligned at the beginning of ther container
+flexContainer.add(item2); // item2 is aligned at the beginning of the container
var item3 = new dali.Control();
item1.alignSelf = "flexEnd"; // Align item3 at the bottom of the container
flexContainer.add(item3);
var item4 = new dali.Control();
-flexContainer.add(item4); // item4 is aligned at the beginning of ther container
+flexContainer.add(item4); // item4 is aligned at the beginning of the container
~~~
___________________________________________________________________________________________________
## Actors and the Stage {#actors-and-stage}
Actor is the primary object with which DALi applications interact.
-A DALi application uses a hierachy of Dali::Actor objects to position visible content.
+A DALi application uses a hierarchy of Dali::Actor objects to position visible content.
An actor inherits a position relative to its parent, and can be moved relative to this point.
UI controls can be built by combining multiple actors.
## Scene Graph {#scene-graph}
-From wikipedia...
+From Wikipedia...
A scene graph is a collection of nodes in a graph or tree structure.
A node may have many children but often only a single parent,
### New property has been added
- No code change required.
-- It will be automatically avalable using the dot notation. E.g. actor.my_new_property = true;
+- It will be automatically available using the dot notation. E.g. actor.my_new_property = true;
### New property type has been added
- modify property-value-wrapper.h / .cpp to support the new type
### New function added to an object
- Add the function name to function table in my-object-wrapper.cpp
- Add the forwarding function to my-object-api.cpp/.h
-- Ensure you have created YUIDOC documention above the function
+- Ensure you have created YUIDOC documentation above the function
![ ](../assets/img/javascript-wrapping-guide/adding-function.png)
![ ](adding-function.png)
If Light inherits from Handle then use path-wrapper and path-api as a template to create light-wrapper and light-api
( inherits from HandleWrapper)
-Otherwise use animation-wrapper and animation-api as a template ( inherts from BaseWrappedObject)
+Otherwise use animation-wrapper and animation-api as a template ( inherits from BaseWrappedObject)
@class _Guide_JavaScript_Wrapping
-*/
\ No newline at end of file
+*/
+++-> Actor3 ( depth Index offset of 3000)
+++-> Actor4 ( depth Index offset of 3000)
+++-> Actor5 ( depth Index offset of 3000)
- +++-> Layer1 ( depth Index has no meaning for layers, layer draw order is independent of the heirachy).
+ +++-> Layer1 ( depth Index has no meaning for layers, layer draw order is independent of the hierarchy).
++++-> Actor6 ( depth Index offset of 4000)
++++-> Actor7 ( depth Index offset of 4000)
++++-> Actor8 ( depth Index offset of 4000)
### Layer Actor Specific Properties
-| Name | Type | Writeable | Animatable|
+| Name | Type | Writable | Animatable|
|------------------------|------------|--------------|-----------|
| clippingEnable |BOOLEAN | 0 | X |
| clippingBox | ARRAY [0,0,400,600]) | 0 | X|
- Actors
- The final part of hit testing is performed by walking through the actor tree within a layer.
- - The following pseudocode shows the algorithm used:
+ - The following pseudo-code shows the algorithm used:
~~~
actor (and its parents). There will be NO touch signal delivery for the hit actors of the
other touch points.
- The local coordinates are from the top-left (0.0f, 0.0f, 0.5f) of the hit actor.
- - The following pseudocode shows the delivery mechanism:
+ - The following pseudo-code shows the delivery mechanism:
~~~
EMIT-TOUCH-SIGNAL( ACTOR )
# Performance Profiling {#performanceprofiling}
-DALi has many mechanisms for analysing performance including kernel, system and network logging.
+DALi has many mechanisms for analyzing performance including kernel, system and network logging.
## Background
Setting DALI_PERFORMANCE_TIMESTAMP_OUTPUT environment variable will enable time stamps.
-Tools such as Tizen dynamic analyser and StageHand can be used to provide a GUI display of
+Tools such as Tizen dynamic analyzer and StageHand can be used to provide a GUI display of
the output.
|------|--------------------------|--------------|
| 0 | log markers to DALi log (dlog on Tizen) | DALI_PERFORMANCE_TIMESTAMP_OUTPUT=1 dali-demo |
| 1 | log markers to kernel trace ( logs to ftrace )| DALI_PERFORMANCE_TIMESTAMP_OUTPUT=2 dali-demo |
-| 2 | log markers to system trace ( ttrace on Tizen for Tizen analyser) | DALI_PERFORMANCE_TIMESTAMP_OUTPUT=4 dali-demo |
+| 2 | log markers to system trace ( ttrace on Tizen for Tizen analyzer) | DALI_PERFORMANCE_TIMESTAMP_OUTPUT=4 dali-demo |
| 3 | log markers to network client (tcp port 3001+) | DALI_PERFORMANCE_TIMESTAMP_OUTPUT=8 dali-demo |
~~~
Ftrace is a kernel tracer designed to help developers find out what is going on inside the kernel.
-It can be used for analysing how long DALi takes to perform different tasks and
+It can be used for analyzing how long DALi takes to perform different tasks and
what DALi is doing in relation to other system processes / interrupts.
On Tizen if the kernel has been built with ftrace enabled, then DALi can log out to ftrace.
-This gives exact time stamps of the main events in Dali.
+This gives exact time stamps of the main events in DALi.
Current markers that are logged:
- Try to reduce actor count ( less actors == less processing)
- Delete any actors that are not visible, or move them off stage
- Use TextureAtlases ( reduces OpenGL driver calls to glBindTexture
- - Optimise / reduce any constraints used
+ - Optimize / reduce any constraints used
## High GPU occupancy
~~~{.cpp}
// C++
-// In this mode depth testing is turned off and order is determined by the hierachy (depth-first search order).
+// In this mode depth testing is turned off and order is determined by the hierarchy (depth-first search order).
// Not always recommended if there is going to be a lot of overdraw ( if lots of actors are on top of each other)
Actor::SetDrawMode( DrawMode::OVERLAY_2D ); // C++
~~~{.js}
// JavaScript
-// In this mode depth testing is turned off and order is determined by the hierachy (depth-first search order).
+// In this mode depth testing is turned off and order is determined by the hierarchy (depth-first search order).
// Not always recommended if there is going to be a lot of overdraw ( if lots of actors are on top of each other)
actor.drawMode = dali.DRAW_MODE_OVERLAY_2D;
- Use Dali::NinePatchImage where possible.
- Avoid using too many textures which contain alpha and require blending
- Avoid using too many Dali::Layer with depth testing enabled. Otherwise the layer has to clear the depth buffer.
- - Optimise any shaders used. Pixel shaders should be kept as lean as possible.
+ - Optimize any shaders used. Pixel shaders should be kept as lean as possible.
@class _Guide_Performance_Tips
The Popup can be configured to a preset type by using named types within the type-registry.
-These types are modifications / specialisations of a Popup. They provide the library user with a shortcut way of creating a specific type of Popup.
+These types are modifications / specializations of a Popup. They provide the library user with a shortcut way of creating a specific type of Popup.
The Popup control features a "Toast" popup type. This is a Popup that appears at the bottom of the screen, typically with some text. They are normally for informational purposes only.
ConfirmationPopup will automatically provide signals for 1 or 2 controls.
Note: The controls do not need to be PushButtons.
-These signals are dynamically created. The controls (typically PushButtons) must be specifially named so the ConfirmationPopup can locate them.
+These signals are dynamically created. The controls (typically PushButtons) must be specifically named so the ConfirmationPopup can locate them.
## Step 1 {#popupconfirmationstep1}
Name your controls.
The ConfirmationPopup will dynamically make the connection between the signalling control, and your signal handler.
-This allows connection of signals within both C++, JSON and Javascript APIs.
-If more manual control or customisable layout is needed, then it is recommended to use the Popup widget directly for full control.
+This allows connection of signals within both C++, JSON and JavaScript APIs.
+If more manual control or customizable layout is needed, then it is recommended to use the Popup widget directly for full control.
The JSON code example at the bottom of this document uses the ConfirmationPopup to allow signal connection from within the JSON description.
### Developer options:
* A target size of the image - this could be the full screen size for example.
-* A Fitting mMde - This determines how the image is fitted to the target dimensions. If necessary the image will be cropped, or have borders added automatically.
+* A Fitting mode - This determines how the image is fitted to the target dimensions. If necessary the image will be cropped, or have borders added automatically.
* A Sampling Mode - This determines the quality of the scaling (by specifying the type of filtering to use).
### Benefits of Resource Image Scaling:
There are more code examples later in this document under [API usage](#resourceimagescaling-apidetails). For now we will just give one full code example to show how this feature is used..
-Let's say we are writing a home-screen application for a smartphone.
+Let's say we are writing a home-screen application for a smart phone.
Here we have a large, square image that we want to set as the wallpaper on a tall and narrow phone screen.
We want to fill the screen without distorting the image or having black borders, and wasting as few pixels from the source image as possible.
![ ](../assets/img/image-scaling/example-scale-to-fill-problem.jpg)
![ ](example-scale-to-fill-problem.jpg)
-DALi provides the concept of a `FittingMode` to specify how a source image is mapped into a target rectangle, and the one we need here is `FittingMode::SCALE_TO_FILL` as it guarrentees to cover all of the pixels of the target dimensions specified.
+DALi provides the concept of a `FittingMode` to specify how a source image is mapped into a target rectangle, and the one we need here is `FittingMode::SCALE_TO_FILL` as it guarantees to cover all of the pixels of the target dimensions specified.
A second concept of a `SamplingMode` controls how source image pixels are combined during the scaling and allows the developer to trade speed for quality.
Since our image is to be loaded once and reused, we use `SamplingMode::BOX_THEN_LINEAR` which is the highest quality option.
- Target Size: Determine target size (from source image size and any user specified target dimensions).
- Target Image Dimensions: Determine the size the image should be scaled to (taking Fitting Mode into account)
- Scaling: Perform a scale to target image dimensions using the specified Sampling mode.
-- Crop or Add Borders: Automatically perfomed as necessary to maintain final target aspect (actual stored data size could be smaller).
+- Crop or Add Borders: Automatically performed as necessary to maintain final target aspect (actual stored data size could be smaller).
| `FittingMode` | **Operation** |
| ------------- | ------------- |
-| `SCALE_TO_FILL` | Centers the image on the target box and uniformly scales it so that it matches the target in one dimension and extends outside the target in the other. Chooses the dimension to match that results in the fewest pixels outside the target. Trims away the parts of the image outside the target box so as to match it exactly. This guarentees all of the target area is filled. |
-| `SHRINK_TO_FIT` | Centers the image on the target box and uniformly scales it so that it matches the target in one dimension and fits inside it in the other. This guarentees that all of the source image area is visible. |
+| `SCALE_TO_FILL` | Centers the image on the target box and uniformly scales it so that it matches the target in one dimension and extends outside the target in the other. Chooses the dimension to match that results in the fewest pixels outside the target. Trims away the parts of the image outside the target box so as to match it exactly. This guarantees all of the target area is filled. |
+| `SHRINK_TO_FIT` | Centers the image on the target box and uniformly scales it so that it matches the target in one dimension and fits inside it in the other. This guarantees that all of the source image area is visible. |
| `FIT_WIDTH` | Centers the image on the target box and uniformly scales it so that it matches the target width without regard for the target height. |
| `FIT_HEIGHT` | Centers the image on the target box and uniformly scales it so that it matches the target in height without regard for the target width. |
<!--
/**-->
-# Resources {#resoources}
+# Resources {#resources}
## Resource Image {#resource-image}
The application can connect to the Dali::ResourceImage::LoadingFinishedSignal() to get notified when the image has loaded.
By default, resource images start loading immediately and the data is released only when the ResourceImage handle is destroyed.
-To optimise an application's memory footprint, the application can ask resources to be only loaded when actually required and
+To optimize an application's memory footprint, the application can ask resources to be only loaded when actually required and
their data to be released automatically when they are no longer being used (not being used by Actors).
~~~{.cpp}
Dali::ResourceImage image = Dali::ResourceImage::New( "/my-path/my-image.png", Dali::ResourceImage::ON_DEMAND, Dali::Image::UNUSED );
~~~
## Hello World - Javascript
- The DALi script application is needed to run the Javascript which provides a Javascript runtime and an interface to Dali.
+ The DALi script application is needed to run the Javascript which provides a Javascript runtime and an interface to DALi.
~~~
scripting.example hello-world.js
@class _Guide_Script_Hello_World
-*/
\ No newline at end of file
+*/
## Includes {#includes}
-The "includes" section is an array of filenames to be merged in order to
+The "includes" section is an array of file names to be merged in order to
create a final in memory JSON tree.
The merge process will walk key, value attributes from the root JSON
~~~
When applied to an actor tree the actors are referenced by name. Names
-are not unique in Dali.
+are not unique in DALi.
When a style is applied in code DALi will perform a depth first search
stopping with the first matching name.
When the animation is created from code (or from a signal) the property
name search begins on the actor, if it isn't found the search continues
-on the attached shader object.
+on the attached renderer, and then on the attached shader object.
The actor property names and shader uniform names must not clash for the
uniform to animate correctly. The convention in DALi is to prepend
The stage section supports the immediate creation of actors at the time
the JSON is loaded.
-The stage is a tree of actors that can be added to Dali's stage object.
+The stage is a tree of actors that can be added to DALi's stage object.
~~~
// C++
# Actor and Control Properties {#actorprop}
-Each control has a set of supported properties documented in the "Dali
+Each control has a set of supported properties documented in the "DALi
UI Control Specification".
Please refer to the above document for further information about specific
- JavaScript to support:
- Rapid Application Development
- Hybrid C++/JavaScript applications
- - Leaverage third party JavaScript modules (backbone.js etc)
+ - Leverage third party JavaScript modules (backbone.js etc)
JSON support is built in to DALi.
@class _Guide_JSON_and_JavaScript_overview
-*/
\ No newline at end of file
+*/
![ ](../assets/img/stage-hand/stagehand-screenshot.png)
![ ](stagehand-screenshot.png)
-To cycle through the actor hierachy, keep clicking the same spot. Alternatively, select using the actor tree.
+To cycle through the actor hierarchy, keep clicking the same spot. Alternatively, select using the actor tree.
![ ](../assets/img/stage-hand/stagehand-mainscreen.png)
launch_app [APP_ID] __AUL_SDK__ DEBUG __DLP_DEBUG_ARG__ :10003
~~~
-@class _Guide_Visual_Debugger
\ No newline at end of file
+@class _Guide_Visual_Debugger
### Usage
-At version 1.1.35 auto scrolling is only supported in single line, mutliline text will not scroll and Text should be BEGIN aligned.
+At version 1.1.35 auto scrolling is only supported in single line, multiline text will not scroll and Text should be BEGIN aligned.
The ENABLE_AUTO_SCROLL property should be set to TRUE to enable scrolling.
Once enabled it will start scrolling until the loop count is completed or the ENABLE_AUTO_SCROLL set to false, setting ENABLE_AUTO_SCROLL to false will let the
text complete it's current scrolling loop then stop.
-## The additional properties below can be set to customise the scrolling behaviour
+## The additional properties below can be set to customize the scrolling behaviour
#### AUTO_SCROLL_SPEED
### Scroll Direction
-The scroll direction is choosen automatically with the following rules:
+The scroll direction is chosen automatically with the following rules:
If the text is single-lined it will scroll left when the text is Left to Right (LTR) or scroll right if text is Right to Left (RTL).
Before any text has been entered, the TextField can display some placeholder text.
An alternative placeholder can be displayed when the TextField has keyboard focus.
-For example a TextField used to enter a username could initially show "Unknown Name", and then show "Enter Name." when the cursor is shown.
+For example a TextField used to enter a user name could initially show "Unknown Name", and then show "Enter Name." when the cursor is shown.
Note *CR+LF* new line characters are replaced by a *LF* one.
This means that custom controls do not have to create actors, they can just reuse the existing visuals which increases performance.
Visuals reuse geometry, shaders etc. across controls and manages the renderer and material to exist only when the control is on-stage.
-Additionaly, they respond to actor size and color change, while also providing clipping at the renderer level.
+Additionally, they respond to actor size and color change, while also providing clipping at the renderer level.
DALi provides the following visuals:
+ [Color](@ref color-visual)