홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Paul Greyson
Committed by Gerrit Code Review
29cd58f3 1 parent e2575b63

First pass at svg icons and dark theme for topo 

Have not addressed top bar etc

Change-Id: I0cc47a1f500bd9d8589eeaf8042f21ec4c8e6cbe
Inline Side-by-side
Showing 6 changed files with 391 additions and 122 deletions
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg">
<symbol id="switch">
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-344.44812,-517.03149)">
<path d="m 389.9165,532.15849 -44.64875,0 0,14.495 44.64875,0 0,-14.495 z" id="path24009" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001"/>
<g id="g24011" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
<path d="m 0,0 14.428,11.694 33.33,0 L 35.779,0 0,0 z" id="path24013" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g24015" transform="matrix(1.25,0,0,-1.25,345.15125,532.23224)">
<path d="m 0,0 14.428,11.694 33.33,0 L 35.779,0 0,0 z" id="path24017" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g24019" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
<path d="M 0,0 11.932,12.892 11.939,23.575 0,11.919 0,0 z" id="path24021" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g24023" transform="matrix(1.25,0,0,-1.25,389.8925,547.10962)">
<path d="M 0,0 11.932,12.892 11.939,23.575 0,11.919 0,0 z" id="path24025" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g24027" transform="matrix(1.25,0,0,-1.25,371.32312,528.42974)">
<path d="m 0,0 -0.691,-0.568 -8.911,0 -0.886,-0.888 -2.414,1.052 4.853,1.389 L -8.906,0 0,0 z" id="path24029" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g24031" transform="matrix(1.25,0,0,-1.25,380.07312,522.96099)">
<path d="m 0,0 -0.691,-0.568 -8.911,0 -0.886,-0.888 -2.414,1.052 4.853,1.389 L -8.906,0 0,0 z" id="path24033" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g24035" transform="matrix(1.25,0,0,-1.25,373.28837,526.49738)">
<path d="m 0,0 0.691,0.569 8.913,0 L 10.49,1.456 12.904,0.405 8.049,-0.984 8.908,0 0,0 z" id="path24037" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g24039" transform="matrix(1.25,0,0,-1.25,379.06962,521.02863)">
<path d="m 0,0 0.691,0.569 8.913,0 L 10.49,1.456 12.904,0.405 8.049,-0.984 8.908,0 0,0 z" id="path24041" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
</g>
</symbol>
<symbol id="router">
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-351.74132,-516.62992)">
<g id="g18775" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
<path d="m 0,0 c 0,-3.95 -8.235,-7.152 -18.393,-7.152 -10.158,0 -18.393,3.202 -18.393,7.152 l 0,-10.478 c 0,-3.948 8.235,-7.151 18.393,-7.151 10.158,0 18.393,3.203 18.393,7.151 L 0,0 z" id="path18777" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g18779" transform="matrix(1.25,0,0,-1.25,397.99132,525.81444)">
<path d="m 0,0 c 0,-3.95 -8.235,-7.152 -18.393,-7.152 -10.158,0 -18.393,3.202 -18.393,7.152 l 0,-10.478 c 0,-3.948 8.235,-7.151 18.393,-7.151 10.158,0 18.393,3.203 18.393,7.151 L 0,0 z" id="path18781" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g18783" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
<path d="m 0,0 c 10.158,0 18.393,3.202 18.393,7.152 0,3.952 -8.235,7.153 -18.393,7.153 -10.158,0 -18.393,-3.201 -18.393,-7.153 C -18.393,3.202 -10.158,0 0,0" id="path18785" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g18787" transform="matrix(1.25,0,0,-1.25,374.99992,534.75492)">
<path d="m 0,0 c 10.158,0 18.393,3.202 18.393,7.152 0,3.952 -8.235,7.153 -18.393,7.153 -10.158,0 -18.393,-3.201 -18.393,-7.153 C -18.393,3.202 -10.158,0 0,0 z" id="path18789" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g18791" transform="matrix(1.25,0,0,-1.25,369.75031,522.31831)">
<path d="m 0,0 1.518,-2.278 -5.742,-1.327 1.255,1.043 -8.875,1.518 2.227,1.669 8.563,-1.45 L 0,0 z" id="path18793" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g18795" transform="matrix(1.25,0,0,-1.25,379.85043,529.22393)">
<path d="M 0,0 -1.036,2.35 4.143,3.384 3.245,2.579 11.878,1.104 9.807,-0.553 1.225,1.06 0,0 z" id="path18797" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g18799" transform="matrix(1.25,0,0,-1.25,376.31043,520.76318)">
<path d="M 0,0 5.802,1.588 5.87,-0.898 4.42,-0.622 1.589,-2.972 -1.113,-2.576 1.809,-0.279 0,0 z" id="path18801" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g18803" transform="matrix(1.25,0,0,-1.25,373.20244,531.90095)">
<path d="M 0,0 -5.525,-1.035 -5.732,1.52 -4.144,1.175 -1.103,3.771 1.588,3.315 -1.658,0.483 0,0 z" id="path18805" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
</g>
</symbol>
<symbol id="roadm">
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-352.14937,-517.55019)">
<g id="g23883" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
<path d="m 0,0 0,-9.5 -8.725,-6.977 -18.127,0 -9.064,6.977 0,9.5" id="path23885" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g23887" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
<path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path23889" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g23891" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
<path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path23893" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g23895" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
<path d="m 0,0 1.384,-2.076 -5.235,-1.21 1.145,0.952 -6.697,1.421 2.03,1.522 6.412,-1.361 L 0,0 z" id="path23897" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g23899" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
<path d="M 0,0 -0.945,2.14 3.777,3.084 2.959,2.351 9.951,1.152 8.064,-0.36 1.117,0.965 0,0 z" id="path23901" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g23903" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
<path d="M 0,0 5.289,1.448 5.352,-0.818 4.029,-0.566 1.449,-2.707 -1.014,-2.347 1.65,-0.255 0,0 z" id="path23905" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g23907" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
<path d="M 0,0 -5.037,-0.944 -5.224,1.385 -3.777,1.071 -1.006,3.44 1.447,3.023 -1.512,0.441 0,0 z" id="path23909" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g23911" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
<path d="M 0,0 0,9.389 M -18.25,0 l 0,9.389" id="path23913" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g25718" transform="matrix(1.25,0,0,-1.25,397.44718,526.34356)">
<path d="m 0,0 0,-9.5 -8.725,-6.977 -18.127,0 -9.064,6.977 0,9.5" id="path25720" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g25722" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
<path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path25724" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g25726" transform="matrix(1.25,0,0,-1.25,386.32906,517.78456)">
<path d="m 0,0 -17.787,0 -9.234,-6.847 9.064,-6.977 18.127,0 8.725,6.977 L 0,0 z" id="path25728" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g25730" transform="matrix(1.25,0,0,-1.25,370.5857,523.05858)">
<path d="m 0,0 1.384,-2.076 -5.235,-1.21 1.145,0.952 -6.697,1.421 2.03,1.522 6.412,-1.361 L 0,0 z" id="path25732" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g25734" transform="matrix(1.25,0,0,-1.25,379.79093,529.35194)">
<path d="M 0,0 -0.945,2.14 3.777,3.084 2.959,2.351 9.951,1.152 8.064,-0.36 1.117,0.965 0,0 z" id="path25736" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g25738" transform="matrix(1.25,0,0,-1.25,377.03218,521.01569)">
<path d="M 0,0 5.289,1.448 5.352,-0.818 4.029,-0.566 1.449,-2.707 -1.014,-2.347 1.65,-0.255 0,0 z" id="path25740" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g25742" transform="matrix(1.25,0,0,-1.25,372.99894,532.36957)">
<path d="M 0,0 -5.037,-0.944 -5.224,1.385 -3.777,1.071 -1.006,3.44 1.447,3.023 -1.512,0.441 0,0 z" id="path25744" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g25746" transform="matrix(1.25,0,0,-1.25,386.49758,546.80069)">
<path d="M 0,0 0,9.389 M -18.25,0 l 0,9.389" id="path25748" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
</g>
</symbol>
<symbol id="endstation">
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-361.79125,-513.72074)">
<g id="g19723" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
<path d="m 0,0 -15.82,0 0,-24.512 15.82,0" id="path19725" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g19727" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
<path d="m 0,0 4.914,4.912 0,24.512 -14.445,0 L -15.82,24.51 0,24.51 0,0 z" id="path19729" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g19731" transform="matrix(1.25,0,0,-1.25,381.81625,550.75074)">
<path d="m 0,0 4.914,4.912 0,24.512 -14.445,0 L -15.82,24.51 0,24.51 0,0 z" id="path19733" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g19735" transform="matrix(1.25,0,0,-1.25,381.81625,520.11362)">
<path d="M 0,0 4.914,4.914" id="path19737" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g19739" transform="matrix(1.25,0,0,-1.25,371.85774,520.11362)">
<path d="M 0,0 0,-24.512" id="path19741" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g19743" transform="matrix(1.25,0,0,-1.25,372.17024,520.11362)">
<path d="M 0,0 5.346,4.914" id="path19745" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<path d="m 379.91712,544.47137 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 9.52375,-6.5625 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 9.52375,-15 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m -9.52375,0 -6.64125,0 0,4.0625 6.64125,0 0,-4.0625 z m 1.7775,-2.795 6.68125,-6.1425" id="path19747" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
</symbol>
<symbol id="bgpSpeaker">
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1" transform="translate(-355.47362,-514.96093)">
<path d="m 355.72362,519.29593 34.56875,0 0,30.2175 -34.56875,0 0,-30.2175 z" id="path5104" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
<path d="m 355.72362,519.29593 34.57,0 0,30.2175 -34.57,0 0,-30.2175 z" id="path5106" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
<g id="g5108" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
<path d="m 0,0 -3.187,-3.268 27.656,0 L 27.655,0 0,0 z" id="path5110" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g5112" transform="matrix(1.25,0,0,-1.25,359.70763,515.2113)">
<path d="m 0,0 -3.187,-3.268 27.656,0 L 27.655,0 0,0 z" id="path5114" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g5116" transform="matrix(1.25,0,0,-1.25,394.27674,545.42854)">
<path d="m 0,0 0,24.174 -3.186,-3.268 0,-24.174 L 0,0 z" id="path5118" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<path d="m 387.49987,522.07593 z m 6.77625,23.3525 0,-30.2175 -3.9825,4.085 0,30.2175 3.9825,-4.085 z" id="path5120" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
<g id="g5122" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
<path d="m 0,0 c 0,-2.152 -4.486,-3.896 -10.02,-3.896 -5.533,0 -10.019,1.744 -10.019,3.896 l 0,-5.707 c 0,-2.152 4.486,-3.897 10.019,-3.897 5.534,0 10.02,1.745 10.02,3.897 L 0,0 z" id="path5124" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g5126" transform="matrix(1.25,0,0,-1.25,385.85025,531.2343)">
<path d="m 0,0 c 0,-2.152 -4.486,-3.896 -10.02,-3.896 -5.533,0 -10.019,1.744 -10.019,3.896 l 0,-5.707 c 0,-2.152 4.486,-3.897 10.019,-3.897 5.534,0 10.02,1.745 10.02,3.897 L 0,0 z" id="path5128" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g5130" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
<path d="M 0,0 C 5.534,0 10.02,1.744 10.02,3.896 10.02,6.049 5.534,7.793 0,7.793 -5.533,7.793 -10.019,6.049 -10.019,3.896 -10.019,1.744 -5.533,0 0,0" id="path5132" inkscape:connector-curvature="0" style="fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g5134" transform="matrix(1.25,0,0,-1.25,373.32524,536.10479)">
<path d="M 0,0 C 5.534,0 10.02,1.744 10.02,3.896 10.02,6.049 5.534,7.793 0,7.793 -5.533,7.793 -10.019,6.049 -10.019,3.896 -10.019,1.744 -5.533,0 0,0 z" id="path5136" inkscape:connector-curvature="0" style="fill:none;stroke:currentColor;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</g>
<g id="g5138" transform="matrix(1.25,0,0,-1.25,370.46387,529.32993)">
<path d="m 0,0 0.828,-1.241 -3.128,-0.723 0.683,0.569 -4.834,0.828 1.213,0.908 4.665,-0.79 L 0,0 z" id="path5140" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g5142" transform="matrix(1.25,0,0,-1.25,375.96798,533.09218)">
<path d="M 0,0 -0.565,1.279 2.257,1.844 1.767,1.404 6.47,0.602 5.341,-0.301 0.668,0.577 0,0 z" id="path5144" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g5146" transform="matrix(1.25,0,0,-1.25,374.03937,528.48281)">
<path d="M 0,0 3.16,0.865 3.198,-0.488 2.408,-0.339 0.865,-1.617 -0.606,-1.403 0.986,-0.151 0,0 z" id="path5148" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g5150" transform="matrix(1.25,0,0,-1.25,372.34687,534.54968)">
<path d="M 0,0 -3.01,-0.564 -3.123,0.828 -2.258,0.64 -0.601,2.055 0.865,1.807 -0.903,0.264 0,0 z" id="path5152" inkscape:connector-curvature="0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
</g>
</symbol>
</svg>
\ No newline at end of file
......@@ -40,12 +40,14 @@
<!-- Base library and framework stylesheets included here -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="onos2.css">
<link rel="stylesheet" href="onos_theme.css">
<link rel="stylesheet" href="mast2.css">
<link rel="stylesheet" href="floatPanel.css">
<!-- This is where contributed stylesheets get INJECTED -->
<!-- TODO: replace with template marker and inject refs server-side -->
<link rel="stylesheet" href="topo2.css">
<link rel="stylesheet" href="topo_theme.css">
<link rel="stylesheet" href="webSockTrace.css">
......@@ -56,7 +58,7 @@
<script src="onos2.js"></script>
</head>
<body>
<body class='theme_dark'>
<div id="frame">
<div id="mast">
<!-- NOTE: masthead injected here by mast.js -->
......
......@@ -25,14 +25,11 @@
}
#topo #map {
stroke-width: 2px;
stroke: #aaaaaa;
fill: transparent;
}
#topo svg .glyph {
fill: white;
stroke: none;
}
......@@ -68,39 +65,20 @@
#topo svg .node.device.fixed rect {
stroke-width: 1.5;
stroke: #ccc;
}
/* note: device is offline without the 'online' class */
#topo svg .node.device {
fill: #777;
}
#topo svg .node.device.switch.online {
fill: #17f;
}
#topo svg .node.device.roadm.online {
fill: #03c;
#topo .node text {
font-weight: 100;
}
/* note: device is offline without the 'online' class */
/* note: device is offline without the 'online' class */
#topo svg .node.device text {
fill: #aaa;
font: 10pt sans-serif;
}
#topo svg .node.device.online text {
fill: white;
}
/* Host Nodes */
#topo svg .node.host {
stroke: #000;
}
#topo svg .node.host text {
fill: #846;
stroke: none;
......@@ -127,29 +105,23 @@ svg .node.host circle {
}
#topo svg .link.primary {
stroke: #f11;
stroke-width: 6px;
}
#topo svg .link.secondary {
stroke: rgba(255,100,100,0.5);
stroke-width: 4px;
}
#topo svg .link.animated {
stroke: #f11;
stroke-width: 10px;
stroke-dasharray: 8 8
}
#topo svg .link.primary.optical {
stroke: #74f;
stroke-width: 6px;
}
#topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
stroke-width: 4px;
}
#topo svg .link.animated.optical {
stroke: #74f;
stroke-width: 10px;
stroke-dasharray: 8 8
}
......@@ -205,17 +177,13 @@ svg .node.host circle {
cursor: pointer;
width: 50%;
text-align: center;
/* theme specific... */
border: 1px solid #ddf;
color: #99f;
border-width: 1px;
borer-style: solid;
}
#topo-detail .actionBtn:hover {
/* theme specific... */
border: 1px solid #ddf;
background: #eef;
color: #77d;
border-width: 1px;
border-style: solid;
}
......@@ -239,29 +207,14 @@ svg .node.host circle {
height: 80px;
margin: 4px 0;
cursor: pointer;
/* theme-related */
color: #444;
background-color: #ccc;
border: 2px solid #aaa;
}
#topo-oibox .onosInst.online {
/* theme-related */
color: #113;
background-color: #bbf;
border: 2px solid #555;
border-width: 2px;
border-style: solid;
}
#topo-oibox .onosInst .onosTitle {
text-align: center;
font-size: 11pt;
margin-top: 6px;
color: #888;
}
#topo-oibox .onosInst.online .onosTitle {
color: black;
}
#topo-oibox .onosInst img {
......
......@@ -70,23 +70,17 @@
}
},
topo: {
linkBaseColor: '#666',
linkInColor: '#66f',
linkInWidth: 14,
linkOutColor: '#f00',
linkInWidth: 14,
linkOutWidth: 30
},
icons: {
w: 28,
h: 28,
xoff: -12,
yoff: -8
map: {
strokeWidth: 1
},
iconUrl: {
device: 'img/device.png',
host: 'img/host.png',
pkt: 'img/pkt.png',
opt: 'img/opt.png'
icons: {
w: 100,
h: 100
},
force: {
note_for_links: 'link.type is used to differentiate',
......@@ -532,8 +526,7 @@
}
el.transition()
.duration(1000)
.attr('stroke-width', linkScale(lw))
.attr('stroke', config.topo.linkBaseColor);
.attr('stroke-width', linkScale(lw));
}
// ==============================
......@@ -1234,8 +1227,8 @@
$.extend(node, xy);
}
function iconUrl(d) {
return 'img/' + d.type + '.png';
function getIconUrl(d) {
return 'icons.svg#' + d.type;
}
// returns the newly computed bounding box of the rectangle
......@@ -1277,6 +1270,29 @@
return (label && label.trim()) ? label : '.';
}
function updateDeviceIconAppearance(node, box, animate) {
var u = node.select('use');
var ubbox = u.node().getBBox();
var xoff = -ubbox.width/2 - box.width/2 - 4;
var yoff = -ubbox.height;
var iconTransform = 'translate(' + xoff + ',' + yoff + ')';
if (animate) {
node.select('use')
.transition()
.attr('transform', iconTransform);
} else {
node.select('use')
.attr('transform', iconTransform);
}
var computedStyle = window.getComputedStyle(node.node());
u.attr({
fill: computedStyle.fill,
color: computedStyle.color
});
}
function updateDeviceLabel(d) {
var label = niceLabel(deviceLabel(d)),
node = d.el,
......@@ -1294,10 +1310,7 @@
.transition()
.attr(box);
node.select('image')
.transition()
.attr('x', box.x + config.icons.xoff)
.attr('y', box.y + config.icons.yoff);
updateDeviceIconAppearance(node, box, true);
}
function updateHostLabel(d) {
......@@ -1339,18 +1352,6 @@
}
}
function addHostIcon(node, radius, iconId) {
var dim = radius * 1.5,
xlate = -dim / 2;
node.append('use')
.classed('glyph', true)
.attr('transform', translate(xlate,xlate))
.attr('xlink:href', '#' + iconId)
.attr('width', dim)
.attr('height', dim);
}
function updateNodes() {
node = nodeG.selectAll('.node')
.data(network.nodes, function (d) { return d.id; });
......@@ -1377,7 +1378,7 @@
// augment device nodes...
entering.filter('.device').each(function (d) {
var node = d3.select(this),
icon = iconUrl(d),
iconUrl = getIconUrl(d),
label = niceLabel(deviceLabel(d)),
box;
......@@ -1399,18 +1400,17 @@
node.select('rect')
.attr(box);
if (icon) {
var cfg = config.icons;
node.append('svg:image')
if (iconUrl) {
node.append('svg:use')
.attr({
x: box.x + config.icons.xoff,
y: box.y + config.icons.yoff,
width: cfg.w,
height: cfg.h,
'xlink:href': icon
'xlink:href': iconUrl,
width: config.icons.w,
height: config.icons.h
});
}
updateDeviceIconAppearance(node, box, false);
// debug function to show the modelled x,y coordinates of nodes...
if (debug('showNodeXY')) {
node.select('rect').attr('fill-opacity', 0.5);
......@@ -1424,36 +1424,43 @@
}
});
// TODO: better place for this configuration state
var defaultHostRadius = 9,
hostRadius = {
bgpSpeaker: 20
},
hostIcon = {
bgpSpeaker: 'bullhorn'
};
// augment host nodes...
entering.filter('.host').each(function (d) {
var node = d3.select(this),
r = hostRadius[d.type] || defaultHostRadius,
textDy = r + 10,
icon = hostIcon[d.type];
iconUrl = getIconUrl(d);
// provide ref to element from backing data....
d.el = node;
node.append('circle')
.attr('r', r);
// var box = node.append('circle')
// .attr('r', r).node().getBBox();
if (icon) {
addHostIcon(node, r, icon);
var textYOff = 0;
var textXOff = 0;
if (iconUrl) {
var computedStyle = window.getComputedStyle(node.node());
var u = node.append('svg:use')
.attr({
'xlink:href': iconUrl,
width: config.icons.w,
height: config.icons.h,
fill: computedStyle.fill,
color: computedStyle.color
});
var ubbox = node.select('use').node().getBBox();
u.attr('y', -ubbox.height/2);
textYOff = ubbox.height/2 + 4; // pad by 4 pixels
textXOff = ubbox.width/2;
}
node.append('text')
.text(hostLabel)
.attr('dy', textDy)
.attr('alignment-baseline', 'text-before-edge')
.attr('x', textXOff)
.attr('y', textYOff)
.attr('text-anchor', 'middle');
// debug function to show the modelled x,y coordinates of nodes...
......@@ -1492,9 +1499,9 @@
.style('opacity', 0);
// note, leave <g>.remove to remove this element
node.select('circle')
.style('stroke-fill', '#555')
.style('fill', '#888')
node.select('use')
.style('color', '#aaa')
.style('fill', '#000')
.style('opacity', 0.5)
.transition()
.duration(1500)
......@@ -1817,7 +1824,7 @@
function zoomPan(scale, translate) {
zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
// keep the map lines constant width while zooming
bgImg.style("stroke-width", 2.0 / scale + "px");
bgImg.attr("stroke-width", config.map.strokeWidth / scale + "px");
}
function resetZoomPan() {
......@@ -1934,6 +1941,27 @@
gly.defBullhorn(defs);
}
// create references to bring these into cache so that getBBox() works when they
// are inserted later
function preloadIcons(svg) {
var icons = [
"router",
"switch",
"roadm",
"endstation",
"bgpSpeaker"
];
var g = svg.append('g');
for (var icon in icons) {
g.append('use')
.attr({
'xlink:href': 'icons.svg#' + icon
});
}
g.style('visibility', 'hidden');
}
// ==============================
// View life-cycle callbacks
......@@ -1950,6 +1978,7 @@
setSize(svg, view);
loadGlyphs(svg);
preloadIcons(svg);
zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
setupZoomPan();
......@@ -2046,7 +2075,7 @@
width: config.birdDim,
height: config.birdDim,
fill: '#111'
})
});
}
function para(sel, text) {
......@@ -2161,7 +2190,9 @@
.translate(t);
bgImg = zoomPanContainer.insert("g", '#topo-G');
bgImg.attr('id', 'map').selectAll('path')
// pointer-events: none so that browser select tools don't pick up the map svg
bgImg.attr('id', 'map').attr('stroke-width', config.map.strokeWidth + 'px').style('pointer-events', 'none')
.selectAll('path')
.data(topoData.features)
.enter()
.append('path')
......
.theme_dark #topo {
background-color: #20201D;
}
.theme_dark #topo #map {
stroke: #444;
}
/* note: device is offline without the 'online' class */
.theme_dark #topo svg .node.device {
fill: #777;
}
.theme_dark #topo .host {
fill: #000;
color: white;
}
.theme_dark #topo svg .node.device.switch.online {
fill: #000;
}
.theme_dark #topo svg .node.device.roadm.online {
fill: #03c;
}
/* note: device is offline without the 'online' class */
.theme_dark #topo svg .node.device text {
fill: #aaa;
}
.theme_dark #topo svg .node.device.online {
color: white;
}
.theme_dark #topo svg .node.device.online text {
fill: currentColor;
}
.theme_dark #topo svg .glyph {
fill: white;
}
.theme_dark #topo-oibox .onosInst {
color: #444;
background-color: #ccc;
border-color: #aaa;
}
.theme_dark #topo-oibox .onosInst.online {
color: #113;
background-color: #bbf;
border-color: #555;
}
.theme_dark #topo-oibox .onosInst .onosTitle {
color: #888;
}
.theme_dark #topo svg .node.device.fixed.online rect {
stroke: #666;
}
.theme_dark #topo svg .node.host {
stroke: #000;
}
.theme_dark #topo-detail .actionBtn {
border-color: #ddf;
color: #99f;
}
.theme_dark #topo-detail .actionBtn:hover {
border-color: #ddf;
background: #eef;
color: #77d;
}
.theme_dark #topo svg .link.primary {
stroke: #f11;
}
.theme_dark #topo svg .link.secondary {
stroke: rgba(255,100,100,0.5);
}
.theme_dark #topo svg .link.animated {
stroke: #f11;
}
.theme_dark #topo svg .link.primary.optical {
stroke: #74f;
}
.theme_dark #topo svg .link.secondary.optical {
stroke: rgba(128,64,255,0.5);
}
.theme_dark #topo svg .link.animated.optical {
stroke: #74f;
}
/*.theme_dark #topo .link {
stroke: #666;
}
*/