Commit 929bd2930464cd5de2f103d67c909ce7cdad3c19

Authored by Adeel Kazmi
1 parent ed22c805

(Script) Added animated buttons example

Change-Id: I42b1411f5a0f472731a945ee9aa96021ffbc23f5
demo/images/curve-left.png 0 → 100644

2.07 KB

demo/images/curve-middle.png 0 → 100644

252 Bytes

demo/images/curve-right.png 0 → 100644

2.13 KB

demo/images/spot_button_off.png 0 → 100644

9.01 KB

demo/images/spot_button_on.png 0 → 100644

9.13 KB

demo/images/spot_jelly_off.png 0 → 100644

10.2 KB

demo/images/spot_jelly_on.png 0 → 100644

12.2 KB

demo/scripts/animated-buttons.json 0 → 100644
  1 +{
  2 + "stage": [
  3 + {
  4 + "type": "ImageActor",
  5 + "name": "On",
  6 + "position": [
  7 + 374,
  8 + 215,
  9 + 0
  10 + ],
  11 + "size": [
  12 + 144,
  13 + 144,
  14 + 1
  15 + ],
  16 + "sizeAspectRatio": false,
  17 + "color": [
  18 + 1,
  19 + 1,
  20 + 1,
  21 + 1
  22 + ],
  23 + "image": {
  24 + "filename": "{DALI_IMAGE_DIR}spot_button_on.png",
  25 + "width": 144,
  26 + "height": 144,
  27 + "load-policy": "IMMEDIATE",
  28 + "release-policy": "NEVER"
  29 + },
  30 + "path": "spot_button_on.png",
  31 + "actors": []
  32 + },
  33 + {
  34 + "type": "ImageActor",
  35 + "name": "Off",
  36 + "position": [
  37 + 129,
  38 + 215,
  39 + 0
  40 + ],
  41 + "size": [
  42 + 144,
  43 + 144,
  44 + 1
  45 + ],
  46 + "sizeAspectRatio": false,
  47 + "color": [
  48 + 1,
  49 + 1,
  50 + 1,
  51 + 1
  52 + ],
  53 + "image": {
  54 + "filename": "{DALI_IMAGE_DIR}spot_button_off.png",
  55 + "width": 144,
  56 + "height": 144,
  57 + "load-policy": "IMMEDIATE",
  58 + "release-policy": "NEVER"
  59 + },
  60 + "path": "spot_button_off.png",
  61 + "actors": []
  62 + },
  63 + {
  64 + "type": "ImageActor",
  65 + "name": "Right",
  66 + "position": [
  67 + 418.5,
  68 + 214.5,
  69 + 0
  70 + ],
  71 + "size": [
  72 + 85,
  73 + 161,
  74 + 1
  75 + ],
  76 + "sizeAspectRatio": false,
  77 + "visible": true,
  78 + "color": [
  79 + 1,
  80 + 1,
  81 + 1,
  82 + 1
  83 + ],
  84 + "image": {
  85 + "filename": "{DALI_IMAGE_DIR}curve-right.png",
  86 + "width": 85,
  87 + "height": 161,
  88 + "load-policy": "IMMEDIATE",
  89 + "release-policy": "NEVER"
  90 + },
  91 + "path": "curve-right.png",
  92 + "actors": []
  93 + },
  94 + {
  95 + "type": "ImageActor",
  96 + "name": "Left",
  97 + "position": [
  98 + 331,
  99 + 214.5,
  100 + 0
  101 + ],
  102 + "size": [
  103 + 88,
  104 + 161,
  105 + 1
  106 + ],
  107 + "sizeAspectRatio": false,
  108 + "visible": true,
  109 + "color": [
  110 + 1,
  111 + 1,
  112 + 1,
  113 + 1
  114 + ],
  115 + "image": {
  116 + "filename": "{DALI_IMAGE_DIR}curve-left.png",
  117 + "width": 87,
  118 + "height": 161,
  119 + "load-policy": "IMMEDIATE",
  120 + "release-policy": "NEVER"
  121 + },
  122 + "path": "curve-left.png",
  123 + "actors": []
  124 + },
  125 + {
  126 + "type": "ImageActor",
  127 + "name": "Middle",
  128 + "position": [
  129 + 375.5,
  130 + 214.5,
  131 + 0
  132 + ],
  133 + "anchor-point": [
  134 + 0,
  135 + 0.5,
  136 + 0.5
  137 + ],
  138 + "size": [
  139 + 1,
  140 + 161,
  141 + 1
  142 + ],
  143 + "sizeAspectRatio": false,
  144 + "color": [
  145 + 1,
  146 + 1,
  147 + 1,
  148 + 1
  149 + ],
  150 + "image": {
  151 + "filename": "{DALI_IMAGE_DIR}curve-middle.png",
  152 + "width": 13,
  153 + "height": 161,
  154 + "load-policy": "IMMEDIATE",
  155 + "release-policy": "NEVER"
  156 + },
  157 + "path": "curve-middle.png",
  158 + "actors": []
  159 + },
  160 + {
  161 + "type": "ImageActor",
  162 + "name": "Jelly",
  163 + "position": [
  164 + 374,
  165 + 215,
  166 + 0
  167 + ],
  168 + "size": [
  169 + 144,
  170 + 144,
  171 + 1
  172 + ],
  173 + "sizeAspectRatio": false,
  174 + "color": [
  175 + 1,
  176 + 1,
  177 + 1,
  178 + 1
  179 + ],
  180 + "image": {
  181 + "filename": "{DALI_IMAGE_DIR}spot_jelly_on.png",
  182 + "width": 144,
  183 + "height": 144,
  184 + "load-policy": "IMMEDIATE",
  185 + "release-policy": "NEVER"
  186 + },
  187 + "path": "spot_jelly_on.png",
  188 + "actors": []
  189 + },
  190 + {
  191 + "type": "Control",
  192 + "name": "Left Black",
  193 + "position": [
  194 + 144.5,
  195 + 218.5,
  196 + 0.5
  197 + ],
  198 + "size": [
  199 + 275,
  200 + 243,
  201 + 1
  202 + ],
  203 + "sizeAspectRatio": false,
  204 + "background-color": [
  205 + 0,
  206 + 0,
  207 + 0,
  208 + 1
  209 + ],
  210 + "color": [
  211 + 1,
  212 + 1,
  213 + 1,
  214 + 1
  215 + ],
  216 + "actors": []
  217 + },
  218 + {
  219 + "type": "Control",
  220 + "name": "Right Black",
  221 + "position": [
  222 + 629.5,
  223 + 218.5,
  224 + 0.5
  225 + ],
  226 + "size": [
  227 + 335,
  228 + 243,
  229 + 1
  230 + ],
  231 + "sizeAspectRatio": false,
  232 + "background-color": [
  233 + 0,
  234 + 0,
  235 + 0,
  236 + 1
  237 + ],
  238 + "color": [
  239 + 1,
  240 + 1,
  241 + 1,
  242 + 1
  243 + ],
  244 + "actors": []
  245 + },
  246 + {
  247 + "type": "ImageActor",
  248 + "name": "JellyOff",
  249 + "position": [
  250 + 121,
  251 + -117,
  252 + 0
  253 + ],
  254 + "size": [
  255 + 144,
  256 + 144,
  257 + 1
  258 + ],
  259 + "sizeAspectRatio": false,
  260 + "color": [
  261 + 1,
  262 + 1,
  263 + 1,
  264 + 1
  265 + ],
  266 + "image": {
  267 + "filename": "{DALI_IMAGE_DIR}spot_jelly_off.png",
  268 + "width": 144,
  269 + "height": 144,
  270 + "load-policy": "IMMEDIATE",
  271 + "release-policy": "NEVER"
  272 + },
  273 + "path": "spot_jelly_off.png",
  274 + "actors": []
  275 + },
  276 + {
  277 + "type": "Control",
  278 + "name": "Control On",
  279 + "position": [
  280 + 371.26116838487997,
  281 + 217.33333333333331,
  282 + 0
  283 + ],
  284 + "size": [
  285 + 196,
  286 + 184,
  287 + 1
  288 + ],
  289 + "sizeAspectRatio": false,
  290 + "scale": [
  291 + 1,
  292 + 1,
  293 + 1
  294 + ],
  295 + "color": [
  296 + 1,
  297 + 1,
  298 + 1,
  299 + 1
  300 + ],
  301 + "actors": [],
  302 + "signals": [
  303 + {
  304 + "name": "tapped",
  305 + "action": "play",
  306 + "animation": "JellyOffAnimation"
  307 + }
  308 + ]
  309 + },
  310 + {
  311 + "type": "Control",
  312 + "name": "Control Off",
  313 + "position": [
  314 + 123.5,
  315 + -117,
  316 + 0
  317 + ],
  318 + "size": [
  319 + 193,
  320 + 182,
  321 + 1
  322 + ],
  323 + "sizeAspectRatio": false,
  324 + "color": [
  325 + 1,
  326 + 1,
  327 + 1,
  328 + 1
  329 + ],
  330 + "actors": [],
  331 + "signals": [
  332 + {
  333 + "name": "tapped",
  334 + "action": "play",
  335 + "animation": "JellyOnAnimation"
  336 + }
  337 + ]
  338 + }
  339 + ],
  340 + "animations": {
  341 + "JellyOnAnimation": {
  342 + "properties": [
  343 + {
  344 + "actor": "Left",
  345 + "property": "position",
  346 + "value": [
  347 + 331,
  348 + 214.5,
  349 + 0
  350 + ],
  351 + "alpha-function": "EASE_OUT",
  352 + "time-period": {
  353 + "delay": 3.106,
  354 + "duration": 1.465
  355 + },
  356 + "timelineColor": "#b2aba7"
  357 + },
  358 + {
  359 + "actor": "Middle",
  360 + "property": "position",
  361 + "value": [
  362 + 375.5,
  363 + 214.5,
  364 + 0
  365 + ],
  366 + "alpha-function": "EASE_OUT",
  367 + "time-period": {
  368 + "delay": 3.106,
  369 + "duration": 1.465
  370 + },
  371 + "timelineColor": "#94c5aa"
  372 + },
  373 + {
  374 + "actor": "Middle",
  375 + "property": "size",
  376 + "value": [
  377 + 250,
  378 + 161,
  379 + 1
  380 + ],
  381 + "alpha-function": "EASE_OUT",
  382 + "time-period": {
  383 + "delay": 0,
  384 + "duration": 1.27
  385 + },
  386 + "timelineColor": "#94c5aa"
  387 + },
  388 + {
  389 + "actor": "Middle",
  390 + "property": "size",
  391 + "value": [
  392 + 1,
  393 + 161,
  394 + 1
  395 + ],
  396 + "alpha-function": "EASE_OUT",
  397 + "time-period": {
  398 + "delay": 3.127,
  399 + "duration": 1.44
  400 + },
  401 + "timelineColor": "#94c5aa"
  402 + },
  403 + {
  404 + "actor": "JellyOff",
  405 + "property": "position",
  406 + "value": [
  407 + 374,
  408 + 215,
  409 + 0
  410 + ],
  411 + "alpha-function": "EASE_OUT",
  412 + "time-period": {
  413 + "delay": 1.486,
  414 + "duration": 1.29
  415 + },
  416 + "timelineColor": "#b0e8f9"
  417 + },
  418 + {
  419 + "actor": "Left Black",
  420 + "property": "position",
  421 + "value": [
  422 + 144.5,
  423 + 218.5,
  424 + 0.5
  425 + ],
  426 + "alpha-function": "EASE_OUT",
  427 + "time-period": {
  428 + "delay": 3.106,
  429 + "duration": 1.47
  430 + },
  431 + "timelineColor": "#cc8584"
  432 + },
  433 + {
  434 + "actor": "Right",
  435 + "property": "position",
  436 + "value": [
  437 + 418.5,
  438 + 214.5,
  439 + 0
  440 + ],
  441 + "alpha-function": "EASE_OUT",
  442 + "time-period": {
  443 + "delay": 0,
  444 + "duration": 1.27
  445 + },
  446 + "timelineColor": "#a2cfea"
  447 + },
  448 + {
  449 + "actor": "Right Black",
  450 + "property": "position",
  451 + "value": [
  452 + 629.5,
  453 + 218.5,
  454 + 0.5
  455 + ],
  456 + "alpha-function": "EASE_OUT",
  457 + "time-period": {
  458 + "delay": 0,
  459 + "duration": 1.276
  460 + },
  461 + "timelineColor": "#f78be1"
  462 + },
  463 + {
  464 + "actor": "Control On",
  465 + "property": "position",
  466 + "value": [
  467 + 371.26116838487997,
  468 + 217.33333333333331,
  469 + 0
  470 + ],
  471 + "alpha-function": "LINEAR",
  472 + "time-period": {
  473 + "delay": 2.765,
  474 + "duration": 0.001
  475 + },
  476 + "timelineColor": "#ab88f5"
  477 + },
  478 + {
  479 + "actor": "Jelly",
  480 + "property": "position",
  481 + "value": [
  482 + 121,
  483 + -117,
  484 + 0
  485 + ],
  486 + "alpha-function": "LINEAR",
  487 + "time-period": {
  488 + "delay": 0,
  489 + "duration": 0.001
  490 + },
  491 + "timelineColor": "#fbb6ad"
  492 + },
  493 + {
  494 + "actor": "Jelly",
  495 + "property": "position",
  496 + "value": [
  497 + 374,
  498 + 215,
  499 + 0
  500 + ],
  501 + "alpha-function": "LINEAR",
  502 + "time-period": {
  503 + "delay": 2.765,
  504 + "duration": 0.001
  505 + },
  506 + "timelineColor": "#fbb6ad"
  507 + },
  508 + {
  509 + "actor": "JellyOff",
  510 + "property": "position",
  511 + "value": [
  512 + 121,
  513 + -117,
  514 + 0
  515 + ],
  516 + "alpha-function": "LINEAR",
  517 + "time-period": {
  518 + "delay": 2.765,
  519 + "duration": 0.001
  520 + },
  521 + "timelineColor": "#fbb6ad"
  522 + },
  523 + {
  524 + "actor": "Control Off",
  525 + "property": "position",
  526 + "value": [
  527 + 123.5,
  528 + -117,
  529 + 0
  530 + ],
  531 + "alpha-function": "LINEAR",
  532 + "time-period": {
  533 + "delay": 0,
  534 + "duration": 0.001
  535 + },
  536 + "timelineColor": "#9791e0"
  537 + }
  538 + ],
  539 + "page": ""
  540 + },
  541 + "JellyOffAnimation": {
  542 + "properties": [
  543 + {
  544 + "actor": "Left",
  545 + "property": "position",
  546 + "value": [
  547 + 86,
  548 + 214.5,
  549 + 0
  550 + ],
  551 + "alpha-function": "EASE_OUT",
  552 + "time-period": {
  553 + "delay": 0,
  554 + "duration": 1.27
  555 + },
  556 + "timelineColor": "#b2aba7"
  557 + },
  558 + {
  559 + "actor": "Middle",
  560 + "property": "position",
  561 + "value": [
  562 + 130,
  563 + 214.5,
  564 + 0
  565 + ],
  566 + "alpha-function": "EASE_OUT",
  567 + "time-period": {
  568 + "delay": 0,
  569 + "duration": 1.27
  570 + },
  571 + "timelineColor": "#94c5aa"
  572 + },
  573 + {
  574 + "actor": "Middle",
  575 + "property": "size",
  576 + "value": [
  577 + 250,
  578 + 161,
  579 + 1
  580 + ],
  581 + "alpha-function": "EASE_OUT",
  582 + "time-period": {
  583 + "delay": 0,
  584 + "duration": 1.27
  585 + },
  586 + "timelineColor": "#94c5aa"
  587 + },
  588 + {
  589 + "actor": "Middle",
  590 + "property": "size",
  591 + "value": [
  592 + 1,
  593 + 161,
  594 + 1
  595 + ],
  596 + "alpha-function": "EASE_OUT",
  597 + "time-period": {
  598 + "delay": 3.127,
  599 + "duration": 1.44
  600 + },
  601 + "timelineColor": "#94c5aa"
  602 + },
  603 + {
  604 + "actor": "Jelly",
  605 + "property": "position",
  606 + "value": [
  607 + 130,
  608 + 215,
  609 + 0
  610 + ],
  611 + "alpha-function": "EASE_OUT",
  612 + "time-period": {
  613 + "delay": 1.486,
  614 + "duration": 1.29
  615 + },
  616 + "timelineColor": "#b0e8f9"
  617 + },
  618 + {
  619 + "actor": "Left Black",
  620 + "property": "position",
  621 + "value": [
  622 + -95,
  623 + 219,
  624 + 0
  625 + ],
  626 + "alpha-function": "EASE_OUT",
  627 + "time-period": {
  628 + "delay": 0,
  629 + "duration": 1.276
  630 + },
  631 + "timelineColor": "#cc8584"
  632 + },
  633 + {
  634 + "actor": "Right",
  635 + "property": "position",
  636 + "value": [
  637 + 172,
  638 + 214.5,
  639 + 0.5
  640 + ],
  641 + "alpha-function": "EASE_OUT",
  642 + "time-period": {
  643 + "delay": 3.106,
  644 + "duration": 1.465
  645 + },
  646 + "timelineColor": "#a2cfea"
  647 + },
  648 + {
  649 + "actor": "Right Black",
  650 + "property": "position",
  651 + "value": [
  652 + 383,
  653 + 218.5,
  654 + 0.5
  655 + ],
  656 + "alpha-function": "EASE_OUT",
  657 + "time-period": {
  658 + "delay": 3.106,
  659 + "duration": 1.47
  660 + },
  661 + "timelineColor": "#f78be1"
  662 + },
  663 + {
  664 + "actor": "Control On",
  665 + "property": "position",
  666 + "value": [
  667 + 371.26,
  668 + -131,
  669 + 0
  670 + ],
  671 + "alpha-function": "LINEAR",
  672 + "time-period": {
  673 + "delay": 0,
  674 + "duration": 0.001
  675 + },
  676 + "timelineColor": "#ab88f5"
  677 + },
  678 + {
  679 + "actor": "JellyOff",
  680 + "property": "position",
  681 + "value": [
  682 + 130,
  683 + 215,
  684 + 0
  685 + ],
  686 + "alpha-function": "LINEAR",
  687 + "time-period": {
  688 + "delay": 2.765,
  689 + "duration": 0.001
  690 + },
  691 + "timelineColor": "#fbb6ad"
  692 + },
  693 + {
  694 + "actor": "Jelly",
  695 + "property": "position",
  696 + "value": [
  697 + 121,
  698 + -117,
  699 + 0
  700 + ],
  701 + "alpha-function": "LINEAR",
  702 + "time-period": {
  703 + "delay": 2.765,
  704 + "duration": 0.001
  705 + },
  706 + "timelineColor": "#fbb6ad"
  707 + },
  708 + {
  709 + "actor": "Control Off",
  710 + "property": "position",
  711 + "value": [
  712 + 123.5,
  713 + 215,
  714 + 0
  715 + ],
  716 + "alpha-function": "LINEAR",
  717 + "time-period": {
  718 + "delay": 2.765,
  719 + "duration": 0.001
  720 + },
  721 + "timelineColor": "#9791e0"
  722 + }
  723 + ],
  724 + "page": ""
  725 + }
  726 + },
  727 + "connections": {
  728 + "JellyOffConnection": {
  729 + "name": "JellyOffConnection",
  730 + "target": {
  731 + "type": "animation",
  732 + "name": "JellyOffAnimation",
  733 + "action": "play"
  734 + },
  735 + "sources": [
  736 + "Control On"
  737 + ],
  738 + "signal": "click"
  739 + },
  740 + "JellyOnConnection": {
  741 + "name": "JellyOnConnection",
  742 + "target": {
  743 + "type": "animation",
  744 + "name": "JellyOnAnimation",
  745 + "action": "play"
  746 + },
  747 + "sources": [
  748 + "Control Off"
  749 + ],
  750 + "signal": "click"
  751 + }
  752 + },
  753 + "constants": {},
  754 + "styles": {},
  755 + "deviceHeight": 600,
  756 + "deviceWidth": 480,
  757 + "deviceOrientation": "portrait",
  758 + "version": "781"
  759 +}
... ...