Meydan okuma #
Ben 1980’lerin çocuğuyum. Ben lisedeyken çok revaçta olan bir şey güneş enerjisi hesaplayıcılarıydı. hepimize verildi TI-30X GÜNEŞ okul tarafından ve TI-30X’in işleyebileceği en yüksek sayı olan 69 faktöriyelini hesaplayarak hesap makinelerimizi birbirimizle karşılaştırdığımıza dair çok güzel anılarım var. (Hız farkı çok ölçülebilirdi, neden hala hiçbir fikrim yok.)
Şimdi, neredeyse 28 yıl sonra, hesap makinesini HTML, CSS ve JavaScript’te yeniden oluşturmanın eğlenceli bir Designcember yarışması olacağını düşündüm. Pek tasarımcı olmadığım için sıfırdan başlamadım. kod kalemi ile Sassja Ceballos.
Kurulabilir yap #
Kötü bir başlangıç olmasa da, tam skeuomorfik harikalık için onu artırmaya karar verdim. İlk adım, kurulabilmesi için onu bir PWA yapmaktı. ben bir Glitch’te temel PWA şablonu ne zaman hızlı bir demoya ihtiyaç duysam remix yaptığımı. Servis çalışanı size herhangi bir kodlama ödülü kazandırmaz ve kesinlikle Olumsuz üretime hazır, ancak uygulamanın yüklenebilmesi için Chromium’un mini bilgi çubuğunu tetiklemek yeterlidir.
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');
}
})(),
);
});
Mobil ile karıştırma #
Artık uygulama yüklenebilir olduğuna göre, bir sonraki adım, onu işletim sistemi uygulamalarıyla mümkün olduğunca uyumlu hale getirmektir. Mobil cihazda bunu görüntüleme modunu olarak ayarlayarak yapabilirim. fullscreen Web App Manifest’te.
{
"display": "fullscreen"
}
Kamera deliği veya çentiği olan cihazlarda, görünüm alanını değiştirmek içeriğin tüm ekranı kaplaması, uygulamanın muhteşem görünmesini sağlar.
meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
Masaüstü ile karıştırma #
Masaüstünde kullanabileceğim harika bir özellik var: Uygulama penceresinin başlık çubuğuna içerik koymamı sağlayan Window Controls Overlay. İlk adım, görüntüleme modu geri dönüş sırasını geçersiz kılmaktır, böylece kullanmaya çalışır window-controls-overlay ilk müsait olduğunda.
{
"display_override": ["window-controls-overlay"]
}
Bu, başlık çubuğunu etkin bir şekilde ortadan kaldırır ve içerik, sanki başlık çubuğu orada değilmiş gibi başlık çubuğu alanına taşınır. Benim fikrim, skeuomorfik güneş pilini başlık çubuğuna ve hesap makinesi kullanıcı arayüzünün geri kalanını buna göre aşağı taşımaktır, bunu kullanan bazı CSS ile yapabilirim. titlebar-area-* Ortam Değişkenleri. Tüm seçicilerin bir wco birkaç paragraf aşağı alakalı olacak sınıf.
#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);
}
Daha sonra, genellikle sürüklemek için kullanacağım başlık çubuğu olmadığı için hangi öğeleri sürüklenebilir hale getireceğime karar vermem gerekiyor. Klasik bir pencere öğesi tarzında, uygulayarak tüm hesap makinesini sürüklenebilir hale getirebilirim. (-webkit-)app-region: dragdüğmelerin dışında (-webkit-)app-region: no-drag bu yüzden sürüklemek için kullanılamazlar.
#calc_inside.wco,
#calc_solar_cell.wco {
-webkit-app-region: drag;
app-region: drag;
}button {
-webkit-app-region: no-drag;
app-region: no-drag;
}
Son adım, uygulamayı pencere kontrolleri bindirme değişikliklerine karşı reaktif hale getirmektir. Gerçek bir aşamalı geliştirme yaklaşımında, bu özelliğin kodunu yalnızca tarayıcı desteklediğinde yüklüyorum.
if ('windowControlsOverlay' in navigator) {
import('/wco.js');
}
Pencere bindirme geometrisi değişikliklerini kontrol ettiğinde, mümkün olduğunca doğal görünmesi için uygulamayı değiştiririm. Kullanıcı pencereyi yeniden boyutlandırdığında sık sık tetiklenebileceğinden, bu olayı devre dışı bırakmak iyi bir fikirdir. Yani, uygularım wco bazı öğelere sınıf, bu yüzden yukarıdan gelen CSS’im devreye giriyor ve ben de tema rengini değiştiriyorum. Kontrol ederek pencere kontrolleri kaplamasının görünür olup olmadığını tespit edebilirim. navigator.windowControlsOverlay.visible mülk.
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();
Şimdi tüm bunlar yerli yerinde, neredeyse klasik gibi hissettiren bir hesap makinesi parçacığı alıyorum Winamp eski okuldan biriyle Winamp temaları. Artık hesap makinesini masaüstüme özgürce yerleştirebilir ve sağ üst köşedeki köşeli çift ayraç’a tıklayarak pencere kontrolleri özelliğini etkinleştirebilirim.
Gerçekten çalışan bir güneş pili #
Nihai geekery için, elbette güneş pilini gerçekten çalışır hale getirmem gerekiyordu. Hesap makinesi yalnızca yeterli ışık varsa çalışıyor olmalıdır. Bunu modelleme yöntemim, CSS’yi ayarlamaktır. opacity bir CSS değişkeni aracılığıyla ekrandaki rakamların --opacity JavaScript ile kontrol ettiğim.
:root {
--opacity: 0.75;
}#calc_expression,
#calc_result {
opacity: var(--opacity);
}
Hesap makinesinin çalışması için yeterli ışığın olup olmadığını tespit etmek için AmbientLightSensor API. Bu API’nin kullanılabilir olması için, #enable-generic-sensor-extra-classes bayrak about:flags ve talep et 'ambient-light-sensor' izin. Daha önce olduğu gibi, yalnızca API desteklendiğinde ilgili kodu yüklemek için aşamalı geliştirmeyi kullanıyorum.
if ('AmbientLightSensor' in window) {
import('/als.js');
}
Sensör, ortam ışığını lüks yeni bir okuma mevcut olduğunda birimler. dayalı bir değerler tablosu Tipik ışık durumlarında, lüks değerini 0 ile 1 arasında bir değere dönüştürmek için çok basit bir formül buldum ve bu formüle programlı olarak atadım. --opacity değişken.
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();
}
})();
Aşağıdaki videoda, odanın ışığını yeterince açtığımda hesap makinesinin nasıl çalışmaya başladığını görebilirsiniz. Ve işte karşınızda: gerçekten çalışan bir skeuomorfik güneş hesaplayıcı. Zaman içinde test edilmiş eski güzel TI-30X SOLAR’ım gerçekten çok yol kat etti.
Demo #
ile oynadığınızdan emin olun. Designcember Calculator demosu ve kontrol edin Glitch’te kaynak kodu. (Uygulamayı yüklemek için kendi penceresinde açmanız gerekir. Aşağıdaki gömülü sürüm, mini bilgi çubuğunu tetiklemez.)
Mutlu tasarım odası!