Last active
April 3, 2022 05:11
-
-
Save Igneom/1a63744cbaba5980fee2bdcf8f6ac55e to your computer and use it in GitHub Desktop.
R/Place Custom Image loader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name r/place imageLoader | |
| // @namespace http://tampermonkey.net/ | |
| // @version 1.0 | |
| // @description Loads an overlay image on the canvas on r/place! | |
| // @author Igneom | |
| // @match https://hot-potato.reddit.com/embed* | |
| // @icon https://www.google.com/s2/favicons?sz=64&domain=reddit.com | |
| // @grant none | |
| // ==/UserScript== | |
| // Inspired and adapted from https://gist.github.com/oralekin/240d536d13d0a87ecf2474658115621b and https://github.com/lobcog/reddit-place-tracer | |
| if (window.top !== window.self) { | |
| window.addEventListener('load', () => { | |
| const imageOverlay = document.createElement("img"); | |
| imageOverlay.id = "CustomOverlayImage" | |
| imageOverlay.onload = () => { | |
| imageOverlay.style = `position: absolute; left: 0; top: 0; width: ${imageOverlay.naturalWidth / 3}px; height: ${imageOverlay.naturalHeight / 3}px; image-rendering: pixelated; z-index: 1`; | |
| }; | |
| const monaLisaCamera = document.getElementsByTagName("mona-lisa-embed")[0].shadowRoot.children[0]; | |
| const monaLisaCanvas = monaLisaCamera.getElementsByTagName("mona-lisa-canvas")[0].shadowRoot.children[0]; | |
| monaLisaCanvas.appendChild(imageOverlay); | |
| // Add a style to put a hole in the pixel preview (to see the current or desired color) | |
| const waitForPreview = setInterval(() => { | |
| const preview = monaLisaCamera.querySelector("mona-lisa-pixel-preview"); | |
| if (preview) { | |
| clearInterval(waitForPreview); | |
| const style = document.createElement('style') | |
| style.innerHTML = '.pixel { clip-path: polygon(-20% -20%, -20% 120%, 37% 120%, 37% 37%, 62% 37%, 62% 62%, 37% 62%, 37% 120%, 120% 120%, 120% -20%); }' | |
| preview.shadowRoot.appendChild(style); | |
| } | |
| }, 100); | |
| // A div to hold the custom elements. | |
| const bottomDivElements = document.createElement("div"); | |
| bottomDivElements.id = "CustomOverlayElements"; | |
| bottomDivElements.style = "position: absolute; display: flex; flex-flow: row; justify-content: flex-end; margin: 0.75em; margin-left: 5em; bottom: 1em; gap: 0.75%"; | |
| monaLisaCamera.appendChild(bottomDivElements); | |
| const inputDiv = document.createElement("div"); | |
| inputDiv.style = "min-width: 155px; height: 24px; display: flex; justify-content: center; align-items: center; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 26px; font-size: 14px; font-weight: 700; line-height: 17px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; font-family: var(--mona-lisa-font-sans); width: 21em;"; | |
| bottomDivElements.appendChild(inputDiv); | |
| const urlLabel = document.createElement("label"); | |
| urlLabel.innerHTML = "Overlay URL"; | |
| urlLabel.style = "margin-right: .5em;"; | |
| inputDiv.appendChild(urlLabel); | |
| const inputUrl = document.createElement("input"); | |
| inputDiv.appendChild(inputUrl); | |
| const loadImageButton = document.createElement("button"); | |
| loadImageButton.innerHTML = "Load Image"; | |
| loadImageButton.style = "min-width: 100px; height: 24px; display: flex; justify-content: center; align-items: center; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 26px; font-size: 14px; font-weight: 700; line-height: 17px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; font-family: var(--mona-lisa-font-sans);"; | |
| loadImageButton.onclick = function () { LoadImage(inputUrl.value, true) }; | |
| bottomDivElements.appendChild(loadImageButton); | |
| const removeImageButton = document.createElement("button"); | |
| removeImageButton.innerHTML = "Remove Image"; | |
| removeImageButton.style = "min-width: 120px; height: 24px; display: flex; justify-content: center; align-items: center; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); border-radius: 26px; font-size: 14px; font-weight: 700; line-height: 17px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; font-family: var(--mona-lisa-font-sans);"; | |
| removeImageButton.onclick = function () { RemoveImage() }; | |
| bottomDivElements.appendChild(removeImageButton); | |
| const imageUrlValue = "imageUrl"; | |
| let imageUrlSaved = localStorage.getItem(imageUrlValue); | |
| if (imageUrlSaved) { | |
| LoadImage(imageUrlSaved, false); | |
| } | |
| function LoadImage(imageUrl, setValue) { | |
| let isImage = CheckIfImageURL(imageUrl); | |
| if (!isImage) { | |
| window.alert("Url may not be an image."); | |
| return; | |
| } | |
| if (setValue) { | |
| localStorage.setItem(imageUrlValue, imageUrl); | |
| } | |
| imageOverlay.src = imageUrl; | |
| } | |
| function RemoveImage() { | |
| localStorage.setItem(imageUrlValue, null); | |
| imageOverlay.src = "#"; | |
| } | |
| }, false); | |
| } | |
| function CheckIfImageURL(url) { | |
| return (url.match(/\.(jpeg|jpg|gif|png)$/) != null); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A input field and a button is added to the bottom of the canvas, just add the URL of the image and hit load image button.
The image persists between reloads as well.
Images at the moment should be at least with 1000px tall. If reddit adds another canvas below. I will update it to support it properly.
BTW, I don't know jack about javascript, html or css, but it works.