From: David Steele Date: Mon, 16 May 2016 13:00:45 +0000 (+0100) Subject: [3.0] Added a simple application for testing Styling X-Git-Tag: accepted/tizen/common/20160830.150437~3 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-demo.git;a=commitdiff_plain;h=08849cfa427e4aad392b8f982037ae03e6a1c758 [3.0] Added a simple application for testing Styling Added a simple application that has examples of different button types, sliders and popups, that can all be themed. Change-Id: I6d74357b79def0c8d0f7195adf0be7c1270fe9ce Signed-off-by: David Steele --- diff --git a/build/tizen/CMakeLists.txt b/build/tizen/CMakeLists.txt index 75b8a55..89df63b 100644 --- a/build/tizen/CMakeLists.txt +++ b/build/tizen/CMakeLists.txt @@ -35,7 +35,7 @@ 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/) +SET(STYLE_DIR ${APP_DATA_DIR}style/) IF(NOT DEFINED LOCALE_DIR) SET(LOCALE_DIR ${PREFIX}/share/locale) @@ -46,11 +46,13 @@ SET(DEMO_VIDEO_DIR \\"${VIDEOS_DIR}\\") SET(DEMO_MODEL_DIR \\"${MODELS_DIR}\\") SET(DEMO_SCRIPT_DIR \\"${SCRIPTS_DIR}\\") SET(DEMO_STYLE_DIR \\"${STYLE_DIR}\\") -SET(DEMO_THEME_PATH \\"${STYLE_DIR}/demo-theme.json\\") +SET(DEMO_THEME_PATH \\"${STYLE_DIR}demo-theme.json\\") SET(DEMO_EXAMPLE_BIN \\"${BINDIR}/\\") SET(DEMO_LOCALE_DIR \\"${LOCALE_DIR}\\") SET(DEMO_LANG \\"${LANG}\\") +SET(DEMO_STYLE_IMAGE_DIR ${STYLE_DIR}images) + FILE(GLOB LOCAL_IMAGES_PNG RELATIVE "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.png") FILE(GLOB LOCAL_IMAGES_JPG RELATIVE "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.jpg") FILE(GLOB LOCAL_IMAGES_GIF RELATIVE "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.gif") @@ -82,11 +84,23 @@ FOREACH(flag ${LOCAL_SCRIPTS_LIST}) ENDFOREACH(flag) #Replace @DEMO_STYLE_IMAGE_DIR@ in following files -SET(DEMO_STYLE_IMAGE_DIR ${IMAGES_DIR}) CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/demo-theme.json.in ${LOCAL_STYLE_DIR}/demo-theme.json ) -INSTALL(FILES ${LOCAL_STYLE_DIR}/demo-theme.json DESTINATION ${STYLE_DIR}) -CONFIGURE_FILE( ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js.in ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js ) -INSTALL(FILES ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js DESTINATION ${SCRIPTS_DIR}) +CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-one.json.in ${LOCAL_STYLE_DIR}/style-example-theme-one.json ) +CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-two.json.in ${LOCAL_STYLE_DIR}/style-example-theme-two.json ) +CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-three.json.in ${LOCAL_STYLE_DIR}/style-example-theme-three.json ) +MESSAGE("Configured ${LOCAL_STYLE_DIR}/style-example-theme<>.json files") + +FILE(GLOB LOCAL_STYLES_LIST "${LOCAL_STYLE_DIR}/*.json") +FOREACH(flag ${LOCAL_STYLES_LIST}) + INSTALL(FILES ${flag} DESTINATION ${STYLE_DIR}) +ENDFOREACH(flag) +MESSAGE("Installed ${LOCAL_STYLES_LIST} to ${STYLE_DIR}") + +FILE(GLOB LOCAL_STYLE_IMAGES_LIST "${LOCAL_STYLE_DIR}/images/*.png") +FOREACH(flag ${LOCAL_STYLE_IMAGES_LIST}) + INSTALL(FILES ${flag} DESTINATION ${STYLE_DIR}/images) +ENDFOREACH(flag) +MESSAGE("Installed style resources ${LOCAL_STYLE_IMAGES_LIST} to ${STYLE_DIR}/images") SET(PKG_LIST dali-core dali-adaptor @@ -99,7 +113,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_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(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_STYLE_DIR=${DEMO_STYLE_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}") ########################################################################### # Internationalization diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 6c856c3..4dbcc91 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -169,4 +169,7 @@ + + + diff --git a/demo/dali-demo.cpp b/demo/dali-demo.cpp index d9444a5..28b1082 100644 --- a/demo/dali-demo.cpp +++ b/demo/dali-demo.cpp @@ -80,6 +80,7 @@ int DALI_EXPORT_API main(int argc, char **argv) demo.AddExample(Example("native-image-source.example", DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE)); demo.AddExample(Example("mesh-visual.example", DALI_DEMO_STR_TITLE_MESH_VISUAL)); demo.AddExample(Example("primitive-shapes.example", DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES)); + demo.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING)); demo.SortAlphabetically( true ); diff --git a/examples/line-mesh/line-mesh-example.cpp b/examples/line-mesh/line-mesh-example.cpp index 53f0fe8..a56f1b5 100644 --- a/examples/line-mesh/line-mesh-example.cpp +++ b/examples/line-mesh/line-mesh-example.cpp @@ -234,7 +234,7 @@ public: Dali::Toolkit::RadioButton radio = Dali::Toolkit::RadioButton::New(); - radio.SetProperty( Dali::Toolkit::RadioButton::Property::LABEL, labelMap ); + radio.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap ); radio.SetParentOrigin( ParentOrigin::TOP_LEFT ); radio.SetAnchorPoint( AnchorPoint::TOP_LEFT ); radio.SetSelected( i == 0 ); diff --git a/examples/styling/image-channel-control-impl.cpp b/examples/styling/image-channel-control-impl.cpp new file mode 100644 index 0000000..dc133d1 --- /dev/null +++ b/examples/styling/image-channel-control-impl.cpp @@ -0,0 +1,218 @@ +/* + * 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. + */ + +#include "image-channel-control-impl.h" +#include +#include +#include + +using namespace Dali; // Needed for macros + +namespace Demo +{ +namespace Internal +{ + +namespace +{ + +const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER( + varying mediump vec2 vTexCoord;\n + uniform sampler2D sTexture;\n + uniform mediump vec4 uColor;\n + uniform mediump vec3 uChannels;\n + \n + void main()\n + {\n + gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * vec4(uChannels, 1.0) ;\n + }\n +); + +Dali::BaseHandle Create() +{ + return Demo::ImageChannelControl::New(); +} + +DALI_TYPE_REGISTRATION_BEGIN( ImageChannelControl, Dali::Toolkit::Control, Create ); + +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "url", STRING, RESOURCE_URL ); +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "redChannel", FLOAT, RED_CHANNEL ); +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "greenChannel", FLOAT, GREEN_CHANNEL ); +DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "blueChannel", FLOAT, BLUE_CHANNEL ); + +DALI_TYPE_REGISTRATION_END(); + +} // anonymous namespace + + +Internal::ImageChannelControl::ImageChannelControl() +: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ), + mChannels( 1.0f, 1.0f, 1.0f ) +{ +} + +Internal::ImageChannelControl::~ImageChannelControl() +{ +} + +Demo::ImageChannelControl Internal::ImageChannelControl::New() +{ + IntrusivePtr impl = new Internal::ImageChannelControl(); + Demo::ImageChannelControl handle = Demo::ImageChannelControl( *impl ); + impl->Initialize(); + return handle; +} + +void ImageChannelControl::SetImage( const std::string& url ) +{ + mUrl = url; + + Actor self = Self(); + + Property::Map properties; + Property::Map shader; + shader[Dali::Toolkit::Visual::Shader::Property::FRAGMENT_SHADER] = FRAGMENT_SHADER; + properties[Dali::Toolkit::Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE; + properties[Dali::Toolkit::Visual::Property::SHADER]=shader; + properties[Dali::Toolkit::ImageVisual::Property::URL] = url; + + Dali::Toolkit::InitializeVisual( self, mVisual, properties ); + + RelayoutRequest(); +} + +void ImageChannelControl::OnInitialize() +{ + Actor self = Self(); + mChannelIndex = self.RegisterProperty( "uChannels", Vector3(1.0f, 1.0f, 1.0f) ); +} + +void ImageChannelControl::OnStageConnection( int depth ) +{ + Control::OnStageConnection( depth ); + + if( mVisual ) + { + CustomActor self = Self(); + mVisual.SetOnStage( self ); + } +} + +void ImageChannelControl::OnStageDisconnection() +{ + if( mVisual ) + { + CustomActor self = Self(); + mVisual.SetOffStage( self ); + } + + Control::OnStageDisconnection(); +} + +void ImageChannelControl::OnSizeSet( const Vector3& targetSize ) +{ + Control::OnSizeSet( targetSize ); + + if( mVisual ) + { + Vector2 size( targetSize ); + mVisual.SetSize( size ); + } +} + +Vector3 ImageChannelControl::GetNaturalSize() +{ + if( mVisual ) + { + Vector2 naturalSize; + mVisual.GetNaturalSize(naturalSize); + return Vector3(naturalSize); + } + return Vector3::ZERO; +} + + +/////////////////////////////////////////////////////////// +// +// Properties +// + +void ImageChannelControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value ) +{ + Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) ); + + if ( imageChannelControl ) + { + ImageChannelControl& impl = GetImpl( imageChannelControl ); + Actor self = impl.Self(); + switch ( index ) + { + case Demo::ImageChannelControl::Property::RED_CHANNEL: + { + impl.mChannels[0] = value.Get(); + self.SetProperty( impl.mChannelIndex, impl.mChannels ); + break; + } + case Demo::ImageChannelControl::Property::GREEN_CHANNEL: + { + impl.mChannels[1] = value.Get(); + self.SetProperty( impl.mChannelIndex, impl.mChannels ); + break; + } + case Demo::ImageChannelControl::Property::BLUE_CHANNEL: + { + impl.mChannels[2] = value.Get(); + self.SetProperty( impl.mChannelIndex, impl.mChannels ); + break; + } + } + } +} + +Property::Value ImageChannelControl::GetProperty( BaseObject* object, Property::Index propertyIndex ) +{ + Property::Value value; + + Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) ); + + if ( imageChannelControl ) + { + ImageChannelControl& impl = GetImpl( imageChannelControl ); + switch ( propertyIndex ) + { + case Demo::ImageChannelControl::Property::RED_CHANNEL: + { + value = impl.mChannels[0]; + break; + } + case Demo::ImageChannelControl::Property::GREEN_CHANNEL: + { + value = impl.mChannels[1]; + break; + } + case Demo::ImageChannelControl::Property::BLUE_CHANNEL: + { + value = impl.mChannels[2]; + break; + } + } + } + + return value; +} + +} // Internal +} // Demo diff --git a/examples/styling/image-channel-control-impl.h b/examples/styling/image-channel-control-impl.h new file mode 100644 index 0000000..a733dfd --- /dev/null +++ b/examples/styling/image-channel-control-impl.h @@ -0,0 +1,120 @@ +#ifndef DALI_DEMO_INTERNAL_IMAGE_CHANNEL_CONTROL_IMPL_H +#define DALI_DEMO_INTERNAL_IMAGE_CHANNEL_CONTROL_IMPL_H + +/* + * 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. + */ + +#include "image-channel-control.h" +#include +#include + +namespace Demo +{ + +namespace Internal // To use TypeRegistry, handle and body classes need the same name +{ + +class ImageChannelControl : public Dali::Toolkit::Internal::Control +{ +public: + /** + * Instantiate a new ImageChannelControl object + */ + static Demo::ImageChannelControl New(); + ImageChannelControl(); + ~ImageChannelControl(); + +public: // API + /** + * @copydoc ImageChannelControl::SetImage + */ + void SetImage( const std::string& url ); + +public: // Properties + /** + * Called when a property of an object of this type is set. + * @param[in] object The object whose property is set. + * @param[in] index The property index. + * @param[in] value The new property value. + */ + static void SetProperty( Dali::BaseObject* object, Dali::Property::Index index, const Dali::Property::Value& value ); + + /** + * Called to retrieve a property of an object of this type. + * @param[in] object The object whose property is to be retrieved. + * @param[in] index The property index. + * @return The current value of the property. + */ + static Dali::Property::Value GetProperty( Dali::BaseObject* object, Dali::Property::Index propertyIndex ); + +private: // From Control + /** + * @copydoc Toolkit::Control::OnInitialize() + */ + virtual void OnInitialize(); + + /** + * @copydoc Toolkit::Control::OnStageConnect() + */ + virtual void OnStageConnection( int depth ); + + /** + * @copydoc Toolkit::Control::OnStageDisconnection() + */ + virtual void OnStageDisconnection(); + + /** + * @copydoc Toolkit::Control::OnSizeSet() + */ + virtual void OnSizeSet( const Dali::Vector3& targetSize ); + + /** + * @copydoc Toolkit::Control::GetNaturalSize + */ + virtual Dali::Vector3 GetNaturalSize(); + +private: + //undefined + ImageChannelControl( const ImageChannelControl& ); + ImageChannelControl& operator=( const ImageChannelControl& ); + +private: + // Implementation details + std::string mUrl; + Dali::Toolkit::Visual::Base mVisual; + Dali::Vector3 mChannels; + Dali::Property::Index mChannelIndex; +}; + +} // Internal + +inline Internal::ImageChannelControl& GetImpl( Demo::ImageChannelControl& handle ) +{ + DALI_ASSERT_ALWAYS( handle ); + Dali::RefObject& object = handle.GetImplementation(); + return static_cast(object); +} + +inline const Internal::ImageChannelControl& GetImpl( const Demo::ImageChannelControl& handle ) +{ + DALI_ASSERT_ALWAYS( handle ); + const Dali::RefObject& object = handle.GetImplementation(); + return static_cast(object); +} + +} // Demo + +#endif // DALI_DEMO_IMAGE_CHANNEL_CONTROL_IMPL_H diff --git a/examples/styling/image-channel-control.cpp b/examples/styling/image-channel-control.cpp new file mode 100644 index 0000000..afe870d --- /dev/null +++ b/examples/styling/image-channel-control.cpp @@ -0,0 +1,80 @@ +/* + * 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. + */ + +#include "image-channel-control.h" +#include "image-channel-control-impl.h" + +namespace Demo +{ + +ImageChannelControl::ImageChannelControl() +{ +} + +ImageChannelControl::ImageChannelControl( const ImageChannelControl& imageChannelControl ) +: Control( imageChannelControl ) +{ +} + +ImageChannelControl& ImageChannelControl::operator= ( const ImageChannelControl& rhs ) +{ + if( &rhs != this ) + { + Control::operator=( rhs ); + } + return *this; +} + +ImageChannelControl::~ImageChannelControl() +{ +} + +ImageChannelControl ImageChannelControl::New() +{ + ImageChannelControl imageChannelControl = Internal::ImageChannelControl::New(); + return imageChannelControl; +} + +ImageChannelControl ImageChannelControl::New( const std::string& url ) +{ + ImageChannelControl imageChannelControl = Internal::ImageChannelControl::New(); + imageChannelControl.SetImage( url ); + return imageChannelControl; +} + +ImageChannelControl ImageChannelControl::DownCast( BaseHandle handle ) +{ + return Control::DownCast< ImageChannelControl, Internal::ImageChannelControl > ( handle ); +} + +void ImageChannelControl::SetImage( const std::string& url ) +{ + GetImpl( *this ).SetImage( url ); +} + +ImageChannelControl::ImageChannelControl( Internal::ImageChannelControl& implementation ) +: Control( implementation ) +{ +} + +ImageChannelControl::ImageChannelControl( Dali::Internal::CustomActor* internal ) +: Control( internal ) +{ + VerifyCustomActorPointer< Internal::ImageChannelControl >( internal ) ; +} + + +} //namespace Demo diff --git a/examples/styling/image-channel-control.h b/examples/styling/image-channel-control.h new file mode 100644 index 0000000..12eb5de --- /dev/null +++ b/examples/styling/image-channel-control.h @@ -0,0 +1,123 @@ +#ifndef DALI_DEMO_IMAGE_CHANNEL_CONTROL_H +#define DALI_DEMO_IMAGE_CHANNEL_CONTROL_H + +/* + * 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. + */ + +#include +#include + +namespace Demo +{ + +namespace Internal +{ +// All type registered types need to have the same name for the body and the handle +class ImageChannelControl; +} + +/** + * Control that allows the RGB channels of an image to be altered. + */ +class ImageChannelControl : public Dali::Toolkit::Control +{ +public: + /** + * The start and end property ranges for this control + */ + enum PropertyRange + { + PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1, + PROPERTY_END_INDEX = PROPERTY_START_INDEX + 1000, + + ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX, + ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000 + }; + + struct Property + { + enum + { + + RESOURCE_URL = PROPERTY_START_INDEX, + RED_CHANNEL, + GREEN_CHANNEL, + BLUE_CHANNEL + }; + }; + +public: // Construction / destruction + + /** + * Create an uninitialized handle + */ + ImageChannelControl(); + + /** + * Create a new image channel control without an image. Use + * SetImage to give this control an image + */ + static ImageChannelControl New(); + + /** + * Create a new image channel control from a given URL + */ + static ImageChannelControl New( const std::string& url ); + + /** + * Destructor. This is non-virtual since derived Handle types must not + * contain data or virtual methods + */ + ~ImageChannelControl(); + + /** + * Copy Constructor + */ + ImageChannelControl( const ImageChannelControl& imageChannelControl ); + + /** + * Assignment Operator + */ + ImageChannelControl& operator=( const ImageChannelControl& imageChannelControl ); + + /** + * Downcast + */ + static ImageChannelControl DownCast( BaseHandle handle ); + +public: // API + + /** + * Set the image for this ImageChannelControl + * @param[in] url The url of the image resource + */ + void SetImage( const std::string& url ); + +public: // Not for public use + /** + * Create a handle from an implementation + */ + ImageChannelControl( Internal::ImageChannelControl& implementation ); + + /** + * Allow the creation of an ImageChannelControl handle from an internal CustomActor pointer + */ + ImageChannelControl( Dali::Internal::CustomActor* internal ); +}; + +} // namespace Demo + +#endif // DALI_DEMO_IMAGE_CHANNEL_CONTROL_H diff --git a/examples/styling/style-example.cpp b/examples/styling/style-example.cpp new file mode 100644 index 0000000..cbdecf6 --- /dev/null +++ b/examples/styling/style-example.cpp @@ -0,0 +1,53 @@ +/* + * 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. + */ + +/** + * @file style-example.cpp + * @brief Example of styling Toolkit controls. + */ + +// External includes +#include + +// Internal includes +#include "styling-application.h" + + +/// Entry point for applications +int DALI_EXPORT_API main( int argc, char** argv ) +{ + const char* themeName = Demo::StylingApplication::DEMO_THEME_ONE_PATH; + + if( argc > 1 ) + { + int theme = atoi(argv[1]); + if( theme == 2 ) + { + themeName = Demo::StylingApplication::DEMO_THEME_TWO_PATH; + } + else if( theme == 3 ) + { + themeName = Demo::StylingApplication::DEMO_THEME_THREE_PATH; + } + } + + Application application = Application::New( &argc, &argv, themeName ); + { + Demo::StylingApplication stylingApplication( application ); + application.MainLoop(); + } + return 0; +} diff --git a/examples/styling/styling-application.cpp b/examples/styling/styling-application.cpp new file mode 100644 index 0000000..b37279c --- /dev/null +++ b/examples/styling/styling-application.cpp @@ -0,0 +1,641 @@ +/* + * 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. + */ + +/** + * @file style-example.cpp + * @brief Example of styling Toolkit controls. + */ + +// Class include +#include "styling-application.h" + +// External includes +#include +//#include +#include +#include "image-channel-control.h" +#include +#include + +// Internal includes + +using namespace Dali; +using namespace Dali::Toolkit; + +namespace Demo +{ + +const char* StylingApplication::DEMO_THEME_ONE_PATH( DEMO_STYLE_DIR "style-example-theme-one.json" ); +const char* StylingApplication::DEMO_THEME_TWO_PATH( DEMO_STYLE_DIR "style-example-theme-two.json" ); +const char* StylingApplication::DEMO_THEME_THREE_PATH( DEMO_STYLE_DIR "style-example-theme-three.json" ); + +namespace +{ +#define DP(x) x + +const char* DEFAULT_CONTROL_AREA_IMAGE_PATH( DEMO_IMAGE_DIR "popup_button_background.9.png" ); + +const char* POPUP_CONTROL_OK_NAME( "PopupControlOk" ); +const char* POPUP_CONTROL_CANCEL_NAME( "PopupControlCancel" ); +const char* BORDER_IMAGE( DEMO_IMAGE_DIR "border-4px.9.png" ); +const char* RESIZE_HANDLE_IMAGE( DEMO_IMAGE_DIR "resize-handle.png" ); + +const int NUMBER_OF_THEMES(3); // The default theme is considered. + +const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f ); +const int BORDER_WIDTH( 4 ); + +const char* const SMALL_IMAGE_1 = DEMO_IMAGE_DIR "gallery-small-14.jpg"; +const char* const BIG_IMAGE_1 = DEMO_IMAGE_DIR "gallery-large-4.jpg"; + +const char* const SMALL_IMAGE_2 = DEMO_IMAGE_DIR "gallery-small-39.jpg"; +const char* const BIG_IMAGE_2 = DEMO_IMAGE_DIR "gallery-large-7.jpg"; + +const char* const SMALL_IMAGE_3 = DEMO_IMAGE_DIR "gallery-small-20.jpg"; +const char* const BIG_IMAGE_3 = DEMO_IMAGE_DIR "gallery-large-11.jpg"; + +// Layout +const int MARGIN_SIZE = 10; + +const int RADIO_LABEL_THUMBNAIL_SIZE = 60; +const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40; +const int RADIO_IMAGE_SPACING = 8; +const int BUTTON_HEIGHT = 48; + +Property::Index GetChannelProperty( int index ) +{ + Property::Index channelIndex = Property::INVALID_INDEX; + switch(index) + { + case 0: { channelIndex = ImageChannelControl::Property::RED_CHANNEL; break; } + case 1: { channelIndex = ImageChannelControl::Property::GREEN_CHANNEL; break; } + case 2: { channelIndex = ImageChannelControl::Property::BLUE_CHANNEL; break; } + } + return channelIndex; +} + +} // anonymous namespace + + + +StylingApplication::StylingApplication( Application& application ) +: mApplication( application ) +{ + application.InitSignal().Connect( this, &StylingApplication::Create ); +} + +StylingApplication::~StylingApplication() +{ +} + +void StylingApplication::Create( Application& application ) +{ + Stage stage = Stage::GetCurrent(); + stage.KeyEventSignal().Connect(this, &StylingApplication::OnKeyEvent); + stage.SetBackgroundColor( Vector4( 0.1f, 0.1f, 0.1f, 1.0f ) ); + + // Hide the indicator bar + application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE ); + + mContentPane = CreateContentPane(); + stage.Add( mContentPane ); + mContentPane.SetSize( stage.GetSize() ); + + // Content panes: + TableView contentLayout = TableView::New( 5, 1 ); + contentLayout.SetName("ContentLayout"); + contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + contentLayout.SetAnchorPoint( AnchorPoint::TOP_LEFT ); + contentLayout.SetParentOrigin( ParentOrigin::TOP_LEFT ); + contentLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) ); + + // Assign all rows the size negotiation property of fitting to children + for( unsigned int i = 0; i < contentLayout.GetRows(); ++i ) + { + if( i != 1 ) + { + contentLayout.SetFitHeight(i); // Row 1 should fill + } + } + + mContentPane.Add( contentLayout ); + + mTitle = TextLabel::New( "Styling Example" ); + mTitle.SetName( "Title" ); + mTitle.SetStyleName("title"); + mTitle.SetAnchorPoint( AnchorPoint::TOP_CENTER ); + mTitle.SetParentOrigin( ParentOrigin::TOP_CENTER ); + mTitle.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + mTitle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); + mTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" ); + contentLayout.Add( mTitle ); + + // Buttons: + + TableView imageSelectLayout = TableView::New( 1, 2 ); + imageSelectLayout.SetName("ImageSelectLayout"); + + imageSelectLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + imageSelectLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT ); + imageSelectLayout.SetAnchorPoint( AnchorPoint::CENTER ); + imageSelectLayout.SetParentOrigin( ParentOrigin::CENTER ); + imageSelectLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) ); + + // Fit radio button column to child width, leave image to fill remainder + imageSelectLayout.SetFitWidth( 0 ); + + contentLayout.Add( imageSelectLayout ); + + TableView radioButtonsLayout = TableView::New( 3, 2 ); + radioButtonsLayout.SetName("RadioButtonsLayout"); + radioButtonsLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT ); + // Leave each row to fill to parent height + // Set each column to fit to child width + radioButtonsLayout.SetFitWidth(0); + radioButtonsLayout.SetFitWidth(1); + radioButtonsLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) ); + + imageSelectLayout.AddChild( radioButtonsLayout, TableView::CellPosition(0, 0) ); + imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER ); + + const char* images[] = { SMALL_IMAGE_1, SMALL_IMAGE_2, SMALL_IMAGE_3 }; + + for( int i=0; i<3; ++i ) + { + std::ostringstream thumbnailName; thumbnailName << "thumbnail" << i+1; + ImageView image = ImageView::New( ResourceImage::New( images[i] ) ); + image.SetName( thumbnailName.str() ); + image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) ); + + std::ostringstream label; label << (i+1); + std::ostringstream radioButtonStyleName; + radioButtonStyleName << "imageSelectButton" << i+1; + mRadioButtons[i] = RadioButton::New( label.str() ); + mRadioButtons[i].SetName( radioButtonStyleName.str() ); + mRadioButtons[i].SetParentOrigin( ParentOrigin::TOP_LEFT ); + mRadioButtons[i].SetAnchorPoint( AnchorPoint::TOP_LEFT ); + mRadioButtons[i].SetSelected( false ); + mRadioButtons[i].StateChangedSignal().Connect( this, &StylingApplication::OnButtonStateChange ); + + radioButtonsLayout.AddChild( mRadioButtons[i], TableView::CellPosition( i, 0 ) ); + radioButtonsLayout.AddChild( image, TableView::CellPosition( i, 1 ) ); + radioButtonsLayout.SetCellAlignment( TableView::CellPosition( i, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + radioButtonsLayout.SetCellAlignment( TableView::CellPosition( i, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + } + + mRadioButtons[0].SetSelected( true ); + + mImageChannelControl = ImageChannelControl::New( BIG_IMAGE_1 ); + mImageChannelControl.SetName("ImageChannelControl"); + mImageChannelControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS ); + mImageChannelControl.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO ); + imageSelectLayout.AddChild( mImageChannelControl, TableView::CellPosition( 0, 1 ) ); + + imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER ); + + + TableView channelSliderLayout = TableView::New( 3, 3 ); + channelSliderLayout.SetName("ChannelSliderLayout"); + + // Contains a column of check buttons and a column of sliders for R/G/B + channelSliderLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + channelSliderLayout.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); + channelSliderLayout.SetAnchorPoint( AnchorPoint::CENTER ); + channelSliderLayout.SetParentOrigin( ParentOrigin::CENTER ); + channelSliderLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) ); + + // Set each row to fit to child height + channelSliderLayout.SetFitHeight( 0 ); + channelSliderLayout.SetFitHeight( 1 ); + channelSliderLayout.SetFitHeight( 2 ); + + // Set each column to fit to child width + channelSliderLayout.SetFitWidth( 0 ); + channelSliderLayout.SetFitWidth( 1 ); + + contentLayout.Add( channelSliderLayout ); + const char *checkboxLabels[3] = {"R", "G", "B"}; + + for( int i=0; i<3; ++i ) + { + std::ostringstream checkBoxStyleName; + checkBoxStyleName << "channelActiveCheckBox" << i+1; + mCheckButtons[i] = CheckBoxButton::New(); + mCheckButtons[i].SetName( checkBoxStyleName.str() ); + mCheckButtons[i].SetParentOrigin( ParentOrigin::CENTER ); + mCheckButtons[i].SetAnchorPoint( AnchorPoint::CENTER ); + mCheckButtons[i].SetSelected( true ); + + mCheckButtons[i].StateChangedSignal().Connect( this, &StylingApplication::OnCheckButtonChange ); + mCheckButtons[i].RegisterProperty( "channel", i, Property::READ_WRITE ); + + channelSliderLayout.AddChild( mCheckButtons[i], TableView::CellPosition( i, 0 ) ); + channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + + TextLabel label = TextLabel::New( checkboxLabels[i] ); + std::ostringstream labelStyleName; labelStyleName << "colorLabel" << i+1; + label.SetName( labelStyleName.str() ); + label.SetStyleName( labelStyleName.str() ); + label.SetParentOrigin( ParentOrigin::CENTER ); + label.SetAnchorPoint ( AnchorPoint::CENTER ); + label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH ); + label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); + + channelSliderLayout.AddChild( label, TableView::CellPosition( i, 1 ) ); + channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + + mChannelSliders[i] = Slider::New(); + std::ostringstream sliderStyleName; sliderStyleName << "colorSlider" << i+1; + mChannelSliders[i].SetName( sliderStyleName.str() ); + mChannelSliders[i].SetStyleName( sliderStyleName.str() ); + mChannelSliders[i].SetParentOrigin( ParentOrigin::CENTER ); + mChannelSliders[i].SetAnchorPoint ( AnchorPoint::CENTER ); + mChannelSliders[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + mChannelSliders[i].SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN , Dimension::HEIGHT ); + mChannelSliders[i].SetProperty( Slider::Property::LOWER_BOUND, 0.0f ); + mChannelSliders[i].SetProperty( Slider::Property::UPPER_BOUND, 100.0f ); + mChannelSliders[i].SetProperty( Slider::Property::VALUE_PRECISION, 0 ); + mChannelSliders[i].SetProperty( Slider::Property::VALUE, 100.0f ); + mChannelSliders[i].SetProperty( Slider::Property::SHOW_POPUP, true ); + mChannelSliders[i].SetProperty( Slider::Property::SHOW_VALUE, true ); + + mChannelSliders[i].RegisterProperty( "channel", i, Property::READ_WRITE ); + + channelSliderLayout.AddChild( mChannelSliders[i], TableView::CellPosition( i, 2 ) ); + channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 2 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER ); + + mChannelSliders[i].ValueChangedSignal().Connect( this, &StylingApplication::OnSliderChanged ); + } + + mResetButton = PushButton::New(); + mResetButton.SetLabelText( "Reset" ); + mResetButton.SetName("ResetButton"); + mResetButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS ); + mResetButton.ClickedSignal().Connect( this, &StylingApplication::OnResetClicked ); + + contentLayout.Add( mResetButton ); + contentLayout.SetCellAlignment( TableView::CellPosition( 3, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + + TableView themeButtonLayout = TableView::New( 1, 4 ); + themeButtonLayout.SetName("ThemeButtonsLayout"); + themeButtonLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) ); + + themeButtonLayout.SetAnchorPoint( AnchorPoint::CENTER ); + themeButtonLayout.SetParentOrigin( ParentOrigin::CENTER ); + themeButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + themeButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT ); + themeButtonLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) ); + themeButtonLayout.SetFitHeight( 0 ); + + TextLabel label = TextLabel::New( "Theme: "); + label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS ); + label.SetStyleName("themelabel"); + label.SetAnchorPoint( AnchorPoint::TOP_CENTER ); + label.SetParentOrigin( ParentOrigin::TOP_CENTER ); + themeButtonLayout.AddChild( label, TableView::CellPosition( 0, 0 ) ); + themeButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER ); + + for( int i=0; i<3; ++i ) + { + mThemeButtons[i] = PushButton::New(); + mThemeButtons[i].SetName("ThemeButton"); + mThemeButtons[i].SetStyleName("ThemeButton"); + mThemeButtons[i].SetParentOrigin( ParentOrigin::CENTER ); + mThemeButtons[i].SetAnchorPoint( ParentOrigin::CENTER ); + mThemeButtons[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + mThemeButtons[i].SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); + mThemeButtons[i].RegisterProperty( "theme", i, Property::READ_WRITE ); + mThemeButtons[i].ClickedSignal().Connect( this, &StylingApplication::OnThemeButtonClicked ); + themeButtonLayout.AddChild( mThemeButtons[i], TableView::CellPosition( 0, 1+i ) ); + } + mThemeButtons[0].SetLabelText( "Lite" ); // Lightweight changes on top of Dali + mThemeButtons[1].SetLabelText( "App1" ); // Different application style + mThemeButtons[2].SetLabelText( "App2" ); + + contentLayout.Add( themeButtonLayout ); +} + +Actor StylingApplication::CreateContentPane() +{ + Toolkit::ImageView contentPane = Toolkit::ImageView::New( BORDER_IMAGE ); + contentPane.SetName("ContentPane"); + contentPane.SetParentOrigin( ParentOrigin::CENTER ); + contentPane.SetAnchorPoint( AnchorPoint::CENTER ); + contentPane.SetPadding( Padding( BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH ) ); + return contentPane; +} + +Actor StylingApplication::CreateResizableContentPane() +{ + Toolkit::ImageView contentPane = Toolkit::ImageView::New( BORDER_IMAGE ); + contentPane.SetName("ContentPane"); + contentPane.SetParentOrigin( ParentOrigin::CENTER ); + contentPane.SetAnchorPoint( AnchorPoint::CENTER ); + contentPane.SetPadding( Padding( BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH ) ); + + Toolkit::ImageView grabHandle = Toolkit::ImageView::New( RESIZE_HANDLE_IMAGE ); + grabHandle.SetName("GrabHandle"); + grabHandle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS ); + grabHandle.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT ); + grabHandle.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT ); + grabHandle.SetPosition( -BORDER_WIDTH, -BORDER_WIDTH ); + grabHandle.SetOpacity( 0.6f ); + + Layer grabCornerLayer = Layer::New(); + grabCornerLayer.SetName("GrabCornerLayer"); + grabCornerLayer.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT ); + grabCornerLayer.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT ); + grabCornerLayer.Add( grabHandle ); + contentPane.Add( grabCornerLayer ); + + mPanGestureDetector = PanGestureDetector::New(); + mPanGestureDetector.Attach( grabHandle ); + mPanGestureDetector.DetectedSignal().Connect( this, &StylingApplication::OnPan ); + + return contentPane; +} + +Popup StylingApplication::CreateResetPopup() +{ + Stage stage = Stage::GetCurrent(); + + Popup popup= Popup::New(); + popup.SetName("ResetPopup"); + popup.SetStyleName("ResetPopup"); + popup.SetParentOrigin( ParentOrigin::CENTER ); + popup.SetAnchorPoint( AnchorPoint::CENTER ); + popup.SetSize( stage.GetSize().width * 0.75f, 0.0f ); + popup.SetProperty( Popup::Property::TAIL_VISIBILITY, false ); + popup.OutsideTouchedSignal().Connect( this, &StylingApplication::HidePopup ); + popup.HiddenSignal().Connect( this, &StylingApplication::PopupHidden ); + + popup.SetTitle( CreateTitle( "Reset channels" ) ); + + TextLabel text = TextLabel::New( "This will reset the channel data to full value. Are you sure?" ); + text.SetName( "PopupContentText" ); + text.SetStyleName( "popupBody" ); + text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT ); + text.SetProperty( TextLabel::Property::MULTI_LINE, true ); + text.SetPadding( Padding( 10.0f, 10.0f, 20.0f, 0.0f ) ); + popup.SetContent( text ); + + ImageView footer = ImageView::New( DEFAULT_CONTROL_AREA_IMAGE_PATH ); + footer.SetName( "PopupFooter" ); + footer.SetStyleName( "PopupFooter" ); + footer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + footer.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT ); + footer.SetSize( 0.0f, 80.0f ); + footer.SetAnchorPoint( AnchorPoint::CENTER ); + footer.SetParentOrigin( ParentOrigin::CENTER ); + + TableView footerLayout = TableView::New( 1, 2 ); + footerLayout.SetParentOrigin( ParentOrigin::CENTER ); + footerLayout.SetAnchorPoint ( AnchorPoint::CENTER ); + footerLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + + PushButton okayButton = PushButton::New(); + okayButton.SetName( POPUP_CONTROL_OK_NAME ); + okayButton.SetStyleName( POPUP_CONTROL_OK_NAME ); + okayButton.SetLabelText( "Ok!" ); + okayButton.ClickedSignal().Connect( this, &StylingApplication::OnReset ); + okayButton.SetParentOrigin( ParentOrigin::CENTER ); + okayButton.SetAnchorPoint( AnchorPoint::CENTER ); + okayButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS ); + okayButton.SetSizeModeFactor( Vector3( -20.0f, -20.0f, 0.0f ) ); + + PushButton cancelButton = PushButton::New(); + cancelButton.SetName( POPUP_CONTROL_CANCEL_NAME ); + cancelButton.SetStyleName( POPUP_CONTROL_CANCEL_NAME ); + cancelButton.SetLabelText( "Cancel" ); + cancelButton.ClickedSignal().Connect( this, &StylingApplication::OnResetCancelled ); + cancelButton.SetParentOrigin( ParentOrigin::CENTER ); + cancelButton.SetAnchorPoint( AnchorPoint::CENTER ); + cancelButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS ); + cancelButton.SetSizeModeFactor( Vector3( -20.0f, -20.0f, 0.0f ) ); + + footerLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + footerLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + footerLayout.AddChild( okayButton, TableView::CellPosition( 0, 0 ) ); + footerLayout.AddChild( cancelButton, TableView::CellPosition( 0, 1 ) ); + footerLayout.SetCellPadding( Size( 10.f, 10.f ) ); + footer.Add( footerLayout ); + + popup.SetFooter( footer ); + return popup; +} + +TextLabel StylingApplication::CreateTitle( std::string title ) +{ + TextLabel titleActor = TextLabel::New( title ); + titleActor.SetName( "titleActor" ); + titleActor.SetStyleName( "popupTitle" ); + titleActor.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" ); + titleActor.SetProperty( TextLabel::Property::MULTI_LINE, false ); + + return titleActor; +} + +bool StylingApplication::OnButtonStateChange( Button button ) +{ + // Todo: save / restore slider states per image + + if( mImageChannelControl ) + { + if( mRadioButtons[0].IsSelected() ) + { + mImageChannelControl.SetImage( BIG_IMAGE_1 ); + } + else if( mRadioButtons[1].IsSelected() ) + { + mImageChannelControl.SetImage( BIG_IMAGE_2 ); + } + else if( mRadioButtons[2].IsSelected() ) + { + mImageChannelControl.SetImage( BIG_IMAGE_3 ); + } + } + return true; +} + +bool StylingApplication::OnCheckButtonChange( Button button ) +{ + Property::Index index = button.GetPropertyIndex("channel"); + if( index != Property::INVALID_INDEX ) + { + int channel = button.GetProperty( index ); + float value = mChannelSliders[channel].GetProperty( Slider::Property::VALUE ); + if( !button.IsSelected() ) + { + // "Turn off" the channel's contribution + value = 0.0f; + } + Property::Index channelIndex = GetChannelProperty( channel ); + mImageChannelControl.SetProperty(channelIndex, value/100.0f); + } + return true; +} + +bool StylingApplication::OnThemeButtonClicked( Button button ) +{ + int theme = button.GetProperty(button.GetPropertyIndex("theme")); + const char* themePath=NULL; + + switch( theme ) + { + case 0: + { + themePath = DEMO_THEME_ONE_PATH; + break; + } + case 1: + { + themePath = DEMO_THEME_TWO_PATH; + break; + } + case 2: + { + themePath = DEMO_THEME_THREE_PATH; + break; + } + } + StyleManager::Get().ApplyTheme( themePath ); + + return true; +} + +bool StylingApplication::OnResetClicked( Button button ) +{ + if( ! mResetPopup ) + { + mResetPopup = CreateResetPopup (); + } + + Stage::GetCurrent().Add( mResetPopup ); + + mResetPopup.SetDisplayState( Popup::SHOWN ); + return true; +} + +bool StylingApplication::OnReset( Button button ) +{ + // todo: Reset the sliders for this image + for( int i=0; i<3; ++i ) + { + mChannelSliders[i].SetProperty( Slider::Property::VALUE, 100.0f ); + } + HidePopup(); + return true; +} + +bool StylingApplication::OnResetCancelled( Button button ) +{ + HidePopup(); + return true; +} + +bool StylingApplication::OnSliderChanged( Slider slider, float value ) +{ + // todo - change color channel's saturation + Property::Index index = slider.GetPropertyIndex("channel"); + if( index != Property::INVALID_INDEX ) + { + int channel = slider.GetProperty( index ); + if( mCheckButtons[channel].IsSelected() ) + { + Property::Index channelIndex = GetChannelProperty( channel ); + mImageChannelControl.SetProperty(channelIndex, value/100.0f); + } + } + return true; +} + +void StylingApplication::HidePopup() +{ + if( mResetPopup ) + { + mResetPopup.SetDisplayState( Popup::HIDDEN ); + } +} + +void StylingApplication::PopupHidden() +{ + if( mResetPopup ) + { + // Clear down resources + mResetPopup.Unparent(); + mResetPopup.Reset(); + } +} + +void StylingApplication::OnPan( Actor actor, const PanGesture& gesture ) +{ + Vector3 size = mContentPane.GetTargetSize(); + mContentPane.SetSize( size.GetVectorXY() + gesture.displacement * 2.0f ); +} + +void StylingApplication::OnKeyEvent( const KeyEvent& keyEvent ) +{ + static int keyPressed = 0; + + if( keyEvent.state == KeyEvent::Down) + { + if( keyPressed == 0 ) // Is this the first down event? + { + printf("Key pressed: %s %d\n", keyEvent.keyPressedName.c_str(), keyEvent.keyCode ); + + if( IsKey( keyEvent, DALI_KEY_ESCAPE) || IsKey( keyEvent, DALI_KEY_BACK ) ) + { + mApplication.Quit(); + } + else if( keyEvent.keyPressedName.compare("Return") == 0 ) + { + mCurrentTheme++; + mCurrentTheme %= NUMBER_OF_THEMES; + + StyleManager styleManager = StyleManager::Get(); + switch( mCurrentTheme ) + { + case 0: + { + styleManager.ApplyTheme( DEMO_THEME_ONE_PATH ); + printf("Changing to theme One\n"); + break; + } + case 1: + { + styleManager.ApplyTheme( DEMO_THEME_TWO_PATH ); + printf("Changing to theme Two\n"); + break; + } + case 2: + { + styleManager.ApplyDefaultTheme(); + printf("Changing to Toolkit theme\n"); + break; + } + } + } + } + keyPressed = 1; + } + else if( keyEvent.state == KeyEvent::Up ) + { + keyPressed = 0; + } +} + +} // namespace Demo diff --git a/examples/styling/styling-application.h b/examples/styling/styling-application.h new file mode 100644 index 0000000..8dbb395 --- /dev/null +++ b/examples/styling/styling-application.h @@ -0,0 +1,97 @@ +#ifndef DALI_DEMO_STYLING_APPLICATION_H +#define DALI_DEMO_STYLING_APPLICATION_H + +/* + * 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. + */ + +// External includes +#include +//#include +#include +#include "image-channel-control.h" +#include +#include + +// Internal includes + +using namespace Dali; +using namespace Dali::Toolkit; + +namespace Demo +{ + +class StylingApplication : public ConnectionTracker +{ +public: + // Constructor + StylingApplication( Application& application ); + + // Destructor + ~StylingApplication(); + + // Init signal handler + void Create( Application& application ); + + // Create the GUI components + Actor CreateContentPane(); + Actor CreateResizableContentPane(); + Toolkit::Popup CreateResetPopup(); + Toolkit::TextLabel CreateTitle( std::string title ); + + // Key event handler + void OnKeyEvent( const KeyEvent& event ); + + // Button event handlers + bool OnButtonStateChange( Toolkit::Button button ); + bool OnCheckButtonChange( Toolkit::Button button ); + bool OnResetClicked( Toolkit::Button button ); + bool OnThemeButtonClicked( Toolkit::Button button ); + + // Slider event handler + bool OnSliderChanged( Toolkit::Slider slider, float value ); + + // Popup event handlers + void HidePopup(); + void PopupHidden(); + bool OnReset(Button button); + bool OnResetCancelled(Button button); + + // Grab handle handler + void OnPan( Actor actor, const PanGesture& gesture ); + + static const char* DEMO_THEME_ONE_PATH; + static const char* DEMO_THEME_TWO_PATH; + static const char* DEMO_THEME_THREE_PATH; + +private: + Application& mApplication; + int mCurrentTheme; + Actor mContentPane; + TextLabel mTitle; + RadioButton mRadioButtons[3]; // 3 demo images + CheckBoxButton mCheckButtons[3]; // rgb buttons + Slider mChannelSliders[3]; // rgb sliders + PushButton mThemeButtons[3]; + PushButton mResetButton; + ImageChannelControl mImageChannelControl; + Popup mResetPopup; + PanGestureDetector mPanGestureDetector; +}; + +} // Namespace Demo + + +#endif // DALI_DEMO_STYLING_APPLICATION_H diff --git a/packaging/com.samsung.dali-demo.spec b/packaging/com.samsung.dali-demo.spec index 5b604dc..cbf8e0f 100755 --- a/packaging/com.samsung.dali-demo.spec +++ b/packaging/com.samsung.dali-demo.spec @@ -138,6 +138,7 @@ exit 0 %{dali_app_ro_dir}/models/* %{dali_app_ro_dir}/scripts/* %{dali_app_ro_dir}/style/* +%{dali_app_ro_dir}/style/images/* %{dali_xml_file_dir}/%{name}.xml %{dali_icon_dir}/* %{locale_dir}/* diff --git a/resources/po/as.po b/resources/po/as.po index 3d30f88..5accc36 100755 --- a/resources/po/as.po +++ b/resources/po/as.po @@ -106,6 +106,9 @@ msgstr "লিপি" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "স্ক্ৰ'ল কৰক" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "শৈলী" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "অস্পষ্টকৈ অপুষ্পক" @@ -128,4 +131,4 @@ msgid "DALI_DEMO_STR_TITLE_TEXT_SCROLLING" msgstr "অকনিষ্ঠ অৰ্জুন বঁটা" msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR" -msgstr "টিল্ট অনুভূতি" \ No newline at end of file +msgstr "টিল্ট অনুভূতি" diff --git a/resources/po/de.po b/resources/po/de.po index 8524b05..0aea6b5 100755 --- a/resources/po/de.po +++ b/resources/po/de.po @@ -106,6 +106,9 @@ msgstr "Scripting" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "Scroll-Ansicht" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "Styling" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "Unschärfe und blühen" diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po index 3cbc74c..a62e46a 100755 --- a/resources/po/en_GB.po +++ b/resources/po/en_GB.po @@ -106,6 +106,9 @@ msgstr "Script-based UI" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "Scroll View" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "Styling" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "Super Blur and Bloom" diff --git a/resources/po/en_US.po b/resources/po/en_US.po index aab93ba..217b42f 100755 --- a/resources/po/en_US.po +++ b/resources/po/en_US.po @@ -106,6 +106,9 @@ msgstr "Script-based UI" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "Scroll View" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "Styling" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "Super Blur and Bloom" diff --git a/resources/po/es.po b/resources/po/es.po index d3216e8..3611ed6 100755 --- a/resources/po/es.po +++ b/resources/po/es.po @@ -106,6 +106,9 @@ msgstr "Interfaz definida por Script" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "Vista de desplazamiento" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "Estilo" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "Efecto blur y bloom" diff --git a/resources/po/ko.po b/resources/po/ko.po index b7cdee7..8e1bac0 100755 --- a/resources/po/ko.po +++ b/resources/po/ko.po @@ -106,6 +106,9 @@ msgstr "스크립팅" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "스크롤 뷰" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "" diff --git a/resources/po/ml.po b/resources/po/ml.po index 1f477a5..eabc095 100755 --- a/resources/po/ml.po +++ b/resources/po/ml.po @@ -106,6 +106,9 @@ msgstr "സ്ക്രിപ്റ്റ്" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "സ്ക്രോള്ചെയ്യുക കാഴ്ച" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "ശൈലി" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "മങ്ങൽ പൂക്കൽ" diff --git a/resources/po/ur.po b/resources/po/ur.po index 935a8ab..a3b8d12 100755 --- a/resources/po/ur.po +++ b/resources/po/ur.po @@ -106,6 +106,9 @@ msgstr "سکرپٹ" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "سکرول ویو" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "سٹائل" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "دھندلاپن اور بلوم" diff --git a/resources/po/zn_CH.po b/resources/po/zn_CH.po index 17c43ab..c340d63 100755 --- a/resources/po/zn_CH.po +++ b/resources/po/zn_CH.po @@ -106,6 +106,9 @@ msgstr "脚本用户界面" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "滚动视图" +msgid "DALI_DEMO_STR_TITLE_STYLING" +msgstr "样式" + msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM" msgstr "模糊及泛光" diff --git a/resources/style/.gitignore b/resources/style/.gitignore new file mode 100644 index 0000000..59620cc --- /dev/null +++ b/resources/style/.gitignore @@ -0,0 +1,4 @@ +demo-theme.json +style-example-theme-three.json +style-example-theme-two.json +style-example-theme-one.json diff --git a/resources/style/images/.gitignore b/resources/style/images/.gitignore new file mode 100644 index 0000000..01b9fd9 --- /dev/null +++ b/resources/style/images/.gitignore @@ -0,0 +1 @@ +*.xcf diff --git a/resources/style/images/radio-button-selected.png b/resources/style/images/radio-button-selected.png new file mode 100644 index 0000000..96411bc Binary files /dev/null and b/resources/style/images/radio-button-selected.png differ diff --git a/resources/style/images/radio-button-unselected-disabled.png b/resources/style/images/radio-button-unselected-disabled.png new file mode 100644 index 0000000..d2d8d24 Binary files /dev/null and b/resources/style/images/radio-button-unselected-disabled.png differ diff --git a/resources/style/images/radio-button-unselected.png b/resources/style/images/radio-button-unselected.png new file mode 100644 index 0000000..bdf4abd Binary files /dev/null and b/resources/style/images/radio-button-unselected.png differ diff --git a/resources/style/images/slider-skin-progress-blue.9.png b/resources/style/images/slider-skin-progress-blue.9.png new file mode 100644 index 0000000..9477280 Binary files /dev/null and b/resources/style/images/slider-skin-progress-blue.9.png differ diff --git a/resources/style/images/slider-skin-progress-green.9.png b/resources/style/images/slider-skin-progress-green.9.png new file mode 100644 index 0000000..6738075 Binary files /dev/null and b/resources/style/images/slider-skin-progress-green.9.png differ diff --git a/resources/style/images/slider-skin-progress-red.9.png b/resources/style/images/slider-skin-progress-red.9.png new file mode 100644 index 0000000..6c8cdbb Binary files /dev/null and b/resources/style/images/slider-skin-progress-red.9.png differ diff --git a/resources/style/mobile/images/radio-button-selected.png b/resources/style/mobile/images/radio-button-selected.png new file mode 100644 index 0000000..96411bc Binary files /dev/null and b/resources/style/mobile/images/radio-button-selected.png differ diff --git a/resources/style/mobile/images/radio-button-unselected-disabled.png b/resources/style/mobile/images/radio-button-unselected-disabled.png new file mode 100644 index 0000000..d2d8d24 Binary files /dev/null and b/resources/style/mobile/images/radio-button-unselected-disabled.png differ diff --git a/resources/style/mobile/images/radio-button-unselected.png b/resources/style/mobile/images/radio-button-unselected.png new file mode 100644 index 0000000..bdf4abd Binary files /dev/null and b/resources/style/mobile/images/radio-button-unselected.png differ diff --git a/resources/style/mobile/images/slider-skin-progress-blue.9.png b/resources/style/mobile/images/slider-skin-progress-blue.9.png new file mode 100644 index 0000000..9477280 Binary files /dev/null and b/resources/style/mobile/images/slider-skin-progress-blue.9.png differ diff --git a/resources/style/mobile/images/slider-skin-progress-green.9.png b/resources/style/mobile/images/slider-skin-progress-green.9.png new file mode 100644 index 0000000..6738075 Binary files /dev/null and b/resources/style/mobile/images/slider-skin-progress-green.9.png differ diff --git a/resources/style/mobile/images/slider-skin-progress-red.9.png b/resources/style/mobile/images/slider-skin-progress-red.9.png new file mode 100644 index 0000000..6c8cdbb Binary files /dev/null and b/resources/style/mobile/images/slider-skin-progress-red.9.png differ diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in new file mode 100644 index 0000000..e84d423 --- /dev/null +++ b/resources/style/mobile/style-example-theme-one.json.in @@ -0,0 +1,67 @@ +{ + "styles": + { + "title":{ + "textColor":"#0000ff", + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] + } + }, + "tableview":{ + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 0.03 ] + } + }, + "flexcontainer":{ + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 0.1 ] + } + }, + "radiobutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "checkboxbutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "colorLabel1":{ + "textColor": [1,0,0,1] + }, + "colorLabel2":{ + "textColor": [0,1,0,1] + }, + "colorLabel3":{ + "textColor": [0.3,0.3,1,1] + }, + "themelabel":{ + "textColor":[0,1,1,1] + }, + "popupTitle":{ + "textColor":[1,1,1,1] + }, + "popupBody":{ + "textColor":[1,1,0,1] + }, + "textlabel":{ + "textColor":[0,0,0,1] + }, + "colorSlider1":{ + "styles":["slider"] + }, + "colorSlider2":{ + "styles":["slider"] + }, + "colorSlider3":{ + "styles":["slider"] + } + } +} diff --git a/resources/style/mobile/style-example-theme-three.json.in b/resources/style/mobile/style-example-theme-three.json.in new file mode 100644 index 0000000..0326e3d --- /dev/null +++ b/resources/style/mobile/style-example-theme-three.json.in @@ -0,0 +1,51 @@ +{ + "styles": + { + "title":{ + "textColor":"#0000ff", + "background": + { + "rendererType":"color", + "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] + } + }, + "tableview":{ + "background": + { + "rendererType":"color", + "mixColor": [ 1.0, 1.0, 1.0, 0.03 ] + } + }, + "radiobutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "checkboxbutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "colorLabel1":{ + "textColor": [1,0,0,1] + }, + "colorLabel2":{ + "textColor": [0,1,0,1] + }, + "colorLabel3":{ + "textColor": [0.3,0.3,1,1] + }, + "themelabel":{ + "textColor":[0,1,1,1] + }, + "popupTitle":{ + "textColor":[1,1,1,1] + }, + "popupBody":{ + "textColor":[1,1,0,1] + }, + "textlabel":{ + "textColor":[0,0,0,1] + } + } +} diff --git a/resources/style/mobile/style-example-theme-two.json.in b/resources/style/mobile/style-example-theme-two.json.in new file mode 100644 index 0000000..884d1ca --- /dev/null +++ b/resources/style/mobile/style-example-theme-two.json.in @@ -0,0 +1,97 @@ +{ + "constants": + { + "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@" + }, + "styles": + { + "title":{ + "textColor":"#0000ff", + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] + } + }, + "tableview":{ + "background": + { + "visualType":"GRADIENT", + "startPosition": [0,-1], + "endPosition": [0,1], + "stopColor": [ [ 1.0, 0.0, 1.0, 0.03 ], [1.0,0.0,1.0,0.15] ] + } + }, + + // Change an icon size, see if it gets properly re-sized + "radiobutton":{ + "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png", + "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png", + "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png", + "imageLabelGap":10, + "label":{ + "textColor": [0.1,1,1,1] + } + }, + "checkboxbutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "colorLabel1":{ + "textColor": [1,0,0,1] + }, + "colorLabel2":{ + "textColor": [0,1,0,1] + }, + "colorLabel3":{ + "textColor": [0.3,0.3,1,1] + }, + "themelabel":{ + "textColor":[0,1,1,1] + }, + "popupTitle":{ + "textColor":[1,1,1,1] + }, + "popupBody":{ + "textColor":[1,1,0,1] + }, + + // Note, this overrides any non-renamed label styles, e.g. those in a button. + "textlabel":{ + //"textColor":[0,0,0,1] + }, + + "thinslider":{ + "styles": ["slider"], + "showPopup":true, + "showValue":false, + "valuePrecision":0, + "handleVisual":{ + "size":[48,48] + }, + "trackVisual":{ + "size":[10, 10] + }, + "enabled":true + }, + "colorSlider1":{ + "styles":["thinslider"], + "progressVisual":{ + "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png" + } + }, + "colorSlider2":{ + "styles":["thinslider"], + "progressVisual":{ + "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png" + } + }, + "colorSlider3":{ + "styles":["thinslider"], + "progressVisual":{ + "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png" + } + } + } +} diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in new file mode 100644 index 0000000..e84d423 --- /dev/null +++ b/resources/style/style-example-theme-one.json.in @@ -0,0 +1,67 @@ +{ + "styles": + { + "title":{ + "textColor":"#0000ff", + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] + } + }, + "tableview":{ + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 0.03 ] + } + }, + "flexcontainer":{ + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 0.1 ] + } + }, + "radiobutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "checkboxbutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "colorLabel1":{ + "textColor": [1,0,0,1] + }, + "colorLabel2":{ + "textColor": [0,1,0,1] + }, + "colorLabel3":{ + "textColor": [0.3,0.3,1,1] + }, + "themelabel":{ + "textColor":[0,1,1,1] + }, + "popupTitle":{ + "textColor":[1,1,1,1] + }, + "popupBody":{ + "textColor":[1,1,0,1] + }, + "textlabel":{ + "textColor":[0,0,0,1] + }, + "colorSlider1":{ + "styles":["slider"] + }, + "colorSlider2":{ + "styles":["slider"] + }, + "colorSlider3":{ + "styles":["slider"] + } + } +} diff --git a/resources/style/style-example-theme-three.json.in b/resources/style/style-example-theme-three.json.in new file mode 100644 index 0000000..c50ca22 --- /dev/null +++ b/resources/style/style-example-theme-three.json.in @@ -0,0 +1,51 @@ +{ + "styles": + { + "title":{ + "textColor":"#0000ff", + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] + } + }, + "tableview":{ + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 0.03 ] + } + }, + "radiobutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "checkboxbutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "colorLabel1":{ + "textColor": [1,0,0,1] + }, + "colorLabel2":{ + "textColor": [0,1,0,1] + }, + "colorLabel3":{ + "textColor": [0.3,0.3,1,1] + }, + "themelabel":{ + "textColor":[0,1,1,1] + }, + "popupTitle":{ + "textColor":[1,1,1,1] + }, + "popupBody":{ + "textColor":[1,1,0,1] + }, + "textlabel":{ + "textColor":[0,0,0,1] + } + } +} diff --git a/resources/style/style-example-theme-two.json.in b/resources/style/style-example-theme-two.json.in new file mode 100644 index 0000000..884d1ca --- /dev/null +++ b/resources/style/style-example-theme-two.json.in @@ -0,0 +1,97 @@ +{ + "constants": + { + "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@" + }, + "styles": + { + "title":{ + "textColor":"#0000ff", + "background": + { + "visualType":"COLOR", + "mixColor": [ 1.0, 1.0, 1.0, 1.0 ] + } + }, + "tableview":{ + "background": + { + "visualType":"GRADIENT", + "startPosition": [0,-1], + "endPosition": [0,1], + "stopColor": [ [ 1.0, 0.0, 1.0, 0.03 ], [1.0,0.0,1.0,0.15] ] + } + }, + + // Change an icon size, see if it gets properly re-sized + "radiobutton":{ + "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png", + "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png", + "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png", + "imageLabelGap":10, + "label":{ + "textColor": [0.1,1,1,1] + } + }, + "checkboxbutton":{ + "label":{ + "textColor": [1,1,1,1] + } + }, + "colorLabel1":{ + "textColor": [1,0,0,1] + }, + "colorLabel2":{ + "textColor": [0,1,0,1] + }, + "colorLabel3":{ + "textColor": [0.3,0.3,1,1] + }, + "themelabel":{ + "textColor":[0,1,1,1] + }, + "popupTitle":{ + "textColor":[1,1,1,1] + }, + "popupBody":{ + "textColor":[1,1,0,1] + }, + + // Note, this overrides any non-renamed label styles, e.g. those in a button. + "textlabel":{ + //"textColor":[0,0,0,1] + }, + + "thinslider":{ + "styles": ["slider"], + "showPopup":true, + "showValue":false, + "valuePrecision":0, + "handleVisual":{ + "size":[48,48] + }, + "trackVisual":{ + "size":[10, 10] + }, + "enabled":true + }, + "colorSlider1":{ + "styles":["thinslider"], + "progressVisual":{ + "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png" + } + }, + "colorSlider2":{ + "styles":["thinslider"], + "progressVisual":{ + "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png" + } + }, + "colorSlider3":{ + "styles":["thinslider"], + "progressVisual":{ + "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png" + } + } + } +} diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h index b1320c2..f191dcb 100644 --- a/shared/dali-demo-strings.h +++ b/shared/dali-demo-strings.h @@ -68,6 +68,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL") #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI") #define DALI_DEMO_STR_TITLE_SCROLL_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCROLL_VIEW") +#define DALI_DEMO_STR_TITLE_STYLING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_STYLING") #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM") #define DALI_DEMO_STR_TITLE_TEXTURED_MESH dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXTURED_MESH") #define DALI_DEMO_STR_TITLE_TEXT_EDITOR dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_EDITOR") @@ -115,6 +116,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL "Renderer Stencils" #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI "Script Based UI" #define DALI_DEMO_STR_TITLE_SCROLL_VIEW "Scroll View" +#define DALI_DEMO_STR_TITLE_STYLING "Styling" #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM "Super Blur and Bloom" #define DALI_DEMO_STR_TITLE_TEXTURED_MESH "Mesh Texture" #define DALI_DEMO_STR_TITLE_TEXT_EDITOR "Text Editor"