animation html

voice to sign/assets/animation.html

+{% extends 'base.html' %}
+{% load static %}
+
+
+{% block content %}
+<div class="split left">
+	<h2 align="center">Enter Text or Use Mic</h2>
+	<br>
+		<form action="." method="post" align="left">
+		{% csrf_token %}
+		{{ form }}
+					<input type="text" name="sen" class="mytext" id="speechToText" placeholder="">
+					<button type="button" name="button" class="mic" onclick="record()"><img src="{% static 'mic3.png' %}" height="32px" width="38px" /></button>
+		  			&nbsp&nbsp&nbsp&nbsp
+		  			<input type="submit" name="submit" class="submit">
+
+		</form>
+		<br>
+		<table cellspacing="20px">
+			<tr>
+				<td class="td">The text that you entered is:</td>
+				<td class="td">{{ text }}</td>
+			</tr>
+			<tr>
+				<td class="td">Key words in sentence:</td>
+				<td class="td">
+				<ul class="td" id="list" align="center">
+  					{% for word in words %}
+    				<li id="{{ i }}" style="margin-right: 8px">{{ word }}</li>
+  					{% endfor %}
+				</ul>
+			</td>
+		</tr>
+	</table></div>
+  <div class="split right">
+  <h2 align="center">Sign Language Animation</h2>
+
+	<div style="text-align:center">	&nbsp&nbsp
+  	<button class="submit" onclick="play()" hidden>Play/Pause</button>
+	<script>
+		 //function play(){
+		var videoSource = new Array();
+		var	videos = document.getElementById("list").getElementsByTagName("li");
+		var j , i=0;
+		var time = 2500;	// Time Between Switch
+		for(j=0;j<videos.length;j++)
+		{
+			videoSource[j] = "/static/" + videos[j].innerHTML +".jpg";
+			
+			//document.getElementById("videoPlayer").setAttribute("src", videoSource[j]);
+			//document.getElementById("videoPlayer").load();
+		}
+		
+		function changeImg(){ 
+			
+			document.slide.src = videoSource[i];
+			//alert(videoSource.length);
+			// Check If Index Is Under Max
+			if(i < videoSource.length - 1){
+			// Add 1 to Index
+			i++; 
+			} else { 
+				// Reset Back To O
+				i = 0;
+			}
+
+			// Run function every x seconds
+		setTimeout("changeImg()", time);
+		}
+		
+		window.onload=changeImg
+	</script>
+  	<!--  LETS USE ONLY PLAY PAUSE BUTTON WITH 720 *420 ,IT FITS THE SCREEN ASHISH
+
+  	<button onclick="makeBig()">Big</button>
+  	<button onclick="makeSmall()">Small</button>
+  	<button onclick="makeNormal()">Normal</button>-->
+
+
+  	  	<!-- <video id="videoPlayer" width="600" height="350"  preload="auto" autoplay>
+    	<source src="" type="video/mp4">
+    Your browser does not support HTML5 video.
+  	</video>  	-->
+	  <img id="videoPlayer" name="slide"  width="860" height="480" >
+	  <!-- <img name="slide" width="400" height="200" /> -->
+  	</div></div>
+
+
+<script>
+	//webkitSpeechRecognition api for speech to text conversion
+	function record(){
+		var recognition = new webkitSpeechRecognition();
+		recognition.lang='en-IN';
+
+		recognition.onresult = function(event){
+			console.log(event)
+			document.getElementById('speechToText').value = event.results[0][0].transcript;
+		}
+		recognition.start();
+	 }
+	
+	//	window.onclick=changeImg;
+	
+		//window.onload=changeImg;
+		// var i = 0; // define i
+		// var videoCount = videoSource.length;
+
+		// function videoPlay(videoNum)
+		// {
+		// 	document.getElementById("list").getElementsByTagName("li")[videoNum].style.color = "#09edc7";
+		// 	document.getElementById("list").getElementsByTagName("li")[videoNum].style.fontSize = "xx-large";
+		// 	document.getElementById("videoPlayer").setAttribute("src", videoSource[videoNum]);
+	    // 	document.getElementById("videoPlayer").load();
+	    // 	document.getElementById("videoPlayer").play();
+
+		// }
+		// document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);
+		// document.getElementById("list").getElementsByTagName("li")[0].style.color = "#09edc7";
+		// document.getElementById("list").getElementsByTagName("li")[0].style.fontSize = "xx-large";
+
+		// videoPlay(0); // play the video
+
+		// function myHandler()
+		// {
+	 	// 	document.getElementById("list").getElementsByTagName("li")[i].style.color = "#feda6a";
+		// 	document.getElementById("list").getElementsByTagName("li")[i].style.fontSize = "20px";
+		// 	i++;
+	    // 	if (i == videoCount)
+	    // 	{
+	    //    	    document.getElementById("videoPlayer").pause();
+	    // 	}
+	    //  	else
+	    //  	{
+	    //     	videoPlay(i);
+	    // 	}
+		// }
+	
+	/* LETS USE ONLY PLAY PAUSE BUTTON WITH 720 *420 ,IT FITS THE SCREEN
+	function makeBig() {
+	    document.getElementById("videoPlayer").width = 560;
+		document.getElementById("videoPlayer").height = 360;
+	}
+
+	function makeSmall() {
+	    document.getElementById("videoPlayer").width = 320;
+		document.getElementById("videoPlayer").height = 180;
+	}
+
+	function makeNormal() {
+	    document.getElementById("videoPlayer").width = 420;
+		document.getElementById("videoPlayer").height =280;
+	}*/
+	// function playPause(){
+  	// 	if (document.getElementById("videoPlayer").paused){
+    // 		play();}
+  	// 	else{
+    // 		document.getElementById("videoPlayer").pause();}
+	// 	}
+
+	</script>
+
+
+{% endblock %}