ENGO150/FabrikaHradekTour
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made the map working

Browse Source 
no I need to add all the points
This commit is contained in:
Václav Šmejkal 2023-05-28 16:04:04 +02:00
parent 3b16383864
commit 7b88652257
Signed by: ENGO150
GPG Key ID: 4A57E86482968843
4 changed files with 163 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -1,19 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="cs"> <html lang="cs">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabrika Hrádek Tour</title> <title>Fabrika Hrádek Tour</title>
<link rel="icon" type="image/x-icon" href="http://207.180.212.190/fht/favicon.ico"> <link rel="icon" type="image/x-icon" href="http://207.180.212.190/fht/favicon.ico">
<link rel="stylesheet" href="./res/style.css"> <link rel="stylesheet" href="./res/style.css">
<script src="./res/script.js"></script> <script src="./res/script.js"></script>
</head> </head>
<body> <body>
<img src="http://207.180.212.190/fht/map.png" usemap="#air_map"> <div class="imgbox">
<map name="air_map"> <img class="center-fit" src="http://207.180.212.190/fht/map.jpg" draggable="false">
<area shape="circle" coords="100,100,30" href="4.htm" alt="4"> </div>
</map> </body>
</body>
</html> </html>

170
res/panorama/script.js
View File

@ -1,86 +1,86 @@
//CONSTANTS //CONSTANTS
const WIDTH = 1000; const WIDTH = 1000;
let ASPECT_RATIO = 4/3; //yes constant let ASPECT_RATIO = 4/3; //yes constant
const MOVE_PIECES = 1/32; const MOVE_PIECES = 1/32;
//CANVAS SHIT //CANVAS SHIT
let ctx; let ctx;
let canvas; let canvas;
let img; //THE PANORAMA IMAGE let img; //THE PANORAMA IMAGE
let img_url = ""; let img_url = "";
//CURRENT IMAGE STATE //CURRENT IMAGE STATE
let x1 = WIDTH / 2; let x1 = WIDTH / 2;
let x2; //TODO? Unused let x2; //TODO? Unused
let turn = 0; //NEGATIVE MEANS IT IS TURNED LEFT FROM CENTER, POSITIVE IS RIGHT let turn = 0; //NEGATIVE MEANS IT IS TURNED LEFT FROM CENTER, POSITIVE IS RIGHT
function load_panorama() function load_panorama()
{ {
check_param(); check_param();
ASPECT_RATIO = 1 / ASPECT_RATIO; //FLIP THE RATIO COZ I AM FUCKING DUMB ASPECT_RATIO = 1 / ASPECT_RATIO; //FLIP THE RATIO COZ I AM FUCKING DUMB
canvas = document.getElementById('panorama'); canvas = document.getElementById('panorama');
ctx = canvas.getContext('2d'); ctx = canvas.getContext('2d');
img = new Image(); //IMAGE img = new Image(); //IMAGE
ctx.canvas.height = WIDTH * ASPECT_RATIO; //TODO! Possible shit happening ctx.canvas.height = WIDTH * ASPECT_RATIO; //TODO! Possible shit happening
ctx.canvas.width = WIDTH / 2; //USER WILL SEE A 1/2 OF THE PANORAMA AT THE TIME ctx.canvas.width = WIDTH / 2; //USER WILL SEE A 1/2 OF THE PANORAMA AT THE TIME
img.onload = function() img.onload = function()
{ {
x2 = img.width; x2 = img.width;
ctx.drawImage(img, x1, 0, x2, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img ctx.drawImage(img, x1, 0, x2, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img
}; };
img.src = img_url; img.src = img_url;
} }
function turn_left() function turn_left()
{ {
if (turn < 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0) if (turn < 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0)
{ {
//ctx.drawImage(img, x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1), img.height, 0 - x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1) * WIDTH/img.width, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img //TODO //ctx.drawImage(img, x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1), img.height, 0 - x1, 0, img.width * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2) + 1) * WIDTH/img.width, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img //TODO
return; return;
} }
//MOVE AN 8th TO LEFT //MOVE AN 8th TO LEFT
x1 -= WIDTH * MOVE_PIECES; x1 -= WIDTH * MOVE_PIECES;
x2 -= WIDTH * MOVE_PIECES; x2 -= WIDTH * MOVE_PIECES;
ctx.drawImage(img, x1, 0, img.width - WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW ctx.drawImage(img, x1, 0, img.width - WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW
turn--; turn--;
} }
function turn_right() function turn_right()
{ {
if (turn > 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0) if (turn > 0 && (Math.abs(turn) - (1/MOVE_PIECES / 2)) >= 0)
{ {
//ctx.drawImage(img, img.width - WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), 0, img.width, img.height, 0, 0, WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), WIDTH * ASPECT_RATIO); //DRAW RIGHT PART ON THE LEFT SIDE //TODO //ctx.drawImage(img, img.width - WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), 0, img.width, img.height, 0, 0, WIDTH * MOVE_PIECES * (Math.abs(turn) - (1/MOVE_PIECES / 2)), WIDTH * ASPECT_RATIO); //DRAW RIGHT PART ON THE LEFT SIDE //TODO
return; return;
} }
//MOVE AN 8th TO LEFT //MOVE AN 8th TO LEFT
x1 += WIDTH * MOVE_PIECES; x1 += WIDTH * MOVE_PIECES;
x2 += WIDTH * MOVE_PIECES; x2 += WIDTH * MOVE_PIECES;
ctx.drawImage(img, x1, 0, img.width + WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW ctx.drawImage(img, x1, 0, img.width + WIDTH * MOVE_PIECES, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW
turn++; turn++;
} }
function check_param() function check_param()
{ {
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
img_url = params.get("img"); img_url = params.get("img");
if (img_url == null) if (img_url == null)
{ {
alert("This link seems to be corrupted!"); alert("This link seems to be corrupted!");
open("../index.html", "_self"); open("../index.html", "_self");
} }
img_url = './img/' + img_url + '.jpg'; //TODO: Change img_url = 'http://207.180.212.190/fht/fabrika_imgs/' + img_url + '.jpg'; //TODO: Change
} }

47
res/script.js
View File

@ -1,4 +1,45 @@
function open_panorama() const points =
{ [
open("./res/panorama.html?img=" + document.getElementById("text_test").value, "_self"); [1240, 625, "1;2"]
];
const tolerance = 3;
window.onload = function()
{
document.querySelector("img").onclick = (e) =>
{
let x = e.pageX - e.target.offsetLeft;
let y = e.pageY - e.target.offsetTop;
for (let i = 0; i < points.length; i++)
{
if
(
(Math.abs(x - points[i][0]) <= tolerance || -Math.abs(x - points[i][0]) >= tolerance) &&
(Math.abs(y - points[i][1]) <= tolerance || -Math.abs(y - points[i][1]) >= tolerance)
)
{
move(points[i][2]);
break;
}
}
}
}
function open_panorama(img)
{
open("./res/panorama.html?img=" + img, "_self");
}
function move(img)
{
if (!img.includes(";"))
{
open_panorama(img);
} else
{
let imgs = img.split(";");
open_panorama(imgs[Math.floor(Math.random() * imgs.length)]);
}
} }

28
res/style.css
View File

@ -1,12 +1,18 @@
img *
{ {
width: 50%; margin: 0;
display: block; padding: 0;
margin-left: auto; }
margin-top: auto;
} .imgbox
{
area display: grid;
{ height: 100%;
fill: blue; }
.center-fit
{
max-width: 100%;
max-height: 100vh;
margin: auto;
} }