<script language="javascript" type="text/javascript" src="https://www.flotcharts.org/flot/source/jquery.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<input type="button" id="button" value="click"/>
<input type="text" id='service' placeholder='service' value="0x180D"/>
<input type="text" id='characteristic' placeholder='characteristic' value="0x2a39"/>
<div class="plot"></div>
<input type="button" value="reset" onclick="reset()">
<button onclick="download(JSON.stringify(data), 'myfilename.json', 'text/json')">Create file</button>
<a href="javascript:alert('create the file, then download')" id="a">click here to download your file</a>


<script>
  document.getElementById("button")
  .addEventListener('pointerup', function(event) {
    var service = parseInt(document.getElementById("service").value);
    var characteristic = parseInt(document.getElementById("characteristic").value);

    // Call navigator.bluetooth.requestDevice
    navigator.bluetooth.requestDevice({
      filters: [{services: [service]}]
    }).then(device=>{
      window.device=device;
      console.log('Connecting to GATT Server...');
      return device.gatt.connect();
    }).then(server => {
      console.log('Getting Service...');
      window.server=server;
      return server.getPrimaryService(service);
    }).then(service => {
      console.log('Getting Characteristics...');
      if (true) {
        // Get all characteristics that match this UUID.
        return service.getCharacteristics(characteristic);
      }
      // Get all characteristics.
      return service.getCharacteristics();
    })
    .then(characteristics => {
      console.log(characteristics)

      read_values(characteristics[0])
    })
    .catch(error => {
      console.error('Argh! ', error);
    });
  });


  function read_values(ch){
    ch.readValue().then(
      val => {
        console.log("val is", val);

        /*for (let i = 0; i < val.byteLength; i++) {
          if(!data[i])
            data[i] = [];
          data[i].push([data[i].length, val.getInt8(i)])
        }*/
        while(data.length<7)
          data.push([])

        addPoint(data[0], (val.getUint8(0)+255*val.getUint8(1))/100)
        addPoint(data[1], val.getUint8(2)+255*val.getUint8(3))
        addPoint(data[2], val.getUint8(4)*10)
        addPoint(data[3], val.getUint8(5)-100)
        addPoint(data[4], val.getUint8(6)-90)
        addPoint(data[5], val.getUint8(7)-90)
        addPoint(data[6], 360-(val.getUint8(8)+255*val.getUint8(9)))



      }
    ).then(()=>{
      read_values(ch);
    });
  }

  function addPoint(arr, val){
    arr.push([arr.length, val])
  }

  var data;
  function reset(){
    data = new Array(7).fill().map(()=>[]);
    $(".plot").html('')

    title=[
      'wind speed',
      'wind direction',
      'battery',
      'temprature',
      'roll',
      'pitch',
      'eCompass'
    ]
    for(let i=0; i<data.length; i++){
      let subplot = $("<div class='subplot'>")
      $(".plot").append($("<div class='title'>"+title[i]+"</div>"))
      $(".plot").append(subplot)
    }
  }
  reset();

  function download(text, name, type) {
    var a = document.getElementById("a");
    var file = new Blob([text], {type: type});
    a.href = URL.createObjectURL(file);
    a.download = name;
  }

  setInterval(function() {
    for(let i=0; i<data.length; i++){

        $.plot($(".subplot")[i], [
          data[i]
        ]);
    }
  },1000);

</script>

<style>
  .plot, .subplot{
    width: 100%;
  }
  .subplot{
    width: 25%;
    display: inline-block;
    height: 300px;
  }
  .title {
    display: inline-block;
    vertical-align: top;
    background: rgba(255,255,255,1);
    position: absolute;
    margin-left: 8%;
  }
</style>