iSore: Interactive Image Layer Editor – Overview and Features


iSore: Interactive Image Layer Editor – Overview and Features

iSore is a powerful Svelte-based application designed for interactively editing and layering images. It allows users to create new projects, upload various image types, and manipulate their properties with real-time feedback.

Getting Started

To begin using iSore, you’ll first need to log in. Once authenticated, you can access your existing projects or create new ones.

Core Features

Project Management

  • Project Dropdown: Select from a list of your existing projects.
  • New Project: Enter a name for your new project in the designated input field.
  • Create Button: Click this button to create a new project with the provided name.

Canvas and Image Upload

  • Canvas Sizes: The canvas automatically adjusts to standard social media image dimensions, providing a suitable workspace for your designs.
  • File Type Dropdown: Choose the file type you intend to upload. Currently, SVG image is a supported type.
  • Choose File Button: Click to select the image file you wish to upload from your local machine into the currently selected project.
  • Upload Button: After selecting a file, click this button to upload it. If the file is valid, it will be displayed on the canvas, layered on top of any existing images.

Image Manipulation

Properties Panel

The Properties Panel allows you to fine-tune the attributes of your selected image. You can control its visibility and position using the “Properties Panel” dropdown with the following options:

  • Right Side: Displays the properties panel on the right side of the screen.
  • Left Side: Displays the properties panel on the left side of the screen.
  • Don’t Show: Hides the properties panel.

When an image is selected on the canvas, its properties will appear in the panel. If “Don’t Show” is selected, no properties will be visible.

Items List

  • Items Dropdown: This dropdown lists all images within your currently selected project.
  • Selecting an Item: When an image is selected from this list (or by clicking it on the canvas), it becomes highlighted. The visibility of this highlighting is controlled by the Show Border and Show Item checkboxes in the Visibility section of the Properties Panel.
    • Show Border (Checkbox): When checked, a border will appear around the selected image. When moving an image, only this border will move until you release it, at which point the image will snap to the new position.
    • Show Item (Checkbox): When checked, the image itself will visually move with the border during dragging. If unchecked, only the border moves during the drag operation. You can uncheck Show Border if you prefer not to see the border at all.

Real-time Changes and Saving

Any adjustments made to an image’s properties via the Properties Panel will take effect almost immediately, depending on your network connection. All changes are automatically saved, and there is currently no Undo feature.

Image Properties

The Properties Panel organizes editable attributes into six accordion-style sections, ensuring only one section is visible at a time for a clean interface. Note that not all properties apply to all image types (e.g., some are specific to SVG files). However, in this version, all properties remain active regardless of the selected image type.

VISIBILITY

  • Show Border: (Checkbox) Toggles the visibility of a border around the selected image.
  • Show Item: (Checkbox) Toggles the visual display of the selected image itself.

IDENTITY

  • Item Name: (Text Input) Assigns a custom name to the selected image.
  • Layer Order: (Number Input) Controls the stacking order of the image relative to others on the canvas. Higher numbers bring the image to the front.

DIMENSIONS & POSITION

  • Position X: (Number Input) Adjusts the horizontal position of the image on the canvas.
  • Position Y: (Number Input) Adjusts the vertical position of the image on the canvas.
  • Width: (Number Input) Sets the width of the image.
  • Height: (Number Input) Sets the height of the image.
  • Proportional: (Checkbox) When checked, changing either Width or Height will automatically adjust the other dimension to maintain the image’s aspect ratio.
  • Scale: (Number Input) Uniformly scales the image up or down.

MAIN APPEARANCE

  • Opacity: (Slider and Number Input) Controls the overall transparency of the image (0 = fully transparent, 1 = fully opaque).
  • Border: (Color Picker and Number Input) Sets the color and width of the image’s border.
  • Stroke: (Color Picker and Number Input) Sets the color and size of the image’s stroke (applies primarily to SVGs).
  • Fill Color: (Color Picker) Sets the main fill color of the image (applies primarily to SVGs).
  • Fill Opacity: (Slider and Number Input) Controls the transparency of the image’s fill color (0 = fully transparent, 1 = fully opaque).

RECTANGLE PROPERTIES (Applies primarily to SVG rectangles)

  • Position X: (Number Input) Adjusts the horizontal position of the rectangle within the SVG.
  • Position Y: (Number Input) Adjusts the vertical position of the rectangle within the SVG.
  • Rotation: (Number Input) Rotates the rectangle.
  • Fill Color: (Color Picker) Sets the fill color of the rectangle.
  • Opacity: (Slider and Number Input) Controls the transparency of the rectangle.

TEXT PROPERTIES (Applies primarily to SVG text elements)

  • Message: (Text Area) Edit the text content of the selected text element.
  • Position X: (Number Input) Adjusts the horizontal position of the text.
  • Position Y: (Number Input) Adjusts the vertical position of the text.
  • Rotation: (Number Input) Rotates the text.
  • Opacity: (Slider and Number Input) Controls the transparency of the text.
  • Customize Font Button: Opens a new window with the following options:
    • Google Font Category: Select a category of Google Fonts.
    • Font Family: A list of fonts within the selected category will populate (initially showing the top 50).
    • Get All Fonts in This Category: Click to load all available fonts for the chosen category.
    • Font Size: Adjusts the size of the text.
    • Font Color: Changes the color of the text.
    • Sample Display: A live sample of the font will be shown in the font customization window, and the text on the main canvas will also update in real-time.

Actions

  • Delete Item Button: Removes the currently selected image from the project.
  • Download Image Button: Downloads the composite image as it appears on the screen.
  • Download API Docs: Downloads a file containing documentation for all available API endpoints, including examples for Python and cURL.
  • Get API Key: Generates a new API key and deactivates your previous one. This is only necessary if you plan to interact with the iSore API directly.
  • Log off: Logs you out of your current project session.