OSDN Git Service

add mbed.html
[mimic/MiMicSDK.git] / misc / mbedJS / mbed.html / MiMicJSEditor.html
diff --git a/misc/mbedJS/mbed.html/MiMicJSEditor.html b/misc/mbedJS/mbed.html/MiMicJSEditor.html
new file mode 100644 (file)
index 0000000..dee9f77
--- /dev/null
@@ -0,0 +1,348 @@
+<html>\r
+<head>\r
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\r
+<link href="./mimic.css" rel="stylesheet" type="text/css" />\r
+<link rel="stylesheet" href="./c/codemirror-mini.css" />\r
+<script src="./slib.js"></script>\r
+<script src="./c/codemirror-mini.js"></script>\r
+<script src="./c/codemirror_jsedit-mini.js"></script>\r
+\r
+<style id="user-style-nyatla-bg-img">\r
+       body{\r
+               width:95%;\r
+               height:95%;\r
+       }\r
+       textarea {\r
+               font:inherit;\r
+               min-width:100%;\r
+               max-width:100%;\r
+               overflow-y:auto;\r
+               resize:none;\r
+       }\r
+       hr{\r
+               height:1px;\r
+               color:black;\r
+       }\r
+      .CodeMirror {\r
+               height:400px;\r
+      }\r
+       #src{\r
+               width:100%;\r
+               height:400px;\r
+               background-color:#ffffff;\r
+               border:solid 1px;\r
+       }\r
+       iframe{\r
+               width:100%;\r
+               height:400px;\r
+               background-color:#eeeeee;\r
+               border:0px;\r
+       }\r
+       button{\r
+               font-weight:bold;\r
+               text-align:center;\r
+               font-size:12px;\r
+               padding:0px;\r
+       }\r
+       #menu2_stop,#menu2_run,#menu2_expt,#menu2_save{\r
+               width:50px;height:40px;\r
+       }\r
+       .tagp{\r
+               float:left;\r
+       }\r
+       .tag{\r
+               background-color:#4169E1;\r
+               color:white;\r
+               font-weight:bold;\r
+               padding:0px 1px 1px 3px;\r
+               margin:3px 0px 2px 1px;\r
+       }\r
+</style>\r
+<script type="text/javascript">\r
+\r
+var app;\r
+function getElem(id){return document.getElementById(id);}\r
+var Mui=new Object();\r
+\r
+\r
+/**\r
+ * textboxのコンソールコントロール。\r
+ @param id\r
+ タグidを指定します。\r
+ [id] コンソールにするtextbox\r
+ */\r
+Mui.TextAreaConsole=function(id)\r
+{\r
+       var _t=this;\r
+       _t._tags={\r
+               text:getElem(id),\r
+               tag:getElem(id+"_tag")\r
+       };\r
+       _t.is_auto_scroll=false;\r
+       _t.write=function(s){\r
+               _t._tags.text.value+=s;\r
+               if(_t.is_auto_scroll){\r
+                       _t._tags.text.scrollTop =_t._tags.text.scrollHeight;\r
+               }\r
+       }\r
+       _t.writeln=function(s){\r
+               t.write(s+"\n");\r
+       }\r
+       _t.cls=function(){\r
+               _t._tags.text.value="";\r
+       }\r
+       _t.getText=function(){\r
+               return _t._tags.text.value;\r
+       }\r
+\r
+}\r
+Mui.CodeEditor=function(id)\r
+{\r
+       var _t=this;\r
+       this.events={\r
+               onUpdate:null\r
+       };\r
+       this._tags={text:getElem(id)};\r
+\r
+       this.is_auto_scroll=false;\r
+       var mixedMode = {\r
+       name: "htmlmixed",\r
+       scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,mode: null}]\r
+    }; \r
+       this._cm=CodeMirror.fromTextArea(this._tags.text,{\r
+               mode: mixedMode,\r
+               styleActiveLine: true,\r
+               lineNumbers: true,\r
+               lineWrapping:true});\r
+       this.selectall=function(){\r
+               var e=_t._cm;\r
+               e.setSelection({line:0,ch:0},{line:e.lineCount(),ch:0});\r
+       }\r
+       this.getText=function(){return _t._cm.getValue();}\r
+       this.setText=function(v){_t._cm.setValue(v);}\r
+       this.readOnly=function(b)\r
+       {_t._cm.setOption("readOnly",b);}\r
+       var tid=undefined;\r
+       this._cm.on("change", function() {\r
+        if(tid!=undefined){\r
+               clearTimeout(tid);\r
+               }\r
+        tid = setTimeout(function(){if(_t.events.onUpdate!=null){_t.events.onUpdate();}}, 300);\r
+      });\r
+}\r
+\r
+\r
+Mui.Command=function(id)\r
+{\r
+       var _t=this;\r
+       this._tags={\r
+               run:getElem(id+"_run"),\r
+               stop:getElem(id+"_stop"),\r
+               save:getElem(id+"_save"),\r
+               expt:getElem(id+"_expt")\r
+       }\r
+       this.events={\r
+               onCommand:null\r
+       }\r
+       _t._onCommand=function(eid){\r
+               if(_t.events.onCommand!=null){\r
+                       _t.events.onCommand(eid);\r
+               }\r
+       },\r
+       this._is_run=false;\r
+       this._tags.run.disabled=false;\r
+       this._tags.stop.disabled=true;\r
+       this.CM_RUN=1;\r
+       this.CM_STOP=2;\r
+       this.CM_EXPT=3;\r
+       this.CM_SAVE=4;\r
+       this._tags.run.onclick=function(){\r
+               _t._tags.run.disabled=true;\r
+               _t._tags.stop.disabled=false;\r
+               _t._onCommand(_t.CM_RUN);\r
+       };\r
+       this._tags.stop.onclick=function()\r
+       {\r
+               _t._tags.run.disabled=false;\r
+               _t._tags.stop.disabled=true;\r
+               _t._onCommand(_t.CM_STOP);\r
+       };\r
+       this._tags.save.onclick=function()\r
+       {\r
+               _t._tags.run.disabled=false;\r
+               _t._tags.stop.disabled=true;\r
+               _t._onCommand(_t.CM_SAVE);\r
+       };\r
+       this._tags.expt.onclick=function(){_t._onCommand(_t.CM_EXPT);};\r
+}\r
+\r
+Mui.Preview=function(id)\r
+{\r
+       var elem = getElem(id);\r
+       function remakeif(str)\r
+       {\r
+               var f=document.createElement("iframe");\r
+               var c=elem.childNodes;\r
+               for(var i=0;i<c.length;i++){\r
+                       elem.removeChild(c[i]);\r
+               }\r
+               elem.appendChild(f);\r
+               var d=f.contentDocument ||  f.contentWindow.document;\r
+               d.open();\r
+        d.write(str);\r
+        d.close();\r
+       }\r
+       var _t=this;\r
+       this.updatePreview=function(str){\r
+               str=str.replace(/<[^<script]*script[^\/>]*\/>/gi,"<noscript/>");\r
+               str=str.replace(/<[^<script]*script[^<]*<[^<\/script]*(\/script[^>]*>)/gi,"<noscript></noscript>");\r
+        remakeif(str);\r
+       }\r
+       this.updateRun=function(str){\r
+        remakeif(str);\r
+       }\r
+}\r
+\r
+function Application()\r
+{\r
+       //initialization\r
+       var ui={\r
+               source:new Mui.CodeEditor("src"),\r
+               cmd:new Mui.Command("menu2"),\r
+               preview:new Mui.Preview("preview")\r
+       }\r
+       var fname=null;//file name\r
+\r
+       this.ui=ui;\r
+       var mif=null;\r
+       ui.cmd.events.onCommand=function(id)\r
+       {\r
+               switch(id){\r
+               case ui.cmd.CM_RUN:\r
+                       ui.source.readOnly(true);\r
+                       ui.preview.updateRun(ui.source.getText());\r
+                       return;\r
+               case ui.cmd.CM_STOP:\r
+                       ui.preview.updatePreview(ui.source.getText());\r
+                       ui.source.readOnly(false);\r
+                       return;\r
+               case ui.cmd.CM_EXPT:\r
+                       slib.downloadAsFile("miapp.htm",ui.source.getText());\r
+                       ui.source.selectall();\r
+                       return;\r
+               case ui.cmd.CM_SAVE:\r
+                       var n=window.prompt("Input local file path.",fname==null?"/local/noname.htm":fname);\r
+                       if(n!=null){\r
+                               try{\r
+                                       if(slib.xhr("/fio/upload.api?name="+n,null,"POST",ui.source.getText()).status!=200){\r
+                                               throw "Bad XHR fio status code.";\r
+                                       }\r
+                               }catch(e){\r
+                                       alert("Failed to save the file.\n"+e);\r
+                               }\r
+                               fname=n;\r
+                               alert("The file was saved.\n"+fname);\r
+                       }\r
+                       return;\r
+               default:\r
+                       alert("unknown command id");\r
+               }\r
+       }\r
+\r
+\r
+       \r
+       //preload\r
+       {\r
+               var q=slib.getUrlQuery(location.href);\r
+               var s=q['src'];\r
+               if(s!==undefined && s!=null){\r
+                       try{\r
+                               var r=slib.xhr(s);\r
+                               if(r.status!=200){\r
+                                       throw new String("Can not load contet:"+s);\r
+                               }\r
+                               ui.source.setText(r.responseText);\r
+                               fname=s;\r
+                       }catch(e){\r
+                               alert("Load failed:\n"+e);\r
+                       }\r
+               }\r
+       }\r
+       ui.preview.updatePreview(ui.source.getText());\r
+       ui.source.events.onUpdate=function()\r
+       {\r
+               ui.preview.updatePreview(ui.source.getText());\r
+       }\r
+\r
+       //away setting\r
+       function away(event) {\r
+               event = event || window.event;\r
+               return event.returnValue = 'Entries will be lost.\nDo you navigate away from the page?';\r
+       }\r
+       if (window.addEventListener){\r
+       window.addEventListener('beforeunload', away, false);\r
+       }else if (window.attachEvent) {\r
+               window.attachEvent('onbeforeunload', away);\r
+       }\r
+}\r
+\r
+\r
+function init()\r
+{\r
+       app=new Application();\r
+}\r
+\r
+\r
+\r
+\r
+</script>\r
+</head>\r
+<body onload="init();">\r
+<h1 style="float:left;"><img src="./mimiclogo.png"/><span id="idx" >MiMic Javascript Editor</span></h1>\r
+<div style="float:right;" ><a href="/">Return to top</a></div>\r
+<hr  style="clear:both;" />\r
+<div id="menu2">\r
+       <div style="float:left;"><button id="menu2_run"/>Play</button><button id="menu2_stop" />Stop</button><button id="menu2_save"/>Save</button><button id="menu2_expt"/>Export</button></div>\r
+       <div style="float:right;" ><a href="#" onclick="window.open('http://mimic.sourceforge.jp/doc/mbedjs/current/');">API Reference</a></div>\r
+</div>\r
+<div class="tagp" style="clear:both;width:60%;position:relative;">\r
+       <div class="tag" id="src_tag">Source code</div>\r
+<textarea id="src">\r
+<!DOCTYPE html>\r
+<html><head>\r
+<meta charset="UTF-8">\r
+<script src="/rom/m/mbedJS.all-min.js"></script>\r
+<script type="text/javascript">\r
+function start()\r
+{\r
+  var mcu=new mbedJS.Mcu(location.host,{\r
+    onNew:function(){\r
+      var v=1;\r
+      var pin=new mbedJS.DigitalOut(mcu,mbedJS.PinName.LED1,{\r
+      onNew:function(){\r
+        pin.write(1);\r
+      },\r
+      onWrite:function(){\r
+           setTimeout(function(){pin.write((v++)%2);},100);\r
+      }});\r
+    },\r
+    onError:function(){alert("Error!");}\r
+    });\r
+}\r
+</script>\r
+</head>\r
+<h1 id="title">LED Blink</h1>\r
+<body onload="start()">\r
+</body>\r
+</html>\r
+</textarea>\r
+</div>\r
+<div class="tagp" style="width:40%">\r
+       <div class="tag">Preview</div>\r
+       <div id="preview"></div>\r
+</div>\r
+<div class="footer" style="clear:both">\r
+       MiMic project<br/>Copyright (C) 2011-2013 <a href="http://nyatla.jp">nyatla.jp</a> All Rights Reserved.\r
+</div>\r
+</body>\r
+</html>\r