Flixe: Gateway to Artistic Exploration

TRON Hackathon Hackathon Season 6
143

Thanks for the kind words, @jacksimmons ! Here’s how it works:

  1. Connection Instructions: When an Imperio art is uploaded, it includes JavaScript connection instructions that specify which parameters can be customized and how they should be updated.

    const connectionInstructions = {
  params: [
    { name: "color", type: "color", defaultValue: "#ff0000", label: "Background Color" },
    // Additional parameters can be added here
  ],
  updateFunction: "updateDynamicContent",
};

  2. Parameter Mapping: These parameters are linked to UI controls on the platform. For instance, a color picker in the UI is connected to the ‘color’ parameter.

  3. Real-time Updates: When a user interacts with these controls, the platform captures the input and calls the corresponding update function, defined in the Imperio art’s JavaScript code.

    window.updateDynamicContent = (paramName, value) => {
  if (paramName === "color") {
    document.getElementById("dynamicContent").style.backgroundColor = value;
  }
  // More conditions for other parameters
};

  4. Rendering Changes: The update function modifies the DOM elements in real-time, reflecting the changes immediately.

  5. Exposing Instructions: The platform exposes these connection instructions so external applications can interact with the dynamic art.

    window.getConnectionInstructions = () => connectionInstructions;

This process allows for dynamic interaction with the art, providing a seamless and interactive user experience.

1 Like