mirror of
https://github.com/He4eT/browser-milje-2077.git
synced 2026-05-04 17:07:24 +00:00
Cleaup
This commit is contained in:
parent
7dcf6efdef
commit
5a8128c25f
5 changed files with 42 additions and 49 deletions
|
|
@ -1,9 +1,4 @@
|
||||||
# TODO
|
# TODO
|
||||||
|
|
||||||
- Pointer events
|
|
||||||
- Popup (hide milje, open settings)
|
|
||||||
- Settings page
|
|
||||||
- Params: color, density
|
|
||||||
- Screenshots
|
- Screenshots
|
||||||
- README
|
- README
|
||||||
- Live reload
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue