ShowerLoop-cc/docs/how-it-works/index.html

206 lines
9.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<title>How It Works | ShowerLoop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://kit.fontawesome.com/157866136a.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/material.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/app.min.css">
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<script type="text/javascript">
var _paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//metrics.showerloop.cc/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<body class="page"><div class="skip-to-content" role="button" tabindex="0">
Skip to Content
</div>
<div class="mdl-layout mdl-js-layout
mdl-layout--fixed-header">
<header class="mdl-layout__header chocolate-header">
<div class="mdl-layout__header-row">
<a href="/" class="mdl-layout-title">
<img class="logo" src="/images/logo2.png">
</a>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="/docs/" title="Home">Home</a>
<a class="mdl-navigation__link" href="/docs/how-it-works/" title="How It Works">How It Works</a>
<a class="mdl-navigation__link" href="/docs/research/" title="Research">Research</a>
<a class="mdl-navigation__link" href="/docs/posts/" title="Posts">Posts</a>
<a class="mdl-navigation__link" href="/docs/contact-us/" title="Contact Us">Contact Us</a>
<a class="mdl-navigation__link" href="/docs/components/" title="Components">Components</a>
<a class="mdl-navigation__link" href="/docs/make-it/" title="Make It">Make It</a>
<a class="mdl-navigation__link mdl-button mdl-js-button mdl-button--raised mdl-button--colored support-btn" tabindex="0">Support Us</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"><strong>Chocolate</strong></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="/docs/" title="Home" tabindex="0">Home</a>
<a class="mdl-navigation__link" href="/docs/how-it-works/" title="How It Works" tabindex="0">How It Works</a>
<a class="mdl-navigation__link" href="/docs/research/" title="Research" tabindex="0">Research</a>
<a class="mdl-navigation__link" href="/docs/posts/" title="Posts" tabindex="0">Posts</a>
<a class="mdl-navigation__link" href="/docs/contact-us/" title="Contact Us" tabindex="0">Contact Us</a>
<a class="mdl-navigation__link" href="/docs/components/" title="Components" tabindex="0">Components</a>
<a class="mdl-navigation__link" href="/docs/make-it/" title="Make It" tabindex="0">Make It</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.png">
</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.png">
<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.jpg">
<img class="responsive-img" src="/images/shower-loop1.png">
</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 youre 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/monitor.jfif">
<img class="responsive-img" src="/images/showerloop+future+ui.png">
<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 src="/images/20150918_MOREL_MG_0012_Small_poc21.jpg">
</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 src="/images/sloopdesign+(71+of+75).jpg">
</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.jpeg">
</div>
</section>
</div>
</div>
</main><footer class="mdl-mini-footer chocolate-footer">
<div class="mdl-mini-footer__left-section">
&copy 2019 Shower Loop | All Rights Reserved
</div>
<div class="mdl-mini-footer__right-section">
</div>
<script src="/js/app.min.js"></script>
<script src="/js/skip-to-content.js"></script>
</footer></div>
</body>
</html>