-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
"About" page Tailwind-styled. Fixed several adaptivity issues
- Loading branch information
Showing
7 changed files
with
346 additions
and
359 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,253 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="author" content="S.K."> | ||
| <meta name="licensed" content="MIT"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="author" content="S.K." /> | ||
| <meta name="licensed" content="MIT" /> | ||
|
|
||
| <title>About "zernpy"</title> | ||
|
|
||
| <!-- Favicon specification from the local file --> | ||
| <link rel="icon" href="favicon_zernpy.ico" type="image/x-icon"> | ||
| <link rel="icon" href="favicon_zernpy.ico" type="image/x-icon" /> | ||
|
|
||
| <!-- Load script for handle page appearance and provide some interactivity --> | ||
| <script src="./about_page.js"></script> | ||
|
|
||
| <!-- Load external overall applicable stylesheets --> | ||
| <link rel="stylesheet" href="index_about_styling.css"> | ||
| <link rel="stylesheet" href="index_about_styling.css" /> | ||
|
|
||
| <!-- Page specific CSS styling --> | ||
| <style> | ||
| /* Define another background color for this page */ | ||
| .navbar { | ||
| /* Hard coded height is needed because image loaded after applying styles */ | ||
| background-color: beige; height: 920px; | ||
| } | ||
| /* Specifics for main content of the page */ | ||
| .mainBody{ | ||
| background-color: whitesmoke; | ||
| } | ||
| .textLine{ | ||
| padding: 6px; text-align: center; | ||
| } | ||
|
|
||
| /* Setting images in the pyramidal order */ | ||
| .imagesContainer{ | ||
| position: relative; /* Makes the child to select position relative to it */ | ||
| width: inherit; height: fit-content; | ||
| font-size: 0; /* This setting removes additional whitespaces between images in this container */ | ||
| } | ||
| .DisplayZernikeName{ | ||
| font-size: 16px; text-align: center; font-weight: bold; font-style: italic; | ||
| } | ||
| .ZernProfile{ | ||
| width: 100px; height: 100px; display: inline-block; | ||
| position: absolute; /* Seems in this case it's necessary for avoiding relative shifts for top, left coordinates in script below */ | ||
| padding: 0; margin: 0; /* Padding = 0 and margins = 0 removes additional white spaces between inline blocks */ | ||
| } | ||
|
|
||
| /* Styling of the list with next steps */ | ||
| #nextStepsList{ | ||
| text-align: center; list-style-position: inside; | ||
| } | ||
| .bulletPoint{ | ||
| margin-bottom: 8px; margin-right: 6px; | ||
| padding-right: 12px; padding-left: 4px; | ||
| } | ||
| #page_footer{ | ||
| font-size: 0.9em; font-family: 'Courier New', Courier, monospace; padding-top: 2em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <link rel="stylesheet" href="about_styling.css" /> | ||
|
|
||
| <body> | ||
| <div class="flexboxContainer"> | ||
| <!-- Add Tailwind classes through CDN --> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| </head> | ||
|
|
||
| <!-- Navigation panel, some elements and inspiration get from W3 Schools, better use <nav> element --> | ||
| <nav class="navbar"> | ||
| <a class="link navbarLink" href="index.html"> Main </a> | ||
| <a class="link" href="./api/zernpy/zernikepol.html"> API of <em> zernikepol </em> module </a> | ||
| <a class="link" href="./api/zernpy/zernpsf.html"> API of <em> zernpsf </em> module </a> | ||
| <a class="link navbarLink" href="about.html"> About </a> | ||
| </nav> | ||
| <body> | ||
| <main | ||
| class="flex flex-col h-full lg:flex-row leading-relaxed bg-gradient-to-b from-neutral-50 to-gray-200" | ||
| > | ||
| <!-- Navigation panel, some elements and inspiration get from W3 Schools, better use <nav> element --> | ||
| <nav | ||
| class="flex flex-wrap flex-col sm:flex-row lg:flex-col lg:justify-start lg:space-y-28 space-x-4 lg:space-x-0 justify-around content-center bg-zinc-700 text-center p-2 text-lg font-serif" | ||
| > | ||
| <a | ||
| class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50 lg:mt-24" | ||
| href="./index.html" | ||
| > | ||
| Main | ||
| </a> | ||
| <a | ||
| class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50" | ||
| href="./api/zernpy/zernikepol.html" | ||
| > | ||
| API of <em class="font-mono"> zernikepol </em> module | ||
| </a> | ||
| <a | ||
| class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50" | ||
| href="./api/zernpy/zernpsf.html" | ||
| > | ||
| API of <em class="font-mono"> zernpsf </em> module | ||
| </a> | ||
| <a | ||
| class="text-stone-200 visited:text-stone-100 underline hover:no-underline hover:text-stone-50 hidden md:block" | ||
| href="#" | ||
| > | ||
| About | ||
| </a> | ||
| </nav> | ||
|
|
||
| <!-- Main text body --> | ||
| <main class="mainBody"> | ||
| <p> | ||
| <h4 class="header"> Reasons for developing </h4> | ||
| <ul> | ||
| <li class="bulletPoint"> | ||
| This library was developed because I struggled to find open and fast enough implementation of simple function for Zernike polynomial | ||
| calculation. | ||
| </li> | ||
| <li class="bulletPoint"> | ||
| Moreover, the exact equation for calculation isn't difficult to code in Python, but the exact equation gets really slow for | ||
| high order polynomials. To overcome that, the recursive equations are implemented in this package instead of the exact ones. | ||
| </li> | ||
| <li class="bulletPoint"> | ||
| However, anyway, there are exist many specifically implemented and well acknowledged libraries included Zernike polynomials calculation, | ||
| for example: <a class="link" href="https://github.com/jacopoantonello/zernike" target="_blank">zernike</a> and | ||
| <!-- Security addition for demo in "rel" attribute, because it's the external website --> | ||
| <a class="link" href="https://docs.hcipy.org/dev/api/hcipy.mode_basis.zernike.html" rel="noopener noreferrer" target="_blank">HCIpy</a>. <br> | ||
| Recently, I've found the solid library for numerical methods for Diffractive Optics, that also has the Zernike polynomials implementation: | ||
| <a class="link" href="https://pyoptica.gitlab.io/pyoptica/api.html#module-pyoptica.zernikes" rel="noopener noreferrer" target="_blank">PyOptica</a> | ||
| </li> | ||
| </ul> | ||
| </p> | ||
| <!-- Main content body --> | ||
| <div class="flex flex-col grow justify-between"> | ||
| <div | ||
| class="flex flex-col m-2 p-2 space-y-3 font-sans font-medium content-center" | ||
| > | ||
| <!-- Header section --> | ||
| <div class="mx-4"> | ||
| <h4 class="text-center text-xl font-semibold"> | ||
| Reasons for developing | ||
| </h4> | ||
| <ul | ||
| class="mt-3 text-lg font-medium leading-7 list-disc list-inside space-y-3" | ||
| > | ||
| <li> | ||
| This library was developed because I struggled to find open, | ||
| simple and well-documented implementation for Zernike polynomial | ||
| value calculation. | ||
| </li> | ||
| <li> | ||
| However, the exact equation for calculation real value for a | ||
| polynomial isn't difficult to code in Python, but there is also | ||
| useful functionality missing in the similar libraries which I | ||
| need to use in other projects. | ||
| </li> | ||
| <li> | ||
| Anyway, there are exist a number of specifically tightened and | ||
| well acknowledged libraries which include Zernike polynomials | ||
| calculation, for example: | ||
| <a | ||
| class="link font-semibold" | ||
| href="https://github.com/jacopoantonello/zernike" | ||
| target="_blank" | ||
| >zernike</a | ||
| > | ||
| and | ||
| <!-- Security addition for demo in "rel" attribute, because it's the external website --> | ||
| <a | ||
| class="link font-semibold" | ||
| href="https://docs.hcipy.org/dev/api/hcipy.mode_basis.zernike.html" | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| >HCIpy</a | ||
| > | ||
| </li> | ||
| <li> | ||
| Finally, I've found the solid library for numerical methods for | ||
| Diffractive Optics, that also has the Zernike polynomials | ||
| implementation: | ||
| <a | ||
| class="link font-semibold" | ||
| href="https://pyoptica.gitlab.io/pyoptica/api.html#module-pyoptica.zernikes" | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| >PyOptica</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <p> | ||
| <h4 class="header" id="RepresentingZernikeStr"> Representing a few Zernike profiles in a pyramid </h4> | ||
| <div class="textLine"> | ||
| The following images generated using the static method plot_sum_zernikes_on_fig() for single element in a list as polynomials list. | ||
| </div> | ||
| <div class="imagesContainer"> | ||
| <div class="DisplayZernikeName"> Hover mouse over the images (right) for getting polynomial name </div> | ||
| <img class="ZernProfile" src="./images/ZernOsa1.png" id="ZernOsa1"> | ||
| <img class="ZernProfile" src="./images/ZernOsa2.png" id="ZernOsa2"> | ||
| <img class="ZernProfile" src="./images/ZernOsa3.png" id="ZernOsa3"> | ||
| <img class="ZernProfile" src="./images/ZernOsa4.png" id="ZernOsa4"> | ||
| <img class="ZernProfile" src="./images/ZernOsa5.png" id="ZernOsa5"> | ||
| <img class="ZernProfile" src="./images/ZernOsa6.png" id="ZernOsa6"> | ||
| <img class="ZernProfile" src="./images/ZernOsa7.png" id="ZernOsa7"> | ||
| <img class="ZernProfile" src="./images/ZernOsa8.png" id="ZernOsa8"> | ||
| <img class="ZernProfile" src="./images/ZernOsa9.png" id="ZernOsa9"> | ||
| </div> | ||
| <!-- Pyramid with profiles --> | ||
| <div class="text-center space-y-3" id="pyramid-section"> | ||
| <h4 | ||
| class="text-center text-xl font-semibold" | ||
| id="RepresentingZernikeStr" | ||
| > | ||
| Representing a few Zernike profiles in a pyramid | ||
| </h4> | ||
| <p class="text-lg font-medium"> | ||
| The following images generated using the static method | ||
| plot_sum_zernikes_on_fig() for single element in a list as | ||
| polynomials list. | ||
| </p> | ||
|
|
||
| <p> | ||
| <h4 class="header"> Next steps </h4> | ||
| <ol id="nextStepsList"> | ||
| <li class="bulletPoint"> <del> Implement calculation of derivatives</del> Done in version 0.0.5 of the library </li> | ||
| <li class="bulletPoint"> <del> Implement conversion from raw deformations on an unit pupil to set of Zernike polynomials</del> Done in ver. 0.0.6 </li> | ||
| <li class="bulletPoint"> Implement more interactivity for these pages, make responsive the main page </li> | ||
| <li class="bulletPoint"> <del> Provide more tests for checking derivatives, values and initialization of polynomials </del> There are 10 tests for run by the <em> pytest </em> library </li> | ||
| <li class="bulletPoint"> Fixed issue with slow calculations of high orders polynomials, found that direct (exact) equation is sufficiently fast - ver. 0.0.8 </li> | ||
| <li class="bulletPoint"> Found that the exact equation couldn't be used reliably for orders higher than 40th radial one - ver. 0.0.9 </li> | ||
| </ol> | ||
| <p | ||
| class="text-center italic font-semibold font-mono text-lg mt-4 mb-2" | ||
| id="infoStringProfiles" | ||
| > | ||
| Hover mouse over the images (right) for getting polynomial name | ||
| </p> | ||
| <div class="imagesContainer mt-2 mb-5" id="profilesContainer"> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa1.png" | ||
| id="ZernOsa1" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa2.png" | ||
| id="ZernOsa2" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa3.png" | ||
| id="ZernOsa3" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa4.png" | ||
| id="ZernOsa4" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa5.png" | ||
| id="ZernOsa5" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa6.png" | ||
| id="ZernOsa6" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa7.png" | ||
| id="ZernOsa7" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa8.png" | ||
| id="ZernOsa8" | ||
| /> | ||
| <img | ||
| class="ZernProfile" | ||
| src="./images/ZernOsa9.png" | ||
| id="ZernOsa9" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Completed and Next steps section --> | ||
| <div class="mx-4"> | ||
| <h4 class="text-center text-xl font-semibold"> | ||
| Completed and Next Steps | ||
| </h4> | ||
| <ol | ||
| class="mt-3 text-lg font-medium leading-6 list-decimal list-inside space-y-3 text-center" | ||
| > | ||
| <li> | ||
| <del> Implement calculation of derivatives </del> | ||
| <p class="xl:inline-block xl:ml-2"> | ||
| Done in version 0.0.5 of the library | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <del> | ||
| Implement conversion from raw deformations on an unit pupil to | ||
| set of Zernike polynomials | ||
| </del> | ||
| <p class="xl:inline-block xl:ml-2">Done in version 0.0.6</p> | ||
| </li> | ||
| <li> | ||
| <del> | ||
| Implement more adaptivity for these pages, make responsive the | ||
| main page | ||
| </del> | ||
| <p class="xl:inline-block xl:ml-2"> | ||
| Not associated with the library version, done in October 2024 | ||
| </p> | ||
| </li> | ||
| <li> | ||
| <del> | ||
| Provide more tests for checking derivatives, values and | ||
| initialization of polynomials | ||
| </del> | ||
| <p class="2xl:inline-block 2xl:ml-2"> | ||
| There are more than 10 tests for run by the | ||
| <em class="font-mono italic font-semibold"> pytest </em> | ||
| library | ||
| </p> | ||
| </li> | ||
| <li> | ||
| Fixed issue with slow calculations of high orders polynomials, | ||
| found that direct (exact) equation is sufficiently fast - in | ||
| ver. 0.0.8 | ||
| </li> | ||
| <li> | ||
| Found that the exact equation couldn't be used reliably for | ||
| orders higher than 40th radial one - in ver. 0.0.9 | ||
| </li> | ||
| <li> | ||
| Implemented ZernPSF class for calculation associated with a | ||
| polynomial PSF kernel - in ver. 0.0.13 | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| <!-- Footer with some info --> | ||
| <footer id="page_footer"> 2022-2023 S.K., MIT licensed </footer> | ||
| </main> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> | ||
| <footer class="m-4 p-2 font-medium text-left"> | ||
| 2022-2024 S.K., MIT licensed | ||
| </footer> | ||
| </div> | ||
| </main> | ||
| </body> | ||
| </html> |
Oops, something went wrong.