[Toss-devel-svn] SF.net SVN: toss:[1738] trunk/Toss

SourceForge Headquarters 1320 Columbia Street Suite 310 San Diego, CA 92101 +1 (858) 422-6466

Revision: 1738
          http://toss.svn.sourceforge.net/toss/?rev=1738&view=rev
Author:   lukaszkaiser
Date:     2012-07-02 00:27:40 +0000 (Mon, 02 Jul 2012)
Log Message:
-----------
Interface work on the structure editor.

Modified Paths:
--------------
    trunk/Toss/Client/Style.css
    trunk/Toss/Client/eval.html
    trunk/Toss/Formula/Lexer.mll

Modified: trunk/Toss/Client/Style.css
===================================================================

--- trunk/Toss/Client/Style.css	2012-06-27 23:29:07 UTC (rev 1737)
+++ trunk/Toss/Client/Style.css	2012-07-02 00:27:40 UTC (rev 1738)
@@ -64,7 +64,7 @@
     float: right;
 }
 
-.obt, .boldobt, .gamebt {
+.obt, .boldobt, .gamebt, .ebt {
     text-align: left;
     border-color: #260314;
     border-radius: 4px;
@@ -76,7 +76,7 @@
     font-family: Verdana, 'TeXGyreHerosRegular', sans;
 }
 
-.obt:hover {
+.obt:hover, .ebt:hover, .boldobt:hover, .gamebt:hover {
     cursor: pointer;
     text-decoration: underline;
 }
@@ -86,9 +86,9 @@
     font-size: 1em;
 }
 
-.boldobt:hover, .gamebt:hover {
-    cursor: pointer;
-    text-decoration: underline;
+.ebt {
+    /*font-weight: bold;*/
+    border-width: 2px;
 }
 
 .gamebt {
@@ -900,8 +900,8 @@
 
 #board-left {
     position: relative;
-    left: 40em;
-    top: -18em;
+    left: 2em;
+    top: 5em;
 }
 
 #board {
@@ -1006,8 +1006,8 @@
 }
 
 #canvas {
-    width: 30em;
-    height: 30em;
+    width: 28em;
+    height: 28em;
     border: 2px solid  #260314;
 }
 

Modified: trunk/Toss/Client/eval.html
===================================================================
--- trunk/Toss/Client/eval.html	2012-06-27 23:29:07 UTC (rev 1737)
+++ trunk/Toss/Client/eval.html	2012-07-02 00:27:40 UTC (rev 1738)
@@ -2,8 +2,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/xhtml+xml; charset=UTF-8" />
-  <title>Toss Formula Evaluator</title>
-  <meta name="Description" content="Evaluate Formulas on Structures." />
+  <title>Toss Relational Structures Explorer</title>
+  <meta name="Description" content="Explore Relational Structures." />
   <meta http-equiv="X-UA-Compatible" content="chrome=1" />
   <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
   <link rel="stylesheet" type="text/css" href="Style.css" media="screen" title="Default"/>
@@ -51,8 +51,10 @@
 function eval_it () {
   var rels = document.getElementById ("relations").value;
   var pos = document.getElementById ("positions").value;
-  var elems = document.getElementById ("no-elems").value;
-  var struc = "[ 1 - " + elems + " |  | - ] with " + rels + " with " + pos;
+  var elemsF = document.getElementById ("no-elems-start").value;
+  var elemsT = document.getElementById ("no-elems-end").value;
+  var struc = "[ " + elemsF + " - " + elemsT + " |  | - ] with " +
+    rels + " with " + pos;
   ASYNCH ("draw_struc", [struc], true, function (s) { 
      var ctx = document.getElementById("canvas").getContext("2d");
      eval (s);
@@ -60,7 +62,7 @@
 }
 
 
-function canvasCoords (event) { // From stackoverflow.com
+function canvasCoords (eventPageX, eventPageY) { // From stackoverflow.com
     var totalOffsetX = 0;
     var totalOffsetY = 0;
     var canvasX = 0;
@@ -74,8 +76,8 @@
     }
     while (currentElement = currentElement.offsetParent)
 
-    canvasX = event.pageX - totalOffsetX;
-    canvasY = event.pageY - totalOffsetY;
+    canvasX = eventPageX - totalOffsetX;
+    canvasY = eventPageY - totalOffsetY;
 
     // Fix for variable canvas width
     canvasX = Math.round( canvasX * (canvas.width / canvas.offsetWidth) );
@@ -85,48 +87,89 @@
 }
 
 function mouseup_handle (e) {
-    var pos = canvasCoords (e);
+    var pos = canvasCoords (e.pageX, e.pageY);
     ASYNCH ("mouseup_handle", [pos.x, pos.y], true, function (s) { 
      var ctx = document.getElementById("canvas").getContext("2d");
      eval (s);
   })
 }
 
+function touchend_handle (e) {
+    var pos = canvasCoords (e.targetTouches[0].pageX, e.targetTouches[0].pageY);
+    ASYNCH ("mouseup_handle", [pos.x, pos.y], false, function (s) { 
+     var ctx = document.getElementById("canvas").getContext("2d");
+     eval (s);
+  })
+}
+
 function mousedown_handle (e) {
-    var pos = canvasCoords (e);
+    var pos = canvasCoords (e.pageX, e.pageY);
     ASYNCH ("mousedown_handle", [pos.x, pos.y], true, function (s) { 
      var ctx = document.getElementById("canvas").getContext("2d");
      eval (s);
   })
 }
 
+function touchstart_handle (e) {
+    var pos = canvasCoords (e.targetTouches[0].pageX, e.targetTouches[0].pageY);
+    ASYNCH ("mousedown_handle", [pos.x, pos.y], false, function (s) { 
+     var ctx = document.getElementById("canvas").getContext("2d");
+     eval (s);
+  })
+}
+
 function mousemove_handle (e) {
-    var pos = canvasCoords (e);
+    var pos = canvasCoords (e.pageX, e.pageY);
     ASYNCH ("mousemove_handle", [pos.x, pos.y], false, function (s) { 
      var ctx = document.getElementById("canvas").getContext("2d");
      eval (s);
   })
 }
 
+function touchmove_handle (e) {
+    e.preventDefault(); // avoid elastic page scrolling on tablets
+    var pos = canvasCoords (e.targetTouches[0].pageX, e.targetTouches[0].pageY);
+    ASYNCH ("mousemove_handle", [pos.x, pos.y], false, function (s) { 
+     var ctx = document.getElementById("canvas").getContext("2d");
+     eval (s);
+  })
+}
+
+
 function handle_elem_click (eid) { console.log (eid); }
 
 function example_primes () {
+  document.getElementById ("struc-name").value = "Prime Numbers";
   document.getElementById ("relations").value =
-    "P(z) = &z > 1 and all x, y \n    (&x * &y = &z -> (&x = 1 or &y = 1))";
+    "P(z) = &z > 1 and ∀ x, y \n    (&x · &y = &z → (&x = 1 ∨ &y = 1))";
   document.getElementById ("positions").value = ":x(a) = &a; \n:y(a) = 0";
-  document.getElementById ("no-elems").value = "10";
+  document.getElementById ("no-elems-start").value = "1";
+  document.getElementById ("no-elems-end").value = "10";
   eval_it ();
 }
 
 function example_tc () {
+  document.getElementById ("struc-name").value = "Transitive Closure";
   document.getElementById ("relations").value =
     "E(x, y) = &y = &x + 1;\n" +
-    "S(x, y) = x != y and tc x, y E(x, y)";
-  document.getElementById ("positions").value = ":x(a) = 10*&a;\n:y(a) = &a*&a";
-  document.getElementById ("no-elems").value = "4";
+    "S(x, y) = x ≠ y ∧ tc x,y E(x, y)";
+  document.getElementById("positions").value=":x(a) = 5·&a;\n:y(a) = &a·&a / 2";
+  document.getElementById ("no-elems-start").value = "1";
+  document.getElementById("no-elems-end").value = "4";
   eval_it ();
 }
 
+function example_basic () {
+  document.getElementById ("struc-name").value = "Basic Example";
+  document.getElementById ("relations").value =
+    "E(x, y) = (&y = &x + 1) ∨ (&x=15 ∧ &y=1)";
+  document.getElementById ("positions").value = ":x(a) = &a;\n" +
+    ":y(a) = &a · (10 - &a) / 10";
+  document.getElementById ("no-elems-start").value = "1";
+  document.getElementById ("no-elems-end").value = "15";
+  eval_it ();
+}
+
 function example_3col () {
   document.getElementById ("formula").value = 
     "ex |R, |G, |B all x, y ( \n  ( |R(x) or |G(x) or |B(x)) and (" +
@@ -139,24 +182,131 @@
   eval_it ();
 }
 
-function example_heart_drawing () {
+function example_heart () {
+  document.getElementById ("struc-name").value = "Heart Drawing";
   document.getElementById ("relations").value = 
-    "E(x, y) = (&y = &x + 1 and &x != 18) ∨ (&x=37 ∧ &y=18)";
+    "E(x, y) = (&y = &x + 1 ∧ &x ≠ 18) ∨ (&x=37 ∧ &y=18)";
   document.getElementById ("positions").value =
-    ":x(a) = :(&a <= 18) * (:(&a =< 10) * &a - :(&a > 10) * (&a - 20)) \n" +
-    " - let :b = &a - 18 in :(&a > 18) * (:(:b =< 10) * :b - \n  " +
-    " :(:b > 10) * (:b - 20) - 2); \n\n" +
-    ":y(a) = :(&a <= 18) * (:(&a =< 10) *&a · (10 - &a) / 10 - \n  " +
-    "  :(&a > 10)*(&a - 10)) + let :b = &a - 18 in \n" +
-    " :(&a > 18) * (:(:b =< 10) *:b · (10 - :b) / 10 - :(:b > 10)*(:b - 10))";
-  document.getElementById ("no-elems").value = "37";
+    ":x(a) = :(&a ≤ 18) · (:(&a ≤ 10) · &a - :(&a > 10) · (&a - 20)) \n" +
+    " - let :b = &a - 18 in :(&a > 18) · (:(:b ≤ 10) · :b - \n  " +
+    " :(:b > 10) · (:b - 20) - 2); \n\n" +
+    ":y(a) = :(&a ≤ 18) · (:(&a ≤ 10) ·&a · (10 - &a) / 10 - \n  " +
+    "  :(&a > 10)·(&a - 10)) + let :b = &a - 18 in \n" +
+    " :(&a > 18) · (:(:b ≤ 10) ·:b · (10 - :b) / 10 - :(:b > 10)·(:b - 10))";
+  document.getElementById ("no-elems-start").value = "1";
+  document.getElementById ("no-elems-end").value = "37";
   eval_it ();
 }
+
+function add_field (field, s) {
+  var e = document.getElementById(field);
+  var cursor = e.selectionStart;
+  var v1 = e.value.substring(0, cursor);
+  var v2 = e.value.substring(cursor, e.value.length);
+  e.value = v1 + s + " " + v2;
+  e.selectionStart = cursor + 2;
+}
+
+function add_elem () {
+  var e = document.getElementById ("no-elems-end").value;
+  document.getElementById ("no-elems-end").value = parseInt(e) + 1;
+  eval_it ();
+}
+
+function del_elem () {
+  var e = document.getElementById ("no-elems-end").value;
+  document.getElementById ("no-elems-end").value = parseInt(e) - 1;
+  eval_it ();
+}
+
+function save () {
+  var name = document.getElementById ("struc-name").value;
+  var elems1 = document.getElementById ("no-elems-start").value;
+  var elems2 = document.getElementById ("no-elems-end").value;
+  var rels = document.getElementById ("relations").value;
+  var pos = document.getElementById ("positions").value;
+  localStorage["TRelStrucExplEl1"+name] = elems1;
+  localStorage["TRelStrucExplEl2"+name] = elems2;
+  localStorage["TRelStrucExplRel"+name] = rels;
+  localStorage["TRelStrucExplPos"+name] = pos;
+  list_stored ();
+}
+
+function load (name) {
+  document.getElementById ("struc-name").value = name;
+  document.getElementById ("no-elems-start").value =
+    localStorage["TRelStrucExplEl1"+name];
+  document.getElementById ("no-elems-end").value =
+    localStorage["TRelStrucExplEl2"+name];
+  document.getElementById ("relations").value =
+    localStorage["TRelStrucExplRel"+name];
+  document.getElementById ("positions").value =
+    localStorage["TRelStrucExplPos"+name];
+  eval_it ();
+}
+
+function list_stored () {
+  var saved = document.getElementById("saved-strucs");
+  while (saved.childNodes.length > 0) { saved.removeChild(saved.firstChild); }
+  for (var i=0; i < localStorage.length; i++) {
+    var k = localStorage.key(i);
+    if (k.substring (0, 16) === "TRelStrucExplEl1") {
+      var n = k.substring (16, k.length);
+      var li = document.createElement('li');
+      li.innerHTML = '<button class="obt" onclick="load('+ "'"+ n +"'" +')">' +
+        n +'</button> (<button class="obt" onclick="del_saved('+ "'"+ n +
+        "'" +')" title="Delete this structure.">-</button>)';
+      saved.appendChild (li);
+    }
+  }
+}
+
+function del_saved (name) {
+  localStorage.removeItem("TRelStrucExplEl1"+name);
+  localStorage.removeItem("TRelStrucExplEl2"+name);
+  localStorage.removeItem("TRelStrucExplRel"+name);
+  localStorage.removeItem("TRelStrucExplPos"+name);
+  list_stored ();
+}
+
+function toggle_edit () {
+  var bt = document.getElementById("editbt");
+  if (bt.innerHTML == "Edit") {
+    document.getElementById('edit').style.display = 'block';
+    document.getElementById('board-left').style.left = '38em';
+    bt.innerHTML = "Hide Edit";
+  } else {
+    document.getElementById('edit').style.display = 'none';
+    document.getElementById('board-left').style.left = '2em';
+    bt.innerHTML = "Edit";
+  }
+}
+
+function toggle_view () {
+  var bt = document.getElementById("viewbt");
+  if (bt.innerHTML == "View") {
+    document.getElementById('board-left').style.display = 'block';
+    bt.innerHTML = "Hide View";
+  } else {
+    document.getElementById('board-left').style.display = 'none';
+    bt.innerHTML = "View";
+  } 
+}
+
+function adjust_to_width () {
+  var e = document.getElementById ("edit");
+  var em_size = 
+    document.defaultView.getComputedStyle(e,null).getPropertyValue('font-size');
+  var em_size_int = parseInt (em_size.substring (0, em_size.length - 2));
+  if (window.innerWidth > 80 * em_size_int) { // enough space for edit
+    toggle_edit ()
+  }
+}
 //-->
 </script>
 </head>
 
-<body onload="init_canvas (); eval_it ()">
+<body onload="init_canvas (); list_stored (); eval_it (); adjust_to_width()">
 <div id="main">
 
 <div id="top">
@@ -165,46 +315,96 @@
     <img id="leftupperlogo-img" src="img/logo.png" alt="back" />
   </a>
 </div>
+<span style="position: relative; left: 2em; top: 0.5em; font-size: 1.2em">
+  Relational Structures Explorer</span>
+<span id="toprighttab" style="display: block;">
+  <button class="obt" id="editbt" onclick="toggle_edit()">Edit</button>
+  <button class="obt" id="viewbt" onclick="toggle_view()">Hide View</button>
+</span>
 </div>
 
-<div style="position: relative; top: 4em; left: 2em">
+<div id="board-left">
+<canvas id="canvas" height="1100" width="1100"
+        onmouseup="mouseup_handle(event)"
+        onmousedown="mousedown_handle(event)"
+        onmousemove="mousemove_handle(event)"
+        ontouchstart="touchstart_handle(event)"
+        ontouchend="touchend_handle(event)"
+        ontouchmove="touchmove_handle(event)">
+This text is displayed if your browser does not support HTML5 Canvas.
+</canvas>
+</div>
 
-<p>Relations:</p>
+<div id="edit" style="position: absolute; top: 4em; left: 2em; display: none">
 
-<textarea id="relations" rows="3" cols="60">
+<p>Name &nbsp; &nbsp; &nbsp; &nbsp;
+  <input id="struc-name" type="text" size="20" value="MyStructure1"
+         style="width: 10em"></input> &nbsp;
+  <button class="ebt" onclick="save()">Save</button>
+</p>
+
+<p>Elements &nbsp; &nbsp;
+  <input id="no-elems-start" type="text" size="2" value="1"
+         style="width: 2em"></input> &mdash;
+  <input id="no-elems-end" type="text" size="4" value="15"
+         style="width: 2em"></input> &nbsp;
+  <button class="ebt" onclick="add_elem()">+</button>
+  <button class="ebt" onclick="del_elem()">-</button> &nbsp;
+</p>
+
+<p>Relations &nbsp; &nbsp; 
+  <button class="ebt" title="Conjunction. You can also write 'and' or '&'."
+          onclick="add_field('relations', '∧')">∧</button> &nbsp; 
+  <button class="ebt" title="Disjunction. You can also write 'or' or '|'."
+          onclick="add_field('relations', '∨')">∨</button> &nbsp; 
+  <button class="ebt" title="Negation. You can also write 'not'."
+          onclick="add_field('relations', '¬')">¬</button> &nbsp; 
+  <button class="ebt" title="Implication. You can also write '->'."
+          onclick="add_field('relations', '→')">→</button> &nbsp; 
+  <button title="Existential Quantifier. You can also write 'ex' or '\E'."
+          class="ebt" onclick="add_field('relations', '∃')">∃</button> &nbsp; 
+  <button title="Universal Quantifier. You can also write 'all' or '\A'."
+          class="ebt" onclick="add_field('relations', '∀')">∀</button> &nbsp;
+  &nbsp; <button class="ebt" onclick="eval_it()">Redraw</button>
+</p>
+<textarea id="relations" rows="3" cols="70">
 E(x, y) = (&y = &x + 1) ∨ (&x=15 ∧ &y=1)
 </textarea> 
 
-<p>Positions:</p>
-<textarea id="positions" rows="3" cols="60">
+<p>Positions &nbsp; &nbsp;
+  <button class="ebt" onclick="add_field('positions', '+')">+</button> &nbsp; 
+  <button class="ebt" onclick="add_field('positions', '-')">-</button> &nbsp; 
+  <button class="ebt" onclick="add_field('positions', '·')">·</button> &nbsp; 
+  <button class="ebt" onclick="add_field('positions', '/')">/</button> &nbsp; 
+  <button class="ebt" onclick="add_field('positions', '^')">^</button> &nbsp; 
+  &nbsp; <button class="ebt" onclick="eval_it()">Redraw</button>
+</p>
+
+<textarea id="positions" rows="3" cols="70">
 :x(a) = &a;
 :y(a) = &a · (10 - &a) / 10
 </textarea> 
 
-<p>Elements: <input id="no-elems" type="text" size="4" value="15"></input>
-  <button onclick="eval_it()">Draw</button>
-</p>
+</div>
 
-<p>Examples:</p>
+<div style="position: absolute;  top: 4em; right: 0.5em; text-align: left">
+<p>Your Structures</p>
+<ul id="saved-strucs" style="list-style: square; margin-left: -1.5em">
+<li>Nothing here yet</li>
+</ul>
 
-<button onclick="example_primes()">Primes</button>
+<p>Examples</p>
+<ul style="list-style: square; margin-left: -1.5em">
+<li><button class="obt" onclick="example_basic()">Basic Example</button></li>
+<li><button class="obt" onclick="example_primes()">Prime Numbers</button></li>
+<li><button class="obt" onclick="example_tc()">Transitive Closure</button></li>
+<li><button class="obt" onclick="example_heart()">Heart Drawing</button></li>
+</ul>
 
-<button onclick="example_tc()">TC</button>
-
 <!-- <button onclick="example_3col()">3col</button> -->
-
 </div>
 
-<div id="board-left">
-<canvas id="canvas" height="1100" width="1100"
-        onmouseup="mouseup_handle(event)"
-        onmousedown="mousedown_handle(event)"
-        onmousemove="mousemove_handle(event)">
-This text is displayed if your browser does not support HTML5 Canvas.
-</canvas>
-</div>
 
-
 <div id="bottom">
   <div id="bottomright">
     <a href="http://toss.sourceforge.net" id="toss-link">Contact</a>

Modified: trunk/Toss/Formula/Lexer.mll
===================================================================
--- trunk/Toss/Formula/Lexer.mll	2012-06-27 23:29:07 UTC (rev 1737)
+++ trunk/Toss/Formula/Lexer.mll	2012-07-02 00:27:40 UTC (rev 1738)
@@ -175,6 +175,7 @@
   | "<-"            { LARR }
   | "<="            { LDARR }
   | "->"            { RARR }
+  | "→"             { RARR }
   | "=>"            { RDARR }
   | "⇒"             { RDARR }
   | "<->"           { LRARR }

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.



