Skip to content

user_manual.md

Latest commit

 

History

History
177 lines (120 loc) · 7.26 KB

user_manual.md

File metadata and controls

177 lines (120 loc) · 7.26 KB

Isoflam User Manual

Introduction

Welcome to the Isoflam user manual, an isometric drawing software designed specifically for firefighters. Isoflam allows you to quickly model scenes by placing elements such as vehicles, personnel, and equipment, drawing shapes, arrows, or zones, and adding text. The final diagram can be exported as an image to support operational communication or post-incident reporting.

Interface Overview

The Isoflam interface is designed to be intuitive and easy to use. It consists of the following elements:

  • Main menu: Located in the upper left corner, it provides access to main functions like opening and exporting files.
  • Toolbar: Located on the right side of the screen, it contains drawing and editing tools.
  • Drawing area: The central space where you create and modify your diagram.
  • Zoom controls: Located at the bottom left, they allow you to adjust the zoom level and fit the view.
  • Element control panel: Appears when an element is selected, allowing you to modify its properties.

Tools and Their Functions

Selection and Navigation

  • Selection tool (arrow icon): Allows you to select and manipulate diagram elements.
  • Pan tool (hand icon): Allows you to move the view in the drawing area.

Element Creation

  • Add item (+ icon): Allows you to add predefined icons like vehicles, personnel, or equipment.
  • Rectangle (square icon): Allows you to draw rectangles to delimit zones.
  • Import Image (image icon): Allows you to import custom images to use as rectangles.
  • Connector (right arrow icon): Allows you to create connectors between elements.
  • Text (T icon): Allows you to add text zones for annotations.

Main Menu

The main menu offers the following options:

  • Open: Allows you to open an existing Isoflam JSON file.
  • Export as JSON: Saves the current diagram in JSON format.
  • Export as image: Exports the diagram as a PNG image.
  • Clear the canvas: Removes all elements from the diagram.
  • GitHub: Link to the project's GitHub repository.
  • Credits: Displays information about the software creators.
  • Language selection: Allows you to choose between French and English.

Navigation Controls

Zoom

  • Zoom in (+ icon): Increases the zoom level.
  • Zoom out (- icon): Decreases the zoom level.
  • Fit to screen (frame icon): Adjusts the zoom so that the entire diagram is visible.

Movement

  • Use the pan tool (hand icon) to move the view.
  • You can also hold the space key and drag the mouse to temporarily move the view.

Keyboard Shortcuts

Isoflam supports several keyboard shortcuts to speed up your work:

  • Delete / Backspace: Deletes the selected element.
  • Ctrl/Cmd + Z: Undoes the last action.
  • Ctrl/Cmd + Y: Redoes the last undone action.
  • Ctrl/Cmd + C: Copies the selected element.
  • Ctrl/Cmd + V: Pastes the copied element.

Image Export

To export your diagram as an image:

  1. Click on "Export as image" in the main menu.
  2. In the dialog box that opens, you can configure the following options:
    • Current view: Exports the current view or fits the entire diagram.
    • Show grid: Includes or excludes the grid in the exported image.
    • Background color: Allows you to choose the background color of the image.
  3. A preview of the image is displayed.
  4. Click "Download as PNG" to save the image to your device.

Note: Some browsers may not support image export correctly. For best results, use the latest version of Chrome or Firefox.

Element Manipulation

Selection and Movement

  1. Use the selection tool (arrow icon) to select an element.
  2. Click and drag the element to move it.
  3. When an element is selected, the control panel appears, allowing you to modify its properties.

Adding Elements

  1. Click on the "Add item" tool (+ icon).
  2. Select the desired element from the panel that appears.
  3. Click on the drawing area to place the element.

Creating Rectangles

  1. Click on the "Rectangle" tool (square icon).
  2. Click and drag on the drawing area to create a rectangle.
  3. Release the mouse button to finalize the shape.

Creating Connectors

  1. Click on the "Connector" tool (right arrow icon).
  2. Click on a first element to define the starting point.
  3. Click on a second element to define the end point and create the connector.

Adding Text

  1. Click on the "Text" tool (T icon).
  2. Click on the drawing area where you want to add text.
  3. Enter your text in the area that appears.
  4. Click outside the text area to confirm.

Image Import

  1. Click on the "Import Image" tool (image icon).
  2. Select the image file from your computer.
  3. The image will be imported and can be used as a rectangle.
  4. Once selected, you can use the rotation and mirror controls.

Undo and Redo Controls

  • Undo button: Undoes the last action performed.
  • Redo button: Redoes the last undone action.
  • These controls are available in the toolbar and via keyboard shortcuts Ctrl/Cmd + Z and Ctrl/Cmd + Y.

Imported Image Manipulation

When an imported image is selected, additional controls appear:

  • Rotate left 90°: Rotates the image 90 degrees to the left.
  • Rotate right 90°: Rotates the image 90 degrees to the right.
  • Horizontal mirror: Flips the image horizontally.
  • Vertical mirror: Flips the image vertically.

Layer Management

Layer controls allow you to organize the order of elements:

  • Bring forward: Moves the element one level forward.
  • Send backward: Moves the element one level backward.
  • Bring to front: Places the element above all others.
  • Send to back: Places the element behind all others.

Data Loss Protection

Isoflam now monitors unsaved changes:

  • A warning appears if you try to exit or clear the canvas with unsaved modifications.
  • The message "Your unsaved changes will be lost" allows you to confirm or cancel the action.

Tips and Tricks

  • Use keyboard shortcuts to speed up your work.
  • Organize your elements logically to facilitate diagram understanding.
  • Use different colors to distinguish different zones or types of elements.
  • Regularly export your work in JSON format to avoid data loss.
  • Use the "Fit to screen" function to get an overview of your diagram.
  • Take advantage of the new undo/redo functionality to experiment freely with your designs.
  • Use layer controls to organize complex scenes with multiple overlapping elements.

Common Problem Resolution

  • The diagram doesn't export correctly: Try using a different browser, preferably Chrome or Firefox in their latest version.
  • Elements don't align correctly: Make sure the grid is enabled to facilitate alignment.
  • The application is slow: Reduce the number of elements in your diagram or try closing other applications to free up resources.
  • Imported images don't display correctly: Ensure your image files are in a supported format (PNG, JPG, etc.).

Conclusion

Isoflam is a powerful tool for creating isometric diagrams for firefighting operations. By mastering the various tools and features presented in this manual, you will be able to create clear and precise representations of your operational scenarios.

For any questions or suggestions, please consult the project's GitHub repository or contact the development team.

Developed with ❤️ by HORUS.