Send-Data-2-Widget

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget Selector</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        .wheel-menu { display: flex; justify-content: center; margin: 20px; }
        .wheel-item { margin: 10px; padding: 15px; border: 1px solid #333; cursor: pointer; }
        #widgetContainer { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Choose Your Widget</h1>

    <div class="wheel-menu">
        <div class="wheel-item" onclick="loadWidget('aaa.html')">AAA Widget</div>
        <div class="wheel-item" onclick="loadWidget('bbb.html')">BBB Widget</div>
        <div class="wheel-item" onclick="loadWidget('ccc.html')">CCC Widget</div>
    </div>

    <div id="widgetContainer">
        <!-- Widget will be loaded here -->
    </div>

    <button onclick="sendData()">Send Data to Widget</button>

    <script>
        let iframe = null;
        let selectedWidget = null;

        function loadWidget(widgetFile) {
            const widgetContainer = document.getElementById("widgetContainer");
            if (iframe) widgetContainer.removeChild(iframe);

            iframe = document.createElement("iframe");
            iframe.src = "http://127.0.0.1:5000/widgets/" + widgetFile;
            iframe.width = "400";
            iframe.height = "200";
            widgetContainer.appendChild(iframe);

            selectedWidget = widgetFile;  // Store selected widget
        }

        function sendData() {
            if (iframe) {
                let dataToSend = {};

                // Different data for different widgets
                if (selectedWidget === "aaa.html") {
                    dataToSend = { title: "AAA Loaded!", content: "AAA Widget Special Data" };
                } else if (selectedWidget === "bbb.html") {
                    dataToSend = { title: "BBB Active!", content: "BBB Widget is...