Cog seems to ignore some click events #788

kostrahb · 2026-05-02T21:18:39Z

kostrahb
May 2, 2026

Hi, I seem to have bumped into issue that I am unfortunately unable to resolve on my own - I am very new to the world of embedded development.

From my point of view it seems that Cog ignores some click events.

Basically I have a webserver that serves a webpage (see minimalistic index.html and app.js below) on 127.0.0.1:80 - with correct text/plain and application/javascript Content-Type headers. I am using a kiosk service to display this webpage - kiosk is just cog running under cage (see kiosk.service).
Now I have it in a state where the webpage is displayed correctly on connected monitor - that is including the rendered(!) mock probes list so I am 100% sure that javascript is working. I am also 100% sure that mouse input works, on my actual webpage I am able to click on links like <a href=#dashboard> and the UI switches me between different views.

But no matter what I do I am unable to make the filtering logic work. When I try to click those filter buttons, nothing happens at all.

Is there something obvious or any limitation on cog/wpewebkit side that I am missing?

I also haven't encountered such problems with firefox-esr - there it works without problems, but unfortunately it has bigger memory footprint so it's most probably unsuitable for my project.

kiosk.service:

[Unit]
Description=Wayland Kiosk Service
After=network.target systemd-user-sessions.service plymouth-quit-wait.service
Conflicts=getty@tty1.service

[Service]
User=unipi
Group=unipi
PAMName=login
TTYPath=/dev/tty1
StandardInput=tty
StandardOutput=journal
StandardError=journal
ExecStart=/usr/bin/cage -s -- cog -P fdo http://127.0.0.1:80 --enable-javascript --enable-javascript-markup --enable-write-console-messages-to-stdout --web-mem-limit=128 --net-mem-limit=32
Restart=always
RestartSec=5

[Install]
WantedBy=graphical.target

app.js:

// Mock Data (Matches your structure)
const mockProbes = [
    { id: 1, device_id: 1, name: "Temperature 1", type: "physical" },
    { id: 2, device_id: 1, name: "Humidity 1", type: "physical" },
    { id: 10, device_id: 0, name: "Virtual Avg", type: "virtual" },
    { id: 5, device_id: 2, name: "Pressure 2", type: "physical" }
];

const state = {
    filter: 'all',
    probes: mockProbes
};

const filterContainer = document.getElementById('filter-container');
const listContainer = document.getElementById('probe-list');

function render() {
    // 1. Render Filters
    const filters = ['all', 'physical', 'virtual'];
    filterContainer.innerHTML = filters.map(f => `
        <button type="button"
                class="filter-btn ${state.filter === f ? 'active' : ''}"
                data-filter="${f}">
            ${f.toUpperCase()}
        </button>
    `).join('');

    // 2. Render Probes
    const filtered = state.probes.filter(p =>
        state.filter === 'all' || p.type === state.filter
    );

    listContainer.innerHTML = filtered.map(p => `
        <div class="probe-card">
            <div class="type-tag">${p.type}</div>
            <strong>${p.name}</strong><br>
            <small>ID: ${p.id} (Dev: ${p.device_id})</small>
        </div>
    `).join('');
}

// Global Event Delegation - More reliable in Cog
document.addEventListener('click', (e) => {
    const btn = e.target.closest('.filter-btn');
    if (!btn) return;

    // Direct state update and re-render
    state.filter = btn.dataset.filter;
    console.log('Filter changed to:', state.filter);
    render();
});

// Touch handling for kiosk screens
document.addEventListener('touchstart', (e) => {
    if (e.target.closest('.filter-btn')) {
        // Optional: you can trigger the click logic here if
        // the touch latency feels high, but 'click' is usually
        // synthesized correctly by Cog if preventDefault isn't called.
    }
}, { passive: true });

// Initial Boot
render();

index.html:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cog Test Ground</title>
    <style>
        :root {
            --bg: #0d1117;
            --card: #161b22;
            --text: #c9d1d9;
            --accent: #58a6ff;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: sans-serif;
            padding: 20px;
        }

        .filter-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        /* Using buttons for better Cog hit-testing */
        .filter-btn {
            padding: 10px 20px;
            background: var(--card);
            border: 1px solid #30363d;
            color: var(--text);
            border-radius: 20px;
            cursor: pointer;
            appearance: none;
            /* Strip native styling */
            -webkit-appearance: none;
            touch-action: manipulation;
        }

        .filter-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .probe-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .probe-card {
            background: var(--card);
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid var(--accent);
        }

        .type-tag {
            font-size: 0.7rem;
            text-transform: uppercase;
            opacity: 0.6;
        }
    </style>
</head>

<body>
    <h2>Filter Test Ground</h2>
    <div id="filter-container" class="filter-bar"></div>
    <div id="probe-list" class="probe-grid"></div>

    <script type="module" src="app.js"></script>
</body>

</html>

Navigation Menu

Uh oh!

Cog seems to ignore some click events #788

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Cog seems to ignore some click events #788

Uh oh!

kostrahb May 2, 2026

Replies: 0 comments

kostrahb
May 2, 2026