{"id":137347,"date":"2025-11-13T16:48:36","date_gmt":"2025-11-13T16:48:36","guid":{"rendered":"https:\/\/www.escueladesurfsopelana.com\/?p=137347"},"modified":"2025-11-13T16:59:15","modified_gmt":"2025-11-13T16:59:15","slug":"arrigunaga-webcam","status":"publish","type":"post","link":"https:\/\/www.escueladesurfsopelana.com\/en\/arrigunaga-webcam\/","title":{"rendered":"Arrigunaga Webcam"},"content":{"rendered":"    <style>\n    \/* Estilos generales *\/\n    .kostasystem-container {\n        max-width: 100%;\n        margin: 0 auto;\n    }\n    .kostasystem-titulo-principal {\n        text-align: center;\n        margin-bottom: 20px;\n        font-size: 24px;\n        font-weight: bold;\n    }\n    \n    \/* Estilos para las c\u00e1maras principales - vertical *\/\n    .kostasystem-camaras-grupo {\n        display: flex;\n        flex-direction: column;\n        gap: 30px;\n        margin-bottom: 40px;\n    }\n    .kostasystem-camara-container {\n        width: 100%;\n        position: relative;\n        overflow: hidden;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    .kostasystem-camara-titulo {\n        background-color: rgba(0,0,0,0.7);\n        color: white;\n        font-weight: bold;\n        padding: 8px 15px;\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 10;\n        border-bottom-right-radius: 8px;\n    }\n    .kostasystem-camara-layers {\n        position: relative;\n        width: 100%;\n        height: auto;\n    }\n    .kostasystem-camara-layer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        transition: opacity 0.5s ease-in-out;\n    }\n    .kostasystem-camara-layer.active {\n        z-index: 2;\n        opacity: 1;\n    }\n    .kostasystem-camara-layer.inactive {\n        z-index: 1;\n        opacity: 0;\n    }\n    .kostasystem-camara-base {\n        position: relative;\n        z-index: 0;\n        width: 100%;\n        display: block;\n    }\n    \n    \/* Estilos para el historial - vertical *\/\n    .kostasystem-historial-container {\n        margin-top: 40px;\n        padding-top: 20px;\n        border-top: 1px solid #eee;\n    }\n    .kostasystem-historial-titulo {\n        text-align: center;\n        font-size: 20px;\n        font-weight: bold;\n        margin-bottom: 20px;\n        padding-bottom: 10px;\n        border-bottom: 2px solid #f5f5f5;\n    }\n    .kostasystem-historial-seccion {\n        margin-bottom: 30px;\n    }\n    .kostasystem-historial-subtitulo {\n        font-size: 18px;\n        margin-bottom: 15px;\n        background-color: #f5f5f5;\n        padding: 8px 15px;\n        border-radius: 5px;\n    }\n    .kostasystem-historial-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n        gap: 10px;\n        margin-bottom: 30px;\n    }\n    .kostasystem-historial-item {\n        position: relative;\n        border: 1px solid #ddd;\n        border-radius: 5px;\n        overflow: hidden;\n        background: #f9f9f9;\n    }\n    .kostasystem-historial-imagen {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n    .kostasystem-historial-tiempo {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: rgba(0,0,0,0.7);\n        color: white;\n        font-size: 11px;\n        padding: 5px;\n        text-align: center;\n    }\n    \n    \/* Otros estilos *\/\n    .kostasystem-estado {\n        margin-top: 10px;\n        color: #ff0000;\n        font-style: italic;\n        text-align: center;\n    }\n    .kostasystem-timestamp {\n        margin-top: 8px;\n        margin-bottom: 5px;\n        font-size: 13px;\n        color: #666;\n        text-align: center;\n        background-color: #f9f9f9;\n        padding: 5px;\n        border-radius: 4px;\n    }\n    \n    \/* Media queries para responsividad *\/\n    @media (min-width: 768px) {\n        .kostasystem-historial-grid {\n            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n        }\n    }\n    <\/style>\n\n    <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62\" class=\"kostasystem-container\">\n                    <h2 class=\"kostasystem-titulo-principal\">Arrigunaga<\/h2>\n                \n        <div class=\"kostasystem-camaras-grupo\">\n                            <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_container1\" class=\"kostasystem-camara-container\">\n                    <div class=\"kostasystem-camara-titulo\">C\u00e1mara 1<\/div>\n                    <a href=\"https:\/\/www.kostasystem.com\/wp-content\/uploads\/irudiak\/arrigunaga\/camara1_snap.jpeg\" target=\"_blank\" rel=\"noopener\">\n                        <!-- Imagen base para establecer dimensiones -->\n                        <img decoding=\"async\" class=\"kostasystem-camara-base\" \n                             src=\"https:\/\/www.kostasystem.com\/wp-content\/uploads\/irudiak\/arrigunaga\/camara1_snap.jpeg\" \n                             alt=\"Webcam Arrigunaga 1\" \/>\n                        \n                        <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_layers1\" class=\"kostasystem-camara-layers\">\n                            <!-- Las capas de im\u00e1genes se agregar\u00e1n aqu\u00ed v\u00eda JavaScript -->\n                        <\/div>\n                    <\/a>\n                    \n                    <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_timestamp1\" class=\"kostasystem-timestamp\"><\/div>\n                <\/div>\n                            <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_container2\" class=\"kostasystem-camara-container\">\n                    <div class=\"kostasystem-camara-titulo\">C\u00e1mara 2<\/div>\n                    <a href=\"https:\/\/www.kostasystem.com\/wp-content\/uploads\/irudiak\/arrigunaga\/camara2_snap.jpeg\" target=\"_blank\" rel=\"noopener\">\n                        <!-- Imagen base para establecer dimensiones -->\n                        <img decoding=\"async\" class=\"kostasystem-camara-base\" \n                             src=\"https:\/\/www.kostasystem.com\/wp-content\/uploads\/irudiak\/arrigunaga\/camara2_snap.jpeg\" \n                             alt=\"Webcam Arrigunaga 2\" \/>\n                        \n                        <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_layers2\" class=\"kostasystem-camara-layers\">\n                            <!-- Las capas de im\u00e1genes se agregar\u00e1n aqu\u00ed v\u00eda JavaScript -->\n                        <\/div>\n                    <\/a>\n                    \n                    <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_timestamp2\" class=\"kostasystem-timestamp\"><\/div>\n                <\/div>\n                    <\/div>\n        \n                \n        <div id=\"kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_estado\" class=\"kostasystem-estado\"><\/div>\n    <\/div>\n    \n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ Configuraci\u00f3n\n        const container_id = 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62';\n        const config = {\n            camaras: [\n                                {\n                    num: 1,\n                    container: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_container1',\n                    layers: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_layers1',\n                    url: 'https:\/\/www.kostasystem.com\/wp-content\/uploads\/irudiak\/arrigunaga\/camara1_snap.jpeg',\n                    timestamp: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_timestamp1',\n                    currentLayer: 0,\n                    layersCreated: false,\n                    historial: {\n                        activo: false,\n                        container: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_historial_grid_1',\n                        items: [],\n                        lastHourProcessed: null\n                    }\n                },\n                                {\n                    num: 2,\n                    container: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_container2',\n                    layers: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_layers2',\n                    url: 'https:\/\/www.kostasystem.com\/wp-content\/uploads\/irudiak\/arrigunaga\/camara2_snap.jpeg',\n                    timestamp: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_timestamp2',\n                    currentLayer: 0,\n                    layersCreated: false,\n                    historial: {\n                        activo: false,\n                        container: 'kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_historial_grid_2',\n                        items: [],\n                        lastHourProcessed: null\n                    }\n                },\n                            ],\n            intervalo: 5000,\n            reintentos: {\n                tiempo: 3000,\n                max: 5\n            },\n            historial: {\n                activo: false,\n                ambasCamaras: false,\n                maxItems: 8,\n                minDiffHoras: 1 \/\/ Diferencia m\u00ednima en horas para a\u00f1adir al historial\n            }\n        };\n\n        const estadoConexion = document.getElementById('kostasystem_arrigunaga_aaa2f0f5fe9d58e18451b6207f988a62_estado');\n        \n        \/\/ Funci\u00f3n para formatear una fecha\n        function formatearFecha(date) {\n            const dia = date.getDate().toString().padStart(2, '0');\n            const mes = (date.getMonth() + 1).toString().padStart(2, '0');\n            const anio = date.getFullYear();\n            const hora = date.getHours().toString().padStart(2, '0');\n            const minutos = date.getMinutes().toString().padStart(2, '0');\n            \n            return `${dia}\/${mes}\/${anio} ${hora}:${minutos}`;\n        }\n        \n        \/\/ Inicializaci\u00f3n\n        function inicializar() {\n            \/\/ Crear las capas iniciales para cada c\u00e1mara\n            config.camaras.forEach(camara => {\n                const layersElement = document.getElementById(camara.layers);\n                if (!layersElement) return;\n                \n                \/\/ Creamos dos capas para alternar entre ellas\n                const layer1 = document.createElement('img');\n                layer1.className = 'kostasystem-camara-layer active';\n                layer1.src = camara.url + '?t=' + Date.now();\n                layer1.alt = 'Webcam Layer 1';\n                \n                const layer2 = document.createElement('img');\n                layer2.className = 'kostasystem-camara-layer inactive';\n                layer2.src = camara.url + '?t=' + Date.now();\n                layer2.alt = 'Webcam Layer 2';\n                \n                layersElement.appendChild(layer1);\n                layersElement.appendChild(layer2);\n                \n                camara.layersCreated = true;\n                \n                \/\/ Actualizar timestamp\n                const timestampElement = document.getElementById(camara.timestamp);\n                if (timestampElement) {\n                    const ahora = new Date();\n                    timestampElement.textContent = '\u00daltima actualizaci\u00f3n: ' + formatearFecha(ahora);\n                }\n                \n                \/\/ Preparar historial si est\u00e1 habilitado\n                if (config.historial.activo && \n                    (config.historial.ambasCamaras || camara.num === config.camaras[0].num)) {\n                    const ahora = new Date();\n                    const primerItem = {\n                        src: camara.url + '?t=' + Date.now(),\n                        timestamp: Date.now(),\n                        fecha: ahora,\n                        hora: ahora.getHours()\n                    };\n                    camara.historial.items.push(primerItem);\n                    camara.historial.lastHourProcessed = ahora.getHours();\n                    actualizarHistorialVisual(camara);\n                }\n            });\n            \n            \/\/ Comenzar actualizaciones\n            setTimeout(() => {\n                iniciarActualizaciones();\n            }, 1000); \/\/ Esperamos 1 segundo para la carga inicial\n        }\n        \n        \/\/ Funci\u00f3n para actualizar el historial visual de una c\u00e1mara espec\u00edfica\n        function actualizarHistorialVisual(camara) {\n            if (!config.historial.activo) return;\n            if (!camara.historial.activo) return;\n            \n            const historialElement = document.getElementById(camara.historial.container);\n            if (!historialElement) return;\n            \n            \/\/ Limpiar el historial visual actual\n            historialElement.innerHTML = '';\n            \n            \/\/ Mostrar los elementos del historial (limitados al m\u00e1ximo configurado)\n            const itemsToShow = camara.historial.items.slice(0, config.historial.maxItems);\n            \n            itemsToShow.forEach((item, index) => {\n                const itemElement = document.createElement('div');\n                itemElement.className = 'kostasystem-historial-item';\n                \n                \/\/ Crear enlace para hacer la imagen clicable\n                const enlace = document.createElement('a');\n                enlace.href = item.src;\n                enlace.target = '_blank';\n                enlace.rel = 'noopener';\n                \n                const img = document.createElement('img');\n                img.className = 'kostasystem-historial-imagen';\n                img.src = item.src;\n                img.alt = 'Historial ' + (index + 1);\n                \n                const tiempo = document.createElement('div');\n                tiempo.className = 'kostasystem-historial-tiempo';\n                tiempo.textContent = formatearFecha(item.fecha);\n                \n                enlace.appendChild(img);\n                itemElement.appendChild(enlace);\n                itemElement.appendChild(tiempo);\n                historialElement.appendChild(itemElement);\n            });\n        }\n        \n        \/\/ Funci\u00f3n para actualizar la imagen con transici\u00f3n suave\n        function actualizarImagen(camara, intentos = 0) {\n            \/\/ Si las capas no se han creado, salimos\n            if (!camara.layersCreated) return;\n            \n            const layersElement = document.getElementById(camara.layers);\n            if (!layersElement) return;\n            \n            \/\/ Obtenemos las dos capas\n            const layers = layersElement.getElementsByClassName('kostasystem-camara-layer');\n            if (layers.length !== 2) return;\n            \n            \/\/ Determinamos qu\u00e9 capa est\u00e1 activa e inactiva\n            const activeLayer = layers[camara.currentLayer];\n            const inactiveLayer = layers[camara.currentLayer === 0 ? 1 : 0];\n            \n            \/\/ Creamos la nueva URL con timestamp\n            const timestamp = Date.now();\n            const newUrl = camara.url + '?t=' + timestamp;\n            \n            \/\/ Cargamos la nueva imagen en la capa inactiva\n            const tempImage = new Image();\n            tempImage.onload = function() {\n                \/\/ Cuando la imagen est\u00e1 cargada, la asignamos a la capa inactiva\n                inactiveLayer.src = newUrl;\n                \n                \/\/ Y hacemos el cambio de capas\n                setTimeout(() => {\n                    activeLayer.classList.remove('active');\n                    activeLayer.classList.add('inactive');\n                    \n                    inactiveLayer.classList.remove('inactive');\n                    inactiveLayer.classList.add('active');\n                    \n                    \/\/ Alternamos la capa actual\n                    camara.currentLayer = camara.currentLayer === 0 ? 1 : 0;\n                    \n                    \/\/ Actualizar timestamp\n                    const timestampElement = document.getElementById(camara.timestamp);\n                    if (timestampElement) {\n                        const ahora = new Date();\n                        timestampElement.textContent = '\u00daltima actualizaci\u00f3n: ' + formatearFecha(ahora);\n                    }\n                    \n                    \/\/ Procesar para el historial si es necesario\n                    if (config.historial.activo && \n                        (config.historial.ambasCamaras || camara.num === config.camaras[0].num)) {\n                        const ahora = new Date();\n                        const horaActual = ahora.getHours();\n                        \n                        \/\/ Solo a\u00f1adimos al historial si cambia la hora\n                        if (camara.historial.lastHourProcessed === null || \n                            horaActual !== camara.historial.lastHourProcessed) {\n                            const nuevoItem = {\n                                src: newUrl,\n                                timestamp: timestamp,\n                                fecha: ahora,\n                                hora: horaActual\n                            };\n                            \n                            \/\/ A\u00f1adir al principio del array\n                            camara.historial.items.unshift(nuevoItem);\n                            \n                            \/\/ Mantener solo el m\u00e1ximo configurado\n                            if (camara.historial.items.length > config.historial.maxItems) {\n                                camara.historial.items = camara.historial.items.slice(0, config.historial.maxItems);\n                            }\n                            \n                            \/\/ Actualizar la \u00faltima hora procesada\n                            camara.historial.lastHourProcessed = horaActual;\n                            \n                            \/\/ Actualizar visual del historial\n                            actualizarHistorialVisual(camara);\n                        }\n                    }\n                    \n                    \/\/ Limpiamos cualquier mensaje de error\n                    if (estadoConexion && estadoConexion.textContent.includes('Error')) {\n                        estadoConexion.textContent = '';\n                    }\n                }, 50); \/\/ Peque\u00f1o retraso para asegurar que la imagen est\u00e9 cargada\n            };\n            \n            tempImage.onerror = function() {\n                if (intentos < config.reintentos.max) {\n                    setTimeout(() => actualizarImagen(camara, intentos + 1), config.reintentos.tiempo);\n                } else if (estadoConexion) {\n                    estadoConexion.textContent = 'Error de conexi\u00f3n. Reintentando...';\n                    setTimeout(() => actualizarImagen(camara, 0), config.reintentos.tiempo * 2);\n                }\n            };\n            \n            \/\/ Iniciamos la carga\n            tempImage.src = newUrl;\n        }\n        \n        function iniciarActualizaciones() {\n            \/\/ Primera actualizaci\u00f3n\n            config.camaras.forEach(camara => actualizarImagen(camara));\n            \n            \/\/ Configurar actualizaciones peri\u00f3dicas\n            setInterval(() => {\n                config.camaras.forEach(camara => actualizarImagen(camara));\n            }, config.intervalo);\n        }\n        \n        \/\/ Iniciar todo\n        inicializar();\n    });\n    <\/script>\n    \n\t\t<div data-elementor-type=\"section\" data-elementor-id=\"137331\" class=\"elementor elementor-137331\" data-elementor-post-type=\"elementor_library\">\n\t\t\t<div class=\"elementor-element elementor-element-5152775 e-flex e-con-boxed e-con e-parent\" data-id=\"5152775\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d4213d5 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"d4213d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.escueladesurfsopelana.com\/en\/surf-lesson-sopelana\/adult-surf-lessons\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Book your surf lesson<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<p>Here you can see the public real-time webcam focusing on Arrigunaga beach. It&#8217;s the perfect tool to check the sea conditions, wind, and waves before grabbing your board.<\/p>\n<h2>Check the Arrigunaga webcam and plan your session<\/h2>\n<p>Thanks to this real-time webcam, you can <strong>check the sea conditions in Getxo before leaving home<\/strong> and make sure the waves, wind, and tide are right for your session.<\/p>\n<p>And if the conditions in Arrigunaga don&#8217;t convince you, or if you prefer the consistency and power of the <strong>Sopelana waves<\/strong>, come to <strong>Pe\u00f1a Txuri Surf Eskola<\/strong>. We are right next door, and you&#8217;ll find <strong>the best gear, the best lessons, and the best facilities<\/strong> to get the most out of every session.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u25b7 Access the Arrigunaga webcam live. Check the real sea conditions in Getxo, the wind, and the swell for your surf session in real time.<\/p>\n","protected":false},"author":2,"featured_media":137346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-137347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-cam"],"_links":{"self":[{"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/posts\/137347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/comments?post=137347"}],"version-history":[{"count":0,"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/posts\/137347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/media\/137346"}],"wp:attachment":[{"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/media?parent=137347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/categories?post=137347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.escueladesurfsopelana.com\/en\/wp-json\/wp\/v2\/tags?post=137347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}