misc/mbedJS/mbed.html/setup.html

   1 <html>\r
   2 <head>\r
   3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\r
   4 <link href="./mimic.css" rel="stylesheet" type="text/css">\r
   5 <script src="./slib.js"></script>\r
   6 \r
   7 <style id="user-style-nyatla-bg-img">\r
   8         body{\r
   9                 width:95%;\r
  10                 height:95%;\r
  11         }\r
  12         button{\r
  13                 font-weight:bold;\r
  14                 text-align:center;\r
  15                 font-size:12px;\r
  16                 padding:0px;\r
  17                 width:60px;height:40px;\r
  18         }\r
  19         .exp{\r
  20                 font-size:9px;\r
  21         }\r
  22         .table1,p{\r
  23                 width:480px;\r
  24         }\r
  25         .table1 tr\r
  26         {\r
  27                 height:25px;\r
  28                 background-color:#4169E1;\r
  29                 color:white;\r
  30                 border:solid 1px #aaaaaa;\r
  31                 font-weight:bold;\r
  32         }\r
  33         .table1 td\r
  34         {\r
  35                 margin:2px 2px 2px 2px;\r
  36                 padding:2px 2px 2px 2px;\r
  37                 font-size:12px;\r
  38         }\r
  39         .table1 .col1{\r
  40                 width:120px;\r
  41         }\r
  42         .table1 p{\r
  43                 font-weight:normal;\r
  44                 width:100%;\r
  45         }\r
  46         input,select\r
  47         {\r
  48                 border:solid 1px #aaaaaa;\r
  49         }\r
  50         .table1 input,select\r
  51         {\r
  52                 width:200px;\r
  53         }\r
  54         .table2 input\r
  55         {\r
  56                 width:100px;\r
  57         }\r
  58 </style>\r
  59 <script type="text/javascript">\r
  60 \r
  61 var app;\r
  62 function getElem(id){return document.getElementById(id);}\r
  63 \r
  64 function str2HexArray(i_str,delim,len,digit)\r
  65 {\r
  66         var l=i_str.split(delim);\r
  67         if(l.length==len){\r
  68                 var r=new Array();\r
  69                 for(var i=0;i<len;i++){\r
  70                         var v=parseInt(l[i],digit);\r
  71                         if(!isNaN(v) && v>=0 && v<=255){\r
  72                                 r.push(v);\r
  73                         }else{\r
  74                                 throw "str2HexArray failed.";\r
  75                         }\r
  76                 }\r
  77                 return r;\r
  78         }\r
  79         throw "str2HexArray failed.";\r
  80 }\r
  81 \r
  82 function int2hex(v,d){var r=v.toString(16);while(r.length<d){r="0"+r;}return r;}\r
  83 function int2hex2(v){return int2hex(v,2);}\r
  84 function arrayToHex(ar)\r
  85 {\r
  86         if(ar==null){return null;}\r
  87         var ret="";\r
  88         for(var i=0;i<ar.length;i++){\r
  89                 ret+=int2hex2(ar[i]);\r
  90         }\r
  91         return ret;\r
  92 }\r
  93 function int2str(val){return val.toString(10);}\r
  94 function int2IpAddr(v){return int2str((v>>24)&0xff)+"."+int2str((v>>16)&0xff)+"."+int2str((v>>8)&0xff)+"."+int2str((v>>0)&0xff);}\r
  95 function int2MacAddr(v1,v2){return int2hex2((v1>>24)&0xff)+":"+int2hex2((v1>>16)&0xff)+":"+int2hex2((v1>>8)&0xff)+":"+int2hex2((v1>>0)&0xff)+":"+int2hex2((v2>>24)&0xff)+":"+int2hex2((v2>>16)&0xff);}\r
  96 \r
  97 var Ui=new Object();\r
  98 Ui.IpAddrInput=function(id)\r
  99 {\r
 100         var _t=this;\r
 101         var tags={\r
 102                 input:getElem(id)\r
 103         };\r
 104         _t.getIpAddr=function(){\r
 105                         return str2HexArray(tags.input.value,".",4,10);\r
 106         }\r
 107         _t.getText=function(){\r
 108                 return tags.input.value;\r
 109         }\r
 110         _t.setIpValue=function(v1)\r
 111         {\r
 112                 tags.input.value=int2IpAddr(v1);\r
 113         }\r
 114 }\r
 115 Ui.IpSetting=function(id)\r
 116 {\r
 117         var _t=this;\r
 118         var tags={\r
 119                 mode:getElem(id+"_mode"),\r
 120                 div:getElem(id+"_div")\r
 121         };\r
 122         _t.events={\r
 123                 onchange:null\r
 124         };\r
 125         _t.addr=new Ui.IpAddrInput(id+"_addr");\r
 126         _t.mask=new Ui.IpAddrInput(id+"_mask");\r
 127         _t.gw=new Ui.IpAddrInput(id+"_defgw");\r
 128         tags.mode.addEventListener("change",function()\r
 129         {\r
 130                 tags.div.style.visibility=(tags.mode.selectedIndex==0)?"visible":"hidden";\r
 131                 if(_t.events.onchange!=null){\r
 132                         _t.events.onchange(tags.mode.selectedIndex);\r
 133                 }\r
 134         });\r
 135         _t.setValue=function(v)\r
 136         {\r
 137                 tags.mode.selectedIndex=(v.flags & 0x03);\r
 138                 tags.div.style.visibility=(tags.mode.selectedIndex==0)?"visible":"hidden";\r
 139                 _t.addr.setIpValue(v.ip);\r
 140                 _t.mask.setIpValue(v.mask);\r
 141                 _t.gw.setIpValue(v.droute);\r
 142         };\r
 143         _t.getValue=function()\r
 144         {\r
 145                 var ret={};\r
 146                 var err;\r
 147                 try{\r
 148                         err="IP Mode";\r
 149                         ret.flag=tags.mode.selectedIndex;\r
 150                         err="IP Address";\r
 151                         ret.addr=_t.addr.getIpAddr();\r
 152                         err="IP Mask";\r
 153                         ret.mask=_t.mask.getIpAddr();\r
 154                         err="IP Gateway";\r
 155                         ret.gw=_t.gw.getIpAddr();\r
 156                         return ret;\r
 157                 }catch(e){\r
 158                         throw "Invalid value:"+err;\r
 159                 }\r
 160         }\r
 161 }\r
 162 Ui.MacAddr=function(id)\r
 163 {\r
 164         var _t=this;\r
 165         var tags={\r
 166                 input:getElem(id)\r
 167         };\r
 168         _t.getMacAddr=function()\r
 169         {\r
 170                 try{\r
 171                         return str2HexArray(tags.input.value,":",6,16);\r
 172                 }catch(e){\r
 173                         throw "Invalid MAC address '"+tags.input.value+"'";\r
 174                 }\r
 175         }\r
 176         _t.setMacValue=function(v1,v2)\r
 177         {\r
 178                 tags.input.value=int2MacAddr(v1,v2);\r
 179         }\r
 180 }\r
 181 Ui.HostName=function(id)\r
 182 {\r
 183         var _t=this;\r
 184         var tags={\r
 185                 input:getElem(id)\r
 186         };\r
 187         _t.getValue=function()\r
 188         {\r
 189                 var r=tags.input.value;\r
 190                 if(r.length<1 ||r.length>31 || r.match(/[^(a-z0-9_)]/i)){\r
 191                         throw "Invalid Host name."\r
 192                 }\r
 193                 return r;\r
 194         },\r
 195         _t.setValue=function(v1)\r
 196         {\r
 197                 tags.input.value=v1;\r
 198         }\r
 199 }\r
 200 Ui.Services=function(id)\r
 201 {\r
 202         var _t=this;\r
 203         var tags={\r
 204                 http_port:getElem(id+"_http_port"),\r
 205                 mdns:getElem(id+"_mdns_sw"),\r
 206                 upnp:getElem(id+"_upnp_sw")\r
 207         };\r
 208         _t.getValue=function()\r
 209         {\r
 210                 var r={\r
 211                         port:parseInt(tags.http_port.value),\r
 212                         flag:(tags.mdns.selectedIndex==1?0x01:0x00)|(tags.upnp.selectedIndex==1?0x02:0x00)};\r
 213                 if(isNaN(r.port) || r.port<=0){\r
 214                         throw "Invalid port number";\r
 215                 }\r
 216                 return r;\r
 217         }\r
 218         _t.init=function(cfg)\r
 219         {\r
 220                 tags.http_port.value=cfg.http_port;\r
 221                 tags.mdns.selectedIndex=(cfg.flags&0x01)!=0?1:0;\r
 222                 tags.upnp.selectedIndex=(cfg.flags&0x02)!=0?1:0;\r
 223         }\r
 224 }\r
 225 \r
 226 \r
 227 Ui.Cmd=function(id)\r
 228 {\r
 229         var _t=this;\r
 230         var tags={\r
 231                 update:getElem(id+"_update"),\r
 232                 cancel:getElem(id+"_cancel")\r
 233         };\r
 234         _t.events={onupdate:null}\r
 235         tags.update.onclick=function()\r
 236         {\r
 237                 if(_t.events.onupdate!=null){\r
 238                         _t.events.onupdate();\r
 239                 }               \r
 240         }\r
 241         tags.cancel.onclick=function()\r
 242         {\r
 243                 if(window.confirm('Do you want to cancel?')){\r
 244                         document.location="./index.html";\r
 245                 }\r
 246         }\r
 247         tags.update.disabled=false;\r
 248         _t.disable=function(){tags.update.disabled=true;}\r
 249 }\r
 250 \r
 251 \r
 252 function Application()\r
 253 {\r
 254         var SETUP_API="/setup/setup.api"; \r
 255         var ui={\r
 256                 macaddr:new Ui.MacAddr("in_emac"),\r
 257                 cmd:new Ui.Cmd("cmd"),\r
 258                 ipset:new Ui.IpSetting("in_ip"),\r
 259                 srv:new Ui.Services("srv"),\r
 260                 hostname:new Ui.HostName("in_host")\r
 261         }\r
 262         ui.cmd.events.onupdate=function(){\r
 263                 //値チェック\r
 264         try{\r
 265                 var mac=ui.macaddr.getMacAddr();\r
 266                 var host=ui.hostname.getValue();\r
 267                 var ipv4=ui.ipset.getValue();\r
 268                 var srv=ui.srv.getValue();\r
 269                 var pm=arrayToHex(mac)+"ffff"\r
 270                         +int2hex(ipv4.flag,8)+arrayToHex(ipv4.addr)+arrayToHex(ipv4.mask)+arrayToHex(ipv4.gw)\r
 271                         +int2hex(srv.flag,8)+int2hex(srv.port,4)+"0000";\r
 272                 //LPCXPressoへ送信\r
 273                 var ret=eval("("+slib.xhr(SETUP_API+"?c=update&p="+pm+"&host="+host).responseText+")");\r
 274                         if(ret.result!=0x0){\r
 275                                 throw "Configuration update is failed. code=0x"+ret.result;\r
 276                         }else{\r
 277                                 throw "Configuration is changed.\n Restart the MiMicRemoteMCU to enable the setting.";\r
 278                         }\r
 279         }catch(e){\r
 280                 alert(e);\r
 281         }\r
 282 \r
 283         }\r
 284         try{\r
 285                 function setInnerHTML(n,v){getElem(n).innerHTML=v;}\r
 286                 var cfg=eval("("+slib.xhr(SETUP_API+"?c=get").responseText+")");\r
 287                 setInnerHTML("cur_version",cfg.application);\r
 288                 setInnerHTML("cur_lan",cfg.landev);\r
 289                 setInnerHTML("cur_host",cfg.cur.host);\r
 290                 setInnerHTML("cur_mac",int2MacAddr(cfg.cur.mac00010203,cfg.cur.mac0405xxxx));\r
 291                 setInnerHTML("cur_ip",int2IpAddr(cfg.cur.ipv4.ip));\r
 292                 setInnerHTML("cur_mask",int2IpAddr(cfg.cur.ipv4.mask));\r
 293                 setInnerHTML("cur_droute",int2IpAddr(cfg.cur.ipv4.droute));\r
 294                 setInnerHTML("cur_service",\r
 295                         "Http Port="+cfg.cur.services.http_port+","+\r
 296                         "mDNS="+((cfg.cur.services.flags&0x01)?"Enable":"Disable")+","+\r
 297                         "UPnP="+((cfg.cur.services.flags&0x02)?"Enable":"Disable"));\r
 298                 ui.macaddr.setMacValue(cfg.cfg.mac00010203,cfg.cfg.mac0405xxxx);\r
 299                 ui.ipset.setValue(cfg.cfg.ipv4);\r
 300                 ui.hostname.setValue(cfg.cfg.host);\r
 301                 ui.srv.init(cfg.cfg.services);\r
 302         }catch(e){\r
 303                 ui.update.disable();\r
 304                 alert("MiMic configurator failed initialization.'"+e.toString()+"'");\r
 305         }\r
 306 }\r
 307 \r
 308 \r
 309 function init()\r
 310 {\r
 311         app=new Application();\r
 312 }\r
 313 \r
 314 \r
 315 </script>\r
 316 </head>\r
 317 <body onload="init();">\r
 318 <h1 style="float:left;"><img src="./mimiclogo.png"/><span id="idx" >mbedJS configuration</span></h1>\r
 319 <div style="float:right;" ><a href="/">Return to top</a></div>\r
 320 <hr  style="clear:both;" />\r
 321         <h2>Current configuration</h2>\r
 322         <table class="table1 ">\r
 323                 <colgroup><col span="1" class="col1" /></colgroup>\r
 324                 <colgroup><col span="2" class="col2" /></colgroup>\r
 325                 <tr><td>Version</td><td><p id="cur_version"></p></td></tr>\r
 326                 <tr><td>LAN PHY</td><td><p id="cur_lan"</p></td></tr>\r
 327                 <tr><td>MAC Address</td><td><p id="cur_mac"></p></td></tr>\r
 328                 <tr><td>Host Name</td><td><p id="cur_host"></p></td></tr>\r
 329                 <tr><td>IP Address</td><td><p id="cur_ip"></p></td></tr>\r
 330                 <tr><td>Net Mask</td><td><p id="cur_mask"></p></td></tr>\r
 331                 <tr><td>Default Gateway</td><td><p id="cur_droute"></p></td></tr>\r
 332                 <tr><td>Services</td><td><p id="cur_service"></p></td></tr>\r
 333         </table>\r
 334         <p class="exp">\r
 335 If local setting file available, current information might be different with onchip-setting. To fully enable on-chip setting, please remove the setting file "/mimic.cfg" in mbed  local file system or SDcard file system.\r
 336         </p>\r
 337         <h2>OnChip configuration</h2>\r
 338         \r
 339         <h3>Ethernet</h3>\r
 340         <table class="table1">\r
 341                 <colgroup><col span="1" class="col1" /></colgroup>\r
 342                 <colgroup><col span="2" class="col2" /></colgroup>\r
 343                 <tr><td>MAC Address</td><td><input id="in_emac" type="text"/></td></tr>\r
 344                 <tr><td>Host Name</td><td><input id="in_host" type="text"/></td></tr>\r
 345                 <tr>\r
 346                         <td>IP Address</td>\r
 347                         <td>\r
 348                                 <div><select id="in_ip_mode"><option>Manual</option><option>DHCP</option><option>AutoIP</option><option>AutoIP+DHCP</option></select></div>\r
 349                                 <div id="in_ip_div">\r
 350                                         <table class="table2">\r
 351                                                 <tr><td>Address</td><td><input id="in_ip_addr" type="text"/></td></tr>\r
 352                                                 <tr><td>Mask</td><td><input id="in_ip_mask" type="text"/></td></tr>\r
 353                                                 <tr><td>Gateway</td><td><input id="in_ip_defgw" type="text"/></td></tr>\r
 354                                         </table>\r
 355                                 </div>\r
 356                         </td>\r
 357                 </tr>\r
 358         </table>\r
 359         <h3>Service</h3>\r
 360         <table class="table1">\r
 361                 <colgroup><col span="1" class="col1" /></colgroup>\r
 362                 <colgroup><col span="2" class="col2" /></colgroup>\r
 363                 <tr><td>HTTP Port</td><td><input id="srv_http_port" type="text"/></td></tr>\r
 364                 <tr><td>mDNS</td><td><select id="srv_mdns_sw"><option>Disable</option><option>Enable</option></select></td></tr>\r
 365                 <tr><td>UPnP</td><td><select id="srv_upnp_sw"><option>Disable</option><option>Enable</option></select></td></tr>\r
 366         </table>\r
 367         <br/>\r
 368         <br/>\r
 369         <button id="cmd_update">Update</button>\r
 370         <button id="cmd_cancel">Cancel</button>\r
 371 <div class="footer">\r
 372         MiMic project<br/>Copyright (C) 2011-2013 <a href="http://nyatla.jp">nyatla.jp</a> All Rights Reserved.\r
 373 </div>\r
 374 </body>\r
 375 </html>\r