SOLVED (work around): Back ground for splash screens in Icon Genie

The task: Get all necessary splash screens from one single background picture with icon genie where all splash screens show the same picture.

The Interaction with icon genie: Icon Genie places a background picture centered in the middel of the splash screen. Too large pictures are not scaled down and will therefore be clipped. Pictures that are to small in height will be scaled up to have min. the height of the splash screen. Same for the width. Up scaling is done with the same factor in x and y direction.
Because splash screens have different height to width ratio there will be some clipping of the (scaled) background picture.
You must provide a background picture with your visible content in the center part and margins around that may be clipped away for some splash screens.

The work around:

1. Create a picture with the smallest height of all splash screens (in portrait mode this is 1136 px) and with approx. 900 px width. (It is the smallest height because icon genie only scales up but never scales down.)
2. Fill the picture with your splash screen background color.
3. Place your content in this picture and center it horizontaly. Your visible content should not have more than 500 px width. The left and right margin of aprox. 200px will be clipped off by icon genie in some splash screen formats.
   If you want icon genie to place the app icon on top of your background picture you should have an empty area in the center so that the icon not interfere with your background.

Your background picture therefore is 900 px width and 1136 px height. The part, that is visible in all splash screens is 500 px width and 1136 px height.

The width of the background picture of approx. 900 px and the visible part of 500 px is a little experimental. You may calculate these widths as follows:

1. Get the largest height to width ratio of all splash screens (in portrait mode this is 2.17 from 1125 x 2436).
2. Get the factor for scaling the background picture up in height: 1136 --> 2436, that is 2.14 = 2436/1136.
3. After scaling up, the visible part of your background picture is 1125 px in width. That is the width of the splash screen with largest ratio from step 1.
4. Get the visible width of your background picture by scaling down the width 1125 / 2.14 = 526 px. (This is little more than the 500 px but it is ok to have a little margin to the edge of the display.)
5. Get the smallest height to width ratio of all splash screens (in portrait mode this is 1.33 from 2048 x2732).
6. Your background picture should be at least 1136 / 1.33 = 854 px in width. More doesn’t matter. (This is little less than the 900 px but it is ok to have a little more pixels in width for rounding and clipping.)

With a little more width of the background picture and a little less width of the visible content it is easier to get a working background picture in the first attempt.

This way I got my splash screens with a bottom line of text and logo and with an overlayed scaled and centered app icon out of a single background picture.

Have nice splash screens !

SOLVED: <i18n> Single File Components
Thank you all for advice and help. There are two things in the quasar docs I stumbled:

1 Under Quasar Options and Helpers
there is an entry for App Internationalization (i18n).
There is a header Setting-up-Translation-Blocks-in-your-SFCs.
The description says: “you must ensure that the @__intlify__/vue-i18n-loader and …”.
The example that shows the change for the quasar.conf.js file says

      { loader: '@kazupon/vue-i18n-loader' },

The description wants the new intlify and the example shows the kazupon.

2 In the same document down there is a header Create language switcher.
At the end of the example there is a watch:

 watch: {
    lang(lang) {
      this.$i18n.locale = lang
    }
  }

This works good for all texts in the given one component. If you want to change the language for all components in your app you have to do this:

 this.$root.$i18n.locale = lang;

Important is inserting $root between this and $i18n.
Perhaps anyone is able to change the docs. Thank you.

SOLVED (work around): Back ground for splash screens in Icon Genie

The task: Get all necessary splash screens from one single background picture with icon genie where all splash screens show the same picture.

The Interaction with icon genie: Icon Genie places a background picture centered in the middel of the splash screen. Too large pictures are not scaled down and will therefore be clipped. Pictures that are to small in height will be scaled up to have min. the height of the splash screen. Same for the width. Up scaling is done with the same factor in x and y direction.
Because splash screens have different height to width ratio there will be some clipping of the (scaled) background picture.
You must provide a background picture with your visible content in the center part and margins around that may be clipped away for some splash screens.

The work around:

1. Create a picture with the smallest height of all splash screens (in portrait mode this is 1136 px) and with approx. 900 px width. (It is the smallest height because icon genie only scales up but never scales down.)
2. Fill the picture with your splash screen background color.
3. Place your content in this picture and center it horizontaly. Your visible content should not have more than 500 px width. The left and right margin of aprox. 200px will be clipped off by icon genie in some splash screen formats.
   If you want icon genie to place the app icon on top of your background picture you should have an empty area in the center so that the icon not interfere with your background.

Your background picture therefore is 900 px width and 1136 px height. The part, that is visible in all splash screens is 500 px width and 1136 px height.

The width of the background picture of approx. 900 px and the visible part of 500 px is a little experimental. You may calculate these widths as follows:

1. Get the largest height to width ratio of all splash screens (in portrait mode this is 2.17 from 1125 x 2436).
2. Get the factor for scaling the background picture up in height: 1136 --> 2436, that is 2.14 = 2436/1136.
3. After scaling up, the visible part of your background picture is 1125 px in width. That is the width of the splash screen with largest ratio from step 1.
4. Get the visible width of your background picture by scaling down the width 1125 / 2.14 = 526 px. (This is little more than the 500 px but it is ok to have a little margin to the edge of the display.)
5. Get the smallest height to width ratio of all splash screens (in portrait mode this is 1.33 from 2048 x2732).
6. Your background picture should be at least 1136 / 1.33 = 854 px in width. More doesn’t matter. (This is little less than the 900 px but it is ok to have a little more pixels in width for rounding and clipping.)

With a little more width of the background picture and a little less width of the visible content it is easier to get a working background picture in the first attempt.

This way I got my splash screens with a bottom line of text and logo and with an overlayed scaled and centered app icon out of a single background picture.

Have nice splash screens !

SOLVED: <i18n> Single File Components
Thank you all for advice and help. There are two things in the quasar docs I stumbled:

1 Under Quasar Options and Helpers
there is an entry for App Internationalization (i18n).
There is a header Setting-up-Translation-Blocks-in-your-SFCs.
The description says: “you must ensure that the @__intlify__/vue-i18n-loader and …”.
The example that shows the change for the quasar.conf.js file says

      { loader: '@kazupon/vue-i18n-loader' },

The description wants the new intlify and the example shows the kazupon.

2 In the same document down there is a header Create language switcher.
At the end of the example there is a watch:

 watch: {
    lang(lang) {
      this.$i18n.locale = lang
    }
  }

This works good for all texts in the given one component. If you want to change the language for all components in your app you have to do this:

 this.$root.$i18n.locale = lang;

Important is inserting $root between this and $i18n.
Perhaps anyone is able to change the docs. Thank you.

Thank you, ssuess.
There is no difference in writing

cfg.module.rules.push(
   { . . . },
   { . . . } )

and

cfg.module.rules.push(
   { . . . } )
cfg.module.rules.push(
   { . . . } )

The first adds to objects to the rules array with the push function.
The second calls the push function twice with one object each.

But when reading your working example I found my mistake: I wrote

resourceQuery: /blockTyp=i18n/

instead of

resourceQuery: /blockType=i18n/

I missed the e in blockType. Now the first step is solved. Thank you all.

The next step is, to change the language at runtime and therefore I read the docs and added a selection to the <q-toolbar> in file MainLayout.vue. The language change works for all texts in the file MainLayout.vue. It has no effect on the texts in the file components/EssentialLink.vue. There everything is displayed in default language. Is there any advice how to change the language in all nested components too? Thank you.

Thank you, dobbel.
The examples uses SFC but not the <i18n>-block in the SFC. I do the same and this is working great.
My question is about using <i18n>-blocks in a SFC to write the translations related to the SFC. In the Internet I found that I should add some webpack rules for extracting the <i18n>-blocks from the vue files. Above I showed what I did in the quasar.conf.js. But I do know nothing about webpack.

Hello Quasarians,

I like the Icon Genie ! It is great, that I don’t have to think about, what file types and what sizes I have to have for a web application (pwa included). (Latest Version of icon genie cli is installed.)

The background picture for splash screens is something I don’t understand. Splash screens have diverent sizes (width and height). I can give only one single background picture to icon genie. I get splash screens with my background picture but the picture is not scaled to the size of the splash screen. The picture ist placed centered in the splash screen.

What I have looked for is: my background picture lined up at the lower edge of the splash screen and scaled to the width of the splash screen. The rest of the splash screen filled with background color and if the background icon ratio is >0 the centered icon placed upon.

In general it would be great, if icon genie gets some more config params for the splash screens, perhaps these:

background-align: center | left | right | bottom | top
background-scale: width | height | both

It would be great, if someone will have a look on that.

Thank you.

Hallo again,
one note to the above: I recently installed quasar and node on my computer. I installed nvm (node version manager) too, I have both node v12 and v14. I tested quasar i18n with v12, because quasar documentation said so. I created the new test project with quasar CLI and with option i18n. The i18n is running and works ok, if I only use the translation texts from directory i18n and the sub directories en-us and my new de. Switching language at run time works fine. The only thing ist, that the translations in the vue single file components do not work (see my question from yesterday). I guess something with webpack and the i18n-loaders ist not ok. Has anyone an idea?
Thnak you.

Dear all,

the link (https://github.com/quasarframework/quasar-framework.org/pull/401) from a47ae here in the forum is out of order. It brings up a page where I should click to (https://kazupon.github.io/vue-i18n/en/sfc.html) to read the instructions but there ist nothing (http 404).

I tried to get single file components with <i18n> blocks working, but I failed. I tried with @kazupon/vue-i18n-loader and with @intlify/vue-i18n-loader. Neither worked. I allways get an error when compiling with “quaser dev” comand. Here is the error message.

error  in ./src/layouts/MainLayout.vue?vue&type=custom&index=0&blockType=i18n

Module parse failed: Unexpected token (65:6)
File was processed with these loaders:
* ./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| {
>   "de": {
|     "MLTit": "Mein Titel"
|   },

@ ./src/layouts/MainLayout.vue?vue&type=custom&index=0&blockType=i18n 1:0-217 1:233-236 1:238-452 1:238-452
@ ./src/layouts/MainLayout.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./.quasar/app.js
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

In the file quasar.config.js I have changed the extendWebpack to:

extendWebpack (cfg) {
       cfg.module.rules.push({
         enforce: 'pre',
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /node_modules/
       }, {
         resourceQuery: /blockTyp=i18n/,
         type: 'javascript/auto',
         use: [
           { loader: '@kazupon/vue-i18n-loader' },
           { loader: 'json-loader' }
         ]
       })
     }

The loaders vue-i18n-loader and json-loader are installed. I tried with json-loader and with yaml-loader or without these loaders with no effect. I also tried with @kazupon and with @intlify for the vue-i18n-loader.

What is going wrong?

And it would be nice, if quasar cli would do all things related to i18n including single file components.

Thank you.

Ok, gyloxe, you are right about the XSS attack. Then you have to implement a little formula scanner and interpret the formulas yourself.
The main thing to avoid attacks is, to protect the server. The server must not work on unchecked input.

Hello Scott,
thank you very much for your hint to the codesandbox 2 days ago. I read the 800 lines of code and that teached me, that I have to learn more about the internel things of vue an of quasar. I will try to adept the mixin from the example to use with q-table. The idea of getting the screen coordinates of table and cell together with an independent div as overlay at a fixed screen position is good. The other idea of traversing the node-tree to find the left, right, up or down cell is also a key to solve my request. Thank you for the example.

Hello dobbel,
exporting csv-files is described at: https://quasar.dev/vue-components/table#Exporting-data
ok, that ist not Excel but a first step to get some data out of a quasar-app and into Excel. Same weeks ago a found, that there are a lot of libraries for javascript and there are many to deal with excel files. I have not tried one so I don’t want to pick out one here. Browsers are not ideal for dealing with files.

Formulas are something I also have thinked about. Javascript is a interpreter language and with a custum function getCellValue(row,col) you may type in formulars in Javascript-syntax. Besides the data[] (Array of row values) you will have a form[] (Array of row formulars). The div-element to enter values will then scan the input and in case of the first character is an equal sign … This may work for simple cases. In real excel they probably have a formular tree to know the sequence to evaluate the formulars and they keep track of recursive function calls.

Thank you, qyloxe, I have seen the lengthly list yesterday but I have not trusted to combine any vue-Component from the net to a quasar PWA. The handsontable looks interesting but has a high prizing for only one year updates. So I will search the list in detail. Thank you and have a nice day.