diff --git a/README.md b/README.md
index 041b2d2875b4b3a2f71223c541c416d6131aafb7..8c9924848fbabc3cb4446ec63327b6245d656a2a 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,6 @@ video = p.createVideo('2023-03-07_part58.mp4', () => {
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. S'il marche à contressens, alors clique sur le bouton `Going back`.
Tes clics sont enregistrés dans la zone de texte. Fais des sauvegardes fréquentes. Tu peux importer une sauvegarde simplement en collant le contenu et en cliquant sur le bouton `Import`.
diff --git a/index.html b/index.html
index ccca75526ffac1fc5f077b090167e9c430622d92..f92b51f30600b2c53b3b38890301c6a1f04e5ae6 100644
--- a/index.html
+++ b/index.html
@@ -62,13 +62,14 @@
</p>
<p>
Manifestants enregistrés : <span id="manifestants">0</span><br>
+ <small></small> <button id="back">Going back</button><br>
<textarea rows="2" cols="100"></textarea> <button id="import">Import</button><br>
- <small></small>
</p>
<script>
let mode = 'start'
let people = []
let zoom = {x: 0, y: 0, k: 1}
+ let hovered_person_index
const comptage = p => {
/* Global variables */
@@ -115,14 +116,20 @@
}
draw_people = function () {
- for (const person of people) {
+ for (let i = 0; i < people.length; i++) {
+ const person = people[i]
if (Math.abs(person.t - video.time()) < 0.5) {
p.push()
p.noStroke()
p.fill('rgba(0, 255, 0, 0.5)')
const coord = coord_to_local(person)
+ if (person.back) {
+ p.fill('rgba(255, 0, 0, 0.5)')
+ }
if (p.dist(p.mouseX, p.mouseY, coord.x, coord.y) < 10) {
p.fill('rgba(0, 0, 255, 0.5)')
+ set_hovered(i)
+ hovered_person_index = i
document.querySelector('small').textContent = "Hovered person: " + JSON.stringify(person)
}
p.circle(coord.x, coord.y, 10)
@@ -131,6 +138,33 @@
}
}
+ set_hovered = function(i) {
+ hovered_person_index = i
+ document.querySelector('small').textContent = "Hovered person: " + JSON.stringify(people[i])
+ const button = document.querySelector('#back')
+ if (people[i].back) {
+ button.textContent = 'Going forwards'
+ } else {
+ button.textContent = 'Going back'
+ }
+ }
+
+ /**
+ * Label the last hovered person as going back or not
+ */
+ p.label_back = function () {
+ if (!people[hovered_person_index].back) {
+ people[hovered_person_index]['back'] = true
+ document.querySelector('#back').textContent = "Going forwards"
+ } else {
+ people[hovered_person_index]['back'] = false
+ document.querySelector('#back').textContent = "Going back"
+ }
+ document.querySelector('textarea').value = JSON.stringify(people)
+ count_manifestants()
+ document.querySelector('small').textContent = "Hovered person: " + JSON.stringify(people[hovered_person_index])
+ }
+
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
@@ -151,20 +185,20 @@
const person = {
t: video.time(),
x: coord.x,
- y: coord.y
+ y: coord.y,
+ back: false
}
people.push(person)
- document.querySelector('#manifestants').textContent = people.length
+ count_manifestants()
document.querySelector('textarea').value = JSON.stringify(people)
- // console.log(JSON.stringify(people))
}
p.keyPressed = function () {
- if (p.keyCode === p.RIGHT_ARROW) {
+ if (p.keyCode === p.RIGHT_ARROW || p.keyCode === 69) {
p.forward()
- } else if (p.keyCode === p.LEFT_ARROW) {
+ } else if (p.keyCode === p.LEFT_ARROW || p.keyCode === 65) {
p.backward()
- } else if (p.keyCode === p.DOWN_ARROW) {
+ } else if (p.keyCode === p.DOWN_ARROW || p.keyCode === 90) {
p.pause()
}
}
@@ -184,22 +218,48 @@
p.pause = function () {
video.pause()
}
+
+ p.import = function() {
+ people = JSON.parse(document.querySelector('textarea').value)
+
+ // Make sure that the data is in the correct format
+ for (let person of people) {
+ if (!('back' in person)) {
+ person.back = false
+ }
+ }
+ document.querySelector('textarea').value = JSON.stringify(people)
+
+ count_manifestants()
+ }
+
+ count_manifestants = function() {
+ let forward = 0
+ let backward = 0
+ for (const person of people) {
+ if (person.back) {
+ backward++
+ } else {
+ forward++
+ }
+ }
+ document.querySelector('#manifestants').textContent = `${forward} - ${backward} = ${forward-backward}`
+ }
}
+
let compt = new p5(comptage, 'comptage')
document.querySelector('button#rewind').addEventListener('click', compt.backward)
document.querySelector('button#pause').addEventListener('click', compt.pause)
document.querySelector('button#play').addEventListener('click', compt.forward)
- document.querySelector('button#import').addEventListener('click', (event) => {
- people = JSON.parse(document.querySelector('textarea').value)
- document.querySelector('#manifestants').textContent = people.length
- })
+ document.querySelector('button#import').addEventListener('click', compt.import)
// 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)
+ document.querySelector('button#back').addEventListener('click', compt.label_back)
</script>
</body>