dali-toolkit/styles/480x800/dali-toolkit-default-theme.json

   1 /*
   2  * Copyright (c) 2016 Samsung Electronics Co., Ltd.
   3  *
   4  * This file is part of Dali Toolkit
   5  *
   6  * Licensed under the Apache License, Version 2.0 (the "License");
   7  * you may not use this file except in compliance with the License.
   8  * You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software
  13  * distributed under the License is distributed on an "AS IS" BASIS,
  14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  * See the License for the specific language governing permissions and
  16  * limitations under the License.
  17  */
  18
  19
  20 //******************************************************************************
  21 //
  22 // Default Reference style theme for a 480x800 resolution, The values determined by UX design specification.
  23 // This file can be copied to a new folder within the styles/ directory and amended with new default values.
  24 // Can be overriden if StyleManager applies another style sheet.
  25 //
  26 //******************************************************************************
  27
  28 {
  29   "config":
  30   {
  31     "brokenImageUrl":"{DALI_IMAGE_DIR}broken.png",
  32     "alwaysShowFocus":false,
  33     "clearFocusOnEscape":true
  34   },
  35   "styles":
  36   {
  37     "Tooltip":
  38     {
  39       "tooltip":
  40       {
  41         "content":
  42         {
  43           "pointSize":12
  44         },
  45         "waitTime":0.5,
  46         "background":
  47         {
  48           "visual":"{DALI_IMAGE_DIR}tooltip.9.png",
  49           "border":[1,5,5,1]
  50         },
  51         "tail":
  52         {
  53           "visibility":false,
  54           "aboveVisual":"{DALI_IMAGE_DIR}tooltip-tail-above.png",
  55           "belowVisual":"{DALI_IMAGE_DIR}tooltip-tail-below.png"
  56         },
  57         "position":"BELOW",
  58         "hoverPointOffset":[10,10],
  59         "movementThreshold":5,
  60         "disappearOnMovement":false
  61       }
  62     },
  63     "TextLabel":
  64     {
  65       "pointSize":18,
  66       "enableAutoScroll":false,
  67       "autoScrollLoopCount":2,
  68       "autoScrollGap":50,
  69       "autoScrollSpeed":80
  70     },
  71
  72     "TextLabelFontSize0":
  73     {
  74       "pointSize":8
  75     },
  76     "TextLabelFontSize1":
  77     {
  78       "pointSize":10
  79     },
  80     "TextLabelFontSize2":
  81     {
  82       "pointSize":15
  83     },
  84     "TextLabelFontSize3":
  85     {
  86       "pointSize":19
  87     },
  88     "TextLabelFontSize4":
  89     {
  90       "pointSize":25
  91     },
  92     "TextField":
  93     {
  94       "pointSize":18,
  95       "primaryCursorColor":[0.0,0.72,0.9,1.0],
  96       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
  97       "cursorWidth":1,
  98       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
  99       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
 100       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
 101       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
 102       "enableSelection":true
 103     },
 104
 105     "TextFieldFontSize0":
 106     {
 107       "pointSize":10
 108     },
 109     "TextFieldFontSize1":
 110     {
 111       "pointSize":10
 112     },
 113     "TextFieldFontSize2":
 114     {
 115       "pointSize":10
 116     },
 117     "TextFieldFontSize3":
 118     {
 119       "pointSize":10
 120     },
 121     "TextFieldFontSize4":
 122     {
 123       "pointSize":10
 124     },
 125     "TextSelectionPopup":
 126     {
 127       "popupMaxSize":[400,100],
 128       "optionDividerSize":[2,0],
 129       "popupDividerColor":[0.23,0.72,0.8,0.11],
 130       "popupIconColor":[1.0,1.0,1.0,1.0],
 131       "popupPressedColor":[0.24,0.72,0.8,0.11],
 132       "background": {
 133         "visualType": "IMAGE",
 134         "url": "{DALI_IMAGE_DIR}selection-popup-background.9.png"
 135         },
 136       "backgroundBorder": {
 137         "visualType": "IMAGE",
 138         "url": "{DALI_IMAGE_DIR}selection-popup-border.9.png",
 139         "mixColor":[0.24,0.72,0.8,1.0]
 140         },
 141       "popupFadeInDuration":0.25,
 142       "popupFadeOutDuration":0.25
 143     },
 144     "TextSelectionPopupButton":
 145     {
 146       "label":
 147       {
 148         "visualType":"TEXT",
 149         "pointSize":8
 150       },
 151       "unselectedBackgroundVisual":
 152       {
 153         "visualType": "IMAGE",
 154         "url": ""
 155       },
 156       "selectedBackgroundVisual":
 157       {
 158         "visualType": "IMAGE",
 159         "url": ""
 160       }
 161     },
 162     "TextSelectionToolbar":
 163     {
 164       "enableOvershoot":true,
 165       "enableScrollBar":true,
 166       "scrollView":
 167       {
 168         "overshootAnimationSpeed":120.0,
 169         "overshootSize":[480.0,42.0]
 170       }
 171     },
 172     "TextSelectionScrollBar":
 173     {
 174       "indicatorShowDuration":0.25,
 175       "indicatorHideDuration":0.25,
 176       "indicatorTransientDuration":1.0
 177     },
 178     "TextSelectionScrollIndicator":
 179     {
 180       "image":
 181       {
 182         "visualType":"IMAGE",
 183         "url":"{DALI_IMAGE_DIR}text_selection_scroll_indicator.9.png" // designed for HD resolution
 184       },
 185       "color":[0.0,0.72,0.9,0.7],
 186       "scale":[0.625,1.0,1.0] // Note: This reduces height for WVGA resolution
 187     },
 188     "ScrollView":
 189     {
 190       "overshootEffectColor":"B018",
 191       "overshootAnimationSpeed":120.0,
 192       "overshootSize":[480.0,42.0]
 193     },
 194     "ItemView":
 195     {
 196       "overshootEffectColor":"B018",
 197       "overshootAnimationSpeed":120.0,
 198       "overshootSize":[480.0,42.0]
 199     },
 200     "ScrollBar":
 201     {
 202       "indicatorShowDuration":0.25,
 203       "indicatorHideDuration":0.25
 204     },
 205     "ScrollBarIndicator":
 206     {
 207       "image":
 208       {
 209         "visualType":"IMAGE",
 210         "url":"{DALI_IMAGE_DIR}popup_scroll.9.png"
 211       }
 212     },
 213     "TextEditor":
 214     {
 215       "pointSize":18,
 216       "primaryCursorColor":[0.0,0.72,0.9,1.0],
 217       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
 218       "cursorWidth":1,
 219       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
 220       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
 221       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
 222       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
 223       "enableScrollBar":true,
 224       "scrollBarShowDuration":0.8,
 225       "scrollBarFadeDuration":0.5,
 226       "enableSelection":true
 227     },
 228     "Popup":
 229     {
 230       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
 231       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
 232       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
 233       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
 234       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
 235       "popupBackgroundBorder":[17,17,13,13]
 236     },
 237     "ConfirmationPopup":
 238     {
 239       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
 240       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
 241       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
 242       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
 243       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
 244       "popupBackgroundBorder":[17,17,13,13]
 245     },
 246     "Slider":
 247     {
 248       "showPopup": true,
 249       "showValue": true,
 250       "valuePrecision": 0,
 251       "trackVisual":{
 252         "url":"{DALI_IMAGE_DIR}slider-skin.9.png",
 253         "size":[27,27]
 254       },
 255       "progressVisual":{
 256         "url":"{DALI_IMAGE_DIR}slider-skin-progress.9.png",
 257         "size":[27,27]
 258       },
 259       "handleVisual":{
 260         "url":"{DALI_IMAGE_DIR}slider-skin-handle.png",
 261         "size":[72,72]
 262       },
 263       "popupVisual":"{DALI_IMAGE_DIR}slider-popup.9.png",
 264       "popupArrowVisual":"{DALI_IMAGE_DIR}slider-popup-arrow.9.png",
 265       "disableColor":[0.5, 0.5, 0.5, 1.0],
 266       "popupTextColor":[0.5,0.5,0.5,1.0],
 267       "hitRegion":[0, 72],
 268       "marks":[],
 269       "snapToMarks":false,
 270       "markTolerance":0.05
 271     },
 272     "SliderHandleTextLabel":
 273     {
 274       "textColor":[0.8,0.8,1,1]
 275     },
 276     "ProgressBar":
 277     {
 278       "trackVisual":{
 279         "visualType":"IMAGE",
 280         "url":"{DALI_IMAGE_DIR}progress-bar-skin-track.9.png"
 281       },
 282       "progressVisual":{
 283         "visualType":"IMAGE",
 284         "url":"{DALI_IMAGE_DIR}progress-bar-skin-progress.9.png"
 285       },
 286       "secondaryProgressVisual":{
 287         "visualType":"IMAGE",
 288         "url":"{DALI_IMAGE_DIR}progress-bar-skin-secondary-progress.9.png"
 289       },
 290       "indeterminateVisual":{
 291         "visualType":"IMAGE",
 292         "pixelArea":[0.0, 0.0, 10.0, 1.0],
 293         "wrapModeU":"REPEAT",
 294         "url":"{DALI_IMAGE_DIR}progress-bar-skin-indeterminate.png"
 295       },
 296       "indeterminateVisualAnimation":
 297       [
 298         {
 299           "target":"indeterminateVisual",
 300           "property":"pixelArea",
 301           "initialValue":[0.0, 0.0, 10.0, 1.0],
 302           "targetValue":[-1.0, 0.0, 10.0, 1.0],
 303           "animator":
 304           {
 305             "alphaFunction":"DEFAULT",
 306             "timePeriod":
 307             {
 308               "duration":0.8,
 309               "delay":0
 310             }
 311           }
 312         }
 313       ],
 314       "labelVisual":{
 315         "visualType": "TEXT",
 316         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
 317         "pointSize" : 12.0, // Point size must always be provided to Text Visual
 318         "horizontalAlignment": "CENTER",
 319         "verticalAlignment": "CENTER"
 320       },
 321       "progressValue": 0.0,
 322       "secondaryProgressValue":0.0,
 323       "indeterminate": false
 324     },
 325     "CircularProgressBar":
 326     {
 327       "size":[64,64],
 328       "trackVisual":{
 329         "visualType":"ARC",
 330         "mixColor":[0.0,0.165,0.302,1.0],
 331         "thickness":4.0,
 332         "startAngle":0.0,
 333         "cap":"ROUND"
 334       },
 335       "progressVisual":{
 336         "visualType":"ARC",
 337         "mixColor":[0.0,0.549,1.0,1.0],
 338         "thickness":4.0,
 339         "startAngle":0.0,
 340         "cap":"ROUND"
 341       },
 342       "secondaryProgressVisual":{
 343         "visualType":"ARC",
 344         "mixColor":[0.0,0.549,1.0,0.3],
 345         "thickness":4.0,
 346         "startAngle":0.0,
 347         "cap":"ROUND"
 348       },
 349       "indeterminateVisual":{
 350         "visualType":"ARC",
 351         "mixColor":[0.02,0.71,0.525,1.0],
 352         "thickness":4.0,
 353         "startAngle":267.0,
 354         "sweepAngle":75.0,
 355         "cap":"ROUND"
 356       },
 357       "indeterminateVisualAnimation":
 358       [
 359         {
 360           "target":"trackVisual",
 361           "property":"opacity",
 362           "targetValue": 0,
 363           "animator":
 364           {
 365             "alphaFunction":"DEFAULT",
 366             "timePeriod":
 367             {
 368               "duration":0,
 369               "delay":0
 370             }
 371           }
 372         },
 373         {
 374           "target":"secondaryProgressVisual",
 375           "property":"opacity",
 376           "targetValue": 0,
 377           "animator":
 378           {
 379             "alphaFunction":"DEFAULT",
 380             "timePeriod":
 381             {
 382               "duration":0,
 383               "delay":0
 384             }
 385           }
 386         },
 387         {
 388           "target":"progressVisual",
 389           "property":"sweepAngle",
 390           "initialValue": 75,
 391           "targetValue": 180,
 392           "animator":
 393           {
 394             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
 395             "timePeriod":
 396             {
 397               "duration":1.0,
 398               "delay":0.0
 399             }
 400           }
 401         },
 402         {
 403           "target":"progressVisual",
 404           "property":"sweepAngle",
 405           "targetValue": 75,
 406           "animator":
 407           {
 408             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
 409             "timePeriod":
 410             {
 411               "duration":1.0,
 412               "delay":2.0
 413             }
 414           }
 415         },
 416         {
 417           "target":"progressVisual",
 418           "property":"startAngle",
 419           "initialValue": 87,
 420           "targetValue": 1887,
 421           "animator":
 422           {
 423             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
 424             "timePeriod":
 425             {
 426               "duration":3.0,
 427               "delay":0.0
 428             }
 429           }
 430         },
 431         {
 432           "target":"indeterminateVisual",
 433           "property":"sweepAngle",
 434           "initialValue": 75,
 435           "targetValue": 180,
 436           "animator":
 437           {
 438             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
 439             "timePeriod":
 440             {
 441               "duration":1.0,
 442               "delay":0.0
 443             }
 444           }
 445         },
 446         {
 447           "target":"indeterminateVisual",
 448           "property":"sweepAngle",
 449           "targetValue": 75,
 450           "animator":
 451           {
 452             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
 453             "timePeriod":
 454             {
 455               "duration":1.0,
 456               "delay":2.0
 457             }
 458           }
 459         },
 460         {
 461           "target":"indeterminateVisual",
 462           "property":"startAngle",
 463           "initialValue": 267,
 464           "targetValue": 2067,
 465           "animator":
 466           {
 467             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
 468             "timePeriod":
 469             {
 470               "duration":3.0,
 471               "delay":0.0
 472             }
 473           }
 474         }
 475       ],
 476       "labelVisual":{
 477         "visualType": "TEXT",
 478         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
 479         "pointSize" : 12.0, // Point size must always be provided to Text Visual
 480         "horizontalAlignment": "CENTER",
 481         "verticalAlignment": "CENTER"
 482       },
 483       "progressValue": 0.2,
 484       "secondaryProgressValue":0.4,
 485       "indeterminate": false
 486     },
 487     "Button":
 488     {
 489       "styles":["Tooltip"],
 490       "initialAutoRepeatingDelay":2.0,
 491       "nextAutoRepeatingDelay":0.9
 492       // Note: Visuals added to Button will be used in all derived buttons unless overridden.
 493     },
 494     "PushButton":
 495     {
 496       "styles":["Button"],
 497       "autoRepeating":false,
 498       "togglable":false,
 499       "labelPadding":[ 12.0, 12.0, 12.0, 12.0 ],
 500       "label":
 501        {
 502          "visualType": "TEXT",
 503          "horizontalAlignment": "CENTER",
 504          "pointSize" : 15.0, // Point size must always be provided to Text Visual
 505          "verticalAlignment": "CENTER"
 506        },
 507       "unselectedBackgroundVisual":
 508        {
 509          "visualType": "IMAGE",
 510          "url": "{DALI_IMAGE_DIR}button-up.9.png"
 511        },
 512        "selectedBackgroundVisual":
 513        {
 514          "visualType": "IMAGE",
 515          "url": "{DALI_IMAGE_DIR}button-down.9.png"
 516        },
 517        "disabledSelectedBackgroundVisual":
 518        {
 519          "visualType": "IMAGE",
 520          "url": "{DALI_IMAGE_DIR}button-down-disabled.9.png"
 521        },
 522        "disabledUnselectedBackgroundVisual":
 523        {
 524          "visualType": "IMAGE",
 525          "url": "{DALI_IMAGE_DIR}button-disabled.9.png"
 526        }
 527     },
 528     "ToggleButton":
 529     {
 530       "styles":["Button"]
 531     },
 532     "CheckBoxButton":
 533     {
 534       "styles":["Button"],
 535       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
 536       "label":
 537        {
 538          "visualType": "TEXT",
 539          "pointSize" : 15.0, // Point size must always be provided to Text Visual
 540          "verticalAlignment": "CENTER"
 541        },
 542       "unselectedVisual":
 543       {
 544         "visualType": "IMAGE",
 545         "url": "{DALI_IMAGE_DIR}checkbox-unselected.png"
 546       },
 547       "selectedVisual":
 548       {
 549         "visualType": "IMAGE",
 550         "url": "{DALI_IMAGE_DIR}checkbox-selected.png"
 551       },
 552       "disabledUnselectedVisual":
 553       {
 554         "visualType": "IMAGE",
 555         "url": "{DALI_IMAGE_DIR}checkbox-unselected-disabled.png"
 556       },
 557       "disabledSelectedVisual":
 558       {
 559         "visualType": "IMAGE",
 560         "url": "{DALI_IMAGE_DIR}checkbox-selected-disabled.png"
 561       }
 562     },
 563     "RadioButton":
 564     {
 565       "styles":["Button"],
 566       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
 567       "label":
 568        {
 569          "visualType": "TEXT",
 570          "pointSize" : 15.0, // Point size must always be provided to Text Visual
 571          "verticalAlignment": "CENTER"
 572        },
 573       "unselectedVisual":
 574       {
 575         "visualType": "IMAGE",
 576         "url": "{DALI_IMAGE_DIR}radio-button-unselected.png"
 577       },
 578       "selectedVisual":
 579       {
 580         "visualType": "IMAGE",
 581         "url": "{DALI_IMAGE_DIR}radio-button-selected.png"
 582       },
 583       "disabledUnselectedVisual":
 584       {
 585         "visualType": "IMAGE",
 586         "url": "{DALI_IMAGE_DIR}radio-button-unselected-disabled.png"
 587       },
 588       "disabledSelectedVisual":
 589       {
 590         "visualType": "IMAGE",
 591         "url": "{DALI_IMAGE_DIR}radio-button-selected-disabled.png"
 592       }
 593     }
 594   }
 595 }