{"id":26972,"date":"2022-09-14T01:25:16","date_gmt":"2022-09-14T01:25:16","guid":{"rendered":"https:\/\/holypython.com\/?p=26972"},"modified":"2022-09-14T13:56:49","modified_gmt":"2022-09-14T13:56:49","slug":"viktor-ai-create-3d-app","status":"publish","type":"post","link":"https:\/\/holypython.com\/viktor-ai-create-3d-app\/","title":{"rendered":"How to Create an app with a 3D model using VIKTOR"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"26972\" class=\"elementor elementor-26972\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f763818 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f763818\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fd7e501\" data-id=\"fd7e501\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c093755 elementor-widget elementor-widget-heading\" data-id=\"c093755\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introduction<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24423fd elementor-widget elementor-widget-text-editor\" data-id=\"24423fd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We are going to need smart engineering solutions to solve our planet&#8217;s problems (and soon in other celestial bodies in our solar system) in a smart and scalable manner. Parametric programming is a fantastic approach to optimize efficient engineering methods and achieve those goals.<\/p><p>We recently came across a very interesting platform named VIKTOR which introduces smart app development for engineering with our favorite programming language: Python. The Python-based software is applicable to so many disciplines in the engineering and applied science fields. From material science to organic chemistry, civil engineering to mechanical engineering, Viktor offers an impressive toolbox and takes care of tedious processes such as app hosting, app deployment, intellectual property management and server administration.<\/p><p>In this mini-tutorial we will demonstrate how to create parametric design elements using VIKTOR and Python. VIKTRO also helps package, save, deploy and distribute your engineering app with your colleagues or clients and it can be useful for both engineers and engineering-related business teams as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-809786d elementor-widget elementor-widget-heading\" data-id=\"809786d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Tutorial: Creating Web Apps with VIKTOR (powered by Python)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31eda86 elementor-widget elementor-widget-text-editor\" data-id=\"31eda86\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Creating a web app is an awesome way to let people interact with your Python code because people everywhere in the world can access it; even the ones without any Python skills can use a graphical interface. It brings a whole another level of visualization and interactivity to your engineering project. First, we will ask VIKTOR to create a folder with an empty app containing all files you need, and then install it.\u00a0<\/p><p>Some years ago, you would be right, but nowadays, the <a href=\"https:\/\/viktor.ai\">low-code app development platform VIKTOR<\/a> makes it so easy that virtually anyone with Python knowledge can do it.<\/p><p>In this tutorial, we will guide you to build your very first app with VIKTOR. We will start with a blank app and create an interactive 3D model of a <b>radio tower<\/b> step by step. So, let\u2019s get started!<\/p><p><strong>Note:<\/strong> In case you need it, we included a complete web app code at the end of this tutorial.<\/p><figure style=\"width: 1007px\" class=\"wp-caption alignnone\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-app.png\" alt=\"Open Viktor.AI in Terminal\" width=\"1007\" height=\"622\" align=\"middle\" \/><figcaption class=\"wp-caption-text\">Full app showing parametric design of a radio tower with spherical, conical and cylindrical elements created by Python &amp; VIKTOR.<\/figcaption><\/figure><p><strong>Contents:<\/strong><\/p><ol><li><a href=\"#create-app\">Creating and starting an empty app<\/a><\/li><li><a href=\"#3D\" target=\"_blank\" rel=\"noopener\">Creating a 3D model<\/a><\/li><li><a href=\"#Parametrization\">Adding input fields<\/a><\/li><li><a href=\"#connecting\">Connecting the input fields to the 3D model<\/a><\/li><li><a href=\"#sphere\">Adding a Sphere<\/a><\/li><li><a href=\"#mast\">Adding the mast<\/a><\/li><li><a href=\"#materials\">Adding Materials<\/a><\/li><li><a href=\"#epilogue\">What is next?<\/a><\/li><li><a href=\"#app-code\">All code together<\/a><\/li><\/ol><h3 id=\"pre-requisites\">Prerequisites<\/h3><ul><li>A free VIKTOR account<\/li><li>Installing the free VIKTOR library based on the instructions you receive by mail after making an account<\/li><li>Some Python programming experience<\/li><li>Ability to write and use functions<br \/>(You are always welcome to refer to our <a href=\"https:\/\/holypython.com\/beginner-python-exercises\/exercise-16-defining-functions\/\">Python User Functions Exercises<\/a> and the relevant lesson <a href=\"https:\/\/holypython.com\/beginner-python-lessons\/lesson-16-defining-functions\/\">here<\/a> as well as any other Python lessons, tutorials and exercises we have to reinforce your programming proficiency.)<\/li><\/ul><h2 id=\"installing-viktor\">Installing VIKTOR<\/h2><p>Before we get started, we need to download and install VIKTOR. VIKTOR is the platform that will help us create and host the web app using nothing but Python.<\/p><p>Here, you can <a href=\"https:\/\/www.viktor.ai\/start-building-apps\">create your VIKTOR account<\/a> for free. Just follow the installation instructions which are pretty straightforward. This will take approximately 10 mins.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13ba39f elementor-widget elementor-widget-menu-anchor\" data-id=\"13ba39f\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"create-app\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec9c68a elementor-widget elementor-widget-heading\" data-id=\"ec9c68a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Creating, installing and starting an empty app<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33c88eb elementor-widget elementor-widget-text-editor\" data-id=\"33c88eb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First, we will first ask VIKTOR to create a folder with an empty app containing all files<br \/>you need, and then install it. We will use this app as a basis to make your app. So, let&#8217;s get started!<\/p><ol><li>In the file explorer, go to the location where you like to store this and other future apps. Let&#8217;s assume the folder is called &#8216;viktor-apps&#8217;.<\/li><li><code>Right-click<\/code> in this folder and click on &#8216;Open in Terminal&#8217; (or similar, e.g. &#8216;Open PowerShell window here&#8217;) to open the command-line shell, as in the image below. Note that in older versions of Windows, you may need to <code>Shift + Right-click<\/code> on the folder.<\/li><\/ol><p>\u00a0<\/p><center><img decoding=\"async\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/open-in-terminal.png\" alt=\"Open Viktor.AI in Terminal\" align=\"middle\" \/><\/center><p>\u00a0<\/p><ol><li>On the command line, write the following command:<\/li><\/ol><pre><code class=\"lang-bash\"><span class=\"hljs-string\">viktor-cli <\/span><span class=\"hljs-built_in\">create-app<\/span> <span class=\"hljs-string\">tower-app<\/span>\n<\/code><\/pre><p>This command creates an app with the name &#8216;tower-app&#8217;. After executing the command, you will find a folder called &#8216;tower-app&#8217; inside the &#8216;viktor-apps&#8217; folder.<\/p><p>1. In the PowerShell navigate to the &#8216;tower-app&#8217; folder:<\/p><pre><code class=\"lang-bash\">  <span class=\"hljs-keyword\">cd<\/span> tower-<span class=\"hljs-keyword\">app<\/span>\n<\/code><\/pre><p>2. Before installing a new app, you need to clear the database by running the following command:<\/p><pre><code class=\"lang-bash\">viktor-<span class=\"hljs-keyword\">cli<\/span> <span class=\"hljs-keyword\">clear<\/span>\n<\/code><\/pre><p>3. Now you can install your app using the command below. Installation can take up to 3 minutes, so just have a little patience and read the information below.<\/p><pre><code class=\"lang-bash\">viktor-<span class=\"hljs-keyword\">cli<\/span> install\n<\/code><\/pre><p>The command tells VIKTOR to install the app stored inside the folder where you run the command. That is why we ask you to navigate to the app folder first.<\/p><p>4. Start the app with:<\/p><pre><code class=\"lang-bash\">viktor-<span class=\"hljs-keyword\">cli<\/span> start\n<\/code><\/pre><p>Congratulations, your app is up and running! However, <strong>do not close your command-line shell<\/strong>; otherwise, your app will stop.<\/p><p>5. Open your app in your browser by visiting <a href=\"https:\/\/cloud.viktor.ai\">VIKTOR cloud<\/a> as explained in the command-line shell<\/p><p>6. After logging in, open the &#8220;Development&#8221; card. Great, your app is up and running. Now let&#8217;s go to the fun part: start building the 3D model!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68e7341 elementor-widget elementor-widget-menu-anchor\" data-id=\"68e7341\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"3D\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00ba3ef elementor-widget elementor-widget-heading\" data-id=\"00ba3ef\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Creating a 3D model<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97fcf9e elementor-widget elementor-widget-text-editor\" data-id=\"97fcf9e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this part of the tutorial, we will create a 3D model of the radio tower using the <a href=\"https:\/\/docs.viktor.ai\/sdk\/api\/geometry\">geometry module<\/a>. Before we start building the 3D model, let&#8217;s check out what the current application looks like.<\/p><p>In your browser,<\/p><ol><li>Click on &#8220;Create&#8221;.<\/li><li>Fill in a name in the pop-up<\/li><li>Click &#8220;Create and open&#8221;<\/li><\/ol><p>You should now see an empty page. So let&#8217;s start creating our 3D model.<\/p><h3 id=\"add-a-3d-model-to-your-app\">Add a 3D model to your app<\/h3><p>First, we will visualize the base of the radio tower. The base will just be a cylinder, which will have a height and a diameter. The first part is a bit slow, but I promise that we will draw the rest of the tower at lighting speed.<\/p><ol><li>Go to the folder <code>tower-app<\/code> and open <code>app.py<\/code> in your favourite code editors.<\/li><li>Check <code>app.py<\/code> so that it looks like this:<\/li><\/ol><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.core <span class=\"hljs-keyword\">import<\/span> ViktorController\n<span class=\"hljs-keyword\">from<\/span> viktor.parametrization <span class=\"hljs-keyword\">import<\/span> ViktorParametrization\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Parametrization<\/span><span class=\"hljs-params\">(ViktorParametrization)<\/span>:<\/span>\n     <span class=\"hljs-keyword\">pass<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Controller<\/span><span class=\"hljs-params\">(ViktorController)<\/span>:<\/span>\n    label = <span class=\"hljs-string\">'VIKTOR Tutorial'<\/span>\n    parametrization = Parametrization\n<\/code><\/pre><p>3. On the top, import some additional functions we will need to create the app:<\/p><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.geometry <span class=\"hljs-keyword\">import<\/span> Point,Line,CircularExtrusion,Material,Color\n<span class=\"hljs-keyword\">from<\/span> viktor.views <span class=\"hljs-keyword\">import<\/span> GeometryView,GeometryResult\n<\/code><\/pre><p>4. First we will create a <code>geometry view<\/code> to show your 3D model and define a function to draw everything. We do this inside your controller like this.<\/p><pre><code class=\"lang-python\">...\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Controller<\/span><span class=\"hljs-params\">(ViktorController)<\/span>:<\/span>\n  label = <span class=\"hljs-string\">'VIKTOR Tutorial'<\/span>\n  parametrization = Parametrization\n\n<span class=\"hljs-meta\">  @GeometryView(\"3D\", duration_guess=1)<\/span>\n  <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">visualize_tower<\/span><span class=\"hljs-params\">(self, params, **kwargs)<\/span>:<\/span>\n    <span class=\"hljs-string\">\"\"\"Creates the 3D view and visualizes the Radio Tower\"\"\"<\/span>\n\n    <span class=\"hljs-keyword\">return<\/span> GeometryResult()\n<\/code><\/pre><ul><li>Now we will start drawing. First, let&#8217;s define 2 reference points we need for our design:<\/li><\/ul><pre><code class=\"lang-python\">...\n<span class=\"hljs-meta\">  @GeometryView(\"3D\", duration_guess=1)<\/span>\n  <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">visualize_tower<\/span><span class=\"hljs-params\">(self, params, **kwargs)<\/span>:<\/span>\n    <span class=\"hljs-string\">\"\"\"Creates the 3D view and visualizes the Radio Tower\"\"\"<\/span>\n\n    <span class=\"hljs-comment\"># Reference points<\/span>\n\n    base_start = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)         <span class=\"hljs-comment\">#&lt;--- Add this lines<\/span>\n    base_end = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">50<\/span>)          <span class=\"hljs-comment\">#&lt;--- Add this lines<\/span>\n\n    <span class=\"hljs-keyword\">return<\/span> GeometryResult()\n<\/code><\/pre><ul><li>To create your base of the tower, we will use <code>CirculerExtrusion<\/code>, which draws a cylinder following a line between the points base_start and base_end. Under the two point we just created add:<\/li><\/ul><pre><code class=\"lang-python\">    <span class=\"hljs-comment\"># Create tower base<\/span>\n\n    line = Line(<span class=\"hljs-keyword\">base_start, <\/span><span class=\"hljs-keyword\">base_end)\n<\/span>    <span class=\"hljs-keyword\">base <\/span>= CircularExtrusion(<span class=\"hljs-keyword\">diameter=5, <\/span>line=line)\n\n    return GeometryResult(<span class=\"hljs-keyword\">base) <\/span>    <span class=\"hljs-comment\"># &lt;--- don't forget to change this line<\/span>\n<\/code><\/pre><ul><li>If everything went right, you should be able to see the cylinder in your app. <strong>Save the app.py file<\/strong>, go to your app and refresh the page.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5cc313f elementor-widget elementor-widget-menu-anchor\" data-id=\"5cc313f\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"Parametrization\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-564b5d1 elementor-widget elementor-widget-image\" data-id=\"564b5d1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1008\" height=\"625\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/base.png\" class=\"attachment-full size-full wp-image-26988\" alt=\"\" srcset=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/base.png 1008w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/base-300x186.png 300w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/base-768x476.png 768w\" sizes=\"(max-width: 1008px) 100vw, 1008px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bb0c2e elementor-widget elementor-widget-text-editor\" data-id=\"0bb0c2e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"all-the-code-so-far\">Python code up to cylinder creation<\/h3><p>In case something went wrong, here you can see the complete code so far. Just copy\/paste it in <code>app.py<\/code> and everything should work.<\/p><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.core <span class=\"hljs-keyword\">import<\/span> ViktorController\n<span class=\"hljs-keyword\">from<\/span> viktor.parametrization <span class=\"hljs-keyword\">import<\/span> ViktorParametrization\n<span class=\"hljs-keyword\">from<\/span> viktor.geometry <span class=\"hljs-keyword\">import<\/span> Point, Line, CircularExtrusion, Cone, Sphere, Material, Color\n<span class=\"hljs-keyword\">from<\/span> viktor.views <span class=\"hljs-keyword\">import<\/span> GeometryResult, GeometryView\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Parametrization<\/span><span class=\"hljs-params\">(ViktorParametrization)<\/span>:<\/span>\n    <span class=\"hljs-keyword\">pass<\/span>\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Controller<\/span><span class=\"hljs-params\">(ViktorController)<\/span>:<\/span>\n    label = <span class=\"hljs-string\">'VIKTOR Tutorial'<\/span>\n    parametrization = Parametrization\n\n<span class=\"hljs-meta\">    @GeometryView(\"3D\", duration_guess=1)<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">visualize_tower<\/span><span class=\"hljs-params\">(self, params, **kwargs)<\/span>:<\/span>\n        <span class=\"hljs-string\">\"\"\"Creates the 3D view and visualizes the Radio Tower\"\"\"<\/span>\n\n        <span class=\"hljs-comment\"># Reference points<\/span>\n\n        base_start = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n        base_end = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">50<\/span>)\n\n        <span class=\"hljs-comment\"># Create tower base<\/span>\n\n        line = Line(base_start, base_end)\n        base = CircularExtrusion(diameter=<span class=\"hljs-number\">5<\/span>, line=line)\n\n        <span class=\"hljs-keyword\">return<\/span> GeometryResult(base)\n<\/code><\/pre>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86b9a3a elementor-widget elementor-widget-menu-anchor\" data-id=\"86b9a3a\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"connecting\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15cc433 elementor-widget elementor-widget-heading\" data-id=\"15cc433\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding input fields<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29bac3e elementor-widget elementor-widget-text-editor\" data-id=\"29bac3e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We created a 3D model in the last section, but what if you want a user to change the geometry dynamically? Using <a href=\"https:\/\/docs.viktor.ai\/docs\/create-apps\/user-input\/\">VIKTOR\u2019s input fields<\/a> you can. Let\u2019s add a few input fields to change the length, width and height of your cylinder.<\/p><ul><li>Let&#8217;s import the <code>NumberField<\/code> we need. At the top of you code add:<\/li><\/ul><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.parametrization <span class=\"hljs-keyword\">import<\/span> NumberField\n<\/code><\/pre><ul><li>Under <code>class Parametrization(ViktorParametrization):<\/code> we will add 2 fields to change the dimensions of the cylinder, and don&#8217;t forget to eliminate <code>pass<\/code>. You code should look like this:<\/li><\/ul><pre><code class=\"lang-python\">...\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Parametrization<\/span><span class=\"hljs-params\">(ViktorParametrization)<\/span>:<\/span>\n    <span class=\"hljs-string\">\"\"\"Parametrization of the Radio Tower\"\"\"<\/span>\n\n    <span class=\"hljs-comment\"># Base of the tower<\/span>\n    base_height = NumberField(<span class=\"hljs-string\">\"Height base\"<\/span>, default=<span class=\"hljs-number\">50<\/span>, min=<span class=\"hljs-number\">1<\/span>)\n    base_diameter = NumberField(<span class=\"hljs-string\">\"Diameter base\"<\/span>, default=<span class=\"hljs-number\">3<\/span>, min=<span class=\"hljs-number\">1<\/span>)\n\n    <span class=\"hljs-comment\">#pass  &lt;---- DELETE THIS LINE<\/span>\n    ...\n<\/code><\/pre><ul><li>Again, save the <code>app.py<\/code> file. Go to your app, refresh the page and see the <code>NumberField<\/code>s appear in your app.<\/li><\/ul><p>Did you notice that changing the values does not modify the 3D model? This is because we have not connected the <code>NumberField<\/code>s to your 3D model yet. We\u2019ll do this next.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3c1b03 elementor-widget elementor-widget-image\" data-id=\"f3c1b03\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1007\" height=\"621\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/fieldscylinder.png\" class=\"attachment-full size-full wp-image-26987\" alt=\"\" srcset=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/fieldscylinder.png 1007w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/fieldscylinder-300x185.png 300w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/fieldscylinder-768x474.png 768w\" sizes=\"(max-width: 1007px) 100vw, 1007px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c31a86 elementor-widget elementor-widget-text-editor\" data-id=\"0c31a86\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3 id=\"all-code-toghter-so-far\">All code toghter so far<\/h3><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.core <span class=\"hljs-keyword\">import<\/span> ViktorController\n<span class=\"hljs-keyword\">from<\/span> viktor.parametrization <span class=\"hljs-keyword\">import<\/span> ViktorParametrization, NumberField\n<span class=\"hljs-keyword\">from<\/span> viktor.geometry <span class=\"hljs-keyword\">import<\/span> Point, Line, CircularExtrusion, Cone, Sphere, Material, Color\n<span class=\"hljs-keyword\">from<\/span> viktor.views <span class=\"hljs-keyword\">import<\/span> GeometryResult, GeometryView\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Parametrization<\/span><span class=\"hljs-params\">(ViktorParametrization)<\/span>:<\/span>\n    <span class=\"hljs-string\">\"\"\"Parametrization of the Radio Tower\"\"\"<\/span>\n\n    <span class=\"hljs-comment\"># Base of the tower<\/span>\n    base_height = NumberField(<span class=\"hljs-string\">\"Height base\"<\/span>, default=<span class=\"hljs-number\">50<\/span>, min=<span class=\"hljs-number\">1<\/span>)\n    base_diameter = NumberField(<span class=\"hljs-string\">\"Diameter base\"<\/span>, default=<span class=\"hljs-number\">3<\/span>, min=<span class=\"hljs-number\">1<\/span>)\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Controller<\/span><span class=\"hljs-params\">(ViktorController)<\/span>:<\/span>\n    label = <span class=\"hljs-string\">'VIKTOR Tutorial'<\/span>\n    parametrization = Parametrization\n\n<span class=\"hljs-meta\">    @GeometryView(\"3D\", duration_guess=1)<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">visualize_tower<\/span><span class=\"hljs-params\">(self, params, **kwargs)<\/span>:<\/span>\n        <span class=\"hljs-string\">\"\"\"Creates the 3D view and visualizes the Radio Tower\"\"\"<\/span>\n\n        <span class=\"hljs-comment\"># Reference points<\/span>\n\n        base_start = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n        base_end = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">50<\/span>)\n\n        <span class=\"hljs-comment\"># Create tower base<\/span>\n\n        line = Line(base_start, base_end)\n        base = CircularExtrusion(diameter=<span class=\"hljs-number\">5<\/span>, line=line)\n\n        <span class=\"hljs-keyword\">return<\/span> GeometryResult(base)\n<\/code><\/pre>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f6a5db elementor-widget elementor-widget-heading\" data-id=\"7f6a5db\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Connecting the input fields to the 3D model<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3416fd8 elementor-widget elementor-widget-text-editor\" data-id=\"3416fd8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019ll connect the input fields to the 3D model to make it dynamic:<\/p><ul><li>Change the 3rd value of <code>base_end<\/code> from a static 50 to <code>params.base_height<\/code> and the value of <code>diameter<\/code> to <code>params.base_diameter<\/code> as shown below:<\/li><\/ul><pre><code class=\"lang-python\">...\n\n<span class=\"hljs-meta\">     @GeometryView(\"3D\",duration_guess=1)<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">visualize_tower<\/span><span class=\"hljs-params\">(self, params, **kwargs)<\/span>:<\/span>\n        <span class=\"hljs-string\">\"\"\"Creates the 3D view and visualizes the Radio Tower\"\"\"<\/span>\n\n        <span class=\"hljs-comment\"># Reference points<\/span>\n        base_start = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n        base_end = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, params.base_height)      <span class=\"hljs-comment\"># &lt;--- add params.base_height here<\/span>\n\n        <span class=\"hljs-comment\"># Create tower base<\/span>\n        line = Line(base_start, base_end)\n        base = CircularExtrusion(diameter=params.base_diameter, line=line)      <span class=\"hljs-comment\"># &lt;--- params.base_diameter here<\/span>\n\n        <span class=\"hljs-keyword\">return<\/span> GeometryResult(base)\n<\/code><\/pre><ul><li>Again, save the <code>app.py<\/code> file. This time, instead of refreshing your app, just change some input values. Did you see that? VIKTOR updated the app, and your 3D model is now dynamic!<\/li><\/ul><p>Awesome, we already created a fully functioning parametrized model of a beam including a 3D visualisation! If you were<br \/>wondering whether this is a good time: Yes, this is a perfect moment to pat yourself on the back!<\/p><h3 id=\"how-does-this-work-\">How does this work?<\/h3><p>So what happens in the background? Each time you change an input parameter, VIKTOR reruns the corresponding code and shows the results in the view. In technical words, your code is stateless.<\/p><ul><li>All the input parameters are stored in the variable <code>params<\/code>. That is why it is important to pass it to <code>def visualize_tower(self, params, **kwargs)<\/code>.<\/li><li><code>params<\/code> is a <code>Munch<\/code>, which is like a Python dictionary. You can access the data inside params using dot-style notation. So, for example, to access <code>height<\/code> inside <code>params<\/code>, you write <code>params.height<\/code>.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3bc8a8d elementor-widget elementor-widget-heading\" data-id=\"3bc8a8d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding a sphere<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15a68d5 elementor-widget elementor-widget-menu-anchor\" data-id=\"15a68d5\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"sphere\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb6eb8a elementor-widget elementor-widget-text-editor\" data-id=\"fb6eb8a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At the top of the tower we add a Sphere.<\/p><p>1. Let&#8217;s import Sphere<\/p><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.geometry <span class=\"hljs-keyword\">import<\/span> Sphere\n<\/code><\/pre><p>2. We will add and input field to determine the Sphere&#8217;s radius:<\/p><pre><code class=\"lang-python\">...\nclass Parametrization(ViktorParametrization):\n\n <span class=\"hljs-attr\">base_height<\/span> = NumberField(<span class=\"hljs-string\">\"Height base\"<\/span>, <span class=\"hljs-attr\">default=50,<\/span> <span class=\"hljs-attr\">min=1)<\/span>\n <span class=\"hljs-attr\">base_diameter<\/span> = NumberField(<span class=\"hljs-string\">\"Diameter base\"<\/span>, <span class=\"hljs-attr\">default=3,<\/span> <span class=\"hljs-attr\">min=1)<\/span>\n <span class=\"hljs-attr\">sphere_radius<\/span> = NumberField(<span class=\"hljs-string\">\"Radius sphere\"<\/span>, <span class=\"hljs-attr\">default=4,<\/span> <span class=\"hljs-attr\">min=1)<\/span>      <span class=\"hljs-comment\"># &lt;-- Add this line<\/span>\n<\/code><\/pre><p>3. Go to our <code>@GeometryView<\/code> and add a <code>Sphere<\/code> under the lines that define the base. <code>Sphere<\/code> needs a point and a diameter. Don&#8217;t forget to return the Sphere at the end, so it is visualized. Your code should look like this:<\/p><pre><code class=\"lang-python\"><span class=\"hljs-meta\">@GeometryView(\"3D\", duration_guess=1)<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">visualize_tower<\/span><span class=\"hljs-params\">(self, params, **kwargs)<\/span>:<\/span>\n  <span class=\"hljs-string\">\"\"\"Creates the 3D view and visualizes the Radio Tower\"\"\"<\/span>\n\n  <span class=\"hljs-comment\"># Reference points<\/span>\n\n  base_start = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n  base_end = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, params.base_height)\n\n  <span class=\"hljs-comment\"># Create tower base<\/span>\n\n  line = Line(base_start, base_end)\n  base = CircularExtrusion(diameter=params.base_diameter, line=line)\n\n  <span class=\"hljs-comment\"># Create tower cabin<\/span>\n\n  cabin = Sphere(base_end, params.sphere_radius)  <span class=\"hljs-comment\"># &lt;-- Add this line<\/span>\n\n  <span class=\"hljs-keyword\">return<\/span> GeometryResult([base, cabin]) <span class=\"hljs-comment\"># &lt;--- put base and cabin in a list, so they are shown.<\/span>\n<\/code><\/pre><p>4. Again. Save the file and refresh the app.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-498fd0d elementor-widget elementor-widget-image\" data-id=\"498fd0d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"618\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/sphere.png\" class=\"attachment-full size-full wp-image-26986\" alt=\"\" srcset=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/sphere.png 1005w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/sphere-300x184.png 300w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/sphere-768x472.png 768w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c33707 elementor-widget elementor-widget-heading\" data-id=\"9c33707\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding the mast<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbe5c0c elementor-widget elementor-widget-menu-anchor\" data-id=\"cbe5c0c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"mast\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca73747 elementor-widget elementor-widget-text-editor\" data-id=\"ca73747\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now that you are used to VIKTOR, we ramp up the speed and quickly add the mast on top of our tower in the exact same way we have done before.<\/p><p>1. Import the code:<\/p><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.geometry <span class=\"hljs-keyword\">import<\/span> Cone\n<\/code><\/pre><p>2. Add the <code>NumberField<\/code> for the mast height:<\/p><pre><code class=\"lang-python\">mast_height = NumberField(<span class=\"hljs-string\">\"Height mast\"<\/span>, <span class=\"hljs-section\">default<\/span>=<span class=\"hljs-number\">30<\/span>, min=<span class=\"hljs-number\">1<\/span>)\n<\/code><\/pre><p>3. Draw a cone and don&#8217;t forget to return it so it is visualized:<\/p><pre><code class=\"lang-python\"><span class=\"hljs-meta\"># Tower top<\/span>\n\ntop = Cone(diameter=<span class=\"hljs-keyword\">params<\/span>.base_diameter, height=<span class=\"hljs-keyword\">params<\/span>.mast_height, origin=base_end) <span class=\"hljs-meta\"># &lt;-- Add this <span class=\"hljs-meta-keyword\">line<\/span><\/span>\n\n<span class=\"hljs-keyword\">return<\/span> GeometryResult([<span class=\"hljs-keyword\">base<\/span>,cabin,top]) <span class=\"hljs-meta\"># &lt;-- Update this <span class=\"hljs-meta-keyword\">line<\/span><\/span>\n<\/code><\/pre><p>4. Save the file and refresh.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0da67d9 elementor-widget elementor-widget-menu-anchor\" data-id=\"0da67d9\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"materials\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0722198 elementor-widget elementor-widget-image\" data-id=\"0722198\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"622\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-full.png\" class=\"attachment-full size-full wp-image-26984\" alt=\"\" srcset=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-full.png 1007w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-full-300x185.png 300w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-full-768x474.png 768w\" sizes=\"(max-width: 1007px) 100vw, 1007px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe91a68 elementor-widget elementor-widget-heading\" data-id=\"fe91a68\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding materials<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-caae464 elementor-widget elementor-widget-text-editor\" data-id=\"caae464\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Great, we created the full 3D model of the tower, but it is looking a bit pale. Let&#8217;s add some color, we don&#8217;t want a plane crashing into it \ud83d\ude09<\/p><p>We will add color, by creating some <code>Material<\/code> and adding them to the 3D models.<\/p><p>1. Import <code>Material<\/code> and <code>Color<\/code>:<\/p><pre><code class=\"lang-python\"><span class=\"hljs-keyword\">from<\/span> viktor.geometry <span class=\"hljs-keyword\">import<\/span> Material, Color\n<\/code><\/pre><p>2. Add materials as constants under the imports and before the Parametrization class:<\/p><pre><code class=\"lang-python\">...\n\nWHITE = Material(<span class=\"hljs-string\">\"White\"<\/span>, color=Color.white())  # &lt;-- Add these lines too\nRED = Material(<span class=\"hljs-string\">\"Red\"<\/span>, color=Color.red())        # &lt;-- Add these lines too\n\n<span class=\"hljs-keyword\">class<\/span> Parametrization(ViktorParametrization): # &lt;-- this line is just for your reference\n\n...\n<\/code><\/pre><p>3. Add the materials to the different geometries we created before, as shown here:<\/p><pre><code class=\"lang-python\">...\n\n<span class=\"hljs-comment\"># Create tower base<\/span>\n<span class=\"hljs-attr\">line<\/span> = Line(base_start, base_end)\n<span class=\"hljs-attr\">base<\/span> = CircularExtrusion(<span class=\"hljs-attr\">diameter=params.base_diameter,<\/span> <span class=\"hljs-attr\">line=line,<\/span> <span class=\"hljs-attr\">material=WHITE)<\/span>\n\n<span class=\"hljs-comment\"># Create tower cabin<\/span>\n\n<span class=\"hljs-attr\">cabin<\/span> = Sphere(base_end, params.sphere_radius, <span class=\"hljs-attr\">material=WHITE)<\/span>\n\n<span class=\"hljs-comment\"># Tower top<\/span>\n\n<span class=\"hljs-attr\">top<\/span> = Cone(<span class=\"hljs-attr\">diameter=params.base_diameter,<\/span> <span class=\"hljs-attr\">height=params.mast_height,<\/span> <span class=\"hljs-attr\">origin=base_end,<\/span> <span class=\"hljs-attr\">material=RED)<\/span>\n<\/code><\/pre><p>4. Save, refresh, and you should have a colorful tower:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56f0c37 elementor-widget elementor-widget-image\" data-id=\"56f0c37\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"618\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-color.png\" class=\"attachment-full size-full wp-image-26985\" alt=\"\" srcset=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-color.png 1002w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-color-300x185.png 300w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/tower-color-768x474.png 768w\" sizes=\"(max-width: 1002px) 100vw, 1002px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1281b00 elementor-widget elementor-widget-menu-anchor\" data-id=\"1281b00\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"epilogue\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a7f845 elementor-widget elementor-widget-text-editor\" data-id=\"5a7f845\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 id=\"what-is-next-a-name-epilogue-a-\">What is next? <a name=\"epilogue\"><\/a><\/h2><p>If you managed to get this far, you have done a great job and successfully built your first Python app with VIKTOR! VIKTOR has a large collection of functions and visualizations that await exploring. Feel free to go and check out their docs and start making your own engineering apps powered by Python.<\/p><ul><li>Explore the different <a href=\"https:\/\/docs.viktor.ai\/docs\/create-apps\/user-input\/\">Input Fields, Option Lists and buttons<\/a><\/li><li>Explore the different <a href=\"https:\/\/docs.viktor.ai\/docs\/create-apps\/results-and-visualizations\/\">visualizations<\/a><\/li><li>See how you can change the <a>layout and style<\/a> of your app<\/li><li>Learn how to <a href=\"https:\/\/docs.viktor.ai\/docs\/create-apps\/documents-and-spreadsheets\/\">generate reports automatically<\/a><\/li><li>Download one of the <a href=\"https:\/\/docs.viktor.ai\/apps-gallery\/\">sample apps<\/a> and tweak them to your needs<\/li><li>Learn more about VIKTOR&#8217;s <a href=\"https:\/\/docs.viktor.ai\/docs\/create-apps\/fundamentals\/?_highlight=fundamenta\">fundamental concepts<\/a><\/li><li>Look up specific VIKTOR classes and functions in the <a href=\"https:\/\/docs.viktor.ai\/sdk\/api\/\">SDK reference<\/a><\/li><\/ul><p>And if you need any help, want to request features or share your creations, you can head over to the <a href=\"https:\/\/community.viktor.ai\/\">Community Forum<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b590cf0 elementor-widget elementor-widget-menu-anchor\" data-id=\"b590cf0\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"app-code\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa74146 elementor-widget elementor-widget-text-editor\" data-id=\"aa74146\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 id=\"all-code-together-a-name-app-code-a-\">Final code for parametric Radio Tower design<\/h2><p>Just in case, here you can find the complete code of the app:<\/p><pre><code class=\"lang-python\">from viktor.core <span class=\"hljs-built_in\">import<\/span> ViktorController\nfrom viktor.parametrization <span class=\"hljs-built_in\">import<\/span> ViktorParametrization, NumberField\nfrom viktor.geometry <span class=\"hljs-built_in\">import<\/span> Point, Line, CircularExtrusion, Cone, Sphere, Material, Color\nfrom viktor.views <span class=\"hljs-built_in\">import<\/span> GeometryResult, GeometryView\n\n<span class=\"hljs-attr\">WHITE<\/span> = Material(<span class=\"hljs-string\">\"White\"<\/span>, <span class=\"hljs-attr\">color=Color.white())<\/span>\n<span class=\"hljs-attr\">RED<\/span> = Material(<span class=\"hljs-string\">\"Red\"<\/span>, <span class=\"hljs-attr\">color=Color.red())<\/span>\n\n\nclass Parametrization(ViktorParametrization):\n\n  <span class=\"hljs-attr\">base_height<\/span> = NumberField(<span class=\"hljs-string\">\"Height base\"<\/span>, <span class=\"hljs-attr\">default=50,<\/span> <span class=\"hljs-attr\">min=1)<\/span>\n  <span class=\"hljs-attr\">base_diameter<\/span> = NumberField(<span class=\"hljs-string\">\"Diameter base\"<\/span>, <span class=\"hljs-attr\">default=3,<\/span> <span class=\"hljs-attr\">min=1)<\/span>\n  <span class=\"hljs-attr\">sphere_radius<\/span> = NumberField(<span class=\"hljs-string\">\"Radius sphere\"<\/span>, <span class=\"hljs-attr\">default=4,<\/span> <span class=\"hljs-attr\">min=1)<\/span>\n  <span class=\"hljs-attr\">mast_height<\/span> = NumberField(<span class=\"hljs-string\">\"Height mast\"<\/span>, <span class=\"hljs-attr\">default=30,<\/span> <span class=\"hljs-attr\">min=1)<\/span>\n\n\nclass Controller(ViktorController):\n  <span class=\"hljs-attr\">label<\/span> = 'VIKTOR Tutorial'\n  <span class=\"hljs-attr\">parametrization<\/span> = Parametrization\n\n  @GeometryView(<span class=\"hljs-string\">\"3D\"<\/span>, <span class=\"hljs-attr\">duration_guess=1)<\/span>\n  def visualize_tower(self, params, **kwargs):\n    <span class=\"hljs-string\">\"\"<\/span><span class=\"hljs-string\">\"Creates the 3D view and visualizes the Radio Tower\"<\/span><span class=\"hljs-string\">\"\"<\/span>\n\n    print(<span class=\"hljs-string\">\"Params:\"<\/span>, params)\n\n    <span class=\"hljs-comment\"># Reference points<\/span>\n\n    <span class=\"hljs-attr\">base_start<\/span> = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n    <span class=\"hljs-attr\">base_end<\/span> = Point(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, params.base_height)\n\n    <span class=\"hljs-comment\"># Create tower base<\/span>\n\n    <span class=\"hljs-attr\">line<\/span> = Line(base_start, base_end)\n    <span class=\"hljs-attr\">base<\/span> = CircularExtrusion(<span class=\"hljs-attr\">diameter=params.base_diameter,<\/span> <span class=\"hljs-attr\">line=line,<\/span> <span class=\"hljs-attr\">material=WHITE)<\/span>\n\n    <span class=\"hljs-comment\"># Create tower cabin<\/span>\n\n    <span class=\"hljs-attr\">cabin<\/span> = Sphere(base_end, params.sphere_radius, <span class=\"hljs-attr\">material=WHITE)<\/span>\n\n    <span class=\"hljs-comment\"># Tower top<\/span>\n\n    <span class=\"hljs-attr\">top<\/span> = Cone(<span class=\"hljs-attr\">diameter=params.base_diameter,<\/span> <span class=\"hljs-attr\">height=params.mast_height,<\/span> <span class=\"hljs-attr\">origin=base_end,<\/span> <span class=\"hljs-attr\">material=RED)<\/span>\n\n    return GeometryResult([base, cabin, top])\n<\/code><\/pre>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7261540 elementor-widget elementor-widget-text-editor\" data-id=\"7261540\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now although this web application is pretty simple, it&#8217;s effective and useful. Furthermore, this implementation opens a whole new world of opportunities to design engineering apps using minimal Python code base with VIKTOR which can be applied to pretty much any concept under engineering and science subdomains.<\/p><p>VIKTOR takes care of the cybersecurity, hosting, server administration, management of intangible assets such as\u00a0 intellectual property and low-level programming and the result is an intuitive app creation process which can hopefully yield fruitful\u00a0 discussions and\/or presentations in projects with parametric design elements.<\/p><p>We will be publishing a number of professional Python tutorials in near future to continue demonstrating Python&#8217;s potential in sophisticated use cases in the field and help you gain inspiration that can result in real world outcomes.<\/p><p>You can find the Python source code and information regarding dependencies of this app at our <a href=\"https:\/\/github.com\/holypython\/holypython\/tree\/master\/Viktor\">Github Repository: Python-3D-Tower-Web-App source code<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-133fa52 elementor-section-full_width elementor-section-height-min-height elementor-section-content-middle elementor-section-height-default elementor-section-items-middle\" data-id=\"133fa52\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d48b60f\" data-id=\"d48b60f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-56a6392 elementor-widget elementor-widget-heading\" data-id=\"56a6392\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-large\">Guest Author<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fabd353 elementor-widget elementor-widget-testimonial\" data-id=\"fabd353\" data-element_type=\"widget\" data-widget_type=\"testimonial.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-testimonial-wrapper\">\n\t\t\t\t\t\t\t<div class=\"elementor-testimonial-content\">Anande is our guest author who is also a pioneer in parametric design and digital engineering topics. \n\nHe is based in Netherlands and he has a background in Aerospace Engineering and Mechanical Engineering fields.\n<br><br>\nAnande takes \"Automate the Boring Stuff\" philosophy by heart and contributes to increase efficiency in engineering applications with smart Python-based parametric design solutions @VIKTOR.<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-testimonial-meta elementor-has-image elementor-testimonial-image-position-top\">\n\t\t\t\t<div class=\"elementor-testimonial-meta-inner\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-testimonial-image\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/nl.linkedin.com\/in\/anande-bergman-a9488776\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/Anande_Bergman.jpg\" class=\"attachment-full size-full wp-image-27042\" alt=\"\" srcset=\"https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/Anande_Bergman.jpg 800w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/Anande_Bergman-300x300.jpg 300w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/Anande_Bergman-150x150.jpg 150w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/Anande_Bergman-768x768.jpg 768w, https:\/\/holypython.com\/wp-content\/uploads\/2022\/09\/Anande_Bergman-500x500.jpg 500w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-testimonial-details\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-testimonial-name\" href=\"https:\/\/nl.linkedin.com\/in\/anande-bergman-a9488776\">ANANDE BERGMAN<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-testimonial-job\" href=\"https:\/\/nl.linkedin.com\/in\/anande-bergman-a9488776\"><b><br>Aerospace Engineer<\/b><\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introduction We are going to need smart engineering solutions to solve our planet&#8217;s problems (and soon in other celestial bodies in our solar system) in a smart and scalable manner. Parametric programming is a fantastic approach to optimize efficient engineering methods and achieve those goals. We recently came across a very interesting platform named VIKTOR [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":27004,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[76,52],"tags":[],"class_list":["post-26972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering-with-python","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/posts\/26972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/comments?post=26972"}],"version-history":[{"count":0,"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/posts\/26972\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/media\/27004"}],"wp:attachment":[{"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/media?parent=26972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/categories?post=26972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holypython.com\/wp-json\/wp\/v2\/tags?post=26972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}