Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A php page shows Vultr's VPS bandwidth usage.
<?php
error_reporting(E_ERROR);
ini_set("display_errors","Off");
$request = "https://api.vultr.com/v1/server/bandwidth?SUBID=YOUR_SUBID&api_key=YOUR_API_KEY";
$serviceInfo = json_decode(file_get_contents($request));
$income = $serviceInfo->incoming_bytes;
$outgo = $serviceInfo->outgoing_bytes;
$sumin = 0;
$sumout = 0;
foreach ($income as $invalue) {
$sumin = $sumin + $invalue[1];
}
foreach ($outgo as $outvalue) {
$sumout = $sumout + $outvalue[1];
}
$data = array(
"plan_monthly_data" => 1073741824000,
"data_counter" => $sumin + $sumout,
);
$json = json_encode($data);
file_put_contents("data.json", $json);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bandwidth Usage</title>
<link rel="shortcut icon" type="images/x-icon" href="./favicon.ico">
<meta name="theme-color" content="#fff">
<meta name="viewport" content="width=320,maximum-scale=1.0,user-scalable=no">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<style>
@import url('https://fonts.proxy.ustclug.org/css?family=Indie+Flower|Josefin+Sans|Libre+Barcode+39+Text');
/**For some reason this is a Google Fonts Mirror for China, you may replace it with the real Google Fonts Domain**/
body {
/* margin: 0;
* padding: 0;
* background: url('./bg.jpg') center ;
*/
margin:0;
padding: 0;
background: #16A085; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F4D03F, #16A085); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F4D03F, #16A085); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
header {
text-align: center;
color: white;
font: 50px "Libre Barcode 39 Text",sans-serif
}
footer {
margin:10px;
padding: 0;
text-align: center;
color: white;
font: 25px "Indie Flower",sans-serif;
bottom: 0px
}
.fixed-bottom {position: fixed;bottom: 0;width:100%;}
div {
font: 25px 'Josefin Sans',sans-serif;
text-shadow: 0 0 5px;
text-align: center;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
border-radius: 5px;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
hr {
border : 0;
height: 2px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
@media screen and (max-width: 700px) {
body {
background-position: 32% 50%;
}
}
}
</style>
</head>
<body>
<header>Designed by Mashiro</header>
<div id="data-used"></div><div id="data-info"></div>
<footer class="fixed-bottom">This is the Real-Time Bandwidth Usage of the Past 30 Days</footer>
<script>
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,//网页正文全文高度
winHeight = window.innerHeight;//可视窗口高度,不包括浏览器顶部工具栏
if(!(contentHeight > winHeight)){
//当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom
$("footer").addClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
<script>
$.ajax({
url: "./data.json",
cache: false,
dataType: "json",
type: "GET",
success: function(data){
var plan_data, used_data, data_income, data_outcome, date_update, val;
used_data = (data["data_counter"] / 1024 / 1024 / 1024 / 2).toFixed(3);
plan_data = data["plan_monthly_data"] / 1024 / 1024 / 1024;
//val = (data["data_counter"] / data["plan_monthly_data"]).toFixed(4);
val = (used_data / plan_data * 100).toFixed(0);
$("#data-info").html("Used: " + val + "%<br><br>" + used_data + " GB<hr>" + plan_data + " GB");
val/=100;
$("#data-used").circleProgress({
value: val,
emptyFill: "rgba( 255, 255, 255, .7)",
size: 300,
startAngle: -(Math.PI/2),
thickness: 10,
lineCap: "round",
fill: { gradient: ["#3aeabb", "#fdd250"] },
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.