HTML/CSS/JS demo

Source HTML/CSS/JS

by Th3On3Fr33man

HTML

<body style='background-color:#4a4a4c;' onload="drawGauges(); startSocket();"> <!--start()-->

    
    <div class="pageHdrDiv">
        <h1 class="pageHdr">FLUID INFUSION TRAINING SYSTEM</h1>
    </div>
    <!--
    <div style="clear:both;"></div>
    -->
    <!--COLUMN HEADERS-->
    <div class='twoHeaderRow'>
        <div id="twoTopHeaderLeft" class="twoTopHeader">
            <h3>BATTERY</h3>
        </div>

        <div id="twoTopHeaderRight" class="twoTopHeader">
            <h3>MARROW</h3>
        </div>
    </div>
    
    <div class="battFluid">
            
        <div class="battDiv">
            
            <svg width="50px" height="50px" viewBox="0 0 100 150" class="battChgContainer">
                <polygon id="battChgContainer" stroke="gray" fill="grey" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
            </svg>
            
            <div class="battContainer">
                <div id="battery0" class="battery">
                    <div id="battery100" class="juice"></div>
                    
                    <svg id="battLowContainer" width="120px" height="120px" viewBox="0 0 100 190" class="battLowContainer deactiveSect">
                        <polygon stroke="gray" fill="#1A1A1C" points="85,151 85,110 100,110 105,105 110,100 115,95 115,50 100,50 100,20 85,20 85,50 65,50 65,20 50,20 50,50 35,50 35,95 40,100 45,105 50,110 65,110 65,151"></polygon>
                    </svg>
                    
                </div>   
                
            </div>
        
            <h1 id="hdr100" class="hdr100">100%</h1>
        </div>
        
        <!--FLUID GAUGE-->
        <div class="fluidDiv">
            <table class="fluidGauge">
                <tr>
                    <td>
                        <div class="fluidReservoir blood">
                            <div class="tube">
                            </div>
                            <div class="liquid">
                              ...

CSS

/*
===============================
GENERAL CSS
===============================
*/


/*Hide Divs*/

.deactiveSect {
    display: none !important;
}

.centerPiece {
    padding-left: 15%;
}

/*
===============================
HEADERS CSS
===============================
*/

.pageHdrDiv {
    background-color: #172D33;
    position: relative;
    bottom: 30px;
}

.pageHdr {
    color:white;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 2%;
    font-family:arial;
    font-size: 45px;
}

.oneHeaderRow {
    width: 100%;
    height: 34px;
    background-color: white;
    color: black;
    font-family: arial;
    position: relative;
    padding-top: 0.1%;
    padding-bottom: 1.5%;
    position: relative;
    bottom: 119px;
    text-align: center;
}

.twoHeaderRow {
    width: 100%;
    height: 97px;
    background-color: #26788C;
    margin-bottom: 50px;
    position: relative; 
    bottom: 60px;
}

#twoTopHeaderLeft
{
    border-right: solid;
}

#twoTopHeaderRight
{
    width: 49%;
}

.twoTopHeader
{
    width: 50%;
    color: black;
    font-family: arial;
    float: left;
    text-align: center;
    height: 97px;
    line-height: 180%;
    font-size: 25px;
}

.topHeader
{
    margin: 0px 250px 0px 225px;
    float:left;
}

.threeHeaderRow {
    width: 100%;
    background-color: #26788C;
    position:relative;
    height: 97px;
    bottom: 119px;
}

.threeHeader {
    float: left;
    width: 30.333%;
    text-align: center;
    color: black;
    position: relative;
    font-family: arial;
    line-height: 180%;
    height: 97px;
    font-size: 25px;
}

.threeHeaderLeft {
    border-right: solid;
    margin-left: 2%;
    padding-right: 0.5%;
    margin-right: 1.8%;
}

.threeHeaderCenter {
    border-right: solid;
    padding-right: 0.8%;
    margin-right: 1%;
}

.elementWrapper {
    width: 100%;
    padding: .75em .75em;
}

.headerStyle {
    color: white;
    font-family: arial; 
}

.under {
    text-decoration:...

JavaScript

var pressureGaugeC; 
var pressureGaugeD; 
var pressureGaugeE;
var currLevel = 100; 

var ws = null;

function startSocket(){
      ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']);
      ws.binaryType = "arraybuffer";
      ws.onopen = function(e){
        console.log('websock open');
        statusUpdate();
      };
      ws.onclose = function(e){
        console.log('Disconnected');
      };
      ws.onerror = function(e){
        console.log("ws error", e);
      };
      ws.onmessage = function(e){

        console.log(e);

        //Status Update
        if (e.data === 'Update Status') {

        } //end else if

        //Incoming Status Information from Arduino side
        else {
            console.log('status event');

            var totalStatus = e.data;
            var splitStatus = totalStatus.split(',');

            /*
            ===============================
            MICROSWITCH C
            ===============================
            */
            
            var microswitchOffC = document.getElementById('microLeftRed');
            var microswitchOnC = document.getElementById('microLeftGreen');
            
            if((splitStatus[0] == 0 && microswitchOnC.classList.contains("deactiveSect")) || (splitStatus[0] == 1 && microswitchOffC.classList.contains("deactiveSect")))
            {
            } //end if
            else 
            {
                if (splitStatus[0] == 0) {
                    microswitchOnC.classList.add("deactiveSect");
                    microswitchOffC.className = microswitchOffC.className.replace( /(?:^|\s)deactiveSect(?!\S)/g , '' );
                } //end if
                else if (splitStatus[0] == 1) {
                    microswitchOffC.classList.add("deactiveSect");
                    microswitchOnC.className = microswitchOnC.className.replace( /(?:^|\s)deactiveSect(?!\S)/g , '' );
                } //end else if
            } //end else
                    

            /*
...