bogomil/voice UI

## voice UI
<!DOCTYPE html>
<html lang="en-US">
<head>

  <title>Voice Application with TTS</title>

  <!-- Meta Info -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Style Sheets -->
  <link rel="stylesheet" id="stylesheet" href="css/grey-theme.css" type="text/css">

  <!-- jQuery and Plugin Code -->
  <script src="js/jquery-2.1.3.min.js"></script>
  <script src="js/d3.min.js"></script>
  <script src="js/sohoxi.js"></script>
<script type="text/javascript" src="https://rawgithub.com/hiddentao/google-tts/master/google-tts.min.js"></script>

	<script>
	$(function() {
		$('body').initialize('en-US');
	});

	var tts;
	tts = new GoogleTTS('en-US');

    var annyangScript = document.createElement('script');
    if (/localhost/.exec(window.location)) {
      annyangScript.src = "//localhost:8443/annyang.js"
    } else {
      annyangScript.src = "//cdnjs.cloudflare.com/ajax/libs/annyang/1.6.0/annyang.min.js"
    }
    document.write(annyangScript.outerHTML)
  </script>
  <script>
 // "use strict";

  // first we make sure annyang started successfully
  if (annyang) {
	var tts;
    // define the functions our commands will run.
    var hello = function() {
       tts.play("Hello!! To start using this app, say a number from 1 to 5! Enjoy! ");
    };

	var click_me = function() {
	$('#mybtn').trigger('click');
	alert('Clicked! ');
	};

	var good_3 = function() {
	$('.slider').data('slider').value(3)
	tts.play('what a good choice. Three is a good number');
	};

	var good_2 = function() {
	$('.slider').data('slider').value(2)
	tts.play('Yes. Two is the number.');
	};

	var good_1 = function() {
	$('.slider').data('slider').value(1)
	tts.play('One ring to rull them all. Congrats!');
	};


	var good_0 = function() {
	$('.slider').data('slider').value(0)
	tts.play('Yes. Zero is a number too!');
	};

	var good_4 = function() {
	$('.slider').data('slider').value(4)
	tts.play('Four! Four! Who is running! Four!');
	};

	var good_5 = function() {
	$('.slider').data('slider').value(5)
	tts.play('. Whooohooo. Five is the best. Five it is.');
	};
	 // define our commands.
    // * The key is what you want your users to say say.
    // * The value is the action to do.
    //   You can pass a function, a function name (as a string), or write your function as part of the commands object.
    var commands = {
      'hello (there)': hello,
	  'five': good_5,
	  'four':good_4,
	  'three':good_3,
	  'two':good_2,
	  'one':good_1,
	  'zero': good_0
       };

    // OPTIONAL: activate debug mode for detailed logging in the console
    annyang.debug();

    // Add voice commands to respond to
    annyang.addCommands(commands);

    // OPTIONAL: Set a language for speech recognition (defaults to English)
    annyang.setLanguage('en');

    // Start listening. You can call this here, or attach this call to an event, button, etc.
    annyang.start();

	}

  </script>


</head>
<div class="row">
  <div class="twelve columns">
    <h1>Simple Voice Application</h1>
    <span class="label">To start using this app enable your microphone and say 'hello' :)</span>
    <hr>
  </div>
</div>

<div class="row demo-grid">
  <div class="four columns"><div class="content"><h2>What is your favourite number</h2></div></div>
  <div class="six columns"><div class="content">
  <!--start slider-->
  <div class="field">

      <input id="quality" name="quality" class="slider" type="range" min="0" max="5" value="1" step="1" data-ticks='[
        {"value": 0, "description": "0", "color": "#ed1c24"},
        {"value": 1, "description": "1", "color": "#ed1c24"},
        {"value": 2, "description": "2", "color": "#faa719"},
        {"value": 3, "description": "3", "color": "#4fb521"},
        {"value": 4, "description": "4", "color": "#4fb521"},
        {"value": 5, "description": "5", "color": "#157a13"}
      ]'/>
</div>
  <!--end slider-->


  </div></div>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en-US">
	<head>

	<title>Voice Application with TTS</title>

	<!-- Meta Info -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Style Sheets -->
	<link rel="stylesheet" id="stylesheet" href="css/grey-theme.css" type="text/css">

	<!-- jQuery and Plugin Code -->
	<script src="js/jquery-2.1.3.min.js"></script>
	<script src="js/d3.min.js"></script>
	<script src="js/sohoxi.js"></script>
	<script type="text/javascript" src="https://rawgithub.com/hiddentao/google-tts/master/google-tts.min.js"></script>

	<script>
	$(function() {
	$('body').initialize('en-US');
	});

	var tts;
	tts = new GoogleTTS('en-US');

	var annyangScript = document.createElement('script');
	if (/localhost/.exec(window.location)) {
	annyangScript.src = "//localhost:8443/annyang.js"
	} else {
	annyangScript.src = "//cdnjs.cloudflare.com/ajax/libs/annyang/1.6.0/annyang.min.js"
	}
	document.write(annyangScript.outerHTML)
	</script>
	<script>
	// "use strict";

	// first we make sure annyang started successfully
	if (annyang) {
	var tts;
	// define the functions our commands will run.
	var hello = function() {
	tts.play("Hello!! To start using this app, say a number from 1 to 5! Enjoy! ");
	};

	var click_me = function() {
	$('#mybtn').trigger('click');
	alert('Clicked! ');
	};

	var good_3 = function() {
	$('.slider').data('slider').value(3)
	tts.play('what a good choice. Three is a good number');
	};

	var good_2 = function() {
	$('.slider').data('slider').value(2)
	tts.play('Yes. Two is the number.');
	};

	var good_1 = function() {
	$('.slider').data('slider').value(1)
	tts.play('One ring to rull them all. Congrats!');
	};


	var good_0 = function() {
	$('.slider').data('slider').value(0)
	tts.play('Yes. Zero is a number too!');
	};

	var good_4 = function() {
	$('.slider').data('slider').value(4)
	tts.play('Four! Four! Who is running! Four!');
	};

	var good_5 = function() {
	$('.slider').data('slider').value(5)
	tts.play('. Whooohooo. Five is the best. Five it is.');
	};
	// define our commands.
	// * The key is what you want your users to say say.
	// * The value is the action to do.
	// You can pass a function, a function name (as a string), or write your function as part of the commands object.
	var commands = {
	'hello (there)': hello,
	'five': good_5,
	'four':good_4,
	'three':good_3,
	'two':good_2,
	'one':good_1,
	'zero': good_0
	};

	// OPTIONAL: activate debug mode for detailed logging in the console
	annyang.debug();

	// Add voice commands to respond to
	annyang.addCommands(commands);

	// OPTIONAL: Set a language for speech recognition (defaults to English)
	annyang.setLanguage('en');

	// Start listening. You can call this here, or attach this call to an event, button, etc.
	annyang.start();

	}

	</script>


	</head>
	<div class="row">
	<div class="twelve columns">
	<h1>Simple Voice Application</h1>
	<span class="label">To start using this app enable your microphone and say 'hello' :)</span>
	<hr>
	</div>
	</div>

	<div class="row demo-grid">
	<div class="four columns"><div class="content"><h2>What is your favourite number</h2></div></div>
	<div class="six columns"><div class="content">
	<!--start slider-->
	<div class="field">

	<input id="quality" name="quality" class="slider" type="range" min="0" max="5" value="1" step="1" data-ticks='[
	{"value": 0, "description": "0", "color": "#ed1c24"},
	{"value": 1, "description": "1", "color": "#ed1c24"},
	{"value": 2, "description": "2", "color": "#faa719"},
	{"value": 3, "description": "3", "color": "#4fb521"},
	{"value": 4, "description": "4", "color": "#4fb521"},
	{"value": 5, "description": "5", "color": "#157a13"}
	]'/>
	</div>
	<!--end slider-->


	</div></div>
	</div>

	</body>
	</html>