BETTER GRIDS

This commit is contained in:
ajuvercr 2019-10-20 19:32:05 +02:00
parent fd06dceeb2
commit 7165e7339f
3 changed files with 131 additions and 26 deletions

View file

@ -12,10 +12,40 @@
<div id="mySidepanel" class="sidepanel"> <div id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&times;</a> <a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a> <div class="section">
<a href="#">Clients</a> <span class="title">Grid</span>
<a href="#">Contact</a> <div class="prop gridline">
<div class="item">
<label for="mwidth" class="input">Line width</label>
<input type="number" id="mwidth" value="4">
</div>
<div class="item">
<label for="mwidth" class="input">Seperation</label>
<input type="number" id="mwidth" value="100">
</div>
<div class="item">
<label for="mwidth" class="input">Color</label>
<input type="text" id="mwidth" value="#333">
</div>
</div>
<hr>
<div class="prop gridline">
<div class="item">
<label for="mwidth" class="input">Line width</label>
<input type="number" id="mwidth" value="2">
</div>
<div class="item">
<label for="mwidth" class="input">Seperation</label>
<input type="number" id="mwidth" value="20">
</div>
<div class="item">
<label for="mwidth" class="input">Color</label>
<input type="text" id="mwidth" value="#333">
</div>
</div>
</div>
</div> </div>
<div id="canvasWrapper" class="wrapper"> <div id="canvasWrapper" class="wrapper">
@ -33,7 +63,7 @@
if (nav_open) { if (nav_open) {
document.getElementById("mySidepanel").style.width = "0"; document.getElementById("mySidepanel").style.width = "0";
} else { } else {
document.getElementById("mySidepanel").style.width = "250px"; document.getElementById("mySidepanel").style.width = "350px";
} }
nav_open = !nav_open; nav_open = !nav_open;
} }

View file

@ -1,4 +1,25 @@
let gridlineEls:any;
let gridlineNeedsUpdate = true;
function get_line_widths(): string[][] {
if (gridlineNeedsUpdate) {
gridlineEls = document.getElementsByClassName("gridline");
gridlineNeedsUpdate = false;
}
const out: string[][] = [[], [], []];
for(let el of <any[]>gridlineEls) {
let i = 0;
for( let c of el.getElementsByTagName('input')) {
out[i].push(
c.value
);
i += 1;
}
}
return out;
}
function main() { function main() {
const canvas = <HTMLCanvasElement>document.getElementById("canvas"); const canvas = <HTMLCanvasElement>document.getElementById("canvas");
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -9,44 +30,52 @@ function main() {
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
ctx.translate(width / 2, height / 2); function draw() {
ctx.clearRect(0, 0, width, height);
ctx.save();
ctx.strokeStyle = "#333" ctx.translate(width / 2, height / 2);
draw_grid(
ctx, [width, 100, 20], [width / 2, height / 2], [width, height],
4, 0.30
);
ctx.fillStyle = "#ff5f00";
ctx.fillRect(0, 0, 100, 100); ctx.strokeStyle = "#333";
draw_grid(ctx, get_line_widths(), [width / 2, height / 2], [width, height]);
ctx.fillStyle = "#ff5f00";
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
requestAnimationFrame(draw);
}
console.log("hallo"); console.log("hallo");
draw();
} }
function draw_grid( function draw_grid(
ctx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D,
lines: number[], // number of pixels between lines, with smaller gettings lines lines: string[][], // number of pixels between lines, with smaller gettings lines
transform: [number, number], transform: [number, number],
size: [number, number], size: [number, number]) {
init_width = 2, factor = 0.5) {
ctx.save(); ctx.save();
ctx.translate(-transform[0], -transform[1]); ctx.translate(-transform[0], -transform[1]);
for (let i = lines[0].length - 1; i >= 0 ; i -= 1) {
for (let delta of lines) { ctx.lineWidth = parseInt(lines[0][i]);
ctx.lineWidth = init_width; const delta = parseInt(lines[1][i]);
ctx.strokeStyle = "transparent";
ctx.strokeStyle = lines[2][i];
let xoff = transform[0] % delta; let xoff = transform[0] % delta;
let yoff = transform[1] % delta; let yoff = transform[1] % delta;
ctx.beginPath(); ctx.beginPath();
for (let i = xoff; i < size[0]; i += delta) { for (let j = xoff; j < size[0]; j += delta) {
ctx.moveTo(i, 0); ctx.moveTo(j, 0);
ctx.lineTo(i, size[1]); ctx.lineTo(j, size[1]);
} }
for (let j = yoff; j < size[1]; j += delta) { for (let j = yoff; j < size[1]; j += delta) {
ctx.moveTo(0, j); ctx.moveTo(0, j);
@ -54,8 +83,6 @@ function draw_grid(
} }
ctx.stroke(); ctx.stroke();
init_width *= factor;
} }
ctx.restore(); ctx.restore();

View file

@ -28,10 +28,12 @@ $darkgrey: darken($grey, 20);
overflow-x: hidden; overflow-x: hidden;
padding-top: 60px; padding-top: 60px;
transition: 0.5s; transition: 0.5s;
a { a,
input,
p {
padding: 8px 8px 8px 32px; padding: 8px 8px 8px 32px;
text-decoration: none; text-decoration: none;
font-size: 25px; font-size: 20px;
color: white; color: white;
display: block; display: block;
transition: 0.3s; transition: 0.3s;
@ -47,6 +49,52 @@ $darkgrey: darken($grey, 20);
} }
} }
.section {
border: 2px solid $orange;
border-radius: 8px;
position: relative;
padding: 10px;
margin: 10px;
.title {
font-size: 24px;
color: $orange;
padding: 0 5px;
position: absolute;
top: -13px;
left: 8px;
display: inline-block;
background-color: $grey;
}
hr {
border: 1px dashed $lightgrey;
}
}
.prop {
margin: 10px;
color: white;
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
label {
width: 40%;
}
input {
font-size: 15px;
margin-top: 2px;
color: $orange;
padding: 5px 10px;
width: 40%;
background-color: $lightgrey;
}
}
.item+.item {
margin-top: 10px;
}
}
.openbtn { .openbtn {
position: absolute; position: absolute;
right: 5px; right: 5px;