SteveT: Removed the incorrect into about fonts

2026-04-27T10:32:06Z

Removed the incorrect into about fonts

Wiki bot: Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;..."

2024-08-12T09:59:43Z

Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;..."

New page

{| style="width:50%"
|-
| width="20%" style="color:gray;" | Author
| MatrixTSL
|-
| width="20%" style="color:gray;" | Version
| 0.1
|-
| width="20%" style="color:gray;" | Category
| Web Primitives
|}

==ImageUrl component==
Creates an image that opens a web page when clicked.

==Detailed description==

The font component provides a series of bitmap glyphs to the graphical display components and is built into these components.

Each font can be capable of providing a full character set or just a set of numeric characters, these latter being marked with the word Number.

===Custom Fonts===

Custom fonts can be created using the Custom option and providing a link to a file generated by a tool called The Dot Factory.

To do this you must first download and install the dot factory on your computer.

[[File:TheDotFactory.zip]]

http://www.eran.io/the-dot-factory-an-lcd-font-and-image-generator/

Once the software is installed, run the software and click the spanner (wrench) icon next to the Preset. Configure the software like this.

[[file:DotFactorySettings.jpg]]

For a fixed width font like courier new you can change the Width (x) setting from Tightest to Fixed.

Click Apply and then click the folder next to the Font option to set the font type and size. Click OK when done.

In the main text window underneath the Font you can specify the characters you will create glyphs for. This can be reduced to ensure you only create glyphs for characters you are going to be using in your program.

For a complete font glyph set similar to other Flowcode fonts copy and paste the following into the text field.

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

Once you're done click the Generate button and then click File and Save as files, save to a location on your PC ideally with your Flowcode project file.

In Flowcode point the custom file to the .c file generated by the dot factory.

The new custom font should now simulate and work on embedded hardware. The Flowcode file will need to retain the link to the font .c file so be sure to keep both files when transferring projects.

==Examples==

''<span style="color:red;">No additional examples</span>''

==Macro reference==

===SetParameters===
{| 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;" | '''SetParameters'''
|-
| colspan="2" | Set the parameters to append to the target URL link. (e.g. "?param1=5&param2=red") 
|-
|-
| width="10%" align="center" | [[File:Fc9-string-icon.png]] - STRING
| width="90%" | s
|-
| colspan="2" | Text to set 
|-
| 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''
|}

===SetURL===
{| 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;" | '''SetURL'''
|-
| colspan="2" | Set the target URL for the link 
|-
|-
| width="10%" align="center" | [[File:Fc9-string-icon.png]] - STRING
| width="90%" | s
|-
| colspan="2" | Text to set 
|-
| 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''
|}

==Property reference==

{| 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-13-icon.png]]
| width="90%" | Filename
|-
| colspan="2" | The location of an external image file 
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | AltText
|-
| colspan="2" |  
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | URL
|-
| colspan="2" | The target URL for this image 
|-
| width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
| width="90%" | Open in new tab
|-
| colspan="2" | Select true if the link should open in a new tab 
|-
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
|-
|-
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
| width="90%" | Custom Attributes
|-
| colspan="2" |  
|}

==Component Source Code==

Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_ImageUrl.fcsx FC_Comp_Source_WEBEXP_ImageUrl.fcsx]

Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_ImageUrl.fcsx FC_Comp_Source_WEBEXP_ImageUrl.fcsx]

@@ Line 17: / Line 17: @@
 ==Detailed description==
-The font component provides a series of bitmap glyphs to the graphical display components and is built into these components.
+''No detailed description exists yet for this component''
 ==Examples==

Component: ImageUrl ( Web Primitives) - Revision history

SteveT: Removed the incorrect into about fonts

Wiki bot: Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;..."