dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json

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