Upaya skeuomorfik dalam membuat ulang kalkulator tenaga surya di web dengan Window Controls Overlay API dan Ambient Light Sensor API.
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!