{"id":1992,"date":"2021-01-06T13:08:04","date_gmt":"2021-01-06T11:08:04","guid":{"rendered":"https:\/\/www.albertopassalacqua.com\/?p=1992"},"modified":"2021-01-06T13:08:04","modified_gmt":"2021-01-06T11:08:04","slug":"some-updates-on-my-hobby-project","status":"publish","type":"post","link":"https:\/\/www.albertopassalacqua.com\/?p=1992","title":{"rendered":"Some updates on my hobby project"},"content":{"rendered":"<p style=\"text-align: justify;\">Some time ago I tweeted about working on a web-based UI for our codes (and snappyHexMesh) to facilitate working with students and also to make the process less tedious for me, which does not hurt. I have never done development with web technologies until two years ago: most of my focus has been on implementing numerical algorithms. I have written UI code in the past using GTK and Qt, but I was quite far from anything web-related, aside from basic HTML. Saying the learning curve was steep is an understatement, but with the help of a very good friend (with the patience of a saint \ud83d\ude00 ) I have slowly learned HTML, CSS, Javascript and Typescript. I knew C# already, so the choice of the backend framework was quite obvious: <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/introduction-to-aspnet-core?view=aspnetcore-5.0\">asp.net core<\/a> was maturing, is open source, has very nice tooling, and now also has <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/blazor\/?view=aspnetcore-5.0\">Blazor<\/a>, a single-page application framework in C#, which relies on WebAssembly to execute code in the browser. It also comes with Entity Framework Core, which helps a great deal in managing database operations from C# code, which is a big plus.<\/p>\r\n<p style=\"text-align: justify;\">From then, things have evolved and I have written several iterations of the app, while I learned more about the many technologies involved. So, it has become a long personal project, accompanied by a great amount of fun, knowing new people (Blazor has a very nice and fun community, one of most helpful I have met in the open-source world, together with that of Three.js, Babylon.js and openSUSE) and quite some headaches too. It is still a personal project, no code has been published, and the amount of work to reach a release state is large and done in my spare personal time. In any case, it is fun, so I thought of start blogging about it, which also helps me to stay on track.<\/p>\r\n<h3>Application requirements<\/h3>\r\n<p style=\"text-align: justify;\">Let&#8217;s start with a few of the requirements I set forth for the app:<\/p>\r\n<ol style=\"text-align: justify;\">\r\n<li>No specific knowledge of the underlying code should be needed to set up a case. The user should focus on choosing the physics and the numerical methods, rather than on the specificity of the underlying code. We&#8217;ll see how well this will be achieved, but this is the intention.<\/li>\r\n<li style=\"text-align: justify;\">No code will ever be shared between the app and OpenFOAM<sup>\u00ae<\/sup>. This means:\r\n<ul>\r\n<li style=\"text-align: justify;\"><strong>no C++ code at all in the app<\/strong>, which is purely written in asp.net core and Javascript.<\/li>\r\n<li style=\"text-align: justify;\"><strong>no linking to libraries that are part of OpenFOAM<\/strong><sup>\u00ae<\/sup> and also no reproduction of specific data structures (e.g. dictionary, entries, fields, models in the app are not treated or implemented as in OpenFOAM<sup>\u00ae<\/sup>). The app functions and can generate cases without an installed version of OpenFOAM<sup>\u00ae<\/sup>. The reason behind this choice is both due to <strong>design considerations<\/strong> and also to avoid headaches with licensing (you know, if I will ever decide of conquering the galaxy with my one-man effort \ud83d\ude00 ).\u00a0<\/li>\r\n<\/ul>\r\n<\/li>\r\n<li>The UI should <strong>not be based on a specific branch of the underlying code<\/strong>.\u00a0<\/li>\r\n<li>Adding <strong>new functionality<\/strong> to the app (a new model, a new solver, &#8230;) <strong>should not require a modification<\/strong> of the app if such functionality uses the same structure of input files used by others.<\/li>\r\n<li>Web-based because it is more convenient than distributing an executable and configuring it on each workstation (downside: it is a lot more challenging to develop the app). Also: I want to learn to build a non-trivial web-application related to CFD.<\/li>\r\n<li>It needs to run (also) on <strong>Linux<\/strong> (this is trivial: asp.net core runs on Linux natively and either Apache or nginx can be used as proxy. Users will be able to use any browser that supports WebAssembly.\u00a0<\/li>\r\n<\/ol>\r\n<p style=\"text-align: justify;\">Point 3 has been the most interesting to implement and led to the creation of a sort of &#8220;configuration center&#8221;. Essentially a UI to map the configuration of a solver to a database structure, together with constraints and requirements to generate the UI.\u00a0<\/p>\r\n<h3>Some screenshots<\/h3>\r\n<p>The figure below shows how a well-know dictionary structure for turbulence modeling is configured in the app. All is done via the UI (or via a database initializer in C#), no need of ever reading an actual dictionary. Since features change quickly and differ from version to version, I added some version tracking too (<strong>Quiz<\/strong>: <em>what does the odd blue + button do?<\/em>).<\/p>\r\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1999\" src=\"https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict-1024x539.png\" alt=\"\" width=\"960\" height=\"505\" srcset=\"https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict-1024x539.png 1024w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict-300x158.png 300w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict-768x404.png 768w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict-1536x808.png 1536w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict-1140x600.png 1140w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/ConfigCenterDict.png 1660w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/p>\r\n<p style=\"text-align: justify;\">The second screenshot shows the user-side of the app, where a simulation is configured (geometry selection, solver selection, &#8230;). This part is still under heavy development (geometry and mesh setup being fully functional), and the screenshot only gives an idea of the structure. The side bar allows the key features (geometry, mesh, and solver) to be accessed. The white column is where Blazor components for settings are rendered, and the GL area is used for visualization. The top menu is used for navigation: the Administration menu contains link to the configuration center and to the app settings. the CFD menu is self-explanatory, and contains the features of the sidebar.<\/p>\r\n<p><a href=\"https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2000\" src=\"https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-1024x512.png\" alt=\"\" width=\"960\" height=\"480\" srcset=\"https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-1024x512.png 1024w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-300x150.png 300w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-768x384.png 768w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-1536x768.png 1536w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-1080x540.png 1080w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation-1140x570.png 1140w, https:\/\/www.albertopassalacqua.com\/wp-content\/uploads\/2021\/01\/Simulation.png 1920w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/p>\r\n<p>Next step: finish the solver configuration area! I will post once done.<\/p>\r\n\n<p style=\"text-align: justify;\"><em>This offering is not approved or endorsed by OpenCFD Limited, the producer of the OpenFOAM software and owner of the OPENFOAM\u00ae and OpenCFD\u00ae trade marks. Alberto Passalacqua is not associated to OpenCFD Ltd.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some time ago I tweeted about working on a web-based UI for our codes (and snappyHexMesh) to facilitate working with students and also to make the process less tedious for me, which does not hurt. I have never done development with web technologies until two years ago: most of my focus has been on implementing numerical algorithms. I have written UI code in the past using GTK and Qt, but I was quite far from anything web-related, aside from basic HTML. Saying the learning curve was steep is an understatement, but with the help of a very good friend (with the patience of a saint \ud83d\ude00 ) I have slowly learned HTML, CSS, Javascript and Typescript. I knew C# already, so the choice of the backend framework was quite obvious: asp.net core was maturing, is open source, has very nice tooling, and now also has Blazor, a single-page application framework in C#, which relies on WebAssembly to execute code in the browser. It also comes with Entity Framework Core, which helps a great deal in managing database operations from C# code, which is a big plus. From then, things have evolved and I have written several iterations of the app, while I learned more about the many technologies involved. So, it has become a long personal project, accompanied by a great amount of fun, knowing new people (Blazor has a very nice and fun community, one of most helpful I have met in the open-source world, together with that of Three.js, Babylon.js and openSUSE) and quite some headaches too. It is still a personal project, no code has been published, and the amount of work to reach a release state is large and done in my spare personal time. In any case, it is fun, so I thought of start blogging about it, which also helps me to stay on track. Application requirements Let&#8217;s start with a few of the requirements I set forth for the app: No specific knowledge of the underlying code should be needed to set up a case. The user should focus on choosing the physics and the numerical methods, rather than on the specificity of the underlying code. We&#8217;ll see how well this will be achieved, but this is the intention. No code will ever be shared between the app and OpenFOAM\u00ae. This means: no C++ code at all in the app, which is purely written in asp.net core and Javascript. no linking to libraries that are part of OpenFOAM\u00ae and also no reproduction of specific data structures (e.g. dictionary, entries, fields, models in the app are not treated or implemented as in OpenFOAM\u00ae). The app functions and can generate cases without an installed version of OpenFOAM\u00ae. The reason behind this choice is both due to design considerations and also to avoid headaches with licensing (you know, if I will ever decide of conquering the galaxy with my one-man effort \ud83d\ude00 ).\u00a0 The UI should not be based on a specific branch of the underlying code.\u00a0 Adding new functionality to the app (a new model, a new solver, &#8230;) should not require a modification of the app if such functionality uses the same structure of input files used by others. Web-based because it is more convenient than distributing an executable and configuring it on each workstation (downside: it is a lot more challenging to develop the app). Also: I want to learn to build a non-trivial web-application related to CFD. It needs to run (also) on Linux (this is trivial: asp.net core runs on Linux natively and either Apache or nginx can be used as proxy. Users will be able to use any browser that supports WebAssembly.\u00a0 Point 3 has been the most interesting to implement and led to the creation of a sort of &#8220;configuration center&#8221;. Essentially a UI to map the configuration of a solver to a database structure, together with constraints and requirements to generate the UI.\u00a0 Some screenshots The figure below shows how a well-know dictionary structure for turbulence modeling is configured in the app. All is done via the UI (or via a database initializer in C#), no need of ever reading an actual dictionary. Since features change quickly and differ from version to version, I added some version tracking too (Quiz: what does the odd blue + button do?). The second screenshot shows the user-side of the app, where a simulation is configured (geometry selection, solver selection, &#8230;). This part is still under heavy development (geometry and mesh setup being fully functional), and the screenshot only gives an idea of the structure. The side bar allows the key features (geometry, mesh, and solver) to be accessed. The white column is where Blazor components for settings are rendered, and the GL area is used for visualization. The top menu is used for navigation: the Administration menu contains link to the configuration center and to the app settings. the CFD menu is self-explanatory, and contains the features of the sidebar. Next step: finish the solver configuration area! I will post once done.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,133,4,134],"tags":[],"class_list":["post-1992","post","type-post","status-publish","format-standard","hentry","category-cfd","category-development","category-linux","category-personal-projects"],"_links":{"self":[{"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=\/wp\/v2\/posts\/1992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1992"}],"version-history":[{"count":16,"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=\/wp\/v2\/posts\/1992\/revisions"}],"predecessor-version":[{"id":2013,"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=\/wp\/v2\/posts\/1992\/revisions\/2013"}],"wp:attachment":[{"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.albertopassalacqua.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}