Vision Canvas | World Class Digital Notepad & Drawing Tool

Description

A world-class digital notepad and drawing canvas, built for seamless note-taking, sketching, and creative expression. Experience effortless organization with project management, real-time saving, and light/dark theme support.

Topic Tags

digital-notepad, drawing-tool, canvas, fabric-js, dexie-js, note-taking, sketchpad, web-app, javascript, html, css, minimalist-ui, productivity-tool

Project Overview (परियोजना का अवलोकन)

Vision Canvas एक अत्याधुनिक (state-of-the-art) वेब-आधारित डिजिटल नोटपैड और ड्राइंग टूल है जिसे आपकी रचनात्मकता और उत्पादकता को बढ़ाने के लिए डिज़ाइन किया गया है। Fabric.js लाइब्रेरी का उपयोग करके बनाया गया, यह आपको एक इंटरैक्टिव कैनवास पर ड्रॉ करने, नोट्स लेने और विभिन्न ऑब्जेक्ट्स को मैनेज करने की सुविधा देता है। Dexie.js के साथ लोकल डेटाबेस इंटीग्रेशन यह सुनिश्चित करता है कि आपके सभी प्रोजेक्ट्स सुरक्षित रूप से सेव रहें और आसानी से एक्सेस किए जा सकें। इसमें मल्टीपल प्रोजेक्ट्स, टैब-आधारित नेविगेशन, डार्क/लाइट थीम और कीबोर्ड शॉर्टकट्स जैसी सुविधाएँ भी शामिल हैं।

Features (विशेषताएँ)

• इंटरैक्टिव कैनवास (Interactive Canvas): Fabric.js पर आधारित एक शक्तिशाली ड्राइंग और नोटपैड कैनवास।
• मल्टीपल प्रोजेक्ट्स (Multiple Projects): अलग-अलग प्रोजेक्ट्स बनाएँ, सेव करें और उनके बीच आसानी से स्विच करें।
• टैब-आधारित नेविगेशन (Tab-Based Navigation): हाल ही में खुले प्रोजेक्ट्स को टैब बार में एक्सेस करें।
• डैशबोर्ड (Dashboard): अपने सभी प्रोजेक्ट्स को थंबनेल और नाम के साथ एक ऑर्गेनाइज्ड डैशबोर्ड में देखें।
• रीनेम और डिलीट (Rename & Delete): प्रोजेक्ट्स को रीनेम करें या उन्हें डैशबोर्ड से डिलीट करें।
• ऑटो-सेव (Auto-Save): आपके काम को ऑटोमेटिकली लोकल डेटाबेस में सेव करता है, जिससे डेटा लॉस का जोखिम कम होता है।
• डार्क/लाइट थीम (Dark/Light Theme): अपनी पसंद के अनुसार डार्क या लाइट थीम में स्विच करें।
• कीबोर्ड शॉर्टकट्स (Keyboard Shortcuts): सामान्य कार्यों (जैसे अनडू, रीडू, कॉपी, डिलीट) के लिए बिल्ट-इन शॉर्टकट्स का उपयोग करके अपनी वर्कफ़्लो को तेज़ करें।
• मॉडर्न UI (Modern UI): एक आकर्षक और न्यूनतम डिज़ाइन जो उपयोग में आसान और देखने में सुखद है।
• स्थायी डेटा संग्रहण (Persistent Data Storage): Dexie.js (IndexedDB) का उपयोग करके आपके ब्राउज़र में सुरक्षित और ऑफ़लाइन डेटा स्टोरेज।

Use Cases (उपयोग के उदाहरण)

Vision Canvas उन व्यक्तियों और पेशेवरों के लिए एक आदर्श टूल है जिन्हें विज़ुअल और टेक्स्टुअल दोनों तरह से अपने विचारों को व्यवस्थित करने की आवश्यकता होती है:

• नोट्स लेना (Note-Taking): मीटिंग नोट्स, लेक्चर नोट्स या पर्सनल रिमाइंडर्स को एक डायनामिक तरीके से रिकॉर्ड करें।
• ब्रेनस्टॉर्मिंग और आइडिया मैपिंग (Brainstorming & Idea Mapping): विचारों को विज़ुअली मैप करें, फ्लोचार्ट्स बनाएँ या कॉन्सेप्ट्स को स्केच करें।
• डिजिटल स्केचिंग और डूडलिंग (Digital Sketching & Doodling): त्वरित रेखाचित्र बनाएँ, डिज़ाइन आइडियाज को ड्रा करें या बस डूडल करें।
• एजुकेशन और टीचिंग (Education & Teaching): छात्रों के लिए इंटरेक्टिव नोट्स या शिक्षकों के लिए डिजिटल व्हाइटबोर्ड के रूप में उपयोग करें।
• प्रोजेक्ट प्लानिंग (Project Planning): प्रोजेक्ट के लेआउट्स, वायरफ्रेम्स या वर्कफ़्लो को विज़ुअली प्लान करें।
• पर्सनल जर्नल (Personal Journal): अपनी दैनिक गतिविधियों या विचारों को विज़ुअल एलिमेंट्स के साथ रिकॉर्ड करें।

How to Use (कैसे इस्तेमाल करें - स्टेप-बाय-स्टेप गाइड)

Vision Canvas को उपयोग करना बहुत सीधा और सरल है। यहाँ स्टेप-बाय-स्टेप गाइड दी गई है:

1. प्रोजेक्ट को सेट अप करें

यह प्रोजेक्ट एक स्टैंडअलोन वेब एप्लिकेशन है, जिसमें index.html, style.css, और script.js फाइल्स शामिल हैं। इसे चलाने के लिए इंटरनेट कनेक्शन की आवश्यकता केवल Fabric.js और Dexie.js (जो CDN से लोड होते हैं) को पहली बार लोड करने के लिए होगी।

1. फाइलें डाउनलोड करें: index.html, style.css, और script.js इन तीनों फाइलों को एक ही फोल्डर में अपने कंप्यूटर पर डाउनलोड करें।
2. ब्राउज़र में खोलें: index.html फाइल पर डबल-क्लिक करें। यह फाइल आपके डिफ़ॉल्ट वेब ब्राउज़र (जैसे Chrome, Firefox, Edge) में खुल जाएगी, और Vision Canvas एप्लिकेशन चलना शुरू हो जाएगा।

2. प्रोजेक्ट्स को मैनेज करें (डैशबोर्ड)

• एप्लिकेशन खुलने पर, आपको "Dashboard" (प्रोजेक्ट स्विचर) दिखाई देगा। यहाँ आप अपने सभी सेव किए गए प्रोजेक्ट्स को देख सकते हैं।
• नया प्रोजेक्ट बनाएँ: CREATE NEW PROJECT बटन पर क्लिक करके एक खाली कैनवास के साथ एक नया प्रोजेक्ट शुरू करें।
• प्रोजेक्ट लोड करें: किसी भी मौजूदा प्रोजेक्ट कार्ड पर क्लिक करके उसे कैनवास पर लोड करें।
• प्रोजेक्ट का नाम बदलें: प्रोजेक्ट कार्ड पर राइट-क्लिक करके आप प्रोजेक्ट का नाम बदल सकते हैं।
• डैशबोर्ड बंद करें: CLOSE DASHBOARD बटन पर क्लिक करके डैशबोर्ड बंद करें और सक्रिय प्रोजेक्ट पर काम करना शुरू करें।

3. कैनवास पर काम करना

• ऑब्जेक्ट जोड़ें: आप कैनवास पर विभिन्न ऑब्जेक्ट्स (जैसे टेक्स्ट, शेप्स) को जोड़ सकते हैं। (यह आपकी script.js के अनुसार 'add object' के लिए अतिरिक्त बटन या फंक्शनलिटी हो सकती है।)
• ड्रा करें: यदि ड्राइंग फंक्शनलिटी सक्षम है, तो आप कैनवास पर फ्रीहैंड ड्रा कर सकते हैं।
• ऑब्जेक्ट्स को मैनेज करें: किसी भी ऑब्जेक्ट को सेलेक्ट करें, उसे मूव करें, रीसाइज़ करें या रोटेट करें।
• अनडू/रीडू (Undo/Redo): कीबोर्ड शॉर्टकट्स Ctrl + Z (अनडू) और Ctrl + Y (रीडू) का उपयोग करके अपने एक्शन को पूर्ववत या फिर से करें।
• डिलीट करें: किसी ऑब्जेक्ट को सेलेक्ट करें और Delete की दबाकर उसे हटाएँ।
• ग्रुप करें: एकाधिक ऑब्जेक्ट्स को सेलेक्ट करें और Ctrl + A + G (यदि सक्षम हो) का उपयोग करके उन्हें ग्रुप करें।
• डुप्लिकेट करें: किसी ऑब्जेक्ट को सेलेक्ट करें और Ctrl + D का उपयोग करके उसे डुप्लिकेट करें।

4. टैब और थीम का उपयोग करें

• टैब नेविगेशन: ऊपर के टैब बार में आपके हाल ही में खुले प्रोजेक्ट्स दिखाई देंगे। किसी भी टैब पर क्लिक करके तुरंत उस प्रोजेक्ट पर स्विच करें।
• नया टैब बनाएँ: + (ऐड टैब) बटन पर क्लिक करके एक नया खाली प्रोजेक्ट बनाएँ।
• थीम टॉगल करें: dark_mode आइकॉन पर क्लिक करके लाइट और डार्क थीम के बीच स्विच करें।
• शॉर्टकट्स देखें: keyboard आइकॉन पर क्लिक करके कीबोर्ड शॉर्टकट्स की लिस्ट देखें।

Technology Stack (तकनीकी जानकारी)

यह प्रोजेक्ट निम्नलिखित वेब तकनीकों का उपयोग करके बनाया गया है:

• HTML (HyperText Markup Language): वेबपेज की संरचना और UI घटकों को व्यवस्थित करने के लिए (index.html)।
• CSS (Cascading Style Sheets): एप्लिकेशन के आकर्षक, न्यूनतम डिज़ाइन, लाइट/डार्क थीम सपोर्ट और रिस्पॉन्सिव स्टाइलिंग के लिए (style.css)।
• JavaScript: एप्लिकेशन की सभी इंटरैक्टिव कार्यक्षमताओं (जैसे कैनवास मैनिपुलेशन, प्रोजेक्ट मैनेजमेंट, डेटा सेविंग/लोडिंग, UI अपडेट्स) के लिए (script.js)।
• Fabric.js: एक शक्तिशाली JavaScript कैनवास लाइब्रेरी जो ड्राइंग, ऑब्जेक्ट मैनिपुलेशन और कैनवास इंटरैक्शन को संभव बनाती है।
• Dexie.js: IndexedDB के लिए एक न्यूनतम रैपर जो लोकल स्टोरेज में डेटाबेस प्रबंधन को आसान बनाता है, जिससे प्रोजेक्ट डेटा स्थायी रूप से सेव होता है।
• Google Fonts: Inter फॉन्ट के लिए।
• Material Icons: UI आइकनों के लिए।

Future Enhancements (भविष्य के सुधार)

• ऑब्जेक्ट लाइब्रेरी (Object Library): प्री-बिल्ट शेप्स, आइकन्स और एलिमेंट्स की लाइब्रेरी जो कैनवास पर आसानी से जोड़ी जा सकें।
• एक्सपोर्ट विकल्प (Export Options): कैनवास कंटेंट को इमेज (PNG, JPG) या PDF के रूप में एक्सपोर्ट करने की क्षमता।
• इंपोर्ट इमेज (Import Images): बाहरी इमेज फाइलों को कैनवास पर इंपोर्ट करने की क्षमता।
• लेयर्स (Layers): ऑब्जेक्ट्स को लेयर्स में व्यवस्थित करने और मैनेज करने के लिए।
• शेयरिंग और कोलाब्रेशन (Sharing & Collaboration): प्रोजेक्ट्स को दूसरों के साथ साझा करने और वास्तविक समय में सहयोग करने के लिए।
• अधिक टूल्स (More Tools): विभिन्न प्रकार के ब्रश, इरेज़र और एडिटिंग टूल्स।
• क्लाउड सिंकिंग (Cloud Syncing): लोकल डेटाबेस के बजाय क्लाउड स्टोरेज के साथ प्रोजेक्ट्स को सिंक करने की क्षमता।

Contribution (योगदान)

इस प्रोजेक्ट में सुधार के लिए आपके सुझावों और योगदान का हमेशा स्वागत है! यदि आप कोड में सुधार करना चाहते हैं, नई सुविधाएँ जोड़ना चाहते हैं, या किसी बग को ठीक करना चाहते हैं, तो कृपया इन स्टेप्स का पालन करें:

1. इस रिपॉजिटरी को फोर्क करें।
2. एक नई ब्रांच (git checkout -b feature/AmazingFeature) बनाएँ।
3. अपने बदलाव करें और कमिट करें (git commit -m 'Add some AmazingFeature')।
4. ब्रांच को पुश करें (git push origin feature/AmazingFeature)।
5. एक पुल रिक्वेस्ट खोलें।

---