ShowerLoop-cc/docker/showerloop/public/how-it-works/index.html

19 lines
11 KiB
HTML

<!doctype html><html lang=en><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><title>How It Works | ShowerLoop</title>
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Learn how the ShowerLoop system filters, purifies and recycles shower water in real-time, saving up to 90% of water and energy."><script>let liveReloadSocket=null;const OriginalWebSocket=window.WebSocket;window.WebSocket=function(e,t){if(e.includes("/__livereload")){if(document.readyState==="complete"){liveReloadSocket=new OriginalWebSocket(e,t);const n={onmessage:null,onclose:null};return Object.defineProperty(liveReloadSocket,"onmessage",{set:function(e){n.onmessage=e},get:function(){return n.onmessage}}),Object.defineProperty(liveReloadSocket,"onclose",{set:function(e){n.onclose=e},get:function(){return n.onclose}}),liveReloadSocket.addEventListener("message",function(e){n.onmessage&&n.onmessage(e)}),liveReloadSocket.addEventListener("close",function(e){liveReloadSocket=null,n.onclose&&n.onclose(e)}),liveReloadSocket}return{send:function(){},close:function(){},addEventListener:function(){},removeEventListener:function(){},set onmessage(e){},set onclose(e){}}}return new OriginalWebSocket(e,t)};for(const e in OriginalWebSocket)OriginalWebSocket.hasOwnProperty(e)&&(window.WebSocket[e]=OriginalWebSocket[e]);window.WebSocket.prototype=OriginalWebSocket.prototype,document.addEventListener("pageshow",function(e){if(e.persisted){console.log("Page restored from bfcache");const e=window.location.protocol==="https:"?"wss:":"ws:";liveReloadSocket=new OriginalWebSocket(`${e}//${window.location.host}/__livereload`),liveReloadSocket.onmessage=function(e){e.data==="reload"&&window.location.reload()}}}),window.addEventListener("pagehide",function(){liveReloadSocket&&(liveReloadSocket.onclose=null,liveReloadSocket.close(),liveReloadSocket=null)})</script><link rel=preload href=/css/vendor/material-icons.css as=style><link rel=preload href=/images/logo2.webp as=image><link rel=stylesheet href=/css/vendor/material-icons.css><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css></noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css></noscript><script type=module>
import * as utils from '/js/utils.modern.min.js';
window.utilsModule = utils;
</script><script type=module src=/js/app.modern.min.js defer></script><script type=module src=/js/skip-to-content.modern.min.js defer></script><script type=module src=/js/material.modern.min.js defer></script><script nomodule src=/js/app.min.js defer></script><script nomodule src=/js/skip-to-content.min.js defer></script><script nomodule src=/js/material.min.js defer></script><link rel=stylesheet type=text/css href=/css/app.min.css><link rel=stylesheet type=text/css href=/css/custom.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/custom.css></noscript><link rel=icon href=/static/favicon.svg type=image/svg+xml><link rel=icon href=/static/favicon.ico type=image/x-icon><script src=/static/js/vendor/hls.min.js defer></script><script src=/static/js/hls-player.min.js defer></script></head><body class=page><body class=page><div class="mdl-layout mdl-js-layout
mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div class=mdl-layout__header-row><a href=/ class=mdl-layout-title><img class=logo src=/images/logo2.webp height=50 width=auto alt="ShowerLoop Logo"></a><div class=mdl-layout-spacer></div><nav class="mdl-navigation mdl-layout--large-screen-only"><a class=mdl-navigation__link href=/ title=Home>Home</a>
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works">How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research>Research</a>
<a class=mdl-navigation__link href=/posts/ title=Posts>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components>Components</a></nav></div></header><div class=mdl-layout__drawer><span class=mdl-layout-title><strong>ShowerLoop</strong></span><nav class=mdl-navigation><a class=mdl-navigation__link href=/ title=Home tabindex=0>Home</a>
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works" tabindex=0>How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research tabindex=0>Research</a>
<a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1>How It Works</h1><section><div class=mdl-grid><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><ol><li><strong>Screen filter</strong> (like in a kitchen sink)<br>To remove hair and large objects and to protect the pump. A gravity filter can also be utilised here</li><li><strong>Micro-fiber/geo-textile</strong><br>To keep in the filtrate materials but also works like the mesh filter</li><li><strong>Sand</strong><br>To filter out particles</li><li><strong>Activated carbon</strong><br>To clarify the water, remove colour, smell and chemicals</li><li><strong>Ultraviolet light</strong><br>To sterilise the water from potentially harmful bacteria</li></ol><span class=flow-text>COLLECT, CLEAN, STERILISE, REUSE
=> <strong>LOOP</strong></span><p>After passing through the filters the water is clear, clean and bacteria free and ready to be pumped back into the shower head. A small electrical resistor can be used to reheat the water to your set temperature. When you are done the water goes down the drain like normal or you can use the water for something else, like doing your laundry or flushing the toilet to save even more water.</p></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><img class=responsive-img src=/images/showerspin.webp alt="Shower Loop system in action showing water filtering and recycling through the circular system"></div><div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><img class=responsive-img src=/images/complete_waterloop_for_household.webp alt="Diagram showing water flow through a complete household: shower water recycled to toilet and laundry, with filtration systems"><p>Here's a little preview of how we imagine a complete household water loop to look like. By reusing the same water from one process to another we can dramatically decrease water consumption without having to sacrifice. We are building the system piece by piece but we need parts. If you make things like plumbing components, valves, pumps, ultra violet systems and filters let's work together. If you have spare parts feel free to send them to us :)</p><img class=responsive-img src=/images/Schematic555.webp alt="Technical schematic of ShowerLoop system showing pump, filters, UV sterilization, and water flow paths">
<img class=responsive-img src=/images/shower-loop1.webp alt="Complete ShowerLoop installation showing filtration unit connected to a standard shower system"></div></div></section><section><h2>How It Will Work</h2>Get in the shower and select your desired water temperature on a small screen. Once you press start, water begins to flow just like in a normal shower, the difference is that instead of the water being wasted by letting it go down the drain, it's collected and pumped though several filters:</section><section><h2>Automate, Monitor, Re-program, Customise</h2><p>Multiple sensors and a micro-controller are used to allow for complete monitoring and control of the system so you can understand more about your own behavior and personalize the shower to fit your needs (e.g. tell you when to get out of the shower in case you're in a hurry). You can set your ideal showering conditions like flow rate, water temperature, ambiance and to automatically wash the filters once you've left the shower so that the filters last longer before requiring manual maintenance. By measuring use and changes in flow rate it can inform you when to change filters.</p><img class=responsive-img src=/images/webp/monitor.webp alt="Digital monitoring display showing water usage, temperature, and filter status of the ShowerLoop system">
<img class=responsive-img src=/images/showerloop+future+ui.webp alt="Concept design of future ShowerLoop user interface with touchscreen controls for temperature, flow rate, and water savings statistics"><p>Currently we are using a simple two-row, two-color LCD screen (below) but in the future the interface could look more like this and be programmed by your smart phone (it's just a draft so don't get caught up on the numbers - it's only an example).</p></section><section><h2>Improvement</h2><div class=mdl-grid><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=side-by-side-image-container><img class=responsive-img src=/images/20150918_MOREL_MG_0012_Small_poc21.webp alt="The POC21 Model of ShowerLoop with copper pipes and manually controlled filtration system"></div><h3>The POC21 Model</h3><p>(See the DIY instructions) made with copper pipes and without the automated control system and slightly smaller filters for a lower flow rate.
This is more closely resembles the final product but the placement and look of the filters can be modified by the user.</p></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=side-by-side-image-container><img class=responsive-img src=/images/sloopdesign+%2871+of+75%29.webp alt="Fully operational ShowerLoop prototype with automated piping system and 10 l/min water flow capacity"></div><h3>The fully operational prototype</h3><p>The shower built for 10 l/min and automated piping. Drinking water hose pipe was used for testing and fast iterations.</p></div></div></section><section><div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><h2>The Only Challenge</h2><p>The water needs to be collected for the pump which needs to be placed at the lowest point of the shower, ideally under the basin. If you have an Italian-style shower you can build a new basin instead of tearing the floor apart. We are also working on a way to hack your existing drain and using self-priming pumps so that you can plug the drain during loop mode and suck the water out of the small collection basin.</p><img class=responsive-img src=/images/challenge.webp alt="Illustration of drainage basin installation challenges showing how to modify existing shower floors for water collection"></div></section></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script></body></html>