Skip to content
Snippets Groups Projects
Commit df8c1300 authored by Aldo Gonzalez-Lorenzo's avatar Aldo Gonzalez-Lorenzo
Browse files

Add zoom

parent a6dc0224
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
README.md
+ 1
− 8
View file @ df8c1300
...@@ -12,16 +12,9 @@ Télécharge ta vidéo depuis la [page web](https://www.irif.fr/~charbit/Comptag ...@@ -12,16 +12,9 @@ Télécharge ta vidéo depuis la [page web](https://www.irif.fr/~charbit/Comptag
video = p.createVideo('2023-03-07_part58.mp4', () => { video = p.createVideo('2023-03-07_part58.mp4', () => {
``` ```
Selon la taille de ton écran, tu peux modifier cette partie du code :
```javascript
// set_video_height(600)
set_video_width(1400)
```
## Utilisation ## Utilisation
Tu peux controller la vidéo avec les trois boutons ou avec les touches `Left`, `Bottom` et `Right`, respectivement. Tu peux contrôler la vidéo avec les trois boutons ou avec les touches `Left`, `Bottom` et `Right`, respectivement. Tu peux aussi régler l'offset horizontal et vertical, le zoom et la taille de la vidéo.
Clique sur la tête d'un manifestant quand il traverse la ligne rouge. Un marqueur sera affiché durant une seconde. Clique sur la tête d'un manifestant quand il traverse la ligne rouge. Un marqueur sera affiché durant une seconde.
......
index.html
+ 76
− 16
View file @ df8c1300
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<title>Comptage manifestants</title> <title>Comptage manifestants</title>
<meta name="author" content="Aldo Gonzalez-Lorenzo"> <meta name="author" content="Aldo Gonzalez-Lorenzo">
<style> <style>
#comptage { #comptage canvas {
cursor: crosshair; cursor: crosshair;
} }
.container { .container {
...@@ -19,6 +19,12 @@ ...@@ -19,6 +19,12 @@
p { p {
margin: 2px; margin: 2px;
} }
input[type="number"] {
width: 3rem;
}
label {
cursor: help;
}
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head> </head>
...@@ -30,18 +36,39 @@ ...@@ -30,18 +36,39 @@
Time: <span id="time"></span> Time: <span id="time"></span>
</p> </p>
<p> <p>
<button id="rewind">Rewind</button> <button id="rewind" title="Go back 0.5 seconds">Rewind</button>
<button id="pause">Pause</button> <button id="pause">Pause</button>
<button id="play">Play</button> <button id="play">Play</button>
</p> </p>
</div> </div>
<p>
<label title="Value between 0 and 1">
X offset
<input id="zoom_x" type="number" step= "0.01" value="0" min="0" max="1">
</label>
<label title="Value between 0 and 1">
Y offset
<input id="zoom_y" type="number" step= "0.01" value="0" min="0" max="1">
</label>
<label title="Value between 0 and 1">
Zoom
<input id="zoom_k" type="number" step= "0.1" value="1" min="0.1">
</label>
<label title="Value between 0 and 1">
Canvas size
<input id="zoom_cs" type="number" step= "0.1" value=".4" min="0.1">
</label>
<!-- <button id="zoom">Resize</button> -->
</p>
<p> <p>
Manifestants enregistrés : <span id="manifestants">0</span><br> Manifestants enregistrés : <span id="manifestants">0</span><br>
<textarea rows="2" cols="100"></textarea> <button id="import">Import</button> <textarea rows="2" cols="100"></textarea> <button id="import">Import</button><br>
<small></small>
</p> </p>
<script> <script>
let mode = 'start' let mode = 'start'
let people = [] let people = []
let zoom = {x: 0, y: 0, k: 1}
const comptage = p => { const comptage = p => {
/* Global variables */ /* Global variables */
...@@ -54,29 +81,35 @@ ...@@ -54,29 +81,35 @@
video.volume(0) video.volume(0)
video.play() video.play()
video.pause() video.pause()
// set_video_height(600) p.set_canvas_size()
set_video_width(1700)
video.hide() // hides the html video loader video.hide() // hides the html video loader
}) })
} }
// Set the height of the video to a confortable size // Set the height of the video to a confortable size
set_video_height = function (h) { p.set_canvas_size = function () {
video.size(h * (video.width / video.height), h) const size = Number(document.querySelector('input#zoom_cs').value)
p.resizeCanvas(video.width, video.height) p.resizeCanvas(size*video.width, size*video.height)
zoom.k = size
document.querySelector('#zoom_k').value = size
} }
// Set the width of the video to a confortable size // Set the width of the video to a confortable size
set_video_width = function (w) { p.set_zoom = function () {
video.size(w, w * (video.height / video.width)) zoom.x = Number(document.querySelector('#zoom_x').value)
p.resizeCanvas(video.width, video.height) zoom.y = Number(document.querySelector('#zoom_y').value)
zoom.k = Number(document.querySelector('#zoom_k').value)
} }
p.draw = function () { p.draw = function () {
p.background(220) p.background(240)
let img = video.get() let img = video.get()
p.image(img, 0, 0) // redraws the video frame by frame //p.image(img, 0, 0) // redraws the video frame by frame
p.image(
img,
- zoom.x*img.width*zoom.k, - zoom.y*img.height*zoom.k, img.width*zoom.k, img.height*zoom.k,
) // redraws the video frame by frame
draw_people() draw_people()
document.querySelector('#time').textContent = `${p.nf(video.time(), 0, 2)} / ${video.duration()}` document.querySelector('#time').textContent = `${p.nf(video.time(), 0, 2)} / ${video.duration()}`
} }
...@@ -87,20 +120,38 @@ ...@@ -87,20 +120,38 @@
p.push() p.push()
p.noStroke() p.noStroke()
p.fill('rgba(0, 255, 0, 0.5)') p.fill('rgba(0, 255, 0, 0.5)')
p.circle(person.x * p.width, person.y * p.height, 10) const coord = coord_to_local(person)
if (p.dist(p.mouseX, p.mouseY, coord.x, coord.y) < 10) {
p.fill('rgba(0, 0, 255, 0.5)')
document.querySelector('small').textContent = "Hovered person: " + JSON.stringify(person)
}
p.circle(coord.x, coord.y, 10)
p.pop() p.pop()
} }
} }
} }
coord_to_global = function(coord) {
const x = coord.x / (zoom.k*video.width ) + zoom.x
const y = coord.y / (zoom.k*video.height) + zoom.y
return {x: x, y: y}
}
coord_to_local = function(coord) {
const x = (coord.x - zoom.x) * video.width * zoom.k
const y = (coord.y - zoom.y) * video.height * zoom.k
return {x: x, y: y}
}
p.mousePressed = function () { p.mousePressed = function () {
if (!(0 <= p.mouseX && p.mouseX <= p.width && 0 <= p.mouseY && p.mouseY <= p.height)) { if (!(0 <= p.mouseX && p.mouseX <= p.width && 0 <= p.mouseY && p.mouseY <= p.height)) {
return return
} }
const coord = coord_to_global({x: p.mouseX, y: p.mouseY})
const person = { const person = {
t: video.time(), t: video.time(),
x: p.mouseX / p.width, x: coord.x,
y: p.mouseY / p.height y: coord.y
} }
people.push(person) people.push(person)
document.querySelector('#manifestants').textContent = people.length document.querySelector('#manifestants').textContent = people.length
...@@ -118,6 +169,10 @@ ...@@ -118,6 +169,10 @@
} }
} }
p.mouseOver = function() {
console.log(p.mouseX, p.mouseY)
}
p.forward = function () { p.forward = function () {
video.play() video.play()
} }
...@@ -140,6 +195,11 @@ ...@@ -140,6 +195,11 @@
people = JSON.parse(document.querySelector('textarea').value) people = JSON.parse(document.querySelector('textarea').value)
document.querySelector('#manifestants').textContent = people.length document.querySelector('#manifestants').textContent = people.length
}) })
// document.querySelector('button#zoom').addEventListener('click', compt.set_zoom)
for (const input of document.querySelectorAll('input[type="number"]')) {
input.addEventListener('input', compt.set_zoom)
}
document.querySelector('input#zoom_cs').addEventListener('input', compt.set_canvas_size)
</script> </script>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment