Skip to content

Commit

Permalink
Merge pull request #83 from Seshat-Global-History-Databank/play-pause
Browse files Browse the repository at this point in the history 
Update play buttons
  • Loading branch information
@edwardchalstrey1
edwardchalstrey1 authored Aug 30, 2024
2 parents 99a7ccd + f742128 commit ec461b4
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 60 deletions.
44 changes: 24 additions & 20 deletions seshat/apps/core/static/core/js/map_functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,29 +149,35 @@ function setSliderTicks (tickYears) {
}
};

function startPlay() {
stopPlay(); // Clear existing interval before starting a new one
var increment = Number(document.getElementById('increment').value);
function playBack() {

var increment = Number(document.getElementById('increment').value);
var milliseconds = 1 / (increment / 1000);
var symbol = document.getElementById('playButton').innerHTML;
if (symbol === '▶️') {
playInterval = setInterval(function () {
// Increment the slider value by 1
slider.value = Number(slider.value) + 1;
enterYearInput.value = slider.value; // Sync enterYear input with dateSlide value
updateSliderOutput(); // Update the displayed year
plotPolities(); // This function is defined differently in the world_map and polity_map templates

// Stop playing when the slider reaches its maximum value
if (slider.value >= parseInt(slider.max)) {
stopPlay();
}
}, milliseconds); // Interval based on user input
document.getElementById('playButton').innerHTML = '⏸';
} else {
stopPlay();
}

playInterval = setInterval(function () {
// Increment the slider value by 1
slider.value = Number(slider.value) + 1;
enterYearInput.value = slider.value; // Sync enterYear input with dateSlide value
updateSliderOutput(); // Update the displayed year
plotPolities(); // This function is defined differently in the world_map and polity_map templates

// Stop playing when the slider reaches its maximum value
if (slider.value >= parseInt(slider.max)) {
stopPlay();
}
}, milliseconds); // Interval based on user input
}

function stopPlay() {
clearInterval(playInterval);
}
document.getElementById('playButton').innerHTML = '▶️';
};

function storeYear() {
var year = document.getElementById('enterYear').value;
Expand All @@ -186,13 +192,11 @@ function switchBaseMap() {
var base = document.getElementById("baseMapGADM").value

if (selectedMap === 'cesium') {
// Disable the play button and stop button when switching to the globe view
// Disable the play button when switching to the globe view
document.getElementById('playButton').disabled = true;
document.getElementById('stopButton').disabled = true;
} else {
// Enable the play button and stop button when switching to the map view
// Enable the play button when switching to the map view
document.getElementById('playButton').disabled = false;
document.getElementById('stopButton').disabled = false;
}

if (base == 'province') {
Expand Down
28 changes: 10 additions & 18 deletions seshat/apps/core/templates/core/polity_map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,19 +114,18 @@ <h2 class="h1 text-teal federicka-big" id="sliderDate"></h2>
<input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.7" class="slider"
onchange="plotPolities()" style="width: 150px;">
<label for="enterYear">Enter year:</label>
<input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
<input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;">
<p>🗣️ <i>Hit enter to set year.</i></p>
<label for="enterYear">Increment (years):</label>
<label for="increment">Play rate (years/second):</label>
<input type="number" id="increment" name="increment" value="10" style="width: 50px;" onchange="playRateValue()">
<button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
<button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
<p>🗣️ <i>Hit enter to set increment.</i></p>
<label for="playRate">Play rate: </label>
<span id="playRate">10 y/s</span><br>
<label for="playButton">Run animation:</label>
<button id="playButton" type="button" onclick="startPlay()">▶️</button>
<button id="stopButton" type="button" onclick="stopPlay()">⏸</button>
<p>🗣️ <i>Rate inaccurate at high speeds.</i></p>
<p style="width: 250px;">🗣️ <i>Hit enter to set play rate (inaccurate at high speeds).</i></p>
<div style="text-align: center;">
<button id="startButton" type="button" onclick="adjustSliderStartYear()">⏮️</button>
<button id="minusButton" type="button" onclick="adjustSliderDown()">⏪</button>
<button id="playButton" type="button" onclick="playBack()">▶️</button>
<button id="plusButton" type="button" onclick="adjustSliderUp()">⏩</button>
<button id="endButton" type="button" onclick="adjustSliderEndYear()">⏭️</button><br>
</div>
<fieldset>
<br>
<legend>
Expand Down Expand Up @@ -451,17 +450,10 @@ <h2 class="text-teal federicka-medium">Background map</h2>
}

var playInterval;
var playRateInput = document.getElementById("playRate");

// Add event listener to stop playing when adjusting the slider manually
slider.addEventListener("input", stopPlay);

// Add event listener to update play rate when the input changes
playRateInput.addEventListener("change", function () {
stopPlay(); // Stop current play if ongoing
startPlay(); // Start with the updated play rate
});

// Make sure Radio selection is kept on page refresh
document.addEventListener("DOMContentLoaded", function () {
// Get the country parameter from the URL
Expand Down
33 changes: 11 additions & 22 deletions seshat/apps/core/templates/core/world_map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,22 +338,18 @@ <h1 class="text-teal federicka-big">Seshat World Map</h1>
<!-- <label for="showCapitals">Show capital cities</label>
<input type="checkbox" id="showCapitals" name="showCapitals" onclick=plotPolities()><br><br> -->
<label for="enterYear">Enter year:</label>
<input type="number" id="enterYear" name="enterYear" value="{{ display_year }}" style="width: 75px;"
onchange="storeYear()">
<button id="startButton" type="button" onclick="adjustSliderStartYear()">Start</button>
<button id="endButton" type="button" onclick="adjustSliderEndYear()">End</button>
<input type="number" id="enterYear" name="enterYear" value="{{ display_year }}" style="width: 75px;" onchange="storeYear()">
<p>🗣️ <i>Hit enter to set year.</i></p>
<label for="enterYear">Increment (years):</label>
<input type="number" id="increment" name="increment" value="10" style="width: 50px;" onchange="playRateValue();">
<button id="minusButton" type="button" onclick="adjustSliderDown()">-</button>
<button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
<p>🗣️ <i>Hit enter to set increment.</i></p>
<label for="playRate">Play rate: </label>
<span id="playRate">10 y/s</span><br>
<label for="playButton">Run animation:</label>
<button id="playButton" type="button" onclick="startPlay()">▶️</button>
<button id="stopButton" type="button" onclick="stopPlay()">⏸</button>
<p>🗣️ <i>Rate inaccurate at high speeds.</i></p>
<label for="increment">Play rate (years/second):</label>
<input type="number" id="increment" name="increment" value="10" style="width: 50px;" onchange="playRateValue()">
<p style="width: 250px;">🗣️ <i>Hit enter to set play rate (inaccurate at high speeds).</i></p>
<div style="text-align: center;">
<button id="startButton" type="button" onclick="adjustSliderStartYear()">⏮️</button>
<button id="minusButton" type="button" onclick="adjustSliderDown()">⏪</button>
<button id="playButton" type="button" onclick="playBack()">▶️</button>
<button id="plusButton" type="button" onclick="adjustSliderUp()">⏩</button>
<button id="endButton" type="button" onclick="adjustSliderEndYear()">⏭️</button><br>
</div>
</fieldset>
<div id="baseMapControls" style="position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: flex-end;">
<fieldset>
Expand Down Expand Up @@ -1273,17 +1269,10 @@ <h1 class="text-teal sliderDate" id="sliderDate2"></h1>
}

var playInterval;
var playRateInput = document.getElementById("playRate");

// Add event listener to stop playing when adjusting the slider manually
slider.addEventListener("input", stopPlay);

// Add event listener to update play rate when the input changes
playRateInput.addEventListener("change", function () {
stopPlay(); // Stop current play if ongoing
startPlay(); // Start with the updated play rate
});

// Make sure Radio selection is kept on page refresh
document.addEventListener("DOMContentLoaded", function () {
// Get the country parameter from the URL
Expand Down

0 comments on commit ec461b4

Please sign in to comment.