kopia lustrzana https://github.com/lowtechmag/solar
249 wiersze
14 KiB
HTML
249 wiersze
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ DEFAULT_LANG }}">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> {% block head %}
|
|
|
|
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
|
|
|
|
{% assets filters="libsass,cssmin", output="css/style.min.css", "css/style.scss" %}
|
|
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}"> {% endassets %} {% from 'syndication.html' import syndication with context %} {{ syndication(article) }} {% if FEED_ALL_ATOM %}
|
|
|
|
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" /> {% endif %} {% if FEED_ALL_RSS %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" /> {% endif %} {% if FEED_ATOM %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" /> {% endif %} {% if FEED_RSS %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ FEED_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" /> {% endif %} {% if CATEGORY_FEED_ATOM and category %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ CATEGORY_FEED_ATOM|format(category.slug) }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" /> {% endif %} {% if CATEGORY_FEED_RSS and category %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ CATEGORY_FEED_RSS|format(category.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" /> {% endif %} {% if TAG_FEED_ATOM and tag %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_ATOM|format(tag.slug) }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" /> {% endif %} {% if TAG_FEED_RSS and tag %}
|
|
<link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_RSS|format(tag.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" /> {% endif %} {% endblock head %}
|
|
</head>
|
|
|
|
{% block body_class %}
|
|
<body>
|
|
{% endblock body_class %}
|
|
<div id="bat_data" class="bat_status">
|
|
<a href="{{ SITEURL }}/power.html" title="Battery Capacity">
|
|
<span id="charge_icon"></span>
|
|
<span id="level">0%</span></a>
|
|
</div>
|
|
<div id="battery">
|
|
</div>
|
|
<main>
|
|
<header class="top">
|
|
<h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
|
|
<div class="subtitle">
|
|
<a href="{{ SITEURL }}/power.html">{{ SITESUBTITLE }} <svg class="icon" viewBox="0 0 500 500"><title>Solar</title><circle class="svg_fill" cx="248.48" cy="252.55" r="97.03"/><rect class="svg_fill" x="234.53" y="17.45" width="27.9" height="112.39"/><rect class="svg_fill" x="234.53" y="375.25" width="27.9" height="112.39"/><rect class="svg_fill" x="413.42" y="196.35" width="27.9" height="112.39" transform="translate(679.92 -174.83) rotate(90)"/><rect class="svg_fill" x="55.63" y="196.35" width="27.9" height="112.39" transform="translate(322.12 182.97) rotate(90)"/><rect class="svg_fill" x="361.03" y="69.85" width="27.9" height="112.39" transform="translate(198.96 -228.23) rotate(45)"/><rect class="svg_fill" x="108.03" y="322.85" width="27.9" height="112.39" transform="translate(303.75 24.77) rotate(45)"/><rect class="svg_fill" x="361.03" y="322.85" width="27.9" height="112.39" transform="translate(908.15 381.93) rotate(135)"/><rect class="svg_fill" x="108.03" y="69.85" width="27.9" height="112.39" transform="translate(297.35 128.93) rotate(135)"/></svg></a>
|
|
</div>
|
|
<nav id="menu">
|
|
<div id="menu-s">
|
|
menu
|
|
</div>
|
|
<ul id="menu-list">
|
|
<li><a href="{{ SITEURL }}/about.html">About</a></li>
|
|
<li class="low"><a class="category" href="{{ SITEURL }}/low-tech-solutions.html">Low-tech Solutions</a></li>
|
|
<li class="hig"><a class="category" href="{{ SITEURL }}/high-tech-problems.html">High-tech Problems</a></li>
|
|
<li class="obs"><a class="category" href="{{ SITEURL }}/obsolete-technology.html">Obsolete Technology</a></li>
|
|
<li><a href="{{ SITEURL }}/archives.html">Archive</a></li>
|
|
<li><a href="{{ SITEURL }}/donate.html">Donate</a></li>
|
|
<li class="social"><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" target="_blank"><svg viewBox="0 0 80 80" class="icon"><title>rss</title><circle cx="19.91" cy="58.23" r="6.86"/><path d="M67.89,65.72H55.7A41.86,41.86,0,0,0,13.89,23.91V11.73A54.06,54.06,0,0,1,67.89,65.72Z"/><path d="M48.93,65.72H36.75A22.88,22.88,0,0,0,13.89,42.87V30.68A35.08,35.08,0,0,1,48.93,65.72Z"/></svg></a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /#menu -->
|
|
</header>
|
|
<!-- /#banner -->
|
|
|
|
{% block content %} {% endblock %}
|
|
<footer id="content-info" class="body">
|
|
<h2>
|
|
<a href="{{ SITEURL }}/">{{ SITENAME }}</a>
|
|
</h2>
|
|
<div class="dashboard">
|
|
<ul class="cols">
|
|
<li>
|
|
<h3>Server Stats</h3>
|
|
<p>
|
|
Location: Barcelona<br>
|
|
Time: <span id="time">Local Time</span><br>
|
|
Battery Status:
|
|
<span class="bat_status" id="dashboard_level">battery capacity</span> capacity, <span id="charge_text">chargin / draining</span><br>
|
|
Power Used: <span id="power">power usage</span><br>
|
|
Uptime: <span id="uptime">up since</span><br>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h3>Forecast</h3>
|
|
<div class="forecast"></div>
|
|
</li>
|
|
<li>
|
|
<h3>Info</h3>
|
|
<p>
|
|
<a href="{{ SITEURL }}/about.html">About the site</a><br>
|
|
<a href="{{ SITEURL }}/power.html">Power</a><br>
|
|
<a href="{{ SITEURL }}/colophon.html">Colophon</a><br>
|
|
<a href="{{ SITEURL }}/donate.html">Donate</a>
|
|
</p>
|
|
<p><a href="{{ SITEURL }}/privacy.html">Privacy Policy</a></p>
|
|
</li>
|
|
<li>
|
|
<h3>Contact</h3>
|
|
<p>
|
|
© Kris De Decker<br>
|
|
solar [at] lowtechmagazine [dot] com</p>
|
|
{% if SOCIAL or FEED_ALL_ATOM or FEED_ALL_RSS %}
|
|
<div class="social">
|
|
<a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate"><svg viewBox="0 0 80 80" class="icon"><title>rss</title><circle cx="19.91" cy="58.23" r="6.86"/><path d="M67.89,65.72H55.7A41.86,41.86,0,0,0,13.89,23.91V11.73A54.06,54.06,0,0,1,67.89,65.72Z"/><path d="M48.93,65.72H36.75A22.88,22.88,0,0,0,13.89,42.87V30.68A35.08,35.08,0,0,1,48.93,65.72Z"/></svg></a>
|
|
<a href="https://www.facebook.com/Lowtechmagazine/"><svg viewBox="0 0 80 80" class="icon"><title>facebook</title><path d="M57.16,16.42H50.87c-4.93,0-5.85,2.36-5.85,5.77v7.57H56.76L55.2,41.61H45V72H32.77V41.61H22.56V29.76H32.77V21C32.77,10.9,39,5.37,48,5.37a78.35,78.35,0,0,1,9.13.48Z"/></svg></a>
|
|
<a href="https://twitter.com/lowtechmagazine"><svg viewBox="0 0 80 80" class="icon"><title>twitter</title><path d="M65.05,29.23c0,.56,0,1.12,0,1.68,0,17.1-13,36.8-36.8,36.8A36.54,36.54,0,0,1,8.44,61.91a26.68,26.68,0,0,0,3.12.16,25.9,25.9,0,0,0,16.06-5.53,13,13,0,0,1-12.09-9,16.28,16.28,0,0,0,2.44.2,13.67,13.67,0,0,0,3.4-.44A12.93,12.93,0,0,1,11,34.64v-.16a13,13,0,0,0,5.85,1.64,13,13,0,0,1-4-17.3A36.76,36.76,0,0,0,39.51,32.36a14.58,14.58,0,0,1-.32-3,12.95,12.95,0,0,1,22.38-8.85,25.45,25.45,0,0,0,8.21-3.12,12.9,12.9,0,0,1-5.69,7.13,25.93,25.93,0,0,0,7.45-2A27.79,27.79,0,0,1,65.05,29.23Z"/></svg></a>
|
|
<a href="mailto:solar@lowtechmagazine.com"><svg viewBox="0 0 80 80" class="icon"><title>email</title><path d="M4.95,13.14v55H74.33v-55Zm54.34,8.12L39.64,39.74,20,21.26ZM13.07,60V25.91l26.56,25,26.57-25V60Z"/></svg></a>
|
|
</div>
|
|
<!-- /.social -->
|
|
{% endif %}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
<!-- /#contentinfo -->
|
|
</main>
|
|
|
|
<script>
|
|
var url = "https://solar.lowtechmagazine.com/api/stats.json";
|
|
var data;
|
|
var solar_stats = [];
|
|
var battery_stats = [];
|
|
var general_stats = [];
|
|
|
|
var weather_ignore = ["snow", "sleet", "wind", "fog"]; //because Barcelona is paradise
|
|
var weather_data = ["today", "tomorrow", "day_after_t"];
|
|
var weather_days = ["today", "tomorrow", "day after tomorrow"];
|
|
var forecast = "";
|
|
|
|
var battery_icon = '<svg class="icon" viewBox="0 0 500 500"><title>Battery used</title><g id="bat_used" data-name="Layer 5"><title>Battery used</title><polygon class="svg_stroke" points="327.01 127.16 327.01 47.31 172.99 47.31 172.99 127.16 115.52 127.16 115.52 452.69 384.48 452.69 384.48 127.16 327.01 127.16"/><polygon class="svg_fill" points="357.64 408.86 158.26 408.86 158.26 209.49 357.64 408.86"/></svg>';
|
|
var solar_icon = '<svg class="icon" viewBox="0 0 500 500"><title>Solar used, battery charging</title><circle class="svg_fill" cx="248.48" cy="252.55" r="97.03"/><rect class="svg_fill" x="234.53" y="17.45" width="27.9" height="112.39"/><rect class="svg_fill" x="234.53" y="375.25" width="27.9" height="112.39"/><rect class="svg_fill" x="413.42" y="196.35" width="27.9" height="112.39" transform="translate(679.92 -174.83) rotate(90)"/><rect class="svg_fill" x="55.63" y="196.35" width="27.9" height="112.39" transform="translate(322.12 182.97) rotate(90)"/><rect class="svg_fill" x="361.03" y="69.85" width="27.9" height="112.39" transform="translate(198.96 -228.23) rotate(45)"/><rect class="svg_fill" x="108.03" y="322.85" width="27.9" height="112.39" transform="translate(303.75 24.77) rotate(45)"/><rect class="svg_fill" x="361.03" y="322.85" width="27.9" height="112.39" transform="translate(908.15 381.93) rotate(135)"/><rect class="svg_fill" x="108.03" y="69.85" width="27.9" height="112.39" transform="translate(297.35 128.93) rotate(135)"/></svg>';
|
|
|
|
function getServerData() {
|
|
var request = new XMLHttpRequest();
|
|
|
|
request.open('GET', url, true);
|
|
request.onload = function() {
|
|
if (request.readyState == 4 && request.status == 200) {
|
|
data = JSON.parse(request.responseText);
|
|
|
|
//set categories and descriptors for server stats
|
|
solar_stats = [
|
|
["Power usage from solar", data.ac_power],
|
|
["Current draw from solar", data.ac_current],
|
|
["Voltage from solar", data.ac_voltage]
|
|
];
|
|
battery_stats = [
|
|
["Power usage from battery", data.bat_power],
|
|
["Current draw from battery", data.bat_current],
|
|
["Battery voltage", data.bat_voltage]
|
|
];
|
|
load = (data.load_15 / 2) * 100 + '%';
|
|
general_stats = [
|
|
["Local time", data.local_time],
|
|
["Uptime", data.uptime],
|
|
["CPU temperature", data.temperature + "°C"],
|
|
["CPU load average *", load],
|
|
["Solar panel active", data.ac_used],
|
|
["Battery charging", data.bat_charging],
|
|
["Battery capacity", data.bat_capacity]
|
|
];
|
|
|
|
//make battery level visible
|
|
var level = data.bat_capacity;
|
|
document.getElementById('battery').style.height = level;
|
|
document.getElementById('bat_data').style.top = 100 - parseInt(level.slice(0, -1)) + "vh";
|
|
|
|
var bat_status = document.querySelectorAll('.bat_status');
|
|
var power = "";
|
|
var bat_text = "using battery";
|
|
|
|
//if solar isn't used, battery is used, show battery power; otherwise, solar is used, battery is charging, show solar power
|
|
if (data.ac_power == "0W") {
|
|
power = data.bat_power;
|
|
charge_icon = battery_icon;
|
|
} else {
|
|
power = data.ac_power;
|
|
charge_icon = solar_icon;
|
|
bat_text = "charging battery";
|
|
}
|
|
|
|
for (i = 0; i < weather_data.length; i++) {
|
|
var key = weather_data[i]; //for each day
|
|
var icon_name = key + "_icon"; //today_icon, etc
|
|
var text = data[key]; //weather description
|
|
|
|
var weather_icon;
|
|
//use cloud icon for all overcast weather
|
|
if(weather_ignore.includes(data[icon_name])){
|
|
weather_icon = "cloudy";
|
|
}else{
|
|
weather_icon = data[icon_name];
|
|
}
|
|
forecast += '<span class="weather_day" id="' + key + '" title="' + text + '">' + weather_days[i] + '</span><span class="weather_icon ' + weather_icon +'"> </span><span class="weather_text"> ' + text + '</span>';
|
|
}
|
|
|
|
var weatherinfo = document.querySelectorAll('.forecast');
|
|
[].forEach.call(weatherinfo, function(target) {
|
|
target.innerHTML = forecast;
|
|
});
|
|
|
|
var data_content = [
|
|
['level', level],
|
|
['dashboard_level', level],
|
|
['power', power],
|
|
['charge_icon', charge_icon],
|
|
['charge_text', bat_text],
|
|
['uptime', data.uptime],
|
|
['time', data.local_time]
|
|
];
|
|
for (i = 0; i < data_content.length; i++) {
|
|
document.getElementById(data_content[i][0]).innerHTML = data_content[i][1];
|
|
}
|
|
}
|
|
if (window.location.href.indexOf('power.html') > -1) {
|
|
populateData();
|
|
}
|
|
};
|
|
request.send();
|
|
}
|
|
getServerData();
|
|
|
|
//mobile menu toggle
|
|
document.getElementById('menu-s').addEventListener('click', function() {
|
|
document.getElementById('menu-list').classList.toggle("show");
|
|
});
|
|
|
|
//Remove TYPOGRIFY NBSP;s in headers
|
|
var headings = document.querySelectorAll('h1');
|
|
[].forEach.call(headings, function(target) {
|
|
target.innerHTML = target.innerHTML.replace(/ /g, ' ');
|
|
});
|
|
|
|
function populateData() {
|
|
var stats = [];
|
|
function pushData(arr) {
|
|
for (i = 0; i < arr.length; i++) {
|
|
stats.push("<dt>" + arr[i][0] + "</dt><dd>" + arr[i][1] + "</dd>");
|
|
}
|
|
}
|
|
pushData(general_stats);
|
|
if (data.ac_used == "no") {
|
|
pushData(battery_stats);
|
|
} else {
|
|
pushData(solar_stats);
|
|
}
|
|
var dl = document.createElement('dl');
|
|
dl.classList.add('server');
|
|
dl.innerHTML = stats.join("");
|
|
document.getElementById('data').appendChild(dl);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|