status.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Status display</title>
  6. <meta name="description"
  7. content="Status display generated by BORA.">
  8. <link rel="stylesheet" href="{{ static_url("style.css") }}">
  9. <link rel="stylesheet" href="{{ static_url("jquery-ui.min.css") }}">
  10. <!--[if IE]>
  11. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12. <![endif]-->
  13. </head>
  14. <body>
  15. {% if data['style'] %}
  16. {% for key in data['style'] %}
  17. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;' min="{{ data['style'][key]['min'] }}" max="{{ data['style'][key]['max'] }}" lesser="{{ data['style'][key]['lesser'] }}" larger="{{ data['style'][key]['larger'] }}" id="{{ key }}">
  18. <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
  19. <span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX </span><span class='unit_title'> {{ data['style'][key]['unit']['title'] }}</span></p>
  20. </div>
  21. {% end %}
  22. {% else %}
  23. {% end %}
  24. <img src="{{ static_url('background.png') }}"></img>
  25. <!-- java script -->
  26. <script src="{{ static_url("jquery-1.12.3.min.js") }}"></script>
  27. <script src="{{ static_url("jquery-ui.min.js") }}"></script>
  28. <script>
  29. jQuery(window).load(function () {
  30. myTimer();
  31. var myVar = setInterval(myTimer, 10000);
  32. function myTimer() {
  33. var dataToSend = {};
  34. $.ajax({
  35. url: '/getdata/',
  36. type: 'GET',
  37. data: dataToSend,
  38. success: function (response) {
  39. //var objresponse = JSON.parse(response);
  40. console.log(response);
  41. for (var key in response) {
  42. console.log(key, response[key]);
  43. if($("#" + key).length > 0) {
  44. $(".varval", "#" + key).text(parseFloat(response[key]).toFixed(2));
  45. }
  46. }
  47. },
  48. error: function () {
  49. console.log("Error.")
  50. }
  51. });
  52. }
  53. });
  54. </script>
  55. </body>
  56. </html>