GUI -- Finished icons test page. Displays all icons and glyphs using Angular constructs.
Change-Id: I65d9195eb5434a49e5d8e6fac7ce3205a72d22dd
diff --git a/web/gui/src/main/webapp/_bripc/show-icons-test.js b/web/gui/src/main/webapp/_bripc/show-icons-test.js
index f5f9e83..36bb53b 100644
--- a/web/gui/src/main/webapp/_bripc/show-icons-test.js
+++ b/web/gui/src/main/webapp/_bripc/show-icons-test.js
@@ -21,15 +21,75 @@
(function () {
'use strict';
+ // assuming the glyph is a square
+ // div is a D3 selection of the <DIV> element into which icon should load
+ // size is the size of the glyph
+ // id is the symbol id
+ // rer is the rectangle the glyph will be in's rounded corners
+ // svgClass is the class name for your glyph
+ function createGlyph(div, size, id, rer, svgClass) {
+ var dim = size || 20,
+ gid = id || 'unknown',
+ rx = rer || 4,
+ svgCls = svgClass || 'embeddedGlyph',
+ svg, g;
+
+ svg = div.append('svg').attr({
+ 'class': svgCls,
+ width: dim,
+ height: dim,
+ viewBox: '0 0 ' + dim + ' ' + dim
+ });
+
+ g = svg.append('g').attr({
+ 'class': 'glyph'
+ });
+
+ g.append('rect').attr({
+ width: dim,
+ height: dim,
+ rx: rx
+ });
+
+ g.append('use').attr({
+ width: dim,
+ height: dim,
+ 'class': 'glyph',
+ 'xlink:href': '#' + gid
+ });
+
+}
+
angular.module('showIconsTest', ['onosSvg'])
.controller('OvShowIconsTest', ['$log', 'GlyphService', 'IconService',
function ($log, gs, icns) {
var self = this;
- self.a = 1;
- self.b = 2;
- self.message = "Hi";
+ gs.init();
+
+ var div = d3.select('#showIcons');
+
+ // show device online and offline icons
+ icns.loadEmbeddedIcon(div, 'deviceOnline', 50);
+ div.append('br');
+ icns.loadEmbeddedIcon(div, 'deviceOffline', 50);
+
+ var defs = d3.select('defs');
+
+ // show all glyphs in glyph library
+ gs.loadDefs(defs, null, true);
+ var list = gs.ids(),
+ gDiv = d3.select('#showGlyphs'),
+ ctr = 0;
+ list.forEach(function (id) {
+ createGlyph(gDiv, 50, id);
+ ctr += 1;
+ if(ctr/3 > 1) {
+ ctr = 0;
+ gDiv.append('p');
+ }
+ });
$log.log('OvShowIconsTest has been created');
}]);
diff --git a/web/gui/src/main/webapp/_bripc/show-icons.html b/web/gui/src/main/webapp/_bripc/show-icons.html
index 9ea102f..15759ed 100644
--- a/web/gui/src/main/webapp/_bripc/show-icons.html
+++ b/web/gui/src/main/webapp/_bripc/show-icons.html
@@ -28,17 +28,24 @@
<script type="text/javascript" src="../tp/angular-route.js"></script>
<script type="text/javascript" src="../tp/d3.js"></script>
+ <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../app/fw/util/util.js"></script>
<script type="text/javascript" src="../app/fw/util/fn.js"></script>
<script type="text/javascript" src="../app/fw/util/theme.js"></script>
<script type="text/javascript" src="../app/fw/util/keys.js"></script>
+
<script type="text/javascript" src="../app/fw/svg/svg.js"></script>
<script type="text/javascript" src="../app/fw/svg/glyph.js"></script>
<script type="text/javascript" src="../app/fw/svg/icon.js"></script>
+ <script type="text/javascript" src="../app/fw/svg/geodata.js"></script>
+ <script type="text/javascript" src="../app/fw/svg/map.js"></script>
+ <script type="text/javascript" src="../app/fw/svg/zoom.js"></script>
+
<script type="text/javascript" src="show-icons-test.js"></script>
<link rel="stylesheet" href="../app/common.css">
+ <link rel="stylesheet" href="../app/fw/svg/icon.css">
<style>
html,
@@ -51,15 +58,31 @@
h2 {
color: darkred;
}
+
+ svg .glyph {
+ stroke: none;
+ fill: #123456;
+ fill-rule: evenodd;
+ }
+
+ svg.embeddedGlyph .glyph rect {
+ fill: #fff
+ }
+
</style>
</head>
<!-- outline for using a controller in Angular -->
-<body class="light" ng-app="showIconsTest">
- <h2>Showing Icons with Icon Service Angular</h2>
- <div id="show-icons" ng-controller="OvShowIconsTest as ctrl">
- <!--{{message}}-->
- <p>{{ctrl.a}} + {{ctrl.b}} = {{ctrl.a+ctrl.b}}</p>
+<body class="light" ng-app="showIconsTest" ng-controller="OvShowIconsTest as ctrl">
+ <h2>Displaying Icons and Glyphs with Angular</h2>
+ <div id="showIcons">
+ <p>Show all icons in icon library:<br></p>
+ </div>
+ <hr>
+ <div id="showGlyphs">
+ <p>Show all glyphs in glyph library:</p>
+ <p>(Displays checkMark and xMark too, because icons are built on top
+ of glyphs.)</p>
</div>
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index 5187d52..dc6c96e 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -23,6 +23,14 @@
font-size: 10pt;
}
+/* TODO: uncomment following lines for scrollable table */
+/* Possible CSS style for creating a scrollable table */
+/*table.summary-list tbody {*/
+ /*height: 100px;*/
+ /*overflow: auto;*/
+ /*display: block;*/
+/*}*/
+
table.summary-list th {
padding: 5px;
}
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index a6fd640..714d44a 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -1,8 +1,9 @@
<!-- Device partial HTML -->
<div id="ov-device">
<h2>Device View</h2>
-
+<!-- TODO: uncomment and test the thead and tbody tags for CSS styling -->
<table class="summary-list">
+ <!-- <thead> -->
<tr>
<th></th>
<th>ID</th>
@@ -10,6 +11,9 @@
<th>Hardware Version</th>
<th>Software Version</th>
</tr>
+ <!-- </thead> -->
+
+ <!-- <tbody> -->
<tr ng-repeat="dev in ctrl.deviceData">
<td><div icon icon-id="{{dev._iconid_available}}"></div></td>
<td>{{dev.id}}</td>
@@ -18,6 +22,7 @@
<td>{{dev.sw}}</td>
<!-- add more property fields for table from device data -->
</tr>
+ <!-- </tbody> -->
</table>
</div>