Difference between revisions of "Component: Bitmap Drawer (Displays: Graphical)"

From Flowcode Help
Jump to navigationJump to search
(XML import BR)
(Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | Matrix TSL |- | width="20%" style="color:gray;" | Version | 1.2 |- | width="20%" style="color:gray...")
Line 1: Line 1:
−
 
+
{| style="width:50%"
−
 
 
−
{| width="50%"
 
 
|-
 
|-
−
| width="20%" style="color: gray;" | Author
+
| width="20%" style="color:gray;" | Author
 
| Matrix TSL
 
| Matrix TSL
 
|-
 
|-
−
| width="20%" style="color: gray;" | Version
+
| width="20%" style="color:gray;" | Version
−
| 1.2 (Release)
+
| 1.2
 
|-
 
|-
−
| width="20%" style="color: gray;" | Category
+
| width="20%" style="color:gray;" | Category
 
| Displays: Graphical
 
| Displays: Graphical
 
|}
 
|}
  
  
 +
==Bitmap Drawer component==
 +
A component to simplify the process of drawing bitmap images to a graphical display. Stores the bitmap image inside a ROM look up table. Compatible with 24-bit Bitmaps and Monochrome Bitmaps. The gLCD object property specifies which LCD component to draw the bitmap to. Use multiple BitmapDrawer components for multiple bitmap images.
  
−
==[[File:Component Icon 52dd90bd_fec9_4ee5_934c_e4b2297168a5.png|Image]] Bitmap Drawer component==
+
==Component Source Code==
−
A component to simplify the process of drawing bitmap images to a graphical display.
 
−
Stores the bitmap image inside a ROM look up table.
 
−
Compatible with 24-bit Bitmaps and Monochrome Bitmaps.
 
−
The gLCD object property specifies which LCD component to draw the bitmap to.
 
−
Use multiple BitmapDrawer components for multiple bitmap images.
 
  
−
==Examples==
+
Please click here for the component source code: [https://www.flowcode.co.uk/wikicopy/componentsource/FC_Comp_Source_GLCD_Menu_Unfinished.fcfx FC_Comp_Source_GLCD_Menu_Unfinished.fcfx]
−
Here is an example which loops drawing a monochrome and 24-bit bitmaps to the EBM001 graphical display.
 
−
{{Fcfile|BitmapDrawerDemo.fcfx|Bitmap Drawer Demo}}
 
−
The bitmap files used in the example can be found here.
 
  
−
[[File:BitmapDrawerDemo.zip]]
+
==Detailed description==
  
  
−
Here is another example which overlays several monochrome images to give the impression of animation. Shows a pair of eyes, which can randomly and momentarily look left, right or blink.
 
−
{{Fcfile|BitmapDrawerDemo2.fcfx|Bitmap Drawer Demo 2}}
 
−
The bitmap files used in the example can be found here.
 
  
−
[[File:BitmapDrawerDemo2.zip]]
 
  
−
==Downloadable macro reference==
 
  
−
===<span style="font-weight: normal;"><u><tt>Display_BMP_With_Transparency</tt></u></span>===
 
−
Draws the stored bitmap image onto the display at the coordinates specified.
 
  
−
The coordinates specify the upper left corner of the image.
 
  
−
Skips over any pixels containing the transparent colour.
 
  
−
'''Parameters'''
 
  
−
:[[Variable Types|UINT]] ''X''
 
  
−
:[[Variable Types|UINT]] ''Y''
 
  
−
:[[Variable Types|BYTE]] ''TransR''
 
−
::Red Colour Byte 0-255
 
  
−
:[[Variable Types|BYTE]] ''TransG''
 
−
::Green Colour Byte 0-255
 
  
−
:[[Variable Types|BYTE]] ''TransB''
+
''No detailed description exists yet for this component''
−
::Blue Colour Byte 0-255
 
  
 +
==Examples==
  
−
'''Return value'''
 
  
−
:''This call does not return a value''
 
  
  
−
===<span style="font-weight: normal;"><u><tt>GetHeight</tt></u></span>===
 
−
Returns the height of the loaded bitmap file in pixels.
 
  
−
'''Parameters'''
 
  
−
:''This macro has no parameters''
 
  
  
−
'''Return value'''
 
  
−
:[[Variable Types|UINT]]
 
  
  
−
===<span style="font-weight: normal;"><u><tt>GetWidth</tt></u></span>===
 
−
Returns the width of the loaded bitmap file in pixels.
 
  
−
'''Parameters'''
 
  
−
:''This macro has no parameters''
 
  
  
−
'''Return value'''
+
The graph creator XY component must be linked to the graphical LCD using the gLCD Object property.
  
−
:[[Variable Types|UINT]]
 
  
 +
[[File:GraphCreatorProp.jpg]]
  
−
===<span style="font-weight: normal;"><u><tt>Display_BMP</tt></u></span>===
 
−
Draws the bitmap image from ROM onto the display at the corrdinates X and Y.
 
  
−
'''Parameters'''
+
The X Coord, Y Coord, Width and Height component properties set the size and position of the graph on the gLCD.
  
−
:[[Variable Types|UINT]] ''X''
 
−
::X Axis coordinate, specifies the location of the left edge of the bitmap image
 
  
−
:[[Variable Types|UINT]] ''Y''
+
In the attached example the ADC component sets the input to the graph. Every 50ms a sample is taken and added to the graph.
−
::Y Axis coordinate, specifies the location of the top edge of the bitmap image
 
  
  
−
'''Return value'''
+
{{Fcfile|GraphCreatorXYDemo.fcfx|Graph Creator Demo}}
  
−
:''This call does not return a value''
 
  
 +
[[File:GraphCreatorXYDemo.jpg]]
  
  
−
==Simulation macro reference==
+
Any size of graph can be created. For efficiency it is best to try and stick to the following rules.
  
−
''This component does not contain any simulation macros''
+
* The width should be equal to or a multiple of the X input range - Min Value 0 to Max Value 255 = input range of 256
 +
* The height should be equal to or a multiple of the Y input range - Min Value 0 to Max Value 255 = input range of 256
 +
* If Show Border is enabled then Width and Height should be as above plus 2 to account for the border pixels
  
 +
==Downloadable macro reference==
  
−
==Property reference==
+
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
−
<span style="font-weight: normal;"><u>gLCD Object</u></span>
+
|-
 +
| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
 +
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Initialise'''
 +
|-
 +
| colspan="2" | Configures the menu and assigns the coordinates on the LCD.&nbsp;
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
 +
| width="90%" | X
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
 +
| width="90%" | Y
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
 +
| width="90%" | Width
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-u16-icon.png]] - UINT
 +
| width="90%" | Height
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-u8-icon.png]] - BYTE
 +
| width="90%" | Font
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 +
| width="90%" style="border-top: 2px solid #000;" | ''Return''
 +
|}
  
−
This property is of type ''Panel object'' and can be referenced with the variable name ''glcd_obj''.
 
  
−
Graphical LCD Object to draw the bitmap image to
 
  
−
<span style="font-weight: normal;"><u>Bitmap File</u></span>
 
  
−
This property is of type ''Filename'' and can be referenced with the variable name ''bitmap_file''.
+
==Property reference==
  
−
Bitmap file you wish to embed into the program
+
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
−
 
+
|-
−
<span style="font-weight: normal;"><u>File Colour Depth</u></span>
+
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
−
 
+
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''  
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''ColourDepth''.
+
|-
−
 
+
|-
−
Number of bits per pixel.
+
| width="10%" align="center" | [[File:Fc9-type-17-icon.png]]
−
 
+
| width="90%" | gLCD Object
−
Currently the component only supports bitmap files with 1-bit or 24-bit colour depth.
+
|-
−
 
+
| colspan="2" | Graphical LCD Object to draw the bitmap image to&nbsp;
−
<span style="font-weight: normal;"><u>File Length</u></span>
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''file_Len''.
+
| width="90%" | Max Items
−
 
+
|-
−
The number of bytes of ROM the bitmap file will consume.
+
| colspan="2" | Sets the maximum number of menu items available.&nbsp;
−
 
+
|-
−
You can vie wthe number of ROM bytes available on your target device using the Device Helper component.
+
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
−
 
+
| width="90%" | Max Item Length
−
<span style="font-weight: normal;"><u>File Width</u></span>
+
|-
−
 
+
| colspan="2" | Sets the maximum number of bytes to reserve for each menu item&nbsp;
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''FileWidth''.
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-16-icon.png]]
−
Width of the bitmap file in pixels
+
| width="90%" | MarkerStyle
−
 
+
|-
−
<span style="font-weight: normal;"><u>File Height</u></span>
+
| colspan="2" | &nbsp;
−
 
+
|-
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''FileHeight''.
+
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
−
 
+
| width="90%" | Foreground Colour
−
Height of the bitmap file in pixels
+
|-
−
 
+
| colspan="2" | &nbsp;
−
<span style="font-weight: normal;"><u>Data Offset</u></span>
+
|-
−
 
+
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''DataOffset''.
+
| width="90%" | Background Colour
−
 
+
|-
−
Offset in the file where the bitmap pixel data starts
+
| colspan="2" | &nbsp;
−
 
+
|-
−
<span style="font-weight: normal;"><u>ColourDisplay</u></span>
+
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
−
 
+
| width="90%" | ColourDisplay
−
This property is of type ''True or false'' and can be referenced with the variable name ''Colour_Display''.
+
|-
−
 
+
| colspan="2" | Automatically detects if the graphical LCD object is colour or monochrome&nbsp;
−
Automatically detects if the graphical LCD object is colour or monochrome
+
|}

Revision as of 17:47, 9 November 2022

Author Matrix TSL
Version 1.2
Category Displays: Graphical


Bitmap Drawer component

A component to simplify the process of drawing bitmap images to a graphical display. Stores the bitmap image inside a ROM look up table. Compatible with 24-bit Bitmaps and Monochrome Bitmaps. The gLCD object property specifies which LCD component to draw the bitmap to. Use multiple BitmapDrawer components for multiple bitmap images.

Component Source Code

Please click here for the component source code: FC_Comp_Source_GLCD_Menu_Unfinished.fcfx

Detailed description

No detailed description exists yet for this component

Examples

The graph creator XY component must be linked to the graphical LCD using the gLCD Object property.


GraphCreatorProp.jpg


The X Coord, Y Coord, Width and Height component properties set the size and position of the graph on the gLCD.


In the attached example the ADC component sets the input to the graph. Every 50ms a sample is taken and added to the graph.


FC6 Icon.png Graph Creator Demo


GraphCreatorXYDemo.jpg


Any size of graph can be created. For efficiency it is best to try and stick to the following rules.

  • The width should be equal to or a multiple of the X input range - Min Value 0 to Max Value 255 = input range of 256
  • The height should be equal to or a multiple of the Y input range - Min Value 0 to Max Value 255 = input range of 256
  • If Show Border is enabled then Width and Height should be as above plus 2 to account for the border pixels

Downloadable macro reference

Fc9-comp-macro.png Initialise
Configures the menu and assigns the coordinates on the LCD. 
Fc9-u16-icon.png - UINT X
 
Fc9-u16-icon.png - UINT Y
 
Fc9-u16-icon.png - UINT Width
 
Fc9-u16-icon.png - UINT Height
 
Fc9-u8-icon.png - BYTE Font
 
Fc9-void-icon.png - VOID Return



Property reference

Fc9-prop-icon.png Properties
Fc9-type-17-icon.png gLCD Object
Graphical LCD Object to draw the bitmap image to 
Fc9-type-21-icon.png Max Items
Sets the maximum number of menu items available. 
Fc9-type-21-icon.png Max Item Length
Sets the maximum number of bytes to reserve for each menu item 
Fc9-type-16-icon.png MarkerStyle
 
Fc9-type-1-icon.png Foreground Colour
 
Fc9-type-1-icon.png Background Colour
 
Fc9-type-7-icon.png ColourDisplay
Automatically detects if the graphical LCD object is colour or monochrome 
Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Bitmap_Drawer_(Displays:_Graphical)&oldid=28787"