Skip to content

Commit

Permalink
Merge pull request #5 from Seshat-Global-History-Databank/scrollable-…
Browse files Browse the repository at this point in the history 
…year-slider-2

Optimise control panels for world map and polity map templates
  • Loading branch information
@edwardchalstrey1
edwardchalstrey1 authored Jul 2, 2024
2 parents 15d7cfe + d3ac4e5 commit af99c13
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 127 deletions.
72 changes: 35 additions & 37 deletions seshat/apps/core/static/core/js/map_functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,40 @@ function updateSliderOutput() {
}

function adjustSliderUp() {
slider.value = Number(slider.value) + 1;
increment = Number(document.getElementById('increment').value)
slider.value = Number(slider.value) + increment;
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
}

function adjustSliderDown() {
slider.value = Number(slider.value) - 1;
increment = Number(document.getElementById('increment').value)
slider.value = Number(slider.value) - increment;
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
}

function updateSliderValue(value) {
var sliderValue = document.getElementById('sliderValue');
switch (value) {
case '1':
sliderValue.textContent = '1 y/s'; // See the values in the startPlay function below
break;
case '2':
sliderValue.textContent = '5 y/s';
break;
case '3':
sliderValue.textContent = '20 y/s';
break;
case '4':
sliderValue.textContent = '50 y/s';
break;
case '5':
sliderValue.textContent = '100 y/s';
break;
}
function adjustSliderStartYear() {
slider.value = slider.min;
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
}

function adjustSliderEndYear() {
slider.value = slider.max;
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
}

function playRateValue() {
console.log('called')
var increment = Number(document.getElementById('increment').value);
var playRate = document.getElementById('playRate')
playRate.textContent = increment + ' y/s';
plotPolities();
}

Expand Down Expand Up @@ -86,21 +88,9 @@ function setSliderTicks (tickYears) {

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

var animationSpeed = parseFloat(playRateInput.value);
if (animationSpeed == 1) {
var yearsPerSecond = 1;
} else if (animationSpeed == 2) {
var yearsPerSecond = 5;
} else if (animationSpeed == 3) {
var yearsPerSecond = 20;
} else if (animationSpeed == 4) {
var yearsPerSecond = 50;
} else if (animationSpeed == 5) {
var yearsPerSecond = 100;
}

var milliseconds = 1 / (yearsPerSecond / 1000);
var milliseconds = 1 / (increment / 1000);

playInterval = setInterval(function () {
// Increment the slider value by 1
Expand Down Expand Up @@ -167,7 +157,7 @@ function switchBaseMap() {
baseShapeData.forEach(function (shape) {
// Ensure the geometry is not empty
if (shape.geometry && shape.geometry.type) {
gadmFillColour = 'white'; // Default fill colour
gadmFillColour = "#fffdf2"; // Default fill colour
if (shape.country.toLowerCase().includes('sea')) {
gadmFillColour = 'lightblue';
}
Expand Down Expand Up @@ -351,7 +341,7 @@ function updateLegend() {
colorBox.style.display = 'inline-block';
colorBox.style.width = '20px';
colorBox.style.height = '20px';
colorBox.style.backgroundColor = 'white';
colorBox.style.backgroundColor = '#fffdf2';
colorBox.style.border = '1px solid black';
colorBox.style.marginRight = '10px';

Expand All @@ -362,6 +352,14 @@ function updateLegend() {
}
}

function clearSelection() {
document.getElementById('popup').innerHTML = '';
shapesData.forEach(function (shape) {
shape['weight'] = 0;
});
plotPolities();
}

function updateCategoricalVariableSelection(variable){
var dropdown = document.getElementById('chooseCategoricalVariableSelection');
dropdown.innerHTML = '';
Expand Down
24 changes: 12 additions & 12 deletions seshat/apps/core/templates/core/polity_map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
</head>

<style>
input {
accent-color: teal;
}
</style>

<body>
{% block content %}
{% if content.include_polity_map %}
Expand All @@ -18,22 +24,16 @@
<div>
<h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
<label for="enterYear">Enter year:</label>
<input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;""><button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
<input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;""><br>
<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><br>
<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><br>
<label for="playRate">Speed: </label>
<input type="range" name="playRate" id="playRate" min="1" max="5" value="2" class="slider" list="tickmarks"
onchange="updateSliderValue(this.value)">
<datalist id="tickmarks">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
<span id="sliderValue">5 y/s</span><br>
<label for="opacitySlide">Opacity:</label>
<input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider"
onchange="plotPolities()" style="width: 150px;">
Expand Down
Loading

0 comments on commit af99c13

Please sign in to comment.