홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
94a856e7 1 parent 64b60cd3

GUI -- Added new icons to glyphs library. 

- Edited glyph-spec and icon-spec to test the changes.

Change-Id: I23472b7f6699a46da1728c49a9d72f826244c739
Inline Side-by-side
Showing 4 changed files with 180 additions and 6 deletions
<!DOCTYPE html>
<!--
~ Copyright 2015 Open Networking Laboratory
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!--
ONOS -- Embedded checkmarks and xmarks in table page
@author Bri Prebilic Cole
-->
<html>
<head>
<meta charset="utf-8">
<title>Embedded Check and X Marks</title>
<script src="../tp/d3.js"></script>
<link rel="stylesheet" href="../app/common.css">
<style>
html,
body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
svg .icon .glyph {
stroke: none;
fill: white;
fill-rule: evenodd;
}
svg .icon.deviceOnline {
fill: green;
}
svg .icon.deviceOffline {
fill: darkred;
}
svg .icon rect {
stroke: white;
stroke-width: 3px;
}
</style>
</head>
<body class="light">
<!-- minimal framework to access glyphs library module -->
<script>
var libs = {};
var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
</script>
<!-- Test HTML -->
<div>
<table class="summary-list">
<tr> <th></th> <th>Two</th> <th>Three</th> </tr>
<tr>
<td>
<div icon icon-id="deviceOnline">
<!-- icon directive needs to inject the following structure -->
<!-- ------------------------------------------------ -->
<svg width="20" height="20" viewBox="0 0 50 50">
<g class="icon deviceOnline">
<rect width="50" height="50" rx="10"></rect>
<use class="glyph" xlink:href="#checkmark" width="50" height="50"></use>
</g>
</svg>
<!-- ------------------------------------------------ -->
</div>
</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>
<div icon icon-id="deviceOffline">
<!-- icon directive needs to inject the following structure -->
<!-- ------------------------------------------------ -->
<svg width="20" height="20" viewBox="0 0 50 50">
<g class="icon deviceOffline">
<rect width="50" height="50" rx="10"></rect>
<use class="glyph" xlink:href="#xmark" width="50" height="50"></use>
</g>
</svg>
<!-- ------------------------------------------------ -->
</div>
</td>
<td>Some text</td>
<td>Some Other text</td>
</tr>
</table>
</div>
<!-- common definitions for other SVG elements to use -->
<svg width="0" height="0">
<defs>
<symbol id="checkmark" viewBox="0 0 10 10">
<path d="M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047,1.797c0,0,
2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094
c0,0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413,0.461-1.194,
0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z">
</path>
</symbol>
<symbol id="xmark" viewBox="0 0 10 10">
<path d="M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463,
0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067
C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386,3.371C4.865,
2.544,4.541,1.918,4.541,1.918
S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349,1.122,
0.834,2.082,1.368,2.898
C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869,8.315,
0.917,9.556,2.4,9.067
C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498,1.949s0.535,
0.51,1.386-0.244
C9.819,7.902,8.967,7.196,8.967,7.196z">
</path>
</symbol>
</defs>
</svg>
</body>
</html>
......@@ -18,6 +18,7 @@
ONOS GUI -- SVG -- Glyph Service
@author Simon Hunt
@author Bri Prebilic Cole
*/
(function () {
'use strict';
......@@ -116,7 +117,24 @@
uiAttached: "M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3" +
"a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1," +
".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
"a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z"
"a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z",
checkMark: "M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047," +
"1.797c0,0,2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094c0," +
"0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413," +
"0.461-1.194,0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z",
xMark: "M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463," +
"0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067" +
"C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386," +
"3.371C4.865,2.544,4.541,1.918,4.541,1.918" +
"S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349," +
"1.122,0.834,2.082,1.368,2.898" +
"C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869," +
"8.315,0.917,9.556,2.4,9.067" +
"C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498," +
"1.949s0.535,0.51,1.386-0.244" +
"C9.819,7.902,8.967,7.196,8.967,7.196z"
};
// ----------------------------------------------------------------------
......
......@@ -18,6 +18,7 @@
ONOS GUI -- SVG -- Icon Service
@author Simon Hunt
@author Bri Prebilic Cole
*/
(function () {
'use strict';
......@@ -31,10 +32,8 @@
// maps icon id to the glyph id it uses.
// note: icon id maps to a CSS class for styling that icon
var glyphMapping = {
deviceOnline: 'crown',
deviceOffline: 'chain'
//deviceOnline: 'checkMark',
//deviceOffline: 'xMark'
deviceOnline: 'checkMark',
deviceOffline: 'xMark'
};
function ensureIconLibDefs() {
......
......@@ -22,7 +22,7 @@
describe('factory: fw/svg/glyph.js', function() {
var $log, fs, gs, d3Elem;
var numBaseGlyphs = 11,
var numBaseGlyphs = 13,
vbBird = '352 224 113 112',
vbGlyph = '0 0 110 110',
vbBadge = '0 0 10 10',
......@@ -38,6 +38,8 @@ describe('factory: fw/svg/glyph.js', function() {
chain: 'M60.4,77.6c-',
crown: 'M99.5,21.6c0,',
uiAttached: 'M2,2.5a.5,.5',
checkMark: 'M2.644,4.531c0',
xMark: 'M8.967,7.196C8.172',
// our test ones..
triangle: 'M.5,.2',
......@@ -140,6 +142,14 @@ describe('factory: fw/svg/glyph.js', function() {
gs.init();
verifyGlyphLoadedInCache('uiAttached', vbBadge);
});
it('should load the checkMark glyph', function() {
gs.init();
verifyGlyphLoadedInCache('checkMark', vbBadge);
});
it('should load the xMark glyph', function() {
gs.init();
verifyGlyphLoadedInCache('xMark', vbBadge);
});
// define some glyphs that we want to install
......