EyeDropper API, आईड्रॉपर टूल बनाने का तरीका उपलब्ध कराता है. इसकी मदद से, उपयोगकर्ता अपनी स्क्रीन से कलर का सैंपल ले सकते हैं. इसमें ब्राउज़र विंडो के बाहर से भी कलर का सैंपल लिया जा सकता है. जानें कि 3D मॉडल एडिटर Blockbench, अपने कोडबेस में इस एपीआई का इस्तेमाल कैसे करता है.
परिचय
(यह लेख वीडियो के तौर पर भी उपलब्ध है.)
Blockbench, पिक्सल आर्ट टेक्सचर वाले लो-पॉली मॉडल के लिए, एक मुफ़्त और आधुनिक मॉडल एडिटर है. अगर आपने कभी Minecraft खेला है, तो हो सकता है कि आपने Blockbench की मदद से बनाई गई ऐसेट देखी हों. उदाहरण के लिए, बकरी, जिसे Minecraft में Caves and Cliffs Update, Part 1 के हिस्से के तौर पर जोड़ा गया था. GPL वर्शन 3 के लाइसेंस वाला Blockbench कोड, GitHub पर ओपन सोर्स है.
Blockbench आज़माने के लिए, web.blockbench.net पर जाकर ऐप्लिकेशन लॉन्च करें. इसे PWA के तौर पर, अपने डेस्कटॉप पर इंस्टॉल किया जा सकता है और स्टैंडअलोन विंडो में लॉन्च किया जा सकता है. अगर आपने 3D मॉडलिंग पहले कभी नहीं की है, तो GitHub की कोड खोज सुविधा का इस्तेमाल करके, ओपन सोर्स .bbmodel फ़ाइल के कई उदाहरणों में से किसी एक से शुरुआत करें. उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में दिखने वाले ट्रेन का मॉडल आज़माएं.
EyeDropper API
Blockbench में कई सुविधाएं हैं. इनमें से एक है पेंट करने की सुविधा. इसका इस्तेमाल करके, किसी ट्रेन को टैग किया जा सकता है. कृपया असल दुनिया में ऐसा न करें. आप देख सकते हैं कि मैंने टैग करने के लिए, चमकदार नारंगी रंग का इस्तेमाल किया है.
यह असल में एक नारंगी है, जिसे मैंने EyeDropper API की मदद से, सीधे macOS Ventura के वॉलपेपर से निकाला है. नीचे दिए गए स्क्रीनशॉट में देखा जा सकता है कि ऐप्लिकेशन विंडो के बाईं ओर मौजूद ऑरेंज रंग का सर्कल, ऐप्लिकेशन के बाहर सीधे मेरे डेस्कटॉप या किसी दूसरे ऐप्लिकेशन पर पहुंच सकता है.
Blockbench ओपन सोर्स है. इससे यह पता लगाया जा सकता है कि डेवलपर ने एपीआई को कैसे लागू किया है. जिस कोड की शिकायत की गई है वह JannisX11/blockbench/blob/master/js/texturing/color.js में है. Blockbench, Electron.js ऐप्लिकेशन के तौर पर भी उपलब्ध है. टिप्पणी से पता चलता है कि इसमें Electron से जुड़ी समस्या के लिए, खास केस हैंडल करने की सुविधा है. इसकी मदद से, कलर पिकर, विंडो के बाहर का रंग नहीं चुन सकता. वेब एपीआई के मामले में, यह कोई समस्या नहीं है. इसे कोड स्निपेट के हाइलाइट किए गए हिस्से में देखा जा सकता है. एपीआई का इस्तेमाल करना आसान है. नया EyeDropper इंस्टेंस बनाएं और उसका open() मेथड कॉल करें. इस तरीके से, चुने गए रंग को हेक्साडेसिमल sRGB फ़ॉर्मैट में दिखाने वाली sRGBHex स्ट्रिंग मिलती है.
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);
}
},
});
मीटिंग में सामने आए नतीजे
कलर पिकर, Blockbench जैसे क्रिएटिविटी सॉफ़्टवेयर का एक छोटा, लेकिन अहम हिस्सा है. ज़्यादातर मामलों में, पसंदीदा रंग ऐप्लिकेशन विंडो का हिस्सा नहीं होता. इसे बाहर कहीं भी ढूंढा जा सकता है. हो सकता है कि यह किसी दूसरी स्क्रीन पर भी हो. ऐसा कलर पिकर जो ऐसे मामलों में रंग चुनने की अनुमति नहीं देता है, वह काम का नहीं होता. EyeDropper API को खास तौर पर इस तरह के इस्तेमाल के उदाहरणों के लिए बनाया गया था. नवंबर 2021 में लागू होने के बाद से, यह Blockbench के लिए बेहतर तरीके से काम कर रहा है. अगर आपको ब्लॉकबेंच गेम खेलना है, तो रंग चुनें!