diff --git a/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.css b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.css
new file mode 100644
index 0000000..cbf460f
--- /dev/null
+++ b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.css
@@ -0,0 +1,2 @@
+/* css for sample app topology overlay  */
+
diff --git a/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.html b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.html
new file mode 100644
index 0000000..9141975
--- /dev/null
+++ b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.html
@@ -0,0 +1,4 @@
+<!-- partial HTML -->
+<div id="ov-pp-topov">
+    <p>This is a hidden view .. just a placeholder to house the javascript</p>
+</div>
diff --git a/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.js b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.js
new file mode 100644
index 0000000..523142e
--- /dev/null
+++ b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopov.js
@@ -0,0 +1,103 @@
+/*
+ * 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.
+ */
+
+/*
+ Sample Demo module. This contains the "business logic" for the topology
+ overlay that we are implementing.
+ */
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, fs, flash, wss;
+
+    // constants
+    var srcMessage = 'ppTopovSetSrc',
+        dstMessage = 'ppTopovSetDst',
+        modeMessage = 'ppTopovSetMode',
+        nextPathMessage = 'ppTopovNextPath',
+        prevPathMessage = 'ppTopovPrevPath';
+
+    // internal state
+    var currentMode = null;
+
+
+    // === ---------------------------
+    // === Helper functions
+
+
+    // === ---------------------------
+    // === Main API functions
+
+
+    function setSrc(node) {
+        wss.sendEvent(srcMessage, {
+            id: node.id
+        });
+        flash.flash('Source node: ' + node.id);
+    }
+
+    function setDst(node) {
+        wss.sendEvent(dstMessage, {
+            id: node.id
+        });
+        flash.flash('Destination node: ' + node.id);
+    }
+
+    function nextPath(node) {
+        wss.sendEvent(nextPathMessage);
+    }
+
+    function prevPath(node) {
+        wss.sendEvent(prevPathMessage);
+    }
+
+
+    function setMode(mode) {
+        if (currentMode === mode) {
+            $log.debug('(in mode', mode, 'already)');
+        } else {
+            currentMode = mode;
+            wss.sendEvent(modeMessage, {
+                mode: mode
+            });
+            flash.flash('Path mode: ' + mode);
+        }
+    }
+
+    // === ---------------------------
+    // === Module Factory Definition
+
+    angular.module('ovPpTopov', [])
+        .factory('PathPainterTopovService',
+        ['$log', 'FnService', 'FlashService', 'WebSocketService',
+
+        function (_$log_, _fs_, _flash_, _wss_) {
+            $log = _$log_;
+            fs = _fs_;
+            flash = _flash_;
+            wss = _wss_;
+
+            return {
+                setSrc: setSrc,
+                setDst: setDst,
+                setMode: setMode,
+                nextPath: nextPath,
+                prevPath: prevPath
+            };
+        }]);
+}());
diff --git a/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopovOverlay.js b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopovOverlay.js
new file mode 100644
index 0000000..52f4f68
--- /dev/null
+++ b/apps/pathpainter/src/main/resources/app/view/ppTopov/ppTopovOverlay.js
@@ -0,0 +1,139 @@
+// path painter topology overlay - client side
+//
+// This is the glue that binds our business logic (in ppTopovDemo.js)
+// to the overlay framework.
+
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, tov, pps;
+
+    // internal state should be kept in the service module (not here)
+    var selection;
+
+    // our overlay definition
+    var overlay = {
+        // NOTE: this must match the ID defined in AppUiTopovOverlay
+        overlayId: 'pp-overlay',
+        // FIXME: new icon for the overlay
+        glyphId: '*star4',
+        tooltip: 'Path Painter Topo Overlay',
+
+        // These glyphs get installed using the overlayId as a prefix.
+        // e.g. 'star4' is installed as 'meowster-overlay-star4'
+        // They can be referenced (from this overlay) as '*star4'
+        // That is, the '*' prefix stands in for 'meowster-overlay-'
+        glyphs: {
+            star4: {
+                vb: '0 0 8 8',
+                d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
+            },
+            banner: {
+                vb: '0 0 6 6',
+                d: 'M1,1v4l2,-2l2,2v-4z'
+            }
+        },
+
+        activate: function () {
+            $log.debug("Path painter topology overlay ACTIVATED");
+        },
+        deactivate: function () {
+            $log.debug("Path painter topology overlay DEACTIVATED");
+        },
+
+        // detail panel button definitions
+        // FIXME: new icons for src/dst
+        buttons: {
+            src: {
+                gid: 'triangleUp',
+                tt: 'Set source node',
+                cb: function (data) {
+                    $log.debug('Set src action invoked with data:', data);
+                    pps.setSrc(selection);
+                }
+            },
+            dst: {
+                gid: 'triangleDown',
+                tt: 'Set destination node',
+                cb: function (data) {
+                    $log.debug('Set dst action invoked with data:', data);
+                    pps.setDst(selection);
+                }
+            }
+        },
+
+        // Key bindings for traffic overlay buttons
+        // NOTE: fully qual. button ID is derived from overlay-id and key-name
+        // FIXME: use into [ and ] instead of 1 and 2
+        // FIXME: new icons for src/dst
+        // TODO: add keys for shortest paths & disjoint paths modes
+        // TODO: add key for src/dst swap; with its own icon
+        keyBindings: {
+            1: {
+                cb: function () { pps.setSrc(selection); },
+                tt: 'Set source node',
+                gid: 'triangleUp'
+            },
+            2: {
+                cb: function () { pps.setDst(selection); },
+                tt: 'Set destination node',
+                gid: 'triangleDown'
+            },
+            leftArrow: {
+                cb: function () { pps.prevPath(); },
+                tt: 'Highlight previous path',
+                gid: 'prevIntent'
+            },
+            rightArrow: {
+                cb: function () { pps.nextPath(); },
+                tt: 'Highlight next path',
+                gid: 'nextIntent'
+            },
+
+            _keyOrder: [
+                '1', '2', 'leftArrow', 'rightArrow'
+            ]
+        },
+
+        hooks: {
+            // hook for handling escape key
+            // Must return true to consume ESC, false otherwise.
+            escape: function () {
+                selectionCallback();
+                pps.setSrc();
+                pps.setDst();
+            },
+
+            // hooks for when the selection changes...
+            empty: function () {
+                selectionCallback();
+            },
+            single: function (data) {
+                selectionCallback(data);
+            }
+        }
+    };
+
+
+    function buttonCallback(x) {
+        $log.debug('Toolbar-button callback', x);
+    }
+
+    function selectionCallback(d) {
+        $log.debug('Selection callback', d);
+        selection = d;
+    }
+
+    // invoke code to register with the overlay service
+    angular.module('ovPpTopov')
+        .run(['$log', 'TopoOverlayService', 'PathPainterTopovService',
+
+        function (_$log_, _tov_, _pps_) {
+            $log = _$log_;
+            tov = _tov_;
+            pps = _pps_;
+            tov.register(overlay);
+        }]);
+
+}());
diff --git a/apps/pathpainter/src/main/resources/ppTopov/css.html b/apps/pathpainter/src/main/resources/ppTopov/css.html
new file mode 100644
index 0000000..56b32b4
--- /dev/null
+++ b/apps/pathpainter/src/main/resources/ppTopov/css.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="app/view/ppTopov/ppTopov.css">
\ No newline at end of file
diff --git a/apps/pathpainter/src/main/resources/ppTopov/js.html b/apps/pathpainter/src/main/resources/ppTopov/js.html
new file mode 100644
index 0000000..24124bf
--- /dev/null
+++ b/apps/pathpainter/src/main/resources/ppTopov/js.html
@@ -0,0 +1,2 @@
+<script src="app/view/ppTopov/ppTopov.js"></script>
+<script src="app/view/ppTopov/ppTopovOverlay.js"></script>
\ No newline at end of file