Kalkulator Designcember

Upaya skeuomorfik untuk membuat ulang kalkulator surya di web dengan Window Controls Overlay API dan Ambient Light Sensor API.

Thomas Steiner

Tantangan

Saya adalah anak era 1980-an. Kalkulator surya sangat populer saat saya masih di sekolah menengah. Kami semua diberi TI-30X SOLAR oleh sekolah, dan saya memiliki kenangan indah saat kami membandingkan tolok ukur kalkulator kami dengan menghitung faktorial 69, angka tertinggi yang dapat ditangani TI-30X. (Perbedaan kecepatan sangat terukur, saya masih tidak tahu alasannya.)

Sekarang, hampir 28 tahun kemudian, saya pikir akan menyenangkan jika membuat ulang kalkulator tersebut dalam HTML, CSS, dan JavaScript sebagai tantangan Designcember. Karena bukan seorang desainer, saya tidak memulai dari nol, tetapi dengan CodePen dari Sassja Ceballos.

Buat agar dapat diinstal

Meskipun bukan awal yang buruk, saya memutuskan untuk mengembangkannya agar menjadi skeuomorfik yang sempurna. Langkah pertama adalah menjadikannya PWA agar dapat diinstal.

self.addEventListener('install', (event) => {
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  self.clients.claim();
  event.waitUntil(
    (async () => {
      if ('navigationPreload' in self.registration) {
        await self.registration.navigationPreload.enable();
      }
    })(),
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    (async () => {
      try {
        const response = await event.preloadResponse;
        if (response) {
          return response;
        }
        return fetch(event.request);
      } catch {
        return new Response('Offline');
      }
    })(),
  );
});

Memadukan dengan perangkat seluler

Setelah aplikasi dapat diinstal, langkah berikutnya adalah membuatnya berpadu dengan aplikasi sistem operasi sebanyak mungkin. Di perangkat seluler, saya dapat melakukannya dengan menyetel mode tampilan ke fullscreen di Manifes Aplikasi Web.

{
  "display": "fullscreen"
}

Di perangkat dengan lubang atau notch kamera, menyesuaikan area tampilan sehingga konten mencakup seluruh layar akan membuat aplikasi terlihat menarik.

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />

Menyesuaikan dengan desktop

Di desktop, ada fitur keren yang dapat saya gunakan: Overlay Kontrol Jendela, yang memungkinkan saya menempatkan konten di panel judul jendela aplikasi. Langkah pertama adalah mengganti urutan penggantian mode tampilan sehingga mencoba menggunakan window-controls-overlay terlebih dahulu jika tersedia.

{
  "display_override": ["window-controls-overlay"]
}

Hal ini membuat panel judul hilang secara efektif dan konten bergerak ke atas ke area panel judul seolah-olah panel judul tidak ada. Ide saya adalah memindahkan sel surya skeuomorfik ke atas ke dalam kolom judul dan UI kalkulator lainnya ke bawah, yang dapat saya lakukan dengan beberapa CSS yang menggunakan variabel lingkungan titlebar-area-*. Anda akan melihat bahwa semua pemilih memiliki class wco, yang akan relevan beberapa paragraf di bawah.

#calc_solar_cell.wco {
  position: fixed;
  left: calc(0.25rem + env(titlebar-area-x, 0));
  top: calc(0.75rem + env(titlebar-area-y, 0));
  width: calc(env(titlebar-area-width, 100%) - 0.5rem);
  height: calc(env(titlebar-area-height, 33px) - 0.5rem);
}

#calc_display_surface.wco {
  margin-top: calc(env(titlebar-area-height, 33px) - 0.5rem);
}

Selanjutnya, saya perlu memutuskan elemen mana yang akan dibuat dapat ditarik, karena kolom judul yang biasanya saya gunakan untuk menarik tidak tersedia. Dengan gaya widget klasik, saya bahkan dapat membuat seluruh kalkulator dapat ditarik dengan menerapkan (-webkit-)app-region: drag, terlepas dari tombol, yang mendapatkan (-webkit-)app-region: no-drag sehingga tidak dapat digunakan untuk menarik.

#calc_inside.wco,
#calc_solar_cell.wco {
  -webkit-app-region: drag;
  app-region: drag;
}

button {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

Langkah terakhir adalah membuat aplikasi reaktif terhadap perubahan overlay kontrol jendela. Dalam pendekatan peningkatan progresif yang sebenarnya, saya hanya memuat kode untuk fitur ini saat browser mendukungnya.

if ('windowControlsOverlay' in navigator) {
  import('/wco.js');
}

Setiap kali geometri overlay kontrol jendela berubah, saya memodifikasi aplikasi agar tampilannya senatural mungkin. Sebaiknya lakukan penghilangan getaran pada peristiwa ini, karena peristiwa ini dapat dipicu sering kali saat pengguna mengubah ukuran jendela. Yaitu, saya menerapkan class wco ke beberapa elemen, sehingga CSS dari atas akan diterapkan, dan saya juga mengubah warna tema. Saya dapat mendeteksi apakah overlay kontrol jendela terlihat dengan memeriksa properti navigator.windowControlsOverlay.visible.

const meta = document.querySelector('meta[name="theme-color"]');
const nodes = document.querySelectorAll(
  '#calc_display_surface, #calc_solar_cell, #calc_outside, #calc_inside',
);

const toggleWCO = () => {
  if (!navigator.windowControlsOverlay.visible) {
    meta.content = '';
  } else {
    meta.content = '#385975';
  }
  nodes.forEach((node) => {
    node.classList.toggle('wco', navigator.windowControlsOverlay.visible);
  });
};

const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
  toggleWCO();
}, 250);

toggleWCO();

Sekarang, dengan semua ini, saya mendapatkan widget kalkulator yang hampir terasa seperti Winamp klasik dengan salah satu tema Winampoldschool. Sekarang saya dapat menempatkan kalkulator secara bebas di desktop dan mengaktifkan fitur kontrol jendela dengan mengklik chevron di sudut kanan atas.

Sel surya yang benar-benar berfungsi

Untuk membuat perangkat ini benar-benar berfungsi, saya tentu saja harus membuat sel surya berfungsi. Kalkulator hanya boleh berfungsi jika ada cukup cahaya. Cara saya memodelkan ini adalah dengan menetapkan CSS opacity digit pada layar melalui variabel CSS --opacity yang saya kontrol melalui JavaScript.

:root {
  --opacity: 0.75;
}

#calc_expression,
#calc_result {
  opacity: var(--opacity);
}

Untuk mendeteksi apakah cahaya yang tersedia cukup agar kalkulator dapat berfungsi, saya menggunakan AmbientLightSensor API. Agar API ini tersedia, saya perlu menyetel tanda #enable-generic-sensor-extra-classes di about:flags dan meminta izin 'ambient-light-sensor'. Seperti sebelumnya, saya menggunakan peningkatan progresif untuk hanya memuat kode yang relevan saat API didukung.

if ('AmbientLightSensor' in window) {
  import('/als.js');
}

Sensor akan menampilkan cahaya sekitar dalam satuan lux setiap kali ada pembacaan baru. Berdasarkan tabel nilai situasi cahaya umum, saya menemukan formula yang sangat sederhana untuk mengonversi nilai lux menjadi nilai antara 0 dan 1 yang ditetapkan secara terprogram ke variabel --opacity.

const luxToOpacity = (lux) => {
  if (lux > 250) {
    return 1;
  }
  return lux / 250;
};

const sensor = new window.AmbientLightSensor();
sensor.onreading = () => {
  console.log('Current light level:', sensor.illuminance);
  document.documentElement.style.setProperty(
    '--opacity',
    luxToOpacity(sensor.illuminance),
  );
};
sensor.onerror = (event) => {
  console.log(event.error.name, event.error.message);
};

(async () => {
  const {state} = await navigator.permissions.query({
    name: 'ambient-light-sensor',
  });
  if (state === 'granted') {
    sensor.start();
  }
})();

Dalam video di bawah, Anda dapat melihat cara kerja kalkulator setelah saya menyalakan lampu ruangan dengan cukup terang. Dan inilah hasilnya: kalkulator surya skeuomorfik yang benar-benar berfungsi. TI-30X SOLAR andalan saya yang sudah teruji waktu memang telah berkembang pesat.

Demo

Pastikan untuk mencoba demo Kalkulator Designcember dan lihat kode sumber di GitHub. (Untuk menginstal aplikasi, Anda harus membukanya di jendelanya sendiri. Versi sematan di bawah tidak akan memicu infobar mini.)

Selamat Designcember!