[dali_1.1.39] Merge branch 'devel/master'

Change-Id: Ib6b264ae8ac7cb4db6f03cc78d2300cee2d2ee3b

[dali_1.1.39] Merge branch 'devel/master'
Change-Id: Ib6b264ae8ac7cb4db6f03cc78d2300cee2d2ee3b
Adeel Kazmi
2 parents 01842cc0 f4122f44
Showing 13 changed files with 485 additions and 46 deletions
build/tizen/CMakeLists.txt
com.samsung.dali-demo.xml
examples/image-view/image-view-example.cpp
examples/video-view/video-view-example.cpp
packaging/com.samsung.dali-demo.spec
resources/images/Backward.png
resources/images/Forward.png
resources/images/Pause.png
resources/scripts/animation.json
resources/scripts/slider-test-style.json
resources/scripts/slider.json
resources/scripts/table-view.json
resources/videos/big_buck_bunny.mp4
@@ -24,6 +24,7 @@ ENDIF()
 SET(RESOURCE_DIR ${ROOT_SRC_DIR}/resources)
 SET(LOCAL_IMAGES_DIR ${RESOURCE_DIR}/images)
+SET(LOCAL_VIDEOS_DIR ${RESOURCE_DIR}/videos)
 SET(LOCAL_MODELS_DIR ${RESOURCE_DIR}/models)
 SET(LOCAL_SCRIPTS_DIR ${RESOURCE_DIR}/scripts)
 IF(NOT DEFINED LOCAL_STYLE_DIR)
@@ -31,6 +32,7 @@ IF(NOT DEFINED LOCAL_STYLE_DIR)
 ENDIF()
 SET(IMAGES_DIR ${APP_DATA_DIR}/images/)
+SET(VIDEOS_DIR ${APP_DATA_DIR}/videos/)
 SET(MODELS_DIR ${APP_DATA_DIR}/models/)
 SET(SCRIPTS_DIR ${APP_DATA_DIR}/scripts/)
 SET(STYLE_DIR ${APP_DATA_DIR}/style/)
@@ -40,6 +42,7 @@ IF(NOT DEFINED LOCALE_DIR)
 ENDIF()
 SET(DEMO_IMAGE_DIR \\"${IMAGES_DIR}\\")
+SET(DEMO_VIDEO_DIR \\"${VIDEOS_DIR}\\")
 SET(DEMO_MODEL_DIR \\"${MODELS_DIR}\\")
 SET(DEMO_SCRIPT_DIR \\"${SCRIPTS_DIR}\\")
 SET(DEMO_STYLE_DIR \\"${STYLE_DIR}\\")
@@ -63,6 +66,11 @@ FOREACH(flag ${LOCAL_IMAGES_LIST})
         INSTALL(FILES ${LOCAL_IMAGES_DIR}/${flag} DESTINATION ${IMAGES_DIR})
 ENDFOREACH(flag)
+FILE(GLOB LOCAL_VIDEOS_LIST RELATIVE "${LOCAL_VIDEOS_DIR}" "${LOCAL_VIDEOS_DIR}/*")
+FOREACH(flag ${LOCAL_VIDEOS_LIST})
+        INSTALL(FILES ${LOCAL_VIDEOS_DIR}/${flag} DESTINATION ${VIDEOS_DIR})
+ENDFOREACH(flag)
+
 FILE(GLOB LOCAL_MODELS_LIST RELATIVE "${LOCAL_MODELS_DIR}" "${LOCAL_MODELS_DIR}/*")
 FOREACH(flag ${LOCAL_MODELS_LIST})
         INSTALL(FILES ${LOCAL_MODELS_DIR}/${flag} DESTINATION ${MODELS_DIR})
@@ -80,7 +88,7 @@ INSTALL(FILES ${LOCAL_STYLE_DIR}/demo-theme.json DESTINATION ${STYLE_DIR})
 SET(PKG_LIST dali-core
              dali-adaptor
-             dali-toolkit)
+             dali-toolkit )
 INCLUDE(FindPkgConfig)
 pkg_check_modules(REQUIRED_PKGS REQUIRED ${PKG_LIST})
@@ -89,7 +97,7 @@ FOREACH(flag ${REQUIRED_PKGS_CFLAGS})
         SET(REQUIRED_CFLAGS "${REQUIRED_CFLAGS} ${flag}")
 ENDFOREACH(flag)
-SET(DALI_DEMO_CFLAGS "-DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
+SET(DALI_DEMO_CFLAGS "-DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
 SET(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} ${REQUIRED_CFLAGS} ${DALI_DEMO_CFLAGS} -Werror -Wall -fPIE")
 SET(CMAKE_CXX_FLAGS "${CMAKE_C_FLAGS}")
@@ -157,4 +157,7 @@
 	<ui-application appid="text-editor.example" exec="/usr/apps/com.samsung.dali-demo/bin/text-editor.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Text Editor</label>
 	</ui-application>
+	<ui-application appid="video-view.example" exec="/usr/apps/com.samsung.dali-demo/bin/video-view.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Video View</label>
+	</ui-application>
 </manifest>
@@ -18,7 +18,6 @@
 #include "shared/view.h"
 #include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.h>
-#include <dali-toolkit/devel-api/controls/slider/slider.h>
 using namespace Dali;
+/*
+ * 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.
+ *
+ */
+
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+using namespace Dali;
+using namespace Toolkit;
+
+namespace
+{
+  const int SEEK_POS( 5000 );
+  const int INIT_WIDTH( 600 );
+  const int INIT_HEIGHT( 400 );
+  const int BUTTON_SIZE( 80 );
+
+  const char* const PLAY_FILE = DEMO_VIDEO_DIR "big_buck_bunny.mp4";
+  const char* const PLAY_IMAGE = DEMO_IMAGE_DIR "icon-play.png";
+  const char* const PAUSE_IMAGE = DEMO_IMAGE_DIR "Pause.png";
+  const char* const STOP_IMAGE = DEMO_IMAGE_DIR "icon-stop.png";
+  const char* const RESET_IMAGE = DEMO_IMAGE_DIR "icon-reset.png";
+  const char* const FORWARD_IMAGE = DEMO_IMAGE_DIR "Forward.png";
+  const char* const BACKWARD_IMAGE = DEMO_IMAGE_DIR "Backward.png";
+
+const char* DEFAULT_FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform lowp vec4 uColor;\n
+  \n
+  void main()\n
+  {\n
+    gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor;\n
+  }\n
+);
+
+const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+  precision mediump float;
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform lowp vec4 uColor;\n
+  \n
+  void main()\n
+  {\n
+    vec2 st = vTexCoord.st;\n
+    vec3 irgb = texture2D( sTexture, st ).rgb;\n
+    vec3 negative = vec3( 1., 1., 1. ) - irgb;\n
+    gl_FragColor = vec4( mix( irgb, negative, 1.0), 1. ) * uColor;\n
+  }\n
+);
+
+}  // namespace
+
+class VideoViewController: public ConnectionTracker
+{
+ public:
+
+  VideoViewController( Application& application )
+    : mApplication( application ),
+      mIsPlay( false ),
+      mIsStop( false ),
+      mIsFullScreen( false ),
+      mSetCustomShader( false ),
+      mScale( 1.f )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &VideoViewController::Create );
+  }
+
+  ~VideoViewController()
+  {
+    mVideoView.Stop();
+  }
+
+  void Create( Application& application )
+  {
+    mStageSize = Stage::GetCurrent().GetSize();
+
+    mVideoView = Toolkit::VideoView::New();
+    Stage::GetCurrent().Add( mVideoView );
+    mVideoView.SetParentOrigin( ParentOrigin::CENTER );
+    mVideoView.SetAnchorPoint( AnchorPoint::CENTER );
+    mVideoView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    mVideoView.SetSize( INIT_WIDTH, INIT_HEIGHT );
+    mVideoView.SetProperty( VideoView::Property::LOOPING, true );
+    mVideoView.SetProperty( VideoView::Property::MUTED, false );
+    mVideoView.SetProperty( VideoView::Property::VIDEO, PLAY_FILE );
+
+    mMenu = Layer::New();
+    mMenu.SetParentOrigin( ParentOrigin::BOTTOM_LEFT );
+    mMenu.SetAnchorPoint( AnchorPoint::BOTTOM_LEFT );
+    mMenu.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mMenu.SetSize( INIT_WIDTH, 120 );
+    mVideoView.Add( mMenu );
+
+    mPlayButton = PushButton::New();
+    mPlayButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mPlayButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mPlayButton.SetName( "Play" );
+    mPlayButton.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mPlayButton.SetSize( BUTTON_SIZE, BUTTON_SIZE );
+    mPlayButton.SetPosition( 40, 10 );
+    mPlayButton.ClickedSignal().Connect( this, &VideoViewController::OnButtonClicked );
+
+    mPauseButton = PushButton::New();
+    mPauseButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mPauseButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mPauseButton.SetName( "Pause" );
+    mPauseButton.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mPauseButton.SetSize( BUTTON_SIZE, BUTTON_SIZE );
+    mPauseButton.SetPosition( 40, 10 );
+    mPauseButton.ClickedSignal().Connect( this, &VideoViewController::OnButtonClicked );
+
+    mStopButton = PushButton::New();
+    mStopButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mStopButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mStopButton.SetName( "Stop" );
+    mStopButton.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mStopButton.SetSize( BUTTON_SIZE, BUTTON_SIZE );
+    mStopButton.SetPosition( 140, 10 );
+    mStopButton.ClickedSignal().Connect( this, &VideoViewController::OnButtonClicked );
+
+    mResetButton = PushButton::New();
+    mResetButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mResetButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mResetButton.SetName( "Reset" );
+    mResetButton.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mResetButton.SetSize( BUTTON_SIZE, BUTTON_SIZE );
+    mResetButton.SetPosition( 140, 10 );
+    mResetButton.ClickedSignal().Connect( this, &VideoViewController::OnButtonClicked );
+
+    mBackwardButton = PushButton::New();
+    mBackwardButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mBackwardButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mBackwardButton.SetName( "Backward" );
+    mBackwardButton.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mBackwardButton.SetSize( BUTTON_SIZE, BUTTON_SIZE );
+    mBackwardButton.SetPosition( 240, 10 );
+    mBackwardButton.ClickedSignal().Connect( this, &VideoViewController::OnButtonClicked );
+
+    mForwardButton = PushButton::New();
+    mForwardButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mForwardButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mForwardButton.SetName( "Forward" );
+    mForwardButton.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+    mForwardButton.SetSize( BUTTON_SIZE, BUTTON_SIZE );
+    mForwardButton.SetPosition( 340, 10 );
+    mForwardButton.ClickedSignal().Connect( this, &VideoViewController::OnButtonClicked );
+
+    mMenu.Add( mPlayButton );
+    mMenu.Add( mPauseButton );
+    mMenu.Add( mStopButton );
+    mMenu.Add( mResetButton );
+    mMenu.Add( mBackwardButton );
+    mMenu.Add( mForwardButton );
+
+    mPauseButton.SetVisible( false );
+    mPauseButton.SetDisabled( true );
+    mPlayButton.SetVisible( true );
+    mPlayButton.SetDisabled( false );
+    mStopButton.SetVisible( true );
+    mStopButton.SetDisabled( false );
+    mResetButton.SetVisible( false );
+    mResetButton.SetDisabled( true );
+
+    mPlayButton.SetUnselectedImage( PLAY_IMAGE );
+    mPlayButton.SetSelectedImage( PLAY_IMAGE );
+    mPauseButton.SetUnselectedImage( PAUSE_IMAGE );
+    mPauseButton.SetSelectedImage( PAUSE_IMAGE );
+
+    mStopButton.SetUnselectedImage( STOP_IMAGE );
+    mStopButton.SetSelectedImage( STOP_IMAGE );
+    mResetButton.SetUnselectedImage( RESET_IMAGE );
+    mResetButton.SetSelectedImage( RESET_IMAGE );
+
+    mBackwardButton.SetUnselectedImage( BACKWARD_IMAGE );
+    mBackwardButton.SetSelectedImage( BACKWARD_IMAGE );
+    mForwardButton.SetUnselectedImage( FORWARD_IMAGE );
+    mForwardButton.SetSelectedImage( FORWARD_IMAGE );
+
+    mPanGestureDetector = PanGestureDetector::New();
+    mPanGestureDetector.Attach( mVideoView );
+    mPanGestureDetector.DetectedSignal().Connect( this, &VideoViewController::OnPan );
+
+    mPinchGestureDetector = PinchGestureDetector::New();
+    mPinchGestureDetector.Attach( mVideoView );
+    mPinchGestureDetector.DetectedSignal().Connect( this, &VideoViewController::OnPinch );
+
+    mTapGestureDetector = TapGestureDetector::New();
+    mTapGestureDetector.Attach( mVideoView );
+    mTapGestureDetector.DetectedSignal().Connect( this, &VideoViewController::OnTap );
+
+    mRotationAnimation = Animation::New(2.f);
+    mRotationAnimation.AnimateBy( Property(mVideoView, Actor::Property::ORIENTATION), Quaternion(Degree(0.f), Degree(360.f), Degree(0.f)) );
+    mRotationAnimation.SetLooping(false);
+
+    Stage::GetCurrent().KeyEventSignal().Connect( this, &VideoViewController::OnKeyEvent );
+
+    Property::Map customShader;
+    customShader.Insert( "fragmentShader", FRAGMENT_SHADER );
+    mCustomShader.Insert( "rendererType", "image" );
+    mCustomShader.Insert( "shader", customShader );
+
+    Property::Map defaultShader;
+    customShader.Insert( "fragmentShader", DEFAULT_FRAGMENT_SHADER );
+    mDefaultShader.Insert( "rendererType", "image" );
+    mDefaultShader.Insert( "shader", defaultShader );
+
+    mWindowSurfaceTarget.Insert( "RENDERING_TARGET", "windowSurfaceTarget" );
+    mNativeImageTarget.Insert( "RENDERING_TARGET", "nativeImageTarget" );
+
+    mVideoView.FinishedSignal().Connect( this, &VideoViewController::OnFinished );
+  }
+
+  bool OnButtonClicked( Button button )
+  {
+
+    if( mPauseButton.GetId() == button.GetId())
+    {
+       if( mIsPlay )
+      {
+        mPauseButton.SetVisible( false );
+        mPauseButton.SetDisabled( true );
+        mPlayButton.SetVisible( true );
+        mPlayButton.SetDisabled( false );
+
+        mIsPlay = false;
+        mVideoView.Pause();
+      }
+    }
+    else if( mPlayButton.GetId() == button.GetId())
+    {
+      if( mIsStop )
+      {
+        return false;
+      }
+
+      mPauseButton.SetVisible( true );
+      mPauseButton.SetDisabled( false );
+      mPlayButton.SetVisible( false );
+      mPlayButton.SetDisabled( true );
+
+      mIsPlay = true;
+      mVideoView.Play();
+    }
+    else if( mResetButton.GetId() == button.GetId())
+    {
+      if( mIsStop )
+      {
+        mPauseButton.SetVisible( true );
+        mPauseButton.SetDisabled( false );
+        mPlayButton.SetVisible( false );
+        mPlayButton.SetDisabled( true );
+        mResetButton.SetVisible( false );
+        mResetButton.SetDisabled( true );
+        mStopButton.SetVisible( true );
+        mStopButton.SetDisabled( false );
+
+        mIsStop = false;
+        mIsPlay = true;
+        mVideoView.SetProperty( VideoView::Property::VIDEO, PLAY_FILE );
+        mVideoView.Play();
+      }
+    }
+    else if( mStopButton.GetId() == button.GetId())
+    {
+      mPauseButton.SetVisible( false );
+      mPauseButton.SetDisabled( true );
+      mPlayButton.SetVisible( true );
+      mPlayButton.SetDisabled( false );
+      mResetButton.SetVisible( true );
+      mResetButton.SetDisabled( false );
+      mStopButton.SetVisible( false );
+      mStopButton.SetDisabled( true );
+
+      mIsStop = true;
+      mVideoView.Stop();
+    }
+    else if( mBackwardButton.GetId() == button.GetId())
+    {
+      mVideoView.Backward( SEEK_POS );
+    }
+    else if( mForwardButton.GetId() == button.GetId())
+    {
+      mVideoView.Forward( SEEK_POS );
+    }
+
+    return true;
+  }
+
+  void OnFinished( VideoView& view )
+  {
+    if( !mIsFullScreen )
+    {
+      mRotationAnimation.Play();
+      mIsStop = true;
+    }
+  }
+
+  void OnPan( Actor actor, const PanGesture& gesture )
+  {
+    if( !mIsFullScreen && gesture.state == Gesture::Continuing )
+    {
+      mVideoView.TranslateBy( Vector3( gesture.displacement ) );
+    }
+  }
+
+  void OnPinch( Actor actor, const PinchGesture& gesture )
+  {
+    if( gesture.state == Gesture::Started )
+    {
+      mPinchStartScale = mScale;
+    }
+
+    if( gesture.state == Gesture::Finished )
+    {
+      mScale = mPinchStartScale * gesture.scale;
+      if( mScale > 1.f )
+      {
+        mVideoView.SetSize( mStageSize.x, mStageSize.y );
+        mVideoView.SetProperty( VideoView::Property::VIDEO, mWindowSurfaceTarget );
+        mMenu.SetSize( mStageSize.x, 120 );
+        mIsFullScreen = true;
+      }
+      else
+      {
+        mVideoView.SetSize( INIT_WIDTH, INIT_HEIGHT );
+        mVideoView.SetProperty( VideoView::Property::VIDEO, mNativeImageTarget );
+        mMenu.SetSize( INIT_WIDTH, 120 );
+        mIsFullScreen = false;
+      }
+    }
+  }
+
+  void OnTap( Actor actor, const TapGesture& tapGesture )
+  {
+    if( !mIsFullScreen )
+    {
+      mRotationAnimation.Play();
+
+      if( mSetCustomShader )
+      {
+        mSetCustomShader = false;
+        mVideoView.SetProperty( VideoView::Property::VIDEO, mDefaultShader );
+      }
+      else
+      {
+        mSetCustomShader = true;
+        mVideoView.SetProperty( VideoView::Property::VIDEO, mCustomShader );
+      }
+    }
+  }
+
+private:
+
+  /**
+   * Main key event handler
+   */
+  void OnKeyEvent(const KeyEvent& event)
+  {
+    if(event.state == KeyEvent::Down)
+    {
+      if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+private:
+  Application&  mApplication;
+  VideoView mVideoView;
+  Layer mMenu;
+  Vector2 mStageSize;
+
+  bool mIsPlay;
+  bool mIsStop;
+  bool mIsFullScreen;
+  bool mSetCustomShader;
+
+  PushButton mPlayButton;
+  PushButton mPauseButton;
+  PushButton mStopButton;
+  PushButton mResetButton;
+  PushButton mBackwardButton;
+  PushButton mForwardButton;
+
+  PanGestureDetector mPanGestureDetector;
+  PinchGestureDetector mPinchGestureDetector;
+  TapGestureDetector mTapGestureDetector;
+  float mScale;
+  float mPinchStartScale;
+
+  Animation mRotationAnimation;
+  Property::Map mCustomShader;
+  Property::Map mDefaultShader;
+  Property::Map mWindowSurfaceTarget;
+  Property::Map mNativeImageTarget;
+};
+
+void RunTest( Application& application )
+{
+  VideoViewController test( application );
+
+  application.MainLoop();
+}
+
+// Entry point for Linux & Tizen applications
+//
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
+
+  RunTest( application );
+
+  return 0;
+}
@@ -2,7 +2,7 @@
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.1.38
+Version:    1.1.39
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0
@@ -133,6 +133,7 @@ exit 0
 %{dali_app_exe_dir}/*.example
 %{dali_app_exe_dir}/dali-builder
 %{dali_app_ro_dir}/images/*
+%{dali_app_ro_dir}/videos/*
 %{dali_app_ro_dir}/models/*
 %{dali_app_ro_dir}/scripts/*
 %{dali_app_ro_dir}/style/*
@@ -92,7 +92,7 @@
     "size": [200, 200, 1],
     "orientation": [0, 0, 30],
     "signals": [{
-      "name": "touched",
+      "name": "touch",
       "action": "play",
       "animation": "animate"
     }]
@@ -106,7 +106,7 @@
     "position": [-150, -50, 0],
     "text": "or me",
     "signals": [{
-      "name": "touched",
+      "name": "touch",
       "action": "play",
       "animation": "pathAnimation"
     }]
@@ -119,14 +119,12 @@
   }, {
     "name": "image",
     "type": "ImageView",
-    "image": {
-      "url": "{DEMO_IMAGE_DIR}gallery-large-21.jpg"
-    },
+    "image": "{DEMO_IMAGE_DIR}gallery-large-21.jpg",
     "relayoutEnabled": false,
     "position": [0, 200, 0],
     "size": [200, 200, 1],
     "signals": [{
-      "name": "touched",
+      "name": "touch",
       "action": "play",
       "animation": "rotate"
     }],
@@ -32,8 +32,7 @@
       "showPopup": true,
       "showValue": true,
       "valuePrecision": 2,
-      "value": 0.0,
-      "popupTextColor": [0.0, 1.0, 1.0, 1.0]
+      "value": 0.0
     }
   }
 }
@@ -73,10 +73,12 @@
     "showValue": true,
     "valuePrecision": 0,
     "value": 50.0,
-    "popupTextColor": [1, 0, 0, 1],
-    "hitRegion": [0, 48],
-    "backingRegion": [0, 10],
-    "handleRegion": [48, 48]
+    "trackVisual": {
+      "size": [0, 10]
+    },
+    "handleVisual": {
+      "size": [48, 48]
+    }
   }, {
     "type": "Slider",
     "parentOrigin": "TOP_CENTER",
@@ -88,12 +90,17 @@
     "showValue": true,
     "valuePrescision": 0,
     "value": 100.0,
-    "hitRegion": [0, 48],
-    "backingRegion": [0, 30],
-    "handleRegion": [48, 48],
-    "backingImageName": "{DEMO_IMAGE_DIR}button-up-14.9.png",
-    "handleImageName": "{DEMO_IMAGE_DIR}blocks-ball.png",
-    "progressImageName": "{DEMO_IMAGE_DIR}button-down.9.png"
+    "trackVisual": {
+      "url": "{DEMO_IMAGE_DIR}button-up-14.9.png",
+      "size": [0, 30]
+    },
+    "handleVisual": {
+      "url": "{DEMO_IMAGE_DIR}blocks-ball.png",
+      "size": [48, 48]
+    },
+    "progressVisual": {
+      "url": "{DEMO_IMAGE_DIR}button-down.9.png"
+    }
   }, {
     "type": "Slider",
     "parentOrigin": "TOP_CENTER",
@@ -105,10 +112,12 @@
     "showValue": true,
     "valuePrecision": 0,
     "value": 50.0,
-    "hitRegion": [0, 48],
-    "backingRegion": [0, 10],
-    "handleRegion": [48, 48],
-    "enabled": false
+    "trackVisual": {
+      "size": [0, 10]
+    },
+    "handleVisual": {
+      "size": [48, 48]
+    }
   }, {
     "type": "Slider",
     "parentOrigin": "TOP_CENTER",
@@ -120,10 +129,12 @@
     "showValue": true,
     "valuePrecision": 0,
     "value": 50.0,
-    "hitRegion": [0, 48],
-    "backingRegion": [0, 10],
-    "handleRegion": [48, 48],
-    "enabled": false,
-    "disableColor": [1, 0, 0, 1]
+    "trackVisual": {
+      "size": [0, 10]
+    },
+    "handleVisual": {
+      "size": [48, 48]
+    },
+    "disabledColor": [1, 0, 0, 1]
   }]
 }
@@ -65,9 +65,7 @@
           "name":"gallery1",
           "type":"ImageView",
           "heightResizePolicy":"FILL_TO_PARENT",
-          "image": {
-            "url": "{DEMO_IMAGE_DIR}gallery-small-1.jpg"
-          },
+          "image": "{DEMO_IMAGE_DIR}gallery-small-1.jpg",
           "properties": { // properties registered dynamically
             "cellIndex": [0,0], // property to specify the top-left cell this child occupies
             "rowSpan":4, // property to specify how many rows this child occupies, if not set, default value is 1
@@ -77,9 +75,7 @@
           "name":"gallery2",
           "type":"ImageView",
           "heightResizePolicy":"FILL_TO_PARENT",
-          "image": {
-            "url": "{DEMO_IMAGE_DIR}gallery-small-2.jpg"
-          },
+          "image": "{DEMO_IMAGE_DIR}gallery-small-2.jpg",
           "properties": { // properties registered dynamically
             "cellIndex": [0,1],
             "cellHorizontalAlignment": "right" // property to specify how to align horizontally inside the cells, if not set, default value is 'left'
@@ -87,9 +83,7 @@
         },{
           "name":"gallery3",
           "type":"ImageView",
-          "image": {
-            "url": "{DEMO_IMAGE_DIR}gallery-small-3.jpg"
-          },
+          "image": "{DEMO_IMAGE_DIR}gallery-small-3.jpg",
           "properties": {
             "cellIndex":[1,1],
             "rowSpan":3,
@@ -100,9 +94,7 @@
           "name":"gallery4",
           "type":"ImageView",
           "widthResizePolicy":"FILL_TO_PARENT",
-          "image": {
-            "url": "{DEMO_IMAGE_DIR}gallery-small-4.jpg"
-          },
+          "image": "{DEMO_IMAGE_DIR}gallery-small-4.jpg",
           "properties": {
             "cellIndex":[2,2]
           }
@@ -111,9 +103,7 @@
           "type":"ImageView",
           "widthResizePolicy":"FILL_TO_PARENT",
           "heightResizePolicy":"FILL_TO_PARENT",
-          "image": {
-            "url": "{DEMO_IMAGE_DIR}gallery-small-5.jpg"
-          },
+          "image": "{DEMO_IMAGE_DIR}gallery-small-5.jpg",
           "properties": {
             "cellIndex":[3,2],
             "columnSpan": 2