logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 10:10:39 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: logan:bc1fffe07dd4c4b41ca6822efd00177e3cc77727
Branches Tags
logan:main
...
compare: logan:feb9c1cc6ddbdd90f3d3b61fc953498e639be128
Branches Tags
logan:main

2 commits
bc1fffe07d ... feb9c1cc6d

Author SHA1 Message Date
reddishquill371 feb9c1cc6d working on canvas js color switcher 2024-11-13 18:37:27 -06:00
th3keyboard 643e535a1f changed toolbar, not finished 2024-11-13 18:31:14 -06:00
3 changed files with 128 additions and 58 deletions
Show stats Expand all files Collapse all files

56
static/canvas.css
View file

@ -12,6 +12,7 @@ html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0px; margin: 0px;
overflow: hidden;
} }
.wrapper { .wrapper {
@ -86,21 +87,26 @@ html, body {
bottom: 0; bottom: 0;
} }
.toolbarItems {
display: flex; .toolbarItems label, input {
flex-direction: column; float: left;
justify-content: start; padding: 8px;
font-weight: 900; font-size: 14px;
color: white; color: white;
text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 20px;
width: 20px;
} }
.strokePicker { .toolbarItems button {
display: flex;
flex-direction: row;
justify-content: space-around;
float: right;
padding: 16px;
}
.strokePicker{
margin: 2px;
padding: 0; padding: 0;
margin: 0;
width: 100%;
} }
.strokePicker:hover { .strokePicker:hover {
@ -149,4 +155,32 @@ canvas {
.toolbar { .toolbar {
font-size: 80%; font-size: 80%;
} }
.toolbarItems label, input {
float: left;
padding: 4px;
font-size: 7.5px;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.toolbarItems button {
display: flex;
flex-direction: row;
justify-content: space-around;
float: right;
padding: 8px;
padding-left: 24px;
}
.strokePicker{
margin: 2px;
height: 16px;
width: 60px;
}
.strokePicker:hover {
cursor: pointer;
}
} }

121
static/canvas.html
View file

@ -24,61 +24,90 @@
<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas> <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="d-flex align-items-center toolbar"> <div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems"> <div class="toolbarItems">
<!--extra space for toolbar--> <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255, 255, 255);" type="button" onclick="changeColor()"></button>
</div> </div>
<div class="toolbarItems"> <div class="toolbarItems">
<label for="stroke">Strokes</label> <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0, 0, 0);" type="button" onclick="changeColor()"></button>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div> </div>
<div class="toolbarItems"> <div class="toolbarItems">
<!--extra space for toolbar--> <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,64,64);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,255);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(64,0,255);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,64,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(192,192,192);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,0,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,255,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,255,0);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,255,255);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,247);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,0,255);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,255,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,255,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,255,255);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,255);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,0,128);" type="button" onclick="changeColor()"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255,128,64);" type="button" onclick="changeColor()"></button>
</div> </div>
</div> </div>
<!--</div>--> <!--</div>-->
<!--note to self: above IS the canvas--> <!--note to self: above IS the canvas-->
</div> </div>
<div id="toolbar" class="d-flex toolbar flex-wrap">
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255, 255, 255);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0, 0, 0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,0);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,128);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
</div>
<div class="toolbarItems">
<button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
</div>
<!--<div class="toolbarItems">
<label for="stroke">Strokes</label>
<input id="stroke" name="stroke" type="color" class="strokePicker">
</div>-->
</div>
<script src="./canvas.js"></script> <script src="./canvas.js"></script>
</body> </body>
</html> </html>

9
static/canvas.js
View file

@ -121,6 +121,13 @@ function moveOffset(x, y) {
offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10); offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
} }
function changeColor() {
var button = document.getElementById("colorPicker");
var style = getComputedStyle(button);
console.log(style['background-color']);
}
canvas.addEventListener("wheel", async (e) => { canvas.addEventListener("wheel", async (e) => {
let mouse = mousePosition(e); let mouse = mousePosition(e);
let oldScale = scale; let oldScale = scale;
@ -163,7 +170,7 @@ canvas.addEventListener("mouseup", async (e) => {
if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) { if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
return; return;
} }
setPixel(image.data, cx, cy, [0, 0, 255, 255]); setPixel(image.data, cx, cy, pixelColor);
await redraw(); await redraw();
draw(); draw();
} }