dali-toolkit/styles/360x360/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     "alwaysShowFocus":false,
  32     "clearFocusOnEscape":true
  33   },
  34   "styles":
  35   {
  36     "TextLabel":
  37     {
  38       "pointSize":18,
  39       "enableAutoScroll":false,
  40       "autoScrollLoopCount":2,
  41       "autoScrollGap":50,
  42       "autoScrollSpeed":80
  43     },
  44
  45     "TextLabelFontSize0":
  46     {
  47       "pointSize":8
  48     },
  49     "TextLabelFontSize1":
  50     {
  51       "pointSize":10
  52     },
  53     "TextLabelFontSize2":
  54     {
  55       "pointSize":15
  56     },
  57     "TextLabelFontSize3":
  58     {
  59       "pointSize":19
  60     },
  61     "TextLabelFontSize4":
  62     {
  63       "pointSize":25
  64     },
  65     "TextField":
  66     {
  67       "pointSize":10,
  68       "primaryCursorColor":[0.07,0.70,1.0,1.0],
  69       "secondaryCursorColor":[0.07,0.70,1.0,1.0],
  70       "cursorWidth":3,
  71       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
  72       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
  73       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
  74       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
  75       "enableSelection":true,
  76       "textColor":[0.99,0.99,0.99,1.0],
  77       "background": {
  78         "visualType": "COLOR",
  79         "mixColor":[0.0,0.0,0.0,1.0]
  80         },
  81       "textBackground":[0.0,0.0,0.0,1.0]
  82     },
  83
  84     "TextFieldFontSize0":
  85     {
  86       "pointSize":10
  87     },
  88     "TextFieldFontSize1":
  89     {
  90       "pointSize":10
  91     },
  92     "TextFieldFontSize2":
  93     {
  94       "pointSize":10
  95     },
  96     "TextFieldFontSize3":
  97     {
  98       "pointSize":10
  99     },
 100     "TextFieldFontSize4":
 101     {
 102       "pointSize":10
 103     },
 104     "TextSelectionPopup":
 105     {
 106       "popupMaxSize":[656,72],
 107       "optionDividerSize":[2,0],
 108       "popupDividerColor":[0.23,0.72,0.8,0.11],
 109       "popupIconColor":[1.0,1.0,1.0,1.0],
 110       "popupPressedColor":[0.24,0.72,0.8,0.11],
 111       "background": {
 112         "visualType": "IMAGE",
 113         "url": "{DALI_IMAGE_DIR}selection-popup-background.9.png"
 114         },
 115       "backgroundBorder": {
 116         "visualType": "IMAGE",
 117         "url": "{DALI_IMAGE_DIR}selection-popup-border.9.png",
 118         "mixColor":[0.24,0.72,0.8,1.0]
 119         },
 120       "popupFadeInDuration":0.25,
 121       "popupFadeOutDuration":0.25
 122     },
 123     "TextSelectionPopupButton":
 124     {
 125       "label":
 126       {
 127         "visualType":"TEXT",
 128         "pointSize":8
 129       },
 130       "unselectedBackgroundVisual":
 131       {
 132         "visualType": "IMAGE",
 133         "url": ""
 134       },
 135       "selectedBackgroundVisual":
 136       {
 137         "visualType": "IMAGE",
 138         "url": ""
 139       }
 140     },
 141     "TextSelectionToolbar":
 142     {
 143       "enableOvershoot":true,
 144       "enableScrollBar":true,
 145       "scrollView":
 146       {
 147         "overshootAnimationSpeed":360.0,
 148         "overshootSize":[720.0,130.0]
 149       }
 150     },
 151     "TextSelectionScrollBar":
 152     {
 153       "indicatorShowDuration":0.25,
 154       "indicatorHideDuration":0.25,
 155       "indicatorTransientDuration":1.0
 156     },
 157     "TextSelectionScrollIndicator":
 158     {
 159       "image":
 160       {
 161         "visualType":"IMAGE",
 162         "url":"{DALI_IMAGE_DIR}text_selection_scroll_indicator.9.png"
 163       },
 164       "color":[0.0,0.72,0.9,0.7]
 165     },
 166     "ScrollView":
 167     {
 168       "overshootEffectColor":"B018",
 169       "overshootAnimationSpeed":360.0,
 170       "overshootSize":[720.0,130.0]
 171     },
 172     "ItemView":
 173     {
 174       "overshootEffectColor":"B018",
 175       "overshootAnimationSpeed":360.0,
 176       "overshootSize":[720.0,130.0]
 177     },
 178     "ScrollBar":
 179     {
 180       "indicatorShowDuration":0.25,
 181       "indicatorHideDuration":0.25,
 182       "color":[0.0,0.72,0.9,0.7]
 183     },
 184     "TextEditor":
 185     {
 186       "pointSize":18,
 187       "primaryCursorColor":[0.0,0.72,0.9,1.0],
 188       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
 189       "cursorWidth":3,
 190       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
 191       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
 192       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
 193       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
 194       "enableScrollBar":true,
 195       "scrollBarShowDuration":0.8,
 196       "scrollBarFadeDuration":0.5,
 197       "enableSelection":true
 198     },
 199     "Popup":
 200     {
 201       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
 202       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
 203       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
 204       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
 205       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
 206       "popupBackgroundBorder":[17,17,13,13]
 207     },
 208     "ConfirmationPopup":
 209     {
 210       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
 211       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
 212       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
 213       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
 214       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
 215       "popupBackgroundBorder":[17,17,13,13]
 216     },
 217     "Slider":
 218     {
 219       "showPopup": true,
 220       "showValue": true,
 221       "valuePrecision": 0,
 222       "trackVisual":{
 223         "url":"{DALI_IMAGE_DIR}slider-skin.9.png",
 224         "size":[27,27]
 225       },
 226       "progressVisual":{
 227         "url":"{DALI_IMAGE_DIR}slider-skin-progress.9.png",
 228         "size":[27,27]
 229       },
 230       "handleVisual":{
 231         "url":"{DALI_IMAGE_DIR}slider-skin-handle.png",
 232         "size":[72,72]
 233       },
 234       "popupVisual":"{DALI_IMAGE_DIR}slider-popup.9.png",
 235       "popupArrowVisual":"{DALI_IMAGE_DIR}slider-popup-arrow.9.png",
 236       "disableColor":[0.5, 0.5, 0.5, 1.0],
 237       "popupTextColor":[0.5,0.5,0.5,1.0],
 238       "hitRegion":[0, 72],
 239       "marks":[],
 240       "snapToMarks":false,
 241       "markTolerance":0.05
 242     },
 243     "SliderHandleTextLabel":
 244     {
 245       "textColor":[0.8,0.8,1,1]
 246     },
 247     "ProgressBar":
 248     {
 249       "trackVisual":{
 250         "visualType":"IMAGE",
 251         "url":"{DALI_IMAGE_DIR}progress-bar-skin-track.9.png"
 252       },
 253       "progressVisual":{
 254         "visualType":"IMAGE",
 255         "url":"{DALI_IMAGE_DIR}progress-bar-skin-progress.9.png"
 256       },
 257       "secondaryProgressVisual":{
 258         "visualType":"IMAGE",
 259         "url":"{DALI_IMAGE_DIR}progress-bar-skin-secondary-progress.9.png"
 260       },
 261       "indeterminateVisual":{
 262         "visualType":"IMAGE",
 263         "pixelArea":[0.0, 0.0, 10.0, 1.0],
 264         "wrapModeU":"REPEAT",
 265         "url":"{DALI_IMAGE_DIR}progress-bar-skin-indeterminate.png"
 266       },
 267       "indeterminateVisualAnimation":
 268       [
 269         {
 270           "target":"indeterminateVisual",
 271           "property":"pixelArea",
 272           "initialValue":[0.0, 0.0, 10.0, 1.0],
 273           "targetValue":[-1.0, 0.0, 10.0, 1.0],
 274           "animator":
 275           {
 276             "alphaFunction":"DEFAULT",
 277             "timePeriod":
 278             {
 279               "duration":0.8,
 280               "delay":0
 281             }
 282           }
 283         }
 284       ],
 285       "labelVisual":{
 286         "visualType": "TEXT",
 287         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
 288         "pointSize" : 12.0, // Point size must always be provided to Text Visual
 289         "horizontalAlignment": "CENTER",
 290         "verticalAlignment": "CENTER"
 291       },
 292       "progressValue": 0.0,
 293       "secondaryProgressValue":0.0,
 294       "indeterminate": false
 295     },
 296     "CircularProgressBar":
 297     {
 298       "size":[64,64],
 299       "trackVisual":{
 300         "visualType":"ARC",
 301         "mixColor":[0.0,0.165,0.302,1.0],
 302         "thickness":4.0,
 303         "startAngle":0.0,
 304         "cap":"ROUND"
 305       },
 306       "progressVisual":{
 307         "visualType":"ARC",
 308         "mixColor":[0.0,0.549,1.0,1.0],
 309         "thickness":4.0,
 310         "startAngle":0.0,
 311         "cap":"ROUND"
 312       },
 313       "secondaryProgressVisual":{
 314         "visualType":"ARC",
 315         "mixColor":[0.0,0.549,1.0,0.3],
 316         "thickness":4.0,
 317         "startAngle":0.0,
 318         "cap":"ROUND"
 319       },
 320       "indeterminateVisual":{
 321         "visualType":"ARC",
 322         "mixColor":[0.02,0.71,0.525,1.0],
 323         "thickness":4.0,
 324         "startAngle":267.0,
 325         "sweepAngle":75.0,
 326         "cap":"ROUND"
 327       },
 328       "indeterminateVisualAnimation":
 329       [
 330         {
 331           "target":"trackVisual",
 332           "property":"opacity",
 333           "targetValue": 0,
 334           "animator":
 335           {
 336             "alphaFunction":"DEFAULT",
 337             "timePeriod":
 338             {
 339               "duration":0,
 340               "delay":0
 341             }
 342           }
 343         },
 344         {
 345           "target":"secondaryProgressVisual",
 346           "property":"opacity",
 347           "targetValue": 0,
 348           "animator":
 349           {
 350             "alphaFunction":"DEFAULT",
 351             "timePeriod":
 352             {
 353               "duration":0,
 354               "delay":0
 355             }
 356           }
 357         },
 358         {
 359           "target":"progressVisual",
 360           "property":"sweepAngle",
 361           "initialValue": 75,
 362           "targetValue": 180,
 363           "animator":
 364           {
 365             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
 366             "timePeriod":
 367             {
 368               "duration":1.0,
 369               "delay":0.0
 370             }
 371           }
 372         },
 373         {
 374           "target":"progressVisual",
 375           "property":"sweepAngle",
 376           "targetValue": 75,
 377           "animator":
 378           {
 379             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
 380             "timePeriod":
 381             {
 382               "duration":1.0,
 383               "delay":2.0
 384             }
 385           }
 386         },
 387         {
 388           "target":"progressVisual",
 389           "property":"startAngle",
 390           "initialValue": 87,
 391           "targetValue": 1887,
 392           "animator":
 393           {
 394             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
 395             "timePeriod":
 396             {
 397               "duration":3.0,
 398               "delay":0.0
 399             }
 400           }
 401         },
 402         {
 403           "target":"indeterminateVisual",
 404           "property":"sweepAngle",
 405           "initialValue": 75,
 406           "targetValue": 180,
 407           "animator":
 408           {
 409             "alphaFunction":[0.439, 0.0, 0.718, 0.428],
 410             "timePeriod":
 411             {
 412               "duration":1.0,
 413               "delay":0.0
 414             }
 415           }
 416         },
 417         {
 418           "target":"indeterminateVisual",
 419           "property":"sweepAngle",
 420           "targetValue": 75,
 421           "animator":
 422           {
 423             "alphaFunction":[0.224, 0.571, 0.53, 1.0],
 424             "timePeriod":
 425             {
 426               "duration":1.0,
 427               "delay":2.0
 428             }
 429           }
 430         },
 431         {
 432           "target":"indeterminateVisual",
 433           "property":"startAngle",
 434           "initialValue": 267,
 435           "targetValue": 2067,
 436           "animator":
 437           {
 438             "alphaFunction":[0.33, 0.0, 0.3, 1.0],
 439             "timePeriod":
 440             {
 441               "duration":3.0,
 442               "delay":0.0
 443             }
 444           }
 445         }
 446       ],
 447       "labelVisual":{
 448         "visualType": "TEXT",
 449         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
 450         "pointSize" : 12.0, // Point size must always be provided to Text Visual
 451         "horizontalAlignment": "CENTER",
 452         "verticalAlignment": "CENTER"
 453       },
 454       "progressValue": 0.2,
 455       "secondaryProgressValue":0.4,
 456       "indeterminate": false
 457     },
 458     "Button":
 459     {
 460       "initialAutoRepeatingDelay":2.0,
 461       "nextAutoRepeatingDelay":0.9
 462       // Note: Visuals added to Button will be used in all derived buttons unless overridden.
 463     },
 464     "PushButton":
 465     {
 466       "anchorPoint": [ 0.5, 1.0, 0.5 ],
 467       "parentOrigin": [ 0.5, 1.0, 0,5 ],
 468       "label":
 469        {
 470          "visualType": "TEXT",
 471          "text" : "BOTTOM_BTN",
 472          "horizontalAlignment": "CENTER",
 473          "verticalAlignment": "CENTER",
 474          "pointSize" : 6.0,
 475          "textColor": [0.98,0.98,0.98,1.0]
 476        },
 477       "background":
 478        {
 479          "visualType": "IMAGE",
 480          "url": "{DALI_STYLE_IMAGE_DIR}tw_bottom_btn_bg.png",
 481          "mixColor": [0.0,0.21,0.29,0.9]
 482        },
 483        "selectedStateImage":
 484        {
 485          "visualType": "IMAGE",
 486          "url": "{DALI_STYLE_IMAGE_DIR}tw_bottom_btn_bg.png",
 487          "mixColor": [0.0,0.57,0.8,0.3]
 488        }
 489     },
 490     "CheckBoxButton":
 491     {
 492       "styles":["Button"],
 493       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
 494       "label":
 495        {
 496          "visualType": "TEXT",
 497          "pointSize" : 10.0, // Point size must always be provided to Text Visual
 498          "verticalAlignment": "CENTER"
 499        },
 500       "unselectedVisual":
 501       {
 502         "visualType": "IMAGE",
 503         "url": "{DALI_IMAGE_DIR}checkbox-unselected.png"
 504       },
 505       "selectedVisual":
 506       {
 507         "visualType": "IMAGE",
 508         "url": "{DALI_IMAGE_DIR}checkbox-selected.png"
 509       },
 510       "disabledUnselectedVisual":
 511       {
 512         "visualType": "IMAGE",
 513         "url": "{DALI_IMAGE_DIR}checkbox-unselected-disabled.png"
 514       },
 515       "disabledSelectedVisual":
 516       {
 517         "visualType": "IMAGE",
 518         "url": "{DALI_IMAGE_DIR}checkbox-selected-disabled.png"
 519       }
 520     },
 521     "RadioButton":
 522     {
 523       "styles":["Button"],
 524       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
 525       "label":
 526        {
 527          "visualType": "TEXT",
 528          "pointSize" : 10.0, // Point size must always be provided to Text Visual
 529          "verticalAlignment": "CENTER"
 530        },
 531       "unselectedVisual":
 532       {
 533         "visualType": "IMAGE",
 534         "url": "{DALI_IMAGE_DIR}radio-button-unselected.png"
 535       },
 536       "selectedVisual":
 537       {
 538         "visualType": "IMAGE",
 539         "url": "{DALI_IMAGE_DIR}radio-button-selected.png"
 540       },
 541       "disabledUnselectedVisual":
 542       {
 543         "visualType": "IMAGE",
 544         "url": "{DALI_IMAGE_DIR}radio-button-unselected-disabled.png"
 545       },
 546       "disabledSelectedVisual":
 547       {
 548         "visualType": "IMAGE",
 549         "url": "{DALI_IMAGE_DIR}radio-button-selected-disabled.png"
 550       }
 551     }
 552   }
 553 }