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     // 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( ResourceImage::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.SetSelected( 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( ResourceImage::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( ResourceImage::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.SetLabel("Select");
 192     mUpdateButton.SetSize( DP(100), DP(BUTTON_HEIGHT) );
 193
 194     mUpdateButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
 195     mUpdateButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
 196     mUpdateButton.SetButtonImage( Dali::ResourceImage::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 = ResourceImage::New( BIG_IMAGE_1 );
 204     mBigImage2 = ResourceImage::New( BIG_IMAGE_2 );
 205     mBigImage3 = ResourceImage::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       Toolkit::TextView textView = Toolkit::TextView::New( "Select enabled" );
 238       Toolkit::Alignment alignment = Toolkit::Alignment::New( Toolkit::Alignment::HorizontalLeft );
 239       alignment.Add( textView );
 240       tableView.AddChild( alignment, Toolkit::TableView::CellPosition( 0, 0 ) );
 241
 242       ImageActor imageActor = ImageActor::New( ResourceImage::New( ENABLED_IMAGE ) );
 243       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 244       tableView.AddChild( imageActor, Toolkit::TableView::CellPosition( 0, 1 ) );
 245       tableView.SetFixedWidth( 1, DP(RADIO_LABEL_THUMBNAIL_SIZE) );
 246
 247       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( tableView );
 248       radioButton.SetName( "radio-select-enable" );
 249       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 250       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 251       radioButton.SetPosition( 0, 0 );
 252       radioButton.SetSelected( true );
 253
 254       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
 255
 256       radioButtonsGroup1.Add( radioButton );
 257     }
 258
 259     // Second radio button
 260     {
 261       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
 262       radioButton.SetName( "radio-select-disable" );
 263       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 264       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 265       radioButton.SetPosition( 0, DP(50) );
 266
 267       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
 268
 269       radioButtonsGroup1.Add( radioButton );
 270     }
 271
 272     // CheckBoxes
 273     yPos += GROUP1_HEIGHT + MARGIN_SIZE;
 274
 275     Actor checkBoxBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 276     checkBoxBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 277     checkBoxBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
 278     checkBoxBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 279     checkBoxBackground.SetSize( DP(430), DP(GROUP3_HEIGHT) );
 280     mContentLayer.Add( checkBoxBackground );
 281
 282     Dali::Image unselected = Dali::ResourceImage::New( CHECKBOX_UNSELECTED_IMAGE );
 283     Dali::Image selected = Dali::ResourceImage::New( CHECKBOX_SELECTED_IMAGE );
 284
 285     int checkYPos = MARGIN_SIZE;
 286
 287     {
 288       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 289       checkBox.SetName( "checkbox1" );
 290       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 291       checkBox.SetParentOrigin( ParentOrigin::TOP_LEFT );
 292       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 293       checkBox.SetBackgroundImage( unselected );
 294       checkBox.SetSelectedImage( selected );
 295       checkBox.SetLabel( "CheckBox1 is unselected" );
 296       checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
 297
 298       checkBoxBackground.Add( checkBox );
 299     }
 300
 301     checkYPos += 60;
 302
 303     {
 304       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 305       checkBox.SetName( "checkbox2" );
 306       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 307       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 308       checkBox.SetBackgroundImage( unselected );
 309       checkBox.SetSelectedImage( selected );
 310       checkBox.SetLabel( "CheckBox2 is selected" );
 311       checkBox.SetSelected( true );
 312       checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
 313
 314       checkBoxBackground.Add( checkBox );
 315     }
 316
 317     checkYPos += 60;
 318
 319     {
 320       Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 321       checkBox.SetName( "checkbox3" );
 322       checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
 323       checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 324       checkBox.SetBackgroundImage( unselected );
 325       checkBox.SetSelectedImage( selected );
 326       checkBox.SetLabel( "CheckBox3 is unselected" );
 327       checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
 328
 329       checkBoxBackground.Add( checkBox );
 330     }
 331
 332     // Create togglabe button
 333     yPos += GROUP3_HEIGHT + MARGIN_SIZE;
 334
 335     Actor toggleBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
 336     toggleBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 337     toggleBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
 338     toggleBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
 339     toggleBackground.SetSize( DP(150 + MARGIN_SIZE * 2), DP(GROUP4_HEIGHT) );
 340     mContentLayer.Add( toggleBackground );
 341
 342     Toolkit::PushButton toggleButton = Toolkit::PushButton::New();
 343     toggleButton.SetTogglableButton( true );
 344     toggleButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
 345     toggleButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 346     toggleButton.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
 347     toggleButton.SetLabel( "Unselected" );
 348     toggleButton.SetSize( DP(150), DP(BUTTON_HEIGHT) );
 349
 350     toggleButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
 351     toggleButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
 352     toggleButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 353
 354     toggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
 355
 356     toggleBackground.Add( toggleButton );
 357   }
 358
 359   void OnKeyEvent( const KeyEvent& event )
 360   {
 361     if( event.state == KeyEvent::Down )
 362     {
 363       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 364       {
 365         // Exit application when click back or escape.
 366         mApplication.Quit();
 367       }
 368     }
 369   }
 370
 371   bool OnButtonSelected( Toolkit::Button button )
 372   {
 373     Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
 374     if( pushButton )
 375     {
 376       if( button.IsSelected() )
 377       {
 378         pushButton.SetLabel( "Selected" );
 379       }
 380       else
 381       {
 382         pushButton.SetLabel( "Unselected" );
 383       }
 384     }
 385
 386     return true;
 387   }
 388
 389   bool EnableSelectButton( Toolkit::Button button )
 390   {
 391     if( button.GetName() == "radio-select-enable" && button.IsSelected() == true )
 392     {
 393       mUpdateButton.SetDisabled( false );
 394     }
 395     else if( button.GetName() == "radio-select-disable" && button.IsSelected() == true )
 396     {
 397       mUpdateButton.SetDisabled( true );
 398     }
 399
 400     return true;
 401   }
 402
 403   bool OnButtonClicked(Toolkit::Button button)
 404   {
 405     if( mRadioButtonImage1.IsSelected() )
 406     {
 407       mImage.SetImage( mBigImage1 );
 408     }
 409     else if( mRadioButtonImage2.IsSelected() )
 410     {
 411       mImage.SetImage( mBigImage2 );
 412     }
 413     else if( mRadioButtonImage3.IsSelected() )
 414     {
 415       mImage.SetImage( mBigImage3 );
 416     }
 417     return true;
 418   }
 419
 420   bool OnCheckBoxesSelected( Toolkit::Button button )
 421   {
 422     if( button.GetName() == "checkbox1" )
 423     {
 424       if( button.IsSelected() )
 425       {
 426         button.SetLabel("CheckBox1 is selected");
 427       }
 428       else
 429       {
 430         button.SetLabel("CheckBox1 is unselected");
 431       }
 432     }
 433
 434     if( button.GetName() == "checkbox2" )
 435     {
 436       if( button.IsSelected() )
 437       {
 438         button.SetLabel("CheckBox2 is selected");
 439       }
 440       else
 441       {
 442         button.SetLabel("CheckBox2 is unselected");
 443       }
 444     }
 445
 446     if( button.GetName() == "checkbox3" )
 447     {
 448       if( button.IsSelected() )
 449       {
 450         button.SetLabel("CheckBox3 is selected");
 451       }
 452       else
 453       {
 454         button.SetLabel("CheckBox3 is unselected");
 455       }
 456     }
 457
 458     return true;
 459   }
 460
 461  private:
 462
 463   Application&      mApplication;
 464   Toolkit::View     mView;                              ///< The View instance.
 465   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
 466   Layer             mContentLayer;                      ///< Content layer
 467
 468   Toolkit::RadioButton mRadioButtonImage1;
 469   Toolkit::RadioButton mRadioButtonImage2;
 470   Toolkit::RadioButton mRadioButtonImage3;
 471
 472   Toolkit::PushButton mUpdateButton;
 473
 474   Image mBigImage1;
 475   Image mBigImage2;
 476   Image mBigImage3;
 477   ImageActor mImage;
 478 };
 479
 480 void RunTest( Application& application )
 481 {
 482   ButtonsController test( application );
 483
 484   application.MainLoop();
 485 }
 486
 487 // Entry point for Linux & Tizen applications
 488 //
 489 int main( int argc, char **argv )
 490 {
 491   Application application = Application::New( &argc, &argv );
 492
 493   RunTest( application );
 494
 495   return 0;
 496 }