VCRV/website_Robot.html at main · Larito/VCRV · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE HTML>
<html>
<head>
  <title>ES Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  html {
    font-family: Arial;
    display: inline-block;
    margin: 0px auto;
    text-align: center;
  }
  h1 {
    color: #0F3376;
    padding: 2vh;
  }
  p {
    font-size: 1.5rem;
  }
  .button {
    display: inline-block;
    background-color: #008CBA;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 16px 40px;
    text-decoration: none;
    font-size: 30px;
    margin: 2px;
    cursor: pointer;
  }
  .button3 {
    background-color: #f44336;
  }

   </style>
</head>
<body>
  <h1>Web-Controlled Car</h1>
  <h2>Lara Alotaibi and Maria Alabdulrahman</h2>
  <p>
    <a href="/forward"><button class="button">FORWARD</button></a>
    <a href="/backward"><button class="button button2">BACKWARD</button></a></p>
  <p>  <a href="/stop"><button class="button button3">STOP</button></a></p>
  <p>  <a href="/right"><button class="button button4">RIGHT</button></a>
      <a href="/left"><button class="button button5">LEFT</button></a>
  </p>
  <p>
    <span class="sensor-labels">Distance</span>
    <span id="distance">%Distance% cm</span>
  </p>
  <button class="button" id="startRecognitionBtn">Start Voice Recognition</button>
</body>

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/1.0.0/speechkitt.min.js"></script>
<script>
function startVoiceRecognition() {
  if (annyang) {
    // Let's define commands.
    const commands = {
      'forward': function() { window.location.href = '/forward'; },
      'backward': function() { window.location.href = '/backward'; },
      'stop': function() { window.location.href = '/stop'; },
      'right': function() { window.location.href = '/right'; },
      'left': function() { window.location.href = '/left'; }
    };

    annyang.addCommands(commands);
    annyang.start();
  }
}

document.getElementById("startRecognitionBtn").addEventListener("click", startVoiceRecognition);

// Initialize SpeechKITT
SpeechKITT.annyang();
SpeechKITT.setStylesheet('//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/1.0.0/themes/flat.css');
SpeechKITT.vroom();
</script>
<script>
  setInterval(function ( ) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("distance").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/distance", true);
    xhttp.send();
  }, 5000 ) ;
</script>
</html>