test/NUITestSample/NUITestSample/res/json/style-example-theme-one.json

   1 {
   2   "constants": {
   3     "STYLE_DIR": "{APPLICATION_RESOURCE_PATH}/style"
   4   },
   5   "styles": {
   6     "Title": {
   7       "textColor": "#0000ff",
   8       "background": {
   9         "visualType": "COLOR",
  10         "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
  11       }
  12     },
  13     "TableView": {
  14       "background": {
  15         "visualType": "COLOR",
  16         "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
  17       }
  18     },
  19     "FlexContainer": {
  20       "background": {
  21         "visualType": "COLOR",
  22         "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
  23       }
  24     },
  25     "RadioButton": {
  26       "label": {
  27         "textColor": [ 1, 1, 1, 1 ]
  28       }
  29     },
  30     "CheckBoxButton": {
  31       "label": {
  32         "textColor": [ 1, 1, 1, 1 ]
  33       }
  34     },
  35     "ColorLabel1": {
  36       "textColor": [ 1, 0, 0, 1 ]
  37     },
  38     "ColorLabel2": {
  39       "textColor": [ 0, 1, 0, 1 ]
  40     },
  41     "ColorLabel3": {
  42       "textColor": [ 0.3, 0.3, 1, 1 ]
  43     },
  44     "ThemeLabel": {
  45       "textColor": [ 0, 1, 1, 1 ]
  46     },
  47     "PopupTitle": {
  48       "textColor": [ 1, 1, 1, 1 ]
  49     },
  50     "PopupBody": {
  51       "textColor": [ 1, 1, 0, 1 ]
  52     },
  53     "TextLabel": {
  54       "textColor": [ 0, 0, 0, 1 ]
  55     },
  56     "ColorSlider1": {
  57       "styles": [ "Slider" ]
  58     },
  59     "ColorSlider2": {
  60       "styles": [ "slider" ]
  61     },
  62     "ColorSlider3": {
  63       "styles": [ "slider" ]
  64     },
  65     "ImageChannelControl": {
  66       "enableVisibilityTransition": [
  67         {
  68           "target": "imageVisual",
  69           "property": "opacity",
  70           "initialValue": 0,
  71           "targetValue": 1,
  72           "animator": {
  73             "alphaFunction": "EASE_IN_OUT",
  74             "timePeriod": {
  75               "duration": 0.25,
  76               "delay": 0
  77             }
  78           }
  79         },
  80         {
  81           "target": "imageVisual",
  82           "property": "size",
  83           "targetValue": [ 1, 1 ]
  84         }
  85       ],
  86       "disableVisibilityTransition": [
  87         {
  88           "target": "imageVisual",
  89           "property": "opacity",
  90           "targetValue": 0,
  91           "animator": {
  92             "alphaFunction": "EASE_IN_OUT",
  93             "timePeriod": {
  94               "duration": 0.25,
  95               "delay": 0
  96             }
  97           }
  98         },
  99         {
 100           "target": "imageVisual",
 101           "property": "size",
 102           "targetValue": [ 1, 1, 1 ]
 103         }
 104       ]
 105     },
 106     "ShadowButton": {
 107       "backgroundVisual": {
 108         "visualType": "IMAGE",
 109         "url": "{STYLE_DIR}/images/shadowButtonBg.9.png",
 110         "mixColor": [ 1, 1, 1, 0 ]
 111       },
 112       "checkboxBgVisual": {
 113         "visualType": "IMAGE",
 114         "url": "{STYLE_DIR}/images/CheckBg.png",
 115         "transform": {
 116           "size": [ 0.09, 0.28 ],
 117           "offset": [ 30, 0 ],
 118           "offsetSizeMode": [ 1, 1, 0, 0 ],
 119           "origin": "CENTER_BEGIN",
 120           "anchorPoint": "CENTER_BEGIN"
 121         }
 122       },
 123       "checkboxFgVisual": {
 124         "visualType": "IMAGE",
 125         "url": "{STYLE_DIR}/images/Tick.png",
 126         "transform": {
 127           "size": [ 0.09, 0.28 ],
 128           "offset": [ 30, 0 ],
 129           "offsetSizeMode": [ 1, 1, 0, 0 ],
 130           "origin": "CENTER_BEGIN",
 131           "anchorPoint": "CENTER_BEGIN"
 132         }
 133       },
 134       "labelVisual": {
 135         "visualType": "TEXT",
 136         "text": "Don't show again",
 137         "pointSize": 20,
 138         "horizontalAlignment": "END",
 139         "verticalAlignment": "CENTER",
 140         "textColor": [ 1, 1, 1, 1 ],
 141         "mixColor": [ 0.3, 0.3, 0.3, 1 ],
 142         "transform": {
 143           "size": [ 0.9, 0.9 ],
 144           "offset": [ -30, 0 ],
 145           "offsetSizeMode": [ 1, 1, 0, 0 ],
 146           "origin": "CENTER_END",
 147           "anchorPoint": "CENTER_END"
 148         }
 149       },
 150       "activeTransition": [
 151         {
 152           "target": "checkboxBgVisual",
 153           "property": "size",
 154           "initialValue": [ 0.09, 0.28 ],
 155           "targetValue": [ 0.12, 0.37 ],
 156           "animator": {
 157             "alphaFunction": "EASE_OUT_BACK",
 158             "timePeriod": {
 159               "duration": 0.8,
 160               "delay": 0
 161             }
 162           }
 163         },
 164         {
 165           "target": "backgroundVisual",
 166           "property": "mixColor",
 167           "initialValue": [ 1, 1, 1, 0 ],
 168           "targetValue": [ 1, 1, 1, 1 ],
 169           "animator": {
 170             "alphaFunction": "EASE_OUT_BACK",
 171             "timePeriod": {
 172               "duration": 0.8,
 173               "delay": 0
 174             }
 175           }
 176         },
 177         {
 178           "target": "backgroundVisual",
 179           "property": "size",
 180           "initialValue": [ 0.9, 0.9 ],
 181           "targetValue": [ 1, 1 ],
 182           "animator": {
 183             "alphaFunction": "EASE_OUT_BACK",
 184             "timePeriod": {
 185               "duration": 0.8,
 186               "delay": 0
 187             }
 188           }
 189         },
 190         {
 191           "target": "checkboxFgVisual",
 192           "property": "size",
 193           "initialValue": [ 0.09, 0.28 ],
 194           "targetValue": [ 0.12, 0.37 ],
 195           "animator": {
 196             "alphaFunction": "EASE_OUT_BACK",
 197             "timePeriod": {
 198               "duration": 0.8,
 199               "delay": 0
 200             }
 201           }
 202         },
 203         {
 204           "target": "labelVisual",
 205           "property": "mixColor",
 206           "initialValue": [ 0.2, 0.2, 0.2, 1.0 ],
 207           "targetValue": [ 0, 0, 0, 1 ],
 208           "animator": {
 209             "alphaFunction": "EASE_OUT_BACK",
 210             "timePeriod": {
 211               "duration": 0.8,
 212               "delay": 0
 213             }
 214           }
 215         }
 216       ],
 217       "inactiveTransition": [
 218         {
 219           "target": "checkboxBgVisual",
 220           "property": "size",
 221           "initialValue": [ 0.12, 0.37 ],
 222           "targetValue": [ 0.09, 0.28 ],
 223           "animator": {
 224             "alphaFunction": "EASE_OUT_BACK",
 225             "timePeriod": {
 226               "duration": 0.8,
 227               "delay": 0
 228             }
 229           }
 230         },
 231         {
 232           "target": "backgroundVisual",
 233           "property": "mixColor",
 234           "targetValue": [ 1, 1, 1, 0 ],
 235           "animator": {
 236             "alphaFunction": "EASE_OUT_BACK",
 237             "timePeriod": {
 238               "duration": 0.8,
 239               "delay": 0
 240             }
 241           }
 242         },
 243         {
 244           "target": "checkboxFgVisual",
 245           "property": "size",
 246           "initialValue": [ 0.12, 0.37 ],
 247           "targetValue": [ 0.09, 0.28 ],
 248           "animator": {
 249             "alphaFunction": "EASE_OUT_BACK",
 250             "timePeriod": {
 251               "duration": 0.8,
 252               "delay": 0
 253             }
 254           }
 255         },
 256         {
 257           "target": "labelVisual",
 258           "property": "mixColor",
 259           "targetValue": [ 0.4, 0.4, 0.4, 1.0 ],
 260           "animator": {
 261             "alphaFunction": "EASE_OUT_BACK",
 262             "timePeriod": {
 263               "duration": 0.8,
 264               "delay": 0
 265             }
 266           }
 267         },
 268         {
 269           "target": "backgroundVisual",
 270           "property": "size",
 271           "targetValue": [ 0.9, 0.9 ],
 272           "animator": {
 273             "alphaFunction": "EASE_OUT_BACK",
 274             "timePeriod": {
 275               "duration": 0.8,
 276               "delay": 0
 277             }
 278           }
 279         }
 280       ],
 281       "checkTransition": [
 282         {
 283           "target": "checkboxFgVisual",
 284           "property": "pixelArea",
 285           "initialValue": [ 0.0, 0.0, 0.0, 1.0 ],
 286           "targetValue": [ 0.0, 0.0, 1.0, 1.0 ],
 287           "animator": {
 288             "alphaFunction": "EASE_IN",
 289             "timePeriod": {
 290               "duration": 0.4,
 291               "delay": 0
 292             }
 293           }
 294         },
 295         {
 296           "target": "checkboxFgVisual",
 297           "property": "size",
 298           "initialValue": [ 0.0, 0.37 ],
 299           "targetValue": [ 0.12, 0.37 ],
 300           "animator": {
 301             "alphaFunction": "EASE_IN",
 302             "timePeriod": {
 303               "duration": 0.4,
 304               "delay": 0
 305             }
 306           }
 307         }
 308       ],
 309       "uncheckTransition": [
 310         {
 311           "target": "checkboxFgVisual",
 312           "property": "pixelArea",
 313           "initialValue": [ 0.0, 0.0, 1.0, 1.0 ],
 314           "targetValue": [ 0.0, 0.0, 0.0, 1.0 ],
 315           "animator": {
 316             "alphaFunction": "EASE_OUT",
 317             "timePeriod": {
 318               "duration": 0.4,
 319               "delay": 0
 320             }
 321           }
 322         },
 323         {
 324           "target": "checkboxFgVisual",
 325           "property": "size",
 326           "targetValue": [ 0.0, 0.37 ],
 327           "animator": {
 328             "alphaFunction": "EASE_OUT",
 329             "timePeriod": {
 330               "duration": 0.4,
 331               "delay": 0
 332             }
 333           }
 334         }
 335       ]
 336     },
 337     "BeatControl": {
 338       "beatVisual": {
 339         "visualType": "IMAGE",
 340         "url": "{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png"
 341       },
 342
 343       "bounceTransition": [
 344         {
 345           "target": "beatVisual",
 346           "property": "size",
 347           "initialValue": [ 0.5, 0.5 ],
 348           "targetValue": [ 0.75, 0.75 ],
 349           "animator": {
 350             "alphaFunction": "BOUNCE",
 351             "timePeriod": {
 352               "duration": 0.5,
 353               "delay": 0
 354             }
 355           }
 356         }
 357       ],
 358
 359       "leftTransition": [
 360         {
 361           "target": "beatVisual",
 362           "property": "offset",
 363           "initialValue": [ 0, 0 ],
 364           "targetValue": [ 0.25, 0 ],
 365           "animator": {
 366             "alphaFunction": "BOUNCE",
 367             "timePeriod": {
 368               "duration": 0.5,
 369               "delay": 0
 370             }
 371           }
 372         }
 373       ],
 374
 375       "upTransition": [
 376         {
 377           "target": "beatVisual",
 378           "property": "offset",
 379           "initialValue": [ 0, 0 ],
 380           "targetValue": [ 0, 0.25 ],
 381           "animator": {
 382             "alphaFunction": "BOUNCE",
 383             "timePeriod": {
 384               "duration": 0.5,
 385               "delay": 0
 386             }
 387           }
 388         }
 389       ],
 390
 391       "fadeTransition": [
 392         {
 393           "target": "beatVisual",
 394           "property": "opacity",
 395           "targetValue": 0,
 396           "animator": {
 397             "alphaFunction": "BOUNCE",
 398             "timePeriod": {
 399               "duration": 0.8,
 400               "delay": 0
 401             }
 402           }
 403         }
 404       ]
 405     }
 406   }
 407 }