diff --git a/speak.html b/speak.html index 4ce7530..606bed2 100644 --- a/speak.html +++ b/speak.html @@ -1,6 +1,7 @@ + - + @@ -33,34 +34,13 @@

What do you want to say?

-
+
-
- -

-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: -

+
+ - -

Fork me on GitHub diff --git a/tiles.js b/tiles.js index 8eb4f5a..dbac531 100644 --- 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('
'); - $("#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(''); + } + + //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('
'); + //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('
'); + $("#tile"+key+"modifierstrawberry").append("Strawberry"); + $("#tile"+key+"modifiers").append('
'); + $("#tile"+key+"modifierapricot").append("Apricot"); + }); }); diff --git a/tiles.json b/tiles.json index 53f4af6..272389f 100644 --- 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 index 61d5f34..9395432 100644 --- 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; }