made the map working
no I need to add all the points
This commit is contained in:
parent
3b16383864
commit
7b88652257
GPG Key ID:
4A57E86482968843
35
index.html
35
index.html
@ -1,19 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fabrika Hrádek Tour</title>
|
||||
<link rel="icon" type="image/x-icon" href="http://207.180.212.190/fht/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="./res/style.css">
|
||||
<script src="./res/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<img src="http://207.180.212.190/fht/map.png" usemap="#air_map">
|
||||
<map name="air_map">
|
||||
<area shape="circle" coords="100,100,30" href="4.htm" alt="4">
|
||||
</map>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fabrika Hrádek Tour</title>
|
||||
<link rel="icon" type="image/x-icon" href="http://207.180.212.190/fht/favicon.ico">
|
||||
|
||||
<link rel="stylesheet" href="./res/style.css">
|
||||
<script src="./res/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="imgbox">
|
||||
<img class="center-fit" src="http://207.180.212.190/fht/map.jpg" draggable="false">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,86 +1,86 @@
|
||||
//CONSTANTS
|
||||
const WIDTH = 1000;
|
||||
let ASPECT_RATIO = 4/3; //yes constant
|
||||
const MOVE_PIECES = 1/32;
|
||||
|
||||
//CANVAS SHIT
|
||||
let ctx;
|
||||
let canvas;
|
||||
let img; //THE PANORAMA IMAGE
|
||||
let img_url = "";
|
||||
|
||||
//CURRENT IMAGE STATE
|
||||
let x1 = WIDTH / 2;
|
||||
let x2; //TODO? Unused
|
||||
let turn = 0; //NEGATIVE MEANS IT IS TURNED LEFT FROM CENTER, POSITIVE IS RIGHT
|
||||
|
||||
function load_panorama()
|
||||
{
|
||||
check_param();
|
||||
|
||||
ASPECT_RATIO = 1 / ASPECT_RATIO; //FLIP THE RATIO COZ I AM FUCKING DUMB
|
||||
|
||||
canvas = document.getElementById('panorama');
|
||||
ctx = canvas.getContext('2d');
|
||||
img = new Image(); //IMAGE
|
||||
|
||||
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
|
||||
|
||||
img.onload = function()
|
||||
{
|
||||
x2 = img.width;
|
||||
ctx.drawImage(img, x1, 0, x2, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img
|
||||
};
|
||||
|
||||
img.src = img_url;
|
||||
}
|
||||
|
||||
function turn_left()
|
||||
{
|
||||
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
|
||||
return;
|
||||
}
|
||||
|
||||
//MOVE AN 8th TO LEFT
|
||||
x1 -= 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
|
||||
|
||||
turn--;
|
||||
}
|
||||
|
||||
function turn_right()
|
||||
{
|
||||
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
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//MOVE AN 8th TO LEFT
|
||||
x1 += 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
|
||||
|
||||
turn++;
|
||||
}
|
||||
|
||||
function check_param()
|
||||
{
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
img_url = params.get("img");
|
||||
|
||||
if (img_url == null)
|
||||
{
|
||||
alert("This link seems to be corrupted!");
|
||||
open("../index.html", "_self");
|
||||
}
|
||||
|
||||
img_url = './img/' + img_url + '.jpg'; //TODO: Change
|
||||
//CONSTANTS
|
||||
const WIDTH = 1000;
|
||||
let ASPECT_RATIO = 4/3; //yes constant
|
||||
const MOVE_PIECES = 1/32;
|
||||
|
||||
//CANVAS SHIT
|
||||
let ctx;
|
||||
let canvas;
|
||||
let img; //THE PANORAMA IMAGE
|
||||
let img_url = "";
|
||||
|
||||
//CURRENT IMAGE STATE
|
||||
let x1 = WIDTH / 2;
|
||||
let x2; //TODO? Unused
|
||||
let turn = 0; //NEGATIVE MEANS IT IS TURNED LEFT FROM CENTER, POSITIVE IS RIGHT
|
||||
|
||||
function load_panorama()
|
||||
{
|
||||
check_param();
|
||||
|
||||
ASPECT_RATIO = 1 / ASPECT_RATIO; //FLIP THE RATIO COZ I AM FUCKING DUMB
|
||||
|
||||
canvas = document.getElementById('panorama');
|
||||
ctx = canvas.getContext('2d');
|
||||
img = new Image(); //IMAGE
|
||||
|
||||
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
|
||||
|
||||
img.onload = function()
|
||||
{
|
||||
x2 = img.width;
|
||||
ctx.drawImage(img, x1, 0, x2, img.height, 0, 0, WIDTH, WIDTH * ASPECT_RATIO); //DRAW A HALF OF img
|
||||
};
|
||||
|
||||
img.src = img_url;
|
||||
}
|
||||
|
||||
function turn_left()
|
||||
{
|
||||
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
|
||||
return;
|
||||
}
|
||||
|
||||
//MOVE AN 8th TO LEFT
|
||||
x1 -= 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
|
||||
|
||||
turn--;
|
||||
}
|
||||
|
||||
function turn_right()
|
||||
{
|
||||
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
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//MOVE AN 8th TO LEFT
|
||||
x1 += 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
|
||||
|
||||
turn++;
|
||||
}
|
||||
|
||||
function check_param()
|
||||
{
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
img_url = params.get("img");
|
||||
|
||||
if (img_url == null)
|
||||
{
|
||||
alert("This link seems to be corrupted!");
|
||||
open("../index.html", "_self");
|
||||
}
|
||||
|
||||
img_url = 'http://207.180.212.190/fht/fabrika_imgs/' + img_url + '.jpg'; //TODO: Change
|
||||
}
|
||||
@ -1,4 +1,45 @@
|
||||
function open_panorama()
|
||||
{
|
||||
open("./res/panorama.html?img=" + document.getElementById("text_test").value, "_self");
|
||||
const points =
|
||||
[
|
||||
[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)]);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,18 @@
|
||||
img
|
||||
{
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
area
|
||||
{
|
||||
fill: blue;
|
||||
*
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.imgbox
|
||||
{
|
||||
display: grid;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.center-fit
|
||||
{
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
margin: auto;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user