So a few things were done for this week, which I will talk about one by one. First of all, the boost::json thread safety issue is finally resolved. The issue was that the #define BOOST_SPIRIT_THREADSAFE directive needs to be defined in every single source file that includes the property tree header files. It turns out I missed one of the files that had included those header files without the thread safety directive, so after adding it, the server process does not crash on concurrent requests now. For convenience, I extracted all the ptree header files into a single header file, hence the directive only needs to be defined once in that header file. I used the ApacheBench command line tool to test whether the server still crashes when making concurrent requests. Before that, the server crashed even on 2 concurrent requests! But after the fix, it can handle much more concurrent requests without crashing.
Another task that I had to do was to change the way in which the PNG thumbnail of a project is generated in S3. Previously, the generated thumbnail was too small for the front end of my application to use, so I basically just have the S3 server save the PNG in its original size. I thought of just saving the original SVG image in a project’s workspace, but in comparison to the PNG format, it stores up to 50KB or more which is huge compared to the PNG format that takes up about 10KB or more on average. Therefore, I just stick to the PNG format. Now I am able to process the image however I want on P3’s side. Here comes the pictures:
Selecting a project for viewing
Project Image extended and resized to an aspect ratio of 16:9
The editing the project in S3’s IDE
Well clearly, I had no idea what I was doing. I was just wiring random hardware modules to the board for demonstration purposes. I had one of my colleague, Ahid, to give me some sample code to show something, and this is what I come up with. As you notice, the project’s image does not show the actual wires, but something which came from the original SVG snapshot, so I do not know how to actually show the wires as they are. For newly created projects, the template image would be used first, until the user starts editing the project files and the snapshot is taken, which is just a single board as can be seen in the first image. The template image would also be used as a fallback if for some reason the actual snapshot could not be obtained from the project archive.
Recently, Vuetify have released their latest major version, which includes a few new components such as Images or the <v-img> component. One of the features of their image component is that it enables you to provide like an image placeholder to show while waiting for the actual image to load, which is awesome. Typically, this placeholder image is a small base-64 encoded thumbnail with some blur filters applied to it. If you have read articles in Medium before, this is how they load their images. Because the actual image may take some time to retrieve, the blurred placeholder image should be small enough to be embedded within the HTML document, without having to explicitly request for it which defeats the purpose. You can first generate some small thumbnail of a placeholder image, then using the url-loader in Webpack, it can base-64 encode the thumbnail for you in the final build of the source files. This is how it looks like in action:
Last, but not least, I did step by step guide for registering a new board. Basically, my idea for making the guide is to use a checklist-like approach, ensuring that the user has covered each required steps. Here’s how it looks like:
So at each step until the final step, the user clicks done to acknowledge that the current step is complete then move on to the next step. Although a bit unnecessary, the user could go back to a any previous step for whatever reason, but at least give them some options. Supposedly, there would be a graphical illustration for each steps of the registration, but I am no graphic designer so for now I placed a nice scenery image there. At the final step, as soon as the user press Caps Lock, the board would automatically type in an encrypted payload to send to P3’s server and thus completes the registration.
Alright, so that’s about it. To be honest, there are still a few minor stuff to be done on the UI side, but at least the bigger tasks are now out of the way which is a relief for me. I’m not sure what to expect for the next blog post, but I would conclude my series of spring cleaning here. One of the things I realized during my spring cleaning journey, is that I would have save more time if I actually done some of the things right at the beginning instead of delaying until a time like this. There are no shortcuts in software development. Anyhow, some of my colleagues are leaving the company already as they have reached the end of their internship. This means there are now more internship positions up for grabs! Hurry and apply as soon as possible! I want to wish Marcus, Wen Yan, Lucas and Ahid good luck in their studies and in whatever lies ahead of them. Your time and company here is much appreciated :D.
0 Comments