Html Question posted in
Some basic documentation can be found here.

Html – Unable to remove unwanted elements from webpage

I am a newbie to html/css.
I found an excellent project at (https://www.martyncurrey.com/) whose code I wish to repurpose for my ESP01 based project. A screenshot of the output of the code is attached below.

I removed both topContainer and topContainer2 elements, one by one. However in both cases the code stops working.

I want to remove the clock and the brightness icon (encircled in red) for my project. However despite my many days of labour, I have been unsuccessful. When I remove various sections of the code to remove the brightness icon and the clock, the rest of the page stops working. Code is as follows:


<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//w3c//dtd xhtml 1.0 strict//en' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta content='text/html;charset=utf-8' http-equiv='Content-Type'>
        <title>
            IOT Webpage Test
        </title>
            
        <style>
            body {background-color: #ffffff; font-size: 100% }
            #wrapper       { width: 500px; margin: 20px auto;  padding: 5px 5px 5px 5px;    text-align:center;   border: 2px solid blue;   border-radius: 15px;  }
            h2             { text-align: center;}
            h3             { margin: 0px 0px 5px 0px; }
            
            #topContainer   { display: flex; align-items: center;  justify-content: center;   Margin: 0px auto 2em auto;}
            #topContainer2  { text-align: center;  margin-right: 2em;  }
            #brightnessIcon {   }

            #time           { display: inline; font-family: 'Courier New', Courier, monospace;  font-size: 250%;   }
            
            
            #dialContainer { display:inline-block;   margin: 0px auto 0px auto;  }
            #dial_1        { display:inline-block;  }
            #dial_2        { display:inline-block; margin: 0px 0px 0px 30px; }
            canvas         { background-color: #ffffff;    }
            .bigText       { font-size: 150%;}  
            .noMargin      { margin: 0px 0px 0px 0px; }
            
            #graphContainer { display:inline-block;  text-align:left; margin: 20px 0px 20px 0px;  }
            #key            {  width: 200px;} 
            .box            { float: left;  height:15px;  width:10px;  margin: 0px 10px 0px 0px; clear: both;     }
            .red            { background-color: red; }
            .blue           { background-color: blue; }
        </style>
            
    </head>
    
    <body >
        <div id='wrapper'>
            <h1>Temperature & Humidity</h1>

            <div id='topContainer'>
                <div id='topContainer2'>
                    <div id='brightnessIcon'>  </div>
                    <div id='label'>Brightness</div>
            </div>
                <span id='time'>00:00:00</span>
            </div>

             <div id='dialContainer'> 
                 <div id='dial_1'> 
                     <h3>Temperature</h3>
                     <canvas id='canvasTemp' width='200' height='150'  style='border:1px solid #000000;' > </canvas>
                     <p class='noMargin bigText'><span id='temp'>00</span> °C</p>
                 </div>    

                 <div id='dial_2'> 
                   <h3>Humidity</h3>
                   <canvas id='canvasHumid' width='200' height='150'  style='border:1px solid #000000;' > </canvas>
                   <p class='noMargin bigText'><span id='humd'>00</span> %</p>
                 </div>  
             </div>
             
            <div id='graphContainer'> 
                 <canvas id='graph' width='440' height='150'  style='border:1px solid #000000; background-color:white;' > </canvas>
                 <div id='key'>
                     <div> 
                         <div class='box red'></div> Temperature</div>
                    <div>
                        <div class='box blue'></div> Humidity
                    </div>
                 </div>    
        </div>
        
    </body>
    
    
    <script type='text/javascript'>
    // <![CDATA[
    
    function updateValues()
    {
        t++;  if (t > 50)  {  t=-30; }
        h++;  if (h > 100) {  h=0;   }
        b++ ; if (b>12)    {  b=0;   }

 
        drawSVG(b);
        drawDial('canvasTemp',  '#ffaaaa', 160, 20, -30,  50, t);   
        drawDial('canvasHumid', '#aaaaff', 160, 20,   0, 100, h);
        document.getElementById('temp').innerHTML = t;
        document.getElementById('humd').innerHTML = h;
        
        graphMin = -30;
        graphMax = 100;
        drawGraph('graph', graphMin, graphMax, false, t, h);
    }
    
    
    
    // ===========================================  DIAL  =========================================
    
    function drawDial(canvasID, dialColour, startAngle, stopAngle, minVal, maxVal, dialValue)
    {
        oneDegreeInRadians = Math.PI/180;
        if (stopAngle < startAngle) { stopAngle = stopAngle + 360;}

        let arcStartAngleInRadians =  oneDegreeInRadians * (startAngle-5)  ;
        let arcStopAngleInRadians  =  oneDegreeInRadians * (stopAngle+5) ;  

        var c = document.getElementById(canvasID);
        var ctx = c.getContext('2d');
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.save();
        
        let H = c.height;
        let W = c.width;
        
        let arcLineWidth = W/5;
        ctx.translate(W/2, W/2);            // move coordinates 0,0 to the centre of the canvas
        
        // draw arc
        ctx.beginPath();
        let radius = W/2 - (arcLineWidth/2) - (W/100);          
        ctx.lineWidth = arcLineWidth;
        ctx.lineCap = 'butt';
        ctx.strokeStyle = dialColour;
        ctx.arc(0, 0, radius, arcStartAngleInRadians, arcStopAngleInRadians, false);
        ctx.stroke();

        
        // draw centre circle
        ctx.beginPath();
        let centerCircleRadius = W/100*3.5
        ctx.strokeStyle = '#000000';
        ctx.fillStyle = '#222222';
        ctx.lineWidth = 2;
        ctx.arc(0, 0, centerCircleRadius, 0, 2 * Math.PI, true);
        ctx.stroke();
        ctx.fill();
        

        // draw ticks   
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.lineCap = 'butt';
        ctx.strokeStyle = '#333333';
    
        ctx.font = '12px Arial';
        ctx.fillStyle = '#333333';
        ctx.textAlign = 'center'; 
        ctx.textBaseline = 'top'; 

        let tickStartPoint = radius - (arcLineWidth/2) ;   // bottom of the arc
        let tickLength =  5/8 * arcLineWidth - 5;   
        
        let labelPos = radius + (arcLineWidth/2) - 2; 

        for (let angle=minVal; angle<=maxVal; angle = angle+10)
        {       
            let angleInDegrees =  (angle-minVal) *  ((stopAngle - startAngle) / (maxVal - minVal)) + startAngle  ;
            let angleInRadians = angleInDegrees * oneDegreeInRadians;

            ctx.rotate(angleInRadians );    
            ctx.moveTo(tickStartPoint, 0 );                   
            ctx.lineTo(tickStartPoint + tickLength, 0 );
            ctx.stroke();

            
            // draw the label at the right angle.
            // rotate the dial - 90 degree, draw the text at the new top of the dial, then rotate +90.
            // this means we use the - y axis.
            
            ctx.rotate(90*oneDegreeInRadians); 
            ctx.fillText(angle.toString(), 0, -labelPos );              
            ctx.rotate(-90*oneDegreeInRadians); 
            
            ctx.rotate(-angleInRadians);  //  this puts the dial back where it was.         
        }
    

        // draw pointer
        
        // map the value to a degree
        let pointerAngleInDegrees =  (dialValue-minVal) *  ((stopAngle - startAngle) / (maxVal - minVal)) + startAngle  ;
        let pointerAngleInRadians = pointerAngleInDegrees * oneDegreeInRadians;

        let pointerLength = radius*0.86;
        let pointerWidth = W/100 * 2;   
        
        ctx.beginPath();
        ctx.lineWidth = pointerWidth;
        ctx.lineCap = 'round';  
        ctx.moveTo(0,0);
        ctx.rotate(pointerAngleInRadians);
        ctx.lineTo(pointerLength, 0);
        ctx.stroke();
        ctx.rotate(-pointerAngleInRadians);
    
        // reset the coordinates ready for next time        
        ctx.restore();
        
    }
    
    
    
    
    function drawGraph(canvasID, gMin, gMax, initOnly, t,h )
    {

    // Graph Init - draw the graph but do not draw values.
    
        var c = document.getElementById(canvasID);
        var ctx = c.getContext('2d');
        ctx.clearRect(0, 0, c.width, c.height); 

        var graphWidth  = c.width;
        var graphHeight = c.height; 
            
        var fontSize = '10px Arial';
        var fontAdjust = 3;
        if (graphHeight < 100) { fontSize = '6px Arial'; fontAdjust = 1;}
        
        var numySteps = gMax - gMin;
        if (numySteps > 10) { numySteps = numySteps /10; }
        var numxSteps = 20;

        var xStep = graphWidth / numxSteps;
        var yStep = graphHeight / numySteps;

    
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#e5e5e5';
        ctx.lineCap = 'butt';
        for (let x = 0; x < c.width; x=x+xStep) 
        { 
           ctx.moveTo(x, 0);    ctx.lineTo(x, c.height);     ctx.stroke();
        }

        for (let y = 0; y <= numySteps; y++) 
        { 
           let yPos = y * yStep;
           ctx.moveTo(0, yPos);    ctx.lineTo(c.width,yPos);    ctx.stroke();
        }
        
        // draw labels      
        ctx.font = fontSize;
        ctx.fillStyle = '#000000';
     
        // no need to draw the first or the last label
        for (let i = 1; i < numySteps; i++)
        {
           let yPos = c.height - i * yStep;
           let tmp = i * 10;
           tmp = tmp + gMin;
           let txt = tmp.toString();
           ctx.fillText(txt, 2, yPos + fontAdjust);            
        }
        
    

        if (! initOnly)
        {
            
            tempArray.shift();  tempArray[19] = t;
            humdArray.shift();  humdArray[19] = h;
            
            // Temperature              
            ctx.beginPath();
            ctx.lineWidth = 1;  
            ctx.strokeStyle = '#ff7777';    
            ctx.fillStyle   = '#ff4444';    

            // on the first value we are not coming from an existing point so we just need to move to the coordinates ready to plot value 2.
            let firstValue = true;

            for (let i = 0; i < numxSteps; i++) 
            { 
                if (tempArray[i] != -9999) 
                {
                    let tmpVal = tempArray[i] ;
                    let yPos = (tmpVal - gMin) * (graphHeight - 0)/( gMax - gMin ) + 0;
                    yPos = graphHeight - yPos;
                    let xPos = (i*xStep) + xStep;
                    
                    // draw the line
                    if (firstValue)   {  ctx.moveTo(xPos, yPos);  firstValue = false;  }
                    else              {  ctx.lineTo(xPos,yPos);   ctx.stroke();  }

                    // draw the dot
                    ctx.beginPath();  ctx.arc(xPos, yPos, 3, 0, 2 * Math.PI, false);  ctx.fill();
                }
            }
            
            
            // Humidity
            ctx.lineWidth = 1;  
            ctx.strokeStyle = '#7777ff';    
            ctx.fillStyle   = '#4444ff';        
            ctx.beginPath();
        
            // on the first value we are not coming from an existing point so we just need to move to the coordinates ready to plot value 2.
            firstValue = true;

            for (let i = 0; i < numxSteps; i++) 
            { 
                if (humdArray[i] != -9999) 
                {
                    let tmpVal = humdArray[i] ;
                    let yPos = (tmpVal - gMin) * (graphHeight - 0)/( gMax - gMin ) + 0;
                    yPos = graphHeight - yPos;
                    let xPos = (i*xStep) + xStep;
                    
                    // draw the line
                    if (firstValue)   {  ctx.moveTo(xPos, yPos);  firstValue = false;  }
                    else              {  ctx.lineTo(xPos,yPos);   ctx.stroke();  }

                    // draw the dot
                    ctx.beginPath();  ctx.arc(xPos, yPos, 3, 0, 2 * Math.PI, false);  ctx.fill();
                }
            }

        }
    
        
    }
    
    
    function drawSVG(brightnessVal)
    {
        var SVGicon = svgArray[0].replace('|||', brightnessVal);
        
        for (var i=1; i <= brightnessVal; i++)
        {
           SVGicon = SVGicon + svgArray[i];
        }
        document.getElementById('brightnessIcon').innerHTML = SVGicon;
    }
    
    
    
    
    document.addEventListener('DOMContentLoaded', ready, false);
    var tempArray = [ -9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999 ];
    var humdArray = [ -9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999 ];
    var svgArray = [];

    var t = -30;
    var h = 0;
    var b = 0;
    

    svgArray[0] = "<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='25mm' height='25mm' version='1.1' viewBox='0 0 2500 2500'   xmlns:xlink='http://www.w3.org/1999/xlink'> <defs> <style type='text/css'> <![CDATA[ .str0 {stroke:#aaaaaa; stroke-width:20.00} .str1 {stroke:#aaaaaa; stroke-width:7.5} .str2 {stroke:#aaaaaa; stroke-width:15.00} .fil0 {fill:black} .fil1 {fill:yellow} .fnt0 {font-weight:normal;font-size:400px;font-family:'Verdana'} ]]> </style> </defs> <g id='Layer_x0020_1'> <circle class='fil1 str2' cx='1250' cy='1250' r='680'/>";
    svgArray[0] = svgArray[0] + "<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' class='fil0 fnt0'>|||</text>";
    svgArray[1] = "<rect class='fil1 str0' transform='matrix(0.133299 -0.23088 0.246464 0.142296 1562.82 538.757)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[2] = "<rect class='fil1 str0' transform='matrix(0.23088 -0.133299 0.142296 0.246464 1876.53 790.456)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[3] = "<rect class='fil1 str1' x='2022' y='1165' width='428' height='169' rx='75' ry='80'/>";
    svgArray[4] = "<rect class='fil1 str0' transform='matrix(-0.23088 -0.133299 0.142296 -0.246464 2246.87 1923.36)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[5] = "<rect class='fil1 str0' transform='matrix(-0.133299 -0.23088 0.246464 -0.142296 1776.64 2331.58)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[6] = "<rect class='fil1 str0' transform='matrix(-2.11373E-014 0.266598 -0.284592 -2.25059E-014 1334.71 2022.37)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[7] = "<rect class='fil1 str0' transform='matrix(0.133299 -0.23088 0.246464 0.142296 576.632 2246.88)' width='1604' height='595' rx='280' ry='280'/> ";
    svgArray[8] = "<rect class='fil1 str0' transform='matrix(0.23088 -0.133299 0.142296 0.246464 168.409 1776.64)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[9] = "<rect class='fil1 str1' x='50' y='1165' width='428' height='169' rx='75' ry='80'/>";
    svgArray[10] = "<rect class='fil1 str0' transform='matrix(-0.23088 -0.133299 0.142296 -0.246464 538.753 937.178)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[11] = "<rect class='fil1 str0' transform='matrix(-0.133299 -0.23088 0.246464 -0.142296 790.452 623.465)' width='1604' height='595' rx='280' ry='280'/>";
    svgArray[12] = "<rect class='fil1 str0' transform='matrix(-2.11373E-014 0.266598 -0.284592 -2.25059E-014 1334.71 50.0007)' width='1604' height='595' rx='280' ry='280'/>";

    
    function updateTime() 
    {  
       var d = new Date();
       var t = d.toLocaleTimeString();
       document.getElementById('time').innerHTML = t;
    }
    
    
    // This is executed after the document has finished loading.

    function ready() 
    {
        console.log('started');
        drawDial('canvasTemp',  '#ffaaaa', 160, 20, -30,  50, 0);   
        drawDial('canvasHumid', '#aaaaff', 160, 20,   0, 100, 0);

        drawGraph('graph', -30, 100, true, t, h);
        
        drawSVG(1)
        
        
        var myVar1 = setInterval(updateTime, 1000); 
        var myVar2 = setInterval(updateValues, 1000); // when working the update will be based on received new data not a timer
    }
            

    
    // ]]>
    </script>
    
    
</html>

Please help.
TIA
azhaque

Tags:

2

Answers


  1. 0

    Apparently, the HTML you gave is not a valid HTML

    enter image description herstrong texte

    The #wrapper is missing the close </div> tag, and the <script>, is supposed to be placed inside body element (at least in your case it’s so).

    It seems like you’re confused by the HTML structure. If you’re using Visual Studio Code, I recommend installing extensions:

    • HTML Checker to format your HTML to be prettier on save action
    • HTML Format to run Check HTML (CTRL + SHIFT + P -> Search for Check HTML on your HTML file)

    Anyway, this is the revised code on Jsfiddle (I commented out the topContainer so it hid the brightness icon and the time): https://jsfiddle.net/6xrnwa8h/1/
    enter image description here

    <?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//w3c//dtd xhtml 1.0 strict//en' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>

<head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type'>
    <title>
        IOT Webpage Test
    </title>

    <style>
        body {
            background-color: #ffffff;
            font-size: 100%
        }

        #wrapper {
            width: 500px;
            margin: 20px auto;
            padding: 5px 5px 5px 5px;
            text-align: center;
            border: 2px solid blue;
            border-radius: 15px;
        }

        h2 {
            text-align: center;
        }

        h3 {
            margin: 0px 0px 5px 0px;
        }

        #topContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            Margin: 0px auto 2em auto;
        }

        #topContainer2 {
            text-align: center;
            margin-right: 2em;
        }

        #brightnessIcon {}

        #time {
            display: inline;
            font-family: 'Courier New', Courier, monospace;
            font-size: 250%;
        }


        #dialContainer {
            display: inline-block;
            margin: 0px auto 0px auto;
        }

        #dial_1 {
            display: inline-block;
        }

        #dial_2 {
            display: inline-block;
            margin: 0px 0px 0px 30px;
        }

        canvas {
            background-color: #ffffff;
        }

        .bigText {
            font-size: 150%;
        }

        .noMargin {
            margin: 0px 0px 0px 0px;
        }

        #graphContainer {
            display: inline-block;
            text-align: left;
            margin: 20px 0px 20px 0px;
        }

        #key {
            width: 200px;
        }

        .box {
            float: left;
            height: 15px;
            width: 10px;
            margin: 0px 10px 0px 0px;
            clear: both;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>

</head>

<body>
    <div id='wrapper'>
        <h1>Temperature & Humidity</h1>

        <!-- <div id='topContainer'>
            <div id='topContainer2'>
                <div id='brightnessIcon'> </div>
                <div id='label'>Brightness</div>
            </div>
            <span id='time'>00:00:00</span>
        </div> -->

        <div id='dialContainer'>
            <div id='dial_1'>
                <h3>Temperature</h3>
                <canvas id='canvasTemp' width='200' height='150' style='border:1px solid #000000;'> </canvas>
                <p class='noMargin bigText'><span id='temp'>00</span> °C</p>
            </div>

            <div id='dial_2'>
                <h3>Humidity</h3>
                <canvas id='canvasHumid' width='200' height='150' style='border:1px solid #000000;'> </canvas>
                <p class='noMargin bigText'><span id='humd'>00</span> %</p>
            </div>
        </div>

        <div id='graphContainer'>
            <canvas id='graph' width='440' height='150' style='border:1px solid #000000; background-color:white;'>
            </canvas>
            <div id='key'>
                <div>
                    <div class='box red'></div> Temperature
                </div>
                <div>
                    <div class='box blue'></div> Humidity
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript'>
        // <![CDATA[

        function updateValues() {
            t++; if (t > 50) { t = -30; }
            h++; if (h > 100) { h = 0; }
            b++; if (b > 12) { b = 0; }


            drawSVG(b);
            drawDial('canvasTemp', '#ffaaaa', 160, 20, -30, 50, t);
            drawDial('canvasHumid', '#aaaaff', 160, 20, 0, 100, h);
            document.getElementById('temp').innerHTML = t;
            document.getElementById('humd').innerHTML = h;

            graphMin = -30;
            graphMax = 100;
            drawGraph('graph', graphMin, graphMax, false, t, h);
        }



        // ===========================================  DIAL  =========================================

        function drawDial(canvasID, dialColour, startAngle, stopAngle, minVal, maxVal, dialValue) {
            oneDegreeInRadians = Math.PI / 180;
            if (stopAngle < startAngle) { stopAngle = stopAngle + 360; }

            let arcStartAngleInRadians = oneDegreeInRadians * (startAngle - 5);
            let arcStopAngleInRadians = oneDegreeInRadians * (stopAngle + 5);

            var c = document.getElementById(canvasID);
            var ctx = c.getContext('2d');
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.save();

            let H = c.height;
            let W = c.width;

            let arcLineWidth = W / 5;
            ctx.translate(W / 2, W / 2);            // move coordinates 0,0 to the centre of the canvas

            // draw arc
            ctx.beginPath();
            let radius = W / 2 - (arcLineWidth / 2) - (W / 100);
            ctx.lineWidth = arcLineWidth;
            ctx.lineCap = 'butt';
            ctx.strokeStyle = dialColour;
            ctx.arc(0, 0, radius, arcStartAngleInRadians, arcStopAngleInRadians, false);
            ctx.stroke();


            // draw centre circle
            ctx.beginPath();
            let centerCircleRadius = W / 100 * 3.5
            ctx.strokeStyle = '#000000';
            ctx.fillStyle = '#222222';
            ctx.lineWidth = 2;
            ctx.arc(0, 0, centerCircleRadius, 0, 2 * Math.PI, true);
            ctx.stroke();
            ctx.fill();


            // draw ticks   
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.lineCap = 'butt';
            ctx.strokeStyle = '#333333';

            ctx.font = '12px Arial';
            ctx.fillStyle = '#333333';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';

            let tickStartPoint = radius - (arcLineWidth / 2);   // bottom of the arc
            let tickLength = 5 / 8 * arcLineWidth - 5;

            let labelPos = radius + (arcLineWidth / 2) - 2;

            for (let angle = minVal; angle <= maxVal; angle = angle + 10) {
                let angleInDegrees = (angle - minVal) * ((stopAngle - startAngle) / (maxVal - minVal)) + startAngle;
                let angleInRadians = angleInDegrees * oneDegreeInRadians;

                ctx.rotate(angleInRadians);
                ctx.moveTo(tickStartPoint, 0);
                ctx.lineTo(tickStartPoint + tickLength, 0);
                ctx.stroke();


                // draw the label at the right angle.
                // rotate the dial - 90 degree, draw the text at the new top of the dial, then rotate +90.
                // this means we use the - y axis.

                ctx.rotate(90 * oneDegreeInRadians);
                ctx.fillText(angle.toString(), 0, -labelPos);
                ctx.rotate(-90 * oneDegreeInRadians);

                ctx.rotate(-angleInRadians);  //  this puts the dial back where it was.         
            }


            // draw pointer

            // map the value to a degree
            let pointerAngleInDegrees = (dialValue - minVal) * ((stopAngle - startAngle) / (maxVal - minVal)) + startAngle;
            let pointerAngleInRadians = pointerAngleInDegrees * oneDegreeInRadians;

            let pointerLength = radius * 0.86;
            let pointerWidth = W / 100 * 2;

            ctx.beginPath();
            ctx.lineWidth = pointerWidth;
            ctx.lineCap = 'round';
            ctx.moveTo(0, 0);
            ctx.rotate(pointerAngleInRadians);
            ctx.lineTo(pointerLength, 0);
            ctx.stroke();
            ctx.rotate(-pointerAngleInRadians);

            // reset the coordinates ready for next time        
            ctx.restore();

        }




        function drawGraph(canvasID, gMin, gMax, initOnly, t, h) {

            // Graph Init - draw the graph but do not draw values.

            var c = document.getElementById(canvasID);
            var ctx = c.getContext('2d');
            ctx.clearRect(0, 0, c.width, c.height);

            var graphWidth = c.width;
            var graphHeight = c.height;

            var fontSize = '10px Arial';
            var fontAdjust = 3;
            if (graphHeight < 100) { fontSize = '6px Arial'; fontAdjust = 1; }

            var numySteps = gMax - gMin;
            if (numySteps > 10) { numySteps = numySteps / 10; }
            var numxSteps = 20;

            var xStep = graphWidth / numxSteps;
            var yStep = graphHeight / numySteps;


            ctx.lineWidth = 1;
            ctx.strokeStyle = '#e5e5e5';
            ctx.lineCap = 'butt';
            for (let x = 0; x < c.width; x = x + xStep) {
                ctx.moveTo(x, 0); ctx.lineTo(x, c.height); ctx.stroke();
            }

            for (let y = 0; y <= numySteps; y++) {
                let yPos = y * yStep;
                ctx.moveTo(0, yPos); ctx.lineTo(c.width, yPos); ctx.stroke();
            }

            // draw labels      
            ctx.font = fontSize;
            ctx.fillStyle = '#000000';

            // no need to draw the first or the last label
            for (let i = 1; i < numySteps; i++) {
                let yPos = c.height - i * yStep;
                let tmp = i * 10;
                tmp = tmp + gMin;
                let txt = tmp.toString();
                ctx.fillText(txt, 2, yPos + fontAdjust);
            }



            if (!initOnly) {

                tempArray.shift(); tempArray[19] = t;
                humdArray.shift(); humdArray[19] = h;

                // Temperature              
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#ff7777';
                ctx.fillStyle = '#ff4444';

                // on the first value we are not coming from an existing point so we just need to move to the coordinates ready to plot value 2.
                let firstValue = true;

                for (let i = 0; i < numxSteps; i++) {
                    if (tempArray[i] != -9999) {
                        let tmpVal = tempArray[i];
                        let yPos = (tmpVal - gMin) * (graphHeight - 0) / (gMax - gMin) + 0;
                        yPos = graphHeight - yPos;
                        let xPos = (i * xStep) + xStep;

                        // draw the line
                        if (firstValue) { ctx.moveTo(xPos, yPos); firstValue = false; }
                        else { ctx.lineTo(xPos, yPos); ctx.stroke(); }

                        // draw the dot
                        ctx.beginPath(); ctx.arc(xPos, yPos, 3, 0, 2 * Math.PI, false); ctx.fill();
                    }
                }


                // Humidity
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#7777ff';
                ctx.fillStyle = '#4444ff';
                ctx.beginPath();

                // on the first value we are not coming from an existing point so we just need to move to the coordinates ready to plot value 2.
                firstValue = true;

                for (let i = 0; i < numxSteps; i++) {
                    if (humdArray[i] != -9999) {
                        let tmpVal = humdArray[i];
                        let yPos = (tmpVal - gMin) * (graphHeight - 0) / (gMax - gMin) + 0;
                        yPos = graphHeight - yPos;
                        let xPos = (i * xStep) + xStep;

                        // draw the line
                        if (firstValue) { ctx.moveTo(xPos, yPos); firstValue = false; }
                        else { ctx.lineTo(xPos, yPos); ctx.stroke(); }

                        // draw the dot
                        ctx.beginPath(); ctx.arc(xPos, yPos, 3, 0, 2 * Math.PI, false); ctx.fill();
                    }
                }

            }


        }


        function drawSVG(brightnessVal) {
            var SVGicon = svgArray[0].replace('|||', brightnessVal);

            for (var i = 1; i <= brightnessVal; i++) {
                SVGicon = SVGicon + svgArray[i];
            }
            document.getElementById('brightnessIcon').innerHTML = SVGicon;
        }




        document.addEventListener('DOMContentLoaded', ready, false);
        var tempArray = [-9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999];
        var humdArray = [-9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999];
        var svgArray = [];

        var t = -30;
        var h = 0;
        var b = 0;


        svgArray[0] = "<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='25mm' height='25mm' version='1.1' viewBox='0 0 2500 2500'   xmlns:xlink='http://www.w3.org/1999/xlink'> <defs> <style type='text/css'> <![CDATA[ .str0 {stroke:#aaaaaa; stroke-width:20.00} .str1 {stroke:#aaaaaa; stroke-width:7.5} .str2 {stroke:#aaaaaa; stroke-width:15.00} .fil0 {fill:black} .fil1 {fill:yellow} .fnt0 {font-weight:normal;font-size:400px;font-family:'Verdana'} ]]> </style> </defs> <g id='Layer_x0020_1'> <circle class='fil1 str2' cx='1250' cy='1250' r='680'/>";
        svgArray[0] = svgArray[0] + "<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' class='fil0 fnt0'>|||</text>";
        svgArray[1] = "<rect class='fil1 str0' transform='matrix(0.133299 -0.23088 0.246464 0.142296 1562.82 538.757)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[2] = "<rect class='fil1 str0' transform='matrix(0.23088 -0.133299 0.142296 0.246464 1876.53 790.456)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[3] = "<rect class='fil1 str1' x='2022' y='1165' width='428' height='169' rx='75' ry='80'/>";
        svgArray[4] = "<rect class='fil1 str0' transform='matrix(-0.23088 -0.133299 0.142296 -0.246464 2246.87 1923.36)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[5] = "<rect class='fil1 str0' transform='matrix(-0.133299 -0.23088 0.246464 -0.142296 1776.64 2331.58)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[6] = "<rect class='fil1 str0' transform='matrix(-2.11373E-014 0.266598 -0.284592 -2.25059E-014 1334.71 2022.37)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[7] = "<rect class='fil1 str0' transform='matrix(0.133299 -0.23088 0.246464 0.142296 576.632 2246.88)' width='1604' height='595' rx='280' ry='280'/> ";
        svgArray[8] = "<rect class='fil1 str0' transform='matrix(0.23088 -0.133299 0.142296 0.246464 168.409 1776.64)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[9] = "<rect class='fil1 str1' x='50' y='1165' width='428' height='169' rx='75' ry='80'/>";
        svgArray[10] = "<rect class='fil1 str0' transform='matrix(-0.23088 -0.133299 0.142296 -0.246464 538.753 937.178)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[11] = "<rect class='fil1 str0' transform='matrix(-0.133299 -0.23088 0.246464 -0.142296 790.452 623.465)' width='1604' height='595' rx='280' ry='280'/>";
        svgArray[12] = "<rect class='fil1 str0' transform='matrix(-2.11373E-014 0.266598 -0.284592 -2.25059E-014 1334.71 50.0007)' width='1604' height='595' rx='280' ry='280'/>";


        function updateTime() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById('time').innerHTML = t;
        }


        // This is executed after the document has finished loading.

        function ready() {
            console.log('started');
            drawDial('canvasTemp', '#ffaaaa', 160, 20, -30, 50, 0);
            drawDial('canvasHumid', '#aaaaff', 160, 20, 0, 100, 0);

            drawGraph('graph', -30, 100, true, t, h);

            drawSVG(1)


            var myVar1 = setInterval(updateTime, 1000);
            var myVar2 = setInterval(updateValues, 1000); // when working the update will be based on received new data not a timer
        }



        // ]]>
    </script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    One way would be to simply hide the topContainer by adding display: none; property.

    The working code will remain but hidden.

    And other way would be to remove that particular part and JS code related to that like following example.

    function updateValues() {
  t++;
  if (t > 50) {
    t = -30;
  }
  h++;
  if (h > 100) {
    h = 0;
  }
  b++;
  if (b > 12) {
    b = 0;
  }


    
  drawDial('canvasTemp', '#ffaaaa', 160, 20, -30, 50, t);
  drawDial('canvasHumid', '#aaaaff', 160, 20, 0, 100, h);
  document.getElementById('temp').innerHTML = t;
  document.getElementById('humd').innerHTML = h;

  graphMin = -30;
  graphMax = 100;
  drawGraph('graph', graphMin, graphMax, false, t, h);
}



// ===========================================  DIAL  =========================================

function drawDial(canvasID, dialColour, startAngle, stopAngle, minVal, maxVal, dialValue) {
  oneDegreeInRadians = Math.PI / 180;
  if (stopAngle < startAngle) {
    stopAngle = stopAngle + 360;
  }

  let arcStartAngleInRadians = oneDegreeInRadians * (startAngle - 5);
  let arcStopAngleInRadians = oneDegreeInRadians * (stopAngle + 5);

  var c = document.getElementById(canvasID);
  var ctx = c.getContext('2d');
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.save();

  let H = c.height;
  let W = c.width;

  let arcLineWidth = W / 5;
  ctx.translate(W / 2, W / 2); // move coordinates 0,0 to the centre of the canvas

  // draw arc
  ctx.beginPath();
  let radius = W / 2 - (arcLineWidth / 2) - (W / 100);
  ctx.lineWidth = arcLineWidth;
  ctx.lineCap = 'butt';
  ctx.strokeStyle = dialColour;
  ctx.arc(0, 0, radius, arcStartAngleInRadians, arcStopAngleInRadians, false);
  ctx.stroke();


  // draw centre circle
  ctx.beginPath();
  let centerCircleRadius = W / 100 * 3.5
  ctx.strokeStyle = '#000000';
  ctx.fillStyle = '#222222';
  ctx.lineWidth = 2;
  ctx.arc(0, 0, centerCircleRadius, 0, 2 * Math.PI, true);
  ctx.stroke();
  ctx.fill();


  // draw ticks 
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.lineCap = 'butt';
  ctx.strokeStyle = '#333333';

  ctx.font = '12px Arial';
  ctx.fillStyle = '#333333';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';

  let tickStartPoint = radius - (arcLineWidth / 2); // bottom of the arc
  let tickLength = 5 / 8 * arcLineWidth - 5;

  let labelPos = radius + (arcLineWidth / 2) - 2;

  for (let angle = minVal; angle <= maxVal; angle = angle + 10) {
    let angleInDegrees = (angle - minVal) * ((stopAngle - startAngle) / (maxVal - minVal)) + startAngle;
    let angleInRadians = angleInDegrees * oneDegreeInRadians;

    ctx.rotate(angleInRadians);
    ctx.moveTo(tickStartPoint, 0);
    ctx.lineTo(tickStartPoint + tickLength, 0);
    ctx.stroke();


    // draw the label at the right angle.
    // rotate the dial - 90 degree, draw the text at the new top of the dial, then rotate +90.
    // this means we use the - y axis.

    ctx.rotate(90 * oneDegreeInRadians);
    ctx.fillText(angle.toString(), 0, -labelPos);
    ctx.rotate(-90 * oneDegreeInRadians);

    ctx.rotate(-angleInRadians); //  this puts the dial back where it was.          
  }


  // draw pointer

  // map the value to a degree
  let pointerAngleInDegrees = (dialValue - minVal) * ((stopAngle - startAngle) / (maxVal - minVal)) + startAngle;
  let pointerAngleInRadians = pointerAngleInDegrees * oneDegreeInRadians;

  let pointerLength = radius * 0.86;
  let pointerWidth = W / 100 * 2;

  ctx.beginPath();
  ctx.lineWidth = pointerWidth;
  ctx.lineCap = 'round';
  ctx.moveTo(0, 0);
  ctx.rotate(pointerAngleInRadians);
  ctx.lineTo(pointerLength, 0);
  ctx.stroke();
  ctx.rotate(-pointerAngleInRadians);

  // reset the coordinates ready for next time      
  ctx.restore();

}




function drawGraph(canvasID, gMin, gMax, initOnly, t, h) {

  // Graph Init - draw the graph but do not draw values.

  var c = document.getElementById(canvasID);
  var ctx = c.getContext('2d');
  ctx.clearRect(0, 0, c.width, c.height);

  var graphWidth = c.width;
  var graphHeight = c.height;

  var fontSize = '10px Arial';
  var fontAdjust = 3;
  if (graphHeight < 100) {
    fontSize = '6px Arial';
    fontAdjust = 1;
  }

  var numySteps = gMax - gMin;
  if (numySteps > 10) {
    numySteps = numySteps / 10;
  }
  var numxSteps = 20;

  var xStep = graphWidth / numxSteps;
  var yStep = graphHeight / numySteps;


  ctx.lineWidth = 1;
  ctx.strokeStyle = '#e5e5e5';
  ctx.lineCap = 'butt';
  for (let x = 0; x < c.width; x = x + xStep) {
    ctx.moveTo(x, 0);
    ctx.lineTo(x, c.height);
    ctx.stroke();
  }

  for (let y = 0; y <= numySteps; y++) {
    let yPos = y * yStep;
    ctx.moveTo(0, yPos);
    ctx.lineTo(c.width, yPos);
    ctx.stroke();
  }

  // draw labels        
  ctx.font = fontSize;
  ctx.fillStyle = '#000000';

  // no need to draw the first or the last label
  for (let i = 1; i < numySteps; i++) {
    let yPos = c.height - i * yStep;
    let tmp = i * 10;
    tmp = tmp + gMin;
    let txt = tmp.toString();
    ctx.fillText(txt, 2, yPos + fontAdjust);
  }



  if (!initOnly) {

    tempArray.shift();
    tempArray[19] = t;
    humdArray.shift();
    humdArray[19] = h;

    // Temperature              
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#ff7777';
    ctx.fillStyle = '#ff4444';

    // on the first value we are not coming from an existing point so we just need to move to the coordinates ready to plot value 2.
    let firstValue = true;

    for (let i = 0; i < numxSteps; i++) {
      if (tempArray[i] != -9999) {
        let tmpVal = tempArray[i];
        let yPos = (tmpVal - gMin) * (graphHeight - 0) / (gMax - gMin) + 0;
        yPos = graphHeight - yPos;
        let xPos = (i * xStep) + xStep;

        // draw the line
        if (firstValue) {
          ctx.moveTo(xPos, yPos);
          firstValue = false;
        } else {
          ctx.lineTo(xPos, yPos);
          ctx.stroke();
        }

        // draw the dot
        ctx.beginPath();
        ctx.arc(xPos, yPos, 3, 0, 2 * Math.PI, false);
        ctx.fill();
      }
    }


    // Humidity
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#7777ff';
    ctx.fillStyle = '#4444ff';
    ctx.beginPath();

    // on the first value we are not coming from an existing point so we just need to move to the coordinates ready to plot value 2.
    firstValue = true;

    for (let i = 0; i < numxSteps; i++) {
      if (humdArray[i] != -9999) {
        let tmpVal = humdArray[i];
        let yPos = (tmpVal - gMin) * (graphHeight - 0) / (gMax - gMin) + 0;
        yPos = graphHeight - yPos;
        let xPos = (i * xStep) + xStep;

        // draw the line
        if (firstValue) {
          ctx.moveTo(xPos, yPos);
          firstValue = false;
        } else {
          ctx.lineTo(xPos, yPos);
          ctx.stroke();
        }

        // draw the dot
        ctx.beginPath();
        ctx.arc(xPos, yPos, 3, 0, 2 * Math.PI, false);
        ctx.fill();
      }
    }

  }


}




document.addEventListener('DOMContentLoaded', ready, false);
var tempArray = [-9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999];
var humdArray = [-9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999, -9999];
var svgArray = [];

var t = -30;
var h = 0;
var b = 0;


svgArray[0] = "<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='25mm' height='25mm' version='1.1' viewBox='0 0 2500 2500'   xmlns:xlink='http://www.w3.org/1999/xlink'> <defs> <style type='text/css'> <![CDATA[ .str0 {stroke:#aaaaaa; stroke-width:20.00} .str1 {stroke:#aaaaaa; stroke-width:7.5} .str2 {stroke:#aaaaaa; stroke-width:15.00} .fil0 {fill:black} .fil1 {fill:yellow} .fnt0 {font-weight:normal;font-size:400px;font-family:'Verdana'} ]]> </style> </defs> <g id='Layer_x0020_1'> <circle class='fil1 str2' cx='1250' cy='1250' r='680'/>";
svgArray[0] = svgArray[0] + "<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' class='fil0 fnt0'>|||</text>";
svgArray[1] = "<rect class='fil1 str0' transform='matrix(0.133299 -0.23088 0.246464 0.142296 1562.82 538.757)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[2] = "<rect class='fil1 str0' transform='matrix(0.23088 -0.133299 0.142296 0.246464 1876.53 790.456)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[3] = "<rect class='fil1 str1' x='2022' y='1165' width='428' height='169' rx='75' ry='80'/>";
svgArray[4] = "<rect class='fil1 str0' transform='matrix(-0.23088 -0.133299 0.142296 -0.246464 2246.87 1923.36)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[5] = "<rect class='fil1 str0' transform='matrix(-0.133299 -0.23088 0.246464 -0.142296 1776.64 2331.58)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[6] = "<rect class='fil1 str0' transform='matrix(-2.11373E-014 0.266598 -0.284592 -2.25059E-014 1334.71 2022.37)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[7] = "<rect class='fil1 str0' transform='matrix(0.133299 -0.23088 0.246464 0.142296 576.632 2246.88)' width='1604' height='595' rx='280' ry='280'/> ";
svgArray[8] = "<rect class='fil1 str0' transform='matrix(0.23088 -0.133299 0.142296 0.246464 168.409 1776.64)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[9] = "<rect class='fil1 str1' x='50' y='1165' width='428' height='169' rx='75' ry='80'/>";
svgArray[10] = "<rect class='fil1 str0' transform='matrix(-0.23088 -0.133299 0.142296 -0.246464 538.753 937.178)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[11] = "<rect class='fil1 str0' transform='matrix(-0.133299 -0.23088 0.246464 -0.142296 790.452 623.465)' width='1604' height='595' rx='280' ry='280'/>";
svgArray[12] = "<rect class='fil1 str0' transform='matrix(-2.11373E-014 0.266598 -0.284592 -2.25059E-014 1334.71 50.0007)' width='1604' height='595' rx='280' ry='280'/>";




// This is executed after the document has finished loading.

function ready() {
  console.log('started');
  drawDial('canvasTemp', '#ffaaaa', 160, 20, -30, 50, 0);
  drawDial('canvasHumid', '#aaaaff', 160, 20, 0, 100, 0);

  drawGraph('graph', -30, 100, true, t, h);

  
  var myVar2 = setInterval(updateValues, 1000); // when working the update will be based on received new data not a timer
}
    body {
  background-color: #ffffff;
  font-size: 100%
}

#wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 5px 5px 5px 5px;
  text-align: center;
  border: 2px solid blue;
  border-radius: 15px;
}

h2 {
  text-align: center;
}

h3 {
  margin: 0px 0px 5px 0px;
}

#topContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  Margin: 0px auto 2em auto;
}

#topContainer2 {
  text-align: center;
  margin-right: 2em;
}

#brightnessIcon {}

#time {
  display: inline;
  font-family: 'Courier New', Courier, monospace;
  font-size: 250%;
}

#dialContainer {
  display: inline-block;
  margin: 0px auto 0px auto;
}

#dial_1 {
  display: inline-block;
}

#dial_2 {
  display: inline-block;
  margin: 0px 0px 0px 30px;
}

canvas {
  background-color: #ffffff;
}

.bigText {
  font-size: 150%;
}

.noMargin {
  margin: 0px 0px 0px 0px;
}

#graphContainer {
  display: inline-block;
  text-align: left;
  margin: 20px 0px 20px 0px;
}

#key {
  width: 200px;
}

.box {
  float: left;
  height: 15px;
  width: 10px;
  margin: 0px 10px 0px 0px;
  clear: both;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
    <div id="wrapper">
  <h1>Temperature & Humidity</h1>

  <div id="dialContainer">
    <div id="dial_1">
      <h3>Temperature</h3>
      <canvas
        id="canvasTemp"
        width="200"
        height="150"
        style="border: 1px solid #000000"
      >
      </canvas>
      <p class="noMargin bigText"><span id="temp">00</span> °C</p>
    </div>

    <div id="dial_2">
      <h3>Humidity</h3>
      <canvas
        id="canvasHumid"
        width="200"
        height="150"
        style="border: 1px solid #000000"
      >
      </canvas>
      <p class="noMargin bigText"><span id="humd">00</span> %</p>
    </div>
  </div>

  <div id="graphContainer">
    <canvas
      id="graph"
      width="440"
      height="150"
      style="border: 1px solid #000000; background-color: white"
    >
    </canvas>
    <div id="key">
      <div>
        <div class="box red"></div>
        Temperature
      </div>
      <div>
        <div class="box blue"></div>
        Humidity
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search