Power Converter Designer: added converter images

ChSotiriou · Jan 3, 2025 · a2ed9a3 · a2ed9a3
1 parent 22323a1
commit a2ed9a3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/dist/tools/general/power-converter-designer/img/boost.svg b/dist/tools/general/power-converter-designer/img/boost.svg
diff --git a/dist/tools/general/power-converter-designer/img/buck.svg b/dist/tools/general/power-converter-designer/img/buck.svg
diff --git a/dist/tools/general/power-converter-designer/index.html b/dist/tools/general/power-converter-designer/index.html
@@ -55,7 +55,7 @@
     <div class="container-fluid my-5">
         <div class="row">
             <div class="col-md-8 offset-md-2">
-                <h1 class="text-center mb-4">Power Converter Designer</h2>
+                <h1 class="text-center mb-4">Power Converter Designer</h1>
 
                     <div class="input-group mb-3">
                         <span class="input-group-text bg-dark text-white" data-toggle="tooltip"
@@ -68,6 +68,16 @@ <h1 class="text-center mb-4">Power Converter Designer</h2>
                     </div>
 
                     <hr/>
+
+
+                    <div class="text-center converter-img" id="img-buck">
+                        <img src="img/buck.svg" class="w-50 img-fluid"></img>
+                    </div>
+                    <div class="text-center converter-img" hidden id="img-boost">
+                        <img src="img/boost.svg" class="w-50 img-fluid"></img>
+                    </div>
+
+                    <hr/>
 
                     <div class="input-group mb-3">
                         <span class="input-group-text bg-dark text-white" data-toggle="tooltip"

diff --git a/dist/tools/general/power-converter-designer/js/main.js b/dist/tools/general/power-converter-designer/js/main.js
@@ -187,6 +187,11 @@ Array.from(document.getElementsByClassName('inputField')).forEach((elem) => {
 })
 
 document.getElementById('select-converter-type').addEventListener('change', event => {
+    // hide all imgaes
+    Array.from(document.getElementsByClassName('converter-img')).forEach(x => x.hidden = true)
+    document.getElementById(`img-${document.getElementById('select-converter-type').value}`).removeAttribute('hidden')
+
+    // show correct image
     document.getElementById('field_Vin_min').dispatchEvent(new Event('change'))
 })