Skip to content

Commit

Permalink
fixed display
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robaina
Robaina committed Feb 28, 2021
1 parent 528c7f4 commit 8107dee
Show file tree
Hide file tree
Showing 16 changed files with 191 additions and 55 deletions.
102 changes: 76 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Especies Exóticas Invasoras</title>
<link rel="icon" type="image/png" sizes="32x32" href="imgs/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="imgs/glauca.png">

<script src="libs/p5.min.js"></script>
<script src="libs/p5.dom.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="libs/fontawesome_all.min.css">
</head>

<!-- <body onclick="updateScreenEvent()" ontouchcancel="updateScreenEvent()" onresize="updateSize()"> -->
Expand All @@ -25,41 +26,90 @@
<div id="title">Invasión en el Cardonal-Tabaibal</div>
</div>

<div id="cnv_container"></div>
<div id="plot_container"></div>
<div class="centering_container">
<div id="cnv_container"></div>

<div class="plot_controls_container">
<div id="plot_container"></div>

<div class=" centering_container" id="controls_container">

<div class="control_group">
<div class="slider_container">
<div class="slider_name">N<sub>init</sub></div>
<input class="slider" id="ninit_slider" type="range" min="0" max="10" value="1" step="1" onchange="updateNinitSliderText(this.value);">
<div class="slider_value" id="ninit_slider_text">1</div>
</div>

<div class="slider_container">
<div class="slider_name">Dispersión máxima</div>
<input class="slider" id="dispersal_slider" type="range" min="1" max="10" value="1" step="1" onchange="updateDispersalSliderText(this.value);">
<div class="slider_value" id="dispersal_slider_text">1</div>
</div>
</div>

<div class="control_group">
<div class="slider_container">
<div class="slider_name">Producción Máxima Semillas</div>
<input class="slider" id="seed_production_slider" type="range" min="100" max="500" value="200" step="100" onchange="updateSeedProductionSliderText(this.value);">
<div class="slider_value" id="seed_production_slider_text">200</div>
</div>

<div class="slider_container">
<div class="slider_name">Eficiencia reproductiva</div>
<input class="slider" id="rep_eficiency_slider" type="range" min="0" max="1" value="0.1" step="0.05" onchange="updateRepEficiencySliderText(this.value);">
<div class="slider_value" id="rep_eficiency_slider_text">0.1</div>
</div>
</div>

<div class="control_group" id="button-controls">
<button class="button" id="start-button" onclick="startSimulation()"><i class="fas fa-play"></i></button>
<button class="button" id="reset-button" onclick="resetSimulation()"><i class="fas fa-undo"></i></button>
</div>

</div>

<div id="controls_container">
</div>

<div class="slider_container">
<div class="slider_name">N<sub>init</sub></div>
<input class="slider" id="ninit_slider" type="range" min="0" max="10" value="1" step="1" onchange="updateNinitSliderText(this.value);">
<div class="slider_value" id="ninit_slider_text">1</div>
</div>
</div>

<div class="slider_container">
<div class="slider_name">Dispersión máxima</div>
<input class="slider" id="dispersal_slider" type="range" min="1" max="10" value="1" step="1" onchange="updateDispersalSliderText(this.value);">
<div class="slider_value" id="dispersal_slider_text">1</div>
</div>
<!-- <div class=" centering_container" id="controls_container">
<div class="slider_container">
<div class="slider_name">Producción Máxima Semillas</div>
<input class="slider" id="seed_production_slider" type="range" min="100" max="500" value="200" step="100" onchange="updateSeedProductionSliderText(this.value);">
<div class="slider_value" id="seed_production_slider_text">200</div>
<div class="control_group">
<div class="slider_container">
<div class="slider_name">N<sub>init</sub></div>
<input class="slider" id="ninit_slider" type="range" min="0" max="10" value="1" step="1" onchange="updateNinitSliderText(this.value);">
<div class="slider_value" id="ninit_slider_text">1</div>
</div>
<div class="slider_container">
<div class="slider_name">Dispersión máxima</div>
<input class="slider" id="dispersal_slider" type="range" min="1" max="10" value="1" step="1" onchange="updateDispersalSliderText(this.value);">
<div class="slider_value" id="dispersal_slider_text">1</div>
</div>
</div>
<div class="slider_container">
<div class="slider_name">Eficiencia reproductiva</div>
<input class="slider" id="rep_eficiency_slider" type="range" min="0" max="1" value="0.1" step="0.05" onchange="updateRepEficiencySliderText(this.value);">
<div class="slider_value" id="rep_eficiency_slider_text">0.1</div>
<div class="control_group">
<div class="slider_container">
<div class="slider_name">Producción Máxima Semillas</div>
<input class="slider" id="seed_production_slider" type="range" min="100" max="500" value="200" step="100" onchange="updateSeedProductionSliderText(this.value);">
<div class="slider_value" id="seed_production_slider_text">200</div>
</div>
<div class="slider_container">
<div class="slider_name">Eficiencia reproductiva</div>
<input class="slider" id="rep_eficiency_slider" type="range" min="0" max="1" value="0.1" step="0.05" onchange="updateRepEficiencySliderText(this.value);">
<div class="slider_value" id="rep_eficiency_slider_text">0.1</div>
</div>
</div>
</div>
<div class="control_group" id="button-controls">
<button class="button" id="start-button" onclick="startSimulation()"><i class="fas fa-play"></i></button>
<button class="button" id="reset-button" onclick="resetSimulation()"><i class="fas fa-undo"></i></button>
</div>
</div> -->

<button class="button" id="start-button" onclick="startSimulation()">Start</button>
<button class="button" id="reset-button" onclick="resetSimulation()">Reset</button>
<!-- <button class="button" id="start-button">Start</button> -->
<!-- <footer>
<p>Semidán Robaina Estévez, 2021</p>
<p>Using the <a href="https://p5js.org/">p5.js</a> library.</p>
Expand Down
5 changes: 5 additions & 0 deletions libs/fontawesome_all.min.css
View file

Large diffs are not rendered by default.

28 changes: 16 additions & 12 deletions sketch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ let squareSideLength;
let numberOfSquares;
const squaresPerSide = 20;
let canvasSideLength = document.getElementById("cnv_container").offsetWidth;
const backgroundColor = getComputedStyle(document.documentElement)
.getPropertyValue("--backgroundColor");
const fontColor = getComputedStyle(document.documentElement)
.getPropertyValue("--fontColor");
let sim_started, sim_reseted;

let n_plants_init = {
Expand Down Expand Up @@ -288,18 +292,18 @@ function plotDataFraction(data) {
let layout = {
title: `Evolución de poblaciones`,
mode: "lines",
// font: {
// color: fontColor
// },
font: {
color: fontColor
},
xaxis: {
title: "Tiempo"
// tickfont: {
// size: 10
// }
},
yaxis: {title: "%"},
// plot_bgcolor: backgroundColor,
// paper_bgcolor: backgroundColor,
yaxis: {title: "Frecuencia (%)"},
plot_bgcolor: backgroundColor,
paper_bgcolor: backgroundColor,
legend: {
x: 1,
xanchor: 'right',
Expand All @@ -318,17 +322,18 @@ function plotDataFraction(data) {
// CONTROLS
function startSimulation() {
let button = document.getElementById("start-button");
sim_started = !sim_started;
// sim_started = !sim_started;
if (!sim_started) {
button.innerHTML = "Pause";
button.style['background-color'] = "rgb(208, 165, 37)";
button.innerHTML = "<i class='fas fa-pause'></i>";
} else {
button.innerHTML = "Start";
button.style['background-color'] = "rgb(120, 120, 120)";
button.innerHTML = "<i class='fas fa-play'></i>";
}
sim_started = !sim_started;
}

function resetSimulation() {
let button = document.getElementById("start-button");
button.innerHTML = "<i class='fas fa-play'></i>";
setup();
}

Expand Down Expand Up @@ -365,7 +370,6 @@ function updateRepEficiencySliderText(value) {

// function updateSize(){
// resizeCanvas(windowWidth, windowHeight);
// fullscreen();
// }

function getRandomInt(min, max) {
Expand Down
111 changes: 94 additions & 17 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
:root{
--canvasSideLength: 40vw;
--plotWidth: 55vw;
--backgroundColor: rgb(8, 8, 8);
--fontColor: rgb(251, 251, 251);
--fancyColor: #0b98d9;
}

body {
min-height: 100%;
margin: 0;
padding: 0;
/* overflow:hidden; */
background-color: var(--backgroundColor);
color: var(--fontColor);
overflow-x:hidden;
}

html {
Expand All @@ -20,14 +26,16 @@ html {
background-image: url("imgs/cardo-tabaibal.jpg");
}

/* .centering_container {
.centering_container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
} */
margin: 1vw;
margin-bottom: 0vw;
}

#title-container {
display: flex;
Expand All @@ -36,31 +44,54 @@ html {
width: 100vw;
height: 200px;
margin-left: 0vw;
margin-bottom: 5vh;
margin-bottom: 0px;
text-align: center;
}

#title {
font-size: 5em;
font-size: 4.5em;
text-shadow: 4px 4px 12px black;
font-family: 'Anton', sans-serif;
color: white;
max-width: 90%;
}

#cnv_container {
display: inline-block;
width: var(--canvasSideLength);
height: var(--canvasSideLength);
margin-left: calc((100vw - var(--canvasSideLength)) / 2);
/* margin-left: calc((100vw - var(--canvasSideLength)) / 2); */
}

#plot_container {
width: var(--canvasSideLength);
display: inline-block;
width: var(--plotWidth);
height: auto;
margin-left: calc((100vw - var(--canvasSideLength)) / 2);
/* margin-left: calc((100vw - var(--canvasSideLength)) / 2); */
}

#controls_container {
display: inline-block;
}

#button-controls {
transform: translateY(-30%);
}

.plot_controls_container {
width: var(--plotWidth);
}

.control_group {
display: inline-block;
}

.slider_container {
margin: 2vw;
}

.slider {
width: 10vw;
/* -webkit-appearance: none;
width: 100%;
height: 15px;
Expand All @@ -72,26 +103,42 @@ html {
transition: opacity .2s; */
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: var(--fancyColor);
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: var(--fancyColor);
cursor: pointer;
}

.button {
/* position: absolute;
top: 2vh;
left: 5vw; */
padding: 1vmax;
font-size: 2.3vmax;
width: 10vmax;
background-color: rgb(208, 165, 37);
/* padding: 1vmax; */
margin-bottom: 1vw;
font-size: 1.2em;
width: 4vw;;
height: 4vw;
background-color: var(--fancyColor);
border: none;
color: var(--body-color);
color: var(--fontColor);
text-align: center;
text-decoration: none;
display: block;
margin: 1em 0em;
cursor: pointer;
border-radius: 1vmax;
border-radius: 50%;
user-select: none;
outline: none;
box-shadow: 0 0.5vmax rgb(221, 221, 221);
box-shadow: 0 0.2vmax rgb(221, 221, 221);
z-index: 2;
}
.button:active {
Expand All @@ -101,7 +148,7 @@ html {

a {
text-decoration: none;
color: rgb(208, 165, 37);
color: var(--fancyColor);
}

footer {
Expand All @@ -112,3 +159,33 @@ footer {
z-index: 2;
color: rgb(177, 177, 177);
}

::-webkit-scrollbar {
width: 0.5vw;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 0.25vw grey;
border-radius: 0.5vw;
}

::-webkit-scrollbar-thumb {
background: var(--fancyColor);
border-radius: 0.5vw;
}

::-webkit-scrollbar-thumb:hover {
background: var(--fancyColor);
}

@media only screen and (max-width: 400px) {

#title-container {
height: 150px;
}

:root {
--canvasSideLength: 100vw;
}

}
Binary file added webfonts/fa-brands-400.eot
View file
Binary file not shown.
Binary file added webfonts/fa-brands-400.ttf
View file
Binary file not shown.
Binary file added webfonts/fa-brands-400.woff
View file
Binary file not shown.
Binary file added webfonts/fa-brands-400.woff2
View file
Binary file not shown.
Binary file added webfonts/fa-regular-400.eot
View file
Binary file not shown.
Binary file added webfonts/fa-regular-400.ttf
View file
Binary file not shown.
Binary file added webfonts/fa-regular-400.woff
View file
Binary file not shown.
Binary file added webfonts/fa-regular-400.woff2
View file
Binary file not shown.
Binary file added webfonts/fa-solid-900.eot
View file
Binary file not shown.
Binary file added webfonts/fa-solid-900.ttf
View file
Binary file not shown.
Binary file added webfonts/fa-solid-900.woff
View file
Binary file not shown.
Binary file added webfonts/fa-solid-900.woff2
View file
Binary file not shown.

0 comments on commit 8107dee

Please sign in to comment.