Skip to content

Instantly share code, notes, and snippets.

@shreddedbacon

shreddedbacon/etc-nut-upsstats-single.html

Last active January 20, 2019 08:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shreddedbacon/43001ed7f2e93d35671a50964f698384 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shreddedbacon/43001ed7f2e93d35671a50964f698384 to your computer and use it in GitHub Desktop.
Download ZIP
NUT UPS Better Visualisations
Raw
etc-nut-upsstats-single.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="starter-template">
<h2>Network UPS Tools upsstats
@VERSION@
</h2>
<h5>
@DATE %a %b %d %X %Z %Y@
</h5>
<!-- START EACH HERE -->
@IFSUPP battery.charge@
@IFSUPP battery.voltage@
<div class="card">
<div class="card-body">
<h5 class="card-title">Battery Charge</h5>
<p class="card-text">
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: @VAR battery.charge@%;" aria-valuenow="@VAR battery.charge@" aria-valuemin="0" aria-valuemax="100">@VAR battery.charge@%</div>
</div>
<div>Voltage<br>@VAR battery.voltage@</div>
</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Battery Voltage</h5>
<p class="card-text">
<div>Voltage<br>@VAR battery.voltage@</div>
</p>
</div>
</div>
@ELSE@
@IFSUPP battery.charge@
<div class="card">
<div class="card-body">
<h5 class="card-title">Battery Charge</h5>
<p class="card-text">
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: @VAR battery.charge@%;" aria-valuenow="@VAR battery.charge@" aria-valuemin="0" aria-valuemax="100">@VAR battery.charge@%</div>
</div>
</p>
</div>
</div>
@ELSE@
<div class="card">
<div class="card-body">
<h5 class="card-title">Battery Charge</h5>
<p class="card-text">
<div>Voltage<br>@VAR battery.voltage@</div>
</p>
</div>
</div>
@ENDIF@
@IFSUPP input.L2-L3.voltage@
<td ALIGN="CENTER">L1-L2<br>@IMG input.L1-L2.voltage width=68@</td>
<td ALIGN="CENTER">L2-L3<br>@IMG input.L2-L3.voltage width=68@</td>
<td ALIGN="CENTER">L3-L1<br>@IMG input.L3-L1.voltage width=68@</td>
@ELSE@
@IFSUPP input.L2-N.voltage@
<td ALIGN="CENTER">L1-N<br>@IMG input.L1-N.voltage width=68@</td>
<td ALIGN="CENTER">L2-N<br>@IMG input.L2-N.voltage width=68@</td>
<td ALIGN="CENTER">L3-N<br>@IMG input.L3-N.voltage width=68@</td>
@ELSE@
<div class="card">
<div class="card-body">
<h5 class="card-title">Input Voltage</h5>
<p class="card-text">
<div class="progress">
<div id="inputvoltage" class="progress-bar bg-dark" role="progressbar" style="width: @VAR input.voltage@%;" aria-valuenow="@VAR input.voltage@" aria-valuemin="0" aria-valuemax="280">@VAR input.voltage@ VAC</div>
</div>
</p>
</div>
</div>
<script>
var perc="";
perc = ((@VAR input.voltage@/280) * 100).toFixed(3);
document.getElementById('inputvoltage').style.width = perc+"%";
</script>
@ENDIF@
@IFSUPP output.L2-L3.voltage@
<td ALIGN="CENTER">L1-L2<br>@IMG output.L1-L2.voltage width=68@</td>
<td ALIGN="CENTER">L2-L3<br>@IMG output.L2-L3.voltage width=68@</td>
<td ALIGN="CENTER">L3-L1<br>@IMG output.L3-L1.voltage width=68@</td>
@ELSE@
@IFSUPP output.L2-N.voltage@
<td ALIGN="CENTER">L1-N<br>@IMG output.L1-N.voltage width=68@</td>
<td ALIGN="CENTER">L2-N<br>@IMG output.L2-N.voltage width=68@</td>
<td ALIGN="CENTER">L3-N<br>@IMG output.L3-N.voltage width=68@</td>
@ELSE@
<div class="card">
<div class="card-body">
<h5 class="card-title">Output Voltage</h5>
<p class="card-text">
<div class="progress">
<div id="outputvoltage" class="progress-bar bg-secondary" role="progressbar" style="width: @VAR output.voltage@%;" aria-valuenow="@VAR output.voltage@" aria-valuemin="0" aria-valuemax="280">@VAR output.voltage@ VAC</div>
</div>
</p>
</div>
</div>
<script>
var perc="";
perc = ((@VAR output.voltage@/280) * 100).toFixed(3);
document.getElementById('outputvoltage').style.width = perc+"%";
</script>
@ENDIF@
@IFSUPP output.L2.power.percent@
<td ALIGN="CENTER">L1<br>@IMG output.L1.power.percent width=68@</td>
<td ALIGN="CENTER">L2<br>@IMG output.L2.power.percent width=68@</td>
<td ALIGN="CENTER">L3<br>@IMG output.L3.power.percent width=68@</td>
@ELSE@
@IFSUPP output.L2.realpower.percent@
<td ALIGN="CENTER">L1<br>@IMG output.L1.realpower.percent width=68@</td>
<td ALIGN="CENTER">L2<br>@IMG output.L2.realpower.percent width=68@</td>
<td ALIGN="CENTER">L3<br>@IMG output.L3.realpower.percent width=68@</td>
@ELSE@
<div class="card">
<div class="card-body">
<h5 class="card-title">UPS Load</h5>
<p class="card-text">
<div class="progress">
<div id="upsload" class="progress-bar bg-success" role="progressbar" style="width: @VAR ups.load@%;" aria-valuenow="@VAR ups.load@" aria-valuemin="0" aria-valuemax="115">@VAR ups.load@%</div>
</div>
</p>
</div>
</div>
<script>
var perc="";
perc = ((@VAR ups.load@/115) * 100).toFixed(3);
document.getElementById('upsload').style.width = perc+"%";
</script>
@ENDIF@
<!-- END EACH HERE -->
</div>
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Raw
etc-nut-upsstats.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="starter-template">
<h2>Network UPS Tools upsstats
@VERSION@
</h2>
<h5>
@DATE %a %b %d %X %Z %Y@
</h5>
<!-- START EACH HERE -->
@FOREACHUPS@
<div class="row">
<div class="col-md-12">
<h3>System -
<a class="btn btn-primary" href="?host=@HOST@">@HOSTDESC@</a>
</h3>
<div class="row"><!-- /.ROW-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Status</div>
<div class="card-body">
<p class="card-text">@STATUS@</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Battery</div>
<div class="card-body">
<p class="card-text">
@IFSUPP battery.charge@
@VAR battery.charge@
%
@ENDIF@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Input (VAC)</div>
<div class="card-body">
<p class="card-text">
@IFSUPP input.L2-L3.voltage@
@VAR input.L1-L2.voltage@
@VAR input.L2-L3.voltage@
@VAR input.L3-L1.voltage@
@ELSE@
@IFSUPP input.L2-N.voltage@
@VAR input.L1-N.voltage@
@VAR input.L2-N.voltage@
@VAR input.L3-N.voltage@
@ELSE@
@IFSUPP input.voltage@
@VAR input.voltage@
@ENDIF@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Output (VAC)</div>
<div class="card-body">
<p class="card-text">
@IFSUPP output.L2-L3.voltage@
@VAR output.L1-L2.voltage@
@VAR output.L2-L3.voltage@
@VAR output.L3-L1.voltage@
@ELSE@
@IFSUPP output.L2-N.voltage@
@VAR output.L1-N.voltage@
@VAR output.L2-N.voltage@
@VAR output.L3-N.voltage@
@ELSE@
@IFSUPP output.voltage@
@VAR output.voltage@
@ENDIF@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Load (%)</div>
<div class="card-body">
<p class="card-text">
@IFSUPP output.L2.power.percent@
@VAR output.L1.power.percent@
@VAR output.L2.power.percent@
@VAR output.L3.power.percent@
@ELSE@
@IFSUPP output.L2.realpower.percent@
@VAR output.L1.realpower.percent@
@VAR output.L2.realpower.percent@
@VAR output.L3.realpower.percent@
@ELSE@
@IFSUPP ups.load@
@VAR ups.load@
%
@ENDIF@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">UPS Temp (&deg;C)</div>
<div class="card-body">
<p class="card-text">
@IFSUPP ups.temperature@
@UPSTEMP@
@DEGREES@
@ELSE@
@IFSUPP battery.temperature@
@BATTTEMP@
@DEGREES@
@ENDIF@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Battery Runtime</div>
<div class="card-body">
<p class="card-text">
@IFSUPP battery.runtime@
@RUNTIME@
@ENDIF@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
<!--SMALL PANEL-->
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Model</div>
<div class="card-body">
<p class="card-text">
@VAR ups.model@
</p>
</div>
</div>
</div>
<!--SMALL PANEL-->
</div><!-- /.ROW-->
</div>
</div>
</div>
@ENDFOR@
<!-- END EACH HERE -->
</div>
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Raw
usr-share-nut-www-index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<style>
body {
font-size: .875rem;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 48px; /* Height of navbar */
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #999;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
/*
* Utilities
*/
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
iframe {display: block; width: 100%; height: calc(100vh - 100px); border: none;}
</style>
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">NUT UPS Monitoring</a>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" target="mainFrame" href="/cgi-bin/nut/upsstats.cgi">
<span data-feather="home"></span>
Statistics
</a>
</li>
<li class="nav-item">
<a class="nav-link" target="mainFrame" href="/cgi-bin/nut/upsset.cgi">
<span data-feather="file"></span>
Settings
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<iframe src="/cgi-bin/nut/upsstats.cgi" name="mainFrame"></iframe>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment