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