Kalkulator Designcember

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

Thomas Steiner

Tantangan

Saya anak tahun 1980-an. Saat di SMA, kalkulator matahari adalah hal yang paling digemari. Kami semua diberi TI-30X SOLAR oleh sekolah, dan saya punya kenangan indah tentang kami saat membandingkan kalkulator satu sama lain dengan menghitung faktorial 69, angka tertinggi yang dapat ditangani TI-30X. (Varian kecepatan sangat terukur, saya masih belum tahu alasannya.)

Sekarang, hampir 28 tahun kemudian, saya pikir akan menjadi tantangan Designcember yang menyenangkan untuk membuat ulang kalkulator dalam HTML, CSS, dan JavaScript. Karena bukan seorang desainer, saya tidak memulai dari awal, tetapi dengan CodePen karya Sassja Ceballos.

Buat agar dapat diinstal

Meskipun bukan awal yang buruk, saya memutuskan untuk terus meningkatkannya demi kehebatan skeuomorfik sepenuhnya. Langkah pertamanya adalah membuatnya menjadi PWA sehingga dapat diinstal. Saya mempertahankan template PWA dasar di Glitch yang saya remix setiap kali saya memerlukan demo singkat. Pekerja layanannya tidak akan memenangkan penghargaan coding apa pun untuk Anda dan jelas tidak siap untuk produksi, tetapi cukup untuk memicu infobar mini Chromium agar aplikasi 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 seluler

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

{
  "display": "fullscreen"
}

Pada perangkat dengan lubang atau lekukan kamera, menyesuaikan area tampilan sehingga konten mencakup seluruh layar akan membuat aplikasi terlihat bagus.

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

Memadukan dengan desktop

Di desktop, ada fitur keren yang dapat saya gunakan: Window Controls Overlay, 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 saat tersedia.

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

Hal ini akan menghilangkan kolom judul secara efektif dan konten berpindah ke area panel judul seolah-olah panel judul tidak ada di sana. Ide saya adalah memindahkan sel surya skeuomorfik ke panel judul dan bagian UI kalkulator lainnya ke bawah sebagaimana mestinya, yang dapat saya lakukan dengan beberapa CSS yang menggunakan variabel lingkungan titlebar-area-*. Anda akan melihat bahwa semua pemilih membawa class wco, yang akan relevan dengan beberapa paragraf ke 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 agar dapat ditarik, karena panel 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, selain 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 jika browser mendukungnya.

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

Setiap kali geometri kontrol jendela berubah, saya memodifikasi aplikasi untuk membuatnya terlihat natural mungkin. Sebaiknya lakukan debounce pada peristiwa ini, karena peristiwa ini dapat sering dipicu saat pengguna mengubah ukuran jendela. Yaitu, saya menerapkan class wco ke beberapa elemen, sehingga CSS saya 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();

Dengan semua ini, saya mendapatkan widget kalkulator yang terasa hampir seperti Winamp klasik dengan salah satu tema Winamp kuno. Sekarang saya dapat menempatkan kalkulator di desktop dengan bebas dan mengaktifkan fitur kontrol jendela dengan mengklik tanda V di pojok kanan atas.

Sel surya yang benar-benar berfungsi

Untuk yang paling gila, tentu aku perlu membuat sel surya agar benar-benar berfungsi. Kalkulator hanya berfungsi jika ada cukup cahaya. Cara saya membuat modelnya adalah dengan menyetel opacity CSS dari 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 menetapkan tanda #enable-generic-sensor-extra-classes di about:flags dan meminta izin 'ambient-light-sensor'. Seperti sebelumnya, saya menggunakan progressive enhancement untuk hanya memuat kode yang relevan saat API didukung.

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

Sensor menampilkan cahaya sekitar dalam satuan lux setiap kali bacaan baru tersedia. Berdasarkan tabel nilai situasi cahaya biasa, saya menghasilkan formula yang sangat sederhana untuk mengonversi nilai lux menjadi nilai antara 0 dan 1 yang saya tetapkan 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();
  }
})();

Di video di bawah, Anda bisa melihat cara kalkulator mulai bekerja setelah saya cukup menyalakan ruangan. Seperti itu: kalkulator matahari skeuomorfik yang benar-benar berfungsi. TI-30X SOLAR saya yang sudah teruji lama telah berkembang pesat.

Demo

Pastikan untuk mencoba demo Designcember Calculator dan melihat kode sumber di Glitch. (Untuk menginstal aplikasi, Anda harus membukanya di jendelanya sendiri. Versi tersemat di bawah ini tidak akan memicu infobar mini.)

Selamat mengikuti Designcember!