Beat

This app is designed to help reduce anxiety with various methods.

IntermediateFull instructions provided2 hours534

Things used in this project

Hardware components

Bose SoundTouch® 10 wireless music system

Software apps and online services

Bose SoundTouch® Developers API

Story

We created a web app to reduce anxiety through different techniques. We also utilized the Bose speakers to play music that was proven to reduce anxiety. We made it because 2 of us cope with anxiety on a daily basis and noticed how many other people also suffer from it.

Code

<!DOCTYPE html>
<html>

<head>
  <title>Beat - The App Designed to Reduce Anxiety</title>
</head>

<body>
  <!-- All code below is for nav bar, copy paste between each thing-->
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="Anxiety.html">
      <strong>Music</strong>
    </a>
    <a href="http://knaj.clkpts.uk">
      <strong>Photos</strong>
    </a>
    <a href="Breathe.html">
      <strong>Breathe</strong>
    </a>
    </a>
    <a href="Rhythm.html">
      <strong>Rhythm</strong>
    </a>
    <a href="deadlink.html">
      <strong>Heartrate</strong>
    </a>
  </div>
  <span class="relative" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
  <style>
    span.relative{
      position: relative;
      right: 750px;
      border: 3px solid rgba(22, 47, 92);
      background-color: rgba(22, 47, 92, 0.9);
      color: #818181;
    }
    body {
      font-family: "Lato", sans-serif;
    }

    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgba(22, 47, 92, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 40px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .sidenav a:hover {
      color: #f1f1f1;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 40px;
      margin-left: 50px;
    }

    @media screen and (max-height: 450px) {
      .sidenav {
        padding-top: 15px;
      }
      .sidenav a {
        font-size: 18px;
      }
    }
  </style>
  <script>
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
  </script>
  <br>
  <!-- All code above is for nav bar, copy paste between each thing-->
  <script src="script.js"></script>
  <img class="main-image" src="https://i.imgur.com/k8svLFc.png">
  <link rel="stylesheet" type="text/css" href="anxietycss.css">
  <br>
  <button type="button" onclick="power()">
    <strong>Power Speaker On/Off</strong>
  </button>
  <br>
  <br>
  <button type="button" onclick="previousTrack()">
    <strong>Previous Track</strong>
  </button>
  <button type="button" onclick="playpauseTrack()">
    <Strong>Pause/Play</strong>
  </button>
  <button type="button" onclick="nextTrack()">
    <strong>Next Track</strong>
  </button>
  <br>
  <br>
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    <p>
      <Strong>Volume:</Strong>
      <span id="demo"></span>
    </p>
  </div>
  <br>
  <br>
  <br>
  <script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    slider.oninput = function () {
      output.innerHTML = this.value;
    }
    slider.onmouseup = changeVolume //on mouse up, change the volume
  </script>
  <div class="fullscreen-bg">
      <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
          <source src="VideoTrim.mp4" type="video/mp4">
      </video>
  </div>
</body>

.main-image {
    width:50%;
    text-align: center;
  }

body {
    background-color: rgb(180,180,180);
    text-align: center;
    color: black;
    margin: 0;
}

input[type="button"]{
    width:120px;
    margin: 35px;
    display: block;
}

button{
    border-radius: 12px;
    height: auto;
    width: auto;
    padding: 50px;
    font-size: 1.7em;
    font-family: Georgia, serif;
    text-align: center;
    border: 5px solid rgb(32, 68, 136)

}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: rgb(88, 99, 253, 0.767);
    background: rgb(255, 255, 255);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: rgb(32, 68, 136);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgb(32, 43, 143);
    cursor: pointer;
}

.slidecontainer{
    font-size: 1.5em;
    font-family: Georgia, serif;
    text-align: center;
    border-radius: 12px;
    height: auto;
    width: auto;
    border: 5px solid rgb(32, 68, 136);
    background-color: rgb(180,180,180);
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
    
li a{
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover{
    background-color: #555;
    color: white;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
  }
  
  .fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
      height: 300%;
      top: -100%;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
      width: 300%;
      left: -100%;
    }
  }
  
  @media (max-width: 767px) {
    .fullscreen-bg {
      background: url('../img/videoframe.jpg') center center / cover no-repeat;
    }
  
    .fullscreen-bg__video {
      display: none;
    }
  }

<!DOCTYPE html>
<html>

<head>
    <Title>Calming rhythm game</Title>
</head>

<body>
    <canvas id="myCanvas" width="960" height="540"style="border:1px solid #B4B4B4;"></canvas>
    <button id="take2" item-width="50" item-height="50" onclick="addPoint"; "moveSquare">
        <strong>Click me</strong>
    </button>

<b></b>
    <h3>"Your score is <script> document.write(x)</script> </h3>
    <script src="script1.js";"jQuery.js"></script>
</body>

var x = 5;


/*canvas.drawSquare();//initializes square

canvas.onclick=point(),drawSquare();//does this properly draw a square and get a value

function foo(){//set this to whether the click event falls under the area of the randomly placed block
    var a = getClickXPosition();
    var b = getClickYPosition();
    return ((a>=xSquare() && a<=xSquare()+50) && (b>=ySquare() && b<=ySquare()+50))
}

function getClickXPosition(e) {
    var xPosition = e.clientX;
    return xPosition;
}

function getClickYPosition(e) {
    var yPosition = e.clientY;
    return yPosition;
}

function point() {
    if (foo()) {
        x++;
    }
    else { x-- }
}

function drawSquare(){
    var x = xSquare();
    var y = ySquare();
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";//change color later. Color picker not working
    ctx.fillRect(x,y,50,50);
}*/
function xCoordinate(){
    return (int) (Math.random() * (910));
}
function yCoordinate(){
    return (int) (Math.random() * 490);
}

function addPoint(){
    x++;
}

function moveButton(){
document.getElementById('button').style.cssText = 'left:xCoordinate(); top= yCoordinate();'
}

function nextTrack() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
        }
    };
    xhttp.open("POST", "http://192.168.1.141:8090/key", true);
    xhttp.setRequestHeader("Content-type", "text/xml");
    xhttp.send("<key state='press' sender='Gabbo'>NEXT_TRACK</key>");
}

function previousTrack() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("POST", "http://192.168.1.141:8090/key", true);
    xhttp.setRequestHeader("Content-type", "text/xml");
    xhttp.send("<key state='press' sender='Gabbo'>PREV_TRACK</key>");
}

function playpauseTrack() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("POST", "http://192.168.1.141:8090/key", true);
    xhttp.setRequestHeader("Content-type", "text/xml");
    xhttp.send("<key state='press' sender='Gabbo'>PLAY_PAUSE</key>");
}

function power() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("POST", "http://192.168.1.141:8090/key", true);
    xhttp.setRequestHeader("Content-type", "text/xml");
    xhttp.send("<key state='press' sender='Gabbo'>POWER</key>");
}
//<iframe src="https://open.spotify.com/embed/user/meaghanltracey/playlist/6NETX2l6c7rzWMDeSrm0Kh"
//             width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

function changeVolume() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("POST", "http://192.168.1.141:8090/volume", true);
    xhttp.setRequestHeader("Content-type", "text/xml");
    xhttp.send("<volume>" + slider.value + "</volume>"); //runs every time the slider value changes 
    console.log("Setting the volume to " + slider.value);
}