Widgets/Transformer

Object to Text Widget

Object to Text Widget

A "Transformer" type widget. Object to Text Widget converts any input data type into a string representation. This widget is particularly useful when you need to:

  • Display data in text format
  • Process data as strings
  • Convert complex data types into a readable format
  • Prepare data for text-based operations
  • Convert binary data and images to base64 strings

 

Inputs

  • object (DataType: Number, String, ArrayBuffer, Array, Boolean, JsonObj, Rect, Point, ImageData) Accepts various data types as input. The widget will automatically convert the input into its string representation following specific rules for each data type.

Outputs

  • text (DataType: String) Outputs the string representation of the input data. The conversion follows these rules:

    • Numbers are converted to their decimal string representation
    • Booleans are converted to "true" or "false"
    • Objects and arrays are converted to their JSON string representation
    • Null and undefined are converted to "null" and "undefined" respectively
    • Binary data (ArrayBuffer) is converted to base64 strings
    • Images (ImageData) are converted to PNG base64 strings
    • BigInt values are converted to their string representation

  • error (DataType: String) Outputs error messages when stringification fails, such as:

    • Circular reference errors in objects
    • PNG conversion errors for images
    • Other stringification failures

 

Converting an Object to a String

This example demonstrates how to convert a complex JavaScript object into a string representation:


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Button Widget triggers the workflow
  2. The Sequence Widget coordinates the data flow:
    • Triggers the Text Widgets to output their values (name: "Jhoan", age: 35, status: "Active")
    • Triggers the Object Widget to initialize and receive the values
  3. The Text Widgets transmit their values to the Object Widget through the corresponding input ports.
  4. The Object Widget receives the values and creates an object with the predefined fields: name, age, and status
  5. The Object Widget transmits the created object to the Object to Text Widget through the object input port
  6. The Object to Text Widget receives the object and converts it into a string representation
  7. The Object to Text Widget transmits the resulting string to the Text Widget through the setText input port, displaying the JSON structure preserved in string format

 

📌 Important Notes

  • The video demonstration use the Image Drop service to load images dynamically. If you want to replicate the example exactly as shown in the video, you'll need to install and use this service. *In this example, the draggable snippet uses a Custom Widget called Sample Image instead of the Image Drop service, allowing the demo to run quickly in Logic Mapper if Image Drop is not yet installed.

 

Examples

Converting an Image to a String

This example shows how to convert an image to a base64 string representation


Drag the example onto the workspace to explore and experiment!



In this example:

  1. An Image is provided to the Object To Text widget
  2. The Object To Text widget receives the image and converts it to a base64 string
  3. The resulting base64 string is displayed in a Text widget
  4. The base64 string can be used to reconstruct the image or store it in a text format

 

📌 Additional Notes

  • For binary data like images, the string output will be in base64 format, which can be quite long.
  • When converting numbers, the widget preserves the full precision of the original number.
  • BigInt values are automatically converted to their string representation to prevent precision loss.

 

Glossary

  • ArrayBuffer

    A JavaScript object used to represent a generic, fixed-length raw binary data buffer.

  • Base64

    A binary-to-text encoding scheme that represents binary data in an ASCII string format using 64 different characters.

  • BigInt

    A JavaScript primitive data type that can represent integers with arbitrary precision, beyond the safe integer limit of regular numbers.

  • Custom Widget (Widget Group)

    A powerful tool that allows users to create reusable widgets by grouping other widgets together. Custom widgets enable encapsulation of complex workflows into reusable components with input ports, output ports, and custom settings. They can be created by right-clicking the workspace and selecting "Create custom widget", then defining internal logic in a dark-background workspace. Custom widgets are saved in the "Custom Widgets" → "My Widgets" drawer and can be shared through collections, making them ideal for creating domain-specific solutions and extending Kemu's functionality.

  • Drop Images Service

    A Hub Service that allows you to store multiple images and use them as data for other widgets. It supports drag-and-drop functionality for adding images and provides controls for navigating through the stored images. It outputs the currently selected image data as ImageData to be used in other parts of your recipe.

  • ImageData

    A JavaScript object that represents the underlying pixel data of an area of a canvas element.

  • JSON

    JavaScript Object Notation, a lightweight data interchange format that uses human-readable text to store and transmit data objects.

  • Logic Mapper

    Kemu's visual programming interface where users can drag and drop widgets to create workflows and connect them together to process data.