locator/README.md

295 lines
7.6 KiB
Markdown
Raw Normal View History

2023-02-17 06:39:02 +01:00
# Locator
_Helps locating elements in simple HTML pages_
## Installation
```sh
2023-02-17 06:50:27 +01:00
npm install --global git+https://gitea.tforgione.fr/tforgione/locator.git
2023-02-17 06:39:02 +01:00
```
2023-02-17 06:52:38 +01:00
If you don't want to install, just clone the repo and prepare the dependencies:
```sh
git clone https://gitea.tforgione.fr/tforgione/locator
cd locator
npm install
```
2023-02-17 06:39:02 +01:00
## Usage
If you installed globally:
```sh
locator <path-to-the-HTML-file>
```
2023-02-17 06:47:17 +01:00
If you just cloned the repo, in the directory where the `index.js` file is:
2023-02-17 06:39:02 +01:00
```sh
node index.js <path-to-the-HTML-file>
```
## Example
```sh
2023-02-20 11:36:48 +01:00
locator example.html
2023-02-17 06:39:02 +01:00
```
Output:
2023-02-20 11:36:48 +01:00
```json
{
"tag": "SECTION",
"class": "",
"box": {
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"children": [
{
"tag": "H1",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.09722222222222222,
"width": 0.890625,
"height": 0.11812065972222222
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.10416666666666667,
"width": 0.50234375,
"height": 0.10416666666666667
},
"children": [],
"text": "The painting wanders"
}
],
"text": null
},
{
"tag": "P",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.26395399305555556,
"width": 0.890625,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.2667317708333333,
"width": 0.43125,
"height": 0.058333333333333334
},
"children": [],
"text": "The dramatic trek wraps workout."
}
],
"text": null
},
{
"tag": "UL",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.37819010416666665,
"width": 0.890625,
"height": 0.22604166666666667
},
"children": [
{
"tag": "LI",
"class": "",
"box": {
"x": 0.0859375,
"y": 0.37819010416666665,
"width": 0.859375,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.3809678819444444,
"width": 0.5876953125,
"height": 0.058333333333333334
},
"children": [],
"text": "The wrong candidate sublets anesthesiologist."
}
],
"text": null
},
{
"tag": "LI",
"class": "",
"box": {
"x": 0.0859375,
"y": 0.4583984375,
"width": 0.859375,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.4611762152777778,
"width": 0.4072265625,
"height": 0.058333333333333334
},
"children": [],
"text": "The late hydrocarb slides violet."
}
],
"text": null
},
{
"tag": "LI",
"class": "",
"box": {
"x": 0.0859375,
"y": 0.5386067708333333,
"width": 0.859375,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.5413845486111111,
"width": 0.3783203125,
"height": 0.058333333333333334
},
"children": [],
"text": "The rich arthur forms zombie."
}
],
"text": null
}
],
"text": null
}
],
"text": null
}
```
You can also flatten the output:
```sh
locator example.html --flatten
```
Ouput:
2023-02-17 06:39:02 +01:00
```json
[
{
2023-02-20 11:36:48 +01:00
"tag": "SECTION",
"class": "",
"box": {
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"text": null
2023-02-17 06:39:02 +01:00
},
{
2023-02-20 11:36:48 +01:00
"tag": "H1",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.10416666666666667,
"width": 0.50234375,
"height": 0.10416666666666667
},
"children": [],
"text": "The painting wanders"
2023-02-17 06:39:02 +01:00
},
{
2023-02-20 11:36:48 +01:00
"tag": "P",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.2667317708333333,
"width": 0.43125,
"height": 0.058333333333333334
},
"children": [],
"text": "The dramatic trek wraps workout."
2023-02-17 06:39:02 +01:00
},
{
2023-02-20 11:36:48 +01:00
"tag": "UL",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.37819010416666665,
"width": 0.890625,
"height": 0.22604166666666667
},
"text": null
2023-02-17 06:39:02 +01:00
},
{
2023-02-20 11:36:48 +01:00
"tag": "LI",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.3809678819444444,
"width": 0.5876953125,
"height": 0.058333333333333334
},
"children": [],
"text": "The wrong candidate sublets anesthesiologist."
2023-02-17 06:39:02 +01:00
},
{
2023-02-20 11:36:48 +01:00
"tag": "LI",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.4611762152777778,
"width": 0.4072265625,
"height": 0.058333333333333334
},
"children": [],
"text": "The late hydrocarb slides violet."
},
{
"tag": "LI",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.5413845486111111,
"width": 0.3783203125,
"height": 0.058333333333333334
},
"children": [],
"text": "The rich arthur forms zombie."
2023-02-17 06:39:02 +01:00
}
]
```
2023-02-20 11:36:48 +01:00
2023-02-24 17:12:52 +01:00
It is also possible to make screenshots of each slide but removing the considered element.
```sh
locator --output output-directory example.html
```