<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>OPC UA with Popup</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .Hotspot {
            background-color: #626365;
            color: white;
            border: none;
            padding: 8px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

        .Hotspot:hover {
            background-color: #0056b3;
        }

        .info-card {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            width: 300px;
            padding: 20px;
            z-index: 1000;
            display: none;
        }

        .info-card h3 {
            margin-top: 0;
            font-size: 18px;
            color: #333;
        }

        .info-card .info {
            margin-bottom: 10px;
            font-size: 14px;
            color: #555;
        }

        .info-card .info span {
            font-weight: bold;
            color: #000;
        }

        .info-card .btn {
            display: inline-block;
            padding: 10px 15px;
            margin: 5px 0;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .info-card .close-btn {
            background-color: #f44336;
            color: white;
        }

        .info-card .send-btn {
            background-color: #4caf50;
            color: white;
        }

        .info-card .close-btn:hover {
            background-color: #d32f2f;
        }

        .info-card .send-btn:hover {
            background-color: #388e3c;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }

        .Hotspot.red {
             background-color: red;
        }
        @keyframes blink {
    0% {
        background-color: red;
    }
    50% {
        background-color: transparent;
    }
    100% {
        background-color: red;
    }
}

.Hotspot.blink {
    animation: blink 1s infinite;
}

    </style>
</head>

<body>


    <script>
        document.addEventListener('keydown', (event) => {
          if (event.key === "F12" || 
              (event.ctrlKey && event.shiftKey && event.key === "I") || 
              (event.ctrlKey && event.key === "U")) {
            event.preventDefault();
          }
        });
      </script>
    <script>
        setInterval(function() {
          if (window.outerWidth - window.innerWidth > 100 || window.outerHeight - window.innerHeight > 100) {
            window.location.href = "http://geniustwin.ir/"; 
          }
        }, 500);
      </script>

    <script type="module" src="GeniusTwin.js"></script>
  <model-viewer src="SPH6_WellHead_withoutlogo.glb" ar ar-modes="webxr scene-viewer quick-look"  touch-action="pan-y" camera-controls tone-mapping="neutral" poster="poster.webp" shadow-intensity="1" exposure="1" style="background-color: black;">
    <button class="Hotspot" data-value="100-56-PG-008" slot="hotspot-2" data-name="Needle Valve" data-tagname="PT" data-tagid="100-56-PG-008" data-url="OPC UA"    data-position="0.013580323257102416m 5.766250623535058m 0.005237655188007714m" data-normal="-0.9999999999999963m 0m 8.742277657347553e-8m" data-visibility-attribute="visible"    >
        <div class="HotspotAnnotation">Needle Valve</div>
        <button class="Hotspot" slot="hotspot-3" data-name="Swab Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-012" data-url="OPC UA"   data-position="-0.2464141848115532m 5.046310758623807m -0.007810217184765544m" data-normal="-0.9999999999999962m 0m 8.742277657347553e-8m" data-visibility-attribute="visible">
            <div class="HotspotAnnotation">Swab Valve</div>
          </button>
          <button class="Hotspot" data-value="100-56-GT-013" slot="hotspot-4" data-name="Kill Wing Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-013" data-url="OPC UA"   data-position="-0.002398790084323643m 4.841450214385986m -0.4973191208231078m" data-normal="0m 1m 0m" data-visibility-attribute="visible">
            <div class="HotspotAnnotation">Kill Wing Valve</div>
          </button>
          <button class="Hotspot" data-value="100-56-GT-014" slot="hotspot-5" data-name="Flow Wing Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-014" data-url="OPC UA"   data-position="0.02670474880064022m 4.841450214385986m 0.49649812867520715m" data-normal="0m 1m 0m" data-visibility-attribute="visible">
              <div class="HotspotAnnotation">Flow Wing Valve</div>
            </button>
          </button><button class="Hotspot" data-value="100-56-SSV-001" slot="hotspot-10"   data-name="SSV" data-tagname="SSV" data-tagid="100-56-SSV-001" data-url="OPC UA" data-position="-1.1214141836001348m 4.495142962684853m 0.004978828115191514m" data-normal="-0.9999999999999962m 0m 8.742277657347553e-8m" data-visibility-attribute="visible">
            <div class="HotspotAnnotation">SSV</div>
        </button>
      
          <button class="Hotspot" data-value="100-56-GT-002" slot="hotspot-6" data-name="Upper Master Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-002" data-url="OPC UA" data-position="-0.19641113536808108m 4.230081526368377m -0.03533596359517033m" data-normal="-0.9999999999999962m 0m 8.742277657347553e-8m" data-visibility-attribute="visible">
              <div class="HotspotAnnotation">Upper Master Valve</div>
          </button>
          <button class="Hotspot" data-value="100-56-GT-001" slot="hotspot-7" data-name="Lower Master Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-001" data-url="OPC UA" data-position="-0.19641113558916534m 3.8685647086536474m -0.03784960405741792m" data-normal="-0.9999999999999962m 0m 8.742277657347553e-8m" data-visibility-attribute="visible">
              <div class="HotspotAnnotation">Lower Master Valve</div>
          </button>
          <button class="Hotspot"  data-value="100-56-GT-003" slot="hotspot-8" data-name="Casing Annulus Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-003" data-url="OPC UA" data-position="-0.5894795204752454m 3.0497851371765137m -0.034533410211610716m" data-normal="0m 1m 0m" data-visibility-attribute="visible">
              <div class="HotspotAnnotation">Casing Annulus Valve</div>
          </button>
          <button class="Hotspot" data-value="100-56-GT-004" slot="hotspot-9" data-name="Casing Annulus Valve" data-tagname="Gate Valve" data-tagid="100-56-GT-004" data-url="OPC UA" data-position="0.622594360263494m 3.0497851371765137m -0.00951371365482219m" data-normal="0m 1m 0m" data-visibility-attribute="visible">
              <div class="HotspotAnnotation">Casing Annulus Valve</div>
          </button>
      </button>
    </model-viewer>


    <div class="overlay"></div>

    <div class="info-card" id="infoCard">
        <h3>Details</h3>
        <div class="info"><span>Name:</span> <span id="infoName"></span></div>
        <div class="info"><span>Tag Name:</span> <span id="infoTagName"></span></div>
        <div class="info"><span>Tag ID:</span> <span id="infoTagID"></span></div>
        <div class="info"><span>URL:</span> <span id="infoURL"></span></div>
        <h3>Send Value to OPC UA</h3>
        <div class="info"><span>Value:</span> <span id="infoValue"></span></div>
        <button class="btn close-btn" id="closeBtn">Close</button>
        <button class="btn send-btn" id="sendBtn">Send</button>
    </div>

    <script>
        const hotspots = document.querySelectorAll('.Hotspot');
        const infoCard = document.getElementById('infoCard');
        const overlay = document.querySelector('.overlay');
        const closeBtn = document.getElementById('closeBtn');
        const sendBtn = document.getElementById('sendBtn');
        const infoValue = document.getElementById('infoValue');

        let selectedValue = '';

        hotspots.forEach(button => {
            button.addEventListener('click', () => {
                const name = button.dataset.name;
        const tagName = button.dataset.tagname;
        const tagID = button.dataset.tagid;
        const url = button.dataset.url;

        document.getElementById('infoName').textContent = name;
        document.getElementById('infoTagName').textContent = tagName;
        document.getElementById('infoTagID').textContent = tagID;
        document.getElementById('infoURL').textContent = url;

        infoCard.style.display = 'block';
        overlay.style.display = 'block';
                selectedValue = button.dataset.value;
                infoValue.textContent = selectedValue;

                infoCard.style.display = 'block';
                overlay.style.display = 'block';
            });
        });

        closeBtn.addEventListener('click', () => {
            infoCard.style.display = 'none';
            overlay.style.display = 'none';
        });

        overlay.addEventListener('click', () => {
            infoCard.style.display = 'none';
            overlay.style.display = 'none';
        });

        sendBtn.addEventListener('click', async () => {
            const serverUrl = 'opc.tcp://DESKTOP-B2DLUT9:53530/OPCUA/SimulationServer';
            const nodeId = 'ns=3;s=1082';

            try {
                const response = await fetch('http://localhost:4004/opcua', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        serverUrl: serverUrl,
                        nodeId: nodeId,
                        value: selectedValue,
                    }),
                });

                if (response.ok) {
                    alert(`Value "${selectedValue}" sent to OPC UA server successfully!`);
                } else {
                    alert('Failed to send value to OPC UA server.');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred while communicating with the OPC UA server.');
            }

            infoCard.style.display = 'none';
            overlay.style.display = 'none';
        });
    </script>


<script>
async function updateButtonColors() {
    try {
        const response = await fetch('http://localhost:4004/opcua/values');
        const data = await response.json();

        hotspots.forEach(button => {
            const tagId = `ns=3;s=${button.dataset.tagid}`; 
            const value = data[tagId];
            console.log(`Checking Tag ID: ${tagId}, Value: ${value}`);

            if (value && value.trim().toUpperCase() === "ON") {
                button.classList.add('blink'); 
            } else {
                button.classList.remove('blink'); 
            }
        });
    } catch (error) {
        console.error("Error fetching values:", error);
    }
}

setInterval(updateButtonColors, 5000);


</script>

</body>

</html>