nils/ebusd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first version of static html gui

Browse Source
This commit is contained in:
john30
2015-05-25 15:45:16 +02:00
parent 4b132d23c8
commit 6ff1b82371
12 changed files with 9401 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contrib/html/css/jsplumb.css
+401
View File
@@ -0,0 +1,401 @@
/** DISABLE TEXT SELECTION (SET ON BODY WHEN DRAGGING IS OCCURRING) **/
._jsPlumb_drag_select * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/** FB **/
#like {
position: fixed;
width: 77px;
height: 70px;
border: 0;
right: 11px;
bottom: -40px;
}
#retweet_button {
position: fixed;
bottom: 30px;
right: -7px;
}
body {
padding:0;
margin:0;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: whitesmoke;
}
#headerWrapper {
width:100%;
background-color:white;
position:fixed;
top:0;left:0;
z-index:100001;
height:44px;
padding:0;
text-align: center;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0px 1px #eee;
}
#header {
margin-top:0;
height:44px;
font-size:13px;
margin-left:auto;
margin-right:auto;
line-height: 44px;
max-width:1000px;
width:80%;
}
@media screen and (max-width:1000px) {
#header {
width:100%;
}
}
@media screen and (max-width:800px) {
#header select {
display:none;
}
}
@media screen and (max-width:700px) {
.library-links {
right:330px;
}
}
@media screen and (max-width:640px) {
.logo {
display:none;
}
#header {
text-align:center;
overflow:hidden;
}
}
.explanation i {
float: right;
margin-right: 25px;
margin-top: 13px;
font-size: 25px;
cursor:pointer;
}
.explanation i:hover {
color:orange;
}
.words {
text-align: left;
padding:50px;
background-color:white;
}
.code {
border:1px solid #456;
}
.logo {
font-size:30px;
color:#1f1f1f;
text-shadow: 1px 1px #ccc;
float:left;
width:154px;
height:44px;
background-position:0px 5px;
}
#main {
margin-top: 106px;
font-size: 80%;
width: 80%;
margin-left:auto;
margin-right: auto;
height: 600px;
text-align: center;
position: relative;
max-width: 1200px;
max-height: 1000px;
}
.demo {
position: relative;
width:100%;
background-color:white;
overflow:auto;
margin-top: 53px;
margin-bottom:25px;
height: 600px;
}
.explanation {
text-align: center;
opacity: 0.8;
filter: alpha(opacity=80);
width: 100%;
z-index: 10000;
overflow: hidden;
font-size:13px;
}
.commands {
margin-bottom:10px;
}
.commands:hover {
z-index:10000;
}
/* demo elements */
a, a:visited {
text-decoration:none;
color:black;
border-radius:0.2em;
-webkit-transition: color 0.15s ease-in;
-moz-transition: color 0.15s ease-in;
-o-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
a:hover {
color:#7AB02C;
}
a:active {
color:#FF2300;
}
.menu, #render, #explanation {
background-color:#fff;
}
.menu {
float:right;
font-size:12px;
}
.menu a {
margin-right: 19px;
}
.otherLibraries {
display:inline;
}
#render a {
margin-right:10px;
}
.selected {
color:orange !important;
}
.cmd {
color:white;
margin-right:25px;
}
.cmd:hover {
color:#FF2300;
text-decoration: underline;
}
.cmd:active {
color:#FF2300;
}
.label {
font-size:13px;
padding:8px;
padding:8px;
}
.component {
border:1px solid #346789;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
padding:0.5em;
font-size:0.8em;
}
.component:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.demo-links, .library-links {
position: fixed;
right: 0;
top: 44px;
font-size: 11px;
background-color: white;
opacity: 0.8;
padding-right: 10px;
padding-left: 5px;
text-transform: uppercase;
z-index:100001;
}
.demo-links div, .library-links a {
display:inline;
margin-right:7px;
margin-left:7px;
}
.demo-links i, .library-links i {
padding:4px;
}
.library-links {
right: 515px;
height: 19px;
line-height: 19px;
}
.current-library {
color:#7AB02C !important;
}
/** Z-INDEX **/
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
.aLabel {
background-color:white;
padding:0.4em;
font:12px sans-serif;
color:#444;
z-index:21;
border:1px dotted gray;
opacity:0.8;
filter:alpha(opacity=80);
cursor: pointer;
}
.aLabel._jsPlumb_hover {
background-color:#5C96BC;
color:white;
border:1px solid white;
}
/* ---------------------- bootstrap dropdowns ------------------------- */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* load test */
#iframe {
width: 98%;
height: 1000px;
position: absolute;
top: 8px;
left: 1%;
border: 0;
}
#render { height:20px;}
#links {
width: 143px;
font-size: 14px;
padding-left: 0px;
position: fixed;
left: 9px;
top: 52px;
z-index: 20;
background-color: white;
}
ul { padding:0; }
li {
list-style-type:none;
}
.current-tests {
color:orange !important;
}
#qunit-tests li.pass, #qunit-tests li.fail {
background-color:transparent;
}
.loadtest #main, #main.test {
max-width: none;
margin-top: 52px;
background-color: white;
margin-left: 162px;
}
.loadtest ._jsPlumb_connection { z-index:3; }
.loadtest .jspLoad {
z-index:4;
position:absolute;
width:70px;
height:70px;
cursor:pointer;
}
.loadtest #header {
height:11em;
border:2px solid #824563;
}
.loadtest #setup {
float:left;
}
.loadtest #demo {
margin-top:10em;
position:relative;
}
.loadtest #setup, .loadtest #output {
font-size:12px;
}
contrib/html/css/style.css
+112
View File
@@ -0,0 +1,112 @@
.ebus {
/* for IE10+ touch devices */
touch-action:none;
}
.ebus .circuit, .ebus .circuit .back {
background-repeat: no-repeat;
# border: 1px solid #346789;
# box-shadow: 2px 2px 19px #aaa;
# -o-box-shadow: 2px 2px 19px #aaa;
# -webkit-box-shadow: 2px 2px 19px #aaa;
# -moz-box-shadow: 2px 2px 19px #aaa;
# -moz-border-radius: 0.5em;
# border-radius: 0.5em;
opacity: 0.8;
filter: alpha(opacity=80);
width: 80px;
height: 80px;
line-height: 80px;
cursor: pointer;
text-align: center;
z-index: 20;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica;
padding: 0.5em;
font-size: 0.9em;
# -webkit-transition: -webkit-box-shadow 0.15s ease-in;
# -moz-transition: -moz-box-shadow 0.15s ease-in;
# -o-transition: -o-box-shadow 0.15s ease-in;
# transition: box-shadow 0.15s ease-in;
}
.ebus .circuit.back {
padding: 0;
}
.ebus .circuit:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity: 0.6;
filter: alpha(opacity=60);
}
.ebus .active {
border: 1px dotted green;
}
.ebus .hover {
border: 1px dotted red;
}
.ebus ._jsPlumb_connector {
z-index: 4;
}
.ebus ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel {
z-index: 21;
cursor: pointer;
}
.ebus .circuitLabel {
background-color: white;
padding: 0.2em;
font: 12px sans-serif;
color: #000;
z-index: 21;
border: 1px dotted gray;
opacity: 0.8;
filter: alpha(opacity=80);
cursor: pointer;
position: absolute;
}
.ebus .circuitLabel:hover {
background-color: #5C96BC;
color: white;
border: 1px solid white;
}
.connLabel {
background-color: white;
padding: 0.2em;
font: 12px sans-serif;
color: #000;
z-index: 21;
border: 1px dotted gray;
opacity: 0.8;
filter: alpha(opacity=80);
cursor: pointer;
}
.ebus .connLabel._jsPlumb_hover {
background-color: #5C96BC;
color: white;
border: 1px solid white;
}
.circuit._jsPlumb_connected {
# border: 2px solid green;
}
.jsplumb-drag {
# border: 4px solid pink !important;
}
path, ._jsPlumb_endpoint {
cursor: pointer;
}
contrib/html/img/dcf.svg
+31
View File
@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="34" height="28" viewBox="6856 12865 473 396" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,12974 L 7321,12913"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,12949 L 7321,12888"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,12924 L 7310,12874"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,12899 L 7285,12874"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,13025 L 7321,12963"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,12999 L 7321,12938"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,13123 L 7321,13062"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,13075 L 7321,13012"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,13050 L 7321,12986"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,13100 L 7321,13037"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7260,12874 L 7260,13123"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7285,13123 L 7321,13087"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7321,12874 L 7321,13123"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7310,13123 L 7321,13112"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7031,13068 C 7102,13012 7079,12899 6982,12881 6876,12872 6822,12998 6906,13068"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7031,13253 L 6969,12984 6906,13253 7031,13253 Z"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7009,13027 C 7093,12895 6845,12895 6928,13027"/>
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 6989,13004 C 7031,12940 6906,12940 6948,13004"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 7207,13097 L 7260,13097 7260,12949 7207,12949 7207,13097 Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

contrib/html/img/ehp.svg
+158
View File
@@ -0,0 +1,158 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="143" height="286" viewBox="7367 15542 1896 3780" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="com.sun.star.drawing.LineShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 8619,17238 L 8619,17417"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 8871,15555 L 8871,16987 C 8871,17040 8830,17080 8777,17081"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id5">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 8366,15555 L 8366,16987 8366,16987 8369,17012 8369,17012 8379,17033 8379,17033 8394,17053 8394,17053 8414,17068 8414,17068 8436,17078 8436,17078 8461,17081"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id6">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 7559,17415 L 7559,15554"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id7">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7375,15555 L 9254,15555 9254,19313 7375,19313 7375,15555 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id8">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9254,15555 L 9254,15555 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id9">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 7775,17993 L 7775,15555"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id10">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 9046,15555 L 9046,17394"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id11">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8778,17003 L 8778,17161 8462,17003 8462,17161 8778,17003 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id12">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8710,16949 C 8705,16830 8533,16829 8531,16949 8533,17068 8705,17067 8710,16949 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id13">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8698,17239 L 8619,17081 8541,17239 8698,17239 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id14">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8619,17081 L 8619,17038"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id15">
<path fill="rgb(35,31,32)" stroke="none" d="M 8671,16895 L 8651,16895 8624,16973 8622,16976 8622,16979 8620,16983 8620,16986 8619,16988 8619,16991 8610,17006 8624,17006 8656,16913 8671,16895 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id16">
<path fill="rgb(35,31,32)" stroke="none" d="M 8671,16895 L 8655,16913 8655,17006 8671,17006 8671,16895 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id17">
<path fill="rgb(35,31,32)" stroke="none" d="M 8588,16895 L 8566,16895 8566,17006 8580,17006 8580,16912 8588,16895 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id18">
<path fill="rgb(35,31,32)" stroke="none" d="M 8587,16895 L 8579,16912 8611,17006 8620,16991 8618,16989 8618,16984 8615,16978 8615,16974 8587,16895 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id19">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 7558,17992 L 7558,17722"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id20">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9109,19052 L 9109,19052 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id21">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8817,19052 L 9109,19052 9109,17992 8817,17992 8817,19052 9109,19052 8817,17992"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id22">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 9045,17807 L 9045,17992"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id23">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8775,17569 L 8619,17725 8466,17569"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id24">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 8854,17993 C 8865,17912 8820,17846 8737,17842 8670,17840 8621,17791 8619,17724"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id25">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7814,19052 L 7523,19052 7523,17993 7814,17993 7814,19052 7523,19052 7523,19052 7523,19052 7814,17993"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id26">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7713,17569 C 7704,17365 7415,17364 7405,17569 7414,17774 7705,17773 7713,17569 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id27">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 7405,17569 L 7559,17414 7713,17569"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id28">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 8962,17633 L 9129,17633 9129,17556 8962,17556 8962,17471 9129,17471 9129,17808 8962,17808 8962,17393 9129,17393 9129,17808 8962,17808 8962,17808 8962,17725 9129,17725"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id29">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8774,17570 C 8761,17365 8478,17365 8466,17570 8475,17776 8764,17776 8774,17570 Z"/>
</g>
</g>
<g class="Group">
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id30">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8614,18600 C 8589,18200 8037,18200 8014,18600 8032,19001 8595,19001 8614,18600 Z"/>
</g>
</g>
<g class="Group">
<g class="com.sun.star.drawing.LineShape">
<g id="id31">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8600,18687 L 8453,18332"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id32">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 8176,18330 L 8029,18685"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

contrib/html/img/hwc.svg
+179
View File
@@ -0,0 +1,179 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="174" height="52" viewBox="9466 15761 2413 727" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11390,15923 C 11402,15920 11400,15920 11400,15908 L 11400,15905 11399,15902 11395,15900 11390,15898 11032,15898 11029,15900 11026,15902 11022,15905 11022,15917 11026,15920 11032,15923 11390,15923 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11137,16055 L 11134,16042 11124,16033 11112,16030 11099,16033 11089,16042 11086,16055 11089,16067 11099,16077 11112,16080 11124,16077 11134,16067 11137,16055 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id5">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11034,15923 C 11028,16024 11125,16016 11199,16023 L 11199,16122 11201,16123 C 11203,16129 11206,16130 11212,16130 L 11219,16130 11226,16123 11226,16122 11227,16118 11227,16022 C 11305,16019 11392,16023 11390,15923"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id6">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11385,16365 C 11394,16213 11606,16213 11614,16365 11607,16517 11392,16517 11385,16365 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id7">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11614,16365 L 11501,16479"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id8">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9985,16421 L 9985,16306"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id9">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9756,16306 L 9756,16421 9870,16365 9985,16421"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id10">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9813,16478 L 9870,16365 9929,16478 9813,16478 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id11">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9929,16306 L 9813,16306 9813,16193 9929,16193 9929,16306 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id12">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9813,16306 L 9813,16306 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id13">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9756,16306 L 9870,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id14">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="10" stroke-linejoin="round" d="M 9843,16247 L 9846,16242 9851,16237 9856,16237 9860,16239 9860,16246 9856,16259 9856,16267 9860,16272 9863,16274 9868,16274 9873,16272 9878,16264 9881,16259 9885,16251 9886,16237 9886,16228 9885,16220 9878,16216 9873,16216 C 9867,16237 9876,16247 9894,16256"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id15">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9871,16306 L 9871,16365 9985,16306"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id16">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11500,16250 L 11613,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id17">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10184,15872 C 10184,15923 10218,15979 10243,16022 10277,16070 10335,16055 10387,16062 10490,16068 10593,16071 10696,16073 10725,16072 10749,16074 10776,16075 10790,16074 10789,16078 10804,16077 L 10804,16083 10831,16083 10831,16075 C 10837,16070 10842,16077 10853,16070 10866,16067 10870,16052 10873,16040 10883,15984 10892,15928 10898,15872"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id18">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10172,15872 L 10172,16130 10909,16130 10909,15872"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id19">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10570,15850 L 10556,15814 10593,15814 10596,15810 10598,15807 10600,15802 10598,15795 10596,15792 10593,15789 10475,15789 10470,15792 10468,15795 10466,15802 10468,15807 10470,15810 10475,15814 10510,15814 10498,15850 10570,15850 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id20">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10165,15872 L 10914,15872 10914,15857 10165,15857 10165,15872 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id21">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10914,15872 L 10914,15872 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id22">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10450,15802 L 10447,15790 10437,15780 10425,15777 10412,15780 10403,15790 10400,15802 10403,15815 10412,15824 10425,15827 10437,15824 10447,15815 10450,15802 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id23">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11339,16055 L 11335,16042 11325,16033 11314,16030 11300,16033 11292,16042 11289,16055 11292,16067 11300,16077 11314,16080 11325,16077 11335,16067 11339,16055 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id24">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11182,15885 L 11247,15885 11227,15852 11267,15789 11272,15795 11284,15779 11256,15769 11182,15885 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id25">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11166,15830 L 11191,15855 11181,15875 11146,15865 11166,15830 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id26">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11264,15830 L 11239,15855 11249,15875 11284,15865 11264,15830 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id27">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9985,16365 L 11385,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id28">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11112,16080 L 11112,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id29">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10425,15827 L 10425,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id30">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 9757,16365 L 9474,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id31">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10641,15827 L 10641,16145"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id32">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10711,16215 L 11084,16215"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id33">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11314,16080 L 11314,16215"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id34">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11314,16215 L 11314,16215 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id35">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11870,16215 L 11139,16215"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id36">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 11612,16365 L 11870,16365"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id37">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10641,16145 C 10642,16184 10672,16214 10711,16215"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

contrib/html/img/mc.svg
+231
View File
@@ -0,0 +1,231 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="117" height="212" viewBox="15115 10405 1615 2943" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="Page">
<g class="com.sun.star.drawing.LineShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15455,11182 L 15455,11182 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16304,12339 L 16083,12229 16083,12229 16083,12339 16083,12339 16304,12229 16304,12229 16304,12339 16304,12339 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id5">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15597,12075 C 15589,11906 15356,11908 15345,12075 15357,12241 15589,12240 15597,12075 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id6">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15347,12080 L 15472,11948 15597,12075"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id7">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16168,12204 L 16221,12204"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id8">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16150,12175 L 16238,12175"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id9">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16193,12284 L 16193,12175"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id10">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15430,11810 L 15425,11805 15417,11802 15409,11805 15402,11810 15400,11818 15402,11827 15409,11833 15417,11835 15425,11833 15430,11827 15434,11818 15417,11818 15527,11818 15527,11818 15527,11597 15527,11597 15417,11818 15417,11597 15417,11597 15527,11597"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id11">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15970,10526 L 15860,10526 15860,10414 15970,10414 15970,10526 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id12">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15860,10526 L 15860,10526 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id13">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15803,10635 L 15803,10526 16025,10635 16025,10526 15803,10635 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id14">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15915,10580 L 15915,10526"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id15">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16607,12794 L 16607,11576"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id16">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16607,11576 L 16607,11578"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id17">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16496,11466 L 16496,11466 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id18">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16050,11466 L 16050,11466 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id19">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16050,11245 L 16050,11245 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id20">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16496,11245 L 16496,11245 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id21">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16496,11023 L 16496,11023 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id22">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16050,11023 L 16050,11023 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id23">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16050,10802 L 16050,10802 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id24">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16496,10802 L 16496,10802 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id25">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16496,10580 L 16496,10580 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id26">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16607,11578 C 16607,11512 16559,11469 16496,11466 L 16496,11466 16050,11466 16050,11466 C 15902,11457 15902,11252 16050,11245 L 16050,11245 16496,11245 16496,11245 C 16643,11236 16643,11031 16496,11023 L 16496,11023 16050,11023 16050,11023 C 15902,11015 15902,10810 16050,10802 L 16050,10802 16496,10802 16496,10802 C 16643,10793 16643,10588 16496,10580 L 16496,10580 16025,10580"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id27">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15615,12567 L 16607,12567"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id28">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16304,12284 L 16607,12284"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id29">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16083,12284 L 15472,12284"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id30">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15472,12199 L 15472,12426"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id31">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15472,12710 L 15472,12814"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id32">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15472,11948 L 15472,11818"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id33">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15472,11596 L 15472,10690 15472,10690 C 15471,10628 15521,10583 15582,10580 L 15582,10580 15803,10580"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id34">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15128,12879 L 15333,12879"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id35">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16693,12818 L 15361,12818 15361,12818 C 15326,12848 15325,12910 15361,12940 L 15361,12940 16693,12940 16693,12940 C 16732,12909 16731,12849 16695,12818 L 16693,12818 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id36">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 16607,12968 L 16607,13218"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id37">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15400,12426 L 15544,12426 15400,12710 15544,12710 15400,12426 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id38">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15414,12567 C 15412,12455 15246,12455 15244,12567 L 15244,12567 C 15244,12682 15414,12682 15414,12567 L 15414,12567 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id39">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15414,12567 L 15472,12567"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id40">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15472,12567 L 15615,12639 15615,12496 15472,12567 15615,12496"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id41">
<path fill="rgb(35,31,32)" stroke="none" d="M 15375,12521 L 15357,12521 C 15337,12559 15337,12587 15321,12621 L 15333,12621 15362,12536 15375,12521 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id42">
<path fill="rgb(35,31,32)" stroke="none" d="M 15375,12521 L 15361,12536 15361,12621 15375,12621 15375,12521 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id43">
<path fill="rgb(35,31,32)" stroke="none" d="M 15301,12521 L 15280,12521 15280,12621 15294,12621 15294,12535 15301,12521 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id44">
<path fill="rgb(35,31,32)" stroke="none" d="M 15300,12521 L 15293,12535 15322,12621 15329,12606 15327,12604 15327,12601 15326,12599 15326,12596 15324,12591 15300,12521 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id45">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15880,10472 L 15883,10464 15891,10456 15900,10456 15905,10459 C 15907,10493 15888,10488 15908,10514 L 15916,10514 15925,10509 15933,10497 15938,10489 15941,10476 C 15947,10459 15955,10422 15925,10427 15912,10449 15936,10475 15955,10484"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id46">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15127,13279 L 15332,13279"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id47">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16692,13218 L 15360,13218 15360,13218 C 15325,13248 15324,13310 15360,13340 L 15360,13340 16692,13340 16692,13340 C 16731,13309 16730,13249 16694,13218 L 16692,13218 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

contrib/html/img/rc.svg
+59
View File
@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="34" height="28" viewBox="15778 9613 478 385" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15935,9902 C 15932,9838 15842,9836 15837,9902 15842,9968 15931,9967 15935,9902 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15787,9802 L 15842,9810 15900,9824 16015,9847 16132,9824 16190,9810 16246,9802"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id5">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16140,9669 L 15890,9669 15890,9797 16140,9797 16140,9669 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id6">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15890,9669 L 15890,9669 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id7">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15913,9864 C 15891,9887 15890,9915 15912,9939"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id8">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15859,9942 L 15869,9922 15872,9902 15870,9880 15860,9860"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id9">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16178,9859 L 16166,9872 16161,9889 16161,9905 16166,9922 16176,9935"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id10">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16123,9937 L 16133,9919 16136,9897 16135,9877 16125,9857"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id11">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15890,9669 L 15890,9669 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id12">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 16200,9900 C 16194,9834 16106,9835 16102,9900 16105,9964 16195,9965 16200,9900 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id13">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15786,9621 L 15786,9989 15786,9989 16247,9989 16247,9621 16247,9621 15788,9621 15786,9621 Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

contrib/html/img/storage.svg
+170
View File
@@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="134" height="334" viewBox="13851 14967 1698 4221" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="Page">
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 13893,15245 C 14372,14890 15028,14890 15507,15245 L 15507,15244 15521,15255 15529,15270 15536,15287 15537,15304 15537,15304 15537,18787 15537,18787 15536,18810 15536,18810 15527,18834 15527,18834 15516,18854 15516,18854 15501,18870 15501,18870 15481,18884 15481,18884 C 15298,18959 15123,18999 14928,19023 L 14928,19023 C 14585,19059 14239,19014 13919,18884 L 13919,18884 13919,18884 13919,18884 13899,18870 13899,18870 13884,18854 13884,18854 13873,18834 13873,18834 13864,18810 13864,18810 13863,18787 13863,18787 13863,18787 13863,18787 13863,15304 13863,15304 13864,15287 13871,15270 13879,15255 13893,15244 13893,15245 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 13938,18038 L 14021,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id5">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14057,18038 L 14132,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id6">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14171,18038 L 14244,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id7">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14282,18038 L 14355,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id8">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14394,18038 L 14467,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id9">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14505,18038 L 14580,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id10">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14617,18038 L 14692,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id11">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14728,18038 L 14803,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id12">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14840,18038 L 14915,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id13">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14951,18038 L 15026,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id14">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15063,18038 L 15138,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id15">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15174,18038 L 15249,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id16">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15286,18038 L 15361,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id17">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15397,18038 L 15482,18038"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id18">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15364,16431 L 14037,16710"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id19">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14037,15458 L 15288,15319 15288,15319 C 15328,15316 15335,15264 15301,15247 L 15301,15247 C 14928,15078 14514,15055 14127,15192 L 14127,15192 14101,15199 14074,15202 14074,15202 13941,15202"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id20">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14822,18238 L 15537,18238"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id21">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15462,18891 L 15462,19176 13937,19176 13937,19176 13937,18891"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id22">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14036,15457 L 15372,15598 14036,15738"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id23">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14036,15736 L 15372,15876 14036,16016"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id24">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14036,16014 L 15372,16154 14036,16295"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id25">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14036,16293 L 15372,16433"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id26">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14036,16711 L 15364,16991 14036,17271 15364,17550 14078,17936 14078,17936 14036,17946 13993,17950 13994,17950 13863,17950"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id27">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 15537,18686 L 14158,18686 14159,18686 C 13993,18677 13999,18514 14010,18387 L 14010,18387 C 14013,18302 14074,18241 14159,18238 L 14158,18238 14711,18238"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id28">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14712,15296 L 14712,18239"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id29">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14823,15296 L 14823,18239"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id30">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14823,18686 L 14823,18775 14823,18775 14823,18780 14821,18785 14811,18792 14795,18799 14785,18800 14773,18802 14763,18802 14752,18800 14742,18799 14725,18792 14718,18789 14715,18785 14712,18775 14712,18775 14712,18686"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id31">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 14712,18239 C 14745,18268 14790,18269 14823,18239"/>
</g>
</g>
<g class="com.sun.star.drawing.LineShape">
<g id="id32">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 14243,18566 L 14251,18566"/>
</g>
</g>
<g class="com.sun.star.drawing.OpenBezierShape">
<g id="id33">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="24" stroke-linejoin="round" d="M 15537,18566 L 14243,18566 14251,18566 C 14131,18565 14126,18396 14249,18388 L 14249,18388 15537,18388"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id34"/>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id35"/>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id36"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

contrib/html/img/valve.svg
+46
View File
@@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" width="25" height="31" viewBox="10111 16016 340 436" preserveAspectRatio="xMinYMin slice" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<g class="Page">
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id3">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10119,16266 L 10119,16105 10442,16266 10442,16105 10119,16266 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id4">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10280,16186 L 10362,16025 10199,16025"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id5">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10377,16348 C 10371,16220 10188,16220 10184,16348 10187,16474 10370,16479 10377,16348 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyLineShape">
<g id="id6">
<path fill="none" stroke="rgb(35,31,32)" stroke-width="17" stroke-linejoin="round" d="M 10280,16251 L 10280,16186 10199,16025"/>
</g>
</g>
<g class="com.sun.star.drawing.ClosedBezierShape">
<g id="id7">
<path fill="rgb(35,31,32)" stroke="none" d="M 10334,16292 L 10314,16292 C 10300,16324 10290,16372 10271,16406 L 10287,16406 10319,16310 10334,16292 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id8">
<path fill="rgb(35,31,32)" stroke="none" d="M 10334,16292 L 10318,16310 10318,16406 10334,16406 10334,16292 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id9">
<path fill="rgb(35,31,32)" stroke="none" d="M 10250,16292 L 10224,16292 10224,16406 10240,16406 10240,16308 10250,16292 Z"/>
</g>
</g>
<g class="com.sun.star.drawing.PolyPolygonShape">
<g id="id10">
<path fill="rgb(35,31,32)" stroke="none" d="M 10248,16292 L 10239,16308 10271,16406 10280,16389 10279,16386 10279,16383 10276,16381 10274,16376 10274,16373 10248,16292 Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

contrib/html/index.html
+498
View File
@@ -0,0 +1,498 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>ebusd</title>
<link rel="stylesheet" href="css/jsplumb.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-library="dom">
<div id="main" style="width: 1137px; height: 721px;">
<div class="ebus" id="ebus">
<div class="circuit back" id="dcf" style="left:10px;top:0px;width:54px;height:48px;background-image:url(img/dcf.svg);background-position:10px 10px">
<strong>DCF</strong>
<div data-id="broadcastdatetime" data-parts="0" class="circuitLabel" leftf="1" topf="0">??? °C</div>
<div data-id="broadcastdatetime" data-parts="2 1" class="circuitLabel" leftf="1" topf="0.45">Datum Zeit</div>
</div>
<div class="circuit" id="source" style="left:10px;top:280px;width:80px;height:100px;"><strong>Source</strong><br/><br/></div>
<div class="circuit back" id="ehp" style="left:140px;top:172px;width:144px;height:286px;background-image:url(img/ehp.svg);">
<strong>EHP</strong>
<div data-id="ehpSourceTempInput" data-parts="0" class="circuitLabel" topf="0.02" leftf="0.1">?? °C</div>
<div data-id="ehpSourcePress" data-parts="0" class="circuitLabel" topmf="0.2" leftf="0.01">??? bar</div>
<div data-id="ehpSourceTempOutput" data-parts="0" class="circuitLabel" topmf="0.3" leftf="0.01">?? °C</div>
<div data-id="ehpSource" class="circuitLabel" topmf="0.53" leftmf="0.12">???</div>
<div data-id="ehpHcFlowTemp" data-parts="0" class="circuitLabel" topf="0.02" leftf="0.6">T6 °C</div>
<div data-id="ehpHcPress" data-parts="0" class="circuitLabel" topmf="0.2" leftf="0.5">?? bar</div>
<div data-id="ehpHcReturnTemp" data-parts="0" class="circuitLabel" topmf="0.3" leftf="0.5">T5 °C</div>
<div data-id="ehpHwcHcValve" class="circuitLabel" topmf="0.4" leftmf="0.65">??</div>
<div data-id="ehpHc1Pump" class="circuitLabel" topmf="0.53" leftmf="0.665">???</div>
<div data-id="ehpBackup" class="circuitLabel" topmf="0.54" leftmf="0.9">???</div>
<div data-id="ehpTempOutput" data-parts="0" class="circuitLabel" leftf="0.2" topmf="0.68">T1 °C</div>
<div data-id="ehpCompPressHigh" data-parts="0" class="circuitLabel" leftf="0.6" topmf="0.68">?? bar</div>
<div data-id="ehpActualEnvironmentPower" data-parts="0" class="circuitLabel" leftmf="0.12" topmf="0.81">???</div>
<div data-id="ehpComp" class="circuitLabel" leftmf="0.5" topmf="0.81">???</div>
<div data-id="ehpHeatPumpStatus" class="circuitLabel" leftf="1" topmf="0.81">???</div>
<div data-id="ehpTempInput" data-parts="0" class="circuitLabel" leftf="0.2" topmf="0.94">T2 °C</div>
<div data-id="ehpCondensorTemp" data-parts="0" class="circuitLabel" leftf="0.65" topmf="0.81">T4 °C</div>
<div data-id="ehpCompPressLow" data-parts="0" class="circuitLabel" leftf="0.6" topmf="0.94">?? bar</div>
<div data-id="ehpYieldEnvironmentEnergy" data-parts="0" class="circuitLabel" leftf="0" topf="1">???</div>
<div data-id="ehpPowerCut" data-parts="cut: 0" class="circuitLabel" leftf="0.5" topf="1">???</div>
</div>
<div class="circuit back" id="valve" style="left:340px;top:188px;width:25px;height:31px;background-image:url(img/valve.svg);">
<strong>Valve</strong>
<div data-id="ehpHwcHcValve" class="circuitLabel" topf="0.02" leftf="0.1">??</div>
</div>
<div class="circuit back" id="storage" style="left:530px;top:124px;width:134px;height:334px;background-image:url(img/storage.svg);">
<strong>Storage</strong>
<div data-id="ehpHwcTemp" data-parts="0" class="circuitLabel" style="left:5px;" topmf="0.18">?? °C</div>
<div data-id="ehpStorageTempTop" data-parts="0" class="circuitLabel" style="left:5px" topmf="0.48">?? °C</div>
<div data-id="ehpStorageTempBottom" data-parts="0" class="circuitLabel" style="left:5px" topmf="0.62">?? °C</div>
</div>
<div class="circuit back" id="mc" style="left:820px;top:120px;width:116px;height:212px;background-image:url(img/mc.svg);">
<strong>Heating 2</strong>
<div data-id="mcStatus" data-parts="2" class="circuitLabel" style="left:5px;top:30px;">?? °C</div>
<div data-id="ehpHc2Pump" class="circuitLabel" leftmf="0.25" topmf="0.55">???</div>
<div data-id="mcMode" data-parts="1 0" class="circuitLabel" leftmf="0.5" topmf="0.4">???</div>
<div data-id="ehpMixer1DutyCycle" class="circuitLabel" leftmf="0.24" topmf="0.73">?? %</div>
<div data-id="mcStatus" data-parts="1 0" class="circuitLabel" leftmf="0.4" topmf="0.9">?? %</div>
</div>
<div class="circuit back" id="rc" style="left:851px;top:30px;width:54px;height:48px;background-image:url(img/rc.svg);background-position:10px 0px">
<strong>Room 2</strong>
<div data-id="rccRoomTemp" data-parts="0" class="circuitLabel" leftf="0" topf="1">?? °C</div>
</div>
<div class="circuit back" id="mc4" style="left:940px;top:120px;width:116px;height:212px;background-image:url(img/mc.svg);">
<strong>Heating 4</strong>
<div data-id="mc4Status" data-parts="2" class="circuitLabel" style="left:5px;top:30px;">?? °C</div>
<div data-id="mc4HcPumpPort" class="circuitLabel" leftmf="0.25" topmf="0.55">???</div>
<div data-id="mc4Mode" data-parts="1 0" class="circuitLabel" leftmf="0.5" topmf="0.4">???</div>
<div data-id="mc4MixerDutyCycle" class="circuitLabel" leftmf="0.24" topmf="0.73">?? %</div>
<div data-id="mc4Status" data-parts="1 0" class="circuitLabel" leftmf="0.4" topmf="0.9">?? %</div>
</div>
<div class="circuit back" id="rc4" style="left:971px;top:30px;width:54px;height:48px;background-image:url(img/rc.svg);background-position:10px 0px">
<strong>Room 4</strong>
<div data-id="rcc4RoomTemp" data-parts="0" class="circuitLabel" leftf="0" topf="1">?? °C</div>
</div>
<div class="circuit back" id="hwc" style="left:510px;top:40px;width:174px;height:52px;background-image:url(img/hwc.svg);">
<strong>HotWater</strong>
<div data-id="cpMode" data-parts="1 0" class="circuitLabel" leftf="0.6" topmf="0.2">???</div>
<div data-id="ehpCirPump" class="circuitLabel" leftmf="0.85" topmf="0.8">???</div>
</div>
</div>
</div>
<script src="js/dom.jsPlumb-1.7.5-min.js"></script>
<script src="js/prototype.js"></script>
<script>
jsPlumb.ready(function() {
var instance = jsPlumb.getInstance({
DragOptions: { cursor: 'pointer', zIndex: 2000 },
ConnectionOverlays: [
[ "Arrow", { location: 1 } ],
[ "Label", {
location: 0.5,
id: "label",
cssClass: "connLabel"
}]
],
Container: "main"
});
var selColor = "orange";
var offColor = "gray";
var hotColor = "red";
var warmColor = "orange";
var coldColor = "blue";
var offType = {
connector: "StateMachine",
paintStyle: { strokeStyle: offColor, lineWidth: 4 },
hoverPaintStyle: { strokeStyle: selColor },
};
var hotType = {
connector: "StateMachine",
paintStyle: { strokeStyle: hotColor, lineWidth: 4 },
hoverPaintStyle: { strokeStyle: selColor },
};
var warmType = {
connector: "StateMachine",
paintStyle: { strokeStyle: warmColor, lineWidth: 4 },
hoverPaintStyle: { strokeStyle: selColor },
};
var coldType = {
connector: "StateMachine",
paintStyle: { strokeStyle: coldColor, lineWidth: 4 },
hoverPaintStyle: { strokeStyle: selColor },
};
instance.registerConnectionType("off", offType);
instance.registerConnectionType("hot", hotType);
instance.registerConnectionType("warm", warmType);
instance.registerConnectionType("cold", coldType);
// this is the paint style for the connecting lines..
var connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#808080",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth: 4,
strokeStyle: selColor,
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: selColor,
strokeStyle: selColor
},
// the definition of source endpoints
sourceEndpoint = {
endpoint: "Rectangle",
paintStyle: {
strokeStyle: offColor,
fillStyle: "transparent",
lineWidth: 4,
width: 12,
height: 12
},
maxConnections: -1,
isSource: true,
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
xoverlays: [
[ "Label", {
location: [0.5, 1.5],
label: "out",
cssClass: "endpointSourceLabel"
}]
]
},
// the definition of target endpoints (will appear when the user drags a connection)
targetEndpoint = {
endpoint: "Rectangle",
paintStyle: {
strokeStyle: offColor,
fillStyle: "transparent",
radius: 6,
lineWidth: 4,
width: 12,
height: 12
},
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
connector: [ "Flowchart", { stub: [20, 20], gap: 6, cornerRadius: 5, alwaysRespectStubs: true } ],
xoverlays: [
[ "Label", {
location: [0.5, -0.5],
label: "in",
cssClass: "endpointTargetLabel"
}]
]
},
init = function(connection) {
connection.getOverlay("label").setLabel(connection.endpoints[0].getParameter('name'));
};
var _addEndpoints = function(divId, anchors) {
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
var anchUUID = divId + anchor.name;
var endpoint = anchor.target ? targetEndpoint : sourceEndpoint;
var overlays = endpoint.xoverlays.slice(1);
var label = anchor.label ? anchor.label : anchor.name;
if (false && label) {
var location = anchor.target ? [0.5, -0.5] : [0.5, 0.5];
if (Array.isArray(anchor.anchor)) {
location = [0.5-3*anchor.anchor[2], 0.5-2*anchor.anchor[3]];
}
overlays[overlays.length] = ["Label", {
location: location,
label: label,
cssClass: anchor.target ? "endpointTargetLabel" : "endpointSourceLabel"
}];
}
if (anchor.distance && endpoint.connector) {
endpoint = jsPlumbUtil.clone(endpoint);
if (Array.isArray(anchor.distance)) {
endpoint.connector[1].stub[0] += anchor.distance[0];
endpoint.connector[1].stub[1] += anchor.distance[1];
if (anchor.distance.length>2) {
endpoint.connector[1].midpoint = anchor.distance[2];
}
} else {
endpoint.connector[1].stub[anchor.target?1:0] += anchor.distance;
}
}
instance.addEndpoint(divId, endpoint, {
anchor: anchor.anchor, uuid: anchUUID, overlays: overlays,
parameters:{name:anchor.name}
});
}
};
var each = function(items, fn) {
for (var i = 0; i < items.length; i++)
fn(items[i]);
}
each(instance.getSelector(".ebus .circuitLabel"), function(item) {
if (item.getAttribute('topf')) {
item.style.top = Math.floor(item.parentElement.clientHeight*item.getAttribute('topf'))+'px';
} else if (item.getAttribute('topmf')) {
item.style.top = Math.floor(item.parentElement.clientHeight*item.getAttribute('topmf')-item.clientHeight/2)+'px';
}
if (item.getAttribute('leftf')) {
item.style.left = Math.floor(item.parentElement.clientWidth*item.getAttribute('leftf'))+'px';
} else if (item.getAttribute('leftmf')) {
item.style.left = Math.floor(item.parentElement.clientWidth*item.getAttribute('leftmf')-item.clientWidth/2)+'px';
}
});
var items = {};
var sourceFlow, sourceReturn, hwcReturn, ehpFlow, hcFlow, hwcFlow, hcReturn, mixFlow, mixReturn, storHwcFlow, storHwcReturn;
// suspend drawing and initialise.
instance.batch(function() {
_addEndpoints("source", [
{name:"Output", anchor:[0.25, 0, 0, -1], label: "Source"},
{name:"Input", anchor:[0.75, 0, 0, -1], target:true, label: "Source"},
]);
_addEndpoints("ehp", [
{name:"SourceOutput", anchor:[0.12, 0, 0, -1], label: "Source"},
{name:"SourceInput", anchor:[0.22, 0, 0, -1], target:true, label: "Source", distance:[0,60]},
{name:"HwcReturn", anchor:[0.53, 0, 0, -1], target:true, distance:[0,80,0.3]},
{name:"HcReturn", anchor:[0.78, 0, 0, -1], target:true, distance:[0,60,0.42]},
{name:"Flow", anchor:[0.88, 0, 0, -1]}
]);
_addEndpoints("valve", [
{name:"Flow", anchor:"Top", target:true},
{name:"HwcFlow", anchor:"Right"},
{name:"HcFlow", anchor:"Left"}
]);
_addEndpoints("storage", [
{name:"HwcOutput", anchor:[0, 0.06, -1, 0]},
{name:"HwcInput", anchor:[1, 0.06, 1, 0], target:true, distance:[0,0,0.8]},
{name:"HwcFlow", anchor:[0, 0.24, -1, 0], target:true},
{name:"HwcReturn", anchor:[0, 0.43, -1, 0]},
{name:"MixFlow", anchor:[1, 0.47, 1, 0]},
{name:"HcFlow", anchor:[0, 0.53, -1, 0], target:true},
{name:"MixReturn", anchor:[1, 0.62, 1, 0], target:true, distance:[0,0,0.7]},
{name:"HcReturn", anchor:[0, 0.67, -1, 0]}
]);
_addEndpoints("mc", [
{name:"Flow", anchor:[0, 0.82, -1, 0], target:true, distance:[0,0,0.7]},
{name:"Return", anchor:[0, 0.96, -1, 0]}
]);
_addEndpoints("hwc", [
{name:"Return", anchor:[1, 0.82, 1, 0]},
{name:"Flow", anchor:[0, 0.82, -1, 0], target:true, distance:[40,0,0.5]}
]);
// listen for new connections; initialise them the same way we initialise the connections at startup.
instance.bind("connection", function(connInfo, originalEvent) {
init(connInfo.connection);
});
// make all the window divs draggable
instance.draggable(jsPlumb.getSelector(".ebus .circuit"), { grid: [20, 20] });
// connections
sourceFlow = instance.connect({uuids: ["sourceOutput", "ehpSourceInput"], editable: true});
sourceReturn = instance.connect({uuids: ["ehpSourceOutput", "sourceInput"], editable: true});
hwcReturn = instance.connect({uuids: ["storageHwcReturn", "ehpHwcReturn"], editable: true});
ehpFlow = instance.connect({uuids: ["ehpFlow", "valveFlow"], editable: true});
hcFlow = instance.connect({uuids: ["valveHcFlow", "storageHcFlow"], editable: true});
hwcFlow = instance.connect({uuids: ["valveHwcFlow", "storageHwcFlow"], editable: true});
hcReturn = instance.connect({uuids: ["storageHcReturn", "ehpHcReturn"], editable: true});
mixFlow = instance.connect({uuids: ["storageMixFlow", "mcFlow"], editable: true});
mixReturn = instance.connect({uuids: ["mcReturn", "storageMixReturn"], editable: true});
storHwcFlow = instance.connect({uuids: ["storageHwcOutput", "hwcFlow"], editable: true});
storHwcReturn = instance.connect({uuids: ["hwcReturn", "storageHwcInput"], editable: true});
instance.bind("click", function(conn, originalEvent) {
if (conn.hasType("hot")) {
conn.toggleType("hot");
conn.toggleType("cold");
} else if (conn.hasType("cold")) {
conn.toggleType("cold");
} else {
conn.toggleType("hot");
}
});
instance.bind("connectionDrag", function(connection) {
console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
});
instance.bind("connectionDragStop", function(connection) {
console.log("connection " + connection.id + " was dragged");
});
instance.bind("connectionMoved", function(params) {
console.log("connection " + params.connection.id + " was moved");
});
sourceFlow.setType("hot");
sourceReturn.setType("cold");
mixFlow.setType("hot");
mixReturn.setType("cold");
storHwcFlow.setType("hot");
storHwcReturn.setType("off");
});
//jsPlumb.fire("jsPlumbDemoLoaded", instance);
var heat = false, water = false;
var switchActions = {
broadcasthwStatus: function(fields){
console.log("action broadcasthwStatus:"+fields);
if (!fields) return;
var val = fields[0].value;
if (val=='on') {
water = true;
ehpFlow.addType("hot");
hcFlow.removeType("hot");
hwcFlow.addType("hot");
hcReturn.removeType("cold");
hwcReturn.addType("cold");
} else {
water = false;
hwcFlow.removeType("hot");
hwcReturn.removeType("cold");
if (!heat) {
ehpFlow.removeType("hot");
hcFlow.removeType("hot");
hcReturn.removeType("cold");
}
}
},
bcStatus: function(fields) {
console.log("action bcStatus:"+fields);
if (!fields) return;
var val = fields[3].value;
if (val=='03 2c 00 00') { // heat
heat = true;
ehpFlow.addType("hot");
hwcFlow.removeType("hot");
hcFlow.addType("hot");
hwcReturn.removeType("cold");
hcReturn.addType("cold");
} else {
water = false;
hcFlow.removeType("hot");
hcReturn.removeType("cold");
if (!water) {
ehpFlow.removeType("hot");
hwcFlow.removeType("hot");
hwcReturn.removeType("cold");
}
}
}
};
var running = false, firstrun = true;
var since = 0;
var needUris = new Array();
var startNeeded = function() {
for (var i=0; i<needUris.length; i++) {
new Ajax.Request('/data/'+needUris[i]+'?exact=1&poll=2',{
method:'get',
onSuccess: function(trans) {
}
});
}
};
var startRequest = function() {
if (running) return;
running = true;
new Ajax.Request('/data/?since='+since,{
method:'get',
onSuccess: function(trans) {
for (var cname in trans.responseJSON) {
if (!trans.responseJSON.hasOwnProperty(cname)) {
continue;
}
var circuit = trans.responseJSON[cname];
for (var mname in circuit) {
if (!circuit.hasOwnProperty(mname)) {
continue;
}
var message = circuit[mname];
var lastup = message.lastup;
if (lastup>since) {
since = lastup;
}
var fields = message.fields;
var key = cname+mname;
var needed = false;
if (switchActions.hasOwnProperty(key)) {
switchActions[key](fields);
needed = true;
}
var elems = $$('div[data-id="'+key+'"]');
if (elems.length>0) {
needed = true;
} else console.log(key+':'+fields);
if (needed && firstrun) {
needUris[needUris.length] = cname+'/'+mname;
}
if (!fields) {
continue;
}
each(elems, function(elem) {
var ret = '';
var parts = elem.getAttribute('data-parts');
if (parts) {
parts = parts.split(' ');
for (var i=0; i<parts.length; i++) {
if (ret.length>0) ret += ',&nbsp;';
if (isNaN(parts[i])) {
if (parts[i]=='\\n')
ret += "<br>";
else
ret += parts[i];
} else {
var field = fields[parts[i]];
if (field) {
ret += field.value;
if (field.unit) {
ret += '&nbsp;'+field.unit;
}
} else console.log("undefined field "+parts[i]+" in "+cname+" "+mname);
}
}
} else {
for (var i=0; i<fields.length; i++) {
if (ret.length>0) ret += ',&nbsp;';
var field = fields[i];
ret += field.value;
if (field.unit) {
ret += '&nbsp;'+field.unit;
}
}
}
elem.innerHTML=ret;
});
}
}
running = false;
if (firstrun) {
startNeeded();
}
firstrun = false;
},
onFailure: function() {
console.log("failed");
running = false;
},
onException: function(trans,e) {
console.log(e);
running = false;
}
});
};
startRequest();
new PeriodicalExecuter(startRequest, 15);
});
</script>
</body>
</html>
contrib/html/js/dom.jsPlumb-1.7.5-min.js
Vendored
+6
View File
File diff suppressed because one or more lines are too long
contrib/html/js/prototype.js
Vendored
+7510
View File
File diff suppressed because it is too large Load Diff