apps/samples/text/crawler/app.html at master · onsigntv/apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Scroller</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta name="description" content="Scrolls the text of your choice from right to left, automatically adjusting the font size.">

  {# Make sure you load the SDK in all apps that use Javascript before starting configuration! #}
  {{ __loadsdk__ }}

  {# Check https://github.com/onsigntv/apps/blob/master/docs/USERCONF.md for info on how to add user-configurable variables. #}
  {{ __config__(name="face_color", type="color", value="#FFFFFF", label="Font color") }}
  {{ __config__(name="background_color", type="color", value="#000000", label="Background color") }}

  {{
    __config__(name="speed", type="choice", label="Scroll speed", choices=[
      ("medium", "Medium"),
      ("slow", "Slow"),
      ("fast", "Fast"),
    ], js=True)
  }}

  {{ __config__(name="text", type="paragraph", label="Text to show on screen", value="Type here", help="One message per line.") }}

  <style type="text/css" media="screen">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Roboto;
    }

    html,
    body,
    #text {
      width: 100%;
      height: 100%;
    }

    body {
      overflow: hidden;
      background-color: {{ background_color }};
    }

    #text {
      position: absolute;
      white-space: pre;
      visibility: hidden;
      color: {{ face_color }};
    }
  </style>
</head>
<body>
  <div id="text">{{ text|replace("\r\n", " • ") }}</div>
  <script type="text/javascript">
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
    // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
    // MIT license
    (function() {
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
      }

      if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = window.setTimeout(function() { callback(currTime + timeToCall); },
            timeToCall);
          lastTime = currTime + timeToCall;
          return id;
        };

      if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
          clearTimeout(id);
        };
    }());

    var wWidth = null;
    var animationId = null;
    var speed = { // pixels per second
      'slow': 200,
      'medium': 300,
      'fast': 400
    }[window.appConfig.speed];

    function startAnimation() {
      var text = document.getElementById('text');
      var tWidth = text.scrollWidth;

      var start = null;
      var progress = wWidth;

      // http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
      text.style.visibility = 'visible';
      text.style.webkitTransition = 'initial';
      text.style.backfaceVisibility = 'hidden';
      text.style.perspective = '1000';

      function step(timestamp) {
        if (!start) start = timestamp;
        var interval = timestamp - start;
        start = timestamp;

        progress -= Math.round((speed * interval) / 1000);

        text.style.webkitTransform = 'translate3d(' + progress + 'px, 0, 0)';

        if ((-progress) < tWidth) {
          animationId = window.requestAnimationFrame(step);
        } else {
          startAnimation();
        }
      }

      if (animationId) window.cancelAnimationFrame(animationId);
      animationId = window.requestAnimationFrame(step);
    }

    // The 'sizechanged' event is a debounced version of the 'resize' event.
    // You can get the current size through object 'event.detail' attributes 'width' and 'height'.
    // For more info on our custom events, check: https://github.com/onsigntv/apps/blob/master/docs/JSBRIDGE.md#signage-events
    document.addEventListener('sizechanged', function(event) {
      var text = document.getElementById('text');
      text.style.fontSize = '' + (event.detail.height * 0.75) + 'px';
      text.style.lineHeight = '' + (event.detail.height * 0.95) + 'px';

      wWidth = event.detail.width;

      if (animationId) startAnimation();
    }, false);

    document.addEventListener('show', startAnimation, false);
  </script>
</body>
</html>