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

From Flowcode Help
Jump to navigationJump to search
 
(19 intermediate revisions by 2 users not shown)
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.0 (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.
 +
 +
==Component Source Code==
 +
 +
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_Lib_GLCD_Menu_Unfinished.fcfx FC_Comp_Source_Lib_GLCD_Menu_Unfinished.fcfx]
 +
 +
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_Lib_GLCD_Menu_Unfinished.fcfx FC_Comp_Source_Lib_GLCD_Menu_Unfinished.fcfx]
 +
 +
==Detailed description==
 +
 +
  
  
  
−
==[[File:Component Icon 52dd90bd_fec9_4ee5_934c_e4b2297168a5.png|Image]] 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.
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
''No detailed description exists yet for this component''
  
 
==Examples==
 
==Examples==
−
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]]
 
  
  
−
==Downloadable macro reference==
 
  
−
===<span style="font-weight: normal;"><u><tt>Display_BMP</tt></u></span>===
 
−
''<span style="color:red;">No additional information</span>''
 
  
  
  
−
'''Parameters'''
 
  
−
:[[Variable Types|UINT]] ''X''
 
  
−
:[[Variable Types|UINT]] ''Y''
 
  
  
−
'''Return value'''
 
  
−
:''This call does not return a value''
 
  
  
  
−
==Simulation macro reference==
 
  
−
''This component does not contain any simulation macros''
 
  
  
−
==Property reference==
 
−
<span style="font-weight: normal;"><u>gLCD Object</u></span>
 
  
−
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''.
 
  
−
Bitmap file you wish to embed into the program
 
  
−
<span style="font-weight: normal;"><u>File Length</u></span>
+
The graph creator XY component must be linked to the graphical LCD using the gLCD Object property.
 +
 
 +
 
 +
[[File: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.
 +
 
 +
 
 +
{{Fcfile|GraphCreatorXYDemo.fcfx|Graph Creator Demo}}
 +
 
 +
 
 +
[[File: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
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
−
This property is of type ''Unsigned integer'' and can be referenced with the variable name ''file_Len''.
+
==Macro reference==
  
−
Bitmap file size in bytes
+
===Initialise===
 +
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
 +
|-
 +
| 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''
 +
|}
  
−
<span style="font-weight: normal;"><u>ColourDisplay</u></span>
 
  
−
This property is of type ''True or false'' and can be referenced with the variable name ''Colour_Display''.
+
==Property reference==
  
−
Automatically detects if the graphical LCD object is colour or monochrome
+
{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
 +
|-
 +
| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
 +
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
 +
|-
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-17-icon.png]]
 +
| width="90%" | gLCD Object
 +
|-
 +
| colspan="2" | Graphical LCD Object to draw the bitmap image to&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 +
| width="90%" | Max Items
 +
|-
 +
| colspan="2" | Sets the maximum number of menu items available.&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 +
| width="90%" | Max Item Length
 +
|-
 +
| colspan="2" | Sets the maximum number of bytes to reserve for each menu item&nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-16-icon.png]]
 +
| width="90%" | MarkerStyle
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
 +
| width="90%" | Foreground Colour
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-1-icon.png]]
 +
| width="90%" | Background Colour
 +
|-
 +
| colspan="2" | &nbsp;
 +
|-
 +
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 +
| width="90%" | ColourDisplay
 +
|-
 +
| colspan="2" | Automatically detects if the graphical LCD object is colour or monochrome&nbsp;
 +
|}

Latest revision as of 10:26, 20 October 2023

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 to download the component source project: FC_Comp_Source_Lib_GLCD_Menu_Unfinished.fcfx

Please click here to view the component source code (Beta): FC_Comp_Source_Lib_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







Macro reference

Initialise

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=39627"