dali-toolkit/styles/1920x1080_rpi/dali-toolkit-default-theme.json

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