iSore Usage Workflow: From Canvas to Code


iSore Usage Workflow: From Canvas to Code

This sequence guides you through using iSore, covering both the interactive user interface and how to leverage its API for programmatic control.

Part 1: Setting Up Your Project and Adding Images (UI-driven)

Log In:

  • Access the iSore application and log in with your credentials.

Create or Select a Project:

  • To create a new project:
    • Locate the “New Project” input field.
    • Enter a descriptive name for your project (e.g., “Social Media Banner Q3”).
    • Click the “Create” button.
  • To select an existing project:
    • Click the “Project” dropdown list.
    • Choose the desired project from the displayed list.

Set Canvas Size (Implicit):

  • The canvas will automatically adjust to standard social media image sizes. You don’t explicitly set this, but be aware of the target dimensions for your design.

Upload Images:

  • Identify the “File type” dropdown. Select the appropriate type for your image (e.g., “SVG image”).
  • Click the “Choose File” button.
  • Navigate your local file system and select the image file you wish to upload.
  • Click the “Upload” button. The image will appear on the canvas, layered on top of any existing content.
  • Repeat this step for all images you want to include in your project.

Part 2: Arranging and Customizing Images (UI-driven)

Select an Image:

  • Click directly on an image on the canvas, or select its name from the “Items” dropdown list. The selected image will be highlighted (if “Show Border” is enabled in the Properties Panel).

Configure the Properties Panel:

  • Use the “Properties Panel” dropdown (Right Side, Left Side, Don’t Show) to decide where you want the panel to appear, or if you want to hide it. For editing, “Right Side” or “Left Side” is recommended.

Adjust Image Position and Dimensions:

  • With an image selected and the Properties Panel open, navigate to the “DIMENSIONS & POSITION” section (click its header if it’s not open).
  • Drag and Drop: Click and drag the image directly on the canvas to visually move it.
    • If “Show Border” is checked and “Show Item” is unchecked (under “VISIBILITY”), only the border will move during the drag. The image will snap to the new position when released.
    • If both “Show Border” and “Show Item” are checked, the image itself will visibly move with the border.
  • Precise Positioning: Use the “Position X” and “Position Y” number inputs to precisely control the image’s coordinates.
  • Resize: Adjust the “Width” and “Height” number inputs.
    • Check the “Proportional” checkbox to maintain the aspect ratio when resizing.
  • Scale: Use the “Scale” input to uniformly scale the image.

Modify Main Appearance:

  • Open the “MAIN APPEARANCE” section in the Properties Panel.
  • Opacity: Use the “Opacity” slider or number input to make the image more or less transparent.
  • Border: Change the “Border” color using the color picker and adjust its thickness with the number input.
  • Stroke (for SVGs): Set the “Stroke” color and “Stroke Size”.
  • Fill Color (for SVGs): Choose a “Fill Color”.
  • Fill Opacity (for SVGs): Adjust the “Fill Opacity” slider or input.

Edit Rectangle Properties (for SVG Rectangles):

  • If your selected image is an SVG containing a rectangle, open the “RECTANGLE PROPERTIES” section.
  • Adjust “Position X”, “Position Y”, “Rotation”, “Fill Color”, and “Opacity” for the rectangle.

Customize Text Properties (for SVG Text):

  • If your selected image is an SVG containing text, open the “TEXT PROPERTIES” section.
  • Message: Edit the text content in the “Message” textarea.
  • Position X, Position Y, Rotation: Adjust the text’s position and rotation.
  • Opacity: Control the text’s transparency.
  • Customize Font: Click this button to open a new font selection window:
    • Select a “Google Font Category” from the dropdown.
    • Choose a “Font Family” from the populated list (click “Get All Fonts in This Category” if needed).
    • Adjust “Font Size” and “Font color”. Observe the live sample and the changes on the main canvas.
    • Close the font selection window when done.

Manage Layers and Name:

  • Open the “IDENTITY” section.
  • Item Name: Give your image a custom, descriptive name for easier identification in the “Items” dropdown.
  • Layer Order: Change the “Layer Order” number to bring the image to the front (higher number) or send it to the back (lower number).

Delete an Image:

  • Select the image you wish to remove.
  • Click the “Delete Item” button at the bottom of the Properties Panel.

Important Note: All changes made in the Properties Panel are automatically saved. There is no undo functionality, so be mindful of your edits.

Part 3: Finalizing and Downloading (UI-driven)

Review Your Design:

  • Ensure all images are positioned and styled as desired.

Download Final Image:

  • Click the “Download Image” button. This will download the composite image as you currently see it on the screen.

Part 4: Accessing API Documentation and Keys (UI-driven for programmatic use)

Download API Documentation:

  • Click the “Download API Docs” button. This will download a file containing comprehensive information on all iSore API endpoints, including how to call them using Python and cURL. This is crucial if you plan to integrate iSore into automated workflows or custom applications.

Get a New API Key (if needed):

  • If you have lost your current API key, or if you need a fresh one for security reasons, click the “Get API Key” button. Your previous key will be deactivated, and a new one will be provided. You’ll need this key to authenticate your programmatic calls to the iSore API endpoints.

Log Off:

  • Click the “Log off” button to exit your current project session.

Important Note on Session Persistence: iSore automatically saves your logged-in state and the project you are currently working on. This means you can safely navigate to other web pages or applications, and when you return to iSore, your session and project will be restored exactly as you left them. However, for security reasons, it is highly recommended to log off if you are using a public or shared computer to prevent unauthorized access to your projects. If you are on a private computer with no other users, logging off is less critical, but still a good practice.