use json-editor to generate parameter form

5 years ago · 2da6b865c3
2 changed files with 71 additions and 5 deletions
--- a/chaostest/connected-lines.html
+++ b/chaostest/connected-lines.html
@ -6,11 +6,18 @@
				@@ -6,11 +6,18 @@
 <html>
 <head>
 <script type="text/javascript" src="paper.js"></script>
+<script type="text/javascript" src="jsoneditor.min.js"></script>
 <script type="text/javascript" src="connected-lines.js" canvas="canvas"></script>
 <script type="text/javascript">
+var params;
+
+function rnd_params() {
+    params = connected_lines_get_rnd_params();
+}
+
 function draw() {
     paper.project.clear();
-     var grp = connected_lines();
+     var grp = connected_lines(params);
     grp.scale(500, new Point(0,0));
 }

@ -21,6 +28,7 @@ function get_svg() {
				@@ -21,6 +28,7 @@ function get_svg() {
 window.onload = function() {
    paper.install(window);
    paper.setup(document.getElementById('canvas'));
+    rnd_params();
    draw();

    document.getElementById('download-svg').addEventListener('click', function() {
@ -35,6 +43,57 @@ window.onload = function() {
				@@ -35,6 +43,57 @@ window.onload = function() {
     document.getElementById('draw').addEventListener('click', function() {
         draw();
     });
+
+     var editor = new JSONEditor(document.getElementById('params'), {
+         no_additional_properties: true,
+         disable_edit_json: true,
+         disable_properties: true,
+         disable_collapse: true,
+         startval: params,
+         schema: {
+             type: 'object',
+             title: 'Parameters',
+             properties: {
+                 start_x: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 1,
+                 },
+                 start_y: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 1,
+                 },
+                 offs_x: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 0.1,
+                     format: 'range',
+                     step: 0.0001
+
+                 },
+                 offs_y: {
+                     type: 'number',
+                     minimum: 0,
+                     maximum: 0.1,
+                     format: 'range',
+                     step: 0.0001
+
+                 },
+                 num_steps: {
+                     type: 'integer',
+                     minimum: 1,
+                     maximum: 10,
+                     format: 'range'
+                 }
+             }
+         }
+     });
+
+     editor.on('change', function() {
+         params = editor.getValue();
+         draw();
+     });
 }
 </script>

@ -44,6 +103,8 @@ window.onload = function() {
				@@ -44,6 +103,8 @@ window.onload = function() {
 <hr>
 <button id="download-svg">download svg</button>
 <button id="draw">draw</button>
+<br>
+<div id="params"></div>

 </body>
 </html>
--- a/chaostest/connected-lines.js
+++ b/chaostest/connected-lines.js
@ -1,8 +1,10 @@
				@@ -1,8 +1,10 @@

 function connected_lines_get_rnd_params() {
    return {
-        start: new paper.Point(Math.random(), Math.random()),
-        offs: new paper.Point(0.05, 0.05),
+        start_x: Math.random(),
+        start_y: Math.random(),
+        offs_x: 0.05,
+        offs_y: 0.05,
        num_steps: 5,
    };
 }
@ -13,10 +15,13 @@ function connected_lines(params) {
				@@ -13,10 +15,13 @@ function connected_lines(params) {
        var params = connected_lines_get_rnd_params();
    }

+    var start = new paper.Point(params.start_x, params.start_y);
+    var offs = new paper.Point(params.offs_x, params.offs_y);
+
    var lines = [];
    for(var i=0; i<2; i++) {
-        var x = params.start.x + i*params.offs.x;
-        var y = params.start.y + i*params.offs.y;
+        var x = start.x + i*offs.x;
+        var y = start.y + i*offs.y;
        var path = new paper.Path({strokeWidth: 5, strokeColor: 'black'});
        for(var s=0; s<params.num_steps; s++) {
            x = (4*x*(1-x)) % 1;