Skip to content

UI_GUIDE.md

Latest commit

 

History

History
196 lines (148 loc) · 5.95 KB

UI_GUIDE.md

File metadata and controls

196 lines (148 loc) · 5.95 KB

🎨 WalrusCanvas AI - User Interface Guide

🚀 How to Use the Application

Step 1: Connect Your Wallet

Location: Top-right corner of the screen

  1. Click "Connect Wallet" button (green button in top-right)

  2. Choose your wallet:

    • Sui Wallet (Recommended) - Install from Chrome Web Store
    • Suiet (Alternative) - Install from Chrome Web Store
    • Unsafe Burner (Testing) - For development/testing only

  3. Follow the wallet prompts to connect

  4. Verify connection - You should see your wallet address and balance

Step 2: Create Your Design

Location: Left sidebar (Toolbar)

Drawing Tools:

  • 🖱️ Select Tool - Click and drag to select objects
  • 📝 Text Tool - Click on canvas to add text
  • ⬜ Rectangle Tool - Click and drag to create rectangles
  • ⭕ Circle Tool - Click and drag to create circles
  • 🖼️ Image Tool - Click to add images

AI Tools:

  • ✨ AI Text - Generate text using AI
  • 🎨 AI Image - Generate images using AI

Background Colors:

  • Click any color square to change canvas background

Step 3: Save Your Design

Location: Multiple places for easy access

Option 1: Top Header (Quick Save)

  • Click "Save" button in top-right corner

Option 2: Left Sidebar (Detailed Save)

  • Scroll down to "Storage" section
  • Click "Save to Walrus" button

Option 3: Keyboard Shortcut

  • Press Ctrl+S (or Cmd+S on Mac)

Step 4: Load Existing Designs

Location: Left sidebar

  • Scroll to "Storage" section
  • Click "Load from Walrus" button
  • Enter the Blob ID you received when saving

🎯 Main Action Buttons

Top Header (Always Visible)

  • 🔗 Connect Wallet - Connect your Sui wallet
  • 💾 Save - Quick save to Walrus storage
  • 📥 Download - Download as PNG file
  • 🔗 Share - Share your design
  • ⚙️ Settings - Application settings

Left Sidebar (Toolbar)

  • Drawing Tools - Select, Text, Rectangle, Circle, Image
  • AI Tools - AI Text Generation, AI Image Generation
  • Background Colors - 10 preset colors
  • Zoom Controls - Zoom in/out, reset zoom
  • Storage Actions - Save to Walrus, Load from Walrus
  • Canvas Actions - Delete selected, Clear canvas

Right Sidebar (Properties)

  • Object Properties - Edit selected objects
  • Export Options - PNG, SVG, JSON export
  • Import Options - Import JSON files
  • Canvas Info - Object count, canvas size

🔧 Detailed Button Guide

🖱️ Drawing Tools

  1. Select Tool (Mouse icon)

    • Click to select objects
    • Drag to move objects
    • Resize using corner handles

  2. Text Tool (T icon)

    • Click on canvas to add text
    • Edit text in right sidebar
    • Change font, size, color, etc.

  3. Rectangle Tool (Square icon)

    • Click and drag to create rectangles
    • Customize in right sidebar

  4. Circle Tool (Circle icon)

    • Click and drag to create circles
    • Customize in right sidebar

  5. Image Tool (Image icon)

    • Click to open image upload dialog
    • Upload from computer or add URL

✨ AI Tools

  1. AI Text (Sparkles icon)

    • Click to open AI text generation
    • Enter prompt for AI-generated text
    • Choose from generated options

  2. AI Image (Wand icon)

    • Click to open AI image generation
    • Enter prompt for AI-generated images
    • Choose from generated options

💾 Storage Actions

  1. Save to Walrus (Green button)

    • Requires wallet connection
    • Enter design name
    • Choose encryption option
    • Get Blob ID for later loading

  2. Load from Walrus (Purple button)

    • Enter Blob ID from previous save
    • Load design onto canvas

🎨 Export Options

  1. PNG Export (Blue button)

    • Download as PNG image
    • High quality raster format

  2. SVG Export (Green button)

    • Download as SVG vector
    • Scalable vector format

  3. JSON Export (Purple button)

    • Download as JSON data
    • Editable design format

🔐 Wallet Integration

Wallet Status Indicators

  • 🟢 Connected - Shows wallet name and address
  • 🔴 Not Connected - Shows "Connect Wallet" button
  • 🟡 Dev Mode - Shows "Unsafe Burner (Dev)" for testing

Wallet Requirements

  • Saving designs requires wallet connection
  • All transactions require user approval
  • Private keys are never stored in the app

🎨 Design Workflow

Basic Workflow:

  1. Connect wallet → 2. Create design → 3. Save to Walrus → 4. Share Blob ID

Advanced Workflow:

  1. Connect wallet → 2. Use AI tools → 3. Customize design → 4. Save with encryption → 5. Export multiple formats

🚨 Important Notes

Before You Start:

  • Install a wallet extension (Sui Wallet recommended)
  • Have some SUI tokens for transaction fees
  • Test with "Unsafe Burner" first if you're new

Saving Designs:

  • Wallet connection required for all saves
  • Design name required for identification
  • Blob ID is your access key - save it somewhere safe
  • Encryption recommended for private designs

Loading Designs:

  • No wallet required for loading
  • Blob ID required - paste the ID you received when saving
  • Designs load instantly from decentralized storage

🆘 Troubleshooting

"Connect Wallet" Button Not Working:

  • Check if wallet extension is installed
  • Refresh the page
  • Try a different wallet

"Save to Walrus" Button Disabled:

  • Make sure wallet is connected
  • Check if you have SUI tokens
  • Try refreshing the page

Design Not Loading:

  • Verify Blob ID is correct
  • Check if design was saved successfully
  • Try refreshing the page

🎉 You're Ready!

Now you know how to use WalrusCanvas AI! Start by connecting your wallet and creating your first decentralized design.

Quick Start: Connect Wallet → Add Text → Save to Walrus → Share Blob ID