Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
158 lines (131 sloc) 5 KB
<html>
<head>
<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>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="say.js"></script>
<script>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.secondlevel").fancybox({'hideOnContentClick': true,'width':'75%','height':'75%','type':'iframe'});
});
</script>
<title>Click to speak</title>
</head>
<style>
body{
font-family:"Ubuntu";
}
.wordtile{
border:none;
width:100px;
height:180px;
float:left;
text-align:center;
margin:5px;
padding-top:10px;
border-radius:15px;
box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
position:relative;
}
.wordtile img{
width:80px;
margin:10px;
position:absolute;
left:0px;
bottom:10px;}
.verb{
background:#e8b7a6;
}
.noun{
background:#89a8cd;
}
.other{
background:#9aeab3;
}
</style>
<body>
<h1>What do you want to say?</h1>
Voice: <select id="voice" >
<option selected="selected" value="dfki-poppy-hsmm">Poppy</option>
<option value ="dfki-spike-hsmm">Spike</option>
<option value ="dfki-prudence-hsmm">Prudence</option>
<option value ="dfki-obadiah-hsmm">Obadiah</option>
<option value ="cmu-slt-hsmm">Sarah</option>
</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="http://people.ubuntu.com/~alanbell/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="http://people.ubuntu.com/~alanbell/time.html"><div class="wordtile other">
Time . . .</div></a>
<div class="wordtile other">
Now</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>
</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>
</body>
</html>