「App:Library:LVGL:docs:Overview:Images」の版間の差分
(同じ利用者による、間の4版が非表示) | |||
2行目: | 2行目: | ||
__NOTOC__ | __NOTOC__ | ||
= Images = | = Images = | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
An image can be a file or a variable which stores the bitmap itself and some metadata. | An image can be a file or a variable which stores the bitmap itself and some metadata. | ||
+ | |画像は、ビットマップそのものといくつかのメタデータを格納するファイルまたは変数にすることができます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
== Store images == | == Store images == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
You can store images in two places | You can store images in two places | ||
* as a variable in internal memory (RAM or ROM) | * as a variable in internal memory (RAM or ROM) | ||
* as a file | * as a file | ||
+ | |画像は、次の2つの場所に保存することができます。 | ||
+ | |||
+ | * 内部メモリー(RAMまたはROM)の変数として | ||
+ | * ファイルとして | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Variables === | === Variables === | ||
− | Images stored internally in a variable are composed mainly of an <code>lv_img_dsc_t</code> structure with the following fields: | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | Images stored internally in a variable are composed mainly of an <code style="color: #bb0000;">lv_img_dsc_t</code> structure with the following fields: | ||
* header | * header | ||
20行目: | 46行目: | ||
** ''reserved'' reserved for future use | ** ''reserved'' reserved for future use | ||
* data pointer to an array where the image itself is stored | * data pointer to an array where the image itself is stored | ||
− | * data_size length of <code>data</code> in bytes | + | * data_size length of <code style="color: #bb0000;">data</code> in bytes |
+ | |||
These are usually stored within a project as C files. They are linked into the resulting executable like any other constant data. | These are usually stored within a project as C files. They are linked into the resulting executable like any other constant data. | ||
+ | |変数に格納される画像は、主に以下のフィールドを持つ <code style="color: #bb0000;">lv_img_dsc_t</code> 構造体から構成される。 | ||
+ | |||
+ | * ヘッダ | ||
+ | ** cf カラーフォーマット。下記参照 | ||
+ | ** w 幅 (ピクセル) (<= 2048) | ||
+ | ** h 高さ (ピクセル) (<= 2048) | ||
+ | ** always zero 常にゼロであることが必要な3ビット | ||
+ | ** reserved 将来使用するために予約されている | ||
+ | * 画像そのものが格納される配列へのdata ポインタ. | ||
+ | * data_size <code style="color: #bb0000;">data</code> 単位で表されるデータの長さ。 | ||
+ | |||
+ | |||
+ | これらは通常、Cファイルとしてプロジェクト内に保存されます。他の定数データと同じように実行ファイルにリンクされます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Files === | === Files === | ||
− | To deal with files you need to add a storage ''Drive'' to LVGL. In short, a ''Drive'' is a collection of functions (''open'', ''read'', ''close'', etc.) registered in LVGL to make file operations. You can add an interface to a standard file system (FAT32 on SD card) or you create your simple file system to read data from an SPI Flash memory. In every case, a ''Drive'' is just an abstraction to read and/or write data to memory. See the File system section to learn more. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | To deal with files you need to add a storage ''Drive'' to LVGL. In short, a ''Drive'' is a collection of functions (''open'', ''read'', ''close'', etc.) registered in LVGL to make file operations. | ||
+ | |||
+ | |||
+ | You can add an interface to a standard file system (FAT32 on SD card) or you create your simple file system to read data from an SPI Flash memory. | ||
+ | |||
+ | In every case, a ''Drive'' is just an abstraction to read and/or write data to memory. | ||
+ | |||
+ | |||
+ | See the File system section to learn more. | ||
+ | |||
+ | Images stored as files are not linked into the resulting executable, and must be read into RAM before being drawn. | ||
+ | |||
+ | As a result, they are not as resource-friendly as images linked at compile time. | ||
+ | |||
+ | However, they are easier to replace without needing to rebuild the main program. | ||
+ | |ファイルを扱うには、LVGLにストレージDriveを追加する必要があります。つまり、DriveとはLVGLに登録されたファイル操作を行うための関数(open, read, closeなど)の集合体です。 | ||
+ | |||
+ | |||
+ | 標準的なファイルシステム(SDカードのFAT32)へのインタフェースを追加したり、SPIフラッシュメモリからデータを読み込むための簡単なファイルシステムを作成することができます。 | ||
+ | |||
+ | いずれの場合も、ドライブはメモリにデータを読み書きするための抽象化されたものに過ぎません。 | ||
+ | |||
+ | |||
+ | 詳しくは、ファイルシステムのセクションを参照してください。 | ||
+ | |||
+ | ファイルとして保存された画像は、結果の実行ファイルにリンクされず、描画する前にRAMに読み込まれる必要があります。 | ||
+ | |||
+ | |||
+ | そのため、コンパイル時にリンクされた画像ほどリソースに優しくはありません。 | ||
+ | |||
+ | しかし、メインプログラムを再構築することなく、簡単に交換することができます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
− | |||
== Color formats == | == Color formats == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
Various built-in color formats are supported: | Various built-in color formats are supported: | ||
* LV_IMG_CF_TRUE_COLOR Simply stores the RGB colors (in whatever color depth LVGL is configured for). | * LV_IMG_CF_TRUE_COLOR Simply stores the RGB colors (in whatever color depth LVGL is configured for). | ||
− | * LV_IMG_CF_TRUE_COLOR_ALPHA Like <code>LV_IMG_CF_TRUE_COLOR</code> but it also adds an alpha (transparency) byte for every pixel. | + | * LV_IMG_CF_TRUE_COLOR_ALPHA Like <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> but it also adds an alpha (transparency) byte for every pixel. |
− | * LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED Like <code>LV_IMG_CF_TRUE_COLOR</code> but if a pixel has the <code>LV_COLOR_TRANSP</code> color (set in ''lv_conf.h'') it will be transparent. | + | * LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED Like <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> but if a pixel has the <code style="color: #bb0000;">LV_COLOR_TRANSP</code> color (set in ''lv_conf.h'') it will be transparent. |
* LV_IMG_CF_INDEXED_1/2/4/8BIT Uses a palette with 2, 4, 16 or 256 colors and stores each pixel in 1, 2, 4 or 8 bits. | * LV_IMG_CF_INDEXED_1/2/4/8BIT Uses a palette with 2, 4, 16 or 256 colors and stores each pixel in 1, 2, 4 or 8 bits. | ||
− | * LV_IMG_CF_ALPHA_1/2/4/8BIT Only stores the Alpha value with 1, 2, 4 or 8 bits. The pixels take the color of <code>style.img_recolor</code> and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts where the whole image is one color that can be altered. | + | * LV_IMG_CF_ALPHA_1/2/4/8BIT Only stores the Alpha value with 1, 2, 4 or 8 bits. The pixels take the color of <code style="color: #bb0000;">style.img_recolor</code> and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts where the whole image is one color that can be altered. |
+ | * | ||
− | The bytes of <code>LV_IMG_CF_TRUE_COLOR</code> images are stored in the following order. | + | The bytes of <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> images are stored in the following order. |
For 32-bit color depth: | For 32-bit color depth: | ||
57行目: | 142行目: | ||
* Byte 0: Red 3 bit, Green 3 bit, Blue 2 bit | * Byte 0: Red 3 bit, Green 3 bit, Blue 2 bit | ||
* Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA) | * Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA) | ||
+ | |||
You can store images in a ''Raw'' format to indicate that it's not encoded with one of the built-in color formats and an external Image decoder needs to be used to decode the image. | You can store images in a ''Raw'' format to indicate that it's not encoded with one of the built-in color formats and an external Image decoder needs to be used to decode the image. | ||
62行目: | 148行目: | ||
* LV_IMG_CF_RAW Indicates a basic raw image (e.g. a PNG or JPG image). | * LV_IMG_CF_RAW Indicates a basic raw image (e.g. a PNG or JPG image). | ||
* LV_IMG_CF_RAW_ALPHA Indicates that an image has alpha and an alpha byte is added for every pixel. | * LV_IMG_CF_RAW_ALPHA Indicates that an image has alpha and an alpha byte is added for every pixel. | ||
− | * LV_IMG_CF_RAW_CHROMA_KEYED Indicates that an image is chroma-keyed as described in <code>LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED</code> above. | + | * LV_IMG_CF_RAW_CHROMA_KEYED Indicates that an image is chroma-keyed as described in <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED</code> above. |
+ | |Various built-in color formats are supported: | ||
+ | |||
+ | * LV_IMG_CF_TRUE_COLOR 単純にRGBの色を保存します(LVGLが設定されている色深度であれば、何でも構いません)。 | ||
+ | * LV_IMG_CF_TRUE_COLOR_ALPHA : <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> に似ていますが、アルファも追加されます。 | ||
+ | * LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED :<code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> に似ていますが、ピクセルが <code style="color: #bb0000;">LV_COLOR_TRANSP</code> カラー( lv_conf.h で設定)であれば透明となります。 | ||
+ | * LV_IMG_CF_INDEXED_1/2/4/8BIT 2, 4, 16, 256色のパレットを使用し、各ピクセルを1, 2, 4, 8ビットで格納します。 | ||
+ | * LV_IMG_CF_ALPHA_1/2/4/8BIT 1, 2, 4, 8ビットのアルファ値のみが格納されます。ピクセルは<code style="color: #bb0000;">style.img_recolor</code>の色と設定された不透明度をとります。ソース画像はアルファチャンネルである必要があります。これは、画像全体が1色で変更可能なフォントのようなビットマップに最適です。 | ||
+ | |||
+ | |||
+ | <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> 画像のバイトは、以下の順序で格納される。 | ||
+ | |||
+ | 32ビット色深度の場合。 | ||
+ | |||
+ | * Byte 0: 青 | ||
+ | * Byte 1: グリーン | ||
+ | * Byte 2: 赤 | ||
+ | * Byte 3: 透過度(アルファ) | ||
+ | |||
+ | 16ビット色深度の場合。 | ||
+ | |||
+ | * Byte 0: 緑3下ビット、青5ビット | ||
+ | * Byte 1: 赤5ビット、緑3上位ビット | ||
+ | * Byte 2: 透過度:アルファバイト(LV_IMG_CF_TRUE_COLOR_ALPHAのみ) | ||
+ | |||
+ | 8ビット色深度の場合。 | ||
+ | |||
+ | * Byte 0: 赤3ビット、緑3ビット、青2ビット | ||
+ | * Byte 2: 透過度:アルファバイト(LV_IMG_CF_TRUE_COLOR_ALPHAのみ) | ||
+ | |||
+ | |||
+ | 画像をRaw形式で保存して、組み込みのカラー形式の1つでエンコードされていないこと、および画像をデコードするために外部の画像デコーダーを使用する必要があることを示すことができます。 | ||
+ | |||
+ | * LV_IMG_CF_RAW 基本的なraw画像(PNGまたはJPG画像など)を示します。 | ||
+ | * LV_IMG_CF_RAW_ALPHA 画像にアルファがあり、ピクセルごとにアルファバイトが追加されていることを示します。 | ||
+ | * LV_IMG_CF_RAW_CHROMA_KEYED 上記のLV_IMG_CF_TRUE_COLOR_CHROMA_KEYED 前述の<code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED</code>で説明されているように、画像がクロマキーで制御されていることを示します。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
== Add and use images == | == Add and use images == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
You can add images to LVGL in two ways: | You can add images to LVGL in two ways: | ||
* using the online converter | * using the online converter | ||
* manually create images | * manually create images | ||
+ | |LVGLにイメージを追加するには、次の2つの方法があります。 | ||
+ | |||
+ | * オンラインコンバータの使用 | ||
+ | * イメージを手動で作成する | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Online converter === | === Online converter === | ||
− | The online Image converter is available here: | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | The online Image converter is available here: https://lvgl.io/tools/imageconverter | ||
Adding an image to LVGL via the online converter is easy. | Adding an image to LVGL via the online converter is easy. | ||
78行目: | 219行目: | ||
# Give the image a name that will be used within LVGL. | # Give the image a name that will be used within LVGL. | ||
# Select the Color format. | # Select the Color format. | ||
− | # Select the type of image you want. Choosing a binary will generate a <code>.bin</code> file that must be stored separately and read using the file support. Choosing a variable will generate a standard C file that can be linked into your project. | + | # Select the type of image you want. Choosing a binary will generate a <code style="color: #bb0000;">.bin</code> file that must be stored separately and read using the file support. Choosing a variable will generate a standard C file that can be linked into your project. |
# Hit the ''Convert'' button. Once the conversion is finished, your browser will automatically download the resulting file. | # Hit the ''Convert'' button. Once the conversion is finished, your browser will automatically download the resulting file. | ||
− | In the generated C arrays (variables), bitmaps for all the color depths (1, 8, 16 or 32) are included in the C file, but only the color depth that matches <code>LV_COLOR_DEPTH</code> in ''lv_conf.h'' will actually be linked into the resulting executable. | + | |
+ | In the generated C arrays (variables), bitmaps for all the color depths (1, 8, 16 or 32) are included in the C file, but only the color depth that matches <code style="color: #bb0000;">LV_COLOR_DEPTH</code> in '''''lv_conf.h''''' will actually be linked into the resulting executable. | ||
In the case of binary files, you need to specify the color format you want: | In the case of binary files, you need to specify the color format you want: | ||
89行目: | 231行目: | ||
* RGB565 Swap for 16-bit color depth (two bytes are swapped) | * RGB565 Swap for 16-bit color depth (two bytes are swapped) | ||
* RGB888 for 32-bit color depth | * RGB888 for 32-bit color depth | ||
+ | |オンラインのイメージコンバータは次のURLで入手できます。https://lvgl.io/tools/imageconverter | ||
+ | |||
+ | オンラインコンバータを介してLVGLにイメージを簡単に追加できます。 | ||
+ | |||
+ | # まず、BMP、PNG、JPGのいずれかの画像を選択する必要があります。 | ||
+ | # 画像にはLVGL内で使用される名前をつけてください。 | ||
+ | # カラー形式を選択します。 | ||
+ | # 画像の種類を選択します。バイナリを選択すると<code style="color: #bb0000;">.bin</code>ファイルが生成され、別途保存し、ファイルサポートを使用して読み込む必要があります。変数を選択すると、プロジェクトにリンクできる標準的なCファイルが生成されます。 | ||
+ | # Convertボタンを押します。変換が完了すると、ブラウザが自動的に変換後のファイルをダウンロードします。 | ||
+ | |||
+ | |||
+ | 生成されたCの配列(変数)には、すべての色深度(1、8、16、32)のビットマップが含まれますが、'''lv_conf.h'''の<code style="color: #bb0000;">LV_COLOR_DEPTH</code>に一致する色深度だけが実際に結果の実行ファイルにリンクされることになります。 | ||
+ | |||
+ | バイナリファイルの場合は、希望する色形式を指定する必要があります。 | ||
+ | * RGB332 for 8-bit 色深度用 | ||
+ | * RGB565 for 16-bit 色深度用 | ||
+ | * RGB565 Swap for 16-bit 色深度用 (two bytes are swapped) | ||
+ | * RGB888 for 32-bit 色深度用 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Manually create an image === | === Manually create an image === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
If you are generating an image at run-time, you can craft an image variable to display it using LVGL. For example: | If you are generating an image at run-time, you can craft an image variable to display it using LVGL. For example: | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...}; | uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...}; | ||
102行目: | 271行目: | ||
.data = my_img_data, | .data = my_img_data, | ||
}; | }; | ||
− | If the color format is <code>LV_IMG_CF_TRUE_COLOR_ALPHA</code> you can set <code>data_size</code> like <code>80 * 60 * LV_IMG_PX_SIZE_ALPHA_BYTE</code>. | + | </syntaxhighlight> |
+ | If the color format is <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR_ALPHA</code> you can set <code style="color: #bb0000;">data_size</code> like <code style="color: #bb0000;">80 * 60 * LV_IMG_PX_SIZE_ALPHA_BYTE</code>. | ||
Another (possibly simpler) option to create and display an image at run-time is to use the Canvas object. | Another (possibly simpler) option to create and display an image at run-time is to use the Canvas object. | ||
+ | |実行時に画像を生成している場合、画像変数を細工してLVGLで表示することができます。例えば | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...}; | ||
+ | |||
+ | static lv_img_dsc_t my_img_dsc = { | ||
+ | .header.always_zero = 0, | ||
+ | .header.w = 80, | ||
+ | .header.h = 60, | ||
+ | .data_size = 80 * 60 * LV_COLOR_DEPTH / 8, | ||
+ | .header.cf = LV_IMG_CF_TRUE_COLOR, /*Set the color format*/ | ||
+ | .data = my_img_data, | ||
+ | }; | ||
+ | </syntaxhighlight>カ | ||
+ | ラーフォーマットが <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR_ALPHA</code> の場合、 <code style="color: #bb0000;">data_size</code> を <code style="color: #bb0000;">80 * 60 * LV_IMG_PX_SIZE_ALPHA_BYTE</code>のように設定することが可能です。 | ||
+ | |||
+ | ランタイムに画像を作成し表示するもう一つの(おそらくより単純な)オプションは、Canvasオブジェクトを使用することです。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Use images === | === Use images === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
The simplest way to use an image in LVGL is to display it with an lv_img object: | The simplest way to use an image in LVGL is to display it with an lv_img object: | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL); | ||
+ | |||
+ | /*From variable*/ | ||
+ | lv_img_set_src(icon, &my_icon_dsc); | ||
+ | |||
+ | /*From file*/ | ||
+ | lv_img_set_src(icon, "S:my_icon.bin"); | ||
+ | </syntaxhighlight> | ||
+ | If the image was converted with the online converter, you should use <code style="color: #bb0000;">LV_IMG_DECLARE(my_icon_dsc)</code> to declare the image in the file where you want to use it. | ||
+ | |LVGLで画像を使用する最も簡単な方法は、lv_imgオブジェクトで表示することです。 | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL); | lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL); | ||
115行目: | 321行目: | ||
/*From file*/ | /*From file*/ | ||
lv_img_set_src(icon, "S:my_icon.bin"); | lv_img_set_src(icon, "S:my_icon.bin"); | ||
− | + | </syntaxhighlight> | |
+ | オンラインコンバータで変換した画像の場合は、<code style="color: #bb0000;">LV_IMG_DECLARE(my_icon_dsc)</code>で画像を使用するファイルの中で宣言しておく必要があります。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
== Image decoder == | == Image decoder == | ||
− | + | {| class="wikitable" | |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
As you can see in the Color formats section, LVGL supports several built-in image formats. In many cases, these will be all you need. LVGL doesn't directly support, however, generic image formats like PNG or JPG. | As you can see in the Color formats section, LVGL supports several built-in image formats. In many cases, these will be all you need. LVGL doesn't directly support, however, generic image formats like PNG or JPG. | ||
126行目: | 340行目: | ||
* info get some basic info about the image (width, height and color format). | * info get some basic info about the image (width, height and color format). | ||
− | * open open an image: either store a decoded image or set it to <code>NULL</code> to indicate the image can be read line-by-line. | + | * open open an image: either store a decoded image or set it to <code style="color: #bb0000;">NULL</code> to indicate the image can be read line-by-line. |
* read if ''open'' didn't fully open an image this function should give some decoded data (max 1 line) from a given position. | * read if ''open'' didn't fully open an image this function should give some decoded data (max 1 line) from a given position. | ||
* close close an opened image, free the allocated resources. | * close close an opened image, free the allocated resources. | ||
+ | |||
You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoders until it finds one which can open the image, i.e. one which knows that format. | You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoders until it finds one which can open the image, i.e. one which knows that format. | ||
− | The <code>LV_IMG_CF_TRUE_COLOR_...</code>, <code>LV_IMG_INDEXED_...</code> and <code>LV_IMG_ALPHA_...</code> formats (essentially, all non-<code>RAW</code> formats) are understood by the built-in decoder. | + | The <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR_...</code>, <code style="color: #bb0000;">LV_IMG_INDEXED_...</code> and <code style="color: #bb0000;">LV_IMG_ALPHA_...</code> formats (essentially, all non-<code style="color: #bb0000;">RAW</code> formats) are understood by the built-in decoder. |
=== Custom image formats === | === Custom image formats === | ||
− | The easiest way to create a custom image is to use the online image converter and select <code>Raw</code>, <code>Raw with alpha</code> or <code>Raw with chroma-keyed</code> format. It will just take every byte of the binary file you uploaded and write it as an image "bitmap". You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap. | + | The easiest way to create a custom image is to use the online image converter and select <code style="color: #bb0000;">Raw</code>, <code style="color: #bb0000;">Raw with alpha</code> or <code style="color: #bb0000;">Raw with chroma-keyed</code> format. |
+ | |||
+ | It will just take every byte of the binary file you uploaded and write it as an image "bitmap". | ||
+ | |||
+ | |||
+ | You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap. | ||
+ | |||
+ | <code style="color: #bb0000;">header.cf</code> will be <code style="color: #bb0000;">LV_IMG_CF_RAW</code>, <code style="color: #bb0000;">LV_IMG_CF_RAW_ALPHA</code> or <code style="color: #bb0000;">LV_IMG_CF_RAW_CHROMA_KEYED</code> accordingly. | ||
− | + | You should choose the correct format according to your needs: a fully opaque image, using an alpha channel or using a chroma key. | |
After decoding, the ''raw'' formats are considered ''True color'' by the library. In other words, the image decoder must decode the ''Raw'' images to ''True color'' according to the format described in the Color formats section. | After decoding, the ''raw'' formats are considered ''True color'' by the library. In other words, the image decoder must decode the ''Raw'' images to ''True color'' according to the format described in the Color formats section. | ||
− | |||
− | With ''User encoded'' formats, the color format in the open function (<code>dsc->header.cf</code>) should be changed according to the new format. | + | If you want to create a custom image, you should use <code style="color: #bb0000;">LV_IMG_CF_USER_ENCODED_0..7</code> color formats. |
+ | |||
+ | However, the library can draw images only in ''True color'' format (or ''Raw'' but ultimately it will be in ''True color'' format). | ||
+ | |||
+ | |||
+ | The <code style="color: #bb0000;">LV_IMG_CF_USER_ENCODED_...</code> formats are not known by the library and therefore they should be decoded to one of the known formats from the Color formats section. | ||
+ | |||
+ | |||
+ | It's possible to decode an image to a non-true color format first (for example: <code style="color: #bb0000;">LV_IMG_INDEXED_4BITS</code>) and then call the built-in decoder functions to convert it to ''True color''. | ||
+ | |||
+ | With ''User encoded'' formats, the color format in the open function (<code style="color: #bb0000;">dsc->header.cf</code>) should be changed according to the new format. | ||
+ | |カラーフォーマットのセクションにあるように、LVGLはいくつかのビルトインイメージフォーマットをサポートしています。多くの場合、これらが必要なすべてでしょう。しかし、LVGLは、PNGやJPGのような一般的な画像形式を直接はサポートしていません。 | ||
+ | |||
+ | |||
+ | 内蔵されていない画像形式を扱うには、外部ライブラリを使用し、Image decoder interfaceを介してLVGLにアタッチする必要があります。 | ||
+ | |||
+ | |||
+ | 画像デコーダは4つのコールバックで構成される。 | ||
+ | |||
+ | * は、画像に関する基本的な情報(幅、高さ、カラーフォーマット)を取得します。 | ||
+ | * open 画像を開く: デコードされた画像を格納するか,あるいは画像を一行ごとに読めることを示すために <code style="color: #bb0000;">NULL</code> を設定する. | ||
+ | * open が画像を完全に開いていない場合、この関数は与えられた位置からいくつかのデコードされたデータ(最大1行)を与えるはずです。 | ||
+ | * close 開いた画像を閉じ、割り当てられたリソースを解放する。 | ||
+ | |||
+ | |||
+ | イメージデコーダはいくつでも追加できます。画像を描画する必要があるとき、ライブラリは画像を開くことができるもの、つまりそのフォーマットを知っているものが見つかるまで、登録されたすべての画像デコーダを試します。 | ||
+ | |||
+ | |||
+ | The <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR_...</code>, <code style="color: #bb0000;">LV_IMG_INDEXED_...</code> と <code style="color: #bb0000;">LV_IMG_ALPHA_...</code> 形式(基本的に、すべての非<code style="color: #bb0000;">RAW</code> 形式)は、内蔵デコーダで理解されます。 | ||
+ | |||
+ | === Custom image formats === | ||
+ | カスタム画像を作成する最も簡単な方法は、オンラインの画像変換ソフトを使い、<code style="color: #bb0000;">Raw</code>、<code style="color: #bb0000;">Raw with alpha</code>、<code style="color: #bb0000;">Raw with chroma-keyed</code> のいずれかの形式を選択することです。 | ||
+ | |||
+ | アップロードしたバイナリファイルの各バイトを取り込んで、画像「ビットマップ」として書き込むだけです。 | ||
+ | |||
+ | |||
+ | そして、そのビットマップを解析し、実際のレンダリング可能なビットマップを生成する画像デコーダを添付する必要があります。 | ||
+ | |||
+ | <code style="color: #bb0000;">header.cf</code> は <code style="color: #bb0000;">LV_IMG_CF_RAW</code>, <code style="color: #bb0000;">LV_IMG_CF_RAW_ALPHA</code> または<code style="color: #bb0000;">LV_IMG_CF_RAW_CHROMA_KEYED</code> になります。 | ||
+ | |||
+ | 完全に不透明な画像,アルファチャンネルを使用したもの,クロマキーを使用したものなど,必要に応じて適切な形式を選択する必要があります. | ||
+ | |||
+ | |||
+ | デコード後、RawフォーマットはライブラリによってTrueカラーとみなされる。つまり、画像デコーダはRaw画像をカラーフォーマットの項で説明したフォーマットに従ってTrueカラーにデコードする必要がある。 | ||
+ | |||
+ | |||
+ | カスタム画像を作成する場合は、<code style="color: #bb0000;">LV_IMG_CF_USER_ENCODED_0..7</code> のカラー形式を使用する必要があります。 | ||
+ | |||
+ | ただし、ライブラリはTrueカラー形式(またはRawだが最終的にはTrueカラー形式になる)のみで画像を描画することができる。 | ||
+ | |||
+ | |||
+ | <code style="color: #bb0000;">LV_IMG_CF_USER_ENCODED_...</code> のフォーマットはライブラリで知られていないため、カラーフォーマットセクションの既知のフォーマットのいずれかにデコードする必要があります。 | ||
+ | |||
+ | |||
+ | 画像をまずトゥルーカラーでないフォーマット(例えば<code style="color: #bb0000;">LV_IMG_INDEXED_4BITS</code>) にデコードしてから、内蔵のデコーダ関数を呼び出してトゥルーカラーに変換することは可能です。 | ||
+ | |||
+ | User エンコードされたフォーマットでは、open 関数 (<code style="color: #bb0000;">dsc->header.cf</code>) のカラーフォーマットは新しいフォーマットに従って変更される必要があります。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Register an image decoder === | === Register an image decoder === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
Here's an example of getting LVGL to work with PNG images. | Here's an example of getting LVGL to work with PNG images. | ||
First, you need to create a new image decoder and set some functions to open/close the PNG files. It should look like this: | First, you need to create a new image decoder and set some functions to open/close the PNG files. It should look like this: | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
/*Create a new decoder and register functions */ | /*Create a new decoder and register functions */ | ||
lv_img_decoder_t * dec = lv_img_decoder_create(); | lv_img_decoder_t * dec = lv_img_decoder_create(); | ||
233行目: | 519行目: | ||
} | } | ||
+ | </syntaxhighlight> | ||
So in summary: | So in summary: | ||
− | * In <code>decoder_info</code>, you should collect some basic information about the image and store it in <code>header</code>. | + | * In <code style="color: #bb0000;">decoder_info</code>, you should collect some basic information about the image and store it in <code style="color: #bb0000;">header</code>. |
− | * In <code>decoder_open</code>, you should try to open the image source pointed by <code>dsc->src</code>. Its type is already in <code>dsc->src_type == LV_IMG_SRC_FILE/VARIABLE</code>. If this format/type is not supported by the decoder, return <code>LV_RES_INV</code>. However, if you can open the image, a pointer to the decoded ''True color'' image should be set in <code>dsc->img_data</code>. If the format is known, but you don't want to decode the entire image (e.g. no memory for it), set <code>dsc->img_data = NULL</code> and use <code>read_line</code> to get the pixel data. | + | * In <code style="color: #bb0000;">decoder_open</code>, you should try to open the image source pointed by <code style="color: #bb0000;">dsc->src</code>. Its type is already in <code style="color: #bb0000;">dsc->src_type == LV_IMG_SRC_FILE/VARIABLE</code>. If this format/type is not supported by the decoder, return <code style="color: #bb0000;">LV_RES_INV</code>. However, if you can open the image, a pointer to the decoded ''True color'' image should be set in <code style="color: #bb0000;">dsc->img_data</code>. If the format is known, but you don't want to decode the entire image (e.g. no memory for it), set <code style="color: #bb0000;">dsc->img_data = NULL</code> and use <code style="color: #bb0000;">read_line</code> to get the pixel data. |
− | * In <code>decoder_close</code> you should free all allocated resources. | + | * In <code style="color: #bb0000;">decoder_close</code> you should free all allocated resources. |
− | * <code>decoder_read</code> is optional. Decoding the whole image requires extra memory and some computational overhead. However, it can decode one line of the image without decoding the whole image, you can save memory and time. To indicate that the ''line read'' function should be used, set <code>dsc->img_data = NULL</code> in the open function. | + | * <code style="color: #bb0000;">decoder_read</code> is optional. Decoding the whole image requires extra memory and some computational overhead. However, it can decode one line of the image without decoding the whole image, you can save memory and time. To indicate that the ''line read'' function should be used, set <code style="color: #bb0000;">dsc->img_data = NULL</code> in the open function. |
+ | |ここでは、LVGLをPNG画像で動作させる例を示します。 | ||
+ | |||
+ | まず、新しい画像デコーダを作り、PNGファイルを開いたり閉じたりするためのいくつかの関数を設定する必要があります。以下のような感じでいいと思います。 | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | /*Create a new decoder and register functions */ | ||
+ | lv_img_decoder_t * dec = lv_img_decoder_create(); | ||
+ | lv_img_decoder_set_info_cb(dec, decoder_info); | ||
+ | lv_img_decoder_set_open_cb(dec, decoder_open); | ||
+ | lv_img_decoder_set_close_cb(dec, decoder_close); | ||
+ | |||
+ | |||
+ | /** | ||
+ | * Get info about a PNG image | ||
+ | * @param decoder pointer to the decoder where this function belongs | ||
+ | * @param src can be file name or pointer to a C array | ||
+ | * @param header store the info here | ||
+ | * @return LV_RES_OK: no error; LV_RES_INV: can't get the info | ||
+ | */ | ||
+ | static lv_res_t decoder_info(lv_img_decoder_t * decoder, const void * src, lv_img_header_t * header) | ||
+ | { | ||
+ | /*Check whether the type `src` is known by the decoder*/ | ||
+ | if(is_png(src) == false) return LV_RES_INV; | ||
+ | |||
+ | /* Read the PNG header and find `width` and `height` */ | ||
+ | ... | ||
+ | |||
+ | header->cf = LV_IMG_CF_RAW_ALPHA; | ||
+ | header->w = width; | ||
+ | header->h = height; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Open a PNG image and return the decided image | ||
+ | * @param decoder pointer to the decoder where this function belongs | ||
+ | * @param dsc pointer to a descriptor which describes this decoding session | ||
+ | * @return LV_RES_OK: no error; LV_RES_INV: can't get the info | ||
+ | */ | ||
+ | static lv_res_t decoder_open(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc) | ||
+ | { | ||
+ | |||
+ | /*Check whether the type `src` is known by the decoder*/ | ||
+ | if(is_png(src) == false) return LV_RES_INV; | ||
+ | |||
+ | /*Decode and store the image. If `dsc->img_data` is `NULL`, the `read_line` function will be called to get the image data line-by-line*/ | ||
+ | dsc->img_data = my_png_decoder(src); | ||
+ | |||
+ | /*Change the color format if required. For PNG usually 'Raw' is fine*/ | ||
+ | dsc->header.cf = LV_IMG_CF_... | ||
+ | |||
+ | /*Call a built in decoder function if required. It's not required if`my_png_decoder` opened the image in true color format.*/ | ||
+ | lv_res_t res = lv_img_decoder_built_in_open(decoder, dsc); | ||
+ | |||
+ | return res; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Decode `len` pixels starting from the given `x`, `y` coordinates and store them in `buf`. | ||
+ | * Required only if the "open" function can't open the whole decoded pixel array. (dsc->img_data == NULL) | ||
+ | * @param decoder pointer to the decoder the function associated with | ||
+ | * @param dsc pointer to decoder descriptor | ||
+ | * @param x start x coordinate | ||
+ | * @param y start y coordinate | ||
+ | * @param len number of pixels to decode | ||
+ | * @param buf a buffer to store the decoded pixels | ||
+ | * @return LV_RES_OK: ok; LV_RES_INV: failed | ||
+ | */ | ||
+ | lv_res_t decoder_built_in_read_line(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc, lv_coord_t x, | ||
+ | lv_coord_t y, lv_coord_t len, uint8_t * buf) | ||
+ | { | ||
+ | /*With PNG it's usually not required*/ | ||
+ | |||
+ | /*Copy `len` pixels from `x` and `y` coordinates in True color format to `buf` */ | ||
+ | |||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Free the allocated resources | ||
+ | * @param decoder pointer to the decoder where this function belongs | ||
+ | * @param dsc pointer to a descriptor which describes this decoding session | ||
+ | */ | ||
+ | static void decoder_close(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc) | ||
+ | { | ||
+ | /*Free all allocated data*/ | ||
+ | |||
+ | /*Call the built-in close function if the built-in open/read_line was used*/ | ||
+ | lv_img_decoder_built_in_close(decoder, dsc); | ||
+ | |||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | 以上をまとめると。 | ||
+ | |||
+ | *<code style="color: #bb0000;">decoder_info</code>では、画像に関する基本的な情報を収集し、<code style="color: #bb0000;">header</code>に格納する必要があります。. | ||
+ | *<code style="color: #bb0000;">decoder_open</code> では、<code style="color: #bb0000;">dsc->src</code> が指すイメージソースを開こうとします。そのタイプはすでに <code style="color: #bb0000;">dsc->src_type == LV_IMG_SRC_FILE/VARIABLE</code>になっています。このフォーマット/タイプがデコーダによってサポートされていない場合、<code style="color: #bb0000;">LV_RES_INV</code>を返します。ただし、画像を開くことができれば、<code style="color: #bb0000;">dsc->img_data</code> にデコードされたトゥルーカラー画像へのポインタを設定する必要がある。フォーマットはわかっているが、画像全体をデコードしたくない場合(メモリがないなど)、<code style="color: #bb0000;">dsc->img_data = NULL</code>に設定し、<code style="color: #bb0000;">read_line</code>でピクセルデータを取得する。 | ||
+ | * In <code style="color: #bb0000;">decoder_close</code>では、割り当てられたすべてのリソースを解放する必要があります。 | ||
+ | *<code style="color: #bb0000;">decoder_read</code> はオプションです。画像全体をデコードするには、余分なメモリと多少の計算オーバーヘッドが必要である。しかし、画像全体をデコードすることなく、画像の1行をデコードすることができれば、メモリと時間を節約することができる。ラインリード関数を使用することを示すには、open 関数内で<code style="color: #bb0000;">dsc->img_data = NULL</code>を設定します。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Manually use an image decoder === | === Manually use an image decoder === | ||
− | LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the <code>lv_img</code> object) but you can use them manually too. Create an <code>lv_img_decoder_dsc_t</code> variable to describe the decoding session and call <code>lv_img_decoder_open()</code>. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the <code style="color: #bb0000;">lv_img</code> object) but you can use them manually too. Create an <code style="color: #bb0000;">lv_img_decoder_dsc_t</code> variable to describe the decoding session and call <code style="color: #bb0000;">lv_img_decoder_open()</code>. | ||
− | The <code>color</code> parameter is used only with <code>LV_IMG_CF_ALPHA_1/2/4/8BIT</code> images to tell color of the image. <code>frame_id</code> can be used if the image to open is an animation. | + | The <code style="color: #bb0000;">color</code> parameter is used only with <code style="color: #bb0000;">LV_IMG_CF_ALPHA_1/2/4/8BIT</code> images to tell color of the image. <code style="color: #bb0000;">frame_id</code> can be used if the image to open is an animation. |
+ | |||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | lv_res_t res; | ||
+ | lv_img_decoder_dsc_t dsc; | ||
+ | res = lv_img_decoder_open(&dsc, &my_img_dsc, color, frame_id); | ||
+ | if(res == LV_RES_OK) { | ||
+ | /*Do something with `dsc->img_data`*/ | ||
+ | lv_img_decoder_close(&dsc); | ||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | |LVGLは、生画像を描画しようとする場合(すなわち、<code style="color: #bb0000;">lv_img</code> オブジェクトを使 う場合)、自動的に登録された画像デコーダを使用しますが、手動で使用する こともできます。デコードセッションを記述するために <code style="color: #bb0000;">lv_img_decoder_dsc_t</code>変数を作成し、 <code style="color: #bb0000;">lv_img_decoder_open()</code> を呼びます。 | ||
+ | |||
+ | <code style="color: #bb0000;">color</code> パラメータは <code style="color: #bb0000;">LV_IMG_CF_ALPHA_1/2/4/8BIT</code> 画像でのみ使用され、画像の色を知ることができます。<code style="color: #bb0000;">frame_id</code>は、開くイメージがアニメーションの場合に使用できます。 | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
lv_res_t res; | lv_res_t res; | ||
lv_img_decoder_dsc_t dsc; | lv_img_decoder_dsc_t dsc; | ||
253行目: | 657行目: | ||
lv_img_decoder_close(&dsc); | lv_img_decoder_close(&dsc); | ||
} | } | ||
+ | </syntaxhighlight> | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
== Image caching == | == Image caching == | ||
− | Sometimes it takes a lot of time to open an image | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | Sometimes it takes a lot of time to open an image. | ||
− | Therefore, LVGL caches a given number of images. Caching means some images will be left open, hence LVGL can quickly access them from <code>dsc->img_data</code> instead of needing to decode them again. | + | Continuously decoding a PNG image or loading images from a slow external memory would be inefficient and detrimental to the user experience. |
+ | |||
+ | |||
+ | Therefore, LVGL caches a given number of images. | ||
+ | |||
+ | Caching means some images will be left open, hence LVGL can quickly access them from <code style="color: #bb0000;">dsc->img_data</code> instead of needing to decode them again. | ||
+ | |||
+ | |||
+ | Of course, caching images is resource intensive as it uses more RAM to store the decoded image. | ||
+ | |||
+ | LVGL tries to optimize the process as much as possible (see below), but you will still need to evaluate if this would be beneficial for your platform or not. | ||
+ | |||
+ | |||
+ | Image caching may not be worth it if you have a deeply embedded target which decodes small images from a relatively fast storage medium. | ||
+ | |画像を開くのに時間がかかることがある。 | ||
+ | |||
+ | PNG画像をデコードし続けたり、遅い外部メモリから画像を読み込むことは、非効率でユーザーエクスペリエンスを損ないます。 | ||
+ | |||
+ | |||
+ | そこで、LVGLでは、所定の枚数の画像をキャッシュします。 | ||
+ | |||
+ | キャッシュすることは、いくつかの画像を開いたままにしておくことを意味し、したがってLVGLは、それらを再びデコードする必要がなく、<code style="color: #bb0000;">dsc->img_data</code>から素早くアクセスすることができます。 | ||
+ | |||
+ | |||
+ | もちろん、画像をキャッシュすることは、デコードされた画像を保存するために多くのRAMを使用するため、リソースを消費します。 | ||
+ | |||
+ | LVGLは可能な限り処理を最適化しようとしますが(下記参照)、これがあなたのプラットフォームにとって有益かどうか、評価する必要があります。 | ||
+ | |||
+ | |||
+ | 画像キャッシュは、比較的高速な記憶媒体から小さな画像をデコードする深く埋め込まれたターゲットを持っている場合、価値がない可能性があります。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
− | |||
=== Cache size === | === Cache size === | ||
− | The number of cache entries can be defined with <code>LV_IMG_CACHE_DEF_SIZE</code> in ''lv_conf.h''. The default value is 1 so only the most recently used image will be left open. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | The number of cache entries can be defined with <code style="color: #bb0000;">LV_IMG_CACHE_DEF_SIZE</code> in ''lv_conf.h''. The default value is 1 so only the most recently used image will be left open. | ||
+ | |||
+ | The size of the cache can be changed at run-time with <code style="color: #bb0000;">lv_img_cache_set_size(entry_num)</code>. | ||
+ | |キャッシュのエントリ数は lv_conf.h の <code style="color: #bb0000;">LV_IMG_CACHE_DEF_SIZE</code> で定義できます。デフォルト値は 1 で、最近使用した画像だけがオープンされたままになります。 | ||
+ | |||
+ | キャッシュのサイズは、ランタイムに <code style="color: #bb0000;">lv_img_cache_set_size(entry_num)</code> で変更することができます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
− | |||
=== Value of images === | === Value of images === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
When you use more images than cache entries, LVGL can't cache all the images. Instead, the library will close one of the cached images to free space. | When you use more images than cache entries, LVGL can't cache all the images. Instead, the library will close one of the cached images to free space. | ||
− | To decide which image to close, LVGL uses a measurement it previously made of how long it took to open the image | + | To decide which image to close, LVGL uses a measurement it previously made of how long it took to open the image. |
− | If you want or need to override LVGL's measurement, you can manually set the ''time to open'' value in the decoder open function in <code>dsc->time_to_open = time_ms</code> to give a higher or lower value. (Leave it unchanged to let LVGL control it.) | + | Cache entries that hold slower-to-open images are considered more valuable and are kept in the cache as long as possible. |
+ | |||
+ | If you want or need to override LVGL's measurement, you can manually set the ''time to open'' value in the decoder open function in <code style="color: #bb0000;">dsc->time_to_open = time_ms</code> to give a higher or lower value. (Leave it unchanged to let LVGL control it.) | ||
Every cache entry has a ''"life"'' value. Every time an image is opened through the cache, the ''life'' value of all entries is decreased to make them older. When a cached image is used, its ''life'' value is increased by the ''time to open'' value to make it more alive. | Every cache entry has a ''"life"'' value. Every time an image is opened through the cache, the ''life'' value of all entries is decreased to make them older. When a cached image is used, its ''life'' value is increased by the ''time to open'' value to make it more alive. | ||
If there is no more space in the cache, the entry with the lowest life value will be closed. | If there is no more space in the cache, the entry with the lowest life value will be closed. | ||
+ | |キャッシュエントリより多くの画像を使用する場合、LVGLはすべての画像をキャッ シュすることができません。その代わりに、ライブラリはキャッシュされたイメージの1つを閉じて、スペースを空けることになります。 | ||
+ | |||
+ | どの画像を閉じるかを決定するために、LVGLは画像を開くのにどれくらい時間がかかったかを以前に行った測定値を使用します。 | ||
+ | |||
+ | 開くのに時間のかかる画像を保持するキャッシュエントリは、より価値があるとみなされ、できるだけ長くキャッシュに保持されます。 | ||
+ | |||
+ | |||
+ | LVGLの測定値を上書きしたい場合は、デコーダのopen関数のtime to openの値を<code style="color: #bb0000;">dsc->time_to_open = time_ms</code>で手動で設定し、より大きい値または小さい値を与えることができる。(LVGLに制御させるために変更しないままにしておきます)。 | ||
+ | |||
+ | |||
+ | すべてのキャッシュエントリは "ライフ "値を持っています。キャッシュを通して画像が開かれるたびに、すべてのエントリの寿命の値が減少し、古いものになります。キャッシュされた画像が使用されると、その寿命の値はオープンまでの時間の値によって増加し、より生き生きとしたものになります。 | ||
+ | |||
+ | |||
+ | キャッシュに空き容量がない場合、ライフ値が最も低いエントリーが閉じられます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Memory usage === | === Memory usage === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
Note that a cached image might continuously consume memory. For example, if three PNG images are cached, they will consume memory while they are open. | Note that a cached image might continuously consume memory. For example, if three PNG images are cached, they will consume memory while they are open. | ||
Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time. | Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time. | ||
+ | |キャッシュされた画像は、継続的にメモリを消費する可能性があることに注意してください。例えば、3つのPNG画像がキャッシュされた場合、それらが開いている間、メモリを消費します。 | ||
+ | |||
+ | したがって、最大の画像を同時にキャッシュするのに十分なRAMがあることを確認するのは、ユーザーの責任です。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
+ | |||
=== Clean the cache === | === Clean the cache === | ||
− | Let's say you have loaded a PNG image into a <code>lv_img_dsc_t my_png</code> variable and use it in an <code>lv_img</code> object. If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image from cache. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | Let's say you have loaded a PNG image into a <code style="color: #bb0000;">lv_img_dsc_t my_png</code> variable and use it in an <code style="color: #bb0000;">lv_img</code> object. | ||
+ | |||
+ | If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. | ||
+ | |||
+ | |||
+ | Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image from cache. | ||
+ | |||
+ | |||
+ | To do this, use <code style="color: #bb0000;">lv_img_cache_invalidate_src(&my_png)</code>. | ||
+ | |||
+ | If <code style="color: #bb0000;">NULL</code> is passed as a parameter, the whole cache will be cleaned. | ||
+ | |例えば、PNG画像を<code style="color: #bb0000;">lv_img_dsc_t my_png</code>変数にロードし、それを<code style="color: #bb0000;">lv_img</code>オブジェクトで使用したとします。 | ||
+ | |||
+ | もし、画像がすでにキャッシュされており、その後、基礎となるPNGファイルを変更した場合、LVGLに画像を再度キャッシュするように通知する必要があります。 | ||
+ | |||
+ | |||
+ | さもなければ、基礎となるファイルが変更されたことを検出する簡単な方法がなく、LVGLはキャッシュから古い画像を描画します。 | ||
+ | |||
+ | |||
+ | これを行うには、<code style="color: #bb0000;">lv_img_cache_invalidate_src(&my_png)</code>を使用します。 | ||
+ | |||
+ | パラメータとして<code style="color: #bb0000;">NULL</code> が渡された場合、キャッシュ全体がクリーンアップされます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Images|戻る : Previous]] | ||
− | |||
== API == | == API == | ||
− | |||
=== Image buffer === | === Image buffer === | ||
− | Typedefs | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | '''Typedefs''' | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">typedef uint8_t lv_img_cf_t </span> | |
: | : | ||
− | Enums | + | '''Enums''' |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">enum [anonymous] </span> | |
− | : ''Values:'' | + | : '''''Values:''''' |
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_UNKNOWN </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RAW </span> |
− | :: | + | :: Contains the file as it is. Needs custom decoder function |
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RAW_ALPHA </span> |
− | :: | + | :: Contains the file as it is. The image has alpha. Needs custom decoder function |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RAW_CHROMA_KEYED </span> | |
− | :: | + | :: Contains the file as it is. The image is chroma keyed. Needs custom decoder function |
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_TRUE_COLOR </span> |
− | :: | + | :: Color format and depth should match with LV_COLOR settings |
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_TRUE_COLOR_ALPHA </span> |
− | :: | + | :: Same as <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> but every pixel has an alpha byte |
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED </span> |
− | :: | + | :: Same as <code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> but LV_COLOR_TRANSP pixels will be transparent |
− | : | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_1BIT </span> |
− | :: | + | :: Can have 2 different colors in a palette (always chroma keyed) |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_2BIT </span> | |
− | + | :: Can have 4 different colors in a palette (always chroma keyed) | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_4BIT </span> | |
− | + | :: Can have 16 different colors in a palette (always chroma keyed) | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_8BIT </span> | |
− | + | :: Can have 256 different colors in a palette (always chroma keyed) | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_1BIT </span> | |
− | + | :: Can have one color and it can be drawn or not | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_2BIT </span> | |
− | + | :: Can have one color but 4 different alpha value | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_4BIT </span> | |
− | + | :: Can have one color but 16 different alpha value | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_8BIT </span> | |
− | + | :: Can have one color but 256 different alpha value | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_15 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_16 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_17 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_18 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_19 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_20 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_21 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_22 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_23 </span> | |
− | + | :: Reserved for further use. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_0 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_1 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_2 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_3 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_4 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_5 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_6 </span> | |
− | + | :: User holder encoding format. | |
− | + | : <span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_7 </span> | |
− | : | + | :: User holder encoding format. |
+ | |'''Typedefs''' | ||
+ | |||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">typedef uint8_t lv_img_cf_t </span> | ||
+ | : | ||
+ | |||
+ | '''Enums''' | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">enum [anonymous] </span> | ||
+ | :'''''Values:''''' | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_UNKNOWN </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RAW </span> | ||
+ | :: ファイルをそのまま収録しています。カスタムデコーダ機能が必要 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RAW_ALPHA </span> | ||
+ | :: ファイルをそのまま収録しています。画像はアルファを含む。カスタムデコーダ機能が必要 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RAW_CHROMA_KEYED </span> | ||
+ | :: ファイルをそのまま収録しています。画像はクロマキー処理されています。カスタムデコーダ機能が必要 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_TRUE_COLOR </span> | ||
+ | :: カラーフォーマットと深度はLV_COLORの設定と一致する必要があります。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_TRUE_COLOR_ALPHA </span> | ||
+ | ::<code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> と同じですが、各ピクセルにアルファバイトが含まれます。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED </span> | ||
+ | ::<code style="color: #bb0000;">LV_IMG_CF_TRUE_COLOR</code> と同じですが、LV_COLOR_TRANSP の画素は透明になります。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_1BIT </span> | ||
+ | :: パレット内に2種類の色を持つことができる(常にクロマキー処理される) | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_2BIT </span> | ||
+ | :: パレット内に4色の色を持つことができる(常にクロマキー処理される) | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_4BIT </span> | ||
+ | :: パレット内に16色の色を持つことができる(常にクロマキー処理される) | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_INDEXED_8BIT </span> | ||
+ | :: 256色のパレットを持つことができる(常にクロマキー処理される) | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_1BIT </span> | ||
+ | :: 1色で、描画の有無も可能 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_2BIT </span> | ||
+ | :: 1つの色で4つの異なるアルファ値を持つことができる | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_4BIT </span> | ||
+ | :: 1つの色で16種類のアルファ値を持つことができる | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_ALPHA_8BIT </span> | ||
+ | :: 1つの色で256通りのアルファ値を持つことができる | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_15 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_16 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_17 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_18 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_19 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_20 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_21 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_22 </span> | ||
+ | :: 今後使用するために予約した。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_RESERVED_23 </span> | ||
+ | :: Reserved for further use. | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_0 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_1 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_2 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_3 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_4 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_5 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_6 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | :<span style="background-color: #eeeeee;">enumerator LV_IMG_CF_USER_ENCODED_7 </span> | ||
+ | :: ユーザーホルダーのエンコード形式。 | ||
+ | |- | ||
+ | | | ||
Functions | Functions | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">lv_img_dsc_t *lv_img_buf_alloc(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf) </span> | |
: Allocate an image buffer in RAM | : Allocate an image buffer in RAM | ||
− | : | + | : '''Parameters''' |
− | ::* w -- width of image | + | ::* '''w''' -- width of image |
− | ::* h -- height of image | + | ::* '''h''' -- height of image |
− | ::* cf -- a color format (<code>LV_IMG_CF_...</code>) | + | ::* '''cf''' -- a color format (<code style="color: #bb0000;">LV_IMG_CF_...</code>) |
− | : | + | : '''Returns''' |
:: an allocated image, or NULL on failure | :: an allocated image, or NULL on failure | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">lv_color_t lv_img_buf_get_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t color) </span> | |
: Get the color of an image's pixel | : Get the color of an image's pixel | ||
− | : | + | : '''Parameters''' |
− | ::* dsc -- an image descriptor | + | ::* '''dsc''' -- an image descriptor |
− | ::* x -- x | + | ::* '''x''' -- x coordinate of the point to get |
− | ::* y -- x coordinate of the point to get | + | ::* '''y''' -- x coordinate of the point to get |
− | ::* color -- the color of the image. In case of <code>LV_IMG_CF_ALPHA_1/2/4/8</code> this color is used. Not used in other cases. | + | ::* '''color''' -- the color of the image. In case of <code style="color: #bb0000;">LV_IMG_CF_ALPHA_1/2/4/8</code> this color is used. Not used in other cases. |
− | ::* safe -- true: check out of bounds | + | ::* '''safe''' -- true: check out of bounds |
− | : | + | : '''Returns''' |
:: color of the point | :: color of the point | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">lv_opa_t lv_img_buf_get_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y) </span> | |
: Get the alpha value of an image's pixel | : Get the alpha value of an image's pixel | ||
− | : | + | : '''Parameters''' |
− | ::* dsc -- pointer | + | ::* '''dsc''' -- pointer to an image descriptor |
− | ::* x -- x coordinate of the point to set | + | ::* '''x''' -- x coordinate of the point to set |
− | ::* y -- x coordinate of the point to set | + | ::* '''y''' -- x coordinate of the point to set |
− | ::* safe -- true: check out of bounds | + | ::* '''safe''' -- true: check out of bounds |
− | : | + | : '''Returns''' |
:: alpha value of the point | :: alpha value of the point | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_set_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t c) </span> | |
: Set the color of a pixel of an image. The alpha channel won't be affected. | : Set the color of a pixel of an image. The alpha channel won't be affected. | ||
− | : | + | : '''Parameters''' |
− | ::* dsc -- pointer to an image descriptor | + | ::* '''dsc''' -- pointer to an image descriptor |
− | ::* x -- x coordinate of the point to set | + | ::* '''x''' -- x coordinate of the point to set |
− | ::* y -- x coordinate of the point to set | + | ::* '''y''' -- x coordinate of the point to set |
− | ::* c -- color of the point | + | ::* '''c''' -- color of the point |
− | ::* safe -- true: check out of bounds | + | ::* '''safe''' -- true: check out of bounds |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_set_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_opa_t opa) </span> | |
: Set the alpha value of a pixel of an image. The color won't be affected | : Set the alpha value of a pixel of an image. The color won't be affected | ||
− | : | + | : '''Parameters''' |
− | ::* dsc -- pointer to an image descriptor | + | ::* '''dsc''' -- pointer to an image descriptor |
− | ::* x -- x coordinate of the point to set | + | ::* '''x''' -- x coordinate of the point to set |
− | ::* y -- x coordinate of the point to set | + | ::* '''y''' -- x coordinate of the point to set |
− | ::* opa -- the desired opacity | + | ::* '''opa''' -- the desired opacity |
− | ::* safe -- true: check out of bounds | + | ::* '''safe''' -- true: check out of bounds |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_set_palette(lv_img_dsc_t *dsc, uint8_t id, lv_color_t c) </span> | |
− | : Set the palette color of an indexed image. Valid only for <code>LV_IMG_CF_</code> | + | : Set the palette color of an indexed image. Valid only for <code style="color: #bb0000;">LV_IMG_CF_</code><code style="color: #bb0000;">INDEXED1/2/4/8</code> |
− | : | + | : '''Parameters''' |
− | ::* dsc -- pointer to an image descriptor | + | ::* '''dsc''' -- pointer to an image descriptor |
− | ::* id -- the palette color to set: | + | ::* '''id''' -- the palette color to set: |
− | ::** for <code>LV_IMG_CF_INDEXED1</code>: 0..1 | + | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED1</code>: 0..1 |
− | ::** for <code>LV_IMG_CF_INDEXED2</code>: 0..3 | + | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED2</code>: 0..3 |
− | ::** for <code>LV_IMG_CF_INDEXED4</code>: 0..15 | + | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED4</code>: 0..15 |
− | ::** for <code>LV_IMG_CF_INDEXED8</code>: 0..255 | + | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED8</code>: 0..255 |
− | ::* c -- the color to set | + | ::* '''c''' -- the color to set |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_free(lv_img_dsc_t *dsc) </span> | |
: Free an allocated image buffer | : Free an allocated image buffer | ||
− | : | + | : '''Parameters''' |
− | :: dsc -- image buffer to free | + | :: '''dsc''' -- image buffer to free |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">uint32_t lv_img_buf_get_img_size(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf) </span> | |
− | : Get the memory consumption of a raw bitmap, given color format and | + | : Get the memory consumption of a raw bitmap, given color format and dimensions. |
− | : | + | : '''Parameters''' |
− | ::* w -- width | + | ::* '''w''' -- width |
− | ::* h -- height | + | ::* '''h''' -- height |
− | ::* cf -- color format | + | ::* '''cf''' -- color format |
− | : | + | : '''Returns''' |
:: size in bytes | :: size in bytes | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">void _lv_img_buf_transform_init(lv_img_transform_dsc_t *dsc) </span> | |
: Initialize a descriptor to rotate an image | : Initialize a descriptor to rotate an image | ||
− | : | + | : '''Parameters''' |
− | :: dsc -- pointer to an <code>lv_img_transform_dsc_t</code> variable whose <code>cfg</code> field is initialized | + | :: '''dsc''' -- pointer to an <code style="color: #bb0000;">lv_img_transform_dsc_t</code> variable whose <code style="color: #bb0000;">cfg</code> field is initialized |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">bool _lv_img_buf_transform_anti_alias(lv_img_transform_dsc_t *dsc) </span> | |
: Continue transformation by taking the neighbors into account | : Continue transformation by taking the neighbors into account | ||
− | : | + | : |
− | : | + | : '''Parameters''' |
− | :: dsc -- pointer to the transformation descriptor | + | :: '''dsc''' -- pointer to the transformation descriptor |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">bool _lv_img_buf_transform(lv_img_transform_dsc_t *dsc, lv_coord_t x, lv_coord_t y) </span> | |
− | : Get which color and opa would come to a pixel if it were rotated Note the | + | : Get which color and opa would come to a pixel if it were rotated Note the result is written back to <code style="color: #bb0000;">dsc->res_color</code> and <code style="color: #bb0000;">dsc->res_opa</code> |
− | : | + | : '''Parameters''' |
− | ::* dsc -- a descriptor initialized by <code>lv_img_buf_rotate_init</code> | + | ::* '''dsc''' -- a descriptor initialized by <code style="color: #bb0000;">lv_img_buf_rotate_init</code> |
− | ::* x -- the coordinate which color and opa should be get | + | ::* '''x''' -- the coordinate which color and opa should be get |
− | ::* y -- the coordinate which color and opa should be get | + | ::* '''y''' -- the coordinate which color and opa should be get |
− | : | + | : '''Returns''' |
:: true: there is valid pixel on these x/y coordinates; false: the rotated pixel was out of the image | :: true: there is valid pixel on these x/y coordinates; false: the rotated pixel was out of the image | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">void _lv_img_buf_get_transformed_area(lv_area_t *res, lv_coord_t w, lv_coord_t h, int16_t angle, uint16_t zoom, const lv_point_t *pivot) </span> | |
: Get the area of a rectangle if its rotated and scaled | : Get the area of a rectangle if its rotated and scaled | ||
− | : | + | : '''Parameters''' |
− | ::* res -- store the coordinates here | + | ::* '''res''' -- store the coordinates here |
− | ::* w -- width of the | + | ::* '''w''' -- width of the rectangle to transform |
− | ::* h -- height of the rectangle to transform | + | ::* '''h''' -- height of the rectangle to transform |
− | ::* angle -- angle of rotation | + | ::* '''angle''' -- angle of rotation |
− | ::* zoom -- zoom, (256 no zoom) | + | ::* '''zoom''' -- zoom, (256 no zoom) |
− | ::* pivot -- x,y pivot coordinates of rotation | + | ::* '''pivot''' -- x,y pivot coordinates of rotation |
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_header_t </span> | |
− | : ''#include < | + | : ''#include <lv_img_buf.h>'' |
− | : | + | : The first 8 bit is very important to distinguish the different source types. |
+ | : For more info see <code style="color: #bb0000;">lv_img_get_src_type()</code> in lv_img.c | ||
+ | : On big endian systems the order is reversed so '''cf''' and '''always_zero''' must be at the end of the struct. | ||
+ | : | ||
+ | : '''Public Members''' | ||
+ | : <span style="background-color: #eeeeee;">uint32_t h </span> | ||
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t w </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t reserved </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t always_zero </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t cf </span> |
:: | :: | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_header_t </span> | |
− | : ''#include <lv_img_buf.h>'' The first 8 bit is very important to distinguish the different source types. For more info see <code>lv_img_get_src_type()</code> in lv_img.c On big endian systems the order is reversed so cf and always_zero must be at the end of the struct. Public Members | + | : ''#include <lv_img_buf.h>'' |
− | : | + | : The first 8 bit is very important to distinguish the different source types. |
+ | : For more info see <code style="color: #bb0000;">lv_img_get_src_type()</code> in lv_img.c | ||
+ | : On big endian systems the order is reversed so cf and always_zero must be at the end of the struct. | ||
+ | : | ||
+ | : '''Public Members''' | ||
+ | : <span style="background-color: #eeeeee;">uint32_t h </span> | ||
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t w </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t reserved </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t always_zero </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t cf </span> |
:: | :: | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_dsc_t </span> | |
− | : ''#include < | + | : ''#include <lv_img_buf.h>'' |
− | : | + | : Image header it is compatible with the result from image converter utility |
− | :: A header | + | : |
− | : | + | : '''Public Members''' |
− | :: Size of the | + | : <span style="background-color: #eeeeee;">lv_img_header_t header </span> |
− | : | + | :: A header describing the basics of the image |
− | :: Pointer to the | + | : <span style="background-color: #eeeeee;">uint32_t data_size </span> |
+ | :: Size of the image in bytes | ||
+ | : <span style="background-color: #eeeeee;">const uint8_t *data </span> | ||
+ | :: Pointer to the data of the image | ||
− | + | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_transform_dsc_t </span> | |
− | : Public Members | + | : '''Public Members''' |
− | : | + | : <span style="background-color: #eeeeee;">const void *src </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t src_w </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t src_h </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t pivot_x </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t pivot_y </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">int16_t angle </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint16_t zoom </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_color_t color </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_img_cf_t cf </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">bool antialias </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">stru<nowiki>ct lv_img_transform_dsc_t::[anonymous] cfg</nowiki> </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_opa_t opa </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">struct lv_im<nowiki>g_transform_dsc_t::[anonymous] res</nowiki> </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_img_dsc_t img_dsc </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">int32_t pivot_x_256 </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">int32_t pivot_y_256 </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">int32_t sinma </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">int32_t cosma </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint8_t chroma_keyed </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint8_t has_alpha </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint8_t native_color </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t zoom_inv </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t xs </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t ys </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t xs_int </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">lv_coord_t ys_int </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint32_t pxi </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">uint8_t px_size </span> |
:: | :: | ||
− | : | + | : <span style="background-color: #eeeeee;">struc<nowiki>t lv_img_transform_dsc_t::[anonymous] tmp</nowiki></span> |
+ | |Functions | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">lv_img_dsc_t *lv_img_buf_alloc(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf) </span> | ||
+ | : RAMに画像バッファを確保する | ||
+ | : '''Parameters''' | ||
+ | ::* '''w''' -- 画像の横幅 | ||
+ | ::* '''h''' -- 像の高さ | ||
+ | ::* '''cf''' -- カラーフォーマット(<code style="color: #bb0000;">LV_IMG_CF_...</code>) | ||
+ | : '''Returns''' | ||
+ | :: 割り当てられたイメージ,あるいは失敗時に NULL を返します. | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">lv_color_t lv_img_buf_get_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t color) </span> | ||
+ | : 画像の画素の色を取得する | ||
+ | : '''Parameters''' | ||
+ | ::* '''dsc''' -- 画像記述子 | ||
+ | ::* '''x''' -- 取得する点のx座標。 | ||
+ | ::* '''y''' -- 取得する点のy座標。 | ||
+ | ::* '''color''' -- イメージの色。<code style="color: #bb0000;">LV_IMG_CF_ALPHA_1/2/4/8</code> の場合、この色が使用されます。それ以外の場合は使用しません。 | ||
+ | ::* '''safe''' -- true:範囲外をチェックアウト | ||
+ | : '''Returns''' | ||
+ | :: 点の色 | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">lv_opa_t lv_img_buf_get_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y) </span> | ||
+ | : Get the alpha value of an image's pixel | ||
+ | : '''Parameters''' | ||
+ | ::* '''dsc''' -- イメージ記述子へのポインタ | ||
+ | ::* '''x''' --設定する点のx座標 | ||
+ | ::* '''y''' -- 設定する点のy座標 | ||
+ | ::* '''safe''' -- true:範囲外をチェックアウト | ||
+ | : '''Returns''' | ||
+ | :: ポイントのアルファ値 | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_set_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t c) </span> | ||
+ | : 画像のピクセルの色を設定します。アルファチャンネルは影響を受けません。 | ||
+ | : '''Parameters''' | ||
+ | ::* '''dsc''' -- イメージ記述子へのポインタ | ||
+ | ::* '''x''' -- 設定する点のx座標 | ||
+ | ::* '''y''' -- 設定する点のy座標 | ||
+ | ::* '''c''' -- 点の色 | ||
+ | ::* '''safe''' -- true:範囲外をチェックアウト | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_set_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_opa_t opa) </span> | ||
+ | : イメージのピクセルのアルファ値を設定します。色には影響しません | ||
+ | : '''Parameters''' | ||
+ | ::* '''dsc''' -- イメージ記述子へのポインタ | ||
+ | ::* '''x''' -- 設定する点のx座標 | ||
+ | ::* '''y''' -- 設定する点のy座標 | ||
+ | ::* '''opa''' -- 所望の不透明度 | ||
+ | ::* '''safe''' --true:範囲外をチェックアウト | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_set_palette(lv_img_dsc_t *dsc, uint8_t id, lv_color_t c) </span> | ||
+ | : インデックス付きイメージのパレットカラーを設定します。 | ||
+ | : <code style="color: #bb0000;">LV_IMG_CF_</code><code style="color: #bb0000;">INDEXED1/2/4/8</code>のみ有効 | ||
+ | : '''Parameters''' | ||
+ | ::* '''dsc''' -- イメージ記述子へのポインタ | ||
+ | ::* '''id''' --設定するパレットの色: | ||
+ | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED1</code>: 0..1 | ||
+ | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED2</code>: 0..3 | ||
+ | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED4</code>: 0..15 | ||
+ | ::** for <code style="color: #bb0000;">LV_IMG_CF_INDEXED8</code>: 0..255 | ||
+ | ::* '''c''' -- 設定する色 | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">void lv_img_buf_free(lv_img_dsc_t *dsc) </span> | ||
+ | : 割り当てられたイメージバッファを解放する | ||
+ | : '''Parameters''' | ||
+ | :: '''dsc''' -- 解放するイメージバッファ | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">uint32_t lv_img_buf_get_img_size(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf) </span> | ||
+ | : 指定されたカラー形式とサイズで、生のビットマップのメモリ消費量を取得します。 | ||
+ | : '''Parameters''' | ||
+ | ::* '''w''' -- 幅 | ||
+ | ::* '''h''' -- 高さ | ||
+ | ::* '''cf''' -- カラーフォーマット | ||
+ | : '''Returns''' | ||
+ | :: バイト単位のサイズ | ||
+ | |||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">void _lv_img_buf_transform_init(lv_img_transform_dsc_t *dsc) </span> | ||
+ | : イメージを回転させるための記述子の初期化 | ||
+ | : '''Parameters''' | ||
+ | :: '''dsc''' -- <code style="color: #bb0000;">cfg</code> フィールドが初期化された<code style="color: #bb0000;">lv_img_transform_dsc_t</code>変数へのポインタ | ||
+ | |||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">bool _lv_img_buf_transform_anti_alias(lv_img_transform_dsc_t *dsc) </span> | ||
+ | : 近傍を考慮して変換を継続する | ||
+ | : | ||
+ | : '''Parameters''' | ||
+ | :: '''dsc''' -- 変換記述子へのポインタ | ||
+ | |||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">bool _lv_img_buf_transform(lv_img_transform_dsc_t *dsc, lv_coord_t x, lv_coord_t y) </span> | ||
+ | : 回転された場合にピクセルになる色とopaを取得する結果は<code style="color: #bb0000;">dsc->res_color</code> と<code style="color: #bb0000;">dsc->res_opa</code>に書き戻されることに注意してください。 | ||
+ | : '''Parameters''' | ||
+ | ::* '''dsc''' -- <code style="color: #bb0000;">lv_img_buf_rotate_init</code>によって初期化される記述子 | ||
+ | ::* '''x''' -- 色とopaを取得するx座標 | ||
+ | ::* '''y''' -- 色とopaを取得するy座標 | ||
+ | : '''Returns''' | ||
+ | :: true:これらのx/y座標に有効なピクセルがあります。 | ||
+ | :: false:回転されたピクセルがイメージの外にあります。 | ||
+ | |||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">void _lv_img_buf_get_transformed_area(lv_area_t *res, lv_coord_t w, lv_coord_t h, int16_t angle, uint16_t zoom, const lv_point_t *pivot) </span> | ||
+ | : 矩形の面積を取得する (回転およびスケールされた場合) | ||
+ | : '''Parameters''' | ||
+ | ::* '''res''' -- 座標をここに保存するには | ||
+ | ::* '''w''' -- width of the rectangle to transform | ||
+ | ::* '''h''' -- 変換する長方形の高さ | ||
+ | ::* '''angle''' -- 回転角 | ||
+ | ::* '''zoom''' -- ズーム, (256 no zoom) | ||
+ | ::* '''pivot''' -- 回転のx、yピボット座標 | ||
+ | |||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_header_t </span> | ||
+ | :''#include <lv_img_buf.h>'' | ||
+ | : 最初の8ビットは、異なるソースタイプを区別するために非常に重要です。 | ||
+ | : 詳細については、lv_img.cの <code style="color: #bb0000;">lv_img_get_src_type()</code> in lv_img.c を参照してください。 | ||
+ | : ビッグエンディアンシステムでは、順序が逆になるため、'''cf'''と'''always_0'''は構造体の末尾にある必要があります。 | ||
+ | : | ||
+ | : '''Public Members''' | ||
+ | :<span style="background-color: #eeeeee;">uint32_t h </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t w </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t reserved </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t always_zero </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t cf </span> | ||
+ | :: | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_header_t </span> | ||
+ | :''#include <lv_img_buf.h>'' | ||
+ | : 最初の8ビットは、異なるソースタイプを区別するために非常に重要です。 | ||
+ | : 詳細については、lv_img.cの<code style="color: #bb0000;">lv_img_get_src_type()</code> を参照してください。 ビッグエンディアンシステムでは、順序が逆になるため、'''cf'''と'''always_0'''は構造体の末尾にある必要があります。 | ||
+ | : | ||
+ | : '''Public Members''' | ||
+ | :<span style="background-color: #eeeeee;">uint32_t h </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t w </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t reserved </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t always_zero </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t cf </span> | ||
+ | :: | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_dsc_t </span> | ||
+ | :''#include <lv_img_buf.h>'' | ||
+ | : イメージヘッダ。イメージ変換ユーティリティの結果と互換性があります。 | ||
+ | : | ||
+ | : '''Public Members''' | ||
+ | :<span style="background-color: #eeeeee;">lv_img_header_t header </span> | ||
+ | :: イメージの基本を説明するヘッダー | ||
+ | :<span style="background-color: #eeeeee;">uint32_t data_size </span> | ||
+ | :: イメージのサイズ (バイト単位) | ||
+ | :<span style="background-color: #eeeeee;">const uint8_t *data </span> | ||
+ | :: 画像のデータへのポインタ | ||
+ | <span style="background-color:#e7f2fa;color:#2980b9;">struct lv_img_transform_dsc_t </span> | ||
+ | : '''Public Members''' | ||
+ | :<span style="background-color: #eeeeee;">const void *src </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t src_w </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t src_h </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t pivot_x </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t pivot_y </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">int16_t angle </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint16_t zoom </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_color_t color </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_img_cf_t cf </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">bool antialias </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">stru<nowiki>ct lv_img_transform_dsc_t::[anonymous] cfg</nowiki> </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_opa_t opa </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">struct lv_im<nowiki>g_transform_dsc_t::[anonymous] res</nowiki> </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_img_dsc_t img_dsc </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">int32_t pivot_x_256 </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">int32_t pivot_y_256 </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">int32_t sinma </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">int32_t cosma </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint8_t chroma_keyed </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint8_t has_alpha </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint8_t native_color </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t zoom_inv </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t xs </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t ys </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t xs_int </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">lv_coord_t ys_int </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint32_t pxi </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">uint8_t px_size </span> | ||
+ | :: | ||
+ | :<span style="background-color: #eeeeee;">struc<nowiki>t lv_img_transform_dsc_t::[anonymous] tmp</nowiki></span> | ||
+ | |} | ||
− | + | [[App:Library:LVGL#Overview|戻る : Previous]] |
2022年7月2日 (土) 10:22時点における最新版
https://docs.lvgl.io/8.2/overview/image.html
Images
英文 | 自動翻訳 |
---|---|
An image can be a file or a variable which stores the bitmap itself and some metadata. |
画像は、ビットマップそのものといくつかのメタデータを格納するファイルまたは変数にすることができます。 |
Store images
英文 | 自動翻訳 |
---|---|
You can store images in two places
|
画像は、次の2つの場所に保存することができます。
|
Variables
英文 | 自動翻訳 |
---|---|
Images stored internally in a variable are composed mainly of an
|
変数に格納される画像は、主に以下のフィールドを持つ lv_img_dsc_t 構造体から構成される。
|
Files
英文 | 自動翻訳 |
---|---|
To deal with files you need to add a storage Drive to LVGL. In short, a Drive is a collection of functions (open, read, close, etc.) registered in LVGL to make file operations.
In every case, a Drive is just an abstraction to read and/or write data to memory.
Images stored as files are not linked into the resulting executable, and must be read into RAM before being drawn. As a result, they are not as resource-friendly as images linked at compile time. However, they are easier to replace without needing to rebuild the main program. |
ファイルを扱うには、LVGLにストレージDriveを追加する必要があります。つまり、DriveとはLVGLに登録されたファイル操作を行うための関数(open, read, closeなど)の集合体です。
いずれの場合も、ドライブはメモリにデータを読み書きするための抽象化されたものに過ぎません。
ファイルとして保存された画像は、結果の実行ファイルにリンクされず、描画する前にRAMに読み込まれる必要があります。
しかし、メインプログラムを再構築することなく、簡単に交換することができます。 |
Color formats
英文 | 自動翻訳 |
---|---|
Various built-in color formats are supported:
The bytes of For 32-bit color depth:
For 16-bit color depth:
For 8-bit color depth:
|
Various built-in color formats are supported:
32ビット色深度の場合。
16ビット色深度の場合。
8ビット色深度の場合。
|
Add and use images
英文 | 自動翻訳 |
---|---|
You can add images to LVGL in two ways:
|
LVGLにイメージを追加するには、次の2つの方法があります。
|
Online converter
英文 | 自動翻訳 |
---|---|
The online Image converter is available here: https://lvgl.io/tools/imageconverter Adding an image to LVGL via the online converter is easy.
In the case of binary files, you need to specify the color format you want:
|
オンラインのイメージコンバータは次のURLで入手できます。https://lvgl.io/tools/imageconverter
オンラインコンバータを介してLVGLにイメージを簡単に追加できます。
バイナリファイルの場合は、希望する色形式を指定する必要があります。
|
Manually create an image
英文 | 自動翻訳 |
---|---|
If you are generating an image at run-time, you can craft an image variable to display it using LVGL. For example: uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...};
static lv_img_dsc_t my_img_dsc = {
.header.always_zero = 0,
.header.w = 80,
.header.h = 60,
.data_size = 80 * 60 * LV_COLOR_DEPTH / 8,
.header.cf = LV_IMG_CF_TRUE_COLOR, /*Set the color format*/
.data = my_img_data,
};
If the color format is Another (possibly simpler) option to create and display an image at run-time is to use the Canvas object. |
実行時に画像を生成している場合、画像変数を細工してLVGLで表示することができます。例えば
uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...};
static lv_img_dsc_t my_img_dsc = {
.header.always_zero = 0,
.header.w = 80,
.header.h = 60,
.data_size = 80 * 60 * LV_COLOR_DEPTH / 8,
.header.cf = LV_IMG_CF_TRUE_COLOR, /*Set the color format*/
.data = my_img_data,
};
ラーフォーマットが ランタイムに画像を作成し表示するもう一つの(おそらくより単純な)オプションは、Canvasオブジェクトを使用することです。 |
Use images
英文 | 自動翻訳 |
---|---|
The simplest way to use an image in LVGL is to display it with an lv_img object: lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);
/*From variable*/
lv_img_set_src(icon, &my_icon_dsc);
/*From file*/
lv_img_set_src(icon, "S:my_icon.bin");
If the image was converted with the online converter, you should use |
LVGLで画像を使用する最も簡単な方法は、lv_imgオブジェクトで表示することです。
lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);
/*From variable*/
lv_img_set_src(icon, &my_icon_dsc);
/*From file*/
lv_img_set_src(icon, "S:my_icon.bin");
オンラインコンバータで変換した画像の場合は、 |
Image decoder
英文 | 自動翻訳 |
---|---|
As you can see in the Color formats section, LVGL supports several built-in image formats. In many cases, these will be all you need. LVGL doesn't directly support, however, generic image formats like PNG or JPG. To handle non-built-in image formats, you need to use external libraries and attach them to LVGL via the Image decoder interface. An image decoder consists of 4 callbacks:
The Custom image formatsThe easiest way to create a custom image is to use the online image converter and select It will just take every byte of the binary file you uploaded and write it as an image "bitmap".
You should choose the correct format according to your needs: a fully opaque image, using an alpha channel or using a chroma key. After decoding, the raw formats are considered True color by the library. In other words, the image decoder must decode the Raw images to True color according to the format described in the Color formats section.
However, the library can draw images only in True color format (or Raw but ultimately it will be in True color format).
With User encoded formats, the color format in the open function ( |
カラーフォーマットのセクションにあるように、LVGLはいくつかのビルトインイメージフォーマットをサポートしています。多くの場合、これらが必要なすべてでしょう。しかし、LVGLは、PNGやJPGのような一般的な画像形式を直接はサポートしていません。
Custom image formatsカスタム画像を作成する最も簡単な方法は、オンラインの画像変換ソフトを使い、 アップロードしたバイナリファイルの各バイトを取り込んで、画像「ビットマップ」として書き込むだけです。
完全に不透明な画像,アルファチャンネルを使用したもの,クロマキーを使用したものなど,必要に応じて適切な形式を選択する必要があります.
ただし、ライブラリはTrueカラー形式(またはRawだが最終的にはTrueカラー形式になる)のみで画像を描画することができる。
User エンコードされたフォーマットでは、open 関数 ( |
Register an image decoder
英文 | 自動翻訳 |
---|---|
Here's an example of getting LVGL to work with PNG images. First, you need to create a new image decoder and set some functions to open/close the PNG files. It should look like this: /*Create a new decoder and register functions */
lv_img_decoder_t * dec = lv_img_decoder_create();
lv_img_decoder_set_info_cb(dec, decoder_info);
lv_img_decoder_set_open_cb(dec, decoder_open);
lv_img_decoder_set_close_cb(dec, decoder_close);
/**
* Get info about a PNG image
* @param decoder pointer to the decoder where this function belongs
* @param src can be file name or pointer to a C array
* @param header store the info here
* @return LV_RES_OK: no error; LV_RES_INV: can't get the info
*/
static lv_res_t decoder_info(lv_img_decoder_t * decoder, const void * src, lv_img_header_t * header)
{
/*Check whether the type `src` is known by the decoder*/
if(is_png(src) == false) return LV_RES_INV;
/* Read the PNG header and find `width` and `height` */
...
header->cf = LV_IMG_CF_RAW_ALPHA;
header->w = width;
header->h = height;
}
/**
* Open a PNG image and return the decided image
* @param decoder pointer to the decoder where this function belongs
* @param dsc pointer to a descriptor which describes this decoding session
* @return LV_RES_OK: no error; LV_RES_INV: can't get the info
*/
static lv_res_t decoder_open(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc)
{
/*Check whether the type `src` is known by the decoder*/
if(is_png(src) == false) return LV_RES_INV;
/*Decode and store the image. If `dsc->img_data` is `NULL`, the `read_line` function will be called to get the image data line-by-line*/
dsc->img_data = my_png_decoder(src);
/*Change the color format if required. For PNG usually 'Raw' is fine*/
dsc->header.cf = LV_IMG_CF_...
/*Call a built in decoder function if required. It's not required if`my_png_decoder` opened the image in true color format.*/
lv_res_t res = lv_img_decoder_built_in_open(decoder, dsc);
return res;
}
/**
* Decode `len` pixels starting from the given `x`, `y` coordinates and store them in `buf`.
* Required only if the "open" function can't open the whole decoded pixel array. (dsc->img_data == NULL)
* @param decoder pointer to the decoder the function associated with
* @param dsc pointer to decoder descriptor
* @param x start x coordinate
* @param y start y coordinate
* @param len number of pixels to decode
* @param buf a buffer to store the decoded pixels
* @return LV_RES_OK: ok; LV_RES_INV: failed
*/
lv_res_t decoder_built_in_read_line(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc, lv_coord_t x,
lv_coord_t y, lv_coord_t len, uint8_t * buf)
{
/*With PNG it's usually not required*/
/*Copy `len` pixels from `x` and `y` coordinates in True color format to `buf` */
}
/**
* Free the allocated resources
* @param decoder pointer to the decoder where this function belongs
* @param dsc pointer to a descriptor which describes this decoding session
*/
static void decoder_close(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc)
{
/*Free all allocated data*/
/*Call the built-in close function if the built-in open/read_line was used*/
lv_img_decoder_built_in_close(decoder, dsc);
}
So in summary:
|
ここでは、LVGLをPNG画像で動作させる例を示します。
まず、新しい画像デコーダを作り、PNGファイルを開いたり閉じたりするためのいくつかの関数を設定する必要があります。以下のような感じでいいと思います。 /*Create a new decoder and register functions */
lv_img_decoder_t * dec = lv_img_decoder_create();
lv_img_decoder_set_info_cb(dec, decoder_info);
lv_img_decoder_set_open_cb(dec, decoder_open);
lv_img_decoder_set_close_cb(dec, decoder_close);
/**
* Get info about a PNG image
* @param decoder pointer to the decoder where this function belongs
* @param src can be file name or pointer to a C array
* @param header store the info here
* @return LV_RES_OK: no error; LV_RES_INV: can't get the info
*/
static lv_res_t decoder_info(lv_img_decoder_t * decoder, const void * src, lv_img_header_t * header)
{
/*Check whether the type `src` is known by the decoder*/
if(is_png(src) == false) return LV_RES_INV;
/* Read the PNG header and find `width` and `height` */
...
header->cf = LV_IMG_CF_RAW_ALPHA;
header->w = width;
header->h = height;
}
/**
* Open a PNG image and return the decided image
* @param decoder pointer to the decoder where this function belongs
* @param dsc pointer to a descriptor which describes this decoding session
* @return LV_RES_OK: no error; LV_RES_INV: can't get the info
*/
static lv_res_t decoder_open(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc)
{
/*Check whether the type `src` is known by the decoder*/
if(is_png(src) == false) return LV_RES_INV;
/*Decode and store the image. If `dsc->img_data` is `NULL`, the `read_line` function will be called to get the image data line-by-line*/
dsc->img_data = my_png_decoder(src);
/*Change the color format if required. For PNG usually 'Raw' is fine*/
dsc->header.cf = LV_IMG_CF_...
/*Call a built in decoder function if required. It's not required if`my_png_decoder` opened the image in true color format.*/
lv_res_t res = lv_img_decoder_built_in_open(decoder, dsc);
return res;
}
/**
* Decode `len` pixels starting from the given `x`, `y` coordinates and store them in `buf`.
* Required only if the "open" function can't open the whole decoded pixel array. (dsc->img_data == NULL)
* @param decoder pointer to the decoder the function associated with
* @param dsc pointer to decoder descriptor
* @param x start x coordinate
* @param y start y coordinate
* @param len number of pixels to decode
* @param buf a buffer to store the decoded pixels
* @return LV_RES_OK: ok; LV_RES_INV: failed
*/
lv_res_t decoder_built_in_read_line(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc, lv_coord_t x,
lv_coord_t y, lv_coord_t len, uint8_t * buf)
{
/*With PNG it's usually not required*/
/*Copy `len` pixels from `x` and `y` coordinates in True color format to `buf` */
}
/**
* Free the allocated resources
* @param decoder pointer to the decoder where this function belongs
* @param dsc pointer to a descriptor which describes this decoding session
*/
static void decoder_close(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc)
{
/*Free all allocated data*/
/*Call the built-in close function if the built-in open/read_line was used*/
lv_img_decoder_built_in_close(decoder, dsc);
}
以上をまとめると。
|
Manually use an image decoder
英文 | 自動翻訳 |
---|---|
LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the The
lv_res_t res;
lv_img_decoder_dsc_t dsc;
res = lv_img_decoder_open(&dsc, &my_img_dsc, color, frame_id);
if(res == LV_RES_OK) {
/*Do something with `dsc->img_data`*/
lv_img_decoder_close(&dsc);
}
|
LVGLは、生画像を描画しようとする場合(すなわち、lv_img オブジェクトを使 う場合)、自動的に登録された画像デコーダを使用しますが、手動で使用する こともできます。デコードセッションを記述するために lv_img_decoder_dsc_t 変数を作成し、 lv_img_decoder_open() を呼びます。
lv_res_t res;
lv_img_decoder_dsc_t dsc;
res = lv_img_decoder_open(&dsc, &my_img_dsc, color, frame_id);
if(res == LV_RES_OK) {
/*Do something with `dsc->img_data`*/
lv_img_decoder_close(&dsc);
}
|
Image caching
英文 | 自動翻訳 |
---|---|
Sometimes it takes a lot of time to open an image. Continuously decoding a PNG image or loading images from a slow external memory would be inefficient and detrimental to the user experience.
Caching means some images will be left open, hence LVGL can quickly access them from
LVGL tries to optimize the process as much as possible (see below), but you will still need to evaluate if this would be beneficial for your platform or not.
|
画像を開くのに時間がかかることがある。
PNG画像をデコードし続けたり、遅い外部メモリから画像を読み込むことは、非効率でユーザーエクスペリエンスを損ないます。
キャッシュすることは、いくつかの画像を開いたままにしておくことを意味し、したがってLVGLは、それらを再びデコードする必要がなく、
LVGLは可能な限り処理を最適化しようとしますが(下記参照)、これがあなたのプラットフォームにとって有益かどうか、評価する必要があります。
|
Cache size
英文 | 自動翻訳 |
---|---|
The number of cache entries can be defined with The size of the cache can be changed at run-time with |
キャッシュのエントリ数は lv_conf.h の LV_IMG_CACHE_DEF_SIZE で定義できます。デフォルト値は 1 で、最近使用した画像だけがオープンされたままになります。
キャッシュのサイズは、ランタイムに |
Value of images
英文 | 自動翻訳 |
---|---|
When you use more images than cache entries, LVGL can't cache all the images. Instead, the library will close one of the cached images to free space. To decide which image to close, LVGL uses a measurement it previously made of how long it took to open the image. Cache entries that hold slower-to-open images are considered more valuable and are kept in the cache as long as possible. If you want or need to override LVGL's measurement, you can manually set the time to open value in the decoder open function in Every cache entry has a "life" value. Every time an image is opened through the cache, the life value of all entries is decreased to make them older. When a cached image is used, its life value is increased by the time to open value to make it more alive. If there is no more space in the cache, the entry with the lowest life value will be closed. |
キャッシュエントリより多くの画像を使用する場合、LVGLはすべての画像をキャッ シュすることができません。その代わりに、ライブラリはキャッシュされたイメージの1つを閉じて、スペースを空けることになります。
どの画像を閉じるかを決定するために、LVGLは画像を開くのにどれくらい時間がかかったかを以前に行った測定値を使用します。 開くのに時間のかかる画像を保持するキャッシュエントリは、より価値があるとみなされ、できるだけ長くキャッシュに保持されます。
|
Memory usage
英文 | 自動翻訳 |
---|---|
Note that a cached image might continuously consume memory. For example, if three PNG images are cached, they will consume memory while they are open. Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time. |
キャッシュされた画像は、継続的にメモリを消費する可能性があることに注意してください。例えば、3つのPNG画像がキャッシュされた場合、それらが開いている間、メモリを消費します。
したがって、最大の画像を同時にキャッシュするのに十分なRAMがあることを確認するのは、ユーザーの責任です。 |
Clean the cache
英文 | 自動翻訳 |
---|---|
Let's say you have loaded a PNG image into a If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again.
If |
例えば、PNG画像をlv_img_dsc_t my_png 変数にロードし、それをlv_img オブジェクトで使用したとします。
もし、画像がすでにキャッシュされており、その後、基礎となるPNGファイルを変更した場合、LVGLに画像を再度キャッシュするように通知する必要があります。
パラメータとして |
API
Image buffer
英文 | 自動翻訳 |
---|---|
Typedefs typedef uint8_t lv_img_cf_t Enums enum [anonymous]
|
Typedefs
typedef uint8_t lv_img_cf_t Enums enum [anonymous]
|
Functions lv_img_dsc_t *lv_img_buf_alloc(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)
lv_color_t lv_img_buf_get_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t color)
lv_opa_t lv_img_buf_get_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y)
void lv_img_buf_set_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t c)
void lv_img_buf_set_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_opa_t opa)
void lv_img_buf_set_palette(lv_img_dsc_t *dsc, uint8_t id, lv_color_t c)
void lv_img_buf_free(lv_img_dsc_t *dsc)
uint32_t lv_img_buf_get_img_size(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)
void _lv_img_buf_transform_init(lv_img_transform_dsc_t *dsc)
bool _lv_img_buf_transform_anti_alias(lv_img_transform_dsc_t *dsc)
bool _lv_img_buf_transform(lv_img_transform_dsc_t *dsc, lv_coord_t x, lv_coord_t y)
void _lv_img_buf_get_transformed_area(lv_area_t *res, lv_coord_t w, lv_coord_t h, int16_t angle, uint16_t zoom, const lv_point_t *pivot)
struct lv_img_header_t
struct lv_img_header_t
struct lv_img_dsc_t
struct lv_img_transform_dsc_t
|
Functions
lv_img_dsc_t *lv_img_buf_alloc(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)
lv_color_t lv_img_buf_get_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t color)
lv_opa_t lv_img_buf_get_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y)
void lv_img_buf_set_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t c)
void lv_img_buf_set_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_opa_t opa)
void lv_img_buf_set_palette(lv_img_dsc_t *dsc, uint8_t id, lv_color_t c)
void lv_img_buf_free(lv_img_dsc_t *dsc)
uint32_t lv_img_buf_get_img_size(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)
void _lv_img_buf_transform_init(lv_img_transform_dsc_t *dsc)
bool _lv_img_buf_transform_anti_alias(lv_img_transform_dsc_t *dsc)
bool _lv_img_buf_transform(lv_img_transform_dsc_t *dsc, lv_coord_t x, lv_coord_t y)
void _lv_img_buf_get_transformed_area(lv_area_t *res, lv_coord_t w, lv_coord_t h, int16_t angle, uint16_t zoom, const lv_point_t *pivot)
struct lv_img_header_t
struct lv_img_header_t
struct lv_img_dsc_t
struct lv_img_transform_dsc_t
|