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_DISABLED_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_UNSELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-unselected.png";
  65 const char* const CHECKBOX_SELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-selected.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     DemoHelper::RequestThemeChange();
 112
 113     // Respond to key events
 114     Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
 115
 116     // Creates a default view with a default tool bar.
 117     // The view is added to the stage.
 118     mContentLayer = DemoHelper::CreateView( application,
 119                                             mView,
 120                                             mToolBar,
 121                                             BACKGROUND_IMAGE,
 122                                             TOOLBAR_IMAGE,
 123                                             TOOLBAR_TITLE );
 124
 125     int yPos = TOP_MARGIN + MARGIN_SIZE;
 126
 127     // Image selector radio group
 128     Actor radioGroup2Background = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 129     radioGroup2Background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 130     radioGroup2Background.SetParentOrigin( ParentOrigin::TOP_LEFT );
 131     radioGroup2Background.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 132     radioGroup2Background.SetRelayoutEnabled( true );
 133     radioGroup2Background.SetSize( DP(348), DP(GROUP2_HEIGHT) );
 134     mContentLayer.Add( radioGroup2Background );
 135
 136     Actor radioButtonsGroup2 = Actor::New();
 137     radioButtonsGroup2.SetParentOrigin( ParentOrigin::TOP_LEFT );
 138     radioButtonsGroup2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 139     radioButtonsGroup2.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 140     radioButtonsGroup2.SetRelayoutEnabled( true );
 141     radioButtonsGroup2.SetSize( DP(100), DP(160) );
 142
 143     radioGroup2Background.Add( radioButtonsGroup2 );
 144
 145     int radioY = 0;
 146
 147     // Radio 1
 148     {
 149       ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_1 ) );
 150       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 151       mRadioButtonImage1 = Dali::Toolkit::RadioButton::New( imageActor );
 152       mRadioButtonImage1.SetParentOrigin( ParentOrigin::TOP_LEFT );
 153       mRadioButtonImage1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 154       mRadioButtonImage1.SetPosition( 0, DP(radioY) );
 155       mRadioButtonImage1.SetSelected( true );
 156
 157       radioButtonsGroup2.Add( mRadioButtonImage1 );
 158     }
 159
 160     // Radio 2
 161     {
 162       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
 163
 164       ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_2 ) );
 165       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 166
 167       mRadioButtonImage2 = Dali::Toolkit::RadioButton::New( imageActor );
 168       mRadioButtonImage2.SetParentOrigin( ParentOrigin::TOP_LEFT );
 169       mRadioButtonImage2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 170       mRadioButtonImage2.SetPosition( 0, DP(radioY) );
 171
 172       radioButtonsGroup2.Add( mRadioButtonImage2 );
 173     }
 174
 175     // Radio 3
 176     {
 177       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
 178
 179       ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_3 ) );
 180       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 181
 182       mRadioButtonImage3 = Dali::Toolkit::RadioButton::New( imageActor );
 183       mRadioButtonImage3.SetParentOrigin( ParentOrigin::TOP_LEFT );
 184       mRadioButtonImage3.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 185       mRadioButtonImage3.SetPosition( 0, DP(radioY) );
 186
 187       radioButtonsGroup2.Add( mRadioButtonImage3 );
 188     }
 189
 190     // Create select button
 191     mUpdateButton = Toolkit::PushButton::New();
 192     mUpdateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 193     mUpdateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 194     mUpdateButton.SetPosition( 0, DP(MARGIN_SIZE) );
 195     mUpdateButton.SetLabel( "Select" );
 196     mUpdateButton.SetSize( DP(100), DP(BUTTON_HEIGHT) );
 197
 198     mUpdateButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
 199     mUpdateButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
 200     mUpdateButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 201
 202     mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
 203
 204     radioButtonsGroup2.Add(mUpdateButton);
 205
 206     // ImageActor to display selected image
 207     mBigImage1 = ResourceImage::New( BIG_IMAGE_1 );
 208     mBigImage2 = ResourceImage::New( BIG_IMAGE_2 );
 209     mBigImage3 = ResourceImage::New( BIG_IMAGE_3 );
 210
 211     mImage = ImageActor::New( mBigImage1 );
 212     mImage.SetParentOrigin( ParentOrigin::TOP_RIGHT );
 213     mImage.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 214     mImage.SetPosition( DP(MARGIN_SIZE), 0 );
 215     mImage.SetSize( DP(218), DP(218) );
 216     radioButtonsGroup2.Add( mImage );
 217
 218     // The enable/disable radio group
 219     yPos += GROUP2_HEIGHT + MARGIN_SIZE;
 220
 221     Actor radioGroup1Background = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 222     radioGroup1Background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 223     radioGroup1Background.SetParentOrigin( ParentOrigin::TOP_LEFT );
 224     radioGroup1Background.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 225     radioGroup1Background.SetRelayoutEnabled( true );
 226     radioGroup1Background.SetSize( DP(348), DP(GROUP1_HEIGHT) );
 227     mContentLayer.Add( radioGroup1Background );
 228
 229     // Radio group
 230     Actor radioButtonsGroup1 = Actor::New();
 231     radioButtonsGroup1.SetParentOrigin( ParentOrigin::TOP_LEFT );
 232     radioButtonsGroup1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 233     radioButtonsGroup1.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 234
 235     radioGroup1Background.Add( radioButtonsGroup1 );
 236
 237     // First radio button
 238     {
 239       Toolkit::TableView tableView = Toolkit::TableView::New( 1, 2 );
 240       tableView.SetSize( DP(260), 0.0f );
 241       tableView.SetResizePolicy( USE_NATURAL_SIZE, HEIGHT );
 242
 243       Toolkit::TextLabel textLabel = Toolkit::TextLabel::New( "Select enabled" );
 244       tableView.AddChild( textLabel, Toolkit::TableView::CellPosition( 0, 0 ) );
 245
 246       ImageActor imageActor = ImageActor::New( ResourceImage::New( ENABLED_IMAGE ) );
 247       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 248       imageActor.SetResizePolicy( FIXED, ALL_DIMENSIONS );
 249       imageActor.SetPadding( Padding( DP(20.0f), 0.0f, 0.0f, 0.0f ) );
 250       tableView.AddChild( imageActor, Toolkit::TableView::CellPosition( 0, 1 ) );
 251
 252       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( tableView );
 253       radioButton.SetName( "radio-select-enable" );
 254       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 255       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 256       radioButton.SetPosition( 0, 0 );
 257       radioButton.SetSelected( true );
 258
 259       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
 260
 261       radioButtonsGroup1.Add( radioButton );
 262     }
 263
 264     // Second radio button
 265     {
 266       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
 267       radioButton.SetName( "radio-select-disable" );
 268       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 269       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 270       radioButton.SetPosition( 0, DP(50) );
 271
 272       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
 273
 274       radioButtonsGroup1.Add( radioButton );
 275     }
 276
 277     // CheckBoxes
 278     yPos += GROUP1_HEIGHT + MARGIN_SIZE;
 279
 280     Actor checkBoxBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 281     checkBoxBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 282     checkBoxBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
 283     checkBoxBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 284     checkBoxBackground.SetRelayoutEnabled( true );
 285     checkBoxBackground.SetSize( DP(430), DP(GROUP3_HEIGHT) );
 286     mContentLayer.Add( checkBoxBackground );
 287
 288     Dali::Image unselected = Dali::ResourceImage::New( CHECKBOX_UNSELECTED_IMAGE );
 289     Dali::Image selected = Dali::ResourceImage::New( CHECKBOX_SELECTED_IMAGE );
 290
 291     int checkYPos = MARGIN_SIZE;
 292
 293     {
 294       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 295       checkBox.SetName( "checkbox1" );
 296       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 297       checkBox.SetParentOrigin( ParentOrigin::TOP_LEFT );
 298       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 299       checkBox.SetBackgroundImage( unselected );
 300       checkBox.SetSelectedImage( selected );
 301       checkBox.SetLabel( "CheckBox1 is unselected" );
 302       checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
 303
 304       checkBoxBackground.Add( checkBox );
 305     }
 306
 307     checkYPos += 60;
 308
 309     {
 310       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 311       checkBox.SetName( "checkbox2" );
 312       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 313       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 314       checkBox.SetBackgroundImage( unselected );
 315       checkBox.SetSelectedImage( selected );
 316       checkBox.SetLabel( "CheckBox2 is selected" );
 317       checkBox.SetSelected( true );
 318       checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
 319
 320       checkBoxBackground.Add( checkBox );
 321     }
 322
 323     checkYPos += 60;
 324
 325     {
 326       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 327       checkBox.SetName( "checkbox3" );
 328       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 329       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 330       checkBox.SetBackgroundImage( unselected );
 331       checkBox.SetSelectedImage( selected );
 332       checkBox.SetLabel( "CheckBox3 is unselected" );
 333       checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
 334
 335       checkBoxBackground.Add( checkBox );
 336     }
 337
 338     // Create togglabe button
 339     yPos += GROUP3_HEIGHT + MARGIN_SIZE;
 340
 341     Actor toggleBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 342     toggleBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 343     toggleBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
 344     toggleBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 345     toggleBackground.SetRelayoutEnabled( true );
 346     toggleBackground.SetSize( DP(150 + MARGIN_SIZE * 2), DP(GROUP4_HEIGHT) );
 347     mContentLayer.Add( toggleBackground );
 348
 349     Toolkit::PushButton toggleButton = Toolkit::PushButton::New();
 350     toggleButton.SetTogglableButton( true );
 351     toggleButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 352     toggleButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 353     toggleButton.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 354     toggleButton.SetLabel( "Unselected" );
 355     toggleButton.SetSize( DP(150), DP(BUTTON_HEIGHT) );
 356
 357     toggleButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
 358     toggleButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
 359     toggleButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 360
 361     toggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
 362
 363     toggleBackground.Add( toggleButton );
 364   }
 365
 366   void OnKeyEvent( const KeyEvent& event )
 367   {
 368     if( event.state == KeyEvent::Down )
 369     {
 370       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 371       {
 372         // Exit application when click back or escape.
 373         mApplication.Quit();
 374       }
 375     }
 376   }
 377
 378   bool OnButtonSelected( Toolkit::Button button )
 379   {
 380     Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
 381     if( pushButton )
 382     {
 383       if( button.IsSelected() )
 384       {
 385         pushButton.SetLabel( "Selected" );
 386       }
 387       else
 388       {
 389         pushButton.SetLabel( "Unselected" );
 390       }
 391     }
 392
 393     return true;
 394   }
 395
 396   bool EnableSelectButton( Toolkit::Button button )
 397   {
 398     if( button.GetName() == "radio-select-enable" && button.IsSelected() == true )
 399     {
 400       mUpdateButton.SetDisabled( false );
 401     }
 402     else if( button.GetName() == "radio-select-disable" && button.IsSelected() == true )
 403     {
 404       mUpdateButton.SetDisabled( true );
 405     }
 406
 407     return true;
 408   }
 409
 410   bool OnButtonClicked(Toolkit::Button button)
 411   {
 412     if( mRadioButtonImage1.IsSelected() )
 413     {
 414       mImage.SetImage( mBigImage1 );
 415     }
 416     else if( mRadioButtonImage2.IsSelected() )
 417     {
 418       mImage.SetImage( mBigImage2 );
 419     }
 420     else if( mRadioButtonImage3.IsSelected() )
 421     {
 422       mImage.SetImage( mBigImage3 );
 423     }
 424     return true;
 425   }
 426
 427   bool OnCheckBoxesSelected( Toolkit::Button button )
 428   {
 429     if( button.GetName() == "checkbox1" )
 430     {
 431       if( button.IsSelected() )
 432       {
 433         button.SetLabel("CheckBox1 is selected");
 434       }
 435       else
 436       {
 437         button.SetLabel("CheckBox1 is unselected");
 438       }
 439     }
 440
 441     if( button.GetName() == "checkbox2" )
 442     {
 443       if( button.IsSelected() )
 444       {
 445         button.SetLabel("CheckBox2 is selected");
 446       }
 447       else
 448       {
 449         button.SetLabel("CheckBox2 is unselected");
 450       }
 451     }
 452
 453     if( button.GetName() == "checkbox3" )
 454     {
 455       if( button.IsSelected() )
 456       {
 457         button.SetLabel("CheckBox3 is selected");
 458       }
 459       else
 460       {
 461         button.SetLabel("CheckBox3 is unselected");
 462       }
 463     }
 464
 465     return true;
 466   }
 467
 468  private:
 469
 470   Application&      mApplication;
 471   Toolkit::View     mView;                              ///< The View instance.
 472   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
 473   Layer             mContentLayer;                      ///< Content layer
 474
 475   Toolkit::RadioButton mRadioButtonImage1;
 476   Toolkit::RadioButton mRadioButtonImage2;
 477   Toolkit::RadioButton mRadioButtonImage3;
 478
 479   Toolkit::PushButton mUpdateButton;
 480
 481   Image mBigImage1;
 482   Image mBigImage2;
 483   Image mBigImage3;
 484   ImageActor mImage;
 485 };
 486
 487 void RunTest( Application& application )
 488 {
 489   ButtonsController test( application );
 490
 491   application.MainLoop();
 492 }
 493
 494 // Entry point for Linux & Tizen applications
 495 //
 496 int main( int argc, char **argv )
 497 {
 498   Application application = Application::New( &argc, &argv );
 499
 500   RunTest( application );
 501
 502   return 0;
 503 }