diff --git a/docs/README.md b/docs/README.md index 90064d8..2d742e0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -30,41 +30,79 @@

Blue Marble

-Latest Version -Latest Release -Software License: MPL-2.0 -Contact Me -WakaTime -Total Patches -Total Lines of Code -Total Comments -Compression -Build -CodeQL +Latest Version +Latest Release +Software License: MPL-2.0 +Contact Me +WakaTime +Total Patches +Total Lines of Code +Total Comments +Compression +Build +CodeQL

Overview

- Welcome to Blue Marble! Blue Marble is a userscript for the website wplace.live. If you like this userscript, please ⭐ the repository! + Welcome to Blue Marble! Blue Marble is a userscript for the website wplace.live. If you like this userscript, please ⭐ the repository!

Installation Instructions

- Supported Browsers - Unupported Browsers + Supported Browsers + Unupported Browsers

- Blue Marble has been verified to work on mobile devices. Blue Marble was designed on Chrome, but Blue Marble might work on "unsupported" browsers not listed above. + Blue Marble has been verified to work on mobile devices. Blue Marble was designed on Chrome, but Blue Marble might work on "unsupported" browsers not listed above. Some versions/forks of FireFox work. Some versions/forks of FireFox do not work.
- Here is how you install the Blue Marble userscript: + Installation instructions for Blue Marble are below. Click the arrows to expand the instructions you want to see. Blue text is a link. +

+ + Computer - Chrome (Click to Expand) + +
    +
  1. Install the TamperMonkey plugin for Chrome. +
    + Click the 'Add extention' button
  2. +
  3. Right-click the extention. +
    + Enter the 'Manage Extention' menu
  4. +
  5. Left-click "Manage Extension."
  6. +
  7. Enable "Developer Mode." +
    + Enable 'Developer Mode' and 'Allow user scripts'
  8. +
  9. Enable "Allow user scripts."
  10. +
  11. Download the BlueMarble.user.js file.
  12. +
  13. Open the TamperMonkey Dashboard. +
    + Enter the TamperMonkey 'Dashboard'
  14. +
  15. Drag the BlueMarble.user.js file inside the dashboard of TamperMonkey. +
    + Drag the userscript into the dashboard
  16. +
  17. Click the "Install" button to install Blue Marble. +
    + Click the 'Install' button
  18. +
  19. Enable Blue Marble inside the TamperMonkey dashboard. +
    + Enable Blue Marble
  20. +
  21. Refresh the wplace.live webpage.
  22. +
+
+

+ +

Template Instructions

+

+ Blue Marble will display your template as the same size. If your image is 500 pixels tall and 300 pixels wide, the template will be 500 pixels tall and 300 pixels wide. Here is the instructions to display a template image on the canvas:

    -
  1. Install TamperMonkey.
  2. -
  3. Enable Developer Mode & Userscripts (on Chrome).
  4. -
  5. Download the BlueMarble.user.js file.
  6. -
  7. Put the BlueMarble.user.js file inside the dashboard of TamperMonkey.
  8. -
  9. Enable BlueMarble inside TamperMonkey
  10. +
  11. Find the pixel of the top left corner. Fill in Tl X, Tl Y, Px X, and Px Y with the coordinates. You can use the "Pin" icon to auto-fill the coordinates after clicking the pixel. +
    + Find template coordinates
  12. +
  13. Upload a PNG or WEBP image.
  14. +
  15. Click the "Enable" button.

Script Settings

There are many settings available for the Blue Marble userscript! Through these settings, you can control how the script behaves. +

Template Settings

@@ -85,9 +124,16 @@

Coordinates

- The coordinate system for wplace.live is unique. Instead of all pixels having a global coordinate number (x, y), the coordinate number is relative to the tile. This means you need to know the tile number and the coordinate number to do anything. -
- The template is aligned from the top left corner. You can auto-fill this position using the "pin" icon next to the coordinate input boxes. +

Tile Coordinates
+

+ The coordinate system for wplace.live is unique. Instead of all pixels having a global coordinate number (x, y), the coordinate number is relative to the tile. This means you need to know the tile number and the coordinate number to do anything. In Blue Marble, the tile coordinates and the pixel coordinates are displayed when you click on a pixel. These are the coordinates you should use for aligning a template. +
+ Where to find tile coordinates +

+
Template Coordinates
+

+ The template is aligned from the top left corner of the template. You can auto-fill this position using the "pin" icon next to the coordinate input boxes. +

diff --git a/docs/assets/ComputerChromeInstall1.png b/docs/assets/ComputerChromeInstall1.png new file mode 100644 index 0000000..ca40cad Binary files /dev/null and b/docs/assets/ComputerChromeInstall1.png differ diff --git a/docs/assets/ComputerChromeInstall2.png b/docs/assets/ComputerChromeInstall2.png new file mode 100644 index 0000000..ac1f732 Binary files /dev/null and b/docs/assets/ComputerChromeInstall2.png differ diff --git a/docs/assets/ComputerChromeInstall3.png b/docs/assets/ComputerChromeInstall3.png new file mode 100644 index 0000000..80f7c4d Binary files /dev/null and b/docs/assets/ComputerChromeInstall3.png differ diff --git a/docs/assets/ComputerChromeInstall4.png b/docs/assets/ComputerChromeInstall4.png new file mode 100644 index 0000000..6595bac Binary files /dev/null and b/docs/assets/ComputerChromeInstall4.png differ diff --git a/docs/assets/ComputerChromeInstall5.png b/docs/assets/ComputerChromeInstall5.png new file mode 100644 index 0000000..7b17ddd Binary files /dev/null and b/docs/assets/ComputerChromeInstall5.png differ diff --git a/docs/assets/ComputerChromeInstall6.png b/docs/assets/ComputerChromeInstall6.png new file mode 100644 index 0000000..4d16961 Binary files /dev/null and b/docs/assets/ComputerChromeInstall6.png differ diff --git a/docs/assets/ComputerChromeInstall7.png b/docs/assets/ComputerChromeInstall7.png new file mode 100644 index 0000000..f7ea77d Binary files /dev/null and b/docs/assets/ComputerChromeInstall7.png differ diff --git a/docs/assets/TemplateCoordinates1.png b/docs/assets/TemplateCoordinates1.png new file mode 100644 index 0000000..c042228 Binary files /dev/null and b/docs/assets/TemplateCoordinates1.png differ diff --git a/docs/assets/TemplateCoordinatesDisplay.png b/docs/assets/TemplateCoordinatesDisplay.png new file mode 100644 index 0000000..ffcca77 Binary files /dev/null and b/docs/assets/TemplateCoordinatesDisplay.png differ