Contador de FPS con Gráfica

Displays a static FPS counter with a vertical graph on all web pages.

  1. // ==UserScript==
  2. // @name Contador de FPS con Gráfica
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.12
  5. // @description Displays a static FPS counter with a vertical graph on all web pages.
  6. // @author Your Name
  7. // @match *://*/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // Create the FPS counter container
  15. let fpsContainer = document.createElement('div');
  16. fpsContainer.style.position = 'fixed';
  17. fpsContainer.style.top = '10px';
  18. fpsContainer.style.right = '10px';
  19. fpsContainer.style.width = '150px';
  20. fpsContainer.style.height = '100px';
  21. fpsContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  22. fpsContainer.style.color = '#00FF00';
  23. fpsContainer.style.fontSize = '14px';
  24. fpsContainer.style.fontFamily = 'monospace';
  25. fpsContainer.style.padding = '10px';
  26. fpsContainer.style.zIndex = '9999';
  27. fpsContainer.style.pointerEvents = 'none';
  28. document.body.appendChild(fpsContainer);
  29.  
  30. // Create the FPS text element
  31. let fpsText = document.createElement('div');
  32. fpsText.innerText = 'FPS: 0';
  33. fpsContainer.appendChild(fpsText);
  34.  
  35. // Create the canvas for the graph
  36. let fpsCanvas = document.createElement('canvas');
  37. fpsCanvas.width = 130;
  38. fpsCanvas.height = 50;
  39. fpsContainer.appendChild(fpsCanvas);
  40. let ctx = fpsCanvas.getContext('2d');
  41.  
  42. let frameTimes = [];
  43. let lastFrameTime = performance.now();
  44.  
  45. function updateFPS() {
  46. let now = performance.now();
  47. let delta = now - lastFrameTime;
  48. lastFrameTime = now;
  49. let fps = 1000 / delta;
  50.  
  51. // Update the text
  52. fpsText.innerText = 'FPS: ' + fps.toFixed(1);
  53.  
  54. // Update the frame times array
  55. frameTimes.push(fps);
  56. if (frameTimes.length > fpsCanvas.width) {
  57. frameTimes.shift();
  58. }
  59.  
  60. // Clear the canvas
  61. ctx.clearRect(0, 0, fpsCanvas.width, fpsCanvas.height);
  62.  
  63. // Draw the graph vertically from top to bottom
  64. ctx.beginPath();
  65. for (let i = 0; i < frameTimes.length; i++) {
  66. let value = frameTimes[i];
  67. let percent = value / 60; // Assuming 60 FPS is the max
  68. let height = fpsCanvas.height * percent;
  69. let x = i;
  70. let y = height;
  71. ctx.lineTo(x, y);
  72. }
  73. ctx.strokeStyle = '#00FF00';
  74. ctx.stroke();
  75.  
  76. // Schedule the next frame
  77. requestAnimationFrame(updateFPS);
  78. }
  79.  
  80. // Start the FPS counter
  81. requestAnimationFrame(updateFPS);
  82. })();