dogbrain
Casual Poster ⚓︎
 
melting down army guys to make green tea
⛺︎ My Room
StatusCafe: robdog
iMood: 
RSS: 
Guild Memberships:
Artifacts:
|
 |
« on: Today at @323.38 » |
|
 i discovered this really cool strawpage-esque drawbox code from this thread, but upon seeing the link no longer works, i navigated to a snapshot of it on the wayback machine. i followed all the instructions but i ran into a very specific problem that I can't seem to find anyone else having. i was wondering if anyone had advice or insight on the matter! it unfortunately won't let me draw on it at all, no matter what device or browser i view it on. i've looked over both files to see if I may have made any mistakes, but i followed the instructions exactly and triple-checked that i didn't touch anything i wasn't supposed to, so i'm like... 99% sure that it isn't anything i did. on the other hand, there are drawboxes on other sites that seem to be working (such as this one and this one), which leads me to believe there's Something up with mine... i just have no idea what! D: the webmaster provided 2 files, a drawbox.html and drawbox.js. drawbox.html <!DOCTYPE html>
<html lang="en">
<head><script src="//archive.org/includes/athena.js" type="text/javascript"></script>
<script type="text/javascript">window.addEventListener('DOMContentLoaded',function(){var v=archive_analytics.values;v.service='wb';v.server_name='wwwb-app210.us.archive.org';v.server_ms=1305;archive_analytics.send_pageview({});});</script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=2N_sDSC0" charset="utf-8"></script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script>
<script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden","showSwfDownload":true};</script>
<script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script>
<script type="text/javascript">
__wm.init("https://web.archive.org/web");
__wm.wombat("https://drawbox.nekoweb.org/drawboxhtml.txt","20250311152312","https://web.archive.org/","web","https://web-static.archive.org/_static/",
"1741706592");
</script>
<link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=1utQkbB3" />
<link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />
<!-- End Wayback Rewrite JS Include -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DRAWBOX</title>
<style>
* {box-sizing: border-box;}
canvas {
border: 1px solid black;
cursor: crosshair;
}
#gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.image-container {
border: 1px solid #ccc;
padding: 5px;
max-width: 200px;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body><!-- BEGIN WAYBACK TOOLBAR INSERT -->
<script>__wm.rw(0);</script>
<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;" toolbar-mode="auto">
<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
<div id="donato" style="position:relative;width:100%;height:0;">
<div id="donato-base">
<iframe id="donato-if" src="https://archive.org/includes/donate.php?as_page=1&platform=wb&referer=https%3A//web.archive.org/web/20250311152312/https%3A//drawbox.nekoweb.org/drawboxhtml.txt"
scrolling="no" frameborder="0" style="width:100%; height:100%">
</iframe>
</div>
</div><div id="wm-ipp-inside">
<div id="wm-toolbar" style="position:relative;display:flex;flex-flow:row nowrap;justify-content:space-between;" nav="async">
<div id="wm-logo" style="/*width:110px;*/padding-top:12px;">
<a href="/web/" title="Wayback Machine home page"><img src="https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-200.png" srcset="https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-100.png, https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-150.png 1.5x, https://web-static.archive.org/_static/images/toolbar/wayback-toolbar-logo-200.png 2x" alt="Wayback Machine" style="width:100px" border="0" /></a>
</div>
<div class="c" style="display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;">
<form class="u" style="display:flex;flex-direction:row;flex-wrap:nowrap;" target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="https://drawbox.nekoweb.org/drawboxhtml.txt" onfocus="this.focus();this.select();" style="flex:1;"/><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20250311152312" /><input type="submit" value="Go" />
</form>
<div style="display:flex;flex-flow:row nowrap;align-items:flex-end;">
<div class="s" id="wm-nav-captures" style="flex:1;">
<a class="t" href="/web/20250311152312*/https://drawbox.nekoweb.org/drawboxhtml.txt" title="See a list of every capture for this URL">2 captures</a>
<div class="r" title="Timespan for captures of this URL">11 Mar 2025 - 23 Mar 2025</div>
</div>
<div class="k">
<a href="" id="wm-graph-anchor">
<div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
<canvas id="wm-sparkline-canvas" width="775" height="27" border="0"></canvas>
</div>
</a>
</div>
</div>
</div>
<div class="n">
<table>
<tbody>
<!-- NEXT/PREV MONTH NAV AND MONTH INDICATOR -->
<tr class="m">
<td class="b" nowrap="nowrap">Feb</td>
<td class="c" id="displayMonthEl" title="You are here: 15:23:12 Mar 11, 2025">MAR</td>
<td class="f" nowrap="nowrap">Apr</td>
</tr>
<!-- NEXT/PREV CAPTURE NAV AND DAY OF MONTH INDICATOR -->
<tr class="d">
<td class="b" nowrap="nowrap"><span class="ta"></span></td>
<td class="c" id="displayDayEl" style="width:34px;font-size:22px;white-space:nowrap;" title="You are here: 15:23:12 Mar 11, 2025">11</td>
<td class="f" nowrap="nowrap"><span class="ta"></span></td>
</tr>
<!-- NEXT/PREV YEAR NAV AND YEAR INDICATOR -->
<tr class="y">
<td class="b" nowrap="nowrap">2024</td>
<td class="c" id="displayYearEl" title="You are here: 15:23:12 Mar 11, 2025">2025</td>
<td class="f" nowrap="nowrap">2026</td>
</tr>
</tbody>
</table>
</div>
<div class="r" style="display:flex;flex-flow:column nowrap;align-items:flex-end;justify-content:space-between;">
<div id="wm-btns" style="text-align:right;height:23px;">
<span class="xxs">
<div id="wm-save-snapshot-success">success</div>
<div id="wm-save-snapshot-fail">fail</div>
<a id="wm-save-snapshot-open" href="#" title="Share via My Web Archive" >
<span class="iconochive-web"></span>
</a>
<a href="https://archive.org/account/login.php" title="Sign In" id="wm-sign-in">
<span class="iconochive-person"></span>
</a>
<span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
</span>
<a class="xxs" href="https://help.archive.org/help/category/the-wayback-machine/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
<a id="wm-tb-close" href="#close" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
</div>
<div id="wm-share" class="xxs">
<a href="/web/20250311152312/http://web.archive.org/screenshot/https://drawbox.nekoweb.org/drawboxhtml.txt"
id="wm-screenshot"
title="screenshot">
<span class="wm-icon-screen-shot"></span>
</a>
<a href="#" id="wm-video" title="video">
<span class="iconochive-movies"></span>
</a>
<a id="wm-share-facebook" href="#" data-url="https://web.archive.org/web/20250311152312/https://drawbox.nekoweb.org/drawboxhtml.txt" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
<a id="wm-share-twitter" href="#" data-url="https://web.archive.org/web/20250311152312/https://drawbox.nekoweb.org/drawboxhtml.txt" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
</div>
<div style="padding-right:2px;text-align:right;white-space:nowrap;">
<a id="wm-expand" class="wm-btn wm-closed" href="#expand"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span class="xxs" style="font-size:80%;">About this capture</span></a>
</div>
</div>
</div>
<div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
<div id="wm-capinfo-notice" source="api"></div>
<div id="wm-capinfo-collected-by">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center;padding:2px 0;">COLLECTED BY</div>
<div style="padding:3px;position:relative" id="wm-collected-by-content">
<div style="display:inline-block;vertical-align:top;width:49%;">
<span class="c-logo" style="background-image:url(https://archive.org/services/img/save-page-now-outlinks)"></span>
<div>Collection: <a style="color:#33f;" href="https://archive.org/details/save-page-now-outlinks" target="_new"><span class="wm-title">Save Page Now Outlinks</span></a></div>
</div>
</div>
</div>
<div id="wm-capinfo-timestamps">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center;padding:2px 0;" title="Timestamps for the elements of this page">TIMESTAMPS</div>
<div>
<div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
<div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="https://web-static.archive.org/_static/images/loading.gif" alt="loading" /></div>
</div>
</div>
</div></div></div></div><div id="wm-ipp-print">The Wayback Machine - https://web.archive.org/web/20250311152312/https://drawbox.nekoweb.org/drawboxhtml.txt</div>
<script type="text/javascript">//<![CDATA[
__wm.bt(775,27,25,2,"web","https://drawbox.nekoweb.org/drawboxhtml.txt","20250311152312",1996,"https://web-static.archive.org/_static/",["https://web-static.archive.org/_static/css/banner-styles.css?v=1utQkbB3","https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv"], false);
__wm.rw(1);
//]]></script>
<!-- END WAYBACK TOOLBAR INSERT -->
<h1>DRAWBOX</h1>
<canvas id="drawboxcanvas" width="500" height="500"></canvas>
<br>
<div onclick="change_color(this)" style="background:red" class="stroke-color"></div>
<div onclick="change_color(this)" style="background:blue" class="stroke-color"></div>
<button onclick="Restore()">Undo</button>
<button onclick="Clear()">Clear</button>
<input type="color" oninput="stroke_color = this.value">
<input type="range" min="1" max="100" oninput="stroke_width = this.value">
<button id="submit">Submit drawing</button>
<p id="status"></p>
<h1>Submitted Drawings ☻</h1>
<div id="gallery">Loading images...</div>
<script src="/web/20250311152312js_/https://drawbox.nekoweb.org/drawbox.js"></script>
</body>
</html>
<!--
FILE ARCHIVED ON 15:23:12 Mar 11, 2025 AND RETRIEVED FROM THE
INTERNET ARCHIVE ON 06:37:59 Mar 10, 2026.
JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
SECTION 108(a)(3)).
-->
<!--
playback timings (ms):
captures_list: 0.469
exclusion.robots: 0.033
exclusion.robots.policy: 0.024
esindex: 0.008
cdx.remote: 24.224
LoadShardBlock: 197.374 (3)
PetaboxLoader3.resolve: 514.057 (4)
PetaboxLoader3.datanode: 138.007 (4)
load_resource: 1059.913
nav: 0.146 (6)
-->
drawbox.js /*
FILL IN THESE VARIABLES BASED ON THE GUIDE AT https://drawbox.nekoweb.org
IF YOU HAVE ANY QUESTION, SUGGESTIONS, OR NEED HELP, PLEASE EMAIL ME AT drawbox@jhorn.net OR @MONKEYBATION on DISCORD
/`·.¸
/¸...¸`:·
¸.·´ ¸ `·.¸.·´)
: © ):´; ¸ {
`·.¸ `· ¸.·´\`·¸)
`\\´´\¸.·´
*/
const GOOGLE_FORM_ID = "1FAIpQLSdrd87-GheFpnzG3g3sKihUfXw2r-c2Efwzf9bZAFPFz07y5A";
const ENTRY_ID = "entry.1609423939";
const GOOGLE_SHEET_ID = "12hwQOToS6w2w81s-Yj71wuOSzNRj5yAfKMMI2cr7NPg";
const DISPLAY_IMAGES = true;
/*
DONT EDIT BELOW THIS POINT IF YOU DONT KNOW WHAT YOU ARE DOING.
*/
const CLIENT_ID = "b4fb95e0edc434c";
const GOOGLE_SHEET_URL = "https://docs.google.com/spreadsheets/d/" + GOOGLE_SHEET_ID + "/export?format=csv";
const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/" + GOOGLE_FORM_ID + "/formResponse";
let canvas = document.getElementById("drawboxcanvas");
let context = canvas.getContext("2d");
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
let restore_array = [];
let start_index = -1;
let stroke_color = "black";
let stroke_width = "2";
let is_drawing = false;
function change_color(element) {
stroke_color = element.style.background;
}
function start(event) {
is_drawing = true;
context.beginPath();
context.moveTo(getX(event), getY(event));
event.preventDefault();
}
function draw(event) {
if (!is_drawing) return;
context.lineTo(getX(event), getY(event));
context.strokeStyle = stroke_color;
context.lineWidth = stroke_width;
context.lineCap = "round";
context.lineJoin = "round";
context.stroke();
event.preventDefault();
}
function stop(event) {
if (!is_drawing) return;
context.stroke();
context.closePath();
is_drawing = false;
restore_array.push(context.getImageData(0, 0, canvas.width, canvas.height));
start_index++;
event.preventDefault();
}
function getX(event) {
return event.pageX
? event.pageX - canvas.offsetLeft
: event.targetTouches[0].pageX - canvas.offsetLeft;
}
function getY(event) {
return event.pageY
? event.pageY - canvas.offsetTop
: event.targetTouches[0].pageY - canvas.offsetTop;
}
canvas.addEventListener("touchstart", start, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("touchend", stop, false);
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);
function Restore() {
if (start_index <= 0) {
Clear();
} else {
start_index--;
restore_array.pop();
context.putImageData(restore_array[start_index], 0, 0);
}
}
function Clear() {
context.fillStyle = "white";
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(0, 0, canvas.width, canvas.height);
restore_array = [];
start_index = -1;
}
context.drawImage = function() {
console.warn("noo >:(");
};
document.getElementById("submit").addEventListener("click", async function () {
const submitButton = document.getElementById("submit");
const statusText = document.getElementById("status");
submitButton.disabled = true;
statusText.textContent = "Uploading...";
const imageData = canvas.toDataURL("image/png");
const blob = await (await fetch(imageData)).blob();
const formData = new FormData();
formData.append("image", blob, "drawing.png");
try {
const response = await fetch("https://api.imgur.com/3/image", {
method: "POST",
headers: { Authorization: `Client-ID ${CLIENT_ID}` },
body: formData,
});
const data = await response.json();
if (!data.success) throw new Error("Imgur upload failed");
const imageUrl = data.data.link;
console.log("Uploaded image URL:", imageUrl);
const googleFormData = new FormData();
googleFormData.append(ENTRY_ID, imageUrl);
await fetch(GOOGLE_FORM_URL, {
method: "POST",
body: googleFormData,
mode: "no-cors",
});
statusText.textContent = "Upload successful!";
alert("Image uploaded and submitted successfully ☻");
location.reload();
} catch (error) {
console.error(error);
statusText.textContent = "Error uploading image.";
alert("Error uploading image or submitting to Google Form.");
} finally {
submitButton.disabled = false;
}
});
async function fetchImages() {
if (!DISPLAY_IMAGES) {
console.log("Image display is disabled.");
return;
}
try {
const response = await fetch(GOOGLE_SHEET_URL);
const csvText = await response.text();
const rows = csvText.split("\n").slice(1);
const gallery = document.getElementById("gallery");
gallery.innerHTML = "";
rows.reverse().forEach((row) => {
const columns = row.split(",");
if (columns.length < 2) return;
const timestamp = columns[0].trim();
const imgUrl = columns[1].trim().replace(/"/g, "");
if (imgUrl.startsWith("http")) {
const div = document.createElement("div");
div.classList.add("image-container");
div.innerHTML = `
<img src="${imgUrl}" alt="drawing">
<p>${timestamp}</p>
`;
gallery.appendChild(div);
}
});
} catch (error) {
console.error("Error fetching images:", error);
document.getElementById("gallery").textContent = "Failed to load images.";
}
}
fetchImages();
(i.e. the brush strokes aren't visible). i'm considering leaving the webmaster an email, but i'm unsure if they're still actively keeping up with messages (their last activity seems to be march of last year). i'm unsure if this is something that anyone besides the creator of the code can help with, but i figured it'd be worth a shot anyway. do you use this drawbox on your site? if so, have you ran into this problem, and have you found any ways to fix it?thanks for reading  |
Posts & Arts: 66/1k.beats
Author
