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