qiuxiang · hasanbahadirkoca · Jun 30, 2021 · Jun 30, 2021 · Jun 30, 2021 · Jun 30, 2021
diff --git a/app/color-change.js b/app/color-change.js
@@ -0,0 +1,58 @@
+var refreshTime = 100; //microseconds
+var sensitivity = 2; // + and - interval
+
+
+function colorChange() {
+  var el = document.getElementById("meter-pointer");
+  var st = window.getComputedStyle(el, null);
+  var tr = st.getPropertyValue("-webkit-transform") ||
+    st.getPropertyValue("-moz-transform") ||
+    st.getPropertyValue("-ms-transform") ||
+    st.getPropertyValue("-o-transform") ||
+    st.getPropertyValue("transform") ||
+    "FAIL";
+
+  //
+  //console.log('Matrix: ' + tr);
+  //
+
+  var values = tr.split('(')[1].split(')')[0].split(',');
+  var a = values[0];
+  var b = values[1];
+  var c = values[2];
+  var d = values[3];
+
+  var scale = Math.sqrt(a * a + b * b);
+
+  //
+  //console.log('Scale: ' + scale);
+  //
+
+  var sin = b / scale;
+  var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+
+  //
+  //console.log('Rotate: ' + angle + 'deg');
+  //
+
+  if (angle >= -sensitivity && angle <= sensitivity) {
+    $('.plus').css('color', 'green')
+    $('.minus').css('color', 'green')
+    $('.color-change').css('background-color', 'green')
+  }
+  else if (angle < -sensitivity) {
+    $('.plus').css('color', 'gray')
+    $('.minus').css('color', 'red')
+    $('.color-change').css('color', '#748291')
+    $('.color-change').css('background-color', '#748291')
+  }
+  else if (angle > sensitivity) {
+    $('.plus').css('color', 'red')
+    $('.minus').css('color', 'gray')
+    $('.color-change').css('background-color', '#748291')
+  }
+}
+
+$(document).ready(function () {
+  setInterval(colorChange, refreshTime);
+})
diff --git a/app/index.html b/app/index.html
@@ -1,28 +1,45 @@
 <!doctype html>
 <html>
+
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
-  <title>Online Tuner</title>
-  <link rel="stylesheet" href="style.css">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+    <title>Online Tuner</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
+
+
 <body>
-<canvas class="frequency-bars"></canvas>
-<div class="meter">
-  <div class="meter-dot"></div>
-  <div class="meter-pointer"></div>
-</div>
-<div class="notes">
-  <div class="notes-list"></div>
-  <div class="frequency"> <span>Hz</span></div>
-</div>
-<div class="a4">A<sub>4</sub> = <span>440</span> Hz</div>
-<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
-<script src="aubio.js"></script>
-<script src="tuner.js"></script>
-<script src="meter.js"></script>
-<script src="frequency-bars.js"></script>
-<script src="notes.js"></script>
-<script src="app.js"></script>
+    <a href="https://github.com/hasanbahadirkoca/tuner" target="blank"><img class="tuner-logo" src="tuner.png" alt="Tuner Logo"></a>
+
+    <!-- Plus & Minus -->
+    <div class="">
+        <span class="minus">-</span>
+        <canvas class="frequency-bars"></canvas>
+        <span class="plus">+</span>
+    </div>
+    <!------------------>
+
+    <div class="meter">
+        <div class="meter-dot color-change"></div>
+        <div class="meter-pointer color-change" id="meter-pointer"></div>
+    </div>
+    <div class="notes">
+        <div class="notes-list"></div>
+        <div class="frequency"> <span>Hz</span></div>
+    </div>
+    <div class="a4">A<sub>4</sub> = <span>440</span> Hz</div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
+    <script src="aubio.js"></script>
+    <script src="tuner.js"></script>
+    <script src="meter.js"></script>
+    <script src="frequency-bars.js"></script>
+    <script src="notes.js"></script>
+    <script src="app.js"></script>
+    <script src="color-change.js"></script>
 </body>
+
 </html>
diff --git a/app/style.css b/app/style.css
@@ -135,26 +135,66 @@ body {
   bottom: 0;
 }
 
-@media (max-width: 768px) {
-  .meter {
-    width: 100%;
-  }
-
-  .notes {
-    width: 100%;
-  }
-}
-
 .swal-button {
   background: #2c3e50;
 }
 
 .a4 {
-  position: absolute;
-  top: 16px;
+  position: fixed;
+  bottom: 16px;
   left: 16px;
 }
 
 .a4 span {
   color: #e74c3c;
 }
+
+/* Plus & Minus */
+
+.plus {
+  position: fixed;
+  right: 35%;
+  top: 25%;
+  font-size: 50px;
+}
+
+.minus {
+  position: fixed;
+  left: 35%;
+  top: 25%;
+  font-size: 50px;
+}
+
+/* Logo & Piano */
+
+.tuner-logo {
+  position: fixed;
+  width: 100px;
+  top: 16px;
+  left: 16px;
+}
+
+@media screen and (max-width: 768px) {
+  .meter {
+    width: 100%;
+  }
+  .notes {
+    width: 100%;
+  }
+  .minus {
+    left: 10%;
+    top: 25%;
+    font-size: 40px;
+  }
+  .plus {
+    float: center;
+    right: 10%;
+    top: 25%;
+    font-size: 40px;
+  }
+  .tuner-logo {
+    width: 70px;
+    top: 10px;
+    left: 10px;
+  }
+}
diff --git a/app/tuner.png b/app/tuner.png
diff --git a/mockup.jpg b/mockup.jpg
diff --git a/readme.md b/readme.md
@@ -1,3 +1,11 @@
-The online tuner based on web audio api: [https://qiuxiang.github.io/tuner/app](https://qiuxiang.github.io/tuner/app/).
+Online tuner software, based on web audio API: [https://hasanbahadirkoca.com/tuner](https://hasanbahadirkoca.com/tuner).
 
-![](https://user-images.githubusercontent.com/1709072/30374834-e23d0bc2-98b8-11e7-91ae-8ac37bfd24b2.png)
+I added a simple logo to [Qiuxiang](https://github.com/qiuxiang/tuner)'s project and plus and minus signs that turn green when the sound is correct, and red when the sound is false. At the same time, the indicator bar turns green when the sound is correct.
+
+You can find this version of the project on my [website](https://hasanbahadirkoca.com/tuner).
+
+Best regards to [qiuxiang](https://github.com/qiuxiang).
+
+![](screenshot.jpg)
+
+![](mockup.jpg)
diff --git a/screenshot.jpg b/screenshot.jpg