Online Ruler

Accurate 1:1 screen ruler with physical calibration, supporting CM and Inch measurements.

📏 Online Ruler: Precise 1:1 Screen Measurement & Physical Calibration Tool —— A lightweight, high-precision professional browser extension that transforms your screen into a real-world physical ruler and protractor. ----------------------------------- Do you often struggle to obtain accurate measurements when sizing objects on your screen due to varying resolutions and zoom levels? "Online Ruler" is designed specifically to solve this common frustration. Utilizing unique physical calibration technology, it dynamically renders precise 1:1 scales based on your monitor's actual PPI (Pixels Per Inch), providing you with real-world-accurate measurement references. Whether you are a designer, an engineer, or a student learning about geometry, this extension offers you the most intuitive and reliable digital measurement solution. 🎉 v2.1.0 MAJOR UPDATE: THREE-POINT DYNAMIC PROTRACTOR ----------------------------------- This update introduces a powerful new way to measure angles directly on webpages, designed for perfect alignment with design elements: ✨ Three-Point Dynamic Protractor: Adds a measurement tool consisting of a vertex and two endpoints. Quickly align with any angle by positioning the three points. ✨ Real-time Angle Calculation: Automatically calculates and displays the angle between the two arms in degrees (°), supporting 0°-360° measurements as you drag the endpoints. ✨ Dynamic Measurement Arms: The two arms can be extended indefinitely by dragging the endpoints, making it easy to align with large webpage elements, image edges, or slanted design lines. ✨ Semi-transparent Sector Area: A semi-transparent sector automatically appears between the two arms to visualize the measured area. The transparency of this sector can be adjusted independently. ✨ Independent Arm Snapping: Each arm automatically snaps to 45° increments (0°, 45°, 90°, etc.) when moved close, facilitating quick alignment with horizontal, vertical, and common diagonal edges. ✨ Precision Alignment: Supports multiple color schemes. The vertex features a transparent hollow circle with a clear center point for pinpoint accuracy. 🎒 STUDENT'S CORNER: FUN WITH GEOMETRY (Great for 4th Graders!) ----------------------------------- Hey there, young explorers! Are you learning about shapes and angles in school? This tool is like having a magic math kit right inside your computer. Here is how you can use it for your homework and fun projects: 📐 Measuring Lengths: Use the **Ruler** to measure how long things are on your screen. You can use Centimeters (cm) or Millimeters (mm), just like the ruler in your pencil case! 📐 Measuring Angles: Have you learned about "Right Angles" or "Acute Angles"? Use the **Protractors** to find out exactly how many degrees an angle has. You can use the standard round protractor or the new **Three-point Protractor** to pin down any corner! 📐 Mix and Match: You can put many rulers and protractors on the page at the same time to see how different shapes fit together. 🎨 Fun Colors: You can change your tools to look like wood, shiny metal, or colorful plastic. Pick your favorite color to make math time more fun! 🌟 Core Features ----------------------------------- ✨ Physical-Level Calibration: Align the tool with standard physical objects—like a credit card or A4 paper—to automatically calculate your screen's exact PPI. Supports +/- buttons for 1-pixel micro-adjustments. 📏 Three Main Tools: Screen Ruler: Supports Metric and Imperial scales for measuring length, spacing, and element sizes. Standard Protractor: A semi-transparent 360° rotatable protractor based on PPI calibration for true physical size. Three-point Dynamic Protractor: Measures arbitrary angles via a vertex and two endpoints with real-time display, adjustable arms, and sector visualization. 📏 Dual Measurement Modes: Standalone Window Mode: Opens a clean, "always-on-top" ruler window. Page Overlay Mode: Displays floating rulers or protractors directly over any webpage with adjustable transparency. 🔄 Rotation, Snapping & Alignment: Use the rotation handle to adjust the angle in real-time. Rulers and Standard Protractors support snapping to key angles (45°/90°). Three-point Protractor arms also snap to 45° increments for easy alignment with webpage edges. 🔄 Zero Offset & Reset (Ruler): Mimics the protective "zero-point" edge and allows setting a custom starting offset. Includes a one-click "Reset" function. 🎨 Realistic Aesthetics & Materials: Rulers support Wood, Plastic, or Metal textures with dynamic SVG filters. Protractors offer several semi-transparent color schemes (e.g., Classic Blue, Tech Green, Vital Orange) for clarity on any background. 📏 Comprehensive Scale Support: Metric: Centimeter (CM) and Millimeter (MM). Imperial: Inch scales, high-precision down to 1/16 of an inch. 🔄 Flexible Interaction Logic: Full-Edge Resizing: Drag any point along the end of the ruler to adjust its length. Real-time Synchronization: Changes to materials, colors, or settings are applied instantly. 💾 Privacy & Local Storage: All calibration data is stored exclusively within your local browser. 📖 Instructions ----------------------------------- 1. First-time Use: Click the extension icon to enter "Calibration Mode." 2. Alignment: Select a reference object, place it against your screen, and adjust the slider until the mark aligns perfectly. 3. Start Measuring: Click "Add Ruler to Current Page," "Add Protractor," or "Add Three-point Protractor." 4. Change Style: Use the toolbar icons to adjust materials, colors, or transparency. 5. Move & Rotate: Drag the tool to move it. For Rulers and Standard Protractors, use the round handle to rotate. For the Three-point Protractor, drag the vertex or endpoints to align with the angle. 🎨 Design Philosophy ----------------------------------- Precision Above All: Built upon the formula `pixelsPerMm = ppi / 25.4`. Toolkit Thinking: Combining rulers and protractors for UI debugging, blueprint checking, and education. Instant Usability: Wide drag handles and clear zero marks to make it effortless. 🗺️ Roadmap ----------------------------------- Auxiliary Reference Lines: Optional crosshairs or snap-to-edge for comparisons. Expanded Calibration References: Support for A5 paper and mobile screen dimensions. Annotation Feature: Allow adding simple text or line notes at measurement points. 💬 Feedback & Suggestions ----------------------------------- Crafted for users who demand precision! If you have ideas or issues, contact us. Your feedback drives our improvement. Precise measurement—right at your fingertips! 🚀