AnaLogger/server/templates/logger.html

{% extends "layout.html" %}

{% block content %}
<main>
    <script type="text/javascript">
        var intTime=600;
        // fix visualizzazioni
        fixDisplay();
        // avvio timer
        var timeout = setTimeout(dataRefresh, intTime);

        function fixDisplay(){
            $("#divNewFile").toggle();
        };

        function setGauges(chVal0,chVal1){
            // Create knob elements, 300 x 300 px in size.
            const knob0 = pureknob.createKnob(200, 200);
            const knob1 = pureknob.createKnob(200, 200);

            // Set properties knob0
            knob0.setProperty('angleStart', -0.8 * Math.PI);
            knob0.setProperty('angleEnd', 0.8 * Math.PI);
            knob0.setProperty('colorFG', '#07adec');
            knob0.setProperty('trackWidth', 0.3);
            knob0.setProperty('valMin', 0);
            knob0.setProperty('valMax', 100);

            // Set properties knob1
            knob1.setProperty('angleStart', -0.8 * Math.PI);
            knob1.setProperty('angleEnd', 0.8 * Math.PI);
            knob1.setProperty('colorFG', '#07adec');
            knob1.setProperty('trackWidth', 0.3);
            knob1.setProperty('valMin', 0);
            knob1.setProperty('valMax', 100);

            // Set initial value0
            knob0.setValue(chVal0);
            // Create element node0
            const node0 = knob0.node();

            // Set initial value1
            knob1.setValue(chVal1);
            // Create element node1
            const node1 = knob1.node();

            // Add it to the DOM.
            //console.log(newVal);
            // $("#divCh0").val(node);
            // $("#divCh0").val(node);
            $("#divCh0").html(node0);
            $("#divCh1").html(node1);
            //$("#divCh0").append(node);
            // const elem0 = document.getElementById('divCh0');
            // elem0.appendChild(node);
            // const elem1 = document.getElementById('divCh1');
            // elem1.appendChild(node);
        }

        function dataRefresh() {
            // scarico i dati aggioranti
            $.ajax({url: "/api/v1/channels/all", success: function(result){
                // compilo i dati scaricati
                $("#Chan0").html(result.Ch0);
                $("#Chan1").html(result.Ch1);
                $("#Chan2").html(result.Ch2);
                $("#Chan3").html(result.Ch3);
                $("#Chan4").html(result.Ch4);
                $("#Chan5").html(result.Ch5);
                $("#Chan6").html(result.Ch6);
                $("#Chan7").html(result.Ch7);
                $("#Output0").html(result.Out0);
                $("#Output1").html(result.Out1);
                $("#Output2").html(result.Out2);
                $("#Output3").html(result.Out3);
                $("#Output4").html(result.Out4);
                $("#Output5").html(result.Out5);
                $("#Output6").html(result.Out6);
                $("#Output7").html(result.Out7);
                $("#LogFrequency").html(result.Freq);
                $("#LoggerTime").html(result.timeLog);
                $("#ServerTime").html(result.timeSrv);
                $("#ChanScaleMin").html(result.ChScaleMin);
                $("#ChanScaleMax").html(result.ChScaleMax);
                $("#ChanRealMin").html(result.ChRealMin);
                $("#ChanRealMax").html(result.ChRealMax);
                $("#LastSessionName").html(result.LastSessionName);
                setGauges(result.Out0,result.Out1);
            }});

            timeout = setTimeout(dataRefresh, intTime);
        };

        // Funzione startLog: chiamata /api/v1/log/start per avviare log e dare nome
        function startLog(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/log/start"
                ,data: ""
            })
        };

        // Funzione stopLog: fa chiamata per settare a 0 il LOG:STATUS
        function stopLog(){
            $.ajax({
                type: 'PUT'
                ,url: "/api/v1/log/stop"
                ,data: ""
            })
        };

    </script>
    <div class="container-fluid text-center">
        <div class="row mx-2 my-2">
            <div class="card mb-4 col-6">
                <div class="card-header">
                <strong>Channel 1</strong>
                </div>
                <div class="card-body">
                    <div id="divCh0"></div>
                Original: <span id="Chan0"></span>
                <br>
                    <strong>Scaled: <span id="Output0"></span>
                    </strong>
                </div>
            </div>
            <div class="card mb-4 col-6">
                <div class="card-header">
                <strong>Channel 2</strong>
                </div>
                <div class="card-body">
                    <div id="divCh1"></div>
                Original: <span id="Chan1"></span>
                <br>
                    <strong>Scaled: <span id="Output1"></span>
                    </strong>
                </div>
            </div>
        </div>
        <div class="alert alert-info text-center">
            <strong>Log period: </strong> <span id="LogFrequency"></span> ms
        </div>
            <!--pulsanti start log e stop log-->
            <div class="text-center mx-2 my-2">
                <button type="button" class="btn btn-success" onclick="startLog()">Start Log</button>
                <button type="button" class="btn btn-danger" onclick="stopLog()">Stop Log</button>
            </div>
        <div class="card mb-4">
            <div class="card-header">
                <div class="row">
                        <i class="fas fa-table mr-1"></i>
                        <strong class="text-center">
                        Record Log
                    </strong>
                </div>
            </div>
            <div class="card-body">
                <div class="input-group-text mb-3">
                    <span>Session: &nbsp;</span> <span id="LastSessionName"></span>
                </div>
 
                    <!-- To Do: display contenuto cartella /data e dimensione files -->

                </div>
            </div>
        </div>
</main>
{% endblock %}