Ask AI
Skip to main content

Add QR Code

Function: Add QR Code​

This function allows you to embed a QR code directly onto an existing Image UI element within your application. You can specify the content the QR code should represent, such as a website link, text, or contact information, and customize its appearance.

Input,

  • Element (PART, Required): The specific Image UI element on your page where you want the QR code to appear.
  • QR content (STRING, Required): The information you want to encode into the QR code. This could be a URL, a piece of text, an email address, etc.
  • Advanced (BOOLEAN, Optional): Check this box if you want to access and customize additional settings for the QR code's appearance and generation.
    • Border (NUMBER, Optional, visible if 'Advanced' is checked): Adjusts the empty space around the QR code. A higher number means a wider border.
    • Light color (STRING, Optional, visible if 'Advanced' is checked): Sets the color for the "light" or background parts of the QR code. You can use color names (e.g., "white") or hexadecimal codes (e.g., "#FFFFFF").
    • Dark color (STRING, Optional, visible if 'Advanced' is checked): Sets the color for the "dark" or foreground parts of the QR code. You can use color names (e.g., "black") or hexadecimal codes (e.g., "#000000").
    • Version range (min) (NUMBER, Optional, visible if 'Advanced' is checked): Specifies the minimum complexity (version) of the QR code. Higher versions can store more data but are larger.
    • Version range (max) (NUMBER, Optional, visible if 'Advanced' is checked): Specifies the maximum complexity (version) of the QR code.

Output,

The provided Image UI element is updated to display the newly generated QR code. There is no separate output variable; the change happens directly on the selected image element.

Execution Flow,

Real-Life Examples,

Imagine you have an "About Us" page and want to add a QR code that links directly to your company's main website.

  • Inputs:
    • Element: Image_CompanyLogo (an existing image element on your page)
    • QR content: https://www.yourcompany.com
    • Advanced: false (unchecked)
  • Result: The Image_CompanyLogo element on your page will now display a standard black and white QR code that, when scanned, directs users to https://www.yourcompany.com.

Example 2: Create a Branded QR Code for an Event Invitation​

You're creating an event invitation and want a QR code for attendees to RSVP, matching your event's color scheme.

  • Inputs:
    • Element: Image_EventBanner (an image element displaying your event banner)
    • QR content: https://www.yourapp.com/event/rsvp/123
    • Advanced: true (checked)
    • Border: 2
    • Light color: #F0F8FF (AliceBlue)
    • Dark color: #8B0000 (DarkRed)
  • Result: The Image_EventBanner will be updated with a QR code that has a subtle border, a light blue background, and dark red squares, linking to your RSVP page.

Example 3: Embed a Product ID for Inventory Management​

For an internal inventory application, you want to quickly add QR codes to product images, encoding their unique product IDs.

  • Inputs:
    • Element: Image_ProductPhoto (an image element displaying a product)
    • QR content: PROD-XYZ-7890
    • Advanced: true (checked)
    • Version range (min): 5
    • Version range (max): 10
  • Result: The Image_ProductPhoto will now include a QR code encoding "PROD-XYZ-7890". By specifying a version range, you ensure the QR code is generated within a desired complexity, which can be useful for specific scanner capabilities or visual requirements.