run_template.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. %(scripts)s
  6. <script src="skulpt-stdlib.js" type="text/javascript"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
  8. <script src="https://code.jquery.com/jquery-3.1.0.min.js" crossorigin="anonymous"></script>
  9. </head>
  10. <body>
  11. <h1>In Browser Testing Page</h1>
  12. <p>Open the Javascript Console and click the run button.</p>
  13. <p>Remember that you can add a debugger statement to your Python below or in the Skulpt Javascript.</p>
  14. <script type="text/javascript">
  15. function outf(text) {
  16. var mypre = document.getElementById(Sk.pre);
  17. mypre.innerHTML = mypre.innerHTML + text;
  18. }
  19. function showjs(text) {
  20. var mypre = document.getElementById("runbrowser_jsout");
  21. mypre.innerHTML = mypre.innerHTML + text;
  22. }
  23. function builtinRead(x) {
  24. //console.log(x);
  25. if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) {
  26. throw "File not found: '" + x + "'";
  27. }
  28. var file = Sk.builtinFiles["files"][x];
  29. if (!file) {
  30. return new Promise(function (accept, reject) {
  31. function reqListener () {
  32. console.log(this);
  33. console.log(arguments)
  34. accept(this.responseText);
  35. }
  36. var oReq = new XMLHttpRequest();
  37. oReq.addEventListener("load", reqListener);
  38. oReq.open("GET", "%(root)s" + file);
  39. oReq.send();
  40. });
  41. }
  42. return file;
  43. }
  44. function runit(myDiv) {
  45. var prog = document.getElementById(myDiv+"_code").value;
  46. var mypre = document.getElementById(myDiv+"_pre");
  47. Sk.inputfun = function(prompt) {
  48. return new Promise(function (resolve) { resolve(window.prompt(prompt)); });
  49. };
  50. //Sk.outputfun = alert;
  51. mypre.innerHTML = '';
  52. Sk.console = {
  53. 'container': '#'+myDiv+"_canvas",
  54. 'width': 400,
  55. 'height': 300,
  56. 'pngMode': true,
  57. 'printHtml': function (a,b) {}
  58. }
  59. Sk.canvas = myDiv+"_canvas";
  60. $("#"+Sk.canvas).empty()
  61. var can = document.getElementById(Sk.canvas);
  62. can.style.display = 'block';
  63. if (can) {
  64. can.width = can.width;
  65. if (Sk.tg) {
  66. Sk.tg.canvasInit = false;
  67. Sk.tg.turtleList = [];
  68. }
  69. }
  70. Sk.pre = myDiv+"_pre";
  71. Sk.configure({
  72. output:outf,
  73. read: builtinRead,
  74. inputfunTakesPrompt: true,
  75. debugout: showjs,
  76. debugging: %(debug_mode)s
  77. });
  78. var myPromise = Sk.misceval.asyncToPromise(function() {
  79. return Sk.importMainWithBody("<stdin>",true,prog,true);
  80. });
  81. myPromise.then(function(mod) {}, function(err) {
  82. console.error(err.toString());
  83. console.error(err.nativeError.stack);
  84. });
  85. }
  86. </script>
  87. <h3>Test Code</h3>
  88. <div id="runbrowser">
  89. <form>
  90. <button onclick="runit('runbrowser')" type="button">Run</button><br>
  91. <textarea edit_id="eta_5" id="runbrowser_code" cols="72" rows="20" style="font-family: 'Lucida Console', Monaco, monospace;">
  92. %(code)s
  93. </textarea>
  94. </form>
  95. <h3>Canvas</h3>
  96. <div id="runbrowser_canvas" height="500px" width="800px"
  97. style="border-style: solid; display: none"></div>
  98. <h3>Output</h3>
  99. <pre id="runbrowser_pre" style="background-color: #dddddd"></pre>
  100. <h3>Compiled To Javascript</h3>
  101. <pre id="runbrowser_jsout"></pre>
  102. </div>
  103. </body>
  104. </html>