Layout viewer

[mominul]

Layout viewer resizes every time whenever the layout is changed. This bug has appeared after the layout management changes in Layout Viewer UI.

[mominul]

CC @Adyel

[Adyel]

@mominul Where are those image (Layout image) located? I could not find them.

[mominul]

Layout images are Base64 encoded string located in the layout(json) files. Those are in image0 and image1 keys, like in Bornona layout. Images are loaded by this code: https://github.com/OpenBangla/OpenBangla-Keyboard/blob/master/src/frontend/LayoutViewer.cpp#L61-L82

[Adyel]

Oh, wow. Why are we using base64 on a desktop application? 😲 We should update it soon. There is an embedded Avro logo and the image is also low res. This will be a lengthy work but we should do it. We can also implement zoom functionality after that.
Opinion?

Tools to use: http://www.keyboard-layout-editor.com/#/

NB: I set the size constraint for the image. The window does not change size anymore but you can still tell the diffrerence because the base image is different

Monir Optima, Provat use one keyboard image
Avro Easy, Bornona, Jatiya use different one.

[Adyel]

It was happening because the window size was hardcoded on the LayoutViewer.cpp. It was overriding the UI configuration.

this->setFixedHeight(ui->labelImage->height() + ui->labelImage->y());
this->setFixedWidth(ui->labelImage->width());

[mominul]

Oh, wow. Why are we using base64 on a desktop application? 😲 We should update it soon. There is an embedded Avro logo and the image is also low res. This will be a lengthy work but we should do it. We can also implement zoom functionality after that.
Opinion?

👍 agreed! But can you elaborate on why using Base64 is bad? We are only using it to embed the images in the layout file. Are there any alternate method?

We should update it soon. There is an embedded Avro logo and the image is also low res. This will be a lengthy work but we should do it.

Are you saying to update the images here? I am confused 😕 Zooming functionality would be great!

Edit
http://www.keyboard-layout-editor.com/#/
Wow, I didn't know about this tool! We can easily make layout images!

[Adyel]

Why I think we should change base64.

• It was not designed for the Desktop application. It was originally used for the web. In some case, it can speed up loading time (reduce some web overhead).
• It added reliability for web transfer. Back in the days, file corruption was a big pain and it was used to deal with that. We don't need that here.
• It is very low resolution and hard to manipulate.
• It already contains an embedded logo which does not look good.
• base64 is not an efficient storing method. It uses more space than the original binary. (~130%)
• We can use SVG and scale the image as much as we want.

We need to change the way we import layout. We can implement this feature not compromising backward compatibility. Our Layout package will be a compressed .zip file which will include the layout JSON and an SVG image for LayoutViewer.

[mominul]

👍 for SVG. SVG is a textual format, I think we can easily embed it into a JSON file. Zip approach is not that bad, but wouldn't it bring complexity?

[Adyel]

I personally think zip is a better way of handling things. Think of it as a package rather than a file. The data will be also compressed.

[mominul]

@Adyel Can you make a prototype? Because I haven't yet written code handling Zip files.

[Adyel]

@mominul I'll look into it. Meanwhile, why not merge the PR? At least the window size will be consistent or you are having a second thought. 🤔

[mominul]

I think the images seem really odd if we fix the image's size. You can compare the results.