Skip to main content
Version: Streamsheets 3.0

Shape Settings

A shape's appearance can be influenced via your mouse or the toolbar. If that is not enough, further settings are located in the Shape Settings. To open, either double-click the shape or use the right-click context menu. Depending on the shape type a tab at the top offers specific shape settings, like for a chart you have a tab for chart settings. All shapes have the "General" tab with common settings for all shapes, which are explained here.

Most of the attributes of shape can alternatively be configured by using a formula. If an edit field is used to change the attribute, simply enter a cell reference to link to the source value of the attribute. E.g. if you want the width of a shape to be dependent of cell "A1", you just have to enter =A1 in the width edit field. From now on the width of the shape adapts to the value of Cell "A1". But be aware that shapes are also part of the recalculation logic and are also only updated, when the app runs.

Some attributes do not have edit fields, but a checkbox or color or list selector. For those, a function button is available next to the attribute editor. Clicking on that, you can enter a formula. If you delete the formula, the old editor will reappear.

Geometry​

Settings​

  • “Geometry depends on Cell” links the position of a shape to the cell location. If you resize a column or row, the location of shapes related to that cell will adapt the change.
  • Below that, you can change the position and the size of the shape. The coordinates and sizes are given in 1/100th mm. The position defines the location depending on the rotation center. E.g., if the rotation center is center, the position defines the center of the shape. If "Top Left" is selected, the top and left position of the shape is defined.
  • The rotation is defined using radians. The rotation center defines around which point the shapes rotates and how the position is interpreted. The default is center.
  • Some shapes (Béziers and Polygons) allow using the option: “Point Range”. This can be used to set the anchor points of the shape on the sheet, using relative values. Reference a range, with two columns and as many rows as anchor points needed. A sample is shown below. The checkbox below allows to close a polyline of bezier automatically.

Custom Polygon or Bezier Shapes​

To define a custom polygon, you have to define a point range, that provides the relative positions of the coordinates of a polyline, polygon or bezier curve. The coordinates are defined as fractions of the size of the shape using values between 0 and 1 like in the screenshot below. The resulting points will be connected in order from top to bottom.

In the sample a cell range is set up to display a triangle. The range is assigned as the "Point Range". The polygon shape then is using the coordinates. As the "Close Polyline" box is checked, the polyline is closed to form a polygon.

Format​

The format allows for changes in the line and fills format.

A shape format offers the following attributes for lines or border formatting. The line attributes for arrows only appear, if a line or polyline is selected.

  • "Line Color" can be modified by clicking on the color bar or entering a value using the function button.
  • "Line Width" is either "-1" which defines a 1px wide line, that does not scale while zooming. Otherwise enter a width defined in 1/100 mm
  • "Line Style" like dashed or dotted can be selected from the selection list.
  • "Corner Rounding" allows to round corners defined also in 1/100th mm. This way you can e.g. rounded rectangles.

Different fill styles can be defined.

  • "Fill Style": None, Solid, Gradient or Image. Depending on the selection different attribute can be set. Using "None", no attribute obviously has to be defined.
  • Using "Solid", the fill color has to set by selecting from the predefined colors or entering a value.
  • "Gradient" comes in two variants, either linear or radial. Depending on the selection different additional attributes have to be defined. For both type the start and end color of the gradient has to be defined. For linear gradient the angle of the gradient can be modified. For radial gradients the center for the radial can be set. The values defined the relative offset. E.g. 50 would set the offset to the center of the shape.
  • For the "Image" fill a valid URL or Data URI has to be set. Please be aware that the size of the Data URI must be reasonable.

Text Format​

If you apply a text format to the shape containing a text, the format will be applied to all labels within the shape.

The text format allows the adjustment of text font, color, size, style, alignment, position, and margin.

  • Font name, size, color and style can be selected from the offerecd selections.
  • The alignment defines the horizontal alignment within a text box.
  • The vertical and horizontal position define the position within the surrounding shape. So, if the shape is e.g. placed within a rectangle, the horizontal position "Left" would place the shape at the left border of the rectangle, if you choose "Right Outside", it will be placed right next to the right border of the rectangle. The sample applies to the vertical position. A text with no parent shape does not use those attributes.
  • Margins can be modified to place the text within the text box.

Name​

Names are unique identifiers for shapes. On creation, a default name is set, which can be changed. Use the name to identify the purpose of a shape. Further, the name can be used by the DOT notation, to link shape values to a cell.

  • Define a unique name for the shape. The name has to be unique for the app.
  • A label is currently on used for a special text object, used in dashboards. The following screenshot shows a sample of this shape. The text on top of the text content is using the label content.

Attributes​

The attributes section allows for turning on and off certain shape attributes.

  • Container: Allow adding further shapes to a shape
  • Clip Children: Hide children outside the parent shape.
  • Visible: Change visibility of shape.
  • Allow resize: Allowing to resize the shape by mouse
  • Default Selection Mode: Define how to select a shape. Here an object can be select as predefined by the system or on the area, border or not at all.
  • "Shapes from Range" allow you to display additional geometrical shapes, that are not selectable or modifiable by a user. The explanation and an example follows this table. Here you need to provide a cell range that contains the definition of the shapes.

Shapes from Range​

The "Shapes from Range" allow you to enter a cell range to specify additional shapes within a shape. These items are drawn with the area of the shape. The coordinates of them are relative to the shape in 1/100th mm. This way you can add custom items to the shape to visualize additional information or hints. The cell defining a shape must follow the following text representation. In general it is a string with definitions for the shape parameters divided by semicolons. The first parameter defines the type. A sample would be "Line;1;10;2;20;red" defining the type, the coordinates and the color of the line.

The following types are available:

  • "Line" with the following parameters

    • X1 : X coordinate for the beginning of the line
    • Y1 : Y coordinate for the beginning of the line
    • X2 : X coordinate for the end of the line
    • Y2 : Y coordinate for the end of the line
    • LineColor : A valid color name of hex color value

  • "Circle" with the following parameters

    • X : X coordinate for the center of the circle
    • Y : Y coordinate for the center of the circle
    • Radius : Circle radius in 1/100mm
    • LineColor : A valid color name of hex color value
    • FillColor : A valid color name of hex color value

  • "Rect" with the following parameters

    • X : X coordinate for the left or center
    • Y : Y coordinate for the top or center
    • Width : width in 1/100mm
    • Height : height in 1/100mm
    • LineColor : A valid color name of hex color value
    • FillColor : A valid color name of hex color value
    • Center : If this flag is set to 1, the coordinates define the center of the rectangle instead of the top left position

  • "Text" with the following parameters

    • X : X coordinate for the center
    • Y : Y coordinate for the center
    • Text : Text to display
    • FontName : A valid font name
    • FontSize : Font size in points
    • FontColor : A valid color name of hex color value
    • HAlign : Horizontal alignment. 0 for left, 1 for center and 2 for right alignment. Default is 1.
    • VAlign : Vertical alignment. Use "top", "middle" or "bottom". Default is "middle".

A vertical range with at least one row and one column is expected.

Below a sample showing a traffic light with a title. To enhance this, the traffic light could use cell references or formulas to show the traffic light color depending on a value or state.

Events​

Events add another layer to end-user interactions. If one of those event is executed on a shape, the commands of the event are executed or calculated. Event are only executed, if the app is running.

Integrating one or more events in the Events section, adds the possibility to define actions. For example adding COPYVALUES(A1:B11,G10:H10) to the OnClick event triggers the COPYVALUES function after an OnClick event is executed by a user.

You would probably use the button shape to attach events to.

  • "OnClick" is executed upon a mouse click over a shape.
  • "OnDoubleClick" is executed upon a double mouse click over a shaoe.
  • "OnMousseDown" is executed upon a mouse down event over a shape.
  • "OnMousseUp" is executed upon a mouse up event over a shape.

Functions, which could be used in this context: