Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophjurczyk
christophjurczyk committed Mar 13, 2019
1 parent fd86e43 commit d5e94c0
Show file tree
Hide file tree
Showing 47 changed files with 29,488 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/
*.DS_Store
release-builds/fourier_series_app-darwin-x64/
release-builds/fourier_series_app-linux-x64/
release-builds/fourier_series_app-win32-ia32/
24 changes: 22 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,22 @@
# Fourier_Series_Visualizer
Small tool to visualize fourier series with different waveforms for Windows, macOS and Linux.
# Fourier Series Visualizer
Small tool to visualize Fourier series with different waveforms for Windows, macOS and Linux. Fourier series algorithm is written in JavaScript and runs in an Electron App with Bootstrap as front-end library.

<img src="/doc/macOS.png" alt="pcb" width="500px"/>

On macOS Touch Bar support is available.

<img src="/doc/TouchBar1.png" alt="pcb" width="500px"/>

<img src="/doc/TouchBar2.png" alt="pcb" width="500px"/>


## Installation
To run the app, simply download the desired release for your operating system. Unzip the file and run the following files depending on your OS:
* Windows: fourier_series_app.exe
* macOS: fourier_series_app.app
* Linux: fourier_series_app

## References
* [The Coding Train: Coding Chanllenge #125 Fourier Series](https://thecodingtrain.com/CodingChallenges/125-fourier-series.html)
* [Electron](https://electronjs.org/)
* [Bootstrap](https://getbootstrap.com/)
Binary file added doc/TouchBar1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/TouchBar2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/macOS.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/windows.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
203 changes: 203 additions & 0 deletions fourierSeries.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<title>Fourier Series Visualizer</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">

<link rel="stylesheet" href="./src/css/bootstrap.min.css">

<script src="./src/js/jquery-3.3.1.min.js"></script>
<script src="./src/js/jquery-3.3.1.slim.min.js"></script>

<script src="./src/js/popper.min.js"></script>
<script src="./src/js/bootstrap.min.js"></script>


<script src="./src/p5.min.js"></script>
<script src="./src/p5.dom.min.js"></script>

<style type="text/css">
body {
overflow: hidden;
}
</style>

</head>

<body style="background-color:#4393a5;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand">Fourier Series Visualizer</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="https://github.com/christophjurczyk/" target="_blank">by Christoph Jurczyk</a>
</li>
</ul>
</div>

</nav>


<div class="parent">
<div id="sketch-holder"></div>


<table class="table">
<thead>
<tr class="table-light">
<th scope="col">Speed:</th>
<th scope="col" style="width: 5%"></th>
<th scope="col">Number of Iterations:</th>
<th scope="col" style="width: 5%"></th>
<th scope="col">Waveform:</th>
</tr>
</thead>
<tbody>
<tr class="table-light">
<td>
<p class="speed"></p>
<input id="slider_speed" type="range" min="0" max="100" step="1" value="50" style="width: 100%">
</td>
<td class="align-middle">
<label id="label_speed" for="slider_speed">0.0000</label>
</td>
<td>
<p class="number_of_iterations"></p>
<input id="slider_itr" type="range" min="1" max="75" step="1" value="5" style="width: 100%">
</td>
<td class="align-middle">
<label id="label_itr" for="slider_speed">0</label>
</td>
<td><select class="form-control form-control-lg" id="presets">
<option value="square">Square</option>
<option value="sawtooth">Sawtooth</option>
<option value="triangle">Triangle</option>
<option value="clausen">Clausen</option>
<option value="custom">Custom</option>
</select></td>
</tr>
</tbody>
</table>



<div class="accordion" id="accordionExample">

<div class="card">
<div class="card-header" id="heading_custom_wave">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapase_custom_wave" aria-expanded="false" aria-controls="collapase_custom_wave">
Custom Waveform
</button>
</h2>
</div>
<div id="collapase_custom_wave" class="collapse" aria-labelledby="heading_custom_wave"
data-parent="#accordionExample">
<div class="card-body">
<!-- Custom Equation Section -->

<div class="text-center">
<img id="equation_img" src="./src/media/xt_init0.svg" class="img-fluid" alt="Equation missing...">
</div>



<form id="Series">
<div class="form-row">
<div class="form-group col-md-4">
<label for="numerator">Numerator <font face="Symbol">a</font>:</label>
<input type="text" name="numerator" id="numerator" class="form-control" value="4">
</div>
<div class="form-group col-md-4">
<label for="denominator">Denominator <font face="Symbol">b</font>:</label>
<input type="text" name="denominator" id="denominator" class="form-control" value="PI * ((2*n) + 1)">
</div>
<div class="form-group col-md-4">
<label for="coefficient">Coefficient <font face="Symbol">d</font>:</label>
<input type="text" name="coefficient" id="coefficient" class="form-control" value="((2*n) + 1)">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" name="series_1" id="series_1">
<label class="form-check-label" for="series_1">Start at 1?</label>
</div>
</div>
</div>
<input id="submit" type="button" class="btn btn-primary" value="Apply">
</form>
</div>
</div>
</div>



<div class="card">
<div class="card-header" id="heading_display_settings">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree_display_settings" aria-expanded="false"
aria-controls="collapseThree_display_settings">
Display Settings
</button>
</h2>
</div>
<div id="collapseThree_display_settings" class="collapse" aria-labelledby="heading_display_settings"
data-parent="#accordionExample">
<div class="card-body">
<!-- color controls -->
<div class="container">
<div class="row">
<div class="col-md-auto">
<input type="color" name="background" id="canvas_background" value="#4393a5">
<label for="background">Background</label>
</div>
<div class="col-md-auto">
<input type="color" name="lines" id="canvas_lines" value="#b1ffff">
<label for="lines">Line</label>
</div>
<div class="col-md-auto">
<input type="color" name="vector" id="canvas_vector" value="#b1ffff">
<label for="vector">Vector</label>
</div>
<div class="col-md-auto">
<input type="color" name="small_circles" id="canvas_circles" value="#b1ffff">
<label for="small_circles">Circle</label>
</div>
<div class="col-md-auto">
<input type="color" name="grid" id="canvas_grid" value="#000000">
<label for="small_circles">Grid</label>
</div>
<div class="col-md-auto">
<label>
<input type="checkbox" id="canvas_draw_circle" checked="checked">
<span>Draw circles?</span>
</label>
</div>
</div>

</div>
</div>
</div>







</body>
<script src="fourierSeries.js"></script>

</html>
Loading

0 comments on commit d5e94c0

Please sign in to comment.