This commit is contained in:
He4eT 2024-08-15 21:23:45 +02:00
commit 5a8128c25f
5 changed files with 42 additions and 49 deletions

View file

@ -1,9 +1,4 @@
# TODO # TODO
- Pointer events
- Popup (hide milje, open settings)
- Settings page
- Params: color, density
- Screenshots - Screenshots
- README - README
- Live reload

View file

@ -179,20 +179,27 @@ function getCanvas(size) {
/** @see https://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas */ /** @see https://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas */
function scaleImageData(imageData, scale, ctx) { function scaleImageData(imageData, scale, ctx) {
const scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale) const scaled = ctx.createImageData(
imageData.width * scale,
imageData.height * scale,
)
const subLine = ctx.createImageData(scale, 1).data const subLine = ctx.createImageData(scale, 1).data
for (let row = 0; row < imageData.height; row++) { for (let row = 0; row < imageData.height; row++) {
for (let col = 0; col < imageData.width; col++) { for (let col = 0; col < imageData.width; col++) {
const sourcePixel = imageData.data.subarray( const sourcePixel = imageData.data.subarray(
(row * imageData.width + col) * 4, (row * imageData.width + col) * 4,
(row * imageData.width + col) * 4 + 4) (row * imageData.width + col) * 4 + 4,
)
for (let x = 0; x < scale; x++) { for (let x = 0; x < scale; x++) {
subLine.set(sourcePixel, x * 4) subLine.set(sourcePixel, x * 4)
} }
for (let y = 0; y < scale; y++) { for (let y = 0; y < scale; y++) {
const destRow = row * scale + y const destRow = row * scale + y
const destCol = col * scale const destCol = col * scale
scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4) scaled.data.set(
subLine,
(destRow * scaled.width + destCol) * 4,
)
} }
} }
} }

View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TV off</title> <title>TV off</title>
@ -11,8 +11,8 @@
background: gray; background: gray;
} }
</style> </style>
</head> </head>
<body> <body>
<script src="../../content_scripts/milje.js"></script> <script src="../../content_scripts/milje.js"></script>
</body> </body>
</html> </html>

View file

@ -8,29 +8,23 @@
body { body {
font-family: sans; font-family: sans;
} }
.form { .form {
width: 100%; width: 100%;
} }
.form hr { .form hr {
margin: 16px 0; margin: 16px 0;
} }
.form-group { .form-group {
margin-bottom: 16px; margin-bottom: 16px;
} }
.form-group label { .form-group label {
display: block; display: block;
} }
.form-group input, .form button { .form-group input, .form button {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.color-slider { .color-slider {
width: 100%; width: 100%;
} }

View file

@ -8,18 +8,15 @@
text-align: center; text-align: center;
font-family: sans; font-family: sans;
} }
main { main {
width: 200px; width: 200px;
} }
button { button {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
margin: 8px 0; margin: 8px 0;
} }
</style> </style>
</head> </head>
<body> <body>