misc/html.mbed/MiMicJSEditor.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 <link rel="stylesheet" href="./c/codemirror-mini.css">\r
   6 <script src="./slib.js"></script>\r
   7 <script src="./c/codemirror-mini.js"></script>\r
   8 <script src="./c/css-mini.js"></script>\r
   9 <script src="./c/htmlmixed-mini.js"></script>\r
  10 <script src="./c/javascript-mini.js"></script>\r
  11 <script src="./c/xml-mini.js"></script>\r
  12 \r
  13 <style id="user-style-nyatla-bg-img">\r
  14         body{\r
  15                 width:95%;\r
  16                 height:95%;\r
  17         }\r
  18         textarea {\r
  19                 font:inherit;\r
  20                 min-width:100%;\r
  21                 max-width:100%;\r
  22                 overflow-y:auto;\r
  23                 resize:none;\r
  24         }\r
  25         hr{\r
  26                 height:1px;\r
  27                 color:black;\r
  28         }\r
  29       .CodeMirror {\r
  30                 height:400px;\r
  31       }\r
  32         #src{\r
  33                 width:100%;\r
  34                 height:400px;\r
  35                 background-color:#ffffff;\r
  36                 border:solid 1px;\r
  37         }\r
  38         iframe{\r
  39                 width:100%;\r
  40                 height:400px;\r
  41                 background-color:#eeeeee;\r
  42                 border:0px;\r
  43         }\r
  44         button{\r
  45                 font-weight:bold;\r
  46                 text-align:center;\r
  47                 font-size:12px;\r
  48                 padding:0px;\r
  49         }\r
  50         #menu2_stop,#menu2_run,#menu2_save{\r
  51                 width:50px;height:40px;\r
  52         }\r
  53         .tagp{\r
  54                 float:left;\r
  55         }\r
  56         .tag{\r
  57                 background-color:#4169E1;\r
  58                 color:white;\r
  59                 font-weight:bold;\r
  60                 padding:0px 1px 1px 3px;\r
  61                 margin:3px 0px 2px 1px;\r
  62         }\r
  63 </style>\r
  64 <link href="./mimic.css" rel="stylesheet" type="text/css">\r
  65 <script type="text/javascript">\r
  66 \r
  67 var app;\r
  68 function getElem(id){return document.getElementById(id);}\r
  69 var Mui=new Object();\r
  70 \r
  71 \r
  72 /**\r
  73  * textboxのコンソールコントロール。\r
  74  @param id\r
  75  タグidを指定します。\r
  76  [id] コンソールにするtextbox\r
  77  */\r
  78 Mui.TextAreaConsole=function(id)\r
  79 {\r
  80         var _t=this;\r
  81         _t._tags={\r
  82                 text:getElem(id),\r
  83                 tag:getElem(id+"_tag")\r
  84         };\r
  85         _t.is_auto_scroll=false;\r
  86         _t.write=function(s){\r
  87                 _t._tags.text.value+=s;\r
  88                 if(_t.is_auto_scroll){\r
  89                         _t._tags.text.scrollTop =_t._tags.text.scrollHeight;\r
  90                 }\r
  91         }\r
  92         _t.writeln=function(s){\r
  93                 t.write(s+"\n");\r
  94         }\r
  95         _t.cls=function(){\r
  96                 _t._tags.text.value="";\r
  97         }\r
  98         _t.getText=function(){\r
  99                 return _t._tags.text.value;\r
 100         }\r
 101 \r
 102 }\r
 103 Mui.CodeEditor=function(id)\r
 104 {\r
 105         var _t=this;\r
 106         this.events={\r
 107                 onUpdate:null\r
 108         };\r
 109         this._tags={text:getElem(id)};\r
 110 \r
 111         this.is_auto_scroll=false;\r
 112         var mixedMode = {\r
 113         name: "htmlmixed",\r
 114         scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,mode: null}]\r
 115     };  \r
 116         this._cm=CodeMirror.fromTextArea(this._tags.text,{\r
 117                 mode: mixedMode,\r
 118                 styleActiveLine: true,\r
 119                 lineNumbers: true,\r
 120                 lineWrapping:true});\r
 121         this.selectall=function(){\r
 122                 var e=_t._cm;\r
 123                 e.setSelection({line:0,ch:0},{line:e.lineCount(),ch:0});\r
 124         }\r
 125         this.getText=function(){\r
 126                 return _t._cm.getValue();\r
 127         }\r
 128         this.readOnly=function(b)\r
 129         {\r
 130                 _t._cm.setOption("readOnly",b);\r
 131         }\r
 132         var tid=undefined;\r
 133         this._cm.on("change", function() {\r
 134         if(tid!=undefined){\r
 135                 clearTimeout(tid);\r
 136                 }\r
 137         tid = setTimeout(function(){if(_t.events.onUpdate!=null){_t.events.onUpdate();}}, 300);\r
 138       });\r
 139 }\r
 140 \r
 141 \r
 142 Mui.Command=function(id)\r
 143 {\r
 144         var _t=this;\r
 145         this._tags={\r
 146                 run:getElem(id+"_run"),\r
 147                 stop:getElem(id+"_stop"),\r
 148                 save:getElem(id+"_save")\r
 149         }\r
 150         this.events={\r
 151                 onCommand:null\r
 152         }\r
 153         _t._onCommand=function(eid){\r
 154                 if(_t.events.onCommand!=null){\r
 155                         _t.events.onCommand(eid);\r
 156                 }\r
 157         },\r
 158         this._is_run=false;\r
 159         this._tags.run.disabled=false;\r
 160         this._tags.stop.disabled=true;\r
 161         this.CM_RUN=1;\r
 162         this.CM_STOP=2;\r
 163         this.CM_SAVE=3;\r
 164         this._tags.run.onclick=function(){\r
 165                 _t._tags.run.disabled=true;\r
 166                 _t._tags.stop.disabled=false;\r
 167                 _t._onCommand(_t.CM_RUN);\r
 168         };\r
 169         this._tags.stop.onclick=function()\r
 170         {\r
 171                 _t._tags.run.disabled=false;\r
 172                 _t._tags.stop.disabled=true;\r
 173                 _t._onCommand(_t.CM_STOP);\r
 174         };\r
 175         this._tags.save.onclick=function(){_t._onCommand(_t.CM_SAVE);};\r
 176 }\r
 177 \r
 178 Mui.Preview=function(id)\r
 179 {\r
 180         var _t=this;\r
 181         this.updatePreview=function(str){\r
 182         var elem = getElem(id);\r
 183         var pv =  elem.contentDocument ||  elem.contentWindow.document;\r
 184                 str=str.replace(/<[^<script]*script[^\/>]*\/>/gi,"<noscript/>");\r
 185                 str=str.replace(/<[^<script]*script[^<]*<[^<\/script]*(\/script[^>]*>)/gi,"<noscript></noscript>");\r
 186         pv.open(); \r
 187         pv.write(str);\r
 188         pv.close();\r
 189         }\r
 190         this.updateRun=function(str){\r
 191         var elem = getElem(id);\r
 192         var pv =  elem.contentDocument ||  elem.contentWindow.document;\r
 193         pv.open();\r
 194         pv.write(str);\r
 195         pv.close();\r
 196         }\r
 197 }\r
 198 \r
 199 \r
 200 \r
 201 function Application()\r
 202 {\r
 203         //initialization\r
 204         var ui={\r
 205                 source:new Mui.CodeEditor("src"),\r
 206                 cmd:new Mui.Command("menu2"),\r
 207                 preview:new Mui.Preview("preview")\r
 208         }\r
 209         this.ui=ui;\r
 210         var mif=null;\r
 211         ui.cmd.events.onCommand=function(id)\r
 212         {\r
 213                 switch(id){\r
 214                 case ui.cmd.CM_RUN:\r
 215                         ui.source.readOnly(true);\r
 216                         ui.preview.updateRun(ui.source.getText());\r
 217                         return;\r
 218                 case ui.cmd.CM_STOP:\r
 219                         ui.preview.updatePreview(ui.source.getText());\r
 220                         ui.source.readOnly(false);\r
 221                         return;\r
 222                 case ui.cmd.CM_SAVE:\r
 223                         slib.downloadAsFile("miapp.htm",ui.source.getText());\r
 224                         ui.source.selectall();\r
 225                         return;\r
 226                 default:\r
 227                         alert("unknown command id");\r
 228                 }\r
 229         }\r
 230         ui.preview.updatePreview(ui.source.getText());\r
 231         ui.source.events.onUpdate=function()\r
 232         {\r
 233                 ui.preview.updatePreview(ui.source.getText());\r
 234         }\r
 235 \r
 236         //away setting\r
 237         function away(event) {\r
 238                 event = event || window.event;\r
 239                 return event.returnValue = 'Entries will be lost.\nDo you navigate away from the page?';\r
 240         }\r
 241         if (window.addEventListener){\r
 242         window.addEventListener('beforeunload', away, false);\r
 243         }else if (window.attachEvent) {\r
 244                 window.attachEvent('onbeforeunload', away);\r
 245         }\r
 246 }\r
 247 \r
 248 \r
 249 function init()\r
 250 {\r
 251         app=new Application();\r
 252 }\r
 253 \r
 254 \r
 255 \r
 256 \r
 257 </script>\r
 258 </head>\r
 259 <body onload="init();">\r
 260 <h1>MiMic Javascript Editor</h1>\r
 261 <hr/>\r
 262 <div id="menu2">\r
 263         <button id="menu2_run"/>Play</button><button id="menu2_stop" />Stop</button><button id="menu2_save"/>Save</button>\r
 264 </div>\r
 265 <div class="tagp" style="width:60%;position:relative;">\r
 266         <div class="tag" id="src_tag">Source code</div>\r
 267 <textarea id="src"><!DOCTYPE html>\r
 268 <html><head>\r
 269 <meta charset="UTF-8">\r
 270 <script src="/rom/m/MiMicCore-mini.js"></script>        \r
 271 <script src="/rom/m/MbedM3.All-mini.js"></script>       \r
 272 <script type="text/javascript">\r
 273 function start()\r
 274 {\r
 275         //DIGITAL OUT pin-option\r
 276         var DIGITAL_OUT={dir:1,pin:{mode:1,od:0}};\r
 277         try{\r
 278                 var mcu=new MbedM3.Mcu(location.host);\r
 279                 var pin=mcu.getPin(MbedM3.LED[0],"GPIO");\r
 280                 pin.setOpt(DIGITAL_OUT);\r
 281                 var i=0;\r
 282                 setInterval(function(){pin.setValue((i++)%2);},500);\r
 283         }catch(e){\r
 284                 alert("catch exception!\n"+e);\r
 285         }\r
 286 }\r
 287 </script>\r
 288 </head>\r
 289 <h1 id="title">LED Blink</h1>\r
 290 <body onload="start()">\r
 291 </body></textarea>\r
 292 </div>\r
 293 <div class="tagp" style="width:40%">\r
 294         <div class="tag">Preview</div>\r
 295         <iframe id="preview"></iframe>\r
 296 </div>\r
 297 \r
 298 <div class="footer" style="clear:both">\r
 299         <a href="http://nyatla.jp/mimic/wp" alt="http://nyatla.jp/mimic/wp"><img src="mimiclogo.png"/></a>\r
 300         MiMic project<br/>Copyright (C) 2011-2013 <a href="http://nyatla.jp">nyatla.jp</a> All Rights Reserved.\r
 301 </div>\r
 302 </body>\r