Skip to content

Commit

Permalink
Better control panel with disable click for canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@hasnainroopawalla
hasnainroopawalla committed Aug 19, 2023
1 parent 8db9937 commit a9b9f53
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 41 deletions.
18 changes: 15 additions & 3 deletions src/aco/sketch.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { config } from "./config";
let world: World;
const numAnts: number = 100;
let quadtree: Quadtree;
let canvasInteractionEnabled = true;

const bindListeners = (p: p5) => {
const maxSpeed = p
Expand Down Expand Up @@ -69,9 +70,20 @@ const sketch = (p: p5) => {
world.render();
};

// p.mouseClicked = () => {
// world.createFoodCluster(5);
// };
p.select("#control-panel-container")
.mouseOver(() => {
canvasInteractionEnabled = false;
})
.mouseOut(() => {
canvasInteractionEnabled = true;
});

p.mouseClicked = () => {
if (!canvasInteractionEnabled) {
return;
}
world.createFoodCluster(5);
};
};

export const p5i = new p5(sketch, document.body);
76 changes: 39 additions & 37 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,52 +8,53 @@
</head>

<body>
<div class="control-panel-button-container">
<a href="javascript:void(0);" style="color:white;" class="control-panel-button icon" onclick="openNav()">
<i class="fa fa-cog fa-lg"></i>
</a>
</div>
<div id="control-panel-container">
<div class="control-panel-button-container">
<a href="javascript:void(0);" style="color:white;" class="control-panel-button icon" onclick="openNav()">
<i class="fa fa-cog fa-lg"></i>
</a>
</div>

<div class="control-panel" style="display: none;">
<div class="control-panel-content">
<a href="javascript:void(0)" class="close-button" onclick="closeNav()">&times;</a>
<div class="slider-container">
<span class="slider-title">maxSpeed</span>
<div class="slider-component">
<input class="slider-input" id="maxSpeed" type="range" min="0.1" max="5.0" value="2.5" step="0.1" oninput="sliderOnChange(this)">
<span id="maxSpeedDisplay" class="slider-output">2.5</span>
</div>
</div>
<div class="slider-container">
<span class="slider-title">wanderStrength</span>
<div class="slider-component">
<input class="slider-input" id="wanderStrength" type="range" min="0.1" max="5.0" value="1.0" step="0.1" oninput="sliderOnChange(this)">
<span id="wanderStrengthDisplay" class="slider-output">1.0</span>
</div>
</div>
<div class="slider-container">
<span class="slider-title">steeringLimit</span>
<div class="slider-component">
<input class="slider-input" id="steeringLimit" type="range" min="0.1" max="1.0" value="0.4" step="0.1" oninput="sliderOnChange(this)">
<span id="steeringLimitDisplay" class="slider-output">0.4</span>
<div class="control-panel" style="display: none;">
<div class="control-panel-content">
<a href="javascript:void(0)" class="close-button" onclick="closeNav()">&times;</a>
<div class="slider-container">
<span class="slider-title">maxSpeed</span>
<div class="slider-component">
<input class="slider-input" id="maxSpeed" type="range" min="0.1" max="5.0" value="2.5" step="0.1" oninput="sliderOnChange(this)">
<span id="maxSpeedDisplay" class="slider-output">2.5</span>
</div>
</div>
</div>
<div class="slider-checkbox-container">
<span class="slider-title">perceptionRange</span>
<div class="slider-checkbox-component">
<div class="checkbox-component">
<input id="showPerceptionRange" type="checkbox">
<span class="checkbox-label">Render</span>
<div class="slider-container">
<span class="slider-title">wanderStrength</span>
<div class="slider-component">
<input class="slider-input" id="wanderStrength" type="range" min="0.1" max="5.0" value="1.0" step="0.1" oninput="sliderOnChange(this)">
<span id="wanderStrengthDisplay" class="slider-output">1.0</span>
</div>
</div>
<div class="slider-container">
<span class="slider-title">steeringLimit</span>
<div class="slider-component">
<input class="slider-input" id="perceptionRange" type="range" min="10" max="100" value="50" step="1" oninput="sliderOnChange(this)">
<span id="perceptionRangeDisplay" class="slider-output">50</span>
<input class="slider-input" id="steeringLimit" type="range" min="0.1" max="1.0" value="0.4" step="0.1" oninput="sliderOnChange(this)">
<span id="steeringLimitDisplay" class="slider-output">0.4</span>
</div>
</div>
<div class="slider-checkbox-container">
<span class="slider-title">perceptionRange</span>
<div class="slider-checkbox-component">
<div class="checkbox-component">
<input id="showPerceptionRange" type="checkbox">
<span class="checkbox-label">Render</span>
</div>
<div class="slider-component">
<input class="slider-input" id="perceptionRange" type="range" min="10" max="100" value="50" step="1" oninput="sliderOnChange(this)">
<span id="perceptionRangeDisplay" class="slider-output">50</span>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
<script>
window.onload = function () {
Expand All @@ -63,6 +64,7 @@
function openNav() {
document.getElementsByClassName("control-panel")[0].style.width = "350px";
document.getElementsByClassName("control-panel-button")[0].style.opacity = "0";

}

function closeNav() {
Expand Down
2 changes: 1 addition & 1 deletion src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ body {
margin-top: 20px;
margin-left: 20px;
border-radius: 0.6rem;
background-color: rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0.7);
overflow: auto;
padding-top: 60px;
transition: 0.2s;
Expand Down

0 comments on commit a9b9f53

Please sign in to comment.