FCC/Framework/Edge.WebHost/Views/WebConsole/VeederRoot_ATG_Console_Handler/Index.cshtml

@model Edge.WebHost.Models.VeederRoot_ATG_Console_Handler_Models.AtgController
@{
    ViewData["Title"] = "Auto Tank Gauge System";

    Layout = null;
}
<script>
    function clearCanvas(canvas) {
        var cxt = canvas.getContext("2d");
        cxt.clearRect(0, 0, canvas.width, canvas.height);
    }

    /*
     * draw a circle in canvas by specify its parameters.
     * @@constructor
     * @@param {string} canvas - all things will draw on.
     * @@param {string} x - center x coordinate value of the circle.
     * @@param {string} y - center y coordinate value of the circle.
     * @@param {string} r - radius of the circle.
     * @@param {string} productDatas - [{height: int-productHeight, color: string-colorValue, text: string-displayText}].
     * @@param {string} horiLineDatas - [{height: int-lineHeightValue, strokeColor: string-colorValue, text: string-displayText}].
     */
    function drawTank(canvas, x, y, r, productDatas, horiLineDatas) {
        var context = canvas.getContext('2d');

        /*draw a circle for a tank.*/
        context.beginPath();
        context.setLineDash([]);
        context.arc(x, y, r, 0, 2 * Math.PI, false);
        context.closePath();
        context.lineWidth = 1;
        context.fillStyle = 'white';
        context.fill();
        context.strokeStyle = '#550000';
        context.stroke();

        productDatas.forEach(function (data) {
            //console.log('height: ' + data.height + ' with color: ' + data.color);
            var temp_tri_w = Math.sqrt(Math.pow(r, 2) - Math.pow(r - data.height, 2));
            var temp_tri_h = r - data.height;
            //console.log('temp_tri_h: '+temp_tri_h+', cos: '+temp_tri_h/r+', acos: '+Math.acos(temp_tri_h/r));
            var sectorArc = Math.acos(temp_tri_h / r) * 2;///360 * 2* Math.PI;
            //console.log('height: ' + data.height + ', sectorArc: ' + sectorArc);

            /*draw the sector area*/
            context.beginPath();
            context.arc(x, y, r, (Math.PI - sectorArc) / 2, (Math.PI - sectorArc) / 2 + sectorArc, false);

            //var compensate_pixel_count = 10;
            line_start_x = x - temp_tri_w;//+compensate_pixel_count;
            line_end_x = x - temp_tri_w + temp_tri_w * 2;//-compensate_pixel_count;
            line_start_y = y + r - data.height;
            line_end_y = y + r - data.height;
            context.moveTo(line_start_x, line_start_y);
            context.lineTo(line_end_x, line_end_y);
            //context.strokeStyle = '#a4d3ff';
            //context.stroke();
            context.closePath();
            context.lineWidth = 1;
            context.fillStyle = data.color;
            context.fill();

            context.font = 'Bold 14px Arial';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.fillStyle = 'black';  // a color name or by using rgb/rgba/hex values
            context.fillText(data.text, line_start_x - 10, line_start_y); // text and position
            //   context.strokeStyle = '#550000';
            //   context.stroke();
        });

        horiLineDatas.forEach(function (data) {
            if (data.height > r * 2) {
                console.error('horiLine length should not exceed r*2, but now is ' + data.height);
                return;
            }

            var coordinate_height_y = r * 2 - data.height + y - r;
            //圆的标准方程(x-a)²+(y-b)²=r²
            var comp = Math.sqrt(Math.pow(r, 2) - Math.pow(coordinate_height_y - y, 2));

            line_start_x = -comp + x;
            line_end_x = comp + x;
            //console.log('horiLineDatas, comp is ' + comp + ', line_start_x is' + line_start_x
            //    + ', line_end_x is ' + line_end_x);
            context.beginPath();
            context.lineWidth = 1;
            context.setLineDash([3, 2]);/*dashes are 3px and spaces are 2px*/
            context.moveTo(line_start_x, coordinate_height_y);
            context.lineTo(line_end_x, coordinate_height_y);
            context.strokeStyle = data.strokeColor;//'#a4d3ff';
            context.stroke();
            context.font = 'italic 10px Arial';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.fillStyle = 'gray';  // a color name or by using rgb/rgba/hex values
            context.fillText(data.text, line_start_x + (line_end_x - line_start_x) / 2, coordinate_height_y - 4); // text and position
            //context.closePath();
        });
    }
</script>
<script src="~/js/Chart.bundle.js"></script>
<script src="~/js/jquery-3.4.1.min.js"></script>

@*<div class="text-center">
        <h3 class="display-4">This is the ATG Console Web App</h3>
    </div>*@
@if (Model == null || Model.Tanks == null)
{
    <h1>The console is <b>NOT ready</b> for connection, will auto reload once it's done...</h1>
    <script>
        setInterval(function () { location.reload() }, 3000);
    </script>
}
@if (Model.Tanks != null && Model.Tanks.Any())
    @foreach (var tank in Model.Tanks)
    {
        var atgConsoleLengthUnitDisplayStr = "mm";
        var atgConsoleVolumeUnitDisplayStr = "L";
        if (Model.SystemUnit == Edge.Core.IndustryStandardInterface.ATG.SystemUnit.US)
            atgConsoleLengthUnitDisplayStr = "inches";
        else if (Model.SystemUnit == Edge.Core.IndustryStandardInterface.ATG.SystemUnit.ImperialGallons)
            atgConsoleLengthUnitDisplayStr = "yard";
        <div style="border-color:gray;border-style:solid;border-width:thin;padding:4px">
            <p style="margin-top:@(10*(tank.TankNumber-1))px">
                Tank No.: <b>@tank.TankNumber</b>, has product: <b>@(tank.Product?.ProductLabel ?? "")(code: @(tank.Product?.ProductCode ?? ""))</b>
                is in tank state: <b>@(tank.State)</b>, Diameter: @(tank.Diameter ?? -1)@atgConsoleLengthUnitDisplayStr
            </p>
            <div style="display:flex;">
                <!-- Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. -->
                <div class="chart-container" style="position: relative;height:@(100/Model.Tanks.Count())vh; width:100vh;">
                    <canvas id="tank_@(tank.TankNumber)_Height_Water_Chart" aria-label="ThisIsTheCanvas" style="">Your browser does not support the canvas element.</canvas>
                </div>
                <canvas id="tank_@(tank.TankNumber)_Height_Water_SectionalView" aria-label="ThisIsTheCanvas"
                        style="height:@(100/Model.Tanks.Count())vh; width:50vh;">
                    Your browser does not support the canvas element.
                </canvas>
            </div>
        </div>
        <script>
            var ctx_tank_@(tank.TankNumber)_Height_Water_Chart = document.getElementById('tank_@(tank.TankNumber)_Height_Water_Chart');
            var tank_@(tank.TankNumber)_Height_Water_Chart = new Chart(ctx_tank_@(tank.TankNumber)_Height_Water_Chart, {
                type: 'line',
                data: {
                    //labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '油高',
                        //data: [1761.84, 1661.84, 1561.84, 1461.84, 1361.84, 761.84, 50.84],
                        backgroundColor: 'rgba(204, 204, 0, 0.2)',
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    },
                    {
                        label: '水高',
                        //data: [61.84, 90.15, 61.84, 120.84, 150.84, 200.84, 350.84],
                        backgroundColor: 'rgba(0, 255, 255, 0.2)',
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                // Include a 'mm' sign in the values
                                callback: function (value, index, values) {
                                    return value + '@atgConsoleLengthUnitDisplayStr';
                                }
                            }
                        }]
                    }
                }
            });

            //var canvas = document.getElementById('tank_@(tank.TankNumber)_Height_Water_SectionalView');

        </script>
    }

<script>
    var productHeight = 0;
    var waterHeight = 0;
    var maxChartStackDataCount = 30;
    function add_Height_Water_Data(__chart, tankNumber) {
        $.getJSON('Details/?tankNumber=' + tankNumber, function (datas) {
            if (datas == null) {
                console.log('response datas is null'); return;
            }

            //console.log(datas);
            datas.forEach(function (d) {
                var chartName = 'tank_' + d.tankNumber + '_Height_Water_Chart';
                var chart = window[chartName];
                if (chart == null) return;
                //console.log(chart);



                /*
                 *  purge line chart data
                 */
                chart.data.datasets.forEach((purgeDataset) => {
                    if (purgeDataset.data.length > maxChartStackDataCount) {
                        //console.log(chartName + '.data in datasets[' + purgeDataset.label + '] has its length of ' + purgeDataset.data.length + ', will truncate');
                        purgeDataset.data = purgeDataset.data.slice(purgeDataset.data.length - maxChartStackDataCount, purgeDataset.data.length);
                        //chart.data.labels = chart.data.labels.slice(chart.data.labels.length - maxChartStackDataCount, chart.data.labels.length);
                        //console.log('   ' + chartName + ' has truncated and the dataset.data.length now is ' + purgeDataset.data.length);
                        //for (var i = 0; i < dataset.data.length - maxChartStackDataCount; i++)
                        //dataset.data.pop();
                    }
                });
                if (chart.data.labels.length > maxChartStackDataCount) {
                    chart.data.labels = chart.data.labels.slice(chart.data.labels.length - maxChartStackDataCount, chart.data.labels.length);
                }



                //each batch will adding a new x axis value, most likely a time str.
                chart.data.labels.push(d.timeStamp);
                chart.data.datasets.forEach((dataset) => {
                    if (dataset.label === "油高") {
                        dataset.data.push(d.height);
                        productHeight = d.height;
                    }
                    else if (dataset.label === "水高") {
                        dataset.data.push(d.water);
                        waterHeight = d.water;
                    } else return;

                    chart.update({
                        duration: 600,
                        easing: 'easeOutBounce'
                    });

                    var sectionalViewCanvas = document.getElementById('tank_' + d.tankNumber + '_Height_Water_SectionalView');
                    this.clearCanvas(sectionalViewCanvas);
                    this.drawTank(sectionalViewCanvas, 150, 80, 60, [
                        { height: productHeight / 1800 * 60 * 2, color: 'orange', text: '92#' },
                        { height: waterHeight / 1800 * 60 * 2, color: '#00ced1', text: 'water' }],
                        [{ height: 90, strokeColor: 'red', text: 'fuel high' },
                        { height: 30, strokeColor: 'blue', text: 'water high' }]);
                });
            });

        })

    }

    function removeData(chart) {
        chart.data.labels.pop();
        chart.data.datasets.forEach((dataset) => {
            dataset.data.pop();
        });
        chart.update();
    }

    setInterval(function () { add_Height_Water_Data(null, null) }, 1500);
</script>