<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="stylesheet" href="/stylesheets/style.css" charset="utf-8"> 
    <script src="/javascripts/jquery-4.0.0.min.js" charset="utf-8"></script>
    <script src="/javascripts/plotly-3.4.0.min.js" charset="utf-8"></script>   
    <script src="/javascripts/signal.js" charset="utf-8"></script>
</head>
<body>
    <h1><%=title%></h1>
    <p>Wykres danych realtime z czujnika <span class="signal-name"></span></p>

    <div style="margin: 20px 0;">
      <button class="sensor-btn" data-sensor="s1">s1</button>
      <button class="sensor-btn" data-sensor="s2">s2</button>
      <button class="sensor-btn" data-sensor="s3">s3</button>
      <button class="sensor-btn" data-sensor="s4">s4</button>
      <button class="sensor-btn" data-sensor="s5">s5</button>
      <button class="sensor-btn" data-sensor="s6">s6</button>
    </div>

    <div style="display:flex;flex-direction: row;flex-wrap: wrap; justify-content: center;">
      <div style="width:100%;" >
        <h1 style="text-align:center;">Czujnik <span class="signal-name"></span></h1>
        <div id="signal"></div>
      </div>
    </div>

    <code><pre id="test"></pre></code>
</body>
</html>