You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Version 0.1 of HTML-Render is already finished. It consists of the following elements:
\## Graphical Interface:
- Interface developed in HTML, CSS and JavaScript which can be viewed in any resolution.
\## API Routes:
**urlToImage**
- Path to render a web page by its URL
**Render**.
The entire project was created with [React](https://reactjs.org/) in addition to the use of certain repositories such as axios and cors-anywhere for certain vital aspects of the project.
40
+
The project was created with [Flask](https://flask.palletsprojects.com/en/2.1.x/) in addition to the use of the [Selenium](https://www.selenium.dev/) library for rendering of images.
41
41
42
42
- Functioning
43
-
-You get information about the weather through a 32-bit reference identifier (Woeid) that is obtained through a request. It takes as data your current Latitude and Longitude and when you receive all this information it is stored in local storage so that you don't have to ask for the information every time you close or open the extension. It also has a function that detects when the day has changed and automatically updates the weather information.
44
-
- Use of [Axios](https://github.com/axios/axios)
45
-
-Axios is a JavaScript library that can be executed in the browser and allows us to make HTTP client operations easy, so we can configure and make requests to a server and receive easy-to-process responses.
46
-
- Use of [Cors-Anywhere](https://github.com/Rob--W/cors-anywhere)
47
-
-CORS Anywhere is a NodeJS proxy which adds CORS headers to the proxied request.Thanks to it we were able to communicate with the API without any problem. By creating a personal proxy this [solution](https://stackoverflow.com/a/43881141) comes from user sideshowbarker on StackOverflow.
43
+
-The operation is simple, with [Flask](https://flask.palletsprojects.com/en/2.1.x/) we create a server in which we will be hosting the html files, which we want to render. And by means of a request to the same server with [Selenium](https://www.selenium.dev/) we obtain an image of the DOM.
44
+
- Use of [Flask](https://flask.palletsprojects.com/en/2.1.x/)
45
+
-Flask is a framework that allows us to create web applications in an easy way. Thanks to this we were able to create a web application. That by means of dynamic paths will host the HTML files, giving them a unique ID.<br>These files were obtained through GET and POST requests, which vary depending on the type of element to be rendered (an active web page or the raw html code).
46
+
- Use of [Selenium](https://www.selenium.dev/)
47
+
-Thanks to the selenium library I was able to get a representation of the DOM, plus some extra options such as being able to select a specific element or the dimensions of the capture.
48
48
- What I learned
49
-
- During the development of this project I learned a lot about the use of APIs and web requests I also put into practice the use of asynchronous functions and other things that I had not used before in JavaScript.
49
+
- During the development of this project I reinforced and applied my knowledge of the [Flask](https://flask.palletsprojects.com/en/2.1.x/) framework. Among them the use of dynamic paths, which render specific files.
50
50
51
51
## Features
52
52
53
-
Inside the extension we will be able to find:
53
+
Its main function is to render raw html code and active web pages. It also has a web interface to simplify API usage.
54
54
55
-
<!-- - A button to get the information of a specific location. -->
55
+
Functions:
56
+
-### Render HTML code
57
+
- With this function you can render your own HTML, CSS and JavaScript code. This in order to give as much customization as possible to the DOM.
56
58
57
-
The information displayed on the screen will be:
59
+
-### Render Webpage
60
+
- With this functionality you will be able to render any web page simply using the URL of that page. Note that since the rendering of this page is done from a [headless browser](https://en.wikipedia.org/wiki/Headless_browser), you will not see any of the styles that the page allows you to customize as a user.
58
61
59
-
- Temperature
60
-
- Climate
61
-
- Current date
62
-
- Current location
63
-
- Today’s Hightlights
64
-
- Wind status
65
-
- Humidity
66
-
- Visibility
67
-
- Air pressure
62
+
## How To Use
68
63
69
-
This application/site was created as a submission to a [devChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/mM1UIenRhK808W8qmLWv) was to build an application to complete the given user stories.
64
+
The API is accessible from two different URLs:
65
+
-`url/api/v1/render`
66
+
-`url/api/v1/urlToImage`
70
67
71
-
## How To Use
68
+
These two routes share a strong resemblance in the body of their request. Which is an object with the following structure.
69
+
70
+
```typescript
71
+
{
72
+
selector: string,
73
+
format: string,
74
+
size: Array<string>,
75
+
timeout: float,
76
+
}
77
+
```
78
+
Only certain elements are added to this object, depending on the path used.
79
+
80
+
**render**:
81
+
For this path, only three more elements need to be added to the object, which are as follows.
82
+
```typescript
83
+
{
84
+
elements: string,
85
+
css: string,
86
+
js: string,
87
+
}
88
+
```
89
+
**urlToImage**:
90
+
For this path, only one more element needs to be added to the object, which is as follows.
91
+
```typescript
92
+
{
93
+
url: string,
94
+
}
95
+
```
96
+
97
+
### Options
98
+
99
+
-**selector**: CSS selector of the element you want to render.
100
+
101
+
-**format**: Format of the image. It can be either `png`, `jpg`, `bin` o `base64`.
102
+
103
+
-**size**: Size of the image. This can be a value in pixels or `full`, the latter is a dynamic measurement which is based on the maximum size of the element you have selected.
104
+
105
+
-**timeout**: Waiting time to take the capture, this starts counting from the moment the server renders the page.
106
+
107
+
-**elements**: HTML code of the elements you want to render. Only from the body
108
+
109
+
-**css**: CSS code of the elements you want to render.
110
+
111
+
-**js**: JavaScript code of the elements you want to render.
112
+
113
+
-**url**: URL of the webpage you want to render.
72
114
73
-
**Manual installation**
74
115
75
-
1. Download the zip file and unzip it
116
+
### Default values
76
117
77
-
-Chrome
118
+
-**selector**: `body`
78
119
79
-
<p>2. Open Chrome</p>
80
-
<p>3. Click on the extensions icon</p>
81
-
<p>4. Click on manage extensions</p>
82
-
<p>5. Activate developer mode (click on the switch in the upper right corner)</p>
83
-
<p>6. Click on load unzipped</p>
84
-
<p>7. Navigate to the location of the folder, which generated the zip file and select the folder</p>
120
+
-**format**: `png`
85
121
86
-
-Microsoft Edge
122
+
-**size**: [`1920`, `1080`]
87
123
88
-
<p>2. Open Microsoft Edge</p>
89
-
<p>3. Press Alt + F and go to extensions</p>
90
-
<p>4. Click on manage extensions</p>
91
-
<p>5. Click on load unpacked</p>
92
-
<p>6. Navigate to the location of the folder, which generated the zip file and select the folder</p>
0 commit comments