Permalink
Browse files

started work on getting the tile data separated from the HTML

  • Loading branch information...
1 parent 0363ebc commit 70e295292a234d0d3d09e2ca1e6b8cd7ca67e3a4 @AlanBell committed Jun 15, 2012
Showing with 106 additions and 61 deletions.
  1. +2 −2 say.js
  2. +3 −58 speak.html
  3. +10 −0 tiles.js
  4. +88 −0 tiles.json
  5. +3 −1 wespeak.css
View
4 say.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -18,6 +18,7 @@
});
</script>
+<script type="text/javascript" src="tiles.js"></script>
<title>Click to speak</title>
</head>
@@ -33,61 +34,8 @@
</select>
<br/>
-<div class="wordtile noun">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Honey_Jar_icon.svg/86px-Honey_Jar_icon.svg.png">
-Honey
-</div>
-
-<div class="wordtile noun">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Milk_carton_icon.svg/120px-Milk_carton_icon.svg.png">
-Milk
-</div>
-
-<div class="wordtile noun">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Popcorn_icon.png/120px-Popcorn_icon.png"/>
-Popcorn
-</div>
-
-<div class="wordtile verb">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Crystal_Clear_app_package_favourite.png/120px-Crystal_Clear_app_package_favourite.png"/>
-Hug
-</div>
-
-<div class="wordtile verb">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Crystal_Project_package_games_kids.png/120px-Crystal_Project_package_games_kids.png"/>
-Play
-</div>
-
-<div class="wordtile other">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Circle-Thumb.png/120px-Circle-Thumb.png"/>
-Yes
-</div>
-
-<div class="wordtile other">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Circle-Thumb-Down.png/120px-Circle-Thumb-Down.png"/>
-No
-</div>
-
-<a id="weather" class="secondlevel fancybox.iframe" href="weather.html">
-<div class="wordtile other">
-<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Crystal_Project_kweather.png/120px-Crystal_Project_kweather.png"/>
-Weather . . .
-</div>
-</a>
-
-<div class="wordtile other">
-Please</div>
-
-<div class="wordtile other">
-can I have</div>
-
-<div class="wordtile other">
-Thankyou</div>
-
-<a id="time" class="secondlevel fancybox.iframe" href="time.html"><div class="wordtile other">
-Time . . .</div></a>
-<a id="numbers" class="secondlevel fancybox.iframe" href="numbers.html"><div class="wordtile other">
-Numbers . . .</div></a>
+<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:
@@ -114,9 +62,6 @@
</ul>
</p>
-<script>
-$(document).ready( $(".wordtile").click(function(){say(this)}));
-</script>
<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>
View
@@ -0,0 +1,10 @@
+$.getJSON('tiles.json', function(data) {
+ var items = [];
+ $.each(data, function(key, val) {
+ $("#tiles").append('<div id="tile'+key+'" class="wordtile '+val.lexicalclass+'"></div>');
+ $("#tile"+key).append(val.Title.en_us);
+ $("#tile"+key).click(function(){say(key)});
+ });
+});
+
+
View
@@ -0,0 +1,88 @@
+{
+ "Jam": {
+ "Title": {
+ "en_gb": "Jam",
+ "en_us": "Jelly"
+ },
+ "Image": "http://imedia.brookes.ac.uk/imageshare/cache/StrawberryJam-200x200.jpg",
+ "lexicalclass": [
+ "noun"
+ ],
+ "position": [
+ 3,
+ 4
+ ]
+ },
+ "Jelly": {
+ "Title": {
+ "en_gb": "Jelly",
+ "en_us": "Jello"
+ },
+ "Image": "http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Food-Jelly.svg/120px-Food-Jelly.svg.png",
+ "lexicalclass": [
+ "noun"
+ ]
+ },
+ "biscuit": {
+ "Title": {
+ "en_gb": "Biscuit",
+ "en_us": "Cookie"
+ },
+ "Image": "http://www.nicecupofteaandasitdown.com/biscuits/media/maltedmilk.jpg",
+ "lexicalclass": [
+ "noun"
+ ]
+ },
+ "Laugh": {
+ "Title": {
+ "en_gb": "Hehe",
+ "en_us": "Lol"
+ },
+ "lexicalclass": [
+ "interjection"
+ ]
+ },
+ "Me": {
+ "Title": {
+ "en_gb": "myself",
+ "en_us": "myself"
+ },
+ "lexicalclass": [
+ "person",
+ "noun"
+ ]
+ },
+ "Weather": {
+ "Title": {
+ "en_gb": "myself",
+ "en_us": "myself"
+ },
+ "lexicalclass": [
+ "topic",
+ "noun"
+ ],
+ "subtiles": {
+ "Rain": {
+ "Title": {
+ "en_gb": "Precipitation",
+ "en_us": "Rain"
+ },
+ "lexicalclass": [
+ "noun"
+ ]
+ },
+ "Snow": {
+ "Title": {
+ "en_gb": "Snow",
+ "en_us": "Snow"
+ },
+ "lexicalclass": [
+ "noun"
+ ]
+ }
+ }
+ },
+ "Time": {
+ "Include": "time.json"
+ }
+}
View
@@ -42,7 +42,9 @@ background:#89a8cd;
background:#82a0c3;
}
.other{
-background:#9aeab3;
+background:#9aeab3;}
+.frequent{
+background:#faaab3;
}
.other:hover{
background:#92deaa;

0 comments on commit 70e2952

Please sign in to comment.