The developed algorithm creates a HTML page, where the content is displayed within A4 pages. This allows the Crag to offer a PDF climbing guide. The content is received from the Crag API.
JavaScript, HTML, CSS, SASS, PDF, booklet, JSON, layout, optimizer, optimization, constraints, solver, automatically, web, evaluation, guide, printing, paging
Create a solution to print climbing information of the Crag webpage. Development of a microservice, which creates PDFs for a given area. This microservice should provide a PDF, which the user can print as a booklet.
theCrag is one of the largest climbing platforms. There are about 44'228 crags with over 527'000 routes registered. Everyone is able to use the descriptions of the areas to plan climbing activities. The community continuously alters and creates the content on the website. The data structure is constructed as a tree of areas. The areas without subareas are leaves (marked with a green border). Each node contains the information about its area.
There are two ways to collect the information about those areas. One is directly on the webpage and the other is by using theCrag API. To achieve more flexibility theCrag provides an HTML guide functionality for their users. This HTML guide presents only the most important content of the selected area. Printing this guide causes some problems. But so far this is the only option for the users to print their favorite areas.
By printing the HTML guide the structure of the guide gets messed up because it is not optimized for A4 page format. One of the biggest difference between a webpage and a booklet is the number of pages. A webpage has one endless page whereas the booklet has multiple pages of limited size. Our size limit is the sheet format A4. Therefore the booklet needs to break content. If the user wants to print the HTML guide the page breaking is done by the browsers print assistant. This causes several problems:
These are the most obvious problems of the HTML guide. Furthermore, the layout structure is not flexible due to the used HTML table elements. Therefore these elements cannot be optimized.
The application is written in JavaScript, HTML and SASS. All information related to this area is gathered through theCrag API. An algorithm will put the fetched information into DOM and optimize the structure for the printed booklet format. The final product is an improved HTML website, which can be printed as a PDF booklet.
The flowchart should help to understand how the algorithm operates.
The blue boxes indicate the start and end of the algorithm, the green ones represent an action and the red ones a decision.
The program starts and ends with a user interaction. First the user has to open the application in Google Chrome browser.
After that the algorithm collects the data from theCrag API.
Once all related information of the root area is loaded, we create an instance of the renderer class for this area tree.
When each area is rendered in the correct order and no subarea is left this process is completed.
The next step is to find all whitespaces and fill them with advertisements or pictures of the current area.
The algorithm also calculates the best advertisements spread. Pictures are loaded directly from theCrag webpage through their hashID.
As these pictures are too large they slow down the application and increase the document size. The size of a booklet with 21 pages is around 115MB.
Then the algorithm evaluates the document. For that reason we defined some measure values.
If the document score is satisfactory the optimized booklet can be printed.
However if the result is not good enough we need to modify the area tree and re-render it.
Modify means for example changing the size of some pictures. This loop runs until we have a satisfying score or the maximum of modification is reached.
Today the only possible way to get a climbing guide from the Crag webpage is this
HTML guide,
which does not look very nice when an user would like to print this guide.
We generated the same guide with our algorithm, the result is shown in the following screenshot.
Project period: February - August 2018
Manhours: 720h
Team size: 2
Bachelor Thesis
Nicky Hochmuth, MEGARI SOLUTIONS PTY. LTD., https://www.thecrag.com/
Gerhard Hirschfeld
Gabriel Brunner
Daniel Kröni: daniel.kroeni@fhnw.ch
Prof. Dr. Manfred Vogel: manfred.vogel@fhnw.ch
