Membuat Kompas Sederhana dengan Javascript

Cara Membuat Kompas Sederhana dengan HTML dan Javascript

Berikut ini cara sederhana membuat kompas untuk perangkat seluler menggunakan javascript. Anda bisa menambahakan pada halaman blog Anda, sehingga memudahkan seseorang yang sedang berselancar di halaman blog menentukan arah tertentu. Anda bisa menambahkannya pada bagian side bar, dan sebagainya.

Hasilnya seperti ini

Untuk membuat kompas dengan basic html atau javascript, maka kita membutuhkan beberapa elemen html berikut ini.

<div class="compass">
  <div class="arrow"></div>
  <div class="compass-circle"></div>
  <div class="my-point"></div>
</div>
<button class="start-btn">Start compass</button>

Setelah itu tambahakan css untuk layout htmlnya.

.compass {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  margin: auto;
}

.compass > .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 30px 20px 0 20px;
  border-color: red transparent transparent transparent;
  z-index: 1;
}

.compass > .compass-circle,
.compass > .my-point {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  background: url(https://cdn.onlinewebfonts.com/svg/img_467023.png) center
    no-repeat;
  background-size: contain;
}

.compass > .my-point {
  opacity: 0;
  width: 20%;
  height: 20%;
  background: rgb(8, 223, 69);
  border-radius: 50%;
  transition: opacity 0.5s ease-out;
}

Waktu JavaScript

Untuk memulai script java ini, maka tentukan elemen html terlebih dahulu kemudian tambahkan fungsi untuk tombol yang memulainya. Untuk iOS harus menambahkan atau memiliki manipulasi oleh pengguna untuk memulai iOS perlu memiliki manipulasi oleh pengguna untuk memulai DeviceOrientationEvent, tetapi untuk Android tidak perlu menabahan karena sudah dapat berfungsi.

const compassCircle = document.querySelector(".compass-circle");
const startBtn = document.querySelector(".start-btn");
const myPoint = document.querySelector(".my-point");
let compass;
const isIOS = !(
  navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
  navigator.userAgent.match(/AppleWebKit/)
);

function init() {
  startBtn.addEventListener("click", startCompass);
}

function startCompass() {
  if (isIOS) {
    DeviceOrientationEvent.requestPermission()
      .then((response) => {
        if (response === "granted") {
          window.addEventListener("deviceorientation", handler, true);
        } else {
          alert("has to be allowed!");
        }
      })
      .catch(() => alert("not supported"));
  } else {
    window.addEventListener("deviceorientationabsolute", handler, true);
  }
}

function handler(e) {
  compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
  compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
}

init();

Selesai! Kompas sudah berfungsi untuk iOS dan Android.

Sumber: https://dev.to/