moving to building the tiles based on a json dataset, adding long cli…

…ck on a tile to get to a page of modifiers
AlanBell · Jun 27, 2012 · 1a8ef43 · 1a8ef43
1 parent 70e2952
commit 1a8ef43
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 32 deletions.
diff --git a/speak.html b/speak.html
@@ -1,6 +1,7 @@
+
 <html>
 <head>
-
+<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
 <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
@@ -33,34 +34,13 @@ <h1>What do you want to say?</h1>
     <option value ="cmu-slt-hsmm">Sarah</option>
   </select>
 
-<br/>
+<br style="clear:both;"/>
 <div id="tiles">
-<div>
-
-<p style="clear:both">
-This should work in modern browsers including popups on weather and time subcategories of words. In Firefox the popup vertical size appears to be broken. It was working, not quite sure where I broke it. The concept so far shows static buttons with no special positioning (all float left) and no build up of phrases. It might be nice to assemble a phrase in an edit window and speak it in one go. The icons are from wikimedia commons. Speech synthesis is done by an OpenMary server running on a machine in a datacentre in Germany. It probably works fine on a touchscreen tablet already, seems OK on my phone. To continue this to a point of usefulness it would need:
-<ul>
-<li>
-Some kind of content management system/database rather than static HTML, preferably something where the community can contribute words/icons but configure which ones they take and how their set is configured.
-</li>
-<li>
-A well thought out structure of words and phrases. I put some different colour styles on verbs and nouns, this might be a good or bad idea, I am not sure.
-</li>
-<li>
-Lots of icons.
-</li>
-<li>
-Possibly static positioning of tiles so that things stay where you remember them to be.
-</li>
-<li>
-Settings to change the voice used and tweak things like speed and pitch.
-</li>
-<li>
-GPL3 license to protect against offensive use of patents.
-</li>
+</div>
+<br style="clear:both;"/>
+<div id="modifiers" style="display:none;">
+</div>
 
-</ul>
-</p>
 
 
 <a href="https://github.com/AlanBell/wespeak"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>

diff --git a/tiles.js b/tiles.js
@@ -1,9 +1,53 @@
 $.getJSON('tiles.json', function(data) {
   var items = [];
+
   $.each(data, function(key, val) {
+    //add an empty div to the root set of tiles
     $("#tiles").append('<div id="tile'+key+'" class="wordtile '+val.lexicalclass+'"></div>');
-    $("#tile"+key).append(val.Title.en_us);
-    $("#tile"+key).click(function(){say(key)});
+    //put the text of appropriate language in the tile
+    $("#tile"+key).append(val.Title.en_gb);
+    //add an image if there is one specified (there is css to force it to a sensible size)
+    if (val.Image){
+      $("#tile"+key).append('<img src="'+val.Image+'"/>');
+    }
+
+    //this bit differentiates between a tap and a long touch
+    var timeout, longtouch;
+    $("#tile"+key).mousedown(function() {
+        timeout = setTimeout(function() {
+            longtouch = true;
+        }, 1000);//TODO this timer should be configurable
+    }).mouseup(function() {
+        if (longtouch) {
+            	$.fancybox($("#tile"+key+"modifiers"),
+		{
+        		'autoDimensions'	: false,
+			'width'         		: 350,
+			'height'        		: 'auto',
+			'transitionIn'		: 'none',
+			'transitionOut'		: 'none'
+		}
+	);
+        } else {
+            //speak the title TODO this might be in a different language to the display title
+            say(val.Title.en_gb);
+        }
+        longtouch = false;
+        clearTimeout(timeout);
+    });
+
+    //above is the tile, now we build the page of modifiers for the tile
+    //these will use a mixture of specific modifiers (Jam -> strawberry, apricot, raspberry, honey, chocolate spread)
+    //and fairly standard modifier sets (big/small, colours etc)
+    //start by adding the modifier set
+    $("#modifiers").append('<div id="tile'+key+'modifiers"></div>');
+    //now for the modifiers declared in the json file add tiles
+    //some maybe modifier sets which get kind of included once somehow
+    $("#tile"+key+"modifiers").append('<div id="tile'+key+'modifierstrawberry" class="wordtile"></div>');
+    $("#tile"+key+"modifierstrawberry").append("Strawberry");
+    $("#tile"+key+"modifiers").append('<div id="tile'+key+'modifierapricot" class="wordtile"></div>');
+    $("#tile"+key+"modifierapricot").append("Apricot");
+
   });
 });
 

diff --git a/tiles.json b/tiles.json
@@ -54,8 +54,8 @@
   },
   "Weather": {
     "Title": {
-      "en_gb": "myself",
-      "en_us": "myself"
+      "en_gb": "rain",
+      "en_us": "weather"
     },
     "lexicalclass": [
       "topic",

diff --git a/wespeak.css b/wespeak.css
@@ -7,7 +7,7 @@ width:100px;
 height:180px;
 float:left;
 text-align:center;
-margin:5px;
+margin:20px;
 cursor: pointer;
 padding-top:10px;
 border-radius:15px;
@@ -43,6 +43,7 @@ background:#82a0c3;
 }
 .other{
 background:#9aeab3;}
+
 .frequent{
 background:#faaab3;
 }