The provided HTML code establishes a webpage for visualizing a three-phase electrical system. It includes various elements like buttons, divs, paragraphs, and scripts to handle data visualization and interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Three-Phase Electrical System Visualization</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="style - Cópia.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- Scripts -->
<script src="d3.v7.min.js"></script>
</head>
<body class="dark-mode">
<!-- Toggle Button -->
<button id="toggle-button">
<i type="solid" class='bx bxs-sun'></i>
</button>
<!-- Main Container -->
<div id="main-container">
<!-- Page Title -->
<p class="pageTitle">Impedance relationship to Voltage and Current (p.u.)</p>
<!-- First Row Container -->
<div id="first-row">
<div id="input-fields1"></div>
<div id="visualization"></div>
<div id="input-fields"></div>
</div>
</div>
<!-- Inline JavaScript -->
<script>
// Script for handling dark/light mode toggle and visualization initialization...
</script>
<!-- External JavaScript -->
<script type="module" src="index.js"></script>
</body>
</html>- Head Section: Contains metadata, the page title, links to external CSS, and a D3.js script for data visualization.
- Body Section:
- Toggle Button: A button to switch between dark and light modes.
- Main Container: Houses the page title and a row containing input fields and the visualization area.
This JavaScript file, index.js, imports modules and handles the interactivity and visualization of the three-phase electrical system.
- Module Imports: Various modules like
ComplexOperatorAid,AddMarkers,MainSVG, andInputsare imported for specific functionalities. - Marker Initialization: Initializes visual markers in the SVG element.
- Input Fields Initialization: Sets up input fields for impedance and current/voltage tables.
- Event Handlers: Functions like
onInputChanged,dragstarted,dragended, anddraggedhandle user interactions. - Visualization Updates: Functions
updateMainVisualizationandupdateInputFieldsupdate the visualization and input fields based on the data. - Drag Behavior: The drag behavior for the SVG elements is defined.
- Impedance Calculations: Functions
calculateImpedancesandcalculateSequenceImpedancesperform complex calculations for impedance values. - CSV Export: A function
exportCSVis provided for exporting data to a CSV file.
Inputs.mjs is a JavaScript module focused on creating dynamic input fields within a given container element.
- Inputs Function:
- Parameters:
SelectInputFieldsID: The ID of the container where the input fields will be appended.classForTable: A class name for the table element.SelectInputFieldsClass: A class name for each row of input fields.data: An array of data objects, each containing akeyandvalue.onInputChanged: A callback function triggered on input change.
- Process:
- Selects the container based on
SelectInputFieldsID. - Appends a table with headers for labels, real, and imaginary parts.
- Dynamically creates rows with input fields for each data entry, binding the provided data.
- Sets up event listeners for the input fields to trigger
onInputChanged.
- Selects the container based on
- Parameters:
This structure allows for a modular and dynamic way to handle user inputs related to the electrical system visualization.