Eyedropper API एक आईड्रॉपर टूल बनाने की सुविधा देता है जिसकी मदद से उपयोगकर्ता अपनी स्क्रीन से रंगों के नमूने देख सकते हैं, जैसे कि ब्राउज़र विंडो से बाहर. जानें कि 3D मॉडल एडिटर ब्लॉकबेंच अपने कोडबेस में, इस एपीआई का इस्तेमाल कैसे करता है.
शुरुआती जानकारी
(यह लेख वीडियो के रूप में भी उपलब्ध है.)
Blockbench, पिक्सल आर्ट टेक्सचर वाले लो-पॉली मॉडल के लिए, मुफ़्त और आधुनिक मॉडल एडिटर है. अगर आपने कभी Minecraft खेला हो, तो हो सकता है कि आपने ब्लॉकबेंच की मदद से बनाई गई एसेट देखी हों. उदाहरण के लिए, बकरी जिसे गुफाओं और क्लिफ़ अपडेट के भाग के रूप में Minecraft में जोड़ा गया था, पार्ट 1. GPL वर्शन 3 वाला लाइसेंस वाला Blockbench कोड GitHub पर ओपन सोर्स है.
ब्लॉकबेंच को आज़माने के लिए, web.blockbench.net पर जाकर ऐप्लिकेशन लॉन्च करें. PWA को, अपने डेस्कटॉप पर इंस्टॉल करके स्टैंडअलोन विंडो में लॉन्च किया जा सकता है. अगर आपने 3D मॉडलिंग के बारे में ज़्यादा नहीं सोचा है, तो ओपन सोर्स .bbmodel फ़ाइल के कई उदाहरणों में से किसी एक से शुरुआत की जा सकती है. ये उदाहरण आपको GitHub की कोड खोज की मदद से मिल सकते हैं. उदाहरण के लिए, ट्रेन का वह मॉडल आज़माएं जिसे इस स्क्रीनशॉट में देखा जा सकता है.
EyeDropper API
कई अन्य सुविधाओं में, Blockbench की मदद से, पेंट करने की सुविधा दी गई है. इसलिए, अगर आपको किसी ट्रेन को टैग करना है, तो अब ऐसा किया जा सकता है. कृपया वास्तविक दुनिया में ऐसा न करें. यह देखा जा सकता है कि टैग करने के लिए, मैंने चमकीले नारंगी रंग का इस्तेमाल किया है.
यह एक संतरा है, जिसे मैंने Eyedropper API की मदद से सीधे macOS Ventura वॉलपेपर से एक्सट्रैक्ट किया है. जैसा कि नीचे दिए गए स्क्रीनशॉट में दिख रहा है, आई ड्रॉपर (ऐप्लिकेशन की विंडो की बाईं ओर मौजूद नारंगी रंग का गोला), ऐप्लिकेशन के बाहर सीधे मेरे डेस्कटॉप या ऐसे किसी भी ऐप्लिकेशन पर पहुंच सकता है जिसे मैंने खोला हो.
ब्लॉकबेंच के ओपन सोर्स होने से आपको यह पता चल सकता है कि डेवलपर ने एपीआई को कैसे लागू किया है. यह कोड JannisX11/blockbench/blob/master/js/texturing/color.js में है. ब्लॉकबेंच, Electron.js ऐप्लिकेशन के तौर पर भी उपलब्ध है. इसे टिप्पणी से देखा जा सकता है. इसमें इलेक्ट्रॉन में आने वाली समस्या के लिए खास केस हैंडलिंग हैं, जहां कलर पिकर विंडो के बाहर से रंग नहीं चुन सकता है. वेब एपीआई को कोड स्निपेट के हाइलाइट किए गए हिस्से में देखा जा सकता है. हालांकि, इसमें कोई समस्या नहीं है. एपीआई का इस्तेमाल करना आसान है. एक नया EyeDropper इंस्टेंस बनाएं और इसके open() तरीके को कॉल करें. यह तरीका, चुने गए रंग को दिखाने वाली sRGBHex स्ट्रिंग की मदद से, हेक्ज़ाडेसिमल sRGB फ़ॉर्मैट में ठीक होता है.
new Action("pick_screen_color", {
icon: "colorize",
category: "color",
condition: () => typeof EyeDropper == "function",
click: async function () {
if (Blockbench.platform == "win32") {
// workaround for https://github.com/electron/electron/issues/27980
ipcRenderer.send("request-color-picker", {
sync: settings.sync_color.value,
});
} else if (typeof EyeDropper == "function") {
let dropper = new EyeDropper();
let { sRGBHex } = await dropper.open();
ColorPanel.set(sRGBHex);
}
},
});
मीटिंग में सामने आए नतीजे
कलर पिकर, ब्लॉकबेंच जैसे क्रिएटिविटी सॉफ़्टवेयर का एक छोटा लेकिन अहम हिस्सा है. अक्सर, यह भी हो सकता है कि मनचाहा रंग, ऐप्लिकेशन की विंडो का हिस्सा न हो, लेकिन वह रंग किसी जगह पर मिल जाए, भले ही किसी दूसरी स्क्रीन पर. ऐसे मामलों में, जो कलर पिकर आपको रंग चुनने से रोकता है, हो सकता है कि वह काफ़ी काम का हो. Eyedropper API को बिलकुल इसी तरह के इस्तेमाल के मामलों के लिए बनाया गया था. यह नवंबर 2021 में लागू किए जाने के बाद से ही ब्लॉकबेंच के लिए बढ़िया काम कर रहा है. ब्लॉकबेंच के साथ खेलें, तो रंग चुनें!