Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
Siizer authored Jan 12, 2024
1 parent 54979c1 commit 7b0b6f6
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 29 deletions.
34 changes: 27 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three-Phase Electrical System Visualization</title>
<link rel="stylesheet" type="text/css" href="style - Cópia.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="d3.v7.min.js"></script>
</head>

<body>
<body class="dark-mode">
<button id="toggle-button"><i type="solid" class='bx bxs-sun'></i></button>
<div id="main-container">
<p class="pageTitle">Impedance relationship to Voltage and Current (p.u.)</p>
<div id="first-row">
Expand All @@ -19,14 +21,29 @@
</div>
</div>
<script>
// Define dimensions and configurations
document.getElementById('toggle-button').addEventListener('click', function () {
var body = document.body;

if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
d3.select("#rectFrame").style("stroke", "black")
document.getElementsByClassName("bxs-sun")[0].classList.remove("bxs-sun");
document.getElementsByClassName("bx")[0].classList.add("bxs-moon");
} else {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
d3.select("#rectFrame").style("stroke", "white")
document.getElementsByClassName("bxs-moon")[0].classList.remove("bxs-moon");
document.getElementsByClassName("bx")[0].classList.add("bxs-sun");
}
});
var maxStatus = 2;
var visualizationElement = d3.select("#visualization");

const margin = { top: 20, right: 20, bottom: 20, left: 20 };
const boundingRect = document.getElementById("visualization");
const svgWidth = visualizationElement._groups[0][0].clientWidth - margin.left - margin.right;
const svgHeight = visualizationElement._groups[0][0].clientHeight - margin.top - margin.bottom;
console.log("show values", svgWidth, svgHeight, "min", Math.min(svgWidth, svgHeight));
const svgWidth = Math.min(visualizationElement._groups[0][0].clientWidth - margin.left - margin.right, window.innerHeight + visualizationElement._groups[0][0].clientHeight - margin.top - margin.bottom - document.getElementsByClassName("pageTitle")[0].clientHeight);
const arrowSize = 8;
const colors = { A: 'red', B: 'gold', C: 'blue', Z0: "darkgrey", Z1: "limegreen", Z2: "magenta" };

Expand All @@ -46,9 +63,10 @@
.attr('height', svgWidth + margin.top + margin.bottom)
.attr('width', svgWidth + margin.left + margin.right)
.attr('transform', `translate(${margin.left / 2}, ${margin.top / 2})`)
.style('stroke', 'black')
.style('stroke', 'white')
.style('fill', 'none')
.style('stroke-width', '1px');
.style('stroke-width', '1px')
.attr("id", "rectFrame");
svg.append("defs").selectAll("marker")
.data("markc-arc")
.enter().append("marker")
Expand Down Expand Up @@ -77,10 +95,12 @@
var yAxis = d3.axisLeft(yScale);

mainGroup.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(" + margin.left + "," + svgWidth / 2 + ")")
.call(xAxis);

mainGroup.append("g")
.attr("class", "y-axis")
.attr("transform", "translate(" + svgWidth / 2 + "," + margin.top + ")")
.call(yAxis);

Expand Down
82 changes: 60 additions & 22 deletions style - Cópia.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,31 @@ html, body {
color-scheme: dark mode;
}

body.light-mode {
background-color: white;
color: black;
}

body.dark-mode {
background-color: black;
color: white;
& button{
color: white;
}
}


#toggle-button {
position: fixed;
top: 10px;
right: 100px;
z-index: 1000; /* This ensures the button is on top of everything else */
}

.bx {
font-size: 1.5rem;
}

button{
position: relative;
background:none;
Expand Down Expand Up @@ -1028,29 +1053,42 @@ flex:10;
width: 1184px;
margin: 0 auto; /* Center the grid */
}
#input-fields1 {
grid-column: span 3; /* Take up 3 of 12 columns */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#input-fields1 {
grid-column: span 3; /* Take up 3 of 12 columns */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#visualization {
grid-column: span 6; /* Take up 6 of 12 columns */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

#input-fields {
grid-column: span 3; /* Take up 3 of 12 columns */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

@media (min-width: 1200px) {
#first-row {
width: 100%;
}
#input-fields1, #input-fields {
grid-column: span 2;
}
#visualization {
grid-column: span 6; /* Take up 6 of 12 columns */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
grid-column: span 8;
}

#input-fields {
grid-column: span 3; /* Take up 3 of 12 columns */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

0 comments on commit 7b0b6f6

Please sign in to comment.