referenceImageCreator.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="../../support/closure-library/closure/goog/base.js"></script>
  4. <script type="text/javascript" src="../../support/closure-library/closure/goog/deps.js"></script>
  5. <script type="text/javascript" src="../../src/env.js"></script>
  6. <script type="text/javascript" src="../../src/builtin.js"></script>
  7. <script type="text/javascript" src="../../src/errors.js"></script>
  8. <script type="text/javascript" src="../../src/type.js"></script>
  9. <script type="text/javascript" src="../../src/object.js"></script>
  10. <script type="text/javascript" src="../../src/bool.js"></script>
  11. <script type="text/javascript" src="../../src/function.js"></script>
  12. <script type="text/javascript" src="../../src/native.js"></script>
  13. <script type="text/javascript" src="../../src/method.js"></script>
  14. <script type="text/javascript" src="../../src/misceval.js"></script>
  15. <script type="text/javascript" src="../../src/abstract.js"></script>
  16. <script type="text/javascript" src="../../src/mergesort.js"></script>
  17. <script type="text/javascript" src="../../src/list.js"></script>
  18. <script type="text/javascript" src="../../src/str.js"></script>
  19. <script type="text/javascript" src="../../src/tuple.js"></script>
  20. <script type="text/javascript" src="../../src/dict.js"></script>
  21. <script type="text/javascript" src="../../src/biginteger.js"></script>
  22. <script type="text/javascript" src="../../src/number.js"></script>
  23. <script type="text/javascript" src="../../src/long.js"></script>
  24. <script type="text/javascript" src="../../src/int.js"></script>
  25. <script type="text/javascript" src="../../src/float.js"></script>
  26. <script type="text/javascript" src="../../src/slice.js"></script>
  27. <script type="text/javascript" src="../../src/set.js"></script>
  28. <script type="text/javascript" src="../../src/module.js"></script>
  29. <script type="text/javascript" src="../../src/generator.js"></script>
  30. <script type="text/javascript" src="../../src/file.js"></script>
  31. <script type="text/javascript" src="../../src/ffi.js"></script>
  32. <script type="text/javascript" src="../../src/enumerate.js"></script>
  33. <script type="text/javascript" src="../../src/tokenize.js"></script>
  34. <script type="text/javascript" src="../../gen/parse_tables.js"></script>
  35. <script type="text/javascript" src="../../src/parser.js"></script>
  36. <script type="text/javascript" src="../../gen/astnodes.js"></script>
  37. <script type="text/javascript" src="../../src/ast.js"></script>
  38. <script type="text/javascript" src="../../src/symtable.js"></script>
  39. <script type="text/javascript" src="../../src/compile.js"></script>
  40. <script type="text/javascript" src="../../src/import.js"></script>
  41. <script type="text/javascript" src="../../src/timsort.js"></script>
  42. <script type="text/javascript" src="../../src/builtindict.js"></script>
  43. <script type="application/javascript" src="../../dist/skulpt-stdlib.js"></script>
  44. <script src="../../doc/static/codemirror.js" type="application/javascript"></script>
  45. <script src="../../doc/static/python.js"></script>
  46. <link rel="stylesheet" type="text/css" media="all" href="../../doc/static/codemirror.css">
  47. <link rel="stylesheet" type="text/css" media="all" href="../../doc/static/solarized.css">
  48. </head>
  49. <body>
  50. <h3>Saving a reference image.</h3>
  51. <p>
  52. To make a test for the turtle module you can use this page to save a reference image.
  53. </p>
  54. <p>
  55. Testname: <input type="text" id="testname">
  56. </p>
  57. <p>
  58. <div>
  59. <label for="animate">animate:</label> <input type="radio" id="animate" name="animate">
  60. <label for="animate2">don't animate:</label> <input type="radio" id="animate2" name="animate">
  61. </div>
  62. </p>
  63. <div id="example1">
  64. <form>
  65. <textarea edit_id="eta_5" id="example1_code" cols="60" rows="10">
  66. import turtle
  67. t = turtle.Turtle()</textarea>
  68. <button onclick="runit('example1')" type="button">Run</button>
  69. <button onclick="save()" type="button">Save</button>
  70. </form>
  71. <canvas id="example1_canvas" height="200" width="200" style="border-style: solid; display: none"></canvas>
  72. <pre id="example1_pre"></pre>
  73. </div>
  74. <script type="text/javascript">
  75. function outf(text) {
  76. var mypre = document.getElementById(Sk.pre);
  77. mypre.innerHTML = mypre.innerHTML + text;
  78. }
  79. window.Cm = CodeMirror.fromTextArea(document.getElementById("example1_code"), {
  80. parserfile: ["parsepython.js"],
  81. autofocus: true,
  82. theme: "solarized dark",
  83. lineNumbers: true,
  84. textWrapping: false,
  85. indentUnit: 4,
  86. height: "160px",
  87. fontSize: "9pt",
  88. autoMatchParens: true,
  89. parserConfig: {
  90. 'pythonVersion': 2,
  91. 'strictErrors': true
  92. }
  93. });
  94. function save() {
  95. var canvas = document.getElementById("example1_canvas"),
  96. imgData = canvas.toDataURL(),
  97. noanim = document.getElementById("animate2").checked;
  98. outf('it("' + document.getElementById("testname").value + '", function (done) {\n');
  99. outf(' var cctx = c.getContext("2d"),\n');
  100. outf(' code = "' + window.Cm.getValue().replace(/\n/g,'\\n').replace(/\"/g, '\\"') + '",\n');
  101. outf(' refctx = ref.getContext("2d");\n');
  102. if (!noanim) {
  103. outf(' loadImage("' + imgData + '");\n');
  104. outf(' TurtleGraphics.doneDelegates.push(function () {\n');
  105. outf(' expect(cctx).toImageDiffEqual(refctx);\n');
  106. outf(' done();\n');
  107. outf(' });\n');
  108. outf(' Sk.importMainWithBody("<stdin>", false, code);\n');
  109. } else {
  110. outf(' loadImage("' + imgData + '", function () {\n');
  111. outf(' Sk.importMainWithBody("<stdin>", false, code);\n');
  112. outf(' expect(cctx).toImageDiffEqual(refctx);\n');
  113. outf(' done();\n');
  114. outf(' });\n');
  115. }
  116. outf('});');
  117. }
  118. function builtinRead(x) {
  119. if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
  120. throw "File not found: '" + x + "'";
  121. return Sk.builtinFiles["files"][x];
  122. }
  123. function runit(myDiv) {
  124. //var prog = document.getElementById(myDiv + "_code").value;
  125. var mypre = document.getElementById(myDiv + "_pre");
  126. mypre.innerHTML = '';
  127. Sk.canvas = myDiv + "_canvas";
  128. if (document.getElementById("animate2").checked) {
  129. TurtleGraphics = {
  130. defaults: {
  131. animate: false,
  132. canvasID: Sk.canvas,
  133. degrees: true
  134. }
  135. }
  136. }
  137. var can = document.getElementById(Sk.canvas);
  138. can.style.display = 'block';
  139. if (can) {
  140. can.width = can.width;
  141. if (Sk.tg) {
  142. Sk.tg.canvasInit = false;
  143. Sk.tg.turtleList = [];
  144. }
  145. }
  146. Sk.pre = myDiv+"_pre";
  147. Sk.configure({
  148. output: outf,
  149. read: builtinRead
  150. });
  151. //try {
  152. Sk.importMainWithBody("<stdin>", false, window.Cm.getValue());
  153. //} catch (e) {
  154. // alert(e);
  155. // }
  156. }
  157. </script>
  158. </body>
  159. </html>