${devel_api_src_dir}/image-loader/atlas-upload-observer.cpp\r
${devel_api_src_dir}/image-loader/image-atlas.cpp\r
${devel_api_src_dir}/image-loader/texture-manager.cpp\r
- ${devel_api_src_dir}/scripting/script.cpp\r
${devel_api_src_dir}/styling/style-manager-devel.cpp\r
${devel_api_src_dir}/transition-effects/cube-transition-cross-effect.cpp\r
${devel_api_src_dir}/transition-effects/cube-transition-effect.cpp\r
${internal_src_dir}/transition-effects/cube-transition-cross-effect-impl.cpp\r
${internal_src_dir}/transition-effects/cube-transition-fold-effect-impl.cpp\r
${internal_src_dir}/transition-effects/cube-transition-wave-effect-impl.cpp\r
- ${internal_src_dir}/scripting/script-impl.cpp\r
- ${internal_src_dir}/scripting/script-plugin-proxy.cpp\r
${internal_src_dir}/text/xhtml-entities.cpp\r
)\r
\r
utc-Dali-KeyInputFocusManager.cpp
utc-Dali-PageTurnView.cpp
utc-Dali-Scene3dView.cpp
- utc-Dali-Script.cpp
utc-Dali-ScrollBar.cpp
utc-Dali-ScrollView.cpp
utc-Dali-ShaderEffects.cpp
+++ /dev/null
-/*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-#include <iostream>
-#include <stdlib.h>
-#include <dali-toolkit-test-suite-utils.h>
-#include <dali-toolkit/dali-toolkit.h>
-#include <dali-toolkit/devel-api/scripting/script.h>
-
-using namespace Dali;
-using namespace Dali::Toolkit;
-
-void dali_script_startup(void)
-{
- test_return_value = TET_UNDEF;
-}
-
-void dali_script_cleanup(void)
-{
- test_return_value = TET_PASS;
-}
-
-int UtcDaliScriptExecuteFileN(void)
-{
- ToolkitTestApplication application;
- tet_infoline(" UtcDaliScriptExecuteFileN");
-
- Script script = Script::New();
-
- bool ok = script.ExecuteFile("non-existing file");
-
- DALI_TEST_CHECK( !ok );
-
- END_TEST;
-}
#
-# Copyright (c) 2014 Samsung Electronics Co., Ltd.
+# Copyright (c) 2019 Samsung Electronics Co., Ltd.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
SUBDIRS = dali-toolkit
-if ENABLE_JAVASCRIPT_PLUGIN
-SUBDIRS +=plugins/javascript
-endif
-
-if ENABLE_CSHARP_PLUGIN
-SUBDIRS +=plugins/csharp
-endif
-
# perform documentation last, so it doesn't prevent code from building if there's an error
SUBDIRS += docs
[enable_i18n=$enableval],
[enable_i18n=no])
-# option to build JavaScript plugin
-# configure settings and output
-# --enable-javascript // enable_javascript = yes
-# --enable-javascript=yes // enable_javascript = yes
-# --enable-javascript=no // enable_javascript = no
-# --disable-javascript // enable_javascript = no
-# no setting // enable_javascript = automatic ( enable if v8 present)
-AC_ARG_ENABLE([javascript],
- [AC_HELP_STRING([--enable-javascript],
- [Enable JavaScript plugin])],
- [enable_javascript=$enableval],
- [enable_javascript=automatic])
-
-# option to build C# plugin
-# configure settings and output
-# --enable-csharp // enable_csharp = yes
-# --enable-csharp=yes // enable_csharp = yes
-# --enable-csharp=no // enable_csharp = no
-# no setting // enable_csharp = no
-AC_ARG_ENABLE([csharp],
- [AC_HELP_STRING([--enable-csharp],
- [Enable csharp plugin])],
- [enable_csharp=$enableval],
- [enable_csharp=automatic])
-
AC_ARG_ENABLE([rename_so],
[AC_HELP_STRING([--enable-rename-so],
[Specify whether so file is renamed or not])],
AC_SUBST(STYLE_BASE_DIR)
AC_SUBST(STYLE_DIR)
-# v8 version 4+ requires c++11
-PKG_CHECK_MODULES(V8, v8 = 3.32.7, [ pkg_check_v8=yes ], [ pkg_check_v8=no ] )
-
-# Rules for building JavaScript plugin
-# If enable_javascript=yes and v8 installed = build javascript
-# If enable_javascript=automatic and v8 installed = build javascript
-# If enable_javascript=yes and v8 not installed = throw an error
-build_javascript_plugin=no
-if test x$enable_javascript = xyes; then
- if test x$pkg_check_v8 = xno; then
- [build_javascript_plugin=no]
- AC_MSG_ERROR("V8 not found or incorrect version installed")
- AC_MSG_NOTICE("To disable building of JavaScript plugin use --disable-javascript")
- else
- [build_javascript_plugin=yes]
- AC_MSG_NOTICE(V8 library found. Building DALi JavaScript plugin)
- fi
-fi
-if test x$enable_javascript = xautomatic && test x$pkg_check_v8 = xyes; then
- [build_javascript_plugin=yes]
- AC_MSG_NOTICE( V8 library found. Automatic building of JavaScript plugin. Use use --disable-javascript to disable)
-fi
-
-
-#set a variable for the makefile to force compile the JAvaSplugin
-AM_CONDITIONAL([ENABLE_JAVASCRIPT_PLUGIN], [test x$build_javascript_plugin = xyes])
-
# Platforms with highp shader support can use vector based text
AM_CONDITIONAL([ENABLE_VECTOR_BASED_TEXT_RENDERING], [test x$dali_profile = xUBUNTU])
PKG_CHECK_MODULES(DALICORE, dali-core)
PKG_CHECK_MODULES(DALIADAPTOR, dali-adaptor)
-# Enable csharp plugin
-build_csharp_plugin=no
-build_ruby_flag=no
-if test x$enable_csharp = xyes; then
- [build_csharp_plugin=yes]
- AC_MSG_NOTICE(Building DALi csharp plugin ...)
- AC_PATH_PROG([SWIG], [swig])
-
- # if gbs enable, then only use swig, without ruby or mcs
- if test "x$dali_profile" = "xUBUNTU"; then
- [build_ruby_flag=yes]
- AC_PATH_PROG([RUBY], [ruby])
- AC_PATH_PROGS([MCS], [mcs gmcs gmcs2])
- AC_MSG_NOTICE(swig ruby mcs working ...)
- else
- [build_ruby_flag=no]
- AC_PATH_PROG([RUBY], [ruby])
- #AC_PATH_PROGS([MCS], [mcs gmcs gmcs2])
- #AC_MSG_NOTICE(swig only working ...)
- fi
-
- # Set varaibles for dali-toolkit
- DALITOOLKIT_CFLAGS="-I${prefix}/include -I${prefix}/include/dali-toolkit"
- DALITOOLKIT_LIBS="-L${prefix}/lib -ldali-toolkit -ldali-core"
- AC_SUBST(DALITOOLKIT_CFLAGS)
- AC_SUBST(DALITOOLKIT_LIBS)
-fi
-
-#set a variable for the makefile to force compile the csharp plugin
-AM_CONDITIONAL([ENABLE_CSHARP_PLUGIN], [test x$build_csharp_plugin = xyes])
-AM_CONDITIONAL([ENABLE_RUBY_FLAG], [test x$build_ruby_flag = xyes])
-
AC_CONFIG_FILES([
Makefile
dali-toolkit/Makefile
- plugins/javascript/Makefile
- plugins/csharp/Makefile
docs/Makefile
docs/dali.doxy
docs-internal/dali-internal.doxy
Prefix: $prefix
Debug Build: $enable_debug
Trace Build: $enable_trace
- JavaScript support (V8 required) $build_javascript_plugin
- CSharp support $build_csharp_plugin
Profile: $dali_profile
Data Dir (Read/Write): $dataReadWriteDir
Data Dir (Read Only): $dataReadOnlyDir
develapiimageloaderdir = $(develapidir)/image-loader
develapilayoutingdir = $(develapidir)/layouting
develapilayoutingcontrolsdir = $(develapidir)/controls/layouting
-develapiscriptingdir = $(develapidir)/scripting
develapishadereffectsdir = $(develapidir)/shader-effects
develapistylingdir = $(develapidir)/styling
develapitransitioneffectsdir = $(develapidir)/transition-effects
develapipopup_HEADERS = $(devel_api_popup_header_files)
develapivisualfactory_HEADERS = $(devel_api_visual_factory_header_files)
develapivisuals_HEADERS = $(devel_api_visuals_header_files)
-develapiscripting_HEADERS = $(devel_api_scripting_header_files)
develapiscene3dview_HEADERS = $(devel_api_scene3d_view_header_files)
develapishadowview_HEADERS = $(devel_api_shadow_view_header_files)
develapishadereffects_HEADERS = $(devel_api_shader_effects_header_files)
@cat doxygen-errors.txt
@if [ -s doxygen-errors.txt ]; then exit 1 ; fi
@rm doxygen-errors.txt
-# Build JavaScript API documentation using yuidoc ( Yahoo JavaScript Documentation Tool )
-# We first test yuidoc exists, then change in to the dali-script-v8 docs directory and run yuidoc
- @if [ ! `which yuidoc` = "" ]; then cd ../../../plugins/dali-script-v8/docs && yuidoc --config yuidoc.json -e ".cpp,.js,.md" -o generated .. ../../../docs/content/shared-javascript-and-cpp-documentation/ ; fi
+++ /dev/null
-# Copyright (c) 2016 Samsung Electronics Co., Ltd.
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-# http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-dali_swig_dir = ../../../../plugins/dali-swig
-
-BUILT_SOURCES = \
- $(dali_swig_dir)/automatic/cpp/dali_wrap.cpp \
- $(dali_swig_dir)/automatic/cpp/dali_wrap.h \
- $(dali_swig_dir)/manual/cpp/keyboard_focus_manager_wrap.cpp \
- $(dali_swig_dir)/manual/cpp/view-wrapper-impl-wrap.cpp \
- $(dali_swig_dir)/manual/cpp/event-thread-callback-wrap.cpp
-
-all-local:
-gbs-local: libNDalic.so NDali.dll
-
-libNDalic.so: $(dali_swig_dir)/automatic/cpp/dali_wrap.o $(dali_swig_dir)/manual/cpp/keyboard_focus_manager_wrap.o $(dali_swig_dir)/manual/cpp/view-wrapper-impl-wrap.o $(dali_swig_dir)/manual/cpp/event-thread-callback-wrap.o
- $(CXX) -shared $(dali_swig_dir)/automatic/cpp/dali_wrap.o $(dali_swig_dir)/manual/cpp/keyboard_focus_manager_wrap.o $(dali_swig_dir)/manual/cpp/view-wrapper-impl-wrap.o $(dali_swig_dir)/manual/cpp/event-thread-callback-wrap.o -o $(dali_swig_dir)/libNDalic.so $(DALICORE_LIBS) $(DALIADAPTOR_LIBS) $(DALITOOLKIT_LIBS)
-
-$(dali_swig_dir)/automatic/cpp/dali_wrap.o: $(BUILT_SOURCES)
- $(CXX) -c -fpic $(CXXFLAGS) $(DALICORE_CFLAGS) $(DALIADAPTOR_CFLAGS) $(DALITOOLKIT_CFLAGS) $(dali_swig_dir)/automatic/cpp/dali_wrap.cpp -o $(dali_swig_dir)/automatic/cpp/dali_wrap.o
-
-$(dali_swig_dir)/manual/cpp/keyboard_focus_manager_wrap.o: $(BUILT_SOURCES)
- $(CXX) -c -fpic $(CXXFLAGS) $(DALICORE_CFLAGS) $(DALIADAPTOR_CFLAGS) $(DALITOOLKIT_CFLAGS) $(dali_swig_dir)/manual/cpp/keyboard_focus_manager_wrap.cpp -o $(dali_swig_dir)/manual/cpp/keyboard_focus_manager_wrap.o
-
-$(dali_swig_dir)/manual/cpp/view-wrapper-impl-wrap.o: $(BUILT_SOURCES)
- $(CXX) -c -fpic $(CXXFLAGS) $(DALICORE_CFLAGS) $(DALIADAPTOR_CFLAGS) $(DALITOOLKIT_CFLAGS) $(dali_swig_dir)/manual/cpp/view-wrapper-impl-wrap.cpp -o $(dali_swig_dir)/manual/cpp/view-wrapper-impl-wrap.o
-
-$(dali_swig_dir)/manual/cpp/event-thread-callback-wrap.o: $(BUILT_SOURCES)
- $(CXX) -c -fpic $(CXXFLAGS) $(DALICORE_CFLAGS) $(DALIADAPTOR_CFLAGS) $(DALITOOLKIT_CFLAGS) $(dali_swig_dir)/manual/cpp/event-thread-callback-wrap.cpp -o $(dali_swig_dir)/manual/cpp/event-thread-callback-wrap.o
-
-NDali.dll: $(BUILT_SOURCES)
-# mcs -nologo -target:library -out:$(dali_swig_dir)/NDali.dll $(dali_swig_dir)/automatic/csharp/*.cs $(dali_swig_dir)/manual/csharp/*.cs
-
-$(BUILT_SOURCES): $(dali_swig_dir)/SWIG/*.i
- rm -f $(dali_swig_dir)/automatic/csharp/*.cs
- rm -f $(dali_swig_dir)/automatic/cpp/*.cpp
- $(SWIG) -version
- $(SWIG) -csharp -c++ -outdir $(dali_swig_dir)/automatic/csharp \
- $(DALI_CFLAGS) $(DALICORE_CFLAGS) $(DALIADAPTOR_CFLAGS) $(DALITOOLKIT_CFLAGS) -namespace Dali -o $(dali_swig_dir)/automatic/cpp/dali_wrap.cpp $(dali_swig_dir)/SWIG/dali.i
-
-gbs-install: gbs-local
- -$(INSTALL) -d $(DESTDIR)
- -$(INSTALL) $(dali_swig_dir)/libNDalic.so $(DESTDIR)
- -$(INSTALL) $(dali_swig_dir)/NDali.dll $(DESTDIR)
-
-EXTRA_DIST = \
- swig.cmd
-
+++ /dev/null
-#
-# Copyright (c) 2015 Samsung Electronics Co., Ltd.
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-# http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#
-
-# Build the Dali Toolkit library
-
-plugin_src_dir = ../../../../plugins
-
-include ../../../../plugins/dali-script-v8/file.list
-
-
-lib_LTLIBRARIES = libdali-script-plugin-v8.la
-
-# force the source code to include the directory the wrapper file is in
-# e.g. actors/actor-api.h to copy the same include style as dali-core
-# The reason for including toolkit paths directly instead of just the
-# install path for dali-toolkit.h, is dali-toolkit.h is not installed yet.
-# It won't be installed until the rpm is installed, and unfortunately the
-# plugin is part of the same rpm
-script_plugin_v8_includes = -I../../../../plugins/dali-script-v8/src \
- -I../../../../plugins/dali-script-v8/src/utils
-
-
-libdali_script_plugin_v8_la_SOURCES = \
- $(script_v8_plugin_src_files)
-
-libdali_script_plugin_v8_la_DEPENDENCIES =
-
-libdali_script_plugin_v8_la_CXXFLAGS = -DDALI_COMPILATION \
- -I../../../../ \
- $(V8_CFLAGS) \
- $(DALI_TOOLKIT_CFLAGS) \
- $(DALICORE_CFLAGS) \
- -DDALI_DATA_READ_ONLY_DIR="\"${dataReadOnlyDir}\"" \
- $(DALI_CFLAGS) \
- $(DLOG_CFLAGS) \
- $(script_plugin_v8_includes) \
- $(V8_CFLAGS) \
- -Werror -Wall
-
-libdali_script_plugin_v8_la_LIBADD = \
- $(DALICORE_LIBS) \
- $(DALI_LIBS) \
- $(DLOG_LIBS) \
- $(V8_LIBS)
-
-libdali_script_plugin_v8_la_LDFLAGS = \
- -rdynamic
+++ /dev/null
-<manifest>
- <request>
- <domain name="_"/>
- </request>
-</manifest>
$(devel_api_src_dir)/image-loader/image-atlas.cpp \
$(devel_api_src_dir)/image-loader/texture-manager.cpp \
$(devel_api_src_dir)/layouting/flex-node.cpp \
- $(devel_api_src_dir)/scripting/script.cpp \
$(devel_api_src_dir)/styling/style-manager-devel.cpp \
$(devel_api_src_dir)/text/bitmap-font.cpp \
$(devel_api_src_dir)/text/text-utils-devel.cpp \
$(devel_api_src_dir)/image-loader/image-atlas.h \
$(devel_api_src_dir)/image-loader/texture-manager.h
-devel_api_scripting_header_files = \
- $(devel_api_src_dir)/scripting/script.h \
- $(devel_api_src_dir)/scripting/script-plugin.h
-
devel_api_shader_effects_header_files = \
$(devel_api_src_dir)/shader-effects/alpha-discard-effect.h \
$(devel_api_src_dir)/shader-effects/dissolve-effect.h \
+++ /dev/null
-#ifndef DALI_SCRIPT_PLUGIN_H
-#define DALI_SCRIPT_PLUGIN_H
-
-/*
- * Copyright (c) 2019 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-#include <dali-toolkit/public-api/dali-toolkit-common.h>
-#include <string>
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-/**
- * @brief Abstract interface to provide scripting support.
- *
- * A plugin must export the following functions to create / destroy the object
- * CreateScriptPlugin() // returns a pointer to a ScriptPlugin object
- * DestroyScriptPlugin() // destroys the plugin
- */
-class DALI_TOOLKIT_API ScriptPlugin
-{
-public:
-
-
- /**
- * Function pointer called in toolkit to create a ScriptPlugin plugin instance.
- * @return Pointer to the newly created plugin object
- */
- typedef ScriptPlugin* Create();
-
- /**
- * Function pointer called in toolkit to Unload the plugin.
- * @param plugin The plugin object created and returned by CreateScriptPluginPlugin().
- */
- typedef void Destroy(ScriptPlugin* plugin);
-
- /**
- * virtual Destructor.
- */
- virtual ~ScriptPlugin() {};
-
- /**
- * Set engine configuration flags
- * @param [in] flags string. Format dependent on the scripting engine.
- */
- virtual void SetFlags(const std::string& flags) = 0;
-
- /**
- * Exec buffer contents as a script
- * @param buffer script file contents
- * @param filename a nominal name for the buffer contents.
- * filename extension may be used to disambiguate script language
- * @return true on success, false on failure
- *
- */
- virtual bool ExecuteBuffer(const std::string& buffer, const std::string& filename) = 0;
-
- /**
- * Exec file as a script
- * @param filename the filename to read and execute
- * @return true on success, false on failure
- */
- virtual bool ExecuteFile(const std::string& filename) = 0;
-
-}; // class ScriptPlugin
-
-} // namespace Toolkit
-
-} // namespace Dali
-
-#endif // DALI_SCRIPT_PLUGIN_H
+++ /dev/null
-/*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-// CLASS HEADER
-#include "script.h"
-
-// INTERNAL INCLUDES
-#include <dali/integration-api/debug.h>
-#include <dali-toolkit/internal/scripting/script-impl.h>
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-Script::Script()
-{
-}
-
-Script::~Script()
-{
-}
-
-Script Script::New(void)
-{
- return Script(new Internal::Script());
-}
-
-Script::Script(Internal::Script *impl)
- : BaseHandle(impl)
-{
-}
-
-bool Script::ExecuteFile( const std::string &filename )
-{
- return GetImpl(*this).ExecuteFile( filename );
-}
-
-} // namespace Toolkit
-
-} // namespace Dali
-
+++ /dev/null
-#ifndef DALI_TOOLKIT_SCRIPT_H
-#define DALI_TOOLKIT_SCRIPT_H
-
-/*
- * Copyright (c) 2019 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-// EXTERNAL INCLUDES
-#include <dali-toolkit/public-api/dali-toolkit-common.h>
-#include <dali/public-api/object/base-handle.h>
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-namespace Internal DALI_INTERNAL
-{
-class Script;
-}
-
-/**
- * Script
- * This class provides the ability to execute script in a supported language.
- * Specific script language support is provided through plugins.
- *
- * For Example.
- *
- * @code
- *
- * Script script = Script::New();
- *
- * script.ExecuteFile("bump-map.js");
- *
- * @endcode
- *
- */
-class DALI_TOOLKIT_API Script : public BaseHandle
-{
-
-public:
-
- /**
- * Create an Script handle; this can be initialised with Script::New()
- * Calling member functions with an uninitialised handle is not allowed.
- */
- Script();
-
- /**
- * Creates an Script object.
- * @return A handle to the Script control.
- */
- static Script New();
-
- /**
- * Virtual destructor.
- */
- ~Script();
-
- /**
- * Executes the contents of filename in a scripted environment.
- * @pre A Dali Application object exists
- * @param filename A filename of a script file to execute
- * @return true on success, false on failure
- *
- */
- bool ExecuteFile( const std::string& filename );
-
-private:
-
- Script(Internal::Script *impl);
-
-}; // class Script
-
-} // namespace Toolkit
-
-} // namespace Dali
-
-#endif // DALI_TOOLKIT_SCRIPT_H
$(toolkit_src_dir)/transition-effects/cube-transition-cross-effect-impl.cpp \
$(toolkit_src_dir)/transition-effects/cube-transition-fold-effect-impl.cpp \
$(toolkit_src_dir)/transition-effects/cube-transition-wave-effect-impl.cpp \
- $(toolkit_src_dir)/scripting/script-impl.cpp \
- $(toolkit_src_dir)/scripting/script-plugin-proxy.cpp \
$(toolkit_src_dir)/text/xhtml-entities.cpp \
$(toolkit_src_dir)/drag-drop-detector/drag-and-drop-detector-impl.cpp
+++ /dev/null
-/*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-// CLASS HEADER
-#include "script-impl.h"
-
-// INTERNAL INCLUDES
-#include <dali/integration-api/debug.h>
-#include "script-plugin-proxy.h"
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-namespace Internal
-{
-
-namespace
-{
-#if _GLIBCXX_USE_CXX11_ABI
-const char* PLUGIN_FILE = "libdali-script-plugin-v8-cxx11.so";
-#else
-const char* PLUGIN_FILE = "libdali-script-plugin-v8.so";
-#endif
-}
-
-Script::Script()
-: mPlugin( NULL )
-{
- ScriptPluginProxy *plugin = new ScriptPluginProxy( PLUGIN_FILE );
-
- if( plugin->IsInitialized() )
- {
- mPlugin = plugin;
- }
- else
- {
- delete plugin;
- }
-}
-
-bool Script::ExecuteFile( const std::string& filename )
-{
- if( mPlugin )
- {
- return mPlugin->ExecuteFile(filename);
- }
- return false;
-}
-
-Script::~Script()
-{
- if( mPlugin )
- {
- delete mPlugin;
- }
-}
-
-} // namespace Internal
-
-} // namespace Toolkit
-
-} // namespace Dali
+++ /dev/null
-#ifndef DALI_TOOLKIT_INTERNAL_SCRIPT_H
-#define DALI_TOOLKIT_INTERNAL_SCRIPT_H
-
-/*
- * Copyright (c) 2019 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-// EXTERNAL INCLUDES
-#include <dali/public-api/object/base-object.h>
-
-// INTERNAL INCLUDES
-#include <dali-toolkit/devel-api/scripting/script.h>
-#include <dali-toolkit/devel-api/scripting/script-plugin.h>
-
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-namespace Internal
-{
-
-class Script;
-
-/**
- * @copydoc Toolkit::Script
- */
-class Script : public Dali::BaseObject
-{
-public:
-
- /**
- * @brief Constructor
- */
- Script();
-
- /**
- * @copydoc Toolkit::Script::ExecuteFile
- */
- bool ExecuteFile( const std::string& filename );
-
-protected:
-
- /**
- * @brief virtual destructor
- */
- virtual ~Script();
-
-private:
-
- /**
- * @brief Undefined copy constructor
- */
- Script(const Script&);
-
- /**
- * @brief Undefined assignment operator
- */
- Script& operator=(const Script& rhs);
-
-private: // data
-
- ScriptPlugin* mPlugin; ///< plugin
-
-};
-
-} // namespace Internal
-
-inline Internal::Script& GetImpl(Dali::Toolkit::Script& obj)
-{
- DALI_ASSERT_ALWAYS(obj);
-
- Dali::BaseObject& handle = obj.GetBaseObject();
-
- return static_cast<Internal::Script&>(handle);
-}
-
-inline const Internal::Script& GetImpl(const Dali::Toolkit::Script& obj)
-{
- DALI_ASSERT_ALWAYS(obj);
-
- const Dali::BaseObject& handle = obj.GetBaseObject();
-
- return static_cast<const Internal::Script&>(handle);
-}
-
-
-} // namespace Toolkit
-
-} // namespace Dali
-
-#endif // DALI_TOOLKIT_INTERNAL_SCRIPT_H
+++ /dev/null
-/*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-// CLASS HEADER
-#include "script-plugin-proxy.h"
-
-// INTERNAL INCLUDES
-#include <dali/integration-api/debug.h>
-
-// EXTERNAL INCLUDES
-#include <dlfcn.h>
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-namespace Internal
-{
-
-ScriptPluginProxy::ScriptPluginProxy( const std::string& sharedObjectName)
-: mLibHandle(NULL),
- mCreatePluginFunctionPtr(NULL),
- mDestroyPluginFunctionPtr(NULL),
- mScriptingPlugin(NULL),
- mSharedObjectName(sharedObjectName),
- mIsInitialized(false)
-{
- Initialize();
-}
-
-ScriptPluginProxy::~ScriptPluginProxy()
-{
- UnInitialize();
-}
-
-void ScriptPluginProxy::SetFlags(const std::string& flags)
-{
- if( mIsInitialized )
- {
- mScriptingPlugin->SetFlags( flags );
- }
-}
-
-bool ScriptPluginProxy::ExecuteBuffer(const std::string &buffer, const std::string &filename)
-{
- if( mIsInitialized )
- {
- return mScriptingPlugin->ExecuteBuffer( buffer, filename );
- }
- return false;
-}
-
-bool ScriptPluginProxy::ExecuteFile(const std::string &filename)
-{
- if( mIsInitialized )
- {
- return mScriptingPlugin->ExecuteFile( filename );
- }
- return false;
-}
-
-bool ScriptPluginProxy::IsInitialized() const
-{
- return mIsInitialized;
-};
-
-void ScriptPluginProxy::Initialize()
-{
- if( mIsInitialized )
- {
- return;
- }
-
- // dl library maintains link counts if you call this twice on the same library
- // (so its okay to do but we should close every handle we get too)
- mLibHandle = dlopen( mSharedObjectName.c_str(), RTLD_NOW | RTLD_GLOBAL );
- if( !mLibHandle )
- {
- DALI_LOG_ERROR( "Cannot load dali script plugin. %s\n", dlerror() );
- return;
- }
-
- // reset errors
- dlerror();
-
- // load plugin
- mCreatePluginFunctionPtr = reinterpret_cast<ScriptPlugin::Create*>( dlsym( mLibHandle, "CreateScriptPlugin" ) );
- if( !mCreatePluginFunctionPtr )
- {
- DALI_LOG_ERROR( "Cannot load symbol CreateScriptPlugin(). %s\n", dlerror() );
- return;
- }
-
- // reset errors
- dlerror();
-
- mDestroyPluginFunctionPtr = reinterpret_cast<ScriptPlugin::Destroy*>( dlsym( mLibHandle, "DestroyScriptPlugin" ) );
- if( !mDestroyPluginFunctionPtr )
- {
- DALI_LOG_ERROR( "Cannot load symbol:DestroyScriptPlugin(). %s\n", dlerror() );
- return;
- }
-
- // reset errors
- dlerror();
-
- mScriptingPlugin = mCreatePluginFunctionPtr();
-
- if( !mScriptingPlugin )
- {
- DALI_LOG_ERROR( "Call to function CreateFeedbackPlugin() failed\n" );
- return;
- }
-
- mIsInitialized = true;
-}
-
-void ScriptPluginProxy::UnInitialize()
-{
- if( mScriptingPlugin )
- {
- mDestroyPluginFunctionPtr( mScriptingPlugin );
- }
-
- if( mLibHandle )
- {
- if( dlclose( mLibHandle ) )
- {
- DALI_LOG_ERROR( "Error closing dali plugin library: %s\n", dlerror() );
- }
- }
- mIsInitialized = false;
-}
-} // namespace Adaptor
-
-} // namespace Internal
-
-} // namespace Dali
+++ /dev/null
-#ifndef DALI_INTERNAL_SCRIPT_PLUGIN_PROXY_H
-#define DALI_INTERNAL_SCRIPT_PLUGIN_PROXY_H
-
-/*
- * Copyright (c) 2019 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-#include <dali-toolkit/devel-api/scripting/script-plugin.h>
-
-namespace Dali
-{
-
-namespace Toolkit
-{
-
-namespace Internal
-{
-
-/**
- * @brief Proxy class to dynamically load, use and unload script plugin.
- *
- *
- */
-class ScriptPluginProxy : public ScriptPlugin
-{
-public:
-
- /**
- * @brief Constructor
- * @param sharedObjectName so file to load
- */
- ScriptPluginProxy( const std::string& sharedObjectName);
-
- /**
- * @brief destructor
- */
- virtual ~ScriptPluginProxy();
-
- /**
- * Set engine configuration flags
- * @param [in] flags string. Format dependent on the scripting engine.
- */
- virtual void SetFlags( const std::string& flags );
-
- /**
- * @brief Exececute the buffer contents as a script
- * @param [in] buffer script file contents
- * @param [in] filename a nominal name for the buffer contents.
- * @note filename extension may be used to disambiguate script language
- * @return true on success, false on failure
- *
- */
- virtual bool ExecuteBuffer( const std::string& buffer, const std::string& filename );
-
- /**
- * @brief execture the file as a script
- * @param [in] filename the filename to read and execute
- * @return true on success, false on failure
- */
- virtual bool ExecuteFile( const std::string& fileName );
-
- /**
- * @brief check if the plugin is initialized
- * @return true if it's initialized
- */
- bool IsInitialized() const;
-
-private:
-
- ScriptPluginProxy( const ScriptPluginProxy& ); ///< Undefined
- ScriptPluginProxy& operator=( const ScriptPluginProxy& ); ///< Undefined
-
- /**
- * @brief Dynamically loads the script plugin.
- */
- void Initialize();
-
- /**
- * @brief Unloads the script plugin.
- */
- void UnInitialize();
-
-private:
-
- void* mLibHandle;
- ScriptPlugin::Create* mCreatePluginFunctionPtr;
- ScriptPlugin::Destroy* mDestroyPluginFunctionPtr;
- ScriptPlugin* mScriptingPlugin;
- std::string mSharedObjectName;
- bool mIsInitialized;
-
-};
-
-} // namespace Adaptor
-
-} // namespace Internal
-
-} // namespace Dali
-
-#endif // DALI_INTERNAL_SCRIPT_PLUGIN_PROXY_H
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="example-fitting-mode-options.svg"
- inkscape:export-filename="/tmp/1.png"
+ inkscape:export-filename="1.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<defs
id="layer1"
transform="translate(0,-308.2677)">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/door.jpg"
+ sodipodi:absref="door.jpg"
xlink:href="door.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="256"
height="256"
id="image6106"
<g
id="g6199"
transform="matrix(0.75,0,0,0.75,158.83024,-448.90946)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/door.jpg"
+ sodipodi:absref="door.jpg"
xlink:href="door.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/door-scale-to-fill2.png"
+ inkscape:export-filename="door-scale-to-fill2.png"
y="764.36218"
x="512"
id="image6106-0"
width="51.309372"
id="rect6179"
style="fill:#ffffff;fill-opacity:1;stroke:none"
- inkscape:export-filename="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/door-scale-to-fill.png"
+ inkscape:export-filename="door-scale-to-fill.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
<rect
width="48.189934"
id="rect6179-2"
style="fill:#ffffff;fill-opacity:1;stroke:none"
- inkscape:export-filename="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/door-scale-to-fill.png"
+ inkscape:export-filename="door-scale-to-fill.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
<rect
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/door-scale-to-fill2.png"
+ inkscape:export-filename="door-scale-to-fill2.png"
y="764.36218"
x="560"
height="256.00003"
height="192.00003"
x="356"
y="124.36218"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/door.jpg"
+ sodipodi:absref="door.jpg"
xlink:href="door.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="120"
height="135.85014"
id="image6106-5"
height="192.00003"
x="804"
y="124.36212"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/door.jpg"
+ sodipodi:absref="door.jpg"
xlink:href="door.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="120"
height="135.85014"
id="image6106-5-3"
height="192.00003"
x="1030.3395"
y="124.36212"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/door.jpg"
+ sodipodi:absref="door.jpg"
xlink:href="door.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="192"
height="192"
id="image6106-4"
height="192.00003"
x="1254.3396"
y="124.36218"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/dog.jpg"
+ sodipodi:absref="dog.jpg"
xlink:href="dog.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="256"
height="256"
id="image6359"
height="192"
x="-604.36218"
y="320"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"
transform="matrix(0,-1,1,0,0,0)" />
<g
id="g6476"
transform="translate(-7.128906e-7,-384.82965)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/dog.jpg"
+ sodipodi:absref="dog.jpg"
xlink:href="dog.jpg"
y="829.19183"
x="544"
transform="matrix(0,-1,1,0,0,0)"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/example-scale-to-fill-sequence.png"
+ inkscape:export-filename="example-scale-to-fill-sequence.png"
y="544"
x="-989.19183"
height="192"
style="fill:none;stroke:#ff0000;stroke-width:3.31857371;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/dog.jpg"
+ sodipodi:absref="dog.jpg"
xlink:href="dog.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="192"
height="192"
id="image6359-2-2"
height="192"
x="-605.19183"
y="994.33954"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"
transform="matrix(0,-1,1,0,0,0)" />
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/dog.jpg"
+ sodipodi:absref="dog.jpg"
xlink:href="dog.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="128"
height="128"
id="image6359-2-2-2"
height="192"
x="-605.19183"
y="1218.3396"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"
transform="matrix(0,-1,1,0,0,0)" />
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/dog.jpg"
+ sodipodi:absref="dog.jpg"
xlink:href="dog.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="128"
height="128"
id="image6359-2-2-2-1"
height="192"
x="-604.36218"
y="768"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"
transform="matrix(0,-1,1,0,0,0)" />
id="flowRoot3024"
style="font-size:24px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(0,244.2677)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"><flowRegion
id="flowRegion3026"><rect
id="flowRoot3032"
style="font-size:24px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(0,244.2677)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"><flowRegion
id="flowRegion3034"><rect
id="flowRoot3040"
style="font-size:24px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(0,244.2677)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"><flowRegion
id="flowRegion3042"><rect
id="flowRoot3048"
style="font-size:24px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(0,244.2677)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"><flowRegion
id="flowRegion3050"><rect
id="flowRoot3056"
style="font-size:24px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(0,244.2677)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"><flowRegion
id="flowRegion3058"><rect
id="flowRoot3064"
style="font-size:24px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(0,244.2677)"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394"><flowRegion
id="flowRegion3066"><rect
x="1215.7982"
y="744.88245" /></flowRegion><flowPara
id="flowPara3070">FIT_HEIGHT</flowPara></flowRoot> <image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/liberty.jpg"
+ sodipodi:absref="liberty.jpg"
xlink:href="liberty.jpg"
inkscape:export-ydpi="89.269394"
inkscape:export-xdpi="89.269394"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
width="256"
height="256"
id="image3239"
y="700.36218" />
<g
id="g4034"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<rect
width="128"
id="rect3244"
style="fill:none;stroke:#ff0000;stroke-width:4.19999981;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
- inkscape:export-filename="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394" />
</g>
<g
transform="translate(224,-1.9531262e-7)"
id="g4034-5"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/liberty.jpg"
+ sodipodi:absref="liberty.jpg"
xlink:href="liberty.jpg"
y="764.36218"
x="352"
<g
transform="translate(448,-1.9531262e-7)"
id="g4034-4"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/liberty.jpg"
+ sodipodi:absref="liberty.jpg"
xlink:href="liberty.jpg"
y="764.36218"
x="352"
<g
transform="translate(672,-1.9531262e-7)"
id="g4034-3"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/liberty.jpg"
+ sodipodi:absref="liberty.jpg"
xlink:href="liberty.jpg"
y="764.36218"
x="352"
<g
transform="translate(896,-1.9531262e-7)"
id="g4034-2"
- inkscape:export-filename="/tmp/fitting-mode-options.png"
+ inkscape:export-filename="fitting-mode-options.png"
inkscape:export-xdpi="89.269394"
inkscape:export-ydpi="89.269394">
<image
- sodipodi:absref="/home/SERILOCAL/andrew.cox/git/opendali-features/dali-toolkit/docs/content/figures/liberty.jpg"
+ sodipodi:absref="liberty.jpg"
xlink:href="liberty.jpg"
y="764.36218"
x="352"
### Programming Guide
+ [Programming Languages:](@ref programming-languages)
+ [C++](@ref c-plus-plus)
- + [JavaScript](@ref java-script-support)
+ [JSON](@ref json-support)
+ [Application](@ref dali-application)
+ [Actors](@ref actors-and-stage)
+ [Overview](@ref shader-intro)
### Scripting
- + [JSON and JavaScript Overview](@ref scriptoverview)
+ + [JSON Overview](@ref scriptoverview)
+ [JSON Syntax](@ref script-json-specification)
+ [Scripting Hello World](@ref script-hello)
+ [Type Registration](@ref type-registration)
+ [Automated Tests](@ref auto_testing)
+ [Programming Guide](@ref documentationguide)
- + [JavaScript Wrapping Guide for DALi developers](@ref javascriptwrapping)
### Application Optimization Guide
+ [Rescaling Images](@ref resourceimagescaling)
<!-- Float image to the right of the text -->
<div style="float: right">
-  
+ 
</div>
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).
- Doing a left or right swipe-return (where a direction is swiped forwards and backwards quickly) will move to the previous or next page - DALi cannot know what a page is within your application so these gestures can only work if implemented manually.
- 
+
### Activation {#accessibilityactivation}
<!-- Float image to the right of the text -->
<div style="float: right">
-  
+ 
</div>
Group mode allows the limiting of focusable actors.
Please see accessibility-manager.h within DALi Toolkit for the full API.
-@class _Guide_Accessibility
*/
|--|--|
| Condition: Long press/double tap when empty text but clipboard has content | Condition: Long press/double tap when text-control contains text |
|[PASTE][CLIPBOARD] buttons shown| [CUT][COPY], [SELECT ALL] unless all text selected and [PASTE][CLIPBOARD] if content to paste. |
-|   |   |
+|  |  |
| 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 long press/double tap|
-|   |  |
+|  | |
| 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. |
-|   |   |
+|  |  |
*/
Custom controls are created using the [handle/body idiom](@ref handle-body-idiom) used in DALi.
-
Namespaces are important
### General Guidelines:
+ Try to avoid adding C++ APIs as they become difficult to maintain.
+ Use **properties** as much as possible as Controls should be data driven.
- + These controls will be used through JavaScript and JSON files so need to be compatible.
+ + These controls will be used through JSON files so need to be compatible.
+ Bear in mind that the Control can be updated when the properties change (e.g. style change)
+ Ensure control deals with these property changes gracefully
+ Not just the first time they are set
Controls should be as generic as possible so the recommendation is to re-use visuals to create the content required as described in the [Visuals](@ref visuals) section.
Currently, this is devel-api though, so is subject to change.
-
To add a visual to a control, first create a Property for the visual of type MAP, and ensure the name has a suffix of "_VISUAL". Then the visual is normally defined in the stylesheet, and the definition sent via SetProperty(), where you would then create the visual:
| Normal Style | Customized Style |
|:------------:|:----------------:|
-|  |  |
+| | |
More information regarding styling can be found in the [Styling](@ref styling) section.
___________________________________________________________________________________________________
___________________________________________________________________________________________________
-@class _Guide_Creating_UI_Controls
*/
+ Advanced watch faces for wearable devices
DALi is based on OpenGL ES 2.0 & 3.0, however it hides the complexity of
-the OpenGL API from developers and provides a clean cross-platform C++ & JavaScript framework.
+the OpenGL API from developers and provides a clean cross-platform C++ API.
## Features {#dali-features}
+ 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 separate 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 a long operation is being performed holding up the main thread.
+ Provides keyboard / touch / mouse handling
sh-4.1$ DALI_DEBUG_RENDERING=1 /usr/apps/com.samsung.dali-demo/bin/blocks.example
~~~
-
--- /dev/null
+<!--
+/**-->
+
+# Writing documentation for the DALi programming guide {#documentationguide}
+
+For documentation, please follow these guidelines:
+
+ - Create a mark down file (.md) using GitHub Flavoured Markdown https://help.github.com/articles/github-flavored-markdown/
+ - Put it into the following folder: dali-toolkit/docs/content/programming-guide/
+ - Include code samples for C++ in the mark down.
+ - See script-overview.md overview in dali-toolkit/docs/content/programming-guide for an example
+ - For DOXYGEN to link to the mark down it currently needs a reference {hash myfile}
+
+
+#### Images
+ Doxygen copies all images in to the same folder as the HTML generated pages so you can just reference it as follows:
+
+ ~~~
+ // required for Doxygen
+
+The space between the brackets is the alternative text. This means you will never see a broken image symbol.
+~~~
+
+## Example
+
+Please have a look at the numerous markdown files to see the header and footer requirements.
+
+You can add tags to your headings as follows:
+~~~{.md}
+# MyChapter {#my-chapter}
+~~~
+Which will allow you to link to this section as follows:
+~~~{.md}
+[Go To MyChapter](@ref my-chapter)
+~~~
+
+Code blocks can be enclosed within 2 blocks of 3 tildes(~).
+
+You can even specify your language type, for example:
+~~~{.md}
+~~~{.cpp}
+...
+
+
+*/
Below is an illustration of the various directions and terms as applied to a flex container with the "flex direction" defined as "row".
-
DALi supports the following subset of Flexbox properties.
| LTR (left-to-right) | RTL (right-to-left) |
|--------|--------|
-|   |   |
+|  |  |
The possible values for this property are:
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::CONTENT_DIRECTION, Dali::Toolkit::FlexContainer::RTL );
~~~
-~~~{.js}
-// JavaScript
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.contentDirection = "RTL";
-~~~
___________________________________________________________________________________________________
## flexDirection {#flex-direction}
flexDirection specifies the direction of the main axis which determines the direction that flex items are laid out.
-
The possible values for this property are:
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW_REVERSE );
~~~
-~~~{.js}
-// JavaScript
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.flexDirection = "rowReverse";
-~~~
___________________________________________________________________________________________________
## flexWrap {#flex-wrap}
flexWrap specifies whether the flex items should wrap or not if there is no enough room for them on one flex line.
-
The possible values for this property are:
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_WRAP, Dali::Toolkit::FlexContainer::NO_WRAP );
~~~
-~~~{.js}
-// JavaScript
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.flexWrap = "noWrap";
-~~~
___________________________________________________________________________________________________
## justifyContent {#justify-content}
justifyContent specifies the alignment of flex items when they do not use all available space on the main axis.
-
The possible values for this property are:
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::JUSTIFY_CONTENT, Dali::Toolkit::FlexContainer::JUSTIFY_SPACE_BETWEEN );
~~~
-~~~{.js}
-// JavaScript
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.justifyContent = "spaceBetween";
-~~~
___________________________________________________________________________________________________
## alignItems {#align-items}
alignItems specifies the alignment of flex items when they do not use all available space on the cross axis.
-
The possible values for this property are:
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_FLEX_START );
~~~
-~~~{.js}
-// JavaScript
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.alignItems = "flexStart";
-~~~
___________________________________________________________________________________________________
## alignContent {#align-content}
alignContent specifies the alignment of flex lines when they do not use all available space on the cross axis, so only works when there are multiple lines.
-
The possible values for this property are:
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_CONTENT, Dali::Toolkit::FlexContainer::ALIGN_FLEX_END );
~~~
-~~~{.js}
-// JavaScript
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.alignContent = "flexEnd";
-~~~
___________________________________________________________________________________________________
## Custom properties supported by flex item:
If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.
Flex items will not shrink below their minimum size (if set using Dali::Actor::SetMinimumSize).
-
~~~
-~~~{.js}
-// JavaScript
-
-// Create the flex container
-var flexContainer = new dali.Control("FlexContainer");
-
-// Set the flex direction to lay out the items horizontally
-flexContainer.flexDirection = "row";
-
-// Create flex items and set the proportion
-var item1 = new dali.Control();
-item1.flex = 1.0;
-flexContainer.add(item1);
-
-var item2 = new dali.Control();
-item2.flex = 3.0;
-flexContainer.add(item2);
-
-var item3 = new dali.Control();
-item3.flex = 1.0;
-flexContainer.add(item3);
-
-var item4 = new dali.Control();
-item4.flex = 2.0;
-flexContainer.add(item4);
-
-var item5 = new dali.Control();
-item5.flex = 1.0;
-flexContainer.add(item5);
-
-~~~
___________________________________________________________________________________________________
## alignSelf {#align-self}
alignSelf specifies how the item will align along the cross axis, if set, this overrides the default alignment for all items defined by the container’s [alignItems](@ref align-items) property.
-
The possible values for this property are:
~~~
-~~~{.js}
-// JavaScript
-
-// Create the flex container
-var flexContainer = new dali.Control("FlexContainer");
-
-// Set the flex direction to lay out the items horizontally
-flexContainer.flexDirection = "row";
-
-// Set the items to be aligned at the beginning of the container on the cross axis by default
-flexContainer.alignItems = "flexStart";
-
-// Create flex items and add them to the flex container
-var item1 = new dali.Control();
-item1.alignSelf = "center"; // Align item1 at the center of the container
-flexContainer.add(item1);
-
-var item2 = new dali.Control();
-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 the container
-
-~~~
___________________________________________________________________________________________________
## flexMargin {#flex-margin}
+ border: The border that goes around the padding and the content of the item.
+ flexMargin: The space outside the border.
-
In DALi, the size of the flex item = content size + padding + border.
flexContainer.Add( item );
~~~
-~~~{.js}
-// JavaScript
-
-// Create the flex container
-var flexContainer = new dali.Control("FlexContainer");
-
-// Create flex items
-var item = new dali.Control();
-
-// Add the margin around the item
-item.flexMargin = [10.0, 10.0, 10.0, 10.0];
-
-// Add the item to the container
-flexContainer.add(item);
-~~~
-
___________________________________________________________________________________________________
## Example of creating Flexbox layout using FlexContainer
Now let's see how to create a Gallery like layout (as shown below) using FlexContainer.
-
Firstly, we create a flex container as the whole view and set its resize policy to fill its parent (i.e. the stage).
Dali::Stage::GetCurrent().Add( flexContainer );
~~~
-~~~{.js}
-// JavaScript
-
-// Create the main flex container
-var flexContainer = new dali.Control("FlexContainer");
-flexContainer.parentOrigin = dali.TOP_LEFT;
-flexContainer.anchorPoint = dali.TOP_LEFT;
-flexContainer.widthResizePolicy = "FILL_TO_PARENT";
-flexContainer.heightResizePolicy = "FILL_TO_PARENT";
-flexContainer.backgroundColor = dali.COLOR_WHITE; // set the background color to be white
-
-// Add it to the stage
-dali.stage.add( flexContainer );
-~~~
We want to set the flex direction of this main container to column, as we want the toolbar and the actual content to be displayed vertically.
flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::COLUMN );
~~~
-~~~{.js}
-// JavaScript
-
-// Display toolbar and content vertically
-flexContainer.flexDirection = "column";
-~~~
-
Now we create a flex container as the toolbar and add it to the main container. Because the flex direction in the main container is column, the toolbar will be arranged on the top of the main container.
~~~{.cpp}
flexContainer.Add( toolBar );
~~~
-~~~{.js}
-// JavaScript
-
-// Create the toolbar area
-var toolBar = new dali.Control("FlexContainer");
-toolBar.parentOrigin = dali.TOP_LEFT;
-toolBar.anchorPoint = dali.TOP_LEFT;
-toolBar.backgroundColor = dali.COLOR_CYAN; // Set the background color for the toolbar
-
-// Add it to the main container
-flexContainer.add(toolBar);
-~~~
-
We want the buttons and title to be displayed horizontally and vertically aligned to the center of the toolbar, so we set its flex direction to row and set its alignItems property to center.
We also want the toolbar and the actual content to share the height of the main container, so that the toolbar will occupy 10 percent of the whole vertical space and the content will occupy the rest of the vertical space.
This can be achieved by setting the flex property.
toolBar.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 0.1f ); // 10 percent of available space in the cross axis
~~~
-~~~{.js}
-// JavaScript
-
-toolBar.flexDirection = "row"; // display toolbar items horizontally
-toolBar.alignItems = "center"; // align toolbar items vertically center
-toolBar.flex = 0.1; // 10 percent of available space in the cross axis
-~~~
-
Then we create another flex container as the content area to display the image, and it will be displayed in the bottom of the main container.
We want the item inside it to be horizontally and vertically centered, so that the image will always be in the center of the content area.
flexContainer.Add( content );
~~~
-~~~{.js}
-// JavaScript
-
-// Create the content area
-var content = new dali.Control("FlexContainer");
-content.parentOrigin = dali.TOP_LEFT;
-content.anchorPoint = dali.TOP_LEFT;
-content.flexDirection = "row";
-content.alignItems = "center"; // align items vertically center
-content.justifyContent = "center"; // align items horizontally center
-content.flex = 0.9; // 90 percent of available space in the cross axis
-
-// Add it to the main container
-flexContainer.add(content);
-~~~
-
Now we start to add items to the toolbar. The toolbar will have one button on the left, one button on the right, and a title always in the center (regardless of the screen size).
To achieve that, we can simply make the title flexible so that it will automatically take all the available horizontal space left.
We will also add some space around the items so that the layout looks nicer.
nextButton.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap );
~~~
-~~~{.js}
-// JavaScript
-
-// Add a button to the left of the toolbar
-var prevButton = new dali.Control("PushButton");
-prevButton.name = "Prev";
-prevButton.parentOrigin = dali.TOP_LEFT;
-prevButton.anchorPoint = dali.TOP_LEFT;
-prevButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
-prevButton.labelText = "Prev";
-prevButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
-
-toolBar.add( prevButton );
-
-// Add a title to the center of the toolbar
-var title = new dali.Control("TextLabel");
-title.parentOrigin = dali.TOP_LEFT;
-title.anchorPoint = dali.TOP_LEFT;
-title.widthResizePolicy = "USE_NATURAL_SIZE";
-title.heightResizePolicy = "USE_NATURAL_SIZE";
-title.horizontalAlignment = "CENTER";
-title.verticalAlignment = "CENTER";
-title.text = "Gallery";
-title.flex = 1.0; // take all the available space left apart from the two buttons
-title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title
-
-toolBar.add( title );
-
-// Add a button to the right of the toolbar
-var nextButton = new dali.Control("PushButton");
-nextButton.name = "Next";
-nextButton.parentOrigin = dali.TOP_LEFT;
-nextButton.anchorPoint = dali.TOP_LEFT;
-nextButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
-nextButton.labelText = "Next";
-nextButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
-
-toolBar.add( nextButton );
-~~~
-
This is really neat when running on devices with different size or changing from different orientation, because the toolbar will expand or shrink based on the available space and the title will always be in the center, therefore the layout of the toolbar will keep the same.
Finally, we will add the image to the content area.
content.Add( imageView );
~~~
-~~~{.js}
-// JavaScript
-
-// Add an image to the center of the content area
-imageView = new dali.Control("ImageView");
-imageView.image = "image.jpg";
-imageView.parentOrigin = dali.TOP_LEFT;
-imageView.anchorPoint = dali.TOP_LEFT;
-content.add( imageView );
-~~~
-
As you can see, it is easy to make flexible containers in DALi. We can use these concepts to create responsive layouts.
-@class _Guide_Flex_Container
*/
label.SetProperty( TextLabel::Property::POINT_SIZE, 12.0f );
~~~
-~~~{.js}
-// JavaScript
-
-label.fontFamily = "FreeSerif";
-label.fontStyle = {
- "weight" : "bold",
- "slant" : "italic"
- };
-label.pointSize = 12;
-~~~
-
However the text control will fall-back to using the default font, if the requested font does not support the required scripts.
### Font Styles
label.SetProperty( Control::Property::STYLE_NAME, "custom" );
~~~
-~~~{.js}
- // JavaScript
-
- label.styleName = "customLabel"';
-~~~
-
~~~{.json}
{
"styles":
The default **unit 1 is 1 pixel with default camera and** the default coordinate system in DALi has the **origin at the top-left corner, with positive X to right, and position Y going
downwards**. This is intended to be convenient when laying-out 2D views.
-
1) ParentOrigin. This Vector3 property defines a point within the parent actor's area.
-
The default is "top-left", which can be visualized in 2D as (0, 0), but is actually Vector3(0, 0, 0.5) in the 3D DALi world. The actor's position is relative to this point.
2) AnchorPoint. This Vector3 property defines a point within the child actor's area.
-
The default is "center", which can be visualized in 2D as (0.5, 0.5), but is actually Vector3(0.5, 0.5, 0.5) in the 3D DALi world. The actor's position is also relative to this point.
3) Position. This is the position vector between the parent-origin and anchor-point.
-
The default is (X = 0, Y = 0), so an actor placed directly without modifying the parent origin, anchor point or position would appear centred around the top left corner of its parent.
Actors are effectively nodes that receive input (touch events) and act as a
container for draw-able elements (which are also nodes) and other actors.
-@class _Guide_DALi_Fundamentals
*/
+ **DALi Platform Abstraction:** Resource loading & decoding in multiple threads (part of dali-adaptor)
+ **DALi Toolkit:** Reusable UI Controls, Effects & Scripting Support
-
## Main, Update & Render Threads {#dali-threads}
+ **Render Thread:** OpenGL drawing, texture and geometry uploading etc.
+ **Resource Threads:** Loads images and decodes into bitmaps etc.
-
*/
Layers provide a mechanism for overlaying groups of actors on top of each other.
Layers can also clip their contents to exclude any content outside a user defined area.
- 
When a layer is added to the stage it is assigned a unique depth value. By default the stage has a root layer with a depth value of 0.
**Note: Layers work independently of the actor hierarchy.**
They can be positioned anywhere in the actor tree, but their draw order is always defined by their layer.getDepth() value.
-~~~{.js}
-// JavaScript Example of adding an actor to the root layer
-
-// using stage.add() will automatically add actor to the root layer
-dali.stage.add( myActor );
-
-// Or you can explicitly add actor to the root layer.
-var rootLayer = dali.stage.getRootLayer();
-rootLayer.add( myActor ); // adds an actor to the root layer
-
-// rootLayer.getDepth() == 0
-
-~~~
-
~~~{.cpp}
// C++ example of adding an actor to the root layer
Example To create two new layers on top of the root layer.
-~~~{.js}
-// JavaScript
-
-var layer1 = new dali.Layer();
-var layer2 = new dali.Layer();
-
-// the initially depth order of each layer, depends on the order
-// it is added to the stage.
-
-dali.stage.add( layer1 ); // will be drawn on top of root layer
-dali.stage.add( layer2 ); // will be drawn on top of layer 1
-
-dali.stage.add( myActor1);
-layer1.add( myActor2);
-layer2.add( myActor3);
-
-// dali.stage.getRootLayer().getDepth = 0 myActor1 drawn first ( on bottom )
-// layer1.getDepth() == 1 myActor2 drawn second ( in middle )
-// layer2.getDepth() == 2 myActor3 drawn last ( on top )
-~~~
-
### Layer clipping
Clips the contents of the layer to a rectangle.
-~~~{.js}
-// JavaScript
-
-layer1.anchorPoint = dali.CENTER;
-layer1.parentOrigin = dali.CENTER;
-layer1.clippingEnable = true;
-layer1.clippingBox = [20,20,100,100]; // X, Y, Width, Height
-~~~
-
~~~{.cpp}
// C++
### Layer_2D
-~~~{.js}
-// JavaScript
-layer.behaviour = "LAYER_2D";
-~~~
-
~~~{.cpp}
// C++
layer.SetBehavior( Layer::LAYER_2D );
If we did dali.stage.getRootLayer().raiseToTop(), then the root layer would be drawn last.
-
### Layer_3D
-~~~{.js}
-// JavaScript
-layer.behaviour = "LAYER_3D";
-~~~
-
~~~{.cpp}
// C++
layer.SetBehavior( Layer::LAYER_3D );
Then transparent renderers are drawn with depth test enabled but depth write switched off.
- 
Transparent renderers are drawn in order of distance
from the camera ( painter's algorithm ).
- 
Depth testing is not used.
-Example:
-
-~~~{.js}
-// JavaScript
-var layer = new dali.Layer();
-
-layer.behaviour = "LAYER_3D"
-
-dali.stage.add( layer );
-
-layer.add( myActor1 );
-layer.add( myActor2 );
-
-myActor3.drawMode = "OVERLAY_2D";
-
-layer.add( myActor3 ); // actor 3 is drawn on top of actor 1 and 2 as it's in the OVERLAY.
-
-myActor3.add( myActor4 ); // actor 4 is drawn on top of actor 3, which is drawn on top of actor 1 and 2.
-
-myActor3.add( myActor5); // the depth index of actor 4 and 5 renderers will determine which is drawn first
-~~~
-
-
-
-
-
### Layer Actor Specific Properties
| Name | Type | Writable | Animatable|
| clippingBox | ARRAY [0,0,400,600]) | 0 | X|
| behaviour | STRING ( "LAYER_2D" or "LAYER_3D") | 0 | X|
- @class Layer
@extends Actor
*/
Stage::GetCurrent().Add( field );
~~~
-~~~{.js}
-// JavaScript
-
-var field = new dali.TextField();
-field.enableMarkup = true;
-
-dali.stage.add( field );
-~~~
-
Note the mark-up processor doesn't check the correctness of the mark-up string. This may
cause the text to be badly rendered.
field.SetProperty( TextLabel::Property::TEXT, "<color value='red'>Red Text</color>" ); // Color coded with a text constant.
~~~
-~~~{.js}
-// JavaScript
-
-field.text = "<color value='red'>Red Text</color>"; // Color coded with a text constant.
-~~~
-
~~~{.cpp}
// C++
field.SetProperty( TextLabel::Property::TEXT, "<color value='0xFFFF0000'>Red Text</color>" ); // Color packed inside an ARGB hexadecimal value.
~~~
-~~~{.js}
-// JavaScript
-
-field.text = "<color value='0xFFFF0000'>Red Text</color>"; // Color packed inside an ARGB hexadecimal value.
-~~~
-
~~~{.cpp}
// C++
field.SetProperty( TextLabel::Property::TEXT, "<color value='#F00'>Red Text</color>" ); // Color packed with the web color format (3 characters).
~~~
-~~~{.js}
-// JavaScript
-
-field.text = "<color value='#F00'>Red Text</color>"; // Color packed with the web color format (3 characters).
-~~~
-
~~~{.cpp}
// C++
field.SetProperty( TextLabel::Property::TEXT, "<color value='#FF0000'>Red Text</color>" ); // Color packed with the web color format (6 characters).
~~~
-~~~{.js}
-// JavaScript
-
-field.text = "<color value='#FF0000'>Red Text</color>"; // Color packed with the web color format (6 characters).
-~~~
-
## \<font\>
Sets the font values of the characters inside the tag.
field.SetProperty( TextLabel::Property::TEXT, "<font family='SamsungSans' weight='bold'>Hello world</font>" );
~~~
-~~~{.js}
-// JavaScript
-
-field.text = "<font family='SamsungSans' weight='bold'>Hello world</font>";
-~~~
-
## XHTML ENTITIES
Single characters can be embedded into text using character entity references. These references have a numeric value as well as a named value.
For C++ API see Dali::Actor::TouchSignal() and Dali::Actor::HoveredSignal() for more details.
-For JavaScript use actor.connect( "touch", myCallback ) and actor.connect("hovered", myCallback );
-
### Hit Testing Rules Summary:
- An actor is only hittable if the actor's touch signal has a connection.
- If the consumed actor on touch-down is not the same as the consumed actor on touch-up, then
touch signals are also emitted from the touch-down actor with an "Interrupted" state.
-@class MultiTouch
*/
Render consumes data - **Reads** object positions from a buffer and draws with OpenGL
-
<...>-3329 [001] 785155.264508: tracing_mark_write: SPI_EV_DALI_RENDER_START
<...>-3329 [001] 785155.265006: tracing_mark_write: SPI_EV_DALI_RENDER_END
~~~
-@class _Guide_Performance_Profiling
*/
Actor::SetDrawMode( DrawMode::OVERLAY_2D ); // C++
~~~
-~~~{.js}
-// JavaScript
-// 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 TextureAtlases ( reduces state changes in the GPU)
+ - Use TextureAtlases (reduces state changes in the GPU)
- Use compressed textures
- Use lower quality textures, e.g. smaller, lower number of bits per pixel
- - 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.
- Optimize any shaders used. Pixel shaders should be kept as lean as possible.
-@class _Guide_Performance_Tips
*/
# Popup {#popup}
- 
+
## Description {#popupdescription}
- Content
- Footer
- 
+
Each field can contain any Actor.
Note: All actor properties are optional, allowing any combination of content areas.
Example: Image only popup (using the content field):
- 
+
### Example content: {#popupfieldexample}
### Example: {#popuptoastexample}
- 
+
Here is the code to produce the above example:
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.
+This allows connection of signals within both C++ APIs and JSON.
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.
~~~
-@class _Guide_Popup
*/
actor.TouchSignal().Connect( &OnPressed );
~~~
-*/
-
-## JavaScript {#java-script-support}
-
-~~~{.js}
-var actor = new dali.Actor();
-actor.parentOrigin = dali.CENTER;
-actor.anchorPoint = dali.CENTER;
-dali.stage.add( actor );
-...
-function onPressed( actor, touch )
-{
- var animOptions = { alpha: "bounce", delay: 0, duration: 15 };
- var anim = new dali.Animation();
- anim.animateTo( actor, "position", [ 200, -100, 0 ], animOptions );
- anim.play();
- return true; // consume the touch event
-}
-...
-actor.connect( "touch", onPressed );
-
-~~~
-
## JSON {#json-support}
~~~{.json}
}
]
}
-~~~
\ No newline at end of file
+~~~
<br>
<hr>
-@section property-use-example-js Property use in JavaScript
-
-Note that constraints cannot be used within JavaScript, so below is a simple example that sets one of the default properties; scale:
-
-@code
-var imageView = new dali.Control( "ImageView" );
-
-// by default an actor is anchored to the top-left of it's parent actor
-// change it to the middle
-imageView.parentOrigin = dali.CENTER;
-
-// Set an image view property
-imageView.image = {
- "visualType" : "IMAGE",
- "url": "images/icon-0.png",
- "desiredWidth" : 100,
- "desiredHeight" : 100
-};
-
-// add to the stage
-dali.stage.add( imageView );
-@endcode
-
-<br>
-<hr>
@section property-use-example-json Property use in JSON
This is a basic example of a button defined in JSON by setting the default properties.
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.
-
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.
In this case, `SCALE_TO_FILL` will perform this sequence of operations:
- 
+
We can pass the stage dimensions to the `ResourceImage` creator function as the desired rectangle and ask it to map the image to the screen as shown here:
Dali::FittingMode::SCALE_TO_FILL,
Dali::SamplingMode::BOX_THEN_LINEAR );
~~~
-~~~{.js}
-// JavaScript
-// First get stage dimensions into stageX and stageY ...
-var image = new dali.ResourceImage( {
- url: "gallery-large-12.jpg",
- width: stageX,
- height: stageY,
- fittingMode: "SCALE_TO_FILL",
- samplingMode: "BOX_THEN_LINEAR"
-});
-~~~
## Workflow {#resourceimagescaling-workflow}
- 
+
The workflow for achieving the final scaled image is (in order):
### Determine Target Dimensions {#resourceimagescaling-targetdimensions}
- 
+
An application has several options for specifying the target rectangle for the image to be fitted to.
The application may request dimensions through `ResourceImage::New()`:
- `Width AND Height both specified` The requested dimensions pass straight through to become the target for fitting.
- 
+
The result of this process is an `(x, y)` target size to fit the image in the next step.
### Target Image Dimensions {#resourceimagescaling-targetimagedimensions}
- 
+
#### Fitting Mode {#resourceimagescaling-fittingmode}
| `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. |
- 
+
<sub> **Fitting modes**: *The top row shows the effect of each mode when a tall target rectangle is applied to a square image. The middle row applies a wide target to a square raw image. The bottom row uses a target with the same aspect ratio as the raw image. This example shows that `SCALE_TO_FILL` is the only option for which the dimensions of the fitted image result fill all the area of the target. Others would be letterboxed with borders. `SHRINK_TO_FIT` is always equal to one of `FIT_WIDTH` or `FIT_HEIGHT`: in each case it is the minimum of them. As a special case, where the aspect ratio of raw image and target match, all fitting modes generate an exact match final image and are equivalent to each other.* </sub>
### Scaling {#resourceimagescaling-scaling}
- 
+
To perform the scaling stage, the source image is scaled to a (factor of) the target image size using the specified Sampling Mode/
| | | |
| ---- | ---- | --- |
-|   |   |   |
+|  |  |  |
| **NO_FILTER** | **NEAREST** | **LINEAR** |
-|   |   |   |
+|  |  |  |
| **BOX** | **BOX_THEN_NEAREST** | **BOX_THEN_LINEAR** |
These are screenshots, showing how the images are rendered in a DALi demo.
### Crop or Add Borders {#resourceimagescaling-croporaddborders}
- 
+
Lastly, the image data will be cropped, or have borders added automatically as necessary.
This is done to ensure the image correctly fits the aspect of the target window, whilst maintaining the aspect of the source image.
ResourceImage image1 = ResourceImage::New( "flower.png" );
ResourceImage image2 = ResourceImage::New( "flower.png", ImageDimensions( 0, 0 ) );
~~~
-~~~{.js}
-// JavaScript
-var image1 = new dali.ResourceImage( { url:"flower.png" } );
-var image2 = new dali.ResourceImage( { url:"flower.png", width:0, height:0 } );
-~~~
**Case 2**: In these loads, the target dimensions will be `(160, 120)` as the zero dimension is derived from the aspect ratio of the raw image.
ResourceImage image1 = ResourceImage::New( "flower.png", ImageDimensions( 160, 0 ) );
ResourceImage image2 = ResourceImage::New( "flower.png", ImageDimensions( 0, 120 ) );
~~~
-~~~{.js}
-// JavaScript
-var image1 = new dali.ResourceImage( { url:"flower.png", width:160, height:0 } );
-var image2 = new dali.ResourceImage( { url:"flower.png", width:0, height:120 } );
-~~~
**Case 3**: In this load, the target dimensions will be `(111, 233)`.
// C++
ResourceImage image = ResourceImage::New( "flower.png", ImageDimensions( 111, 233 ) );
~~~
-~~~{.js}
-// JavaScript
-var image = new dali.ResourceImage( { url:"flower.png", width:111, height:233 } );
-~~~
### Fitting an image's dimensions to the target box {#resourceimagescaling-codeexamplesfittingmodes}
ResourceImage image = ResourceImage::New( "flower.png", ImageDimensions( 32, 24 ) );
// Image will be loaded at (32, 24), regardless of fitting mode.
~~~
-~~~{.js}
-// JavaScript
-// Image on 'disk' is 320x240.
-var image = new dali.ResourceImage( { url:"flower.png", width:32, height:24});
-// Image will be loaded at (32, 24), regardless of fitting mode.
-~~~
### Passing a Zero Dimension {#resourceimagescalingzerodimensions}
// FIT_HEIGHT:
ResourceImage image = ResourceImage::New("flower.png", ImageDimensions(0, y));
~~~
-~~~{.js}
-// JavaScript
-// FIT_WIDTH:
-var image = new dali.ResourceImage( {
- url: "flower.png",
- width: x,
- height: 0
-});
-// FIT_HEIGHT:
-var image = new dali.ResourceImage( {
- url: "flower.png",
- width: 0,
- height: y
-});
-~~~
Note:
- If both values are specified as 0, both dimensions are taken from the source image.
ResourceImage image4 = ResourceImage::New( "flower.png",
ImageDimensions( 240, 240 ), FittingMode::SCALE_TO_FILL, SamplingMode::BOX_THEN_LINEAR );
~~~
-~~~{.js}
-// JavaScript
-var image1 = new dali.ResourceImage( {
- url:"flower.png", width:240, height:240,
- fittingMode:"SCALE_TO_FILL", samplingMode:"NEAREST"
-} );
-
-var image2 = new dali.ResourceImage( {
- url:"flower.png", width:240, height:240,
- fittingMode:"SCALE_TO_FILL", samplingMode:"NO_FILTER"
-} );
-
-var image3 = new dali.ResourceImage( {
- url:"flower.png", width:240, height:240,
- fittingMode:"SCALE_TO_FILL", samplingMode:"BOX"
-} );
-
-var image4 = new dali.ResourceImage( {
- url:"flower.png", width:240, height:240,
- fittingMode:"SCALE_TO_FILL", samplingMode:"BOX_THEN_LINEAR"
-} );
-~~~
There is also a specific demo to show all of the fitting and scaling modes.
which lives in the demo project at `examples/image-scaling-and-filtering`.
- 
+
Touch the arrows in the top corners to changes image.
Drag the resize handle in the corner of the image to change the requested size and trigger an immediate image reload.
A second specific demo shows the effect of a filter mode on a single image loaded into various requested rectangles side by side.
It can be found under `examples/image-scaling-irregular-grid`.
- 
+
Touch the button at top-left to change image.
The button at top-right changes sampling mode.
-@class _Guide_Resource_Image_Scaling
*/
|CPUGPU | resource has been uploaded to a GL texture, but still present in CPU memory as well.|
|DISCARDED | resource has been discarded, memory freed up |
-@class _Guide_ResourceTracking
*/
--- /dev/null
+<!--
+/**-->
+
+ # Hello World - JSON layout{#script-hello}
+
+ The following JSON code is the minimum required to put the sentence "Hello World" on the screen.
+
+~~~{.json}
+{
+ // a tree of actors
+ "stage": [{
+ "name": "text-label",
+ "type": "TextLabel",
+ "text": "Hello World",
+ "parentOrigin": "CENTER"
+ }]
+}
+~~~
+
+ The following code loads the JSON file
+
+~~~{.cpp}
+ // C++
+ Builder builder = Builder::New();
+
+ std::string json_data(ReadFile("layout.json"));
+
+ builder.LoadFromString(json_data);
+
+ builder.AddActors( Stage::GetCurrent().GetRootLayer() );
+
+ ~~~
+
+
+*/
The template section supports the creation of actor instances. The
template name can be used in code to create an actor tree.
-~~~{.js}
-// JavaScript
-
-var builder = new dali.Builder();
-builder.loadFromFile( "my-app.json");
-var userActorTree = builder.create( { template:"basic-text"} );
-~~~
-
~~~{.cpp}
// C++
Builder.ApplyStyle("light-theme", myActor);
~~~
-~~~{.js}
-// JavaScript
-
-builder.applyStyle("light-theme", myActor);
-~~~
-
-
The styles can also be applied as an animation.
~~~{.cpp}
builder.AddActors( stage.GetRootLayer()); // Add actors to the stage root layer
~~~
-~~~{.js}
-// JavaScript
-
-builder.addActors( dali.stage.getRootLayer() );
-~~~
-
~~~
{ \\
"stage": \\ Stage Section Number
Please refer to the above document for further information about specific
controls.
-@class _Guide_JSON_Specification
*/
# Scripting Overview {#scriptoverview}
-DALi has:
-- JSON to support:
- - layouting
- - theme / styling
- - templated actor/control creation
- - basic actions
- - DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
-
-- JavaScript to support:
- - Rapid Application Development
- - Hybrid C++/JavaScript applications
- - Leverage third party JavaScript modules (backbone.js etc)
+DALi has JSON to support:
+- layouting
+- theme / styling
+- templated actor/control creation
+- basic actions
+- DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
JSON support is built in to DALi.
-JavaScript support is via a plugin held in DALi Toolkit, which builds automatically if Google's V8 engine is installed.
-The V8 version required by DALi can be built and installed using dali-core/scripts/dali_env script.
-
-Files can be loaded inside any DALi application, or from command line using the launcher ( part of dali-demo).
+Files can be loaded inside any DALi application, or from command line using the launcher (part of dali-demo).
~~~{.cpp}
-scripting.example hello-world.json hello-world.js
+scripting.example hello-world.json
~~~
-We currently have JSON and JavaScript example files held in dali-demo/resources/scripts
+We currently have JSON example files held in dali-demo/resources/scripts
-
-
-
# JSON
JSON file contains different sections:
~~~
-#### JavaScript example
-
-~~~{.js}
-
-var builder = new dali.Builder();
-
-builder.loadFromFile( "my-app.json");
-
-var userActorTree = builder.create( { template:"users"} );
-
-~~~
-
#### C++ example
~~~{.cpp}
}
~~~
-#### JavaScript example
-
-~~~{.js}
-builder.applyStyle( "live-tv-focus", tvIcon );
-~~~
-
#### C++ example
~~~{.cpp}
},
~~~
-#### JavaScript example
-
-~~~{.js}
-// JavaScript
-
-var anim = builder.createAnimation( { animation:"animate-show", actor: myActor } );
-~~~
+#### C++ example
~~~{.cpp}
// C+++
....
~~~
-#### JavaScript example
-
-~~~{.js}
-// add all actors under stage section to the root layer
-builder.addActors( dali.stage.getRootLayer() );
-~~~
-
#### C++ example
~~~{.cpp}
builder.AddActors( Stage::GetCurrent().GetRootLayer() );
~~~
-# JavaScript
-
-For the JavaScript API please build dali-toolkit with YUIDOC installed. This will generate the documentation.
-See dali-toolkit/plugins/dali-script-v8/docs/README.txt
-
-To execute JavaScript from C++
-
-~~~{.cpp}
-script = Toolkit::Script::New();
-
-script.ExecuteFile( scriptFileName );
-~~~
-
-@class _Guide_JSON_and_JavaScript_overview
*/
# Stagehand Visual Debugger for DALi {#stagehand}
-
## Introduction
Stagehand connects to DALi via the network using a TCP/IP connection.
-
## Connecting Stagehand to your DALi application
$ netstat -tlpn
~~~
-
Click the settings icons below
-
Here we are connecting to a device running SDB
-
### Connect to DALi running on Desktop ( Ubuntu )
-
## Using Stagehand
Click Refresh to load the current scene from the device.
-
Click screen shot to get overlay current screen
-
To cycle through the actor hierarchy, keep clicking the same spot. Alternatively, select using the actor tree.
-
Click the save icon to save the scene
-
Zooming in and out
-
Modifying the scene
-
## Performance monitoring
Restart application. Click performance
-
## Trouble shooting
After running nc localhost 3031 we type help
-
launch_app [APP_ID] __AUL_SDK__ DEBUG __DLP_DEBUG_ARG__ :10003
~~~
-@class _Guide_Visual_Debugger
If the number of loops (repetitions) is not set then once triggered to start it will scroll until requested to stop.
If loop count is set to 3 for example it will scroll the text 3 times.
-
### Usage
The properties used by TextLabel for Auto Scrolling are listed [here](@ref TextLabelProperties)
-@class TextLabel_Scrolling
*/
Stage::GetCurrent().Add( editor );
~~~
-~~~{.js}
-// JavaScript
-
-var editor = new dali.TextEditor();
-
-dali.stage.add( editor );
-~~~
-
When the TextEditor is tapped, it will automatically gain the keyboard focus. Key events will then result in text being inserted.
After text has been entered, it can be retrieved from the TEXT property.
std::cout << "Received text: " << editorText.Get< std::string >() << std::endl;
~~~
-~~~{.js}
-// JavaScript
-
-console.log( editor.text );
-~~~
-
### Font Selection
By default TextEditor will automatically select a suitable font from the platform. However, a different font could be selected. See the [Font Selection](@ref font-selection) section for more details.
editor.SetProperty( TextEditor::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
~~~
-~~~{.js}
-// JavaScript
-
-editor.HorizontalAlignment = "BEGIN"; // "CENTER" or "END"
-~~~
-
### Copy and Paste (Selection)
Text can be selected by a long press or double tapping it. See the [Copy and Paste](@ref copy-n-paste) section for more details.
editor.SetProperty( TextEditor::Property::TEXT_COLOR, Color::CYAN );
~~~
-~~~{.js}
-// JavaScript
-
-editor.textColor = dali.COLOR_CYAN;
-~~~
-
### TextEditor Properties
- Name (JavaScript) | Name (C++) | Type | Writable | Animatable
+ Name (JSON) | Name (C++) | Type | Writable | Animatable
-----------------------------------|--------------------------------------|--------------|--------------|-----------
renderingBackend | RENDERING_BACKEND | INTEGER | O | X
text | TEXT | STRING | O | X
outline | OUTLINE | STRING | O | X
inputOutline | INPUT_OUTLINE | STRING | O | X
-@class TextEditor
*/
Stage::GetCurrent().Add( field );
~~~
-~~~{.js}
-// JavaScript
-
-var field = new dali.TextField();
-field.placeholderText = "Unnamed Name";
-field.placeholderTextFocused = "Enter Name.";
-
-dali.stage.add( field );
-~~~
-
When the TextField is tapped, it will automatically gain the keyboard focus. Key events will then result in text being inserted, and the placeholder text will be removed.
After text has been entered, it can be retrieved from the TEXT property.
std::cout << "Received text: " << fieldText.Get< std::string >() << std::endl;
~~~
-~~~{.js}
-// JavaScript
-
-console.log( field.text );
-~~~
-
### Font Selection
By default TextField will automatically select a suitable font from the platform. However, a different font could be selected. See the [Font Selection](@ref font-selection) section for more details.
field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
~~~
-~~~{.js}
-// JavaScript
-
-field.HorizontalAlignment = "BEGIN"; // "CENTER" or "END"
-~~~
-
### Copy and Paste (Selection)
Text can be selected by a long press or double tapping it. See the [Copy and Paste](@ref copy-n-paste) section for more details.
field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK );
~~~
-~~~{.js}
-// JavaScript
-
-field.textColor = dali.COLOR_CYAN;
-field.placeholderTextColor = dali.COLOR_BLACK;
-~~~
-
### Text Field Properties
- Name (JavaScript) | Name (C++) | Type | Writable | Animatable
+ Name (JSON) | Name (C++) | Type | Writable | Animatable
-----------------------------------|--------------------------------------|--------------|--------------|-----------
renderingBackend | RENDERING_BACKEND | INTEGER | O | X
text | TEXT | STRING | O | X
outline | OUTLINE | STRING | O | X
inputOutline | INPUT_OUTLINE | STRING | O | X
-@class TextField
-
*/
Stage::GetCurrent().Add( label );
~~~
-~~~{.js}
-// JavaScript
-
-var label = new dali.TextLabel();
-
-label.text = "Hello World";
-label.anchorPoint = dali.TOP_LEFT;
-
-dali.stage.add( label );
-~~~
-
The label must also be added to the stage, or to an actor which is on the stage.
The position of the label on-screen is dependent on the parentOrigin and anchorPoint properties.
| | |
|--|--|
-| (ParentOrigin::TOP_LEFT, AnchorPoint::TOP_LEFT) |   |
+| (ParentOrigin::TOP_LEFT, AnchorPoint::TOP_LEFT) |  |
### Font Selection
label.SetProperty( TextLabel::Property::MULTI_LINE, true );
~~~
-~~~{.js}
-// JavaScript
-
-label.mutliLine = true;
-~~~
-
The text can be either aligned horizontally to the beginning, end, or center of the available area:
~~~{.cpp}
label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
~~~
-~~~{.js}
-// JavaScript
-
-label.HorizontalAlignment = "BEGIN"; // "CENTER" or "END"
-~~~
-
| | |
|--|--|
| Here is the "BEGIN" alignment shown for left-to-right (Latin) | right-to-left (Arabic) scripts |
-|   |   |
+|  |  |
| Here is the "CENTER" alignment shown for left-to-right (Latin) | right-to-left (Arabic) scripts:|
-|   |   |
+|  |  |
| Here is the "END" alignment shown for left-to-right (Latin) | right-to-left (Arabic) scripts:|
-|   |   |
+|  |  |
label.SetProperty( Toolkit::DevelTextLabel::Property::MATCH_SYSTEM_LANGUAGE_DIRECTION, true );
~~~
-~~~{.js}
-// JavaScript
-
-label.matchSystemLanguageDirection = true;
-~~~
-
| | |
|--|--|
| Current system language direction left-to-right | |
| MATCH_SYSTEM_LANGUAGE_DIRECTION set to TRUE. | MATCH_SYSTEM_LANGUAGE_DIRECTION set to FALSE (default). |
| BEGIN alignment | BEGIN alignment |
-|   |   |
+|  |  |
| CENTER alignment | CENTER alignment |
-|   |   |
+|  |  |
| END alignment | END alignment |
-|   |   |
+|  |  |
| | |
|--|--|
| Current system language direction left-to-right | Current system language direction right-to-left |
-|   |   |
+|  |  |
The examples above assume that the TextLabel size greater than the minimum required.
Stage::GetCurrent().Add( label );
~~~
-~~~{.js}
-// JavaScript
-
-var label = new dali.Textlabel;
-label.text = "Hello World";
-label.anchorPoint = dali.TOP_LEFT;
-
-label.widthResizePolicy = "USE_NATURAL_SIZE";
-label.heightResizePolicy = "USE_NATURAL_SIZE";
-
-label.textColor = dali.COLOR_WHITE;
-// background color not available as it's currently not a property of control
-dali.stage.add( label );
-~~~
-
- 
parent.SetFitHeight( 2 );
~~~
- 
label.SetProperty( TextLabel::Property::TEXT_COLOR, Color::RED );
~~~
-~~~{.js}
-// JavaScript
-
-label.text = "Red Text";
-label.textColor = dali.COLOR_RED;
-~~~
-
- 
#### Drop Shadow
~~~
-~~~{.js}
-// JavaScript
-
-dali.stage.setBackgroundColor( dali.COLOR_BLUE );
-
-label1.text = "Plain Text";
-
-
-label2.text = "Text with Shadow";
-label2.shadow = "{\"offset\":\"1 1\",\"color\":\"black\"}";
-
-label3.text = "Text with Bigger Shadow";
-label3.shadow = "{\"offset\":\"2 2\",\"color\":\"black\"}";
-
-label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Soft Shadow" );
-var shadow = {
- "offset" : [ 1.0, 1.0 ],
- "color" : dali.COLOR_RED;
- "blurRadius" : 2.0
-};
-label4.shadow = shadow;
-
-~~~
-
-
-
-
-
-
label2.SetProperty( TextLabel::Property::UNDERLINE_ENABLED, true );
label2.SetProperty( TextLabel::Property::UNDERLINE_COLOR, Color::GREEN );
~~~
-~~~{.js}
-// JavaScript
-label1.Text = "Text with Underline";
-label1.underlineEnabled = true;
-
-label2.Text = "Text with Color Underline";
-label2.underlineEnabled = true;
-label2.underlineColor = dali.COLOR_GREEN;
-~~~
-
-
-
By default the underline height will be taken from the font metrics, however this can be overridden using the UNDERLINE_HEIGHT property:
label1.SetProperty( TextLabel::Property::UNDERLINE_HEIGHT, 1.0f );
~~~
-~~~{.js}
-// JavaScript
-
-label1.underlineHeight = 1;
-~~~
-
-
### Auto Scrolling
-
The \link text-auto-scrolling Auto text scrolling \endlink section details how to scroll text automatically.
The properties used by TextLabel are listed [here](@ref TextLabelProperties)
-@class TextLabel
*/
Renders a color to the visual's quad geometry.
-
### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "COLOR",
- mixColor : dali.COLOR_RED
-};
-~~~
___________________________________________________________________________________________________
## Gradient Visual {#gradient-visual}
| Linear | Radial |
|--------|--------|
-|   |   |
+|  |  |
### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "GRADIENT",
- startPosition : [ 0.5, 0.5 ],
- endPosition : [ -0.5, -0.5 ],
- stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
- stopColor : [
- [ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
- [ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
- [ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
- [ 129 / 255, 198 / 255, 193 / 255, 150 / 255 ],
- dali.COLOR_YELLOW
- ]
-};
-~~~
-
**Radial:**
~~~{.cpp}
// C++
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "GRADIENT",
- center : [ 0.5, 0.5 ],
- radius : 1.414,
- stopOffset : [ 0.0, 0.3, 0.6, 0.8, 1.0 ],
- stopColor : [
- [ 129 / 255, 198 / 255, 193 / 255, 255 / 255 ],
- [ 196 / 255, 198 / 255, 71 / 255, 122 / 255 ],
- [ 214 / 255, 37 / 255, 139 / 255, 191 / 255 ],
- [ 129 / 255, 198 / 255, 193 / 255, 150 / 255 ],
- dali.COLOR_YELLOW
- ]
-};
-~~~
___________________________________________________________________________________________________
## Image Visual {#image-visuals}
Renders a raster image ( jpg, png etc.) into the visual's quad geometry.
-
#### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.jpg"
-};
-~~~
___________________________________________________________________________________________________
### N-Patch {#n-patch-visual}
Renders an n-patch or a 9-patch image. Uses non-quad geometry. Both geometry and texture are cached to reduce memory consumption if the same n-patch image is used elsewhere.
-
#### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.9.png"
-};
-~~~
-
___________________________________________________________________________________________________
### SVG {#svg-visual}
<div style="width:300px">
-
</div>
control.SetSize( 200.f, 200.f );
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.svg"
-};
-~~~
-
___________________________________________________________________________________________________
## Animated Image Visual {#animated-image-visual}
Renders an animated image into the visual's quad geometry. Currently, only the GIF format is supported.
-
#### Properties Supported
Property::Map().Add( Visual::Property::TYPE, Dali::Toolkit::Visual::IMAGE )
.Add( Dali::Toolkit::ImageVisual::Property::URL, "path-to-image.gif" ) );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "IMAGE",
- url : "path-to-image.gif"
-};
-~~~
___________________________________________________________________________________________________
## Border Visual {#border-visual}
Renders a color as an internal border to the visual's geometry.
-
### Properties Supported
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "BORDER",
- borderColor : dali.COLOR_BLUE,
- borderSize = 5
-};
-~~~
-
___________________________________________________________________________________________________
## Mesh Visual {#mesh-visual}
Renders a mesh using a .obj file, optionally with textures provided by a mtl file. Scaled to fit the control.
-
### Properties Supported
The shapes are generated with clockwise winding and back-face culling on by default.
-
### Properties Supported
**sphere:**
-
**conics:**
| Frustrum | Cone | Cylinder |
|----------|------|----------|
-|   |   |   |
+|  |  |  |
### Bevel {#bevel-details}
| 0.0 ( cube) | 0.3 | 0.7 | 1.0 (octahedron) |
|-------------|-----|-----|------------------|
-|   |   |   |   |
+|  |  |  |  |
### Slices {#slices-details}
For spheres and conical frustrums, 'slices' determines how many divisions there are as you go around the object.
-
### Stacks {#stacks-details}
For spheres, 'stacks' determines how many layers there are as you go down the object.
-
### Usage
Renders text within a control.
-
### Properties
Renders a wireframe around a quad geometry.
Is mainly used for debugging and is the visual that replaces all other visuals when [Visual Debug Rendering](@ref debugrendering) is turned on.
-
### Properties
control.SetProperty( Control::Property::BACKGROUND, map );
~~~
-~~~{.js}
-// JavaScript
-var control = new dali.Control( "Control" );
-
-control.background =
-{
- visualType : "WIREFRAME"
-};
-~~~
-
-@class _Guide_Control_Visuals
*/
+++ /dev/null
-<!--
-/**-->
-
-# Writing documentation for the DALi programming guide {#documentationguide}
-
-To allow documentation to be shared between C++ and JavaScript, please follow these guidelines:
-
- - Create a mark down file (.md) using GitHub Flavoured Markdown https://help.github.com/articles/github-flavored-markdown/
- - Put it into the shared C++ / JavaScript documentation: dali-toolkit/docs/content/shared-javascript-and-cpp-documentation/~
- - Include code samples for both C++ and JavaScript in the mark down.
- - See script-overview.md overview in dali-toolkit/docs/content/shared-javascript-and-cpp-documentation for an example
- - For YUIDOC to parse the file it needs:
- - Enclosed in code comment block
- - Have a class tag with a description of the file
- - For DOXYGEN to link to the mark down it currently needs a reference {hash myfile}
-
-
-#### Images
- Images are shared between both Doxygen and YUIDOC tools using a symbolic link.
- You need to link to the image twice in shared documentation.
- This is because YUIDOC stores images in a folder called assets/img/ which is relative to the HTML pages.
- Where as Doxygen copies all images in to the same folder as the HTML generated pages.
-
- ~~~
- // required for YUIDOC
- // required for Doxygen
-
-The space between the brackets is the alternative text. This means you will never see a broken image symbol.
-~~~
-
-## Example
-
-Please have a look at the numerous markdown files to see the header and footer requirements.
-
-You can add tags to your headings as follows:
-~~~{.md}
-# MyChapter {#my-chapter}
-~~~
-Which will allow you to link to this section as follows:
-~~~{.md}
-[Go To MyChapter](@ref my-chapter)
-~~~
-
-Code blocks can be enclosed within 2 blocks of 3 tildes(~).
-
-You can even specify your language type, for example:
-~~~{.md}
-~~~{.cpp}
-...
-~~~{.js}
-~~~
-
-#### Why use GitHub flavoured markdown?
- - Table support is good and language specific code blocks are easier to define ( javascript/C++).
- - Doxygen and YUIDOC both support it.
-
-
-@class _Guide_Writing_DALi_Programming_Guide_Documentation
-
-*/
+++ /dev/null
-<!--
-/**-->
-
-[TOC]
-
-# DALi Emscripten {#emscripten}
-
-
-## Introduction - What is Emscripten? {#emscripten-introduction}
-
-Emscripten is a backend for LLVM that allows C and C++ to be compiled to Javascript.
-This can then be run within a web browser at near native speed (without plugins).
-
-## DALi Emscripten {#emscripten-dali}
-
-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 web page that can either:
-- Run autonomously
-- Be controlled by HTML / Javascript controls elsewhere on the web page
-
-The necessary scripts for building are included within each DALi repository.
-
-
-# Building DALi Emscripten {#emscripten-building}
-
-Within each DALi repository, the README file gives the respective instructions for building that repository.
-In summary, this process involves:
-
-- Setting up a DALi environment with the Emscripten SDK (the dali_env script will do this if specified)
-- Building dali-core as Javascript (using Emscriptens configure and make replacements)
-- Building dali-adaptor Emscripten replacement with a separate build script found in dali-adaptor
-- Installing the examples within the dali-demo repository
-
-## Build Artifacts {#emscripten-artifacts}
-
-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:
- - dali-emscripten.js (the main DALi Javascript runtime).
- - dali-wrapper.js (wrapped DALi calls that call into their cpp-built-to-js counterpart to execute DALi calls).
-- dali-toolkit: Note: Does not currently have Emscripten support.
-- dali-demo: Does not build with Emscripten, but includes some Javascript examples that can be run with an Emscripten build of DALi.
-
-
-# Running The Examples {#emscripten-examples}
-
-After building by following the README within each repository, navigate to the emscripten directory within your DALi environment. Assuming your DESKTOP_PREFIX environment variable is set (from your DALi environment), run:
-
-~~~
-cd $DESKTOP_PREFIX/share/emscripten
-~~~
-
-You will see the following files (among others):
-
-- dali-toy.html - An interactive DALi editor. Add actors, edit shaders and more.
-- dali-toy.js - Required runtime for dali-toy.
-- dali-doc-demo.html - Live documentation demo (a document containing a live DALi canvas).
-- dali-tests.html - Live unit tests for DALi Emscripten.
-- dali-emscripten.html - Required DALi Emscripten runtime.
-- dali-emscripten.js - Required DALi Emscripten runtime.
-- dali-wrapper.js - Required DALi Emscripten runtime.
-
-The other files within the directory are part of the live unit tests.
-
-You can use various browsers to run the examples, however for compatibility we recommend chrome.
-To install chrome on Ubuntu:
-
-~~~
-sudo apt-get install chromium-browser
-~~~
-
-To run an example:
-
-<br>
-~~~
-chromium-browser ./dali-toy.html
-~~~
-
- 
-
-<br><br>
-~~~
-chromium-browser ./dali-doc-demo.html
-~~~
-
- 
-
-<br><br>
-
-
-# Running The Live Unit Tests {#emscripten-tests}
-
-Included are some live unit tests.
-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).
-
- 
-
-<br>
-
-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":
-
-~~~
-npm install http-server -g
-~~~
-
-To start the server, just run:
-
-~~~
-http-server
-~~~
-
-This will give the following output:
-
-~~~
-http-server
-Starting up http-server, serving ./
-Available on:
- http://127.0.0.1:8080
- http://106.1.10.118:8080
-Hit CTRL-C to stop the server
-~~~
-
-This will automatically create a server and serve the contents of the current directory.
-The command outputs the URL to paste into your browser, in the above case:
-
-So to run the tests:
-
-- cd $DESKTOP_PREFIX/share/emscripten
-- http-server
-- Open a browser and paste the URL into the address bar.
-- Click "All" to run all the tests.
-- After a short while the tests will complete and any errors will be shown.
-- A test can be re-run by clicking the "Rerun" link by that test. There is also a global Rerun option.
-
-# Debugging & Usage Tips {#emscripten-debugging}
-
-Most browsers provide a Javascript console.
-In many cases this will open when inspecting an element. However to jump straight to the console (within chromium), press:
-
-- "Ctrl + Shift + J" (Windows/Linux)
-- "Command + Option + J" (Mac)
-
-From this console, any references within your Javascript code and DALi itself can be accessed directly.
-This allows you to run commands live.
-
-EG. Within the console you could enter:
-
-~~~
-var MyActor = new dali.Actor();
-MyActor.name = "MyName";
-...
-MyActor.name
-<- "MyName"
-~~~
-
-You can also inspect elements like so:
-
-~~~
-var MyActor = new dali.Actor();
-MyActor
-<- â–¶ Object {$$: Object}
-~~~
-
-Then clicking on the tree node toggle "â–¶" Will expand the objects hierarchy like so:
-
-~~~
-â–¼ Object {$$: Object}
- â–¶ $$: Object
- anchorPoint: (...)
- â–¶ get anchorPoint: function ()
- â–¶ set anchorPoint: function (newValue)
- anchorPointX: (...)
- â–¶ get anchorPointX: function ()
- â–¶ set anchorPointX: function (newValue)
- <etc>
-~~~
-
-You can then further expand the tree by clicking on the "â–¶" nodes.
-
-You can also expand the "(...)" sections to show type information, EG:
-
-~~~
- anchorPoint: (...)
-Becomes:
- anchorPoint: Array[3]
-~~~
-
-Note: You can access and modify existing objects created by the Javascript also.
-
-
-@class _Guide_Emscripten
-*/
+++ /dev/null
-<!--
-/**-->
-
-# JavaScript wrapping guide {#javascriptwrapping}
-
-This guide outlines what files to modify when the DALi C++ public API changes.
-
-## Background
-
-We use Google's V8 to run JavaScript code.
-https://developers.google.com/v8/get_started
-
-#### Folder structure
-
-There is a folder for each type of wrapped object.
-
-
-The filename for a wrapped type are always object-wrapper.xxx
-The filename for the static functions that forward calls to DALi are always object-api.xxx
-
-The current file / folder structure is as follows:
-
-
-
-
-
-## What to do when the DALi public API changes:
-
-### New property has been added
-- No code change required.
-- 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 documentation above the function
-
-
-
-
-### New object added
-
-This is an example of wrapping a new DALi C++ object called Light.
-
-- in dali-wrapper.cpp in ConstructorFunctionTable insert the constructor in the table.
-
-
-
-
-
-Objects registered in this table can be created in JavaScript as follows:
-
-~~~{.js}
-var light = new dali.Light();
-~~~
-
-- Add the Light to the Type enum in BaseWrappedObject class.
-
-
-
-
-
-- Create the light-wrapper / light-api files
-
-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 ( inherits from BaseWrappedObject)
-
-
-
-## Design
-
-
-
-
-
-
-
-
-
-
-
-### Internals
-In order to wrap DALi C++ objects in JavaScript, we use
-hidden fields inside the JavaScript object.
-
-
-
-| JavaScript Object | _ | C++ WrappedObject (e.g. ImageWrapper)|
-|---------------------------------------|-------|----------------------------------------|
-| Hidden internal fields | | |
-| *Pointer to a WrappedObject | ----> | Handle to a Dali::Image object |
-| Type of wrapped object (e.g. Image) | | |
-
-
-So if you call
-~~~{.js}
-var name = myActor.getId();
-~~~
-v8 will detect myActor is a wrapped object, and call getId() on that wrapped object.
-The wrapped object, then forwards the command to the real DALi object.
-
-Whenever we want to access functions / properties of that wrapped object, we unwrap it
-to get access to the DALi object.
-
-Each wrapped object registers with DALi garbage collector so they can be deleted
-when DALi shuts down
-
-@class _Guide_JavaScript_Wrapping
-
-*/
+++ /dev/null
-<!--
-/**-->
-
- # Hello World - JSON layout{#script-hello}
-
- The following JSON code is the minimum required to put the sentence "Hello World" on the screen.
-
-~~~{.json}
-{
- // a tree of actors
- "stage": [{
- "name": "text-label",
- "type": "TextLabel",
- "text": "Hello World",
- "parentOrigin": "CENTER"
- }]
-}
-~~~
-
- The following code loads the JSON file
-
-~~~{.cpp}
- // C++
- Builder builder = Builder::New();
-
- std::string json_data(ReadFile("layout.json"));
-
- builder.LoadFromString(json_data);
-
- builder.AddActors( Stage::GetCurrent().GetRootLayer() );
-
- ~~~
-
- ~~~{.js}
- // JavaScript
-
- var builder = new dali.Builder();
-
- builder.loadFromFile("layout.json");
-
- builder.addActors( dali.stage.getRootLayer )
-
-~~~
- ## Hello World - Javascript
-
- 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
-~~~
-
- The TextLabel control to display Hello World can be constructed using Javascript dot notation accessing DALi Actor Properties.
-
-~~~{.js}
-// JavaScript
-
- var textLabel = new dali.TextLabel();
-
- textLabel.text = "Hello World";
- textLabel.fontFamily = "FreeSans";
- textLabel.fontStyle = "Regular";
- textLabel.parentOrigin = dali.CENTER;
-
- dali.stage.add( textLabel );
-~~~
-
-@class _Guide_Script_Hello_World
-
-*/
+++ /dev/null
-Building dali node addon for GBS
-
-Ensure node-devel (0.12.4) rpm is install into gbs. The addon expects /usr/lib/node/node.h to exists
-in the gbs environment
-
-sudo gbs build -A armv7l --include-all --ccache --keep-packs --spec dali-addon.spec
-
-Building for Ubuntu desktop:
-
-2 options:
-
-option 1 (easy): in node-addon folder type
-
-$ node-gyp build
-
-option 2 (harder)
-Ensure node-js source has been downloaded and built from source.
-It doesn't have to be installed anywhere (make sure node executable is in your PATH).
-
-In node-addon/build/tizen direction, run cmake, with the source directory of node
-
-cmake -DDesktopNodePath:String=/home/my-user/Downloads/node-v0.12.4 .
-make
+++ /dev/null
-{
- "variables": {
- 'DALI_JS_DIR%':'../plugins/dali-script-v8/src/'
- },
- "targets": [
- {
- 'target_name': 'dali',
- 'include_dirs': ['<(DALI_JS_DIR)/',
- '<(DALI_JS_DIR)/utils'],
- 'sources': [ 'dali-addon.cpp',
- 'javascript-application-options.cpp',
- '<(DALI_JS_DIR)/utils/v8-utils.cpp',
- '<(DALI_JS_DIR)/dali-wrapper.cpp',
- '<(DALI_JS_DIR)/shared/base-wrapped-object.cpp',
- '<(DALI_JS_DIR)/shared/object-template-helper.cpp',
- '<(DALI_JS_DIR)/actors/actor-wrapper.cpp',
- '<(DALI_JS_DIR)/actors/actor-api.cpp',
- '<(DALI_JS_DIR)/actors/layer-api.cpp',
- '<(DALI_JS_DIR)/actors/camera-actor-api.cpp',
- '<(DALI_JS_DIR)/constants/constants-wrapper.cpp',
- '<(DALI_JS_DIR)/controls/control-wrapper.cpp',
- '<(DALI_JS_DIR)/controls/item-factory-wrapper.cpp',
- '<(DALI_JS_DIR)/controls/item-view-api.cpp',
- '<(DALI_JS_DIR)/controls/scroll-view-api.cpp',
- '<(DALI_JS_DIR)/animation/animation-api.cpp',
- '<(DALI_JS_DIR)/animation/animation-wrapper.cpp',
- '<(DALI_JS_DIR)/animation/constrainer-api.cpp',
- '<(DALI_JS_DIR)/animation/linear-constrainer-wrapper.cpp',
- '<(DALI_JS_DIR)/animation/path-api.cpp',
- '<(DALI_JS_DIR)/animation/path-constrainer-wrapper.cpp',
- '<(DALI_JS_DIR)/animation/path-wrapper.cpp',
- '<(DALI_JS_DIR)/stage/stage-wrapper.cpp',
- '<(DALI_JS_DIR)/events/event-object-generator.cpp',
- '<(DALI_JS_DIR)/events/pan-gesture-detector-api.cpp',
- '<(DALI_JS_DIR)/events/pan-gesture-detector-wrapper.cpp',
- '<(DALI_JS_DIR)/stage/stage-api.cpp',
- '<(DALI_JS_DIR)/image/image-wrapper.cpp',
- '<(DALI_JS_DIR)/image/image-api.cpp',
- '<(DALI_JS_DIR)/image/buffer-image-api.cpp',
- '<(DALI_JS_DIR)/image/frame-buffer-image-api.cpp',
- '<(DALI_JS_DIR)/image/resource-image-api.cpp',
- '<(DALI_JS_DIR)/object/handle-wrapper.cpp',
- '<(DALI_JS_DIR)/object/property-buffer-api.cpp',
- '<(DALI_JS_DIR)/object/property-buffer-wrapper.cpp',
- '<(DALI_JS_DIR)/object/property-value-wrapper.cpp',
- '<(DALI_JS_DIR)/signals/signal-manager.cpp',
- '<(DALI_JS_DIR)/render-tasks/render-task-list-api.cpp',
- '<(DALI_JS_DIR)/render-tasks/render-task-list-wrapper.cpp',
- '<(DALI_JS_DIR)/render-tasks/render-task-api.cpp',
- '<(DALI_JS_DIR)/render-tasks/render-task-wrapper.cpp',
- '<(DALI_JS_DIR)/rendering/geometry-api.cpp',
- '<(DALI_JS_DIR)/rendering/geometry-wrapper.cpp',
- '<(DALI_JS_DIR)/rendering/renderer-api.cpp',
- '<(DALI_JS_DIR)/rendering/renderer-wrapper.cpp',
- '<(DALI_JS_DIR)/rendering/sampler-api.cpp',
- '<(DALI_JS_DIR)/rendering/sampler-wrapper.cpp',
- '<(DALI_JS_DIR)/rendering/shader-api.cpp',
- '<(DALI_JS_DIR)/rendering/shader-wrapper.cpp',
- '<(DALI_JS_DIR)/rendering/texture-set-api.cpp',
- '<(DALI_JS_DIR)/rendering/texture-set-wrapper.cpp',
- '<(DALI_JS_DIR)/toolkit/builder/builder-api.cpp',
- '<(DALI_JS_DIR)/toolkit/builder/builder-wrapper.cpp',
- '<(DALI_JS_DIR)/toolkit/focus-manager/keyboard-focus-manager-api.cpp',
- '<(DALI_JS_DIR)/toolkit/focus-manager/keyboard-focus-manager-wrapper.cpp',
- '<(DALI_JS_DIR)/signals/dali-any-javascript-converter.cpp',
- '<(DALI_JS_DIR)/garbage-collector/garbage-collector.cpp',
- '<(DALI_JS_DIR)/module-loader/module.cpp',
- '<(DALI_JS_DIR)/module-loader/module-loader.cpp'
- ],
- 'cflags': [
- '-fPIC',
- '-frtti',
- '<!@(pkg-config --cflags dali-core dali-adaptor-uv dali-toolkit)'
- ],
-
- 'cflags_cc': [
- '-fexceptions', # Enable exception handler
- '-frtti' # needed for typeinfo with dali-any
- ],
- 'ldflags': [
- '<!@(pkg-config --libs-only-L --libs-only-other dali-core dali-adaptor-uv dali-toolkit)'
- ],
- 'libraries': [
- '<!@(pkg-config --libs-only-l dali-core dali-adaptor-uv dali-toolkit)'
- ]
- }]
-}
+++ /dev/null
-# This file is generated by gyp; do not edit.
-
-export builddir_name ?= ./build/.
-.PHONY: all
-all:
- $(MAKE) dali
+++ /dev/null
-# Guide to build for GBS
-# Build dali-toolkit with gbs, the dali-addon will be built automatically
-#
-# To build for Desktop
-# option 1 (easy): in node-addon folder type
-#
-# $ node-gyp build
-#
-# option 2: use cmake
-# This relies on Node source being downloaded ( don't forget the dot)
-#
-# cmake -DDesktopNodePath:String=/home/Downloads/node-v0.12.4 .
-
-
-CMAKE_MINIMUM_REQUIRED(VERSION 2.8.5)
-PROJECT(dali_addon)
-set(configuration "Default")
-enable_language(ASM)
-set(builddir "${CMAKE_BINARY_DIR}")
-set(obj "${builddir}/obj")
-
-set(CMAKE_C_OUTPUT_EXTENSION_REPLACE 1)
-set(CMAKE_CXX_OUTPUT_EXTENSION_REPLACE 1)
-
-option(GBSBuild "GBSBuild" 0)
-option(DesktopNodePath "DesktopNodePath" "")
-
-IF( ${GBSBuild} )
- set( NODE_HEADERS "/usr/include/node" )
- set( V8_HEADERS "/usr/include/node" )
- MESSAGE("Performing a GBS build, ensure Node JS devel RPM is installed")
- MESSAGE("node.h and v8.h should exist in ${NODE_HEADERS}")
-ELSE()
- MESSAGE("Performing Desktop build node path =${DesktopNodePath}")
- IF( NOT DesktopNodePath )
- MESSAGE(FATAL_ERROR "\n Node JS Source code path empty, please specify,e.g. \n cmake -DDesktopNodePath:String=~/Downloads/node-v0.12.4/ .")
- ENDIF( NOT DesktopNodePath )
- set( NODE_HEADERS "${DesktopNodePath}/src" )
- set( V8_HEADERS "${DesktopNodePath}/deps/v8/include" )
- MESSAGE( "-- Node include header location = ${NODE_HEADERS} ")
- MESSAGE( "-- V8 include header location = ${V8_HEADERS} ")
-ENDIF( ${GBSBuild})
-
-set(TARGET "dali_addon")
-set(TOOLSET "target")
-set(PLUGING_SRC_DIR "../../../plugins/dali-script-v8/src")
-set(NODE_ADDON_SRC "../..")
-add_library(dali_addon SHARED
- ${NODE_ADDON_SRC}/dali-addon.cpp
- ${NODE_ADDON_SRC}/javascript-application-options.cpp
- ${PLUGING_SRC_DIR}/utils/v8-utils.cpp
- ${PLUGING_SRC_DIR}/dali-wrapper.cpp
- ${PLUGING_SRC_DIR}/shared/base-wrapped-object.cpp
- ${PLUGING_SRC_DIR}/shared/object-template-helper.cpp
- ${PLUGING_SRC_DIR}/actors/actor-wrapper.cpp
- ${PLUGING_SRC_DIR}/actors/actor-api.cpp
- ${PLUGING_SRC_DIR}/actors/layer-api.cpp
- ${PLUGING_SRC_DIR}/actors/camera-actor-api.cpp
- ${PLUGING_SRC_DIR}/controls/control-wrapper.cpp
- ${PLUGING_SRC_DIR}/controls/item-factory-wrapper.cpp
- ${PLUGING_SRC_DIR}/controls/item-view-api.cpp
- ${PLUGING_SRC_DIR}/controls/scroll-view-api.cpp
- ${PLUGING_SRC_DIR}/constants/constants-wrapper.cpp
- ${PLUGING_SRC_DIR}/animation/animation-api.cpp
- ${PLUGING_SRC_DIR}/animation/animation-wrapper.cpp
- ${PLUGING_SRC_DIR}/animation/constrainer-api.cpp
- ${PLUGING_SRC_DIR}/animation/linear-constrainer-wrapper.cpp
- ${PLUGING_SRC_DIR}/animation/path-api.cpp
- ${PLUGING_SRC_DIR}/animation/path-constrainer-wrapper.cpp
- ${PLUGING_SRC_DIR}/animation/path-wrapper.cpp
- ${PLUGING_SRC_DIR}/stage/stage-wrapper.cpp
- ${PLUGING_SRC_DIR}/events/event-object-generator.cpp
- ${PLUGING_SRC_DIR}/events/pan-gesture-detector-api.cpp
- ${PLUGING_SRC_DIR}/events/pan-gesture-detector-wrapper.cpp
- ${PLUGING_SRC_DIR}/stage/stage-api.cpp
- ${PLUGING_SRC_DIR}/image/image-wrapper.cpp
- ${PLUGING_SRC_DIR}/image/image-api.cpp
- ${PLUGING_SRC_DIR}/image/buffer-image-api.cpp
- ${PLUGING_SRC_DIR}/image/frame-buffer-image-api.cpp
- ${PLUGING_SRC_DIR}/image/resource-image-api.cpp
- ${PLUGING_SRC_DIR}/object/handle-wrapper.cpp
- ${PLUGING_SRC_DIR}/object/property-buffer-api.cpp
- ${PLUGING_SRC_DIR}/object/property-buffer-wrapper.cpp
- ${PLUGING_SRC_DIR}/object/property-value-wrapper.cpp
- ${PLUGING_SRC_DIR}/signals/signal-manager.cpp
- ${PLUGING_SRC_DIR}/render-tasks/render-task-list-api.cpp
- ${PLUGING_SRC_DIR}/render-tasks/render-task-list-wrapper.cpp
- ${PLUGING_SRC_DIR}/render-tasks/render-task-api.cpp
- ${PLUGING_SRC_DIR}/render-tasks/render-task-wrapper.cpp
- ${PLUGING_SRC_DIR}/rendering/geometry-api.cpp
- ${PLUGING_SRC_DIR}/rendering/geometry-wrapper.cpp
- ${PLUGING_SRC_DIR}/rendering/texture-set-api.cpp
- ${PLUGING_SRC_DIR}/rendering/texture-set-wrapper.cpp
- ${PLUGING_SRC_DIR}/rendering/renderer-api.cpp
- ${PLUGING_SRC_DIR}/rendering/renderer-wrapper.cpp
- ${PLUGING_SRC_DIR}/rendering/sampler-api.cpp
- ${PLUGING_SRC_DIR}/rendering/sampler-wrapper.cpp
- ${PLUGING_SRC_DIR}/rendering/shader-api.cpp
- ${PLUGING_SRC_DIR}/rendering/shader-wrapper.cpp
- ${PLUGING_SRC_DIR}/toolkit/builder/builder-api.cpp
- ${PLUGING_SRC_DIR}/toolkit/builder/builder-wrapper.cpp
- ${PLUGING_SRC_DIR}/toolkit/focus-manager/keyboard-focus-manager-api.cpp
- ${PLUGING_SRC_DIR}/toolkit/focus-manager/keyboard-focus-manager-wrapper.cpp
- ${PLUGING_SRC_DIR}/signals/dali-any-javascript-converter.cpp
- ${PLUGING_SRC_DIR}/garbage-collector/garbage-collector.cpp
- ${PLUGING_SRC_DIR}/module-loader/module.cpp
- ${PLUGING_SRC_DIR}/module-loader/module-loader.cpp
-)
-set_target_properties(dali_addon PROPERTIES LIBRARY_OUTPUT_DIRECTORY "${builddir}/lib.${TOOLSET}")
-set_target_properties(dali_addon PROPERTIES PREFIX "")
-set_target_properties(dali_addon PROPERTIES LIBRARY_OUTPUT_NAME "dali")
-set_target_properties(dali_addon PROPERTIES SUFFIX ".node")
-set_source_files_properties(${builddir}/lib.${TOOLSET}/dali.node PROPERTIES GENERATED "TRUE")
-set_target_properties(dali_addon PROPERTIES EXCLUDE_FROM_ALL "FALSE")
-
-
-SET(PKG_LIST dali-core
- dali-adaptor-uv
- dali-toolkit)
-
-INCLUDE(FindPkgConfig)
-pkg_check_modules(REQUIRED_PKGS REQUIRED ${PKG_LIST})
-
-# This is just pulling out dali / dali-toolkit header locations from pkg-config
-FOREACH(flag ${REQUIRED_PKGS_CFLAGS})
- SET(REQUIRED_CFLAGS "${REQUIRED_CFLAGS} ${flag}")
-ENDFOREACH(flag)
-
-# Set the include paths to include dali, dali-core, node, v8 and headers for dali-addon
-SET(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} ${REQUIRED_CFLAGS} -I${PLUGING_SRC_DIR}/utils -I${PLUGING_SRC_DIR} -I${NODE_HEADERS} -I ${V8_HEADERS}")
-
-set_target_properties(dali_addon PROPERTIES COMPILE_FLAGS "-fPIC -frtti -fexceptions")
-
-# This sets up the linker flags for dali-core/ adaptor and toolkit
-# we don't need any flags for node / v8 as we're running inside node and v8 is statically linked to it
-TARGET_LINK_LIBRARIES(${PROJECT_NAME} ${REQUIRED_PKGS_LDFLAGS})
-
-# ${CMAKE_INSTALL_PREFIX}
-#################################### install #####################################
-INSTALL(TARGETS ${PROJECT_NAME} DESTINATION ${CMAKE_INSTALL_PREFIX} )
-
-unset(TOOLSET)
-unset(TARGET)
+++ /dev/null
-/* Copyright (c) 2015 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-// EXTERNAL INCLUDES
-#include <node.h>
-#include <public-api/dali-core.h>
-#include <dali-toolkit/dali-toolkit.h>
-#include <integration-api/core.h>
-#include <integration-api/adaptors/adaptor.h>
-#include <public-api/adaptor-framework/window.h>
-#include <devel-api/adaptor-framework/singleton-service.h>
-
-// INTERNAL INCLUDES
-#include <dali-wrapper.h>
-#include "javascript-application-options.h"
-
-using namespace Dali;
-
-namespace DaliNodeAddon
-{
-
-class DaliApplication
-{
-public:
-
- DaliApplication()
- : mInitialized( false),
- mSingletonService(SingletonService::New()),
- mAdaptor( NULL )
- {
- }
-
- ~DaliApplication()
- {
- mSingletonService.UnregisterAll();
- delete mAdaptor;
- mWindow.Reset();
- }
-
- bool Initialized() const
- {
- return mInitialized;
- }
-
- void Initialize( ApplicationOptions options )
- {
- if( mInitialized )
- {
- return;
- }
-
- // 1. Create the window ( adaptor requires a window)
- const WindowOptions& window( options.window);
-
- mWindow = Window::New( window.positionSize, window.name, window.transparent );
-
- // 2. create the adaptor
- Adaptor* adaptor = &Adaptor::New( mWindow );
-
- // 3. start the adaptor
- adaptor->Start();
-
- // fire the scene create signal
- adaptor->NotifySceneCreated();
-
- mInitialized = true;
- }
-private:
-
- bool mInitialized;
- SingletonService mSingletonService;
- Adaptor* mAdaptor;
- Window mWindow;
-
-};
-
-DaliApplication app;
-
-void CreateDali(const v8::FunctionCallbackInfo<v8::Value>& args)
-{
- v8::Isolate* isolate = args.GetIsolate();
- v8::HandleScope scope(isolate);
-
- ApplicationOptions options;
-
- bool ok = GetApplicationOptions( args, options);
- if (!ok )
- {
- isolate->ThrowException( v8::Exception::TypeError( v8::String::NewFromUtf8(isolate, "Please check arguments passed to DALi require") ) );
- return;
- }
-
- app.Initialize( options );
-
- // the return value from calling the function require('dali.js)( options )
- // is the dali object
- args.GetReturnValue().Set( V8Plugin::DaliWrapper::CreateWrapperForNodeJS( isolate ) );
-}
-
-
-/**
- * We make module.exports a function so that the developer can pass to
- * parameters to DALi when it's 'required'
- * E.g
- *
- *
- * var window= {
- * x:10,
- * y:10,
- * width:800,
- * height: 600,
- * transparent: false,
- * name:'my-first-dali-app'
- * };
- *
- * var viewMode {
- * 'stereoscopic-mode':'stereo-vertical', // mono, stereo-horizontal, stereo-vertical, stereo-interlaced,
- * 'stereo-base': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- * };
- *
- * var options= {
- * 'window': window,
- * 'view-mode': viewMode,
- * 'style-sheet': 'my-theme.json'
- * }
- *
- * var dali = require('dali.js')( options )
- *
- *
- */
-void ExportDaliModule(v8::Handle<v8::Object> exports, v8::Handle<v8::Object> module)
-{
- NODE_SET_METHOD(module, "exports", CreateDali);
-}
-
-} // namespace DaliNodeAddon
-
-NODE_MODULE(dali, DaliNodeAddon::ExportDaliModule)
-
-
-
-
+++ /dev/null
- var window = {
- x:0,
- y:0,
- width:1920,
- height:1080,
- transparent: false,
- name:'Flexbox Demo'
- };
-
- var options = {
- 'window': window
- }
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var imageDir = "./images/";
-
-var imageView;
-var currentImageIndex = 0;
-var imageNames = ["image-1.jpg", "image-2.jpg", "image-3.jpg"];
-
-var daliApp = {};
-
-daliApp.init = function() {
-
- // Create the main flex container
- var flexContainer = new dali.Control("FlexContainer");
- flexContainer.parentOrigin = dali.TOP_LEFT;
- flexContainer.anchorPoint = dali.TOP_LEFT;
- flexContainer.widthResizePolicy = "FILL_TO_PARENT";
- flexContainer.heightResizePolicy = "FILL_TO_PARENT";
- flexContainer.backgroundColor = dali.COLOR_WHITE;
- flexContainer.flexDirection = "column"; // display toolbar and content vertically
-
- dali.stage.add( flexContainer );
-
- // Create the toolbar area
- var toolBar = new dali.Control("FlexContainer");
- toolBar.parentOrigin = dali.TOP_LEFT;
- toolBar.anchorPoint = dali.TOP_LEFT;
- toolBar.backgroundColor = dali.COLOR_CYAN;
- toolBar.flexDirection = "row"; // display toolbar items horizontally
- toolBar.alignItems = "center"; // align toolbar items vertically center
- toolBar.flex = 0.1; // 10 percent of available space in the cross axis
-
- flexContainer.add(toolBar);
-
- // Create the content area
- var content = new dali.Control("FlexContainer");
- content.parentOrigin = dali.TOP_LEFT;
- content.anchorPoint = dali.TOP_LEFT;
- content.flexDirection = "row";
- content.alignItems = "center"; // align items vertically center
- content.justifyContent = "center"; // align items horizontally center
- content.flex = 0.9; // 90 percent of available space in the cross axis
-
- flexContainer.add(content);
-
- // Add a button to the left of the toolbar
- var prevButton = new dali.Control("PushButton");
- prevButton.name = "Prev";
- prevButton.parentOrigin = dali.TOP_LEFT;
- prevButton.anchorPoint = dali.TOP_LEFT;
- prevButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
- prevButton.labelText = "Prev";
- prevButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
-
- toolBar.add( prevButton );
-
- // Add a title to the center of the toolbar
- var title = new dali.Control("TextLabel");
- title.parentOrigin = dali.TOP_LEFT;
- title.anchorPoint = dali.TOP_LEFT;
- title.widthResizePolicy = "USE_NATURAL_SIZE";
- title.heightResizePolicy = "USE_NATURAL_SIZE";
- title.horizontalAlignment = "CENTER";
- title.verticalAlignment = "CENTER";
- title.text = "Gallery";
- title.pointSize = 28;
- title.flex = 1.0; // take all the available space left apart from the two buttons
- title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title
-
- toolBar.add( title );
-
- // Add a button to the right of the toolbar
- var nextButton = new dali.Control("PushButton");
- nextButton.name = "Next";
- nextButton.parentOrigin = dali.TOP_LEFT;
- nextButton.anchorPoint = dali.TOP_LEFT;
- nextButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
- nextButton.labelText = "Next";
- nextButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
-
- toolBar.add( nextButton );
-
- // Add an image to the center of the content area
- imageView = new dali.Control("ImageView");
- imageView.image = imageDir + imageNames[currentImageIndex];
- imageView.parentOrigin = dali.TOP_LEFT;
- imageView.anchorPoint = dali.TOP_LEFT;
- content.add( imageView );
-
- // Connect signal callback to button pressed signal
- prevButton.on("pressed", daliApp.buttonPressedEvent);
- nextButton.on("pressed", daliApp.buttonPressedEvent);
-}
-
-daliApp.buttonPressedEvent = function( button ) {
-
- // Set the size of image view to its natural size
- imageView.widthResizePolicy = "USE_NATURAL_SIZE";
- imageView.heightResizePolicy = "USE_NATURAL_SIZE";
-
- // Work out the index of the new image
- if (button.name == "Prev") {
- currentImageIndex--;
- }
- else {
- currentImageIndex++;
- }
- currentImageIndex %= imageNames.length;
-
- // Display the new image
- imageView.image = imageDir + imageNames[Math.abs(currentImageIndex)];
-}
-
-function startup() {
-
- daliApp.init();
-}
-
-startup();
-
+++ /dev/null
- var window= {
- x:0,
- y:0,
- width:1920,
- height: 1080,
- transparent: false,
- name:'itemview-example'
- };
-
- var viewMode={
- 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
- 'stereoBase': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- };
-
- var options= {
- 'window': window,
- 'viewMode': viewMode,
- }
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var items = [];
-var button;
-var stageSize;
-
-var itemView;
-var itemFactory;
-
-var currentLayoutIndex = 0;
-var totalItemCount = 100;
-
-var imageDir = "./images/";
-
-var daliApp = {};
-
-daliApp.createItemView = function() {
-
- // Create item view data
- var itemViewData = [];
- for (var itemId = 0; itemId < totalItemCount; itemId++)
- {
- var data = {};
- data["template"] = "template-item-list"; // Create items initially with list template
- data["icon_path"] = imageDir + "icon-" + itemId % 3 + ".png";
- data["title_text"] = "Item " + itemId;
- itemViewData[itemId] = data;
- }
-
- // Create item factory and set the data
- itemFactory = new dali.ItemFactory();
- itemFactory.jsonTemplateFile = "./scripts/item-template.json";
- itemFactory.data = itemViewData;
-
- // Create item view
- stageSize = dali.stage.getSize();
- itemView = new dali.Control("ItemView", itemFactory);
- itemView.size = [stageSize.x, stageSize.y, 0.0];
- itemView.parentOrigin = dali.CENTER_LEFT;
- itemView.anchorPoint = dali.CENTER_LEFT;
- itemView.refreshInterval = 4.0;
-
- // Add item view to the stage
- dali.stage.add( itemView );
-
- // Create scroll bar for item view
- var scrollBar = new dali.Control("ScrollBar");
- scrollBar.parentOrigin = dali.TOP_RIGHT;
- scrollBar.anchorPoint = dali.TOP_RIGHT;
- scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
- scrollBar.heightResizePolicy = "FILL_TO_PARENT";
- itemView.add(scrollBar);
-
- // Add the list and grid layouts
- itemView.addLayout(dali.ITEM_LAYOUT_LIST); // layout index 0
- itemView.addLayout(dali.ITEM_LAYOUT_GRID); // layout index 1
-
- // Set custom item size for list layout
- itemView.setItemSize(0, [stageSize.x, stageSize.y * 0.1, 0.0]);
-
- // Set custom item size for grid layout
- var layoutMargin = 120;
- itemView.setItemSize(1, [(stageSize.x - layoutMargin) / 4, stageSize.y * 0.2, 0.0]);
-
- // Activate the list layout
- itemView.activateLayout(0, itemView.size);
-
- // Create button for layout switching
- button = new dali.Control("PushButton");
- button.size = [100.0, 60.0, 0.0];
- button.position = [-20.0, 20.0, 0.0];
- button.parentOrigin = dali.TOP_RIGHT;
- button.anchorPoint = dali.TOP_RIGHT;
- button.labelText = "Switch";
- dali.stage.add( button );
-
- // Connect a signal callback to button pressed signal
- button.on("pressed", daliApp.buttonPressedEvent);
-}
-
-daliApp.buttonPressedEvent = function( button ) {
-
- // Calculate the layout index for the next layout to switch to
- currentLayoutIndex++;
- currentLayoutIndex = currentLayoutIndex % itemView.getLayoutCount();
-
- // Activate the next layout
- itemView.activateLayout(currentLayoutIndex, [stageSize.x, stageSize.y, 0.0], 0.0);
-
- // Change the item template in item view data as we want to change the layout of the items
- var data = itemFactory.data;
- for (var itemId = 0; itemId < totalItemCount; itemId++)
- {
- if(currentLayoutIndex == 0)
- {
- // List layout
- data[itemId]["template"] = "template-item-list"; // Create items with list template
- }
- else
- {
- // Grid layout
- data[itemId]["template"] = "template-item-grid"; // Create items with grid template
- }
- }
- itemFactory.data = data;
-}
-
-function startup()
-{
- daliApp.init();
-}
-
-daliApp.init = function()
-{
- daliApp.createItemView();
-}
-
-startup();
-
+++ /dev/null
- var window= {
- x:0,
- y:0,
- width:1920,
- height: 1080,
- transparent: false,
- name:'line-mesh-app'
- };
-
- var viewMode={
- 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
- 'stereo-base': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- };
-
- var options= {
- 'window': window,
- 'view-mode': viewMode,
- }
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var daliApp = {};
-
-daliApp.createMeshActor = function() {
-
- // Create shader
- var vertShader =
- "attribute mediump vec2 aPosition1;\
- attribute mediump vec2 aPosition2;\
- uniform mediump mat4 uMvpMatrix;\
- uniform mediump vec3 uSize;\
- uniform mediump float uMorphAmount;\
- void main()\
- {\
- mediump vec2 morphPosition = mix(aPosition1, aPosition2, uMorphAmount);\
- mediump vec4 vertexPosition = vec4(morphPosition, 0.0, 1.0);\
- vertexPosition.xyz *= uSize;\
- vertexPosition = uMvpMatrix * vertexPosition;\
- gl_Position = vertexPosition;\
- }";
-
- var fragShader =
- "uniform lowp vec4 uColor;\
- uniform sampler2D sTexture;\
- void main()\
- {\
- gl_FragColor = uColor;\
- }";
-
- var shaderOptions = {
- vertexShader : vertShader,
- fragmentShader: fragShader
- };
-
- var shader = new dali.Shader(shaderOptions);
-
- // Create vertex buffer
- var pentagonVertexFormat ={ "aPosition1" : dali.PROPERTY_VECTOR2 };
-
- var pentagonVertexData = [ 0, 1,
- -0.95, 0.31,
- -0.59, -0.81,
- 0.59, -0.81,
- 0.95, 0.31];
-
- var pentagonVertexDataArray = new Float32Array(pentagonVertexData.length);
- pentagonVertexDataArray.set(pentagonVertexData, 0);
- var pentagonVertices = new dali.PropertyBuffer(pentagonVertexFormat);
- pentagonVertices.setData(pentagonVertexDataArray, 5);
-
- var pentacleVertexFormat ={ "aPosition2" : dali.PROPERTY_VECTOR2};
-
- var pentacleVertexData = [ 0, -1,
- 0.59, 0.81,
- -0.95, -0.31,
- 0.95, -0.31,
- -0.59, 0.81];
-
- var pentacleVertexDataArray = new Float32Array(pentacleVertexData.length);
- pentacleVertexDataArray.set(pentacleVertexData, 0);
- var pentacleVertices = new dali.PropertyBuffer(pentacleVertexFormat);
- pentacleVertices.setData(pentacleVertexDataArray, 5);
-
- var indexFormat ={ "indices" : dali.PROPERTY_INTEGER };
-
- var indexData = [0, 1, 1, 2, 2, 3, 3, 4, 4, 0];
-
- var indexDataArray = new Uint32Array(indexData.length);
- indexDataArray.set(indexData, 0);
-
- // Create geometry
- var geometry = new dali.Geometry();
- geometry.addVertexBuffer( pentagonVertices );
- geometry.addVertexBuffer( pentacleVertices );
- geometry.setIndexBuffer( indexDataArray, 10 );
- geometry.setType( dali.GEOMETRY_LINES );
-
- var renderer = new dali.Renderer(geometry, shader);
- renderer.depthIndex = 0;
-
- // Create mesh actor
- var meshActor = new dali.Actor();
- meshActor.addRenderer( renderer );
- meshActor.size = [300, 300, 0];
- meshActor.parentOrigin = dali.CENTER;
- meshActor.anchorPoint = dali.CENTER;
- meshActor.registerAnimatableProperty("uMorphAmount", 0.0);
-
- dali.stage.add( meshActor );
-
- // Animate the mesh actor
- var animation = new dali.Animation(5);
-
- var keyFramesIndex = [{progress:0.0, value: 0.0}, {progress:1.0, value:1.0}];
- var animOptions = { alpha:dali.ALPHA_FUNCTION_SIN, delay:0, duration:5};
-
- animation.animateBetween( meshActor, "uMorphAmount", keyFramesIndex, animOptions );
- animation.setLooping(true);
- animation.play();
-}
-
-function startup()
-{
- daliApp.init();
-}
-
-daliApp.init = function()
-{
- daliApp.createMeshActor();
-}
-
-
-startup();
-
+++ /dev/null
- var window= {
- x:0,
- y:0,
- width:1920,
- height: 1080,
- transparent: false,
- name:'mesh-morph-app'
- };
-
- var viewMode={
- 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
- 'stereo-base': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- };
-
- var options= {
- 'window': window,
- 'view-mode': viewMode,
- }
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var daliApp = {};
-
-daliApp.createMeshActor = function() {
-
- // Create shader
- var vertShader =
- "attribute mediump vec2 aInitPos;\
- attribute mediump vec2 aFinalPos;\
- attribute mediump vec3 aColor;\
- uniform mediump mat4 uMvpMatrix;\
- uniform mediump vec3 uSize;\
- uniform mediump float uDelta;\
- uniform lowp vec4 uColor;\
- varying lowp vec4 vColor;\
- void main()\
- {\
- mediump vec4 vertexPosition = vec4(mix(aInitPos, aFinalPos, uDelta), 0.0, 1.0);\
- vertexPosition.xyz *= uSize;\
- vertexPosition = uMvpMatrix * vertexPosition;\
- gl_Position = vertexPosition;\
- vColor = vec4(aColor, 0.) * uColor;\
- }";
-
- var fragShader =
- "varying lowp vec4 vColor;\
- void main()\
- {\
- gl_FragColor = vColor;\
- }";
-
- var shaderOptions = {
- vertexShader : vertShader,
- fragmentShader : fragShader
- };
-
- var shader = new dali.Shader(shaderOptions);
-
- // Create vertex buffer for initial positions
- var initialPositionVertexFormat = { "aInitPos" : dali.PROPERTY_VECTOR2 };
-
- var initialPositionVertexData = [
- // yellow
- -0.50, -0.50,
- 0.0, 0.0,
- -0.50, 0.50,
-
- // green
- -0.50, -0.50,
- 0.50, -0.50,
- 0.0, 0.0,
-
- // blue
- 0.50, -0.50,
- 0.50, 0.0,
- 0.25, -0.25,
-
- // red
- 0.25, -0.25,
- 0.50, 0.0,
- 0.25, 0.25,
- 0.25, 0.25,
- 0.0, 0.0,
- 0.25, -0.25,
-
- // cyan
- 0.0, 0.0,
- 0.25, 0.25,
- -0.25, 0.25,
-
- // magenta
- -0.25, 0.25,
- 0.25, 0.25,
- 0.0, 0.50,
- 0.0, 0.50,
- -0.50, 0.50,
- -0.25, 0.25,
-
- // orange
- 0.50, 0.0,
- 0.50, 0.50,
- 0.0, 0.50
- ];
-
- var initialPositionVertexDataArray = new Float32Array(initialPositionVertexData.length);
- initialPositionVertexDataArray.set(initialPositionVertexData, 0);
- var initialPositionVertices = new dali.PropertyBuffer(initialPositionVertexFormat);
- initialPositionVertices.setData(initialPositionVertexDataArray, 27);
-
- // Create vertex buffer for final positions
- var finalPositionVertexFormat = { "aFinalPos" : dali.PROPERTY_VECTOR2 };
-
- var bigSide = 0.707106781;
- var side = bigSide * 0.5;
-
- var finalPositionVertexData = [
- // yellow
- side, 0.25, // pA
- side, 0.25 + bigSide, // pB
- side - bigSide, 0.25 + bigSide, // pC
-
- // green
- side - 0.50, -0.25, // pD
- side, 0.25, // pA
- side - 0.50, 0.75, // pE
-
- // blue
- side - 0.50, -0.75, // pJ
- side - 0.50, -0.25, // pD
- side - 0.75, -0.50, // pI
-
- // red
- side - 0.75, -0.50, // pI
- side - 0.50, -0.25, // pD
- side - 0.75, 0.0, // pG
- side - 0.75, 0.0, // pG
- side - 1.0, -0.25, // pH
- side - 0.75, -0.50, // pI
-
- // cyan
- side - 0.75, -0.50, // pI
- side - 1.0, -0.25, // pH
- side - 1.0, -0.75, // pK
-
- // magenta
- side, 0.25 + bigSide - side, // pL
- side * 2.0, 0.25 + bigSide - side * 2.0, // pM
- side * 2.0, 0.25 + bigSide - side, // pN
- side * 2.0, 0.25 + bigSide - side, // pN
- side, 0.25 + bigSide, // pB
- side, 0.25 + bigSide - side, // pL
-
- // orange
- side - 0.50, -0.25, // pD
- side - 0.50, -0.25 + bigSide, // pF2
- - 0.50, -0.25 + side // pF
- ];
-
- var finalPositionVertexDataArray = new Float32Array(finalPositionVertexData.length);
- finalPositionVertexDataArray.set(finalPositionVertexData, 0);
- var finalPositionVertices = new dali.PropertyBuffer(finalPositionVertexFormat);
- finalPositionVertices.setData(finalPositionVertexDataArray, 27);
-
- // Create vertex buffer for color
- var colorVertexFormat = { "aColor" : dali.PROPERTY_VECTOR3 };
-
- var colorVertexData = [
- // yellow
- 1.0, 1.0, 0.0,
- 1.0, 1.0, 0.0,
- 1.0, 1.0, 0.0,
-
- // green
- 0.0, 1.0, 0.0,
- 0.0, 1.0, 0.0,
- 0.0, 1.0, 0.0,
-
- // blue
- 0.0, 0.0, 1.0,
- 0.0, 0.0, 1.0,
- 0.0, 0.0, 1.0,
-
- // red
- 1.0, 0.0, 0.0,
- 1.0, 0.0, 0.0,
- 1.0, 0.0, 0.0,
- 1.0, 0.0, 0.0,
- 1.0, 0.0, 0.0,
- 1.0, 0.0, 0.0,
-
- // cyan
- 0.0, 1.0, 1.0,
- 0.0, 1.0, 1.0,
- 0.0, 1.0, 1.0,
-
- // magenta
- 1.0, 0.0, 1.0,
- 1.0, 0.0, 1.0,
- 1.0, 0.0, 1.0,
- 1.0, 0.0, 1.0,
- 1.0, 0.0, 1.0,
- 1.0, 0.0, 1.0,
-
- // orange
- 1.0, 0.5, 0.0,
- 1.0, 0.5, 0.0,
- 1.0, 0.5, 0.0
- ];
-
- var colorVertexDataArray = new Float32Array(colorVertexData.length);
- colorVertexDataArray.set(colorVertexData, 0);
- var colorVertices = new dali.PropertyBuffer(colorVertexFormat);
- colorVertices.setData(colorVertexDataArray, 27);
-
- // Create geometry
- var geometry = new dali.Geometry();
- geometry.addVertexBuffer( initialPositionVertices );
- geometry.addVertexBuffer( finalPositionVertices );
- geometry.addVertexBuffer( colorVertices );
-
- var renderer = new dali.Renderer(geometry, shader);
- renderer.depthIndex = 0;
-
- // Create mesh actor
- var meshActor = new dali.Actor();
- meshActor.addRenderer( renderer );
- meshActor.size = [400, 400, 0];
- meshActor.parentOrigin = dali.CENTER;
- meshActor.anchorPoint = dali.CENTER;
- meshActor.registerAnimatableProperty("uDelta", 0.0);
-
- dali.stage.add( meshActor );
-
- // Animate the mesh actor
- var animation = new dali.Animation(5);
-
- var animOptions = { alpha:dali.ALPHA_FUNCTION_SIN, delay:0, duration:5};
-
- animation.animateTo( meshActor, "uDelta", 1.0, animOptions );
- animation.setLooping(true);
- animation.play();
-}
-
-function startup()
-{
- daliApp.init();
-}
-
-daliApp.init = function()
-{
- daliApp.createMeshActor();
-}
-
-
-startup();
-
+++ /dev/null
- var window= {
- x:0,
- y:0,
- width:1920,
- height: 1080,
- transparent: false,
- name:'line-mesh-app'
- };
-
- var viewMode={
- 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
- 'stereo-base': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- };
-
- var options= {
- 'window': window,
- 'view-mode': viewMode,
- }
-
-var imageDir = "./images/";
-
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var daliApp = {};
-
-daliApp.createMeshActor = function() {
-
- // Create shader
- var vertShader =
- "attribute mediump vec2 aPosition;\
- attribute highp float aHue;\
- varying mediump vec2 vTexCoord;\
- uniform mediump mat4 uMvpMatrix;\
- uniform mediump vec3 uSize;\
- uniform mediump float uPointSize;\
- uniform lowp vec4 uFadeColor;\
- varying mediump vec3 vVertexColor;\
- varying mediump float vHue;\
- vec3 hsv2rgb(vec3 c)\
- {\
- vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\
- vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\
- return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\
- }\
- void main()\
- {\
- mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\
- vertexPosition.xyz *= (uSize-uPointSize);\
- vertexPosition = uMvpMatrix * vertexPosition;\
- vVertexColor = hsv2rgb( vec3( aHue, 0.7, 1.0 ) );\
- vHue = aHue;\
- gl_PointSize = uPointSize;\
- gl_Position = vertexPosition;\
- }";
-
- var fragShader =
- "varying mediump vec3 vVertexColor;\
- varying mediump float vHue;\
- uniform lowp vec4 uColor;\
- uniform sampler2D sTexture1;\
- uniform sampler2D sTexture2;\
- uniform lowp vec4 uFadeColor;\
- void main()\
- {\
- mediump vec4 texCol1 = texture2D(sTexture1, gl_PointCoord);\
- mediump vec4 texCol2 = texture2D(sTexture2, gl_PointCoord);\
- gl_FragColor = vec4(vVertexColor, 1.0) * ((texCol1*vHue) + (texCol2*(1.0-vHue)));\
- }";
-
- var shaderOptions = {
- vertexShader : vertShader,
- fragmentShader: fragShader
- };
-
- var shader = new dali.Shader(shaderOptions);
-
- var image = new dali.ResourceImage( {url: imageDir + "image-1.jpg"} );
- var textureSet = new dali.TextureSet;
- textureSet.setImage(0, image);
-
- // Create vertex buffer
- var polyhedraVertexFormat ={ "aPosition" : dali.PROPERTY_VECTOR2,
- "aHue" : dali.PROPERTY_FLOAT };
-
- var numSides = 20;
- var angle = 0;
- var sectorAngle = 2.0 * Math.PI / numSides;
-
- var polyhedraVertexData = [];
- for(i=0; i<numSides; ++i)
- {
- var positionX = Math.sin(angle) * 0.5;
- var positionY = Math.cos(angle) * 0.5;
- var hue = angle / ( 2.0 * Math.PI);
-
- polyhedraVertexData[i*3+0] = positionX;
- polyhedraVertexData[i*3+1] = positionY;
- polyhedraVertexData[i*3+2] = hue;
-
- angle += sectorAngle;
- }
-
- var polyhedraVertexDataArray = new Float32Array(polyhedraVertexData.length);
- polyhedraVertexDataArray.set(polyhedraVertexData, 0);
- var polyhedraVertices = new dali.PropertyBuffer(polyhedraVertexFormat);
- polyhedraVertices.setData(polyhedraVertexDataArray, numSides);
-
- // Create geometry
- var geometry = new dali.Geometry();
- geometry.addVertexBuffer( polyhedraVertices );
- geometry.setType( dali.GEOMETRY_POINTS );
-
- var renderer = new dali.Renderer(geometry, shader);
- renderer.setTextures(textureSet);
- renderer.registerAnimatableProperty("uFadeColor", [1.0, 0.0, 1.0, 1.0]); // Green
- renderer.registerAnimatableProperty("uPointSize", 80.0);
- renderer.depthIndex = 0;
-
- // Create mesh actor
- var meshActor = new dali.Actor();
- meshActor.addRenderer( renderer );
- meshActor.size = [400, 400, 0];
- meshActor.parentOrigin = dali.CENTER;
- meshActor.anchorPoint = dali.CENTER;
- meshActor.registerAnimatableProperty("uFadeColor", [0.0, 1.0, 0.0, 1.0]); // Magenta
-
- dali.stage.add( meshActor );
-
- // Animate the mesh actor
- var animation = new dali.Animation(5);
- var animOptions = { alpha:dali.ALPHA_FUNCTION_LINEAR, delay:0, duration:5};
- var rotation = new dali.Rotation(360,0,0,1);
- animation.animateBy( meshActor, "orientation", rotation, animOptions );
- animation.setLooping(true);
- animation.play();
-}
-
-function startup()
-{
- daliApp.init();
-}
-
-daliApp.init = function()
-{
- daliApp.createMeshActor();
-}
-
-
-startup();
-
+++ /dev/null
-{
- "templates":
- {
- "template-item-list":
- {
- "name":"item",
- "type":"Actor",
- "position":[0,0,0],
- "anchorPoint":"TOP_LEFT",
- "parentOrigin":"TOP_LEFT",
- "actors":
- [
- {
- "name":"icon",
- "type":"ImageView",
- "image":
- {
- "visualType" : "IMAGE",
- "url": "{icon_path}"
- },
- "position":[20.0, 0.0, 0.0],
- "size":[70.0, 70.0, 0.0],
- "color":[1.0,1.0,1.0,1.0],
- "anchorPoint":"CENTER_LEFT",
- "parentOrigin":"CENTER_LEFT",
- "actors":
- [
- {
- "name":"title",
- "anchorPoint":"CENTER_LEFT",
- "parentOrigin":"CENTER_RIGHT",
- "type":"TextLabel",
- "position": [30.0, 0.0, 0.0],
- "size":[200.0, 70.0, 0.0],
- "pointSize":30,
- "fontFamily":"HelveticaNeue",
- "fontStyle":"Bold",
- "horizontalAlignment":"BEGIN",
- "verticalAlignment":"CENTER",
- "textColor": [1.0,0.0,1.0,1.0],
- "text":"{title_text}"
- }
- ]
- }
- ]
- },
-
- "template-item-grid":
- {
- "name":"item",
- "type":"Actor",
- "position":[0,0,0],
- "anchorPoint":"TOP_LEFT",
- "parentOrigin":"TOP_LEFT",
- "actors":
- [
- {
- "name":"icon",
- "type":"ImageView",
- "image":
- {
- "visualType" : "IMAGE",
- "url": "{icon_path}"
- },
- "position":[0.0, -10.0, 0.0],
- "size":[70.0, 70.0, 0.0],
- "color":[1.0,1.0,1.0,1.0],
- "anchorPoint":"CENTER",
- "parentOrigin":"CENTER",
- "actors":
- [
- {
- "name":"title",
- "anchorPoint":"TOP_CENTER",
- "parentOrigin":"BOTTOM_CENTER",
- "type":"TextLabel",
- "position": [0.0,10.0,0.0],
- "size":[100.0, 100.0, 0.0],
- "pointSize":22,
- "fontFamily":"HelveticaNeue",
- "fontStyle":"Bold",
- "horizontalAlignment":"CENTER",
- "textColor": [1.0,0.0,1.0,1.0],
- "text":"{title_text}"
- }
- ]
- }
- ]
- }
- }
-}
-
+++ /dev/null
- var window= {
- x:0,
- y:0,
- width:1920,
- height:1080,
- transparent: false,
- name:'scrollview-example'
- };
-
- var viewMode={
- 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
- 'stereoBase': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- };
-
- var options= {
- 'window': window,
- 'viewMode': viewMode,
- }
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var stageSize;
-var scrollView;
-var scrollBar;
-
-var imageDir = "./images/";
-
-var daliApp = {};
-
-daliApp.createScrollView = function() {
-
- // Create a scroll view
- scrollView = new dali.Control("ScrollView");
- stageSize = dali.stage.getSize();
- scrollView.size = [stageSize.x, stageSize.y, 0.0];
- scrollView.parentOrigin = dali.CENTER;
- scrollView.anchorPoint = dali.CENTER;
-
- dali.stage.add( scrollView );
-
- // Add actors to a scroll view with 4 pages
- var pageRows = 1;
- var pageColumns = 3;
- for(var pageRow = 0; pageRow < pageRows; pageRow++)
- {
- for(var pageColumn = 0; pageColumn < pageColumns; pageColumn++)
- {
- var pageActor = new dali.Control();
- pageActor.widthResizePolicy = "FILL_TO_PARENT";
- pageActor.heightResizePolicy = "FILL_TO_PARENT";
- pageActor.parentOrigin = dali.CENTER;
- pageActor.anchorPoint = dali.CENTER;
- pageActor.position = [pageColumn * stageSize.x, pageRow * stageSize.y, 0.0];
- pageActor.name = "pageActor" + pageColumn;
-
- // Add images in a 5x4 grid layout for each page
- var imageRows = 4;
- var imageColumns = 5;
- var margin = 10.0;
- var imageSize = [(stageSize.x / imageColumns) - margin, (stageSize.y / imageRows) - margin, 0.0];
-
- for(var row = 0; row < imageRows; row++)
- {
- for(var column = 0; column < imageColumns;column++)
- {
- var imageView = new dali.Control("ImageView");
- var imageId = (row * imageColumns + column) % 2 + 1;
- imageView.image = imageDir + "image-" + imageId + ".jpg";
- imageView.parentOrigin = dali.CENTER;
- imageView.anchorPoint = dali.CENTER;
- imageView.size = imageSize;
- imageView.position = [ margin * 0.5 + (imageSize[0] + margin) * column - stageSize.x * 0.5 + imageSize[0] * 0.5,
- margin * 0.5 + (imageSize[1] + margin) * row - stageSize.y * 0.5 + imageSize[1] * 0.5,
- 0.0 ];
- pageActor.add(imageView);
- var position = imageView.position;
- }
- }
-
- scrollView.add( pageActor );
- }
- }
-
- // Set scroll view to have 3 pages in X axis and allow page snapping,
- // and also disable scrolling in Y axis.
- var scrollMode = {
- xAxisScrollEnabled : true,
- xAxisSnapToInterval : stageSize.x, // Define the snap points
- xAxisScrollBoundary : stageSize.x * pageColumns, // i.e. Define 3 pages
- yAxisScrollEnabled : false
- }
-
- scrollView.setScrollMode(scrollMode);
-
- // Create a horizontal scroll bar in the bottom of scroll view (optional)
- scrollBar = new dali.Control("ScrollBar");
- scrollBar.parentOrigin = dali.BOTTOM_LEFT;
- scrollBar.anchorPoint = dali.TOP_LEFT;
- scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
- scrollBar.heightResizePolicy = "FILL_TO_PARENT";
- scrollBar.orientation = [0, 0, 270];
- scrollBar.scrollDirection = "Horizontal";
- scrollView.add(scrollBar);
-
- // Connect to the onRelayout signal
- scrollView.on("onRelayout", daliApp.onScrollViewRelayout);
-}
-
-daliApp.onScrollViewRelayout = function( button ) {
-
- // Set the correct scroll bar size after size negotiation of scroll view is done
- scrollBar.size = [0.0, scrollView.getRelayoutSize(dali.DIMENSION_WIDTH), 0.0 ];
-}
-
-function startup()
-{
- daliApp.init();
-}
-
-daliApp.init = function()
-{
- daliApp.createScrollView();
-}
-
-startup();
-
+++ /dev/null
- var window= {
- x:0,
- y:0,
- width:1920,
- height: 1080,
- transparent: false,
- name:'texture-mesh-app'
- };
-
- var viewMode={
- 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
- 'stereo-base': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
- };
-
- var options= {
- 'window': window,
- 'view-mode': viewMode,
- }
-
-var imageDir = "./images/";
-
-
-try {
- // target
- var dali = require('dali')( options );
-}
-catch(err) {
- // desktop
- var dali = require('../build/Release/dali')( options );
-}
-
-var daliApp = {};
-
-daliApp.createMeshActor = function() {
-
- // Create shader
- var vertShader =
- "attribute mediump vec2 aPosition;\
- attribute highp vec2 aTexCoord;\
- varying mediump vec2 vTexCoord;\
- uniform mediump mat4 uMvpMatrix;\
- uniform mediump vec3 uSize;\
- uniform lowp vec4 uFadeColor;\
- void main()\
- {\
- mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\
- vertexPosition.xyz *= uSize;\
- vertexPosition = uMvpMatrix * vertexPosition;\
- vTexCoord = aTexCoord;\
- gl_Position = vertexPosition;\
- }";
-
- var fragShader =
- "varying mediump vec2 vTexCoord;\
- uniform lowp vec4 uColor;\
- uniform sampler2D sTexture;\
- uniform lowp vec4 uFadeColor;\
- void main()\
- {\
- gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * uFadeColor;\
- }";
-
- var shaderOptions = {
- vertexShader : vertShader,
- fragmentShader: fragShader
- };
-
- var shader = new dali.Shader(shaderOptions);
-
- var textureSet = new dali.TextureSet;
- var image = new dali.ResourceImage( {url: imageDir + "image-1.jpg"} );
- textureSet.setImage(0, image);
-
- var textureSet2 = new dali.TextureSet;
- var image2 = new dali.ResourceImage( {url: imageDir + "image-2.jpg"} );
- textureSet2.setImage(0, image2);
-
- // Create vertex buffer
- var texturedQuadVertexFormat ={ "aPosition" : dali.PROPERTY_VECTOR2,
- "aTexCoord" : dali.PROPERTY_VECTOR2 };
-
- var halfQuadSize = 0.5;
- var texturedQuadVertexData = [ -halfQuadSize, -halfQuadSize, 0.0, 0.0,
- halfQuadSize, -halfQuadSize, 1.0, 0.0,
- -halfQuadSize, halfQuadSize, 0.0, 1.0,
- halfQuadSize, halfQuadSize, 1.0, 1.0 ];
-
- var texturedQuadVertexDataArray = new Float32Array(texturedQuadVertexData.length);
- texturedQuadVertexDataArray.set(texturedQuadVertexData, 0);
- var texturedQuadVertices = new dali.PropertyBuffer(texturedQuadVertexFormat);
- texturedQuadVertices.setData(texturedQuadVertexDataArray, 4);
-
- var indexFormat ={ "indices" : dali.PROPERTY_INTEGER };
-
- var indexData = [0, 3, 1, 0, 2, 3];
-
- var indexDataArray = new Uint32Array(indexData.length);
- indexDataArray.set(indexData, 0);
-
- // Create geometry
- var geometry = new dali.Geometry();
- geometry.addVertexBuffer( texturedQuadVertices );
- geometry.setIndexBuffer( indexDataArray, 6 );
-
- var renderer = new dali.Renderer(geometry, shader);
- renderer.setTextures(textureSet);
- renderer.depthIndex = 0;
-
- var meshActor = new dali.Actor();
- meshActor.addRenderer( renderer );
- meshActor.size = [530, 530, 0];
- meshActor.parentOrigin = dali.TOP_CENTER;
- meshActor.anchorPoint = dali.TOP_CENTER;
- meshActor.registerAnimatableProperty("uFadeColor", [1.0, 0.0, 1.0, 1.0]);
-
- dali.stage.add( meshActor );
-
- var renderer2 = new dali.Renderer(geometry, shader);
- renderer2.setTextures(textureSet2);
- renderer2.depthIndex = 0;
-
- var meshActor2 = new dali.Actor();
- meshActor2.addRenderer( renderer2 );
- meshActor2.size = [530, 530, 0];
- meshActor2.parentOrigin = dali.BOTTOM_CENTER;
- meshActor2.anchorPoint = dali.BOTTOM_CENTER;
- meshActor2.registerAnimatableProperty("uFadeColor", [0.0, 0.0, 1.0, 1.0]);
-
- dali.stage.add( meshActor2 );
-
- // Animate the mesh actors
- var animation = new dali.Animation(5);
-
- var keyFramesIndex = [{progress:0.0, value: [0.0, 0.0, 0.0, 0.0]}, {progress:1.0, value:[0.0, 1.0, 0.0, 1.0]}];
- var animOptions = { alpha:dali.ALPHA_FUNCTION_SIN, delay:0, duration:5};
-
- var keyFramesIndex2 = [{progress:0.0, value: [0.0, 0.0, 0.0, 0.0]}, {progress:1.0, value:[1.0, 0.0, 1.0, 1.0]}];
- var animOptions2 = { alpha:dali.ALPHA_FUNCTION_SIN, delay:0, duration:5};
-
- animation.animateBetween( meshActor, "uFadeColor", keyFramesIndex, animOptions );
- animation.animateBetween( meshActor2, "uFadeColor", keyFramesIndex2, animOptions2 );
- animation.setLooping(true);
- animation.play();
-}
-
-function startup()
-{
- daliApp.init();
-}
-
-daliApp.init = function()
-{
- daliApp.createMeshActor();
-}
-
-
-startup();
-
+++ /dev/null
-{
- "templates":
- {
- "template-item-list":
- {
- "name":"item",
- "type":"Actor",
- "position":[0,0,0],
- "anchorPoint":"TOP_LEFT",
- "parentOrigin":"TOP_LEFT",
- "actors":
- [
- {
- "name":"icon",
- "type":"ImageView",
- "image":
- {
- "visualType" : "IMAGE",
- "url": "{icon_path}"
- },
- "position":[20.0, 0.0, 0.0],
- "size":[70.0, 70.0, 0.0],
- "color":[1.0,1.0,1.0,1.0],
- "anchorPoint":"CENTER_LEFT",
- "parentOrigin":"CENTER_LEFT",
- "actors":
- [
- {
- "name":"title",
- "anchorPoint":"CENTER_LEFT",
- "parentOrigin":"CENTER_RIGHT",
- "type":"TextLabel",
- "position": [30.0, 0.0, 0.0],
- "size":[200.0, 70.0, 0.0],
- "pointSize":30,
- "fontFamily":"HelveticaNeue",
- "fontStyle":"Bold",
- "horizontalAlignment":"BEGIN",
- "verticalAlignment":"CENTER",
- "textColor": [1.0,0.0,1.0,1.0],
- "text":"{title_text}"
- }
- ]
- }
- ]
- },
-
- "template-item-grid":
- {
- "name":"item",
- "type":"Actor",
- "position":[0,0,0],
- "anchorPoint":"TOP_LEFT",
- "parentOrigin":"TOP_LEFT",
- "actors":
- [
- {
- "name":"icon",
- "type":"ImageView",
- "image":
- {
- "visualType" : "IMAGE",
- "url": "{icon_path}"
- },
- "position":[0.0, -10.0, 0.0],
- "size":[70.0, 70.0, 0.0],
- "color":[1.0,1.0,1.0,1.0],
- "anchorPoint":"CENTER",
- "parentOrigin":"CENTER",
- "actors":
- [
- {
- "name":"title",
- "anchorPoint":"TOP_CENTER",
- "parentOrigin":"BOTTOM_CENTER",
- "type":"TextLabel",
- "position": [0.0,10.0,0.0],
- "size":[100.0, 100.0, 0.0],
- "pointSize":22,
- "fontFamily":"HelveticaNeue",
- "fontStyle":"Bold",
- "horizontalAlignment":"CENTER",
- "textColor": [1.0,0.0,1.0,1.0],
- "text":"{title_text}"
- }
- ]
- }
- ]
- }
- }
-}
-
+++ /dev/null
-/*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-// HEADER
-#include "javascript-application-options.h"
-
-// EXTERNAL INCLUDES
-#include <cstring>
-
-// INTERNAL INCLUDES
-#include <v8-utils.h>
-
-namespace DaliNodeAddon
-{
-
-namespace
-{
-
-struct StereoInfo
-{
- const char* const name;
- Dali::ViewMode mode;
-};
-StereoInfo StereoModeTable[] = {
- { "mono", Dali::MONO},
- { "stereoHorizontal", Dali::STEREO_HORIZONTAL },
- { "stereoVertical", Dali::STEREO_VERTICAL },
-};
-
-const unsigned int numberViewModes = sizeof( StereoModeTable ) / sizeof( StereoModeTable[0] );
-
-bool GetViewMode( const std::string& modeString, Dali::ViewMode& mode )
-{
- for( unsigned int i = 0; i < numberViewModes; ++i )
- {
- const StereoInfo& info (StereoModeTable[i]);
-
- if( strcmp ( modeString.c_str() , info.name ) == 0 )
- {
- mode = info.mode;
- return true;
- }
- }
- // mode not found
- mode = Dali::MONO;
- return false;
-}
-
-
-// Note we can't parse the enviroment options for window width / height because
-// adaptor which holds the environment option class has not been created
-// and we can't create it, until we have a window
-bool ParseWindowOptions( v8::Isolate* isolate, const v8::Local<v8::Object>& obj, WindowOptions& window )
-{
- v8::HandleScope scope(isolate);
-
- v8::Local<v8::Value> xValue = obj->Get( v8::String::NewFromUtf8( isolate, "x" ) );
- v8::Local<v8::Value> yValue = obj->Get( v8::String::NewFromUtf8( isolate, "y" ) );
- v8::Local<v8::Value> widthValue = obj->Get( v8::String::NewFromUtf8( isolate, "width" ) );
- v8::Local<v8::Value> heightValue = obj->Get( v8::String::NewFromUtf8( isolate, "height" ) );
- v8::Local<v8::Value> nameValue = obj->Get( v8::String::NewFromUtf8( isolate, "name" ) );
- v8::Local<v8::Value> transparencyValue = obj->Get( v8::String::NewFromUtf8( isolate, "transparent" ) );
-
- // if x,y are optional
- if( xValue->IsUint32() )
- {
- window.positionSize.x = xValue->ToUint32()->Value();
- }
- if( yValue->IsUint32() )
- {
- window.positionSize.y = yValue->ToUint32()->Value();
- }
-
- // width and height are optional but will only accept them if they are both set
- if( widthValue->IsUint32() && heightValue->IsUint32() )
- {
- window.positionSize.width = widthValue->ToUint32()->Value();
- window.positionSize.height = heightValue->ToUint32()->Value();
- }
-
- // get the window name
- if( nameValue->IsString() )
- {
- window.name = Dali::V8Plugin::V8Utils::v8StringToStdString( nameValue );
- }
- else
- {
- window.name ="DALi application";
- }
-
- if( transparencyValue->IsBoolean() )
- {
- window.transparent = transparencyValue->ToBoolean()->Value();
- }
- return true;
-}
-
-bool ParseStereoScopicOptions( v8::Isolate* isolate, const v8::Local<v8::Object>& stereoObject, StereoScopicOptions& options )
-{
- v8::HandleScope scope(isolate);
-
- v8::Local<v8::Value> modeValue = stereoObject->Get( v8::String::NewFromUtf8( isolate, "stereoscopicMode" ) );
- v8::Local<v8::Value> stereoBaseValue = stereoObject->Get( v8::String::NewFromUtf8( isolate, "stereoBase" ) );
-
- if( !modeValue->IsString() )
- {
- return true;
- }
-
- std::string mode = Dali::V8Plugin::V8Utils::v8StringToStdString( modeValue );
- bool ok = GetViewMode( mode, options.viewMode);
- if( !ok )
- {
- return false;
- }
- if( stereoBaseValue->IsNumber() )
- {
- options.stereoBase = stereoBaseValue->ToNumber()->Value();
- }
-
- return true;
-}
-
-} // unnamed namespace
-
-bool GetApplicationOptions(const v8::FunctionCallbackInfo<v8::Value>& args, ApplicationOptions& options )
-{
- v8::Isolate* isolate = args.GetIsolate();
- v8::HandleScope scope(isolate);
- bool ok( false );
-
- if( !args[ 0 ]->IsObject() )
- {
- return false;
- }
-
- v8::Local<v8::Object> object = args[ 0 ]->ToObject();
-
- // get the window settings
- v8::Local<v8::Value> windowValue= object->Get( v8::String::NewFromUtf8( isolate, "window" ) );
- if( windowValue->IsObject() )
- {
- ok = ParseWindowOptions( isolate, windowValue->ToObject(), options.window );
- if( !ok )
- {
- return false; // missing window size
- }
- }
-
- // get the stereoscopic settings
- v8::Local<v8::Value> stereoValue= object->Get( v8::String::NewFromUtf8( isolate, "viewMode" ) );
- if( stereoValue->IsObject() )
- {
- ok = ParseStereoScopicOptions( isolate, stereoValue->ToObject(), options.stereo );
- if( !ok )
- &n
projects / platform / core / uifw / dali-toolkit.git / commitdiff
