Areas Plugin of Logseq

This is a plugin that make us be able to describe parts of a picture.

This plugin will be useful when you note concepts that contain a lot of visual things.

Please see below for details.

Demo

How-tos

(1) Install the Areas Plugin.

Through Market Place [Not Available Yet]

1. Click ⋯ in the upper right corner.
2. Go to Settings > Advanced > Developer mode and enable.
3. Exit settings.
4. Click ⋯ again.
5. Go to Plugins > Marketplace and install the areas plugin.

Through Load unpacked plugin

(2) Register an Area Block

1. Put a picture in a block.
2. Open block context menu.
3. Click Picture to Areas.

(3) Edit Areas as You Wish.

Refer to About Editor

(4) Click a Visiblity Button. [Optional]

To see only the area you select, click this:

(5) Set a property.

(6) Click the area you want.

(7) Change the settings to your liking. [Optional]

About Editor

Enter the Editor

Press the edit button as follows:

Edit the data.

(1) Tools

• select

  • select (to add, delete, or select inside)

  • move through drag

  • copy&move

• add

  • area : add a basic area(triangle)

  • shape : add a basic shape(triangle) (Required : select area)

  • point : add a point (Required : select shape)

• delete

  • area : delete an area through click

  • shape : delete a shape through click (Required : select area)

  • point : delete a point through click (Required : select shape)

• hand : move the view point

(2) Keyboard Shortcuts

• 1, 2, 3 : change mode
• Q, W, E, R : change tool
• Ctrl + drag : copy area or shape [select tool]
• Ctrl + S : save
• Ctrl + Z : undo
• Ctrl + Y : redo
• Esc : cancel

(3) Mouse

• left : drag or select a piece in canvas.
• wheel : zoom in & zoom out

Settings

⋯ > Plugins > Areas > ⚙️ > Open settings

• strokesWidth : Width of strokes surrounding shapes.
• strokesOutline : Degree to which strokes are emphasized.
• controlPointRadius : Radius of control points used in the editor.
• scrollDirection : Direction of enlargement along wheel direction.

Properties

• area-block : Conceptually connect a block and an area.
• area-page : Conceptually connect a page and an area.

Terms

• piece : A word that combines area, shape, and point.
• area : The largest unit that can be viewed as one.
• shape : The lump that makes up an area.
• point : The point that determines the form of shapes.
• mode : An indicator of what to do.
• hierarchy : A place for selecting changing name and color of areas

Syntax

1. if you want to resize image in the area block, try this in block:

{{renderer :areas-blabla, path}} → {{renderer :areas-blabla, path, <width>, <height>}}

height is optional.

Notes

Don't cancel it carelessly. No additional warnings are issued when attempting to cancel.

Examples

1. exercise according to body parts

2. solving a geometry problem

3. k-map

Sources

Edit icons created by Pixel perfect - Flaticon

View icons created by Andrean Prabowo - Flaticon

Visible icons created by uicon - Flaticon

Save icons created by Freepik - Flaticon

Trash icons created by Freepik - Flaticon