Nothing much was done for this week, except for the fact that project thumbnails are now obtained from the server’s REST endpoint instead of a hardcoded image path. The REST endpoint basically extracts the thumbnail from a specific project archive, that is fetched from the cache or from user’s storage if not in the cache. Then, the thumbnail would be searched for in the archive and if found, it is extracted to a temporary directory. The thumbnail is searched based on its image format, which is specified as a query parameter when sending the request to the endpoint. So the thumbnail could have any name, as long its file extension matches the desired format. The thumbnail would now be resized using ImageMagick, where the new width and height should be passed as query parameters to the request as well. Here is a sample of how a valid request is made to that endpoint:
GET /api/v16/thumbnail/{PROJECT_UUID}?format=png&width=128&height=72
Now, the <img> HTML element has the src attribute that would hold the URL to an image. A GET request is immediately issued, as soon as the element is rendered in the browser. The problem is that all the REST endpoints of the server require authorization, i.e a valid JWT token must be in the Authorization header when making the request. Passing the URL of the endpoint to the src attribute would not work as the Authorization header could not be set. The image needs to be embedded at runtime. Therefore, the request has to be made explicit through Axios. The endpoint would respond with a data URI, which consists of the MIME type of the image, as well as the image itself but base64 encoded. By setting the src attribute to be the data URI, the project thumbnail could now be rendered in the browser.
There is another problem though. The project thumbnail is actually generated on the server of the IDE. Using ImageMagick’s convert as well, the original image has been transformed to be of a smaller resolution, and some color information is disregarded as well, in order to make the image as compact and small as possible. However, when the same thumbnail is enlarged for display purposes on P3’s front end, it becomes blurry and distorted. With that, I would need to make some changes in regards to how the thumbnail is generated in S3. The original image is actually a SVG file, but is converted to PNG when resized to a thumbnail. We decided that P3 should handle all the image processing related stuff now, so the original SVG file would be saved into the archive now instead of the thumbnail, but I still need to see how big the SVG file is.
By next week, I should be done with my project. Besides the project thumbnails, I have left to do is to give a step by step illustration when registering the board, but for now I’ll put in a placeholder image for the illustration. Then, I also need to quickly solve the boost::json thread safety issue, which has been bugging me from time to time ever since it first occurred to me two weeks ago. Hopefully my next blog would bear some good news.
0 Comments