Last active
November 18, 2020 21:30
-
-
Save zegerk/fc3390fbb0bb577f3b9d6e981eb8a540 to your computer and use it in GitHub Desktop.
SVG heating buffer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<!-- | |
License: https://opensource.org/licenses/MIT | |
Author Zeger Knops - zeger@zeger.nl | |
--> | |
<head> | |
<script src="https://code.jquery.com/jquery-git.slim.min.js"></script> | |
<script> | |
$(document).ready(function () { | |
let searchParams = new URLSearchParams(window.location.search); | |
$("#text-buffer-in").text(searchParams.get("bufferIn")); | |
$("#text-ch-buffer-out").text(searchParams.get("bufferOut")); | |
$("#text-ch-buffer-in").text(searchParams.get("bufferChIn")); | |
$("#text-tap-water-in").text(searchParams.get("tapWaterIn")); | |
$("#text-tap-water-out").text(searchParams.get("tapWaterOut")); | |
$("#text-mixer-in").text(searchParams.get("mixerIn")); | |
searchParams.get("fireplacePump") == 0 && $("#fireplace-pump-animation").hide(); | |
searchParams.get("heatingPump") == 0 && $("#heating-pump-animation").hide(); | |
/* | |
bufferIn=1 °C buffer in&bufferOut=2 °C buffer out&bufferChIn=3 °C buffer in&tapWaterIn=4 °C buffer in&tapWaterOut=5 °C buffer in&mixerIn=6 °C buffer in&fireplacePump=1&heatingPump=1 | |
*/ | |
}); | |
</script> | |
</head> | |
<svg width="100%" height="350px"> | |
<defs> | |
<linearGradient id="BufferVat" x1="0" x2="0" y1="0" y2="1"> | |
<stop offset="0%" stop-color="red" /> | |
<stop offset="100%" stop-color="blue" /> | |
</linearGradient> | |
</defs> | |
<style> | |
text { | |
font-family: "Arial, Helvetica, sans-serif"; | |
} | |
</style> | |
<!-- central heating --> | |
<circle cx="555" cy="40" r="30" stroke="black" stroke-width="3" fill="red" /> | |
<!-- central heating pump --> | |
<circle cx="555" cy="40" r="22" stroke="black" stroke-width="3" fill="white" /> | |
<polygon id="heating-pump-animation" points="555,60,572,30,538,30" stroke="black" stroke-width="2" fill="white"> | |
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 555 40" to="360 555 40" dur="10s" repeatCount="indefinite" /> | |
</polygon> | |
<!-- house heating --> | |
<circle cx="555" cy="189" r="30" stroke="black" stroke-width="3" fill="url(#BufferVat)" /> | |
<!-- Central heating to house --> | |
<path d="M 555 68 l 0 94" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 555 68 l 0 94" stroke="red" stroke-width="6" fill="none" /> | |
<!-- buffer --> | |
<rect x="210" y="10" width="160" height="320" rx="16" fill="url(#BufferVat)" style="stroke-width: 8; stroke: rgb(0, 0, 0);" /> | |
<!-- tap water spiral --> | |
<path | |
d="M 430 60 h -64 | |
h -77 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 20 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 20 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
h 150 | |
" | |
stroke="black" | |
stroke-width="12" | |
fill="none" | |
/> | |
<path | |
d="M 430 60 h -64 | |
h -77 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 20 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 20 | |
c -70 10, -70 10, 0 18 | |
c 70 10, 70 10, 0 18 | |
c -70 10, -70 10, 0 18 | |
h 150 | |
" | |
stroke="aqua" | |
stroke-width="6" | |
fill="none" | |
/> | |
<text id="text-tap-water-in" x="385" y="318" fill="black">12.3 °C tap water in</text> | |
<text id="text-tap-water-out" x="385" y="80" fill="black">33.3 °C tap water out</text> | |
<!-- fireplace --> | |
<circle cx="100" cy="80" r="30" stroke="black" stroke-width="3" fill="url(#BufferVat)" /> | |
<!-- fireplace pump --> | |
<circle cx="100" cy="160" r="22" stroke="black" stroke-width="3" fill="white" /> | |
4 | |
<polygon id="fireplace-pump-animation" points="100,180,117,150,83,150" stroke="black" stroke-width="2" fill="white"> | |
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 160" to="360 100 160" dur="10s" repeatCount="indefinite" /> | |
</polygon> | |
<!-- Mixer --> | |
<circle cx="100" cy="219" r="20" stroke="black" stroke-width="3" fill="white" /> | |
<!-- Mixer to pump --> | |
<path d="M 100 181 l 0 20" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 100 181 l 0 20" stroke="blue" stroke-width="6" fill="none" /> | |
<!-- Pump to fireplace --> | |
<path d="M 100 108 v 32" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 100 108 v 32" stroke="blue" stroke-width="6" fill="none" /> | |
<!-- Fireplace buffer in --> | |
<path d="M 100 52 v -12 l 114 0" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 100 52 v -12 l 114 0" stroke="red" stroke-width="6" fill="none" /> | |
<text id="text-buffer-in" x="100" y="30" fill="black">XX °C buffer in</text> | |
<!-- Fireplace to mixer --> | |
<path d="M 97 40 h -55 v 180 h 40" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 97 40 h -55 v 180 h 40" stroke="red" stroke-width="6" fill="none" /> | |
<!-- Fireplace buffer out --> | |
<path d="M 100 237 v 33 l 114 0" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 100 237 v 33 l 114 0" stroke="blue" stroke-width="6" fill="none" /> | |
<text id="text-mixer-in" x="100" y="290" fill="black">12.3 °C mixer in</text> | |
<!-- Central heating buffer out --> | |
<path d="M 366 40 l 160 0" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 366 40 l 162 0" stroke="red" stroke-width="6" fill="none" /> | |
<text id="text-ch-buffer-out" x="385" y="28" fill="black">XX °C buffer out</text> | |
<!-- Central heating buffer in --> | |
<path d="M 366 270 l 190 0 v -50" stroke="black" stroke-width="12" fill="none" /> | |
<path d="M 366 270 l 190 0 v -53" stroke="blue" stroke-width="6" fill="none" /> | |
<text id="text-ch-buffer-in" x="385" y="258" fill="black">XX °C buffer in</text> | |
</svg> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment