☰

Useless Things Series: Webpage Grid with Coordinates

Overlay a grid onto the webpage and display current mouse coordinates in grid units

// ==UserScript==
// @name         Useless Things Series: Webpage Grid with Coordinates
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Overlay a grid onto the webpage and display current mouse coordinates in grid units
// @match        *://*/*
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==


// JavaScript code to dynamically create grid lines, display mouse coordinates, and convert pixel positions
(function() {
    'use strict';

    // Default grid settings
    let numVerticalLines = 20; // Number of vertical grid lines
    let numHorizontalLines = 20; // Number of horizontal grid lines
    let gridColor = '#c90016'; // Grid line color
    let gridOpacity = 0.5; // Grid line opacity
    let gridVisible = true; // Initially show grid

    // Create grid overlay
    const gridOverlay = document.createElement('div');
    gridOverlay.id = 'grid-overlay';
    gridOverlay.style.position = 'fixed';
    gridOverlay.style.top = '0';
    gridOverlay.style.left = '0';
    gridOverlay.style.width = '100%';
    gridOverlay.style.height = '100%';
    gridOverlay.style.pointerEvents = 'none';
    gridOverlay.style.zIndex = '9999';
    document.body.appendChild(gridOverlay);

    // Create coordinates display
    const coordinatesDisplay = document.createElement('div');
    coordinatesDisplay.id = 'coordinates-display';
    coordinatesDisplay.style.position = 'fixed';
    coordinatesDisplay.style.bottom = '10px';
    coordinatesDisplay.style.left = '10px';
    coordinatesDisplay.style.color = '#000'; // Default coordinate color
    coordinatesDisplay.style.fontSize = '14px'; // Default font size
    coordinatesDisplay.style.zIndex = '10000';
    coordinatesDisplay.style.display = 'block'; // Initially show coordinates
    document.body.appendChild(coordinatesDisplay);

    // Create red dot for mouse tip
    const mouseTip = document.createElement('div');
    mouseTip.id = 'mouse-tip';
    mouseTip.style.position = 'fixed';
    mouseTip.style.width = '8px';
    mouseTip.style.height = '8px';
    mouseTip.style.background = 'red';
    mouseTip.style.borderRadius = '50%';
    mouseTip.style.zIndex = '10001';
    mouseTip.style.display = 'block'; // Initially show red dot
    document.body.appendChild(mouseTip);

    // Function to update grid style
    function updateGridStyle() {
        gridOverlay.innerHTML = ''; // Clear existing grid lines
        const verticalLineSpacing = window.innerWidth / numVerticalLines;
        const horizontalLineSpacing = window.innerHeight / numHorizontalLines;
        if (gridVisible) {
            for (let i = 1; i < numVerticalLines; i++) {
                const verticalLine = document.createElement('div');
                verticalLine.style.position = 'absolute';
                verticalLine.style.width = '1px';
                verticalLine.style.height = '100%';
                verticalLine.style.backgroundColor = gridColor;
                verticalLine.style.opacity = gridOpacity;
                verticalLine.style.left = `${i * verticalLineSpacing}px`;
                gridOverlay.appendChild(verticalLine);
            }
            for (let i = 1; i < numHorizontalLines; i++) {
                const horizontalLine = document.createElement('div');
                horizontalLine.style.position = 'absolute';
                horizontalLine.style.width = '100%';
                horizontalLine.style.height = '1px';
                horizontalLine.style.backgroundColor = gridColor;
                horizontalLine.style.opacity = gridOpacity;
                horizontalLine.style.top = `${i * horizontalLineSpacing}px`;
                gridOverlay.appendChild(horizontalLine);
            }
        }
    }

    // Function to display mouse coordinates and convert pixel positions
    function displayCoordinates(event) {
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        const bodyWidth = document.body.offsetWidth;
        const bodyHeight = document.body.offsetHeight;
        const rightCoordinate = bodyWidth - mouseX;
        const bottomCoordinate = bodyHeight - mouseY;

        coordinatesDisplay.textContent = `Mouse Coordinates (px): (${mouseX}, ${mouseY}) | From Top: ${mouseY}px, From Left: ${mouseX}px, From Right: ${rightCoordinate}px, From Bottom: ${bottomCoordinate}px`;
        coordinatesDisplay.style.bottom = '20px'; // Position at the center bottom of the screen
        coordinatesDisplay.style.left = '50%'; // Position at the center horizontally
        coordinatesDisplay.style.transform = 'translateX(-50%)'; // Center horizontally
        coordinatesDisplay.style.color = '#fff'; // Text color
        coordinatesDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Background color with transparency
        coordinatesDisplay.style.padding = '10px'; // Padding for better visibility
        coordinatesDisplay.style.borderRadius = '5px'; // Rounded corners
        coordinatesDisplay.style.width = '800px';
        coordinatesDisplay.style.textAlign = 'center';
    }

    // Function to get position type of an element
    function getPositionType(element) {
        const position = window.getComputedStyle(element).position;
        return position;
    }

    // Call the function to create initial grid
    updateGridStyle();

    // Function to toggle grid visibility
    function toggleGrid() {
        gridVisible = !gridVisible;
        gridOverlay.style.display = gridVisible ? 'block' : 'none';
        coordinatesDisplay.style.display = gridVisible ? 'block' : 'none';
        mouseTip.style.display = gridVisible ? 'block' : 'none';
    }

    // Call toggleGrid() to ensure grid and coordinates are shown by default
    toggleGrid();

    // Event listener for keydown events to toggle grid visibility
    document.addEventListener('keydown', function(event) {
        if (event.altKey && event.key === 'g') {
            toggleGrid();
        }
    });

    // Event listener for mousemove events to display mouse coordinates
    document.addEventListener('mousemove', function(event) {
        if (gridVisible) {
            displayCoordinates(event);
        }
    });

})();