buffer-size-calculator.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ArduinoJson - JsonBuffer size calculator</title>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="jumbotron">
  11. <h1>JsonBuffer size calculator</h1>
  12. </div>
  13. <div id='error' class="alert alert-danger" role="alert">
  14. Please paste your JSON in the "input" box
  15. </div>
  16. <div class="row">
  17. <div class="col-md-6">
  18. <h2>Input</h2>
  19. <textarea class="form-control" rows=30 id='input'></textarea><br>
  20. </div>
  21. <div id='results' class="col-md-6" style='display:none'>
  22. <h2>Result</h2>
  23. <h3>Expression</h3>
  24. <p><code id='resultexpr'></code></p>
  25. <table class="table">
  26. <thead>
  27. <th>Platform</th>
  28. <th>Size (in bytes)</th>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <td>AVR 8-bit</td>
  33. <td id='sizeavr8'></td>
  34. </tr>
  35. <tr>
  36. <td>ESP8266</td>
  37. <td id='sizeesp8266'></td>
  38. </tr>
  39. <tr>
  40. <td>x86</td>
  41. <td id='sizex86'></td>
  42. </tr>
  43. <tr>
  44. <td>x64</td>
  45. <td id='sizex64'></td>
  46. </tr>
  47. </tbody>
  48. </table>
  49. </div>
  50. </div>
  51. </div>
  52. </body>
  53. <script type="text/javascript">
  54. function Recipe() {
  55. var arrays = [];
  56. var objects = [];
  57. this.addJsonArray = function(size) {
  58. if (arrays[size])
  59. arrays[size]++;
  60. else
  61. arrays[size] = 1;
  62. }
  63. this.addJsonObject = function(size) {
  64. if (objects[size])
  65. objects[size]++;
  66. else
  67. objects[size] = 1;
  68. }
  69. this.getExpression = function() {
  70. var elements = [];
  71. for (var size in arrays) {
  72. var count = arrays[size];
  73. if (count > 1)
  74. elements.push(count + "*JSON_ARRAY_SIZE("+size+")");
  75. else
  76. elements.push("JSON_ARRAY_SIZE("+size+")");
  77. }
  78. for (var size in objects) {
  79. var count = objects[size];
  80. if (count > 1)
  81. elements.push(count + "*JSON_OBJECT_SIZE("+size+")");
  82. else
  83. elements.push("JSON_OBJECT_SIZE("+size+")");
  84. }
  85. return elements.join(" + ");
  86. }
  87. }
  88. function scanJson(recipe, obj) {
  89. if (obj instanceof Array) {
  90. recipe.addJsonArray(obj.length);
  91. for (var i = 0; i<obj.length; i++)
  92. scanJson(recipe, obj[i]);
  93. }
  94. else if (obj instanceof Object) {
  95. recipe.addJsonObject(Object.keys(obj).length);
  96. for (var key in obj)
  97. scanJson(recipe, obj[key]);
  98. }
  99. }
  100. input.oninput = function(e) {
  101. results.style.display = 'none';
  102. error.style.visibility = 'hidden';
  103. try {
  104. var recipe = new Recipe();
  105. scanJson(recipe, JSON.parse(input.value));
  106. var expression = recipe.getExpression();
  107. resultexpr.innerText = expression;
  108. sizeavr8.innerText = eval(
  109. "function JSON_ARRAY_SIZE(n) { return 4 + 8*n }" +
  110. "function JSON_OBJECT_SIZE(n) { return 4 + 10*n }" +
  111. expression
  112. );
  113. sizeesp8266.innerText = eval(
  114. "function JSON_ARRAY_SIZE(n) { return 8 + 12*n }" +
  115. "function JSON_OBJECT_SIZE(n) { return 8 + 16*n }" +
  116. expression
  117. );
  118. sizex86.innerText = eval(
  119. "function JSON_ARRAY_SIZE(n) { return 12 + 24*n }" +
  120. "function JSON_OBJECT_SIZE(n) { return 12 + 32*n }" +
  121. expression
  122. );
  123. sizex64.innerText = eval(
  124. "function JSON_ARRAY_SIZE(n) { return 24 + 24*n }" +
  125. "function JSON_OBJECT_SIZE(n) { return 24 + 32*n }" +
  126. expression
  127. );
  128. results.style.display = 'block';
  129. }
  130. catch (ex) {
  131. error.innerText = "ERROR: " + ex.message;
  132. error.style.visibility = 'visible';
  133. }
  134. }
  135. </script>
  136. </html>