Shapes¶

Shapes are geometric elements that graphically enrich a view, helping users create structured and visually coherent designs. These widgets can be found in the Widgets panel.

Widgets in the Shapes category can also be used in reports. For more information on creating reports in Rulex Studio, click here.

Rulex Studio provides a wide range of Shapes enabling users to choose the one that best suits their needs.

Note

The event triggers available for Shapes widgets are:

onClick
onMouseEnter
onMouseLeave

Shapes Layout Customization¶

In Rulex Studio the different Shapes types are divided into Shapes sub-families. It is possible to browse through all the available Shapes sub-families by opening the drop-down menu in the right panel. After selecting the desired shape, users can drag it onto the stage and customize it.

Like all widgets, by right-clicking on the shape’s border, users can perform several operations through the Widget context menu. These operations are common across all widgets except for the Open widget layout option, which is specific to each widget type.

In the table below, users can find all the available options of the Layout options window and their corresponding GOLD references. These settings can also be modified using parametric mode.

Subsection	Option	Description	GOLD Ref
Fill	Fill color	It defines the color of the shape. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is light blue.	layout `["fill"]` str
	Brush type	It defines the brush effect on the shape. The possible values are: Transparent, Solid, Dense, Horizontal, Vertical, Cross, B diagonal, F diagonal, Cross diagonal, Linear gradient and Radial gradient.	layout `["brush"]` str
	Opacity (%)	It defines the percentage of opacity of the shape.	layout `["opacity"]` number
Stroke	Stroke color	It defines the color of the shape’s frame. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is black.	layout `["stroke"]` str
	Stroke size (px)	It defines the thickness of the shape’s frame in pixels.	layout `["strokeWidth"]` number
	Stroke type	It defines the effect of the frame line. The possible values are: Solid line, Dash line, Dot line, Dash dot line, Dash dot dot line.	layout `["dashType"]` str
Text	Text style and alignment	Users can insert a text within the shape if desired. These font formatting options define some text features, such as the text style: bold, italic or underlined; the text horizontal alignment: left, center or right; the text vertical alignment: center, top, bottom.	layout `["fontWeight"]` normal/bold `["fontStyle"]` normal/italic `["textDecoration"]` normal/underlined `["textAlign"]` left/center/right `["Valignment"]` top/center/bottom str
	Text	Here users can insert the text that will be displayed within the shape.	layout `["text"]` str
	Font family	By clicking it, a drop-down menu will show all the available fonts.	layout `["fontFamily"]` str
	Font size (px)	It defines the font size of the text in pixels.	layout `["fontSize"]` number
	Text transform	It defines how the text is transformed. It can be: Capitalize, Uppercase, Lowercase.	layout `["textTransform"]` str
	Text color	It defines the color of the text. By clicking it, users can select Standard colors and generated color palettes, otherwise they can use the color picker or choose the color code, which can be: Hex, Rgb, Hsl, Hsv. The default color is blue.	layout `["color"]` str
Shape	Shape type	It allows users to change the Shape type, by selecting it from the drop-down menu.	options `["type"]` str

In the following table, by clicking each Shapes family tab, users can discover all the available Shapes types and their corresponding icons.

Arrows

Shape type	Shape icon
Four arrows
Arrow
Chevron
Double arrow
Slim left right arrow
Left right arrow
IBeam arrow
Pointer
Rounded pointer
Slim arrow
Split arrow

Ellipses

Shape type	Shape icon
Circle
Ellipse
Half ellipse

Lines

Shape type	Shape icon
Circle line
Curve
Diagonal line
Line

Speeches

Shape type	Shape icon
Cloud
Speech bubble
Rectangle speech

Solids

Shape type	Shape icon
Cone
Cube
Cylinder
Long cylinder
Prism
Pyramid

Polygons

Shape type	Shape icon
Decagon
Rhombus
Dodecagon
Heptagon
Hexagon
Nonagon
Octagon
Parallelogram
Pentagon
Trapezoid
Triangle
Right triangle

Stars

Shape type	Shape icon
Eight pointed star
Five pointed star
Nine pointed star
Seven pointed star
Six pointed star
Ten pointed star

Rectangles

Shape type	Shape icon
Rectangle
Rounded rectangle
Square

Shapes Schema¶

A shape is completely described through a JSON object composed by 2 different areas:

options, retaining all the graphical and functional options which require a re-evaluation of the graphic layout.
layout, the rest of the graphical options which do not require a re-evaluation of the graphic.

The whole JSON object is saved as a GOLD dictionary in the layout field of the Graphic class.

The schema of the JSON object is presented in YAML format commented.

layout:
  fill: #set the inner color of the shape
  brush: #set the inner style of the shape
  opacity: #set the transparency of the image
  stroke: #set border color of the shape
  strokeWidth: #set the border thickness of the shape
  dashType: #set the style of the shape border
  type: #change the shape type
  borderRadius: #set the corners's roundness of the shape only when the type is RoundedRectangle
  fontWeight: #set the font thickness(normal/bold)
  fontStyle: #set the style of the font(normal/italic)
  textDecoration: #set the underlining of the font(none/underlined)
  textAlign: #set the horizontal alignment of the text
  vAlignment: #set the vertical alignment of the text
  text: #set the text of the header
  fontFamily: #set the font family
  fontSize: #set the font size in px
  textTransform: #set the capitalization or case of the full text (none,capitalize,uppercase,lowercase)
  color: #set the text color
options:
  type: #the widget type