examples/buttons/buttons-example.cpp

   1 /*
   2  * Copyright (c) 2014 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17
  18 #include "../shared/view.h"
  19 #include <dali/dali.h>
  20 #include <dali-toolkit/dali-toolkit.h>
  21
  22 using namespace Dali;
  23
  24 namespace
  25 {
  26 // Used to produce visually same dimensions on desktop and device builds
  27 float ScalePointSize( int pointSize )
  28 {
  29   Dali::Vector2 dpi = Dali::Stage::GetCurrent().GetDpi();
  30   float meanDpi = (dpi.height + dpi.width) * 0.5f;
  31   return pointSize * meanDpi / 220.0f;
  32 }
  33
  34 } // namespace
  35
  36 // Define this so that it is interchangeable
  37 // "DP" stands for Device independent Pixels
  38 #define DP(x) ScalePointSize(x)
  39
  40
  41 namespace
  42 {
  43
  44 const char* const BACKGROUND_IMAGE = DALI_IMAGE_DIR "background-gradient.jpg";
  45 const char* const TOOLBAR_IMAGE = DALI_IMAGE_DIR "top-bar.png";
  46
  47 const char* const TOOLBAR_TITLE = "Buttons";
  48
  49 const char* const SMALL_IMAGE_1 = DALI_IMAGE_DIR "gallery-small-14.jpg";
  50 const char* const BIG_IMAGE_1 = DALI_IMAGE_DIR "gallery-large-4.jpg";
  51
  52 const char* const SMALL_IMAGE_2 = DALI_IMAGE_DIR "gallery-small-20.jpg";
  53 const char* const BIG_IMAGE_2 = DALI_IMAGE_DIR "gallery-large-11.jpg";
  54
  55 const char* const SMALL_IMAGE_3 = DALI_IMAGE_DIR "gallery-small-25.jpg";
  56 const char* const BIG_IMAGE_3 = DALI_IMAGE_DIR "gallery-large-13.jpg";
  57
  58 const char* const ENABLED_IMAGE = DALI_IMAGE_DIR "item-select-check.png";
  59
  60 const char* const PUSHBUTTON_PRESS_IMAGE = DALI_IMAGE_DIR "button-down.9.png";
  61 const char* const PUSHBUTTON_DIM_IMAGE = DALI_IMAGE_DIR "button-disabled.9.png";
  62 const char* const PUSHBUTTON_BUTTON_IMAGE = DALI_IMAGE_DIR "button-up.9.png";
  63
  64 const char* const CHECKBOX_UNCHECKED_IMAGE = DALI_IMAGE_DIR "checkbox-unchecked.png";
  65 const char* const CHECKBOX_CHECKED_IMAGE = DALI_IMAGE_DIR "checkbox-checked.png";
  66
  67 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
  68
  69 // Layout sizes
  70 const int RADIO_LABEL_THUMBNAIL_SIZE = 48;
  71 const int RADIO_IMAGE_SPACING = 8;
  72 const int BUTTON_HEIGHT = 48;
  73
  74 const int MARGIN_SIZE = 10;
  75 const int TOP_MARGIN = 85;
  76 const int GROUP2_HEIGHT = 238;
  77 const int GROUP1_HEIGHT = 120;
  78 const int GROUP3_HEIGHT = 190;
  79 const int GROUP4_HEIGHT = BUTTON_HEIGHT + MARGIN_SIZE * 2;
  80
  81 }  // namespace
  82
  83 /** This example shows how to create and use different buttons.
  84  *
  85  * 1. First group of radio buttons with image actor labels selects an image to load
  86  * 2. A push button loads the selected thumbnail image into the larger image pane
  87  * 3. Second group of radio buttons with a table view label containing a text view and image view, and a normal text view.
  88  *    Selecting one of these will enable/disable the image loading push button
  89  * 4. A group of check boxes
  90  */
  91 class ButtonsController: public ConnectionTracker
  92 {
  93  public:
  94
  95   ButtonsController( Application& application )
  96     : mApplication( application )
  97   {
  98     // Connect to the Application's Init signal
  99     mApplication.InitSignal().Connect( this, &ButtonsController::Create );
 100   }
 101
 102   ~ButtonsController()
 103   {
 104     // Nothing to do here
 105   }
 106
 107   void Create( Application& application )
 108   {
 109     // The Init signal is received once (only) during the Application lifetime
 110
 111     // Respond to key events
 112     Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
 113
 114     // Creates a default view with a default tool bar.
 115     // The view is added to the stage.
 116     mContentLayer = DemoHelper::CreateView( application,
 117                                             mView,
 118                                             mToolBar,
 119                                             BACKGROUND_IMAGE,
 120                                             TOOLBAR_IMAGE,
 121                                             TOOLBAR_TITLE );
 122
 123     int yPos = TOP_MARGIN + MARGIN_SIZE;
 124
 125     // Image selector radio group
 126     Actor radioGroup2Background = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 127     radioGroup2Background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 128     radioGroup2Background.SetParentOrigin( ParentOrigin::TOP_LEFT );
 129     radioGroup2Background.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 130     radioGroup2Background.SetSize( DP(348), DP(GROUP2_HEIGHT) );
 131     mContentLayer.Add( radioGroup2Background );
 132
 133     Actor radioButtonsGroup2 = Actor::New();
 134     radioButtonsGroup2.SetParentOrigin( ParentOrigin::TOP_LEFT );
 135     radioButtonsGroup2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 136     radioButtonsGroup2.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 137     radioButtonsGroup2.SetSize( DP(100), DP(160) );
 138
 139     radioGroup2Background.Add( radioButtonsGroup2 );
 140
 141     int radioY = 0;
 142
 143     // Radio 1
 144     {
 145       ImageActor imageActor = ImageActor::New( Image::New( SMALL_IMAGE_1 ) );
 146       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 147       mRadioButtonImage1 = Dali::Toolkit::RadioButton::New( imageActor );
 148       mRadioButtonImage1.SetParentOrigin( ParentOrigin::TOP_LEFT );
 149       mRadioButtonImage1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 150       mRadioButtonImage1.SetPosition( 0, DP(radioY) );
 151       mRadioButtonImage1.SetActive( true );
 152
 153       radioButtonsGroup2.Add( mRadioButtonImage1 );
 154     }
 155
 156     // Radio 2
 157     {
 158       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
 159
 160       ImageActor imageActor = ImageActor::New( Image::New( SMALL_IMAGE_2 ) );
 161       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 162
 163       mRadioButtonImage2 = Dali::Toolkit::RadioButton::New( imageActor );
 164       mRadioButtonImage2.SetParentOrigin( ParentOrigin::TOP_LEFT );
 165       mRadioButtonImage2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 166       mRadioButtonImage2.SetPosition( 0, DP(radioY) );
 167
 168       radioButtonsGroup2.Add( mRadioButtonImage2 );
 169     }
 170
 171     // Radio 3
 172     {
 173       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
 174
 175       ImageActor imageActor = ImageActor::New( Image::New( SMALL_IMAGE_3 ) );
 176       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 177
 178       mRadioButtonImage3 = Dali::Toolkit::RadioButton::New( imageActor );
 179       mRadioButtonImage3.SetParentOrigin( ParentOrigin::TOP_LEFT );
 180       mRadioButtonImage3.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 181       mRadioButtonImage3.SetPosition( 0, DP(radioY) );
 182
 183       radioButtonsGroup2.Add( mRadioButtonImage3 );
 184     }
 185
 186     // Create select button
 187     mUpdateButton = Toolkit::PushButton::New();
 188     mUpdateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 189     mUpdateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 190     mUpdateButton.SetPosition( 0, DP(MARGIN_SIZE) );
 191     mUpdateButton.SetLabelText("Select");
 192     mUpdateButton.SetSize( DP(100), DP(BUTTON_HEIGHT) );
 193
 194     mUpdateButton.SetPressedImage( Dali::Image::New( PUSHBUTTON_PRESS_IMAGE ) );
 195     mUpdateButton.SetDimmedImage( Dali::Image::New( PUSHBUTTON_DIM_IMAGE ) );
 196     mUpdateButton.SetButtonImage( Dali::Image::New( PUSHBUTTON_BUTTON_IMAGE ) );
 197
 198     mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
 199
 200     radioButtonsGroup2.Add(mUpdateButton);
 201
 202     // ImageActor to display selected image
 203     mBigImage1 = Image::New( BIG_IMAGE_1 );
 204     mBigImage2 = Image::New( BIG_IMAGE_2 );
 205     mBigImage3 = Image::New( BIG_IMAGE_3 );
 206
 207     mImage = ImageActor::New( mBigImage1 );
 208     mImage.SetParentOrigin( ParentOrigin::TOP_RIGHT );
 209     mImage.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 210     mImage.SetPosition( DP(MARGIN_SIZE), 0 );
 211     mImage.SetSize( DP(218), DP(218) );
 212     radioButtonsGroup2.Add( mImage );
 213
 214     // The enable/disable radio group
 215     yPos += GROUP2_HEIGHT + MARGIN_SIZE;
 216
 217     Actor radioGroup1Background = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 218     radioGroup1Background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 219     radioGroup1Background.SetParentOrigin( ParentOrigin::TOP_LEFT );
 220     radioGroup1Background.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 221     radioGroup1Background.SetSize( DP(348), DP(GROUP1_HEIGHT) );
 222     mContentLayer.Add( radioGroup1Background );
 223
 224     // Radio group
 225     Actor radioButtonsGroup1 = Actor::New();
 226     radioButtonsGroup1.SetParentOrigin( ParentOrigin::TOP_LEFT );
 227     radioButtonsGroup1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 228     radioButtonsGroup1.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 229
 230     radioGroup1Background.Add( radioButtonsGroup1 );
 231
 232     // First radio button
 233     {
 234       Toolkit::TableView tableView = Toolkit::TableView::New( 1, 2 );
 235       tableView.SetSize( DP(260), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 236
 237       ImageActor imageActor = ImageActor::New( Image::New( ENABLED_IMAGE ) );
 238       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 239       tableView.AddChild( imageActor, Toolkit::TableView::CellPosition( 0, 1 ) );
 240       tableView.SetFixedWidth( 1, DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 241
 242       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( tableView );
 243       radioButton.SetName( "radio-select-enable" );
 244       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 245       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 246       radioButton.SetPosition( 0, 0 );
 247       radioButton.SetActive( true );
 248
 249       radioButton.ToggledSignal().Connect( this, &ButtonsController::EnableSelectButtonToggle );
 250
 251       radioButtonsGroup1.Add( radioButton );
 252     }
 253
 254     // Second radio button
 255     {
 256       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
 257       radioButton.SetName( "radio-select-disable" );
 258       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 259       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 260       radioButton.SetPosition( 0, DP(50) );
 261
 262       radioButton.ToggledSignal().Connect( this, &ButtonsController::EnableSelectButtonToggle );
 263
 264       radioButtonsGroup1.Add( radioButton );
 265     }
 266
 267     // CheckBoxes
 268     yPos += GROUP1_HEIGHT + MARGIN_SIZE;
 269
 270     Actor checkBoxBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 271     checkBoxBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 272     checkBoxBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
 273     checkBoxBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 274     checkBoxBackground.SetSize( DP(430), DP(GROUP3_HEIGHT) );
 275     mContentLayer.Add( checkBoxBackground );
 276
 277     Dali::Image unchecked = Dali::Image::New( CHECKBOX_UNCHECKED_IMAGE );
 278     Dali::Image checked = Dali::Image::New( CHECKBOX_CHECKED_IMAGE );
 279
 280     int checkYPos = MARGIN_SIZE;
 281
 282     {
 283       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 284       checkBox.SetName( "checkbox1" );
 285       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 286       checkBox.SetParentOrigin( ParentOrigin::TOP_LEFT );
 287       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 288       checkBox.SetBackgroundImage( unchecked );
 289       checkBox.SetCheckedImage( checked );
 290       checkBox.SetSize( DP(48), DP(48) );
 291       checkBox.ToggledSignal().Connect( this, &ButtonsController::OnCheckBoxesToggled );
 292
 293       checkBoxBackground.Add( checkBox );
 294     }
 295
 296     checkYPos += 60;
 297
 298     {
 299       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 300       checkBox.SetName( "checkbox2" );
 301       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 302       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 303       checkBox.SetBackgroundImage( unchecked );
 304       checkBox.SetCheckedImage( checked );
 305       checkBox.SetSize( DP(48), DP(48) );
 306       checkBox.SetChecked( true );
 307       checkBox.ToggledSignal().Connect( this, &ButtonsController::OnCheckBoxesToggled );
 308
 309       checkBoxBackground.Add( checkBox );
 310     }
 311
 312     checkYPos += 60;
 313
 314     {
 315       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 316       checkBox.SetName( "checkbox3" );
 317       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 318       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 319       checkBox.SetBackgroundImage( unchecked );
 320       checkBox.SetCheckedImage( checked );
 321       checkBox.SetSize( DP(48), DP(48) );
 322       checkBox.ToggledSignal().Connect( this, &ButtonsController::OnCheckBoxesToggled );
 323
 324       checkBoxBackground.Add( checkBox );
 325     }
 326
 327     // Create toggle button
 328     yPos += GROUP3_HEIGHT + MARGIN_SIZE;
 329
 330     Actor toggleBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 331     toggleBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 332     toggleBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
 333     toggleBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 334     toggleBackground.SetSize( DP(150 + MARGIN_SIZE * 2), DP(GROUP4_HEIGHT) );
 335     mContentLayer.Add( toggleBackground );
 336
 337     Toolkit::PushButton toggleButton = Toolkit::PushButton::New();
 338     toggleButton.SetToggleButton( true );
 339     toggleButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 340     toggleButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 341     toggleButton.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 342     toggleButton.SetLabelText( "Toggle OFF" );
 343     toggleButton.SetSize( DP(150), DP(BUTTON_HEIGHT) );
 344
 345     toggleButton.SetPressedImage( Dali::Image::New( PUSHBUTTON_PRESS_IMAGE ) );
 346     toggleButton.SetDimmedImage( Dali::Image::New( PUSHBUTTON_DIM_IMAGE ) );
 347     toggleButton.SetButtonImage( Dali::Image::New( PUSHBUTTON_BUTTON_IMAGE ) );
 348
 349     toggleButton.ToggledSignal().Connect( this, &ButtonsController::OnButtonToggled );
 350
 351     toggleBackground.Add( toggleButton );
 352   }
 353
 354   void OnKeyEvent( const KeyEvent& event )
 355   {
 356     if( event.state == KeyEvent::Down )
 357     {
 358       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 359       {
 360         // Exit application when click back or escape.
 361         mApplication.Quit();
 362       }
 363     }
 364   }
 365
 366   bool OnButtonToggled( Toolkit::Button button, bool state )
 367   {
 368     Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
 369     if( pushButton )
 370     {
 371       if( state )
 372       {
 373         pushButton.SetLabelText( "Toggle ON" );
 374       }
 375       else
 376       {
 377         pushButton.SetLabelText( "Toggle OFF" );
 378       }
 379     }
 380
 381     return true;
 382   }
 383
 384   bool EnableSelectButtonToggle( Toolkit::Button button, bool state )
 385   {
 386     if( button.GetName() == "radio-select-enable" && state == true )
 387     {
 388       mUpdateButton.SetDimmed( false );
 389     }
 390     else if( button.GetName() == "radio-select-disable" && state == true )
 391     {
 392       mUpdateButton.SetDimmed( true );
 393     }
 394
 395     return true;
 396   }
 397
 398   bool OnButtonClicked(Toolkit::Button button)
 399   {
 400     if( mRadioButtonImage1.IsActive() )
 401     {
 402       mImage.SetImage( mBigImage1 );
 403     }
 404     else if( mRadioButtonImage2.IsActive() )
 405     {
 406       mImage.SetImage( mBigImage2 );
 407     }
 408     else if( mRadioButtonImage3.IsActive() )
 409     {
 410       mImage.SetImage( mBigImage3 );
 411     }
 412     return true;
 413   }
 414
 415   bool OnCheckBoxesToggled( Toolkit::Button button, bool state )
 416   {
 417     return true;
 418   }
 419
 420  private:
 421
 422   Application&      mApplication;
 423   Toolkit::View     mView;                              ///< The View instance.
 424   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
 425   Layer             mContentLayer;                      ///< Content layer
 426
 427   Toolkit::RadioButton mRadioButtonImage1;
 428   Toolkit::RadioButton mRadioButtonImage2;
 429   Toolkit::RadioButton mRadioButtonImage3;
 430
 431   Toolkit::PushButton mUpdateButton;
 432
 433   Image mBigImage1;
 434   Image mBigImage2;
 435   Image mBigImage3;
 436   ImageActor mImage;
 437 };
 438
 439 void RunTest( Application& application )
 440 {
 441   ButtonsController test( application );
 442
 443   application.MainLoop();
 444 }
 445
 446 // Entry point for Linux & SLP applications
 447 //
 448 int main( int argc, char **argv )
 449 {
 450   Application application = Application::New( &argc, &argv );
 451
 452   RunTest( application );
 453
 454   return 0;
 455 }