Skip to content

Commit 5bca291

Browse files
EscapedGibbonEscapedGibbon
authored
docs: add missing pages for certain functions (#102)
* docs: add holes info page * docs: move one line explanation to the right spot * docs: add clearBorder page * docs: make changes to operations main page * docs: add paintMask page * docs: add ellipse page * docs: minor changes in clearBorder * docs: minor fixes * docs: fix links to options' docs * docs: fix links on clearBorder page * docs: add image example to paintMask * docs: explain image coordinates in getting started (#96) * docs: implement feedback to getting started and basic section (#99) * docs: fix misuse of word "kernel" close: #101 * feat: add roi analysis tutorial and explanations about image metadata (#89) * docs wip write roi analysis page * docs wip add some code for analysis * docs wip add images and * docs wip add images of metadata * docs wip add code examples * docs: add quotes to some tags mentions * add: extra data images and roi properties table * docs: replace an image with comparison * docs: fix spelling check * docs: improve text and fix minor errors * docs: create metadata tutorial and add more code to roi tutorial * docs wip rework roi analysis page * docs: move distribution graph * docs: fix case sensitivity error * docs: fix the unit in pixel size * docs wip change roundness part of the tutorial * docs wip add screws image analysis * docs: add explanations to irregular behavior of some ROIs and add images * docs wip explain how to sort nuts from washers * docs: add final result and remove unused images * docs: add minor changes and fix minor errors * docs: add more details to metadata intro * docs: make minor changes * docs: redo size distribution example and fix screws example * docs: improve phrasing in metadata tutorial * docs: minor fixes in code examples * docs: resolve conversations * docs: restructure mbr graph * docs: add XML mention to extra data * docs: update machine learning classifier link * docs: minor fixes in links (#104) * docs: fix minor issues in basics section * docs: fix minor issues in filters section * docs: fix minor issues in comparison section * docs: fix minor issues in geometry section * docs: minor fixes in morphology section * docs: minor fixes in operations section * docs: minor fixes in roi analysis section * docs: minor fixes in tips section * docs: minor fixes in tutorials section close: #81 * docs: remove invalid link * docs: fix prettier error * docs: fix prettier error * docs: remove unnecessary meta-code comment * docs: remove misleading quotes in the default value
1 parent b13f977 commit 5bca291

File tree

9 files changed

+133
-10
lines changed

9 files changed

+133
-10
lines changed

‎docs/Features/Operations/Clear border.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
sidebar_position: 50
3+
---
4+
5+
_Removes mask regions at the border of a mask._
6+
7+
[🎭 Mask options and parameters of `clearBorder` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#clearBorder 'github.io link')
8+
9+
`clearBorder()` method removes the elements at the border of the mask. The elements are cleared depending on the color that user specifies as a parameter. This can be used as a preparatory tool for ROI analysis since there are times when regions do not fit completely on an image. With incomplete elements considered as regions the analysis can become misleading.
10+
11+
![clearBorder example](./images/clearBorder/clearBorder.png)
12+
13+
### Parameters and default values
14+
15+
- `mask`
16+
17+
- `options`
18+
19+
#### Options
20+
21+
| Property | Required | Default value |
22+
| ---------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
23+
| [`allowCorners`](https://image-js.github.io/image-js-typescript/interfaces/ClearBorderOptions.html#allowCorners) | no | `false` |
24+
| [`out`](https://image-js.github.io/image-js-typescript/interfaces/ClearBorderOptions.html#out) | no | - |
25+
| [`color`](https://image-js.github.io/image-js-typescript/interfaces/ClearBorderOptions.html#color) | no | `white` |

‎docs/Features/Operations/Operations.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ sidebar_position: 0
33
---
44

55
Operations section is dedicated to elements of ImageJS that are mostly used to help with or to transition from one image data type to another.
6-
For instance, threshold is used to go from Image to Mask, while watershed is used to create ROI map.
6+
For instance, threshold is used to go from Image to Mask, while watershed is used to create ROI map. It can also be helper functions that can be useful during analysis.
77

88
### Methods
99

10-
| Can be applied on | Images | Masks |
11-
| ----------------------------------------------------------------------------------------------- | ------- | -------- |
12-
| [Get extrema(`getExtrema`)](./Get%20extrema.md 'internal link on getExtrema') | ✅ | ❌ |
13-
| [Remove points(`removeClosePoints`)](./Remove%20points.md 'internal link on removeClosePoints') | ✅ | ❌ |
14-
| [Threshold(`erode`)](./Threshold.md 'internal link on threshold') | ✅ | ❌ |
15-
| [Watershed(`dilate`)](./Watershed.md 'internal link on watershed') | ✅ | ❌ |
10+
| Can be applied on | Images | Masks |
11+
| ------------------------------------------------------------------------------------- | -------- | -------- |
12+
| [Get extrema(`getExtrema`)](./Get%20extrema.md 'internal link on getExtrema') | ✅ | ❌ |
13+
| [Filter points(`filterPoints`)](./Remove%20points.md 'internal link on filterPoints') | ✅ | ❌ |
14+
| [Threshold(`threshold`)](./Threshold.md 'internal link on threshold') | ✅ | ❌ |
15+
| [Watershed(`waterShed`)](./Watershed.md 'internal link on watershed') | ✅ | ❌ |
16+
| [Clear border(`clearBorder`)](./Clear%20border.md 'internal link on clear border') | ❌ | ✅ |
17+
| [Paint mask(`paintMask`)](./Paint%20mask.md 'internal link on paint mask') | ✅ | ✅ |

‎docs/Features/Operations/Paint mask.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
sidebar_position: 60
3+
---
4+
5+
_Paints mask on the image._
6+
7+
[🖼️ Image options and parameters of `paintMask` method](https://image-js.github.io/image-js-typescript/classes/Image.html#paintMask 'github.io link')
8+
[🎭 Mask options and parameters of `paintMask` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#paintMask 'github.io link')
9+
10+
This method allows painting a mask on the image or on the mask. It can serve as a good visualization tool to highlight the regions in question. For instance, by painting a mask of each black ROI here, we can highlight all the particles present on the image.
11+
12+
```ts
13+
for (const roi of rois) {
14+
const { column, row } = roi.origin;
15+
const mask = roi.getMask();
16+
// This paints blue the mask of a roi.
17+
//Origin of roi needs to be specified for correct
18+
//display.
19+
image = image.paintMask(mask, {
20+
origin: { column, row },
21+
color: [0, 0, 255],
22+
});
23+
}
24+
```
25+
26+
![paintMask in action](./images/paintMask/paintMaskComp.png)
27+
28+
### Kinds of images compatible with algorithm
29+
30+
| Image property | What it means | Possible values |
31+
| -------------- | -------------------------- | --------------- |
32+
| `bitDepth` | number of bits per channel | `[8,16]` |
33+
| `components` | number of components | any |
34+
| `alpha` | is alpha channel allowed | `true` |
35+
36+
### Parameters and default values
37+
38+
- `mask`
39+
40+
- `options`
41+
42+
#### Options
43+
44+
**For image:**
45+
46+
| Property | Required | Default value |
47+
| --------------------------------------------------------------------------------------------------------- | -------- | ------------------ |
48+
| [`blend`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnImageOptions.html#blend) | no | `true` |
49+
| [`color`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnImageOptions.html#color) | no | black |
50+
| [`origin`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnImageOptions.html#origin) | no | `{column:0,row:0}` |
51+
| [`out`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnImageOptions.html#out) | no | - |
52+
53+
**For mask:**
54+
55+
| Property | Required | Default value |
56+
| -------------------------------------------------------------------------------------------------------- | -------- | ------------------ |
57+
| [`value`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnMaskOptions.html#value) | no | `1` |
58+
| [`origin`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnMaskOptions.html#origin) | no | `{column:0,row:0}` |
59+
| [`out`](https://image-js.github.io/image-js-typescript/interfaces/PaintMaskOnMaskOptions.html#out) | no | - |

‎docs/Features/Operations/Threshold.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 0
2+
sidebar_position: 10
33
---
44

55
import ThresholdDemo from './demos/threshold.demo.tsx'

‎docs/Features/Operations/images/clearBorder/clearBorder.png

95.8 KB
Loading

‎docs/Features/Operations/images/paintMask/paintMaskComp.png

528 KB
Loading

‎docs/Features/Regions of interest/Ellipse.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
sidebar_position: 60
3+
---
4+
5+
_Calculates ellipse around a region of interest._
6+
7+
[🔎 ROI options and parameters of `ellipse` accessor](https://image-js.github.io/image-js-typescript/classes/Roi.html#ellipse 'github.io link')
8+
9+
As it is obvious from the name, `ellipse` calculates the ellipse around the region of interest.
10+
11+
In ImageJS ellipse is a ROI class accessor that returns an Ellipse object:
12+
13+
| Property name | Description | Property type |
14+
| ----------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
15+
| [`center`](https://image-js.github.io/image-js-typescript/interfaces/Ellipse.html#center) | Ellipse's center point | `Point[]` |
16+
| [`majorAxis`](https://image-js.github.io/image-js-typescript/interfaces/Ellipse.html#majorAxis) | Ellipse's major axis | `{points: [Point,Point] ,length: number ,angle: number}` |
17+
| [`minorAxis`](https://image-js.github.io/image-js-typescript/interfaces/Ellipse.html#minorAxis) | Ellipse's minor axis | `{points: [Point,Point] ,length: number ,angle: number}` |
18+
| [`surface`](https://image-js.github.io/image-js-typescript/interfaces/Ellipse.html#surface) | Ellipse's surface | `{points: [Point,Point] ,length: number ,angle: number}` |
19+
20+
```ts
21+
const ellipse = roi.ellipse;
22+
```

‎docs/Features/Regions of interest/Fill ratio.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
sidebar_position: 80
33
---
44

5-
[🔎 ROI options and parameters of `fillRatio` accessor](https://image-js.github.io/image-js-typescript/classes/Roi.html#fillRatio 'github.io link')
6-
75
_Ratio of the actual filled space to the total available space._
86

7+
[🔎 ROI options and parameters of `fillRatio` accessor](https://image-js.github.io/image-js-typescript/classes/Roi.html#fillRatio 'github.io link')
8+
99
Fill ratio represents the ratio of how much of region's surface is filled with holes. Basically it helps understanding the actual ROI shape and how it is affected by holes in it. For example, if an object does not have holes or cavities in it the fill ratio will be equal to 1.
1010

1111
The ratio is calculated in a simple manner:

‎docs/Features/Regions of interest/Holes info.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
sidebar_position: 81
3+
---
4+
5+
_Information about holes in the ROI._
6+
7+
[🔎 ROI options and parameters of `holesInfo` method](https://image-js.github.io/image-js-typescript/classes/Roi.html#holesInfo 'github.io link')
8+
9+
Holes info provides information about the number of and the overall surface of holes within the region of interest. It allows finding [fill ratio](./Fill%20ratio.md) and provides insight about form of the ROI.
10+
11+
In ImageJS `holesInfo()` is a ROI class method that returns an object with number of holes and their total surface in pixels.
12+
13+
```ts
14+
const holesInfo = roi.holesInfo();
15+
```

0 commit comments

Comments
 (0)