{"id":52609,"date":"2023-10-05T10:10:29","date_gmt":"2023-10-05T08:10:29","guid":{"rendered":"https:\/\/www.myscada.org\/?post_type=docs&#038;p=52609"},"modified":"2023-10-24T14:19:18","modified_gmt":"2023-10-24T12:19:18","password":"","slug":"fill-and-stroke","status":"publish","type":"docs","link":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/","title":{"rendered":"Fill and stroke"},"content":{"rendered":"<p>Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern.<\/p>\n<ul>\n<li>Watch video describing this functionality: <a href=\"https:\/\/www.youtube.com\/watch?v=ryduKCgzFr0\">https:\/\/www.youtube.com\/watch?v=ryduKCgzFr0<\/a><\/li>\n<\/ul>\n<p>Change a fill or stroke:<\/p>\n<ol>\n<li>Select the object(s) whose color you want to change<\/li>\n<li>Click on the <strong>Color, Gradients, and Patterns <\/strong>button in the GUI Toolbar<\/li>\n<li>Choose a solid color, gradient, or pattern.<\/li>\n<li>Confirm the changes by clicking on the <strong>OK<\/strong><\/li>\n<\/ol>\n<h3>Solid Color<\/h3>\n<p>Navigate to the <strong>Colors <\/strong>tab in the <strong>Resources<\/strong> tab where you will see a few options for solid colors:<\/p>\n<p><strong><em>Swatches<\/em><\/strong> \u2013 select the color from the pre-defined palette<\/p>\n<p><strong><em>HSV<\/em> <\/strong>\u2013 mix your desired color by determining the <em>Hue, Saturation, <\/em>and<em> Value<\/em> and setting <em>Transparency<\/em><\/p>\n<p><strong><em>HSL<\/em><\/strong> \u2013 mix your desired color by determining the <em>Hue, Saturation, <\/em>and<em> Lightness<\/em> values and setting <em>Transparency<\/em><\/p>\n<p><strong><em>RGB<\/em><\/strong> \u2013 mix your desired color by determining the<em> Red Green <\/em>and<em> Blue<\/em> values and setting <em>Alpha <\/em>level<\/p>\n<p><strong><em>CMYK<\/em><\/strong> \u2013 select your color from the <em>Cyan, Magenta, Yellow, Key (Black) <\/em>color palette and set <em>Alpha<\/em><\/p>\n<p><strong><em>SVG <\/em><\/strong>\u2013 select your color from the pre-defined SVG standard colors palette<\/p>\n<h3>Gradients<\/h3>\n<p>Using gradients enables you to create your own custom color blends and give your objects a plastic look. You can create smooth color gradations over one or more objects and save them for later use\u00a0\u00a0 on other objects.<\/p>\n<p>The <strong>Resources <\/strong>tab contains pre-defined linear and radial gradients and patterns. You may create new gradients and patterns or modify the existing ones.<\/p>\n<p><strong><em>Linear gradient<\/em><\/strong><\/p>\n<p>The linear gradient function enables you to create horizontal, vertical, and diagonal gradient fills.<\/p>\n<p>You can choose from pre-defined linear gradients in the <strong>Resources <\/strong>tab:<\/p>\n<p>When you click on a pre-defined gradient, you will see its properties in the right side panel.<\/p>\n<p>You can see the gradient preview in the small top window, and if you click on the tab <strong>Preview,<\/strong> you will see how the object will look.<\/p>\n<p>The bottom part of the panel is divided into two tabs, <strong>Basic <\/strong>and <strong>Advanced<\/strong>:<\/p>\n<p><strong><em>\u00a0<\/em><\/strong><\/p>\n<p><strong><em>Basic<\/em><\/strong> &#8211; you will find all defined colors for a selected gradient<\/p>\n<p>On the basic tab panel, each color has its own controls.<\/p>\n<p>Therefore, each color has the following properties:<\/p>\n<ul>\n<li><em>Color<\/em> &#8211; sets the color and corresponding color code<\/li>\n<\/ul>\n<ul>\n<li><em>Opacity<\/em> &#8211; specifies the alpha channel (transparency)<\/li>\n<\/ul>\n<ul>\n<li><em>Position<\/em> &#8211; specifies the starting point of this color. Move the slider to the side to change the color position.<\/li>\n<\/ul>\n<p>To remove a color, press the \u201cX\u201d button.<\/p>\n<p>To add a new color, press the <em>+ Add Color<\/em> button.<\/p>\n<p><strong><em>Advanced<\/em><\/strong> &#8211; you can fine-tune your custom gradient and define the id, angle, and fill options<\/p>\n<ul>\n<li><em>Id<\/em> &#8211; you can name the newly created gradient<\/li>\n<li><em>Angle <\/em>&#8211; you can change the angle of the gradient from horizontal to a custom angle<\/li>\n<li><em>x1, y1, x2,y2<\/em> &#8211; linear gradients are defined by the bounding box of an object they fill; x1 and y1 specify the initial point of the gradient of the bounding box; x2 and y2 represent the end point of the gradient<\/li>\n<li><em>Spread method <\/em>&#8211; Pad &#8211; basic fill option, no reflection or repeating\n<ul>\n<li>Repeat (repeats the shading)<\/li>\n<li>Reflect (reflects the shading)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong><em>Radial gradients<\/em><\/strong><\/p>\n<p>This function operates with circular gradient fills; this is the same principal as for the linear gradients, only the <strong>Advanced <\/strong>section is slightly different:<\/p>\n<ul>\n<li><em>Id<\/em> &#8211; you can name the newly created gradient<\/li>\n<li><em>Radius<\/em> &#8211; sets the gradient radius<\/li>\n<li><em>cx<\/em><em>, cy,<\/em> and <em>r<\/em> define the outermost circle of the radial gradient<\/li>\n<li><em>fx<\/em> and <em>fy<\/em> define the focal point of the radial gradient<\/li>\n<li><em>Spread method &#8211; <\/em>Pad &#8211; basic fill option, no reflection or repeating\n<ul>\n<li>Repeat (repeats the shading)<\/li>\n<li>Reflect (reflects the shading)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Patterns<\/h3>\n<p>Different objects or images can be used as a pattern for other objects. <em>myDESIGNER<\/em> lets you choose from pre-defined patterns or create new ones, either by modification of the existing ones or by importing a file (jpg, png, jpeg) or selection. Patterns can be either raster images or vectors. If you use raster images, you might experience pixelation on tighter zoom, so if you can choose, use vector image where possible.<\/p>\n<p><strong><em>Predefined Patterns<\/em><\/strong><\/p>\n<p>Predefined patterns are simple but effective patterns for you to use. Please keep in mind that you can very easily change color or rotate gradients to suit your requirements. Usage is quite simple; select a pattern you wish to use, and if necessary, modify the parameters and hit the save button.<\/p>\n<p><strong><em>User Defined Patterns<\/em><\/strong><\/p>\n<p>All the patterns used in your view are listed here. You can also create new ones from predefined patterns or import them from files or selections.<\/p>\n<p>To use a user-defined pattern, just select it and click on the <em>OK<\/em> button.<\/p>\n<p>Buttons on the bottom allow you to create new patterns, either from a file or from a selection, as well as delete and duplicate existing patterns.<\/p>\n<p><strong><em>\u00a0<\/em><\/strong><\/p>\n<p><strong><em>Pattern Import<\/em><\/strong><\/p>\n<p><strong><em>From File<\/em><\/strong><\/p>\n<p>Click on the <em>+ From Picture<\/em> button and select the source raster image file in the dialog window, then click on the <em>OK<\/em> button.<\/p>\n<p><strong><em>From Selection<\/em><\/strong><\/p>\n<p>Click on the <em>+ From Selection<\/em> button to create a new pattern from the selection in your current view.<\/p>\n<ol>\n<li>Draw the objects you would like to use as a pattern and select them.<\/li>\n<li>Now open the resources dialog. Navigate to the Pattern tab. Now click on the <em>+ From Selection <\/em> The new gradient has been created:<\/li>\n<\/ol>\n<p><strong><em>Parameters<\/em><\/strong><\/p>\n<p>The parameters of the selected gradients can be easily modified. You can, for example, change the main color of the gradient, rotate, or scale it. Please find a list of parameters below, including explanations for each one.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"106\"><strong>Parameter<\/strong><\/td>\n<td width=\"347\"><strong>Description<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"106\">Id<\/td>\n<td width=\"347\">Unique ID of the pattern. Each object has its own unique id.<\/td>\n<\/tr>\n<tr>\n<td width=\"106\">Scale<\/td>\n<td width=\"347\">You can scale the gradient so it appears smaller or larger. You might need to scale the gradient to fit your object\u2019s size. You can preview the result in the Preview window.<\/td>\n<\/tr>\n<tr>\n<td width=\"106\">Rotate<\/td>\n<td width=\"347\">You can rotate the pattern to the desired angle.<\/td>\n<\/tr>\n<tr>\n<td width=\"106\">Translate<\/td>\n<td width=\"347\">Move the position of the gradient along the X and Y coordinates.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong><em>Example of using a pattern<\/em><\/strong><\/p>\n<p>We will show you a simple example of how to use a pattern in your design. We will create a simple progress bar by using and modifying a predefined pattern.<\/p>\n<ol>\n<li>First, we will create tree rectangles. The top one will be used as a border, the middle one will be used as our progress indicator, and the last one will be used in the foreground to give our progress bar a plastic look.<\/li>\n<li>Now select the middle rectangle and click on the <em>Colors, gradients, and patterns<\/em> In the pattern section, select a bar pattern.<\/li>\n<li>In the properties on the right side of the window, click on the color chooser rectangle and select a different color. Then use the <em>Rotate<\/em> slider to rotate the pattern by 45 degrees.<\/li>\n<li>Click on the <em>OK<\/em> button to apply a pattern to the rectangle.<\/li>\n<li>Now put all of the rectangles together to finish the progress bar.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern. Watch video describing this functionality: https:\/\/www.youtube.com\/watch?v=ryduKCgzFr0 Change a fill or stroke: Select the object(s) whose color you want to change Click on the Color, Gradients, and Patterns button in the GUI Toolbar Choose a solid color, gradient,<a class=\"moretag excerpt orangelink\" href=\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":2555,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[325],"doc_tag":[],"class_list":["post-52609","docs","type-docs","status-publish","hentry","doc_category-mydesigner-v8"],"year_month":"2026-04","word_count":1136,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Musilda","author_nicename":"musilda","author_url":"https:\/\/amitomation.cz\/en\/author\/musilda\/"},"doc_category_info":[{"term_name":"AMiTDesigner","term_url":"https:\/\/amitomation.cz\/en\/docs-category\/mydesigner-v8\/"}],"doc_tag_info":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fill and stroke - AMiT Automation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fill and stroke - AMiT Automation\" \/>\n<meta property=\"og:description\" content=\"Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern. Watch video describing this functionality: https:\/\/www.youtube.com\/watch?v=ryduKCgzFr0 Change a fill or stroke: Select the object(s) whose color you want to change Click on the Color, Gradients, and Patterns button in the GUI Toolbar Choose a solid color, gradient,[...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/\" \/>\n<meta property=\"og:site_name\" content=\"AMiT Automation\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-24T12:19:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/\",\"url\":\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/\",\"name\":\"Fill and stroke - AMiT Automation\",\"isPartOf\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#website\"},\"datePublished\":\"2023-10-05T08:10:29+00:00\",\"dateModified\":\"2023-10-24T12:19:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/amitomation.cz\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/amitomation.cz\/en\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Fill and stroke\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/amitomation.cz\/en\/#website\",\"url\":\"https:\/\/amitomation.cz\/en\/\",\"name\":\"AMiT Automation\",\"description\":\"Czech manufacturer of Control Systems and Industrial Automation Electronics\",\"publisher\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/amitomation.cz\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/amitomation.cz\/en\/#organization\",\"name\":\"AMiT, spol. s r.o.\",\"url\":\"https:\/\/amitomation.cz\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif\",\"contentUrl\":\"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif\",\"width\":100,\"height\":42,\"caption\":\"AMiT, spol. s r.o.\"},\"image\":{\"@id\":\"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/organization\/10939938\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fill and stroke - AMiT Automation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/","og_locale":"en_US","og_type":"article","og_title":"Fill and stroke - AMiT Automation","og_description":"Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern. Watch video describing this functionality: https:\/\/www.youtube.com\/watch?v=ryduKCgzFr0 Change a fill or stroke: Select the object(s) whose color you want to change Click on the Color, Gradients, and Patterns button in the GUI Toolbar Choose a solid color, gradient,[...]","og_url":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/","og_site_name":"AMiT Automation","article_modified_time":"2023-10-24T12:19:18+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/","url":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/","name":"Fill and stroke - AMiT Automation","isPartOf":{"@id":"https:\/\/amitomation.cz\/en\/#website"},"datePublished":"2023-10-05T08:10:29+00:00","dateModified":"2023-10-24T12:19:18+00:00","breadcrumb":{"@id":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/amitomation.cz\/en\/documentation\/fill-and-stroke\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/amitomation.cz\/en\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/amitomation.cz\/en\/documentation\/"},{"@type":"ListItem","position":3,"name":"Fill and stroke"}]},{"@type":"WebSite","@id":"https:\/\/amitomation.cz\/en\/#website","url":"https:\/\/amitomation.cz\/en\/","name":"AMiT Automation","description":"Czech manufacturer of Control Systems and Industrial Automation Electronics","publisher":{"@id":"https:\/\/amitomation.cz\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/amitomation.cz\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/amitomation.cz\/en\/#organization","name":"AMiT, spol. s r.o.","url":"https:\/\/amitomation.cz\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/","url":"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif","contentUrl":"https:\/\/amitomation.cz\/wp-content\/uploads\/2017\/07\/amit_automation_100x42.gif","width":100,"height":42,"caption":"AMiT, spol. s r.o."},"image":{"@id":"https:\/\/amitomation.cz\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/organization\/10939938\/"]}]}},"_links":{"self":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/users\/2555"}],"replies":[{"embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/comments?post=52609"}],"version-history":[{"count":1,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52609\/revisions"}],"predecessor-version":[{"id":53700,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/docs\/52609\/revisions\/53700"}],"wp:attachment":[{"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/media?parent=52609"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_category?post=52609"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/amitomation.cz\/en\/wp-json\/wp\/v2\/doc_tag?post=52609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}