DIY-Filament-Dryer-v2/Firmware/data_pre/js/drybox.js

let measurements_chart;

// Shorthand for $( document ).ready()
$(function() {

	$('#sliderTemperature').on('input change', function(){	
			$("label[for='labelSetTemperature']").text("Target temperature: " + parseInt(this.value) +"°C");
		});

	$('#sliderHeaterTemperature').on('input change', function(){	
			$("label[for='labelSetHeaterTemperature']").text("Max heater temperature: " + parseInt(this.value) +"°C");
		});

	$('#sliderFanSpeed').on('input change', function(){	
			$("label[for='labelSetFanSpeed']").text("Fan speed: " + parseInt(this.value) +"%");
		});

	$('#btnSet').on('click', function(){
		var temperature = $("#sliderTemperature").val();
		var heater = $("#sliderHeaterTemperature").val();
		var fanspeed = $("#sliderFanSpeed").val();

		// Send
		$.ajax({
		  url: "/api/v0/turn_on",
		  type: "get", //send it through get method
		  data: {
		    temperature: temperature,
		    heater: heater,
		    fanspeed: fanspeed,
		  },
          timeout: 2000,
		  success: function(response) {
		    //Do Something
		    console.log(response);
		    update_status(false);
		  },
		  error: function(xhr) {
		    //Do Something to handle error
		  }
		});

	});

	$('#btnTurnOff').on('click', function(){
		// Send 
		$.ajax({
		  url: "/api/v0/turn_off",
		  type: "get", //send it through get method
          timeout: 2000,
		  success: function(response) {
		    console.log(response);
		    update_status(false);
		  },
		  error: function(xhr) {
		    //Do Something to handle error
		  }
		});
	});

	$('a#pop-temp').popover({
			    trigger : 'click',  
			    placement : 'top', 
			    html: true, 
			    title : 'Target Temperature',
			    content : 'This is the maximum/desired temperature we want inside the box.<br>\
			    			The system will try to reach and then maintain this temperature.',
            });


	$('a#pop-fan').popover({
			    trigger : 'click',  
			    placement : 'top', 
			    html: true, 
			    title : 'Fan speed',
			    content : 'Set the speed of the internal fan used to circulate the air inside the dry box.<br><br>\
			    			0% = Off<br>\
			    			50% = 50% of fan\'s maximum RPM<br>\
			    			100% = Full speed',
            });


	$('a#pop-heater').popover({
			    trigger : 'click',  
			    placement : 'top', 
			    html: true, 
			    title : 'Max heater temperature',
			    content : 'Maximum allowed temerature heater can reach.<br>This limit should be set to avoid damage to your filament or the box/heater itself.<br>\
			    			For example; Let\'s say that your heater could reach max temperature of 150°C. However this could start to melt your filament, melt the dry box or start a fire.<br>\
			    			In order to avoid this, we set a heater temperature limit to make sure heater never passes this set temperature during normal operation.<br>\
			    			This limit will also affect how long it takes to reach target temperature.',
            });

const ctx = document.getElementById('myChart');
measurements_chart = new Chart(ctx, {
    type: 'line',
      data: {
        datasets: [
            {
                label: 'Heater',
                data: []
            },
            {
                label: 'Enclosure',
                data: []
            }
        ]
      },
    options: {
      animation: false, // disables all animations
      scales: {
        y: {
            beginAtZero: false,
            suggestedMin: 25,
            // suggestedMax: 2.25,
            ticks: {
              // forces step size to be 1.0 units
              stepSize: 1
            }
        },
        x: {
            beginAtZero: false,
            reverse: true
        }
      },
      plugins: {
          legend: {
            display: true,
          }
        }
    }
  });

	// Finally update status
	update_status(true);
});


function update_status(rearm)
{
	var ajaxTime= new Date().getTime();

	$.ajax({
	url: "/api/v0/status",
	type: "get", //send it through get method
    timeout: 2000,
	success: function(response) {
		console.log(response);

		var res = jQuery.parseJSON(response);

		$('#status-temp-target').text(res.target_temp_in);
		$('#status-fan-speed').text(res.fan_speed);
		$('#status-temp-inside').text(res.temp_in.toFixed(1));
		$('#status-temp-inside2').text(res.temp_in.toFixed(1));
		$('#status-temp-inside-target').text(res.target_temp_in.toFixed(1));
		$('#status-temp-heater').text(res.temp_heater.toFixed(1));
		$('#status-temp-heater-max').text(res.max_temp_heater.toFixed(0));
		$('#status-humidity-inside').text(res.humid_in.toFixed(0));
		$('#status-temp-outside').text(res.temp_out.toFixed(0));
		$('#status-humidity-outside').text(res.humid_out.toFixed(0));
        $('#status-heater-power').text(res.heater_power.toFixed(0));

        chart_add_point(0, {x: get_timestamp(), y: res.temp_heater.toFixed(1)});
        chart_add_point(1, {x: get_timestamp(), y: res.temp_in.toFixed(1)});

		// Homed status
		if(res.status == 1) {
			$('#status-box').text('Dry box is on').addClass('badge-success').removeClass('badge-warning').removeClass('badge-danger');
		}
		else {
			$('#status-box').text('Dry box is off').addClass('badge-warning').removeClass('badge-success').removeClass('badge-danger');
		}

	},
	error: function(xhr) {
		$('#status-box').text('Dry box is unreachable!').addClass('badge-danger').removeClass('badge-success').removeClass('badge-warning');
	}
	}).done(function () {
    var totalTime = new Date().getTime()-ajaxTime;
    // Here I want to get the how long it took to load some.php and use it further
	});;

	if(rearm) {
		rearm_status();
	}
}

function rearm_status()
{
	setTimeout(function () {
		update_status(true);
	}, 2000);
}

function chart_add_point(chartIndex, newData) {
    measurements_chart.data.datasets[chartIndex].data.unshift(newData);
    if (measurements_chart.data.datasets[chartIndex].data.length >= 900)
    {
        measurements_chart.data.datasets[chartIndex].data.shift();
    }

    measurements_chart.update('none');
}

function get_timestamp()
{
    let date = new Date();
    return twoDigitPad(date.getHours()) +':'+ twoDigitPad(date.getMinutes()) +':'+ twoDigitPad(date.getSeconds());
}

function twoDigitPad(num) {
    return num < 10 ? "0" + num : num;
}