☰

Useless Things Series: Webpage Grid with Coordinates

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

  1. // ==UserScript==
  2. // @name         Useless Things Series: Webpage Grid with Coordinates
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Overlay a grid onto the webpage and display current mouse coordinates in grid units
  6. // @match        *://*/*
  7. // @license      MIT
  8. // @namespace https://greasyfork.org/users/1126616
  9. // ==/UserScript==
  10.  
  11.  
  12. // JavaScript code to dynamically create grid lines, display mouse coordinates, and convert pixel positions
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Default grid settings
  17.     let numVerticalLines = 20; // Number of vertical grid lines
  18.     let numHorizontalLines = 20; // Number of horizontal grid lines
  19.     let gridColor = '#c90016'; // Grid line color
  20.     let gridOpacity = 0.5; // Grid line opacity
  21.     let gridVisible = true; // Initially show grid
  22.  
  23.     // Create grid overlay
  24.     const gridOverlay = document.createElement('div');
  25.     gridOverlay.id = 'grid-overlay';
  26.     gridOverlay.style.position = 'fixed';
  27.     gridOverlay.style.top = '0';
  28.     gridOverlay.style.left = '0';
  29.     gridOverlay.style.width = '100%';
  30.     gridOverlay.style.height = '100%';
  31.     gridOverlay.style.pointerEvents = 'none';
  32.     gridOverlay.style.zIndex = '9999';
  33.     document.body.appendChild(gridOverlay);
  34.  
  35.     // Create coordinates display
  36.     const coordinatesDisplay = document.createElement('div');
  37.     coordinatesDisplay.id = 'coordinates-display';
  38.     coordinatesDisplay.style.position = 'fixed';
  39.     coordinatesDisplay.style.bottom = '10px';
  40.     coordinatesDisplay.style.left = '10px';
  41.     coordinatesDisplay.style.color = '#000'; // Default coordinate color
  42.     coordinatesDisplay.style.fontSize = '14px'; // Default font size
  43.     coordinatesDisplay.style.zIndex = '10000';
  44.     coordinatesDisplay.style.display = 'block'; // Initially show coordinates
  45.     document.body.appendChild(coordinatesDisplay);
  46.  
  47.     // Create red dot for mouse tip
  48.     const mouseTip = document.createElement('div');
  49.     mouseTip.id = 'mouse-tip';
  50.     mouseTip.style.position = 'fixed';
  51.     mouseTip.style.width = '8px';
  52.     mouseTip.style.height = '8px';
  53.     mouseTip.style.background = 'red';
  54.     mouseTip.style.borderRadius = '50%';
  55.     mouseTip.style.zIndex = '10001';
  56.     mouseTip.style.display = 'block'; // Initially show red dot
  57.     document.body.appendChild(mouseTip);
  58.  
  59.     // Function to update grid style
  60.     function updateGridStyle() {
  61.         gridOverlay.innerHTML = ''; // Clear existing grid lines
  62.         const verticalLineSpacing = window.innerWidth / numVerticalLines;
  63.         const horizontalLineSpacing = window.innerHeight / numHorizontalLines;
  64.         if (gridVisible) {
  65.             for (let i = 1; i < numVerticalLines; i++) {
  66.                 const verticalLine = document.createElement('div');
  67.                 verticalLine.style.position = 'absolute';
  68.                 verticalLine.style.width = '1px';
  69.                 verticalLine.style.height = '100%';
  70.                 verticalLine.style.backgroundColor = gridColor;
  71.                 verticalLine.style.opacity = gridOpacity;
  72.                 verticalLine.style.left = `${i * verticalLineSpacing}px`;
  73.                 gridOverlay.appendChild(verticalLine);
  74.             }
  75.             for (let i = 1; i < numHorizontalLines; i++) {
  76.                 const horizontalLine = document.createElement('div');
  77.                 horizontalLine.style.position = 'absolute';
  78.                 horizontalLine.style.width = '100%';
  79.                 horizontalLine.style.height = '1px';
  80.                 horizontalLine.style.backgroundColor = gridColor;
  81.                 horizontalLine.style.opacity = gridOpacity;
  82.                 horizontalLine.style.top = `${i * horizontalLineSpacing}px`;
  83.                 gridOverlay.appendChild(horizontalLine);
  84.             }
  85.         }
  86.     }
  87.  
  88.     // Function to display mouse coordinates and convert pixel positions
  89.     function displayCoordinates(event) {
  90.         const mouseX = event.clientX;
  91.         const mouseY = event.clientY;
  92.         const bodyWidth = document.body.offsetWidth;
  93.         const bodyHeight = document.body.offsetHeight;
  94.         const rightCoordinate = bodyWidth - mouseX;
  95.         const bottomCoordinate = bodyHeight - mouseY;
  96.  
  97.         coordinatesDisplay.textContent = `Mouse Coordinates (px): (${mouseX}, ${mouseY}) | From Top: ${mouseY}px, From Left: ${mouseX}px, From Right: ${rightCoordinate}px, From Bottom: ${bottomCoordinate}px`;
  98.         coordinatesDisplay.style.bottom = '20px'; // Position at the center bottom of the screen
  99.         coordinatesDisplay.style.left = '50%'; // Position at the center horizontally
  100.         coordinatesDisplay.style.transform = 'translateX(-50%)'; // Center horizontally
  101.         coordinatesDisplay.style.color = '#fff'; // Text color
  102.         coordinatesDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Background color with transparency
  103.         coordinatesDisplay.style.padding = '10px'; // Padding for better visibility
  104.         coordinatesDisplay.style.borderRadius = '5px'; // Rounded corners
  105.         coordinatesDisplay.style.width = '800px';
  106.         coordinatesDisplay.style.textAlign = 'center';
  107.     }
  108.  
  109.     // Function to get position type of an element
  110.     function getPositionType(element) {
  111.         const position = window.getComputedStyle(element).position;
  112.         return position;
  113.     }
  114.  
  115.     // Call the function to create initial grid
  116.     updateGridStyle();
  117.  
  118.     // Function to toggle grid visibility
  119.     function toggleGrid() {
  120.         gridVisible = !gridVisible;
  121.         gridOverlay.style.display = gridVisible ? 'block' : 'none';
  122.         coordinatesDisplay.style.display = gridVisible ? 'block' : 'none';
  123.         mouseTip.style.display = gridVisible ? 'block' : 'none';
  124.     }
  125.  
  126.     // Call toggleGrid() to ensure grid and coordinates are shown by default
  127.     toggleGrid();
  128.  
  129.     // Event listener for keydown events to toggle grid visibility
  130.     document.addEventListener('keydown', function(event) {
  131.         if (event.altKey && event.key === 'g') {
  132.             toggleGrid();
  133.         }
  134.     });
  135.  
  136.     // Event listener for mousemove events to display mouse coordinates
  137.     document.addEventListener('mousemove', function(event) {
  138.         if (gridVisible) {
  139.             displayCoordinates(event);
  140.         }
  141.     });
  142.  
  143. })();