Union/ProjectLighthouse
1
0
Fork 0
mirror of https://github.com/LBPUnion/ProjectLighthouse.git synced 2025-08-12 23:08:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Photo subject proposal

Browse source
This commit is contained in:
LumaLivy 2021-12-17 23:58:16 -05:00
commit 5cb2627320
2 changed files with 121 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml
View file

@ -64,6 +64,17 @@
gtag('config', '@ServerSettings.Instance.GoogleAnalyticsId'); gtag('config', '@ServerSettings.Instance.GoogleAnalyticsId');
</script> </script>
} }
<style>
canvas.photo-subjects {
opacity: 1;
transition: opacity 0.3s;
}
canvas.hide-subjects {
opacity: 0;
}
</style>
</head> </head>
<body> <body>
<div class="pageContainer"> <div class="pageContainer">

113
ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml
View file

@ -1,7 +1,15 @@
@using LBPUnion.ProjectLighthouse.Types @using LBPUnion.ProjectLighthouse.Types
@model LBPUnion.ProjectLighthouse.Types.Photo @model LBPUnion.ProjectLighthouse.Types.Photo
<img src="/gameAssets/@Model.LargeHash" style="width: 100%; height: auto; border-radius: .28571429rem;">
<div style="position: relative">
<canvas class="hide-subjects" id="canvas-subjects-@Model.PhotoId" width="1920" height="1080"
style="position: absolute; /*width: 100%; height: 100%;*/ transform: rotate(180deg)"></canvas>
<img id="game-image-@Model.PhotoId" src="/gameAssets/@Model.LargeHash"
style="width: 100%; height: auto; border-radius: .28571429rem;">
</div>
<br> <br>
<p> <p>
@ -16,7 +24,104 @@
<p> <p>
<b>Photo contains @Model.Subjects.Count @(Model.Subjects.Count == 1 ? "person" : "people"):</b> <b>Photo contains @Model.Subjects.Count @(Model.Subjects.Count == 1 ? "person" : "people"):</b>
</p> </p>
@foreach (PhotoSubject subject in Model.Subjects) <div id="hover-subjects-@Model.PhotoId">
{ @foreach (PhotoSubject subject in Model.Subjects)
{
<a href="/user/@subject.UserId">@subject.User.Username</a> <a href="/user/@subject.UserId">@subject.User.Username</a>
} }
</div>
<script>
// set timeout so that the image heights have been calculated
// (after document renders)
window.setTimeout(function () {
var canvas = document.getElementById("canvas-subjects-@Model.PhotoId");
const hoverer = document.getElementById("hover-subjects-@Model.PhotoId");
const image = document.getElementById("game-image-@Model.PhotoId");
hoverer.addEventListener('mouseenter', function () {
canvas.className = "photo-subjects"
});
hoverer.addEventListener('mouseleave', function () {
canvas.className = "photo-subjects hide-subjects"
});
var context = canvas.getContext('2d');
const subjects = @Html.Raw(Json.Serialize(Model.Subjects.ToArray()));
canvas.width = image.offsetWidth;
canvas.height = image.clientHeight; // space for names to hang off
const w = canvas.width;
const h = canvas.height;
// halfwidth, halfheight
const hw = w / 2;
const hh = h / 2;
const colors = ["#a5599f", "#477f84", "#5fa559", "#a5595f"];
subjects.forEach((s, si) => {
const colour = colors[si % 4]
// Bounding box
const bounds = s.bounds.split(",").map(parseFloat);
const [x1, y1, x2, y2] = bounds.map(n => Math.min(Math.max(n, -1), 1));
const bx = hw - (x2 * hw);
const by = hh - (y2 * hh);
const bw = (x2 - x1) * hw;
const bh = (y2 - y1) * hh;
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = colour;
context.rect(bx, by, bw, bh);
context.stroke();
// Move into relative coordinates from bounding box
context.translate(bx, by);
// Username label
context.font = "16px Arial";
context.fillStyle = colour;
// Text width/height for the label background
const tw = context.measureText(s.user.username).width;
const th = 24;
// Check if the label will flow off the bottom of the frame
const overflowBottom = (bounds[3] * hh) > (hh - 24);
// Check if the label will flow off the left of the frame
const overflowLeft = (bounds[2] * hw - tw) < (-hw);
// Text x / y
const lx = overflowLeft ? -bw + 6 : -6;
const ly = overflowBottom ? -bh - 6 : 16;
// Label background x / y
const lbx = overflowLeft ? -bw : -2;
const lby = overflowBottom ? bh : -24;
// Set alignment
context.textAlign = overflowLeft ? "start" : "end";
// Draw background
context.fillRect(lbx, lby, tw + 16, th);
// Draw text, rotated back upright (canvas draws rotated 180deg)
context.fillStyle = "white";
context.rotate(Math.PI);
context.fillText(s.user.username, lx, ly);
// reset transform
context.setTransform(1, 0, 0, 1, 0, 0);
})
}, 100)
</script>