index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>IoT.js test results</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="css/c3.css">
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="css/device.css">
  <link rel="stylesheet" href="css/chart.css">
  <link rel="stylesheet" href="css/infobox.css">
  <link rel="stylesheet" href="css/pagination.css">
  <link rel="stylesheet" href="css/testruns.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="js/third-party/c3/c3.min.js"></script>
  <script src="js/third-party/c3/d3.v3.min.js"></script>
  <script src="js/constants.js"></script>
  <script src="js/firebase_init.js"></script>
  <script src="js/chart_settings.js"></script>
  <script src="js/load_jsons.js"></script>
  <script src="js/render_entries.js"></script>
  <script src="js/render_home_stats.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://iotjs.net"><b>IoT.js</b></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li id="show-home" class="active"><a id="link-home" href="?view=home">Home</a></li>
        <li id="show-rpi3"><a id="link-rpi3" href="?view=rpi3">Raspberry Pi 3</a></li>
        <li id="show-rpi2"><a id="link-rpi2" href="?view=rpi2">Raspberry Pi 2</a></li>
        <li id="show-stm32f4dis"><a id="link-stm32" href="?view=stm32f4dis">STM32F4-Discovery</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://github.com/Samsung/iotjs">View on Github</a></li>
        <li><a href="http://www.jerryscript.net">Powered by <b>JerryScript</b></a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="home-info">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="project-title text-center">
          <h1>IoT.js</h1>
          <p class="lead">Automated correctness and performance test results</p>
        </div>
        <div class="project-overview">
          <p>The purpose of the project is to run the official IoT.js test-suite on different platforms. The testing happens once a day (at UTC 17:00) using the latest master.</p>
          <p>Since IoT.js focuses on low footprint devices, the run-time memory consumption is tracked during the test execution. This means that each passed tests have information about their peak usage of the stack and the heap memory areas. The size of the compiled IoT.js is also saved.</p>
          <p>The collected values are visualized on charts that help to observe how IoT.js evolves day by day. If you are interested in a platform, please choose one of the options below.</p>
        </div>
        <div class="project-targets" id="home-targets">
          <p class="text-center targets-placeholder">Loading target information...</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="target-info">

  <div class="container infobox">
    <div class="row">
      <div class="col-sm-8 col-md-7">
        <img id="info-image">
        <div>
          <p><span class="bold">Test device:</span><a id="info-device"></a></p>
          <p><span class="bold">Platform:</span><a id="info-platform"></a></p>
          <p><span class="bold">Repository:</span><a href="https://github.com/Samsung/iotjs">IoT.js master branch</a></p>
        </div>
      </div>
    </div>
  </div>

  <div id="target-info-placeholder">
    <p>Loading the device information...</p>
  </div>
  <div class="container chart-wrapper loading-part">
    <div class="row">
      <div class="row">
        <div class="col-md-10">
          <p>Date range from <input type="text" class="form-control" id="chart-datepicker-from"> to <input type="text" class="form-control" id="chart-datepicker-to">
          </p>
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Chart info</button>
        </div>
      </div>
      <div class="col-md-6">
        <div id="binary-chart"></div>
      </div>
      <div class="col-md-6">
        <div id="memory-chart"></div>
      </div>
    </div>
  </div>
  <div class="container coverage loading-part">
      <div class="row">
          <div class="col-md-12">
            <div class="coverage" id="coverage">
              <a id="coverage_link" href="">
                <span class="glyphicon glyphicon-align-left" data-toggle="tooltip" data-placement="bottom" title="Coverage"></span>
                  Last coverage summary
              </a>
            </div>
          </div>
      </div>
  </div>
  <div class="container loading-part">
    <div class="pagination top"></div>
    <div id="testruns"></div>
  </div>
</div>

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Chart Info</h4>
      </div>
      <div class="modal-body">
        <p><strong>Binary size</strong></p>
        <p> A typical binary application has four main sections: </p>
        <ul>
          <li>.text - contains the compiled code</li>
          <li>.rodata - contains the read only data</li>
          <li>.data - contains the initialized read / write data</li>
          <li>.bss - contains the uninitialized read / write data</li>
        </ul>
        <p> The space occupied by the application is the sum of the first three sections, since .bss is simply initialized with zero. The binary size chart shows the sum of the first three sections which is the required flash memory (disk) space for IoT.js. </p>
        <p> There are two types of build created. The first is a <b>minimal-profile</b> build that contains only the neccessary modules IoT.js requires. The second is a <b>target and test specific profile</b> build, that contains all the modules that the tests require.
        </p>
        <p> On TizenRT operating system the system and all applications are compiled into a single binary. The space consumed by IoT.js is calculated from the linker map file generated by the compiler. </p>

        <p><strong>Memory measurement setup</strong></p>
        <p> IoT.js has three major components: </p>
        <ul>
          <li>IoT.js core</li>
          <li>libtuv</li>
          <li>JerryScript</li>
        </ul>
        <p>The core and libtuv uses the system malloc for allocating memory. However, JerryScript has an own optimized memory allocator with zero allocation overhead (i.e. does not allocate extra space for allocated blocks), so the whole memory area can be allocated by the application. The JerryScript allocator uses a contiguous memory block called JerryScript heap which size can be specified at compile time. The test system uses a 60 KByte JerryScript heap which is enough to run the IoT.js tests. </p>
        <img class="image-responsive center-block" src="img/average_memory_consumtion.png" style="max-height:400px;"/>
        <p> The average memory chart shows the average memory consumption which is computed by adding the memory allocated by malloc and JerryScript plus the stack size. </p>
        <p>The average memory consumption of the components above on 10th of November 2017 follows:</p>
        <ul>
          <li>JerryScript heap: 26486 Bytes</li>
          <li>System heap: 3632 Bytes</li>
          <li>Stack: 4836 Bytes</li>
        </ul>
        <p>The percentage of these components can be seen on Figure 1 above.</p>
        <img class="image-responsive center-block" src="img/minimum_system_requirement.png" style="max-height:400px;"/>
        <p> The minimum memory requirement chart shows the minimum memory settings of the test system when all tests are executed. Any system with these resources are capable of running with the test system: </p>
        <ul>
          <li>JerryScript heap: 57344 Bytes (56 KB)</li>
          <li>System heap: 15808 Bytes</li>
          <li>Stack: 7800 Bytes</li>
        </ul>
        <p>The percentage of these components can be seen on Figure 2 above.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>