1*4a64e381SAndroid Build Coastguard Worker<!DOCTYPE html> 2*4a64e381SAndroid Build Coastguard Worker<!-- 3*4a64e381SAndroid Build Coastguard Worker Copyright 2017 Openthread authors. All rights reserved. 4*4a64e381SAndroid Build Coastguard Worker 5*4a64e381SAndroid Build Coastguard Worker Redistribution and use in source and binary forms, with or without 6*4a64e381SAndroid Build Coastguard Worker modification, are permitted provided that the following conditions are met: 7*4a64e381SAndroid Build Coastguard Worker 1. Redistributions of source code must retain the above copyright 8*4a64e381SAndroid Build Coastguard Worker notice, this list of conditions and the following disclaimer. 9*4a64e381SAndroid Build Coastguard Worker 2. Redistributions in binary form must reproduce the above copyright 10*4a64e381SAndroid Build Coastguard Worker notice, this list of conditions and the following disclaimer in the 11*4a64e381SAndroid Build Coastguard Worker documentation and/or other materials provided with the distribution. 12*4a64e381SAndroid Build Coastguard Worker 3. Neither the name of the copyright holder nor the 13*4a64e381SAndroid Build Coastguard Worker names of its contributors may be used to endorse or promote products 14*4a64e381SAndroid Build Coastguard Worker derived from this software without specific prior written permission. 15*4a64e381SAndroid Build Coastguard Worker 16*4a64e381SAndroid Build Coastguard Worker THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 17*4a64e381SAndroid Build Coastguard Worker AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 18*4a64e381SAndroid Build Coastguard Worker IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 19*4a64e381SAndroid Build Coastguard Worker ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE 20*4a64e381SAndroid Build Coastguard Worker LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 21*4a64e381SAndroid Build Coastguard Worker CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 22*4a64e381SAndroid Build Coastguard Worker SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 23*4a64e381SAndroid Build Coastguard Worker INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 24*4a64e381SAndroid Build Coastguard Worker CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 25*4a64e381SAndroid Build Coastguard Worker ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 26*4a64e381SAndroid Build Coastguard Worker POSSIBILITY OF SUCH DAMAGE. 27*4a64e381SAndroid Build Coastguard Worker--> 28*4a64e381SAndroid Build Coastguard Worker<html lang="en" ng-app="StarterApp"> 29*4a64e381SAndroid Build Coastguard Worker 30*4a64e381SAndroid Build Coastguard Worker<head> 31*4a64e381SAndroid Build Coastguard Worker <meta charset="utf-8"> 32*4a64e381SAndroid Build Coastguard Worker <meta http-equiv="X-UA-Compatible" content="IE=edge"> 33*4a64e381SAndroid Build Coastguard Worker <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> 34*4a64e381SAndroid Build Coastguard Worker <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> 35*4a64e381SAndroid Build Coastguard Worker <title>OpenThread Border Router</title> 36*4a64e381SAndroid Build Coastguard Worker 37*4a64e381SAndroid Build Coastguard Worker <!-- Add to homescreen for Chrome on Android --> 38*4a64e381SAndroid Build Coastguard Worker <meta name="mobile-web-app-capable" content="yes"> 39*4a64e381SAndroid Build Coastguard Worker <link rel="icon" sizes="192x192" href="res/img/android-desktop.png"> 40*4a64e381SAndroid Build Coastguard Worker <link rel="stylesheet" href="res/css/angular-material.min.css"> 41*4a64e381SAndroid Build Coastguard Worker 42*4a64e381SAndroid Build Coastguard Worker <!-- Add to homescreen for Safari on iOS --> 43*4a64e381SAndroid Build Coastguard Worker <meta name="apple-mobile-web-app-capable" content="yes"> 44*4a64e381SAndroid Build Coastguard Worker <meta name="apple-mobile-web-app-status-bar-style" content="black"> 45*4a64e381SAndroid Build Coastguard Worker <meta name="apple-mobile-web-app-title" content="Material Design Lite"> 46*4a64e381SAndroid Build Coastguard Worker <link rel="apple-touch-icon-precomposed" href="res/img/ios-desktop.png"> 47*4a64e381SAndroid Build Coastguard Worker 48*4a64e381SAndroid Build Coastguard Worker <!-- Tile icon for Win8 (144x144 + tile color) --> 49*4a64e381SAndroid Build Coastguard Worker <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> 50*4a64e381SAndroid Build Coastguard Worker <meta name="msapplication-TileColor" content="#3372DF"> 51*4a64e381SAndroid Build Coastguard Worker 52*4a64e381SAndroid Build Coastguard Worker <link rel="shortcut icon" href="res/img/favicon.png"> 53*4a64e381SAndroid Build Coastguard Worker 54*4a64e381SAndroid Build Coastguard Worker <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --> 55*4a64e381SAndroid Build Coastguard Worker <!-- 56*4a64e381SAndroid Build Coastguard Worker <link rel="canonical" href="http://www.example.com/"> 57*4a64e381SAndroid Build Coastguard Worker --> 58*4a64e381SAndroid Build Coastguard Worker <link rel="stylesheet" href="res/css/material.min.css"> 59*4a64e381SAndroid Build Coastguard Worker <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> --> 60*4a64e381SAndroid Build Coastguard Worker <link rel="stylesheet" href="res/css/styles.css"> 61*4a64e381SAndroid Build Coastguard Worker <style> 62*4a64e381SAndroid Build Coastguard Worker #view-source { 63*4a64e381SAndroid Build Coastguard Worker position: fixed; 64*4a64e381SAndroid Build Coastguard Worker display: block; 65*4a64e381SAndroid Build Coastguard Worker right: 0; 66*4a64e381SAndroid Build Coastguard Worker bottom: 0; 67*4a64e381SAndroid Build Coastguard Worker margin-right: 40px; 68*4a64e381SAndroid Build Coastguard Worker margin-bottom: 40px; 69*4a64e381SAndroid Build Coastguard Worker z-index: 900; 70*4a64e381SAndroid Build Coastguard Worker } 71*4a64e381SAndroid Build Coastguard Worker </style> 72*4a64e381SAndroid Build Coastguard Worker</head> 73*4a64e381SAndroid Build Coastguard Worker 74*4a64e381SAndroid Build Coastguard Worker<body ng-controller="AppCtrl"> 75*4a64e381SAndroid Build Coastguard Worker <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 76*4a64e381SAndroid Build Coastguard Worker <header class="demo-header mdl-layout__header mdl-color--indego-900 mdl-color-text---600"> 77*4a64e381SAndroid Build Coastguard Worker <div class="mdl-layout__header-row"> 78*4a64e381SAndroid Build Coastguard Worker <span class="mdl-layout-title">{{headerTitle}}</span> 79*4a64e381SAndroid Build Coastguard Worker <div class="mdl-layout-spacer"></div> 80*4a64e381SAndroid Build Coastguard Worker <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> 81*4a64e381SAndroid Build Coastguard Worker 82*4a64e381SAndroid Build Coastguard Worker </div> 83*4a64e381SAndroid Build Coastguard Worker </div> 84*4a64e381SAndroid Build Coastguard Worker </header> 85*4a64e381SAndroid Build Coastguard Worker <div class="demo-drawer mdl-layout__drawer mdl-color--cyan-600 mdl-color-text--blue-grey-50"> 86*4a64e381SAndroid Build Coastguard Worker <header class="demo-drawer-header"> 87*4a64e381SAndroid Build Coastguard Worker 88*4a64e381SAndroid Build Coastguard Worker <h4 style="margin: 18px 12px 12px 24px">OT Border Router</h4> 89*4a64e381SAndroid Build Coastguard Worker </header> 90*4a64e381SAndroid Build Coastguard Worker <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800"> 91*4a64e381SAndroid Build Coastguard Worker <md-list flex> 92*4a64e381SAndroid Build Coastguard Worker <md-list-item md-ink-ripple class="mdl-navigation__link" ng-repeat="item in menu" ng-click="showPanels($index)" layout="row"> 93*4a64e381SAndroid Build Coastguard Worker <div><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">{{item.icon}}</i>{{item.title}} 94*4a64e381SAndroid Build Coastguard Worker </div> 95*4a64e381SAndroid Build Coastguard Worker </md-list-item> 96*4a64e381SAndroid Build Coastguard Worker </md-list> 97*4a64e381SAndroid Build Coastguard Worker <div class="mdl-layout-spacer"></div> 98*4a64e381SAndroid Build Coastguard Worker </nav> 99*4a64e381SAndroid Build Coastguard Worker </div> 100*4a64e381SAndroid Build Coastguard Worker <main class="mdl-layout__content mdl-color--grey-100"> 101*4a64e381SAndroid Build Coastguard Worker <div class="mdl-grid demo-content"> 102*4a64e381SAndroid Build Coastguard Worker 103*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid" ng-show="menu[0].show"> 104*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid"> 105*4a64e381SAndroid Build Coastguard Worker <img src="res/img/openthread_logo.png" height="100%" , width="100%"> 106*4a64e381SAndroid Build Coastguard Worker </div> 107*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-grid"> 108*4a64e381SAndroid Build Coastguard Worker <h1>What is OpenThread?</h1> 109*4a64e381SAndroid Build Coastguard Worker <p><strong>...an open-source implementation of the Thread networking protocol.</strong>Nest has released OpenThread to make the technology used in Nest products more broadly available to developers to accelerate the development of products for the connected home.</p> 110*4a64e381SAndroid Build Coastguard Worker <p><strong>...OS and platform agnostic</strong>, with a narrow platform abstraction layer and a small memory footprint, making it highly portable.</p> 111*4a64e381SAndroid Build Coastguard Worker <p><strong>...a Thread Certified Component </strong>implementing all features defined in the Thread 1.1.1 specification. This specification defines an IPv6-based reliable, secure and low-power wireless device-to-device communication protocol for home applications.</p> 112*4a64e381SAndroid Build Coastguard Worker </div> 113*4a64e381SAndroid Build Coastguard Worker 114*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-grid"> 115*4a64e381SAndroid Build Coastguard Worker <h4>What is OpenThread Border Router?</h4> 116*4a64e381SAndroid Build Coastguard Worker <p>In the context of a Thread Network, a Border Router is a device that provides connectivity of nodes in the Thread Network to other devices in external networks such as the wider Internet, local home and building IP networks, or virtual private networks (Figure 1).</p> 117*4a64e381SAndroid Build Coastguard Worker <img src="res/img/borderrouter.png" height="100%" , width="100%"> 118*4a64e381SAndroid Build Coastguard Worker </div> 119*4a64e381SAndroid Build Coastguard Worker </div> 120*4a64e381SAndroid Build Coastguard Worker 121*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-shadow--2dp mdl-grid" ng-show="menu[1].show"> 122*4a64e381SAndroid Build Coastguard Worker <h4>Available Thread Networks</h4> 123*4a64e381SAndroid Build Coastguard Worker <div class="mdl-cell--12-col"> 124*4a64e381SAndroid Build Coastguard Worker <table class="mdl-data-table mdl-js-data-table" cellspacing="0" width="100%" ng-show="!isLoading"> 125*4a64e381SAndroid Build Coastguard Worker <thead> 126*4a64e381SAndroid Build Coastguard Worker <tr> 127*4a64e381SAndroid Build Coastguard Worker <th class="mdl-data-table__cell--non-numeric">No.</th> 128*4a64e381SAndroid Build Coastguard Worker <th>Network Name</th> 129*4a64e381SAndroid Build Coastguard Worker <th>Extended PAN ID</th> 130*4a64e381SAndroid Build Coastguard Worker <th>PAN ID</th> 131*4a64e381SAndroid Build Coastguard Worker <th>channel</th> 132*4a64e381SAndroid Build Coastguard Worker <th>Hardware Address</th> 133*4a64e381SAndroid Build Coastguard Worker <th>Action</th> 134*4a64e381SAndroid Build Coastguard Worker 135*4a64e381SAndroid Build Coastguard Worker </tr> 136*4a64e381SAndroid Build Coastguard Worker </thead> 137*4a64e381SAndroid Build Coastguard Worker <tbody> 138*4a64e381SAndroid Build Coastguard Worker <tr ng-repeat="item in networksInfo track by $index"> 139*4a64e381SAndroid Build Coastguard Worker <td>{{$index}}</td> 140*4a64e381SAndroid Build Coastguard Worker <td>{{item.nn}}</td> 141*4a64e381SAndroid Build Coastguard Worker <td>{{item.xp}}</td> 142*4a64e381SAndroid Build Coastguard Worker <td>{{item.pi}}</td> 143*4a64e381SAndroid Build Coastguard Worker <td>{{item.ch}}</td> 144*4a64e381SAndroid Build Coastguard Worker <td>{{item.ha}}</td> 145*4a64e381SAndroid Build Coastguard Worker <td> 146*4a64e381SAndroid Build Coastguard Worker <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button show-modal" ng-click="showJoinDialog($event, $index, item)">Join</button> 147*4a64e381SAndroid Build Coastguard Worker </td> 148*4a64e381SAndroid Build Coastguard Worker </tr> 149*4a64e381SAndroid Build Coastguard Worker </tbody> 150*4a64e381SAndroid Build Coastguard Worker </table> 151*4a64e381SAndroid Build Coastguard Worker </div> 152*4a64e381SAndroid Build Coastguard Worker </div> 153*4a64e381SAndroid Build Coastguard Worker <div class="mdl-cell--12-col" style="margin-top: 50px" ng-show="isLoading&&menu[1].show" layout="row" layout-align="center center" ng-show="menu[1].show"> 154*4a64e381SAndroid Build Coastguard Worker <md-progress-circular md-mode="indeterminate" md-diameter="100"></md-progress-circular> 155*4a64e381SAndroid Build Coastguard Worker </div> 156*4a64e381SAndroid Build Coastguard Worker 157*4a64e381SAndroid Build Coastguard Worker <div layout="column" class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-shadow--2dp mdl-grid" ng-cloak ng-show="menu[2].show"> 158*4a64e381SAndroid Build Coastguard Worker <h4>Form Thread Networks</h4> 159*4a64e381SAndroid Build Coastguard Worker <md-progress-linear md-mode="indeterminate" ng-show="menu[2].show&&isForming"></md-progress-linear> 160*4a64e381SAndroid Build Coastguard Worker <md-content layout-padding flex="100"> 161*4a64e381SAndroid Build Coastguard Worker <form name="threadForm"> 162*4a64e381SAndroid Build Coastguard Worker <div layout="row"> 163*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="50"> 164*4a64e381SAndroid Build Coastguard Worker <label>Network Name</label> 165*4a64e381SAndroid Build Coastguard Worker <input required md-maxlength="16" name="networkName" ng-model="thread.networkName"> 166*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.networkName.$error"> 167*4a64e381SAndroid Build Coastguard Worker <div ng-message="required">This is required.</div> 168*4a64e381SAndroid Build Coastguard Worker <div ng-message="md-maxlength">The Network Name must be no more than 16 characters long.</div> 169*4a64e381SAndroid Build Coastguard Worker </div> 170*4a64e381SAndroid Build Coastguard Worker </md-input-container> 171*4a64e381SAndroid Build Coastguard Worker 172*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="50"> 173*4a64e381SAndroid Build Coastguard Worker <label>Network Extended PAN ID</label> 174*4a64e381SAndroid Build Coastguard Worker <input required maxlength="16" minlength="16" ng-pattern="/^[0-9a-fA-F]{16}$/" name="extPanId" ng-model="thread.extPanId"> 175*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.extPanId.$error"> 176*4a64e381SAndroid Build Coastguard Worker <div ng-message="required">This is required.</div> 177*4a64e381SAndroid Build Coastguard Worker <div ng-message-exp="['maxlength', 'minlength', 'pattern']">The Extended PAN ID must be 16 characters long.</div> 178*4a64e381SAndroid Build Coastguard Worker </div> 179*4a64e381SAndroid Build Coastguard Worker </md-input-container> 180*4a64e381SAndroid Build Coastguard Worker </div> 181*4a64e381SAndroid Build Coastguard Worker 182*4a64e381SAndroid Build Coastguard Worker <div layout="row"> 183*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="50"> 184*4a64e381SAndroid Build Coastguard Worker <label>PAN ID</label> 185*4a64e381SAndroid Build Coastguard Worker <input required name="panId" ng-model="thread.panId" ng-pattern="/^0x[0-9a-fA-F]{4}$/"> 186*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.panId.$error"> 187*4a64e381SAndroid Build Coastguard Worker <div ng-message="required">This is required.</div> 188*4a64e381SAndroid Build Coastguard Worker <div ng-message-exp="['pattern']">The PAN ID must be 4 hexadecimal digits long.</div> 189*4a64e381SAndroid Build Coastguard Worker </div> 190*4a64e381SAndroid Build Coastguard Worker </md-input-container> 191*4a64e381SAndroid Build Coastguard Worker 192*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="50"> 193*4a64e381SAndroid Build Coastguard Worker <label>Passphrase/Commissioner Credential</label> 194*4a64e381SAndroid Build Coastguard Worker <input required name="passphrase" ng-minlength="6" maxlength="255" ng-model="thread.passphrase"> 195*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.passphrase.$error"> 196*4a64e381SAndroid Build Coastguard Worker <div ng-message="required">This is required.</div> 197*4a64e381SAndroid Build Coastguard Worker <div ng-message="minlength">The Passphrase must be a string between 6 and 255 characters.</div> 198*4a64e381SAndroid Build Coastguard Worker </div> 199*4a64e381SAndroid Build Coastguard Worker </md-input-container> 200*4a64e381SAndroid Build Coastguard Worker </div> 201*4a64e381SAndroid Build Coastguard Worker 202*4a64e381SAndroid Build Coastguard Worker <div layout="row"> 203*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="50"> 204*4a64e381SAndroid Build Coastguard Worker <label>Network Key</label> 205*4a64e381SAndroid Build Coastguard Worker <input required minlength="32" maxlength="32" ng-pattern="/^[0-9a-fA-F]{32}$/" name="networkKey" ng-model="thread.networkKey"> 206*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.NetworkKey.$error"> 207*4a64e381SAndroid Build Coastguard Worker <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 208*4a64e381SAndroid Build Coastguard Worker Network Key must be 32 hexadecimal digits long. 209*4a64e381SAndroid Build Coastguard Worker </div> 210*4a64e381SAndroid Build Coastguard Worker </div> 211*4a64e381SAndroid Build Coastguard Worker </md-input-container> 212*4a64e381SAndroid Build Coastguard Worker 213*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="50"> 214*4a64e381SAndroid Build Coastguard Worker <label>Channel</label> 215*4a64e381SAndroid Build Coastguard Worker <input required name="channel" type="number" min="11" max="26" ng-model="thread.channel"> 216*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.channel.$error"> 217*4a64e381SAndroid Build Coastguard Worker <div ng-message-exp="['required', 'min', 'max']">Channel must be in 11~26.</div> 218*4a64e381SAndroid Build Coastguard Worker </div> 219*4a64e381SAndroid Build Coastguard Worker </md-input-container> 220*4a64e381SAndroid Build Coastguard Worker </div> 221*4a64e381SAndroid Build Coastguard Worker 222*4a64e381SAndroid Build Coastguard Worker <div layout="row"> 223*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="100"> 224*4a64e381SAndroid Build Coastguard Worker <label>On-Mesh Prefix</label> 225*4a64e381SAndroid Build Coastguard Worker <input required name="prefix" ng-model="thread.prefix" ng-pattern="/^(?!(::1?)(/\d*)?$)(?!([fF][eE]80:|[fF]{2}[0-9a-fA-F][0-9a-fA-F]:))(\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*)(/(1([01][0-9]|2[0-8]))|/([0-9][0-9]?))?$/"> 226*4a64e381SAndroid Build Coastguard Worker <div ng-messages="threadForm.prefix.$error"> 227*4a64e381SAndroid Build Coastguard Worker <div ng-message-exp="['required', 'pattern']"> 228*4a64e381SAndroid Build Coastguard Worker On-Mesh Prefix must match valid IPv6 prefix pattern. 229*4a64e381SAndroid Build Coastguard Worker </div> 230*4a64e381SAndroid Build Coastguard Worker </div> 231*4a64e381SAndroid Build Coastguard Worker </md-input-container> 232*4a64e381SAndroid Build Coastguard Worker </div> 233*4a64e381SAndroid Build Coastguard Worker 234*4a64e381SAndroid Build Coastguard Worker <md-input-container class="md-block"> 235*4a64e381SAndroid Build Coastguard Worker <md-checkbox name="defaultRoute" ng-model="thread.defaultRoute" required> 236*4a64e381SAndroid Build Coastguard Worker Default Route 237*4a64e381SAndroid Build Coastguard Worker </md-checkbox> 238*4a64e381SAndroid Build Coastguard Worker </md-input-container> 239*4a64e381SAndroid Build Coastguard Worker <div> 240*4a64e381SAndroid Build Coastguard Worker <md-button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" ng-click="showConfirm($event, (threadForm.networkName.$valid && threadForm.extPanId.$valid && 241*4a64e381SAndroid Build Coastguard Worker threadForm.panId.$valid && threadForm.passphrase.$valid && threadForm.networkKey.$valid && 242*4a64e381SAndroid Build Coastguard Worker threadForm.channel.$valid && threadForm.prefix.$valid))">Form</md-button> 243*4a64e381SAndroid Build Coastguard Worker </div> 244*4a64e381SAndroid Build Coastguard Worker </form> 245*4a64e381SAndroid Build Coastguard Worker </md-content> 246*4a64e381SAndroid Build Coastguard Worker </div> 247*4a64e381SAndroid Build Coastguard Worker 248*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-shadow--2dp mdl-grid" ng-show="menu[3].show"> 249*4a64e381SAndroid Build Coastguard Worker <h4>Get Status</h4> 250*4a64e381SAndroid Build Coastguard Worker <md-list class="md-dense" flex=100> 251*4a64e381SAndroid Build Coastguard Worker <md-list-item class="md-3-line" ng-repeat="item in status"> 252*4a64e381SAndroid Build Coastguard Worker <img ng-src="{{item.icon}}" class="md-avatar" alt="" /> 253*4a64e381SAndroid Build Coastguard Worker <div class="md-list-item-text" layout="column"> 254*4a64e381SAndroid Build Coastguard Worker <h3>{{ item.name }}</h3> 255*4a64e381SAndroid Build Coastguard Worker <h4>{{ item.value }}</h4> 256*4a64e381SAndroid Build Coastguard Worker </div> 257*4a64e381SAndroid Build Coastguard Worker <md-divider></md-divider> 258*4a64e381SAndroid Build Coastguard Worker </md-list-item> 259*4a64e381SAndroid Build Coastguard Worker </md-list> 260*4a64e381SAndroid Build Coastguard Worker </div> 261*4a64e381SAndroid Build Coastguard Worker 262*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-shadow--2dp mdl-grid" ng-show="menu[4].show"> 263*4a64e381SAndroid Build Coastguard Worker <h4>Settings</h4> 264*4a64e381SAndroid Build Coastguard Worker <md-content layout-padding flex="100"> 265*4a64e381SAndroid Build Coastguard Worker <form name="settingForm"> 266*4a64e381SAndroid Build Coastguard Worker <div layout="row"> 267*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="100"> 268*4a64e381SAndroid Build Coastguard Worker <label>On-Mesh Prefix</label> 269*4a64e381SAndroid Build Coastguard Worker <input required name="prefix" ng-model="setting.prefix"> 270*4a64e381SAndroid Build Coastguard Worker <div ng-messages="settingForm.prefix.$error"> 271*4a64e381SAndroid Build Coastguard Worker <div ng-message="required">This is required.</div> 272*4a64e381SAndroid Build Coastguard Worker </div> 273*4a64e381SAndroid Build Coastguard Worker </md-input-container> 274*4a64e381SAndroid Build Coastguard Worker </div> 275*4a64e381SAndroid Build Coastguard Worker 276*4a64e381SAndroid Build Coastguard Worker <md-input-container class="md-block"> 277*4a64e381SAndroid Build Coastguard Worker <md-checkbox name="defaultRoute" ng-model="setting.defaultRoute" required> 278*4a64e381SAndroid Build Coastguard Worker Default Route 279*4a64e381SAndroid Build Coastguard Worker </md-checkbox> 280*4a64e381SAndroid Build Coastguard Worker </md-input-container> 281*4a64e381SAndroid Build Coastguard Worker <div> 282*4a64e381SAndroid Build Coastguard Worker <md-button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" ng-click="showAddConfirm($event)">Add</md-button> 283*4a64e381SAndroid Build Coastguard Worker <md-button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" ng-click="showDeleteConfirm($event)">Delete</md-button> 284*4a64e381SAndroid Build Coastguard Worker </div> 285*4a64e381SAndroid Build Coastguard Worker </form> 286*4a64e381SAndroid Build Coastguard Worker </md-content> 287*4a64e381SAndroid Build Coastguard Worker </div> 288*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-cell mdl-cell--12-col mdl-shadow--2dp mdl-grid" ng-show="menu[5].show"> 289*4a64e381SAndroid Build Coastguard Worker <h4>Commission</h4> 290*4a64e381SAndroid Build Coastguard Worker <md-content layout-padding flex="100"> 291*4a64e381SAndroid Build Coastguard Worker <form name="commissionForm"> 292*4a64e381SAndroid Build Coastguard Worker <div layout="row"> 293*4a64e381SAndroid Build Coastguard Worker <md-input-container flex="100"> 294*4a64e381SAndroid Build Coastguard Worker <label>Joiner PSKd</label> 295*4a64e381SAndroid Build Coastguard Worker <input required name="pskd" ng-model="commission.pskd"> 296*4a64e381SAndroid Build Coastguard Worker <div ng-messages="commissionForm.pskd.$error"> 297*4a64e381SAndroid Build Coastguard Worker <div ng-message="required">This is required.</div> 298*4a64e381SAndroid Build Coastguard Worker </div> 299*4a64e381SAndroid Build Coastguard Worker </md-input-container> 300*4a64e381SAndroid Build Coastguard Worker </div> 301*4a64e381SAndroid Build Coastguard Worker 302*4a64e381SAndroid Build Coastguard Worker <div> 303*4a64e381SAndroid Build Coastguard Worker <md-button name="commissionButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" ng-click="startCommission($event)">Start Commission</md-button> 304*4a64e381SAndroid Build Coastguard Worker </div> 305*4a64e381SAndroid Build Coastguard Worker </form> 306*4a64e381SAndroid Build Coastguard Worker </md-content> 307*4a64e381SAndroid Build Coastguard Worker </div> 308*4a64e381SAndroid Build Coastguard Worker <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid" ng-show="menu[6].show"> 309*4a64e381SAndroid Build Coastguard Worker <div> 310*4a64e381SAndroid Build Coastguard Worker 311*4a64e381SAndroid Build Coastguard Worker <span class="status-title">  Network Name:  312*4a64e381SAndroid Build Coastguard Worker </span> 313*4a64e381SAndroid Build Coastguard Worker <span class="status-content" ng-if="basicInfo.NetworkName"> {{ basicInfo.NetworkName }}</span> 314*4a64e381SAndroid Build Coastguard Worker <span class="status-title">  Leader:  315*4a64e381SAndroid Build Coastguard Worker </span> 316*4a64e381SAndroid Build Coastguard Worker <span class="status-content" ng-if="basicInfo.LeaderData"> {{ basicInfo.LeaderData.LeaderRouterId }}   317*4a64e381SAndroid Build Coastguard Worker </span> 318*4a64e381SAndroid Build Coastguard Worker 319*4a64e381SAndroid Build Coastguard Worker <span class="status-title">  #Router:  320*4a64e381SAndroid Build Coastguard Worker </span> 321*4a64e381SAndroid Build Coastguard Worker 322*4a64e381SAndroid Build Coastguard Worker <span class="status-content"> {{ NumOfRouter }}   323*4a64e381SAndroid Build Coastguard Worker </span>      324*4a64e381SAndroid Build Coastguard Worker 325*4a64e381SAndroid Build Coastguard Worker 326*4a64e381SAndroid Build Coastguard Worker 327*4a64e381SAndroid Build Coastguard Worker 328*4a64e381SAndroid Build Coastguard Worker <button ng-disabled="!graphisReady" class="mdl-button mdl-js-button mdl-button--raised" ng-click="showTopology()">Reload</button> 329*4a64e381SAndroid Build Coastguard Worker 330*4a64e381SAndroid Build Coastguard Worker 331*4a64e381SAndroid Build Coastguard Worker </div> 332*4a64e381SAndroid Build Coastguard Worker 333*4a64e381SAndroid Build Coastguard Worker 334*4a64e381SAndroid Build Coastguard Worker </div> 335*4a64e381SAndroid Build Coastguard Worker 336*4a64e381SAndroid Build Coastguard Worker <div class="mdl-graphs mdl-shadow--1dp mdl-cell mdl-cell--9-col" ng-show="menu[6].show"> 337*4a64e381SAndroid Build Coastguard Worker <div ng-show="graphisReady" class="d3graph" id="topograph"> 338*4a64e381SAndroid Build Coastguard Worker </div> 339*4a64e381SAndroid Build Coastguard Worker 340*4a64e381SAndroid Build Coastguard Worker 341*4a64e381SAndroid Build Coastguard Worker <div ng-show="!graphisReady" class="load_content"> 342*4a64e381SAndroid Build Coastguard Worker <div class="mdl-spinner mdl-js-spinner is-active"></div> 343*4a64e381SAndroid Build Coastguard Worker 344*4a64e381SAndroid Build Coastguard Worker 345*4a64e381SAndroid Build Coastguard Worker </div> 346*4a64e381SAndroid Build Coastguard Worker 347*4a64e381SAndroid Build Coastguard Worker </div> 348*4a64e381SAndroid Build Coastguard Worker <div ng-show="graphisReady && menu[6].show " class="demo-cards mdl-cell mdl-cell--top mdl-cell--3-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing"> 349*4a64e381SAndroid Build Coastguard Worker <div class="demo-updates mdl-card mdl-shadow--1dp mdl-cell mdl-cell--3-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop"> 350*4a64e381SAndroid Build Coastguard Worker <div class="detailContainer"> 351*4a64e381SAndroid Build Coastguard Worker <div class="detailElement" ng-if="isObject(detailList) && isObject(nodeDetailInfo) "ng-repeat="(key, data) in detailList track by $index"> 352*4a64e381SAndroid Build Coastguard Worker 353*4a64e381SAndroid Build Coastguard Worker <button ng-show="data.title" ng-click="clickList(key)" type="button" class="collapsible">{{ key }}</button> 354*4a64e381SAndroid Build Coastguard Worker <div ng-show="data.content" ng-if= "data.title" class="detailContentContainer"> 355*4a64e381SAndroid Build Coastguard Worker 356*4a64e381SAndroid Build Coastguard Worker <span class=detailContentValue ng-if=" !isObject(nodeDetailInfo[key])&&!isArray(nodeDetailInfo[key])">  {{ nodeDetailInfo[key] }}</span> 357*4a64e381SAndroid Build Coastguard Worker 358*4a64e381SAndroid Build Coastguard Worker 359*4a64e381SAndroid Build Coastguard Worker <ul class="a" ng-if="isArray(nodeDetailInfo[key])" ng-repeat="value in nodeDetailInfo[key] track by $index "> 360*4a64e381SAndroid Build Coastguard Worker <li> 361*4a64e381SAndroid Build Coastguard Worker 362*4a64e381SAndroid Build Coastguard Worker <span ng-if="!isObject(value)&&!isArray(value )" class=detailContentValue>{{ value }}</span> 363*4a64e381SAndroid Build Coastguard Worker 364*4a64e381SAndroid Build Coastguard Worker <ul ng-if="isObject(value)" ng-repeat="(k1,v1) in value"> 365*4a64e381SAndroid Build Coastguard Worker <li> 366*4a64e381SAndroid Build Coastguard Worker <span class="detailContentKey">{{ k1 }}: </span> 367*4a64e381SAndroid Build Coastguard Worker 368*4a64e381SAndroid Build Coastguard Worker <ul ng-if="isObject(v1)" ng-repeat="(k2,v2) in v1 track by $index"> 369*4a64e381SAndroid Build Coastguard Worker <li> 370*4a64e381SAndroid Build Coastguard Worker <span class="detailContentKey"> {{ k2 }}: </span> 371*4a64e381SAndroid Build Coastguard Worker <span class="detailContentValue">{{ v2 }} </span> 372*4a64e381SAndroid Build Coastguard Worker 373*4a64e381SAndroid Build Coastguard Worker </li> 374*4a64e381SAndroid Build Coastguard Worker </ul> 375*4a64e381SAndroid Build Coastguard Worker 376*4a64e381SAndroid Build Coastguard Worker <span ng-if="!isObject(v1)&&!isArray(v1)" class="detailContentValue"> {{ v1 }}</span> 377*4a64e381SAndroid Build Coastguard Worker </li> 378*4a64e381SAndroid Build Coastguard Worker </ul> 379*4a64e381SAndroid Build Coastguard Worker 380*4a64e381SAndroid Build Coastguard Worker </li> 381*4a64e381SAndroid Build Coastguard Worker </ul> 382*4a64e381SAndroid Build Coastguard Worker 383*4a64e381SAndroid Build Coastguard Worker 384*4a64e381SAndroid Build Coastguard Worker 385*4a64e381SAndroid Build Coastguard Worker <ul class="a" ng-if="isObject(nodeDetailInfo[key])" ng-repeat="(k,v) in nodeDetailInfo[key] track by $index"> 386*4a64e381SAndroid Build Coastguard Worker <li> 387*4a64e381SAndroid Build Coastguard Worker <span class="detailContentKey">{{ k }}: </span> 388*4a64e381SAndroid Build Coastguard Worker 389*4a64e381SAndroid Build Coastguard Worker <span ng-if="!isObject(v)&&!isArray(v)" class="detailContentValue"> {{ v }}</span> 390*4a64e381SAndroid Build Coastguard Worker <ul ng-if="isArray(v)" ng-repeat="v3 in v track by $index"> 391*4a64e381SAndroid Build Coastguard Worker <li> 392*4a64e381SAndroid Build Coastguard Worker <ul ng-if="isObject(v3)" ng-repeat="(k4,v4) in v3 track by $index"> 393*4a64e381SAndroid Build Coastguard Worker 394*4a64e381SAndroid Build Coastguard Worker <li> 395*4a64e381SAndroid Build Coastguard Worker <span class="detailContentKey"> {{ k4 }}: </span> 396*4a64e381SAndroid Build Coastguard Worker <span class="detailContentValue">{{ v4 }} </span> 397*4a64e381SAndroid Build Coastguard Worker 398*4a64e381SAndroid Build Coastguard Worker </li> 399*4a64e381SAndroid Build Coastguard Worker </ul> 400*4a64e381SAndroid Build Coastguard Worker 401*4a64e381SAndroid Build Coastguard Worker <span ng-if="!isObject(v3)&&!isArray(v3)" class="detailContentValue"> {{ v1 }}</span> 402*4a64e381SAndroid Build Coastguard Worker </li> 403*4a64e381SAndroid Build Coastguard Worker </ul> 404*4a64e381SAndroid Build Coastguard Worker 405*4a64e381SAndroid Build Coastguard Worker </li> 406*4a64e381SAndroid Build Coastguard Worker </ul> 407*4a64e381SAndroid Build Coastguard Worker 408*4a64e381SAndroid Build Coastguard Worker 409*4a64e381SAndroid Build Coastguard Worker 410*4a64e381SAndroid Build Coastguard Worker 411*4a64e381SAndroid Build Coastguard Worker </div> 412*4a64e381SAndroid Build Coastguard Worker </div> 413*4a64e381SAndroid Build Coastguard Worker 414*4a64e381SAndroid Build Coastguard Worker 415*4a64e381SAndroid Build Coastguard Worker </div> 416*4a64e381SAndroid Build Coastguard Worker </div> 417*4a64e381SAndroid Build Coastguard Worker 418*4a64e381SAndroid Build Coastguard Worker 419*4a64e381SAndroid Build Coastguard Worker </div> 420*4a64e381SAndroid Build Coastguard Worker </div> 421*4a64e381SAndroid Build Coastguard Worker </main> 422*4a64e381SAndroid Build Coastguard Worker </div> 423*4a64e381SAndroid Build Coastguard Worker 424*4a64e381SAndroid Build Coastguard Worker <script src="res/js/material.min.js"></script> 425*4a64e381SAndroid Build Coastguard Worker <script src="res/js/angular.min.js"></script> 426*4a64e381SAndroid Build Coastguard Worker <script src="res/js/angular-animate.min.js"></script> 427*4a64e381SAndroid Build Coastguard Worker <script src="res/js/angular-aria.min.js"></script> 428*4a64e381SAndroid Build Coastguard Worker <script src="res/js/angular-material.min.js"></script> 429*4a64e381SAndroid Build Coastguard Worker <script src="res/js/angular-messages.min.js"></script> 430*4a64e381SAndroid Build Coastguard Worker <script src="res/js/app.js"></script> 431*4a64e381SAndroid Build Coastguard Worker <script src="res/js/d3.min.js"></script> 432*4a64e381SAndroid Build Coastguard Worker</body> 433*4a64e381SAndroid Build Coastguard Worker 434*4a64e381SAndroid Build Coastguard Worker</html> 435
