Convert to CF_RAW_ALPHA return width and height zero

[QuocBaoBuiNguyen]

Hi, when i genrate C array of png picture to Raw alpha format, it always return size to zero. I have to change manualy all files. Can you help me! Thanks

const lv_img_dsc_t Background = { .header.cf = LV_IMG_CF_RAW_ALPHA, .header.always_zero = 0, .header.reserved = 0, .header.w = 0, .header.h = 0, .data_size = 15469, .data = Background_map, };

[embeddedt]

@kisvegabor I've added the feature to use original image dimensions as a stopgap measure till the v9 image decoder is ready. Can you update the converter on lvgl.io?

[kisvegabor]

@embeddedt I've tried but got this error:

npm run build

> lv_img_conv@0.2.1 build /home/kisvegabor/projects/lvgl/lv_img_conv
> parcel build ./web/index.html ./web/content.html --public-url ./

sh: 1: parcel: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! lv_img_conv@0.2.1 build: `parcel build ./web/index.html ./web/content.html --public-url ./`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the lv_img_conv@0.2.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kisvegabor/.npm/_logs/2022-07-06T16_57_38_625Z-debug.log

Am I doing something wrong or are there any changes in the background?

[embeddedt]

It looks like you need to run npm install first.

[kisvegabor]

It really solved it, thanks.

However now I have an error on lvgl.io:

I know it doesn't tell much, but maybe you have some ideas.

[embeddedt]

@kisvegabor I think this is occuring because I rewrote the HTML for the converter and you must have a second copy on lvgl.io. Please remove the original row element that contains the form and add an empty <div class="row react-app-container"></div> container element.

Here is what I did for the regular version, for reference.

[kisvegabor]

Ah, I see. It's working now, thank you.

A few comments:

1. The dorpdowns are too tall. I found that the .form-control class messes it up
2. I liked the previous file selector which showed the name of the selected files to indicate which variable name is which. I think the best would be to prefill the variable name input fields with the filename without extension
3. Some space between the input fields would be nice:

[embeddedt]

Great suggestions for the file selector; I've implemented both.

I looked in DevTools, and it appears that the dropdown issue is caused by the custom CSS on lvgl.io. It sets a tall height for any .form-control elements, overriding the normal Bootstrap values. Disabling that style makes the dropdown look a lot better.

[kisvegabor]

Great!

Let's remove the .form-control class from here.

What about adding the filenames as "text", not just placeholder? I found that in the practice it's better if there is something there and I just need to add add an img_ prefix or slightly modify it.

[embeddedt]

Okay, I've made both changes. I'm not thrilled with the dropdown being styled differently, but I don't have a better solution to the height issue at the moment.

[kisvegabor]

Thank you, working great! Only one minor thing: the inputs for file name still have the .form-control class:

[embeddedt]

Removed.

[kisvegabor]

Uh, it became even worse. :slightly_frowning_face: To not steal your time I gathered all my courage and edited index.tsx :smile: I did this modifications and not it it looks good to me:

diff --git a/web/index.tsx b/web/index.tsx
index 6ac8641..ed9431c 100644
--- a/web/index.tsx
+++ b/web/index.tsx
@@ -38,9 +38,9 @@ function FileName({ name, upsert, index, filename }) {
     const onChange = useCallback((e) => {
         upsert(e.target.value, index);
     }, [ upsert, index ]);
-    return <input
+    return <Form.Control
         onChange={onChange}
-        className="mb-2"
+        className="mb-2 custom-auto-height"
         type="text"
         name={"name" + index}
         value={name}
@@ -69,9 +69,9 @@ function ColorFormat({ colorFormat, setColorFormat }) {
         setColorFormat(parseInt(e.target.value));
     }, []);
     return <RowWithLabel labelText="Color format" labelFor="cf">
-        <select name="cf" value={colorFormat} onChange={onChange}>
+        <Form.Control as="select" name="cf" value={colorFormat} onChange={onChange} className="custom-auto-height">
             <ColorFormatOptions/>
-        </select>
+        </Form.Control>
         <p className="text-mute">
             <strong>Alpha byte</strong> Add a 8 bit Alpha value to every pixel<br/>
             <strong>Chroma keyed</strong> Make LV_COLOR_TRANSP (lv_conf.h) pixels to transparent
@@ -88,7 +88,7 @@ function OutputFormat({ colorFormat, outputFormat, setOutputFormat }) {
         colorFormat == ImageMode.CF_TRUE_COLOR_CHROMA ||
         colorFormat == ImageMode.CF_RGB565A8);
     return <RowWithLabel labelText="Output format" labelFor="format">
-        <select name="format" value={outputFormat} onChange={onChange}>
+        <Form.Control as="select" name="format" value={outputFormat} onChange={onChange} className="custom-auto-height">
             <option value="c_array">C array</option>
             {!isTrueColor && <option value="bin">Binary</option>}
             {isTrueColor && <>
@@ -97,7 +97,7 @@ function OutputFormat({ colorFormat, outputFormat, setOutputFormat }) {
                 <option value="bin_565_swap">Binary RGB565 Swap</option>
                 <option value="bin_888">Binary RGB888</option>
             </>}
-        </select>
+        </Form.Control>
     </RowWithLabel>;
 }

custom-auto-height is added to the CSS at lvgl.io:

.custom-auto-height {
    height: auto;
}

What do you think?

[embeddedt]

This fix looks good to me! It certainly looks a lot better keeping the Bootstrap styling instead of using the browser's.

[kisvegabor]

Great, I pushed my changes.