In the tutorial, we demonstrate the power of SVG to customize the view containers:

Add rounded corner

Adding rounded corner is simple. Assume you have a view named view1. To add rounded corners, in the Source Tab, goto the view1 and add the tag rx="20" to the rectangle below:

<g widget-id="view1" transform="matrix(1 0 0 1 20 20)">
  <svg template-id="background" width="280" height="264" scade:width="size.w" scade:height="size.h">
    <rect rx="20" width="100%" fill="#BD0012" ry="20" height="100%"/>
  </svg>
</g>

Replacing the rectangle with a circle

📘

SVG Expresssion

We use the advanced SVG expression feature of SCADE. This functionality has not been completely documented, but we will provide an advanced SVG tutorial soon. We use expressions to compute and override the values of an SVG control.

Each view is represented by a rectangle by default. Replace the rectangle with a circle and override the default SVG tag values with the scade prefix to position the circle and adjust the radius:

• scade:r="size.h/2 - 10" overrides the r value with the expression size.h (current control height), divided by 2 and substract 10
• set the x position scade:cx="size.w/2" of the circle
• set the y position scade:cy="size.h/2"

<svg template-id="background" width="280" height="264" scade:width="size.w" scade:height="size.h">
      <circle scade:r="size.h/2 - 10" fill="#C01815" r="122" cx="140" scade:cx="size.w/2" cy="132" scade:cy="size.h/2"/>
</svg>

Please find the video here