Looking at Radiant Shapes

RadiantShapes_Logo
I’ve been playing with Raize Software‘s new Radiant Shapes components this week. These are the brand new primitive shape component set for FireMonkey on all platforms: Windows, OS X, iOS and Android. I’ve been a long time fan of Raize Components because of their attention to detail and high quality. Radiant Shapes continues this tradition.

Radiant Shapes PaletteRadiant Shapes is made up of 35 reusable shape controls that are all pretty flexible. If you caught Ray Konopka’s RAD In Action: Seeing is Believing on Data Visualization then you have a pretty good idea the importance of using primitive shapes like these to communicate useful information to your users, especially in mobile development.

All of the shapes include useful design time menus to make common changes quickly and easily. You can probably get away without using the Object Inspector for a lot of your common tasks. They also have various customizations that make them very flexible.

One thing that is interesting is they introduce the idea of a TRadiantDimension they allows you to specify some of the sizes as either absolute pixels, or as a scale factor. This gives great flexibility in how they behave when resized.

Ray Konopka introduced the Radiant Shapes during CodeRage 9 with a couple great sessions. You can catch the replay for both Object Pascal and C++.

I really like the TRadiantGear component, so I decided to play with it in detail. You can specify the number of cogs (teeth), their size (as a Radiant Dimension) and the size and visibility of the hole. Just like all the other shapes, they handle hit tests correctly, so at runtime, you can click between the cogs of the gear and it doesn’t produce an onClick event.

Gears

Just for fun I put down three gears and used LiveBindings to connect a TTrackBar.Value to their rotation. A little math in the OnAssigningValue event and I had all the gears rotating in unison. The fact that the gears stayed synced up, and the teeth meshed perfectly was really impressive.

procedure TForm4.RotateGearBigAssigningValue(Sender: TObject;
  AssignValueRec: TBindingAssignValueRec; var Value: TValue;
  var Handled: Boolean);
begin
  Value := TValue.From(-1 * (Value.AsExtended / 2 + 18));
end;

procedure TForm4.RotateGearRightAssigningValue(Sender: TObject;
  AssignValueRec: TBindingAssignValueRec; var Value: TValue;
  var Handled: Boolean);
begin
  Value := TValue.From(-1 * (Value.AsExtended + 18));
end;

18 is the offset for the gears (360° / 10 cogs / 2 (half offset) = 18) and the 2 comes from the big gear being twice as big (20 cogs), then the -1 is so they rotate the opposite direction.

Overall I am impressed with the Radiant Shapes. Something I would like to see include a polygon component where I can specify the number of sizes. You can do that with the star and gear, but a flexible polygon would be nice. Also, the shapes can be rotated with the rotation property, but it would be cool if there was a way to rotate it in the designer too. That might be a big undertaking though.

You can buy the Radiant Shapes from Raize Software for $49, which gives you a 1 year subscription for updates. I did get a complimentary copy from Raize Software to review them.

Be sure to join Ray on Friday the 23rd as he is featured in the Embarcadero Technology Partner Spotlight.

This entry was posted in Android, design, iOS, Tools. Bookmark the permalink.

3 Responses to Looking at Radiant Shapes

  1. Claudio Piffer says:

    Hi Jim,

    I confirm! Radiant Shapes are a must that every FireMonkey Developer should have

  2. Shane Holmes says:

    Great set of controls, but wish there were a text and Char control as well.

  3. Jim McKeeth says:

    You can embed a label inside the shape controls to achieve that.

Leave a Reply