ButtonTiles Class

Here is something I created the other day that seems quite nicely self contained and fairly straight forward.

It turns a button into a tile.

Inspiration from DevExpress Tile Navigation Control but not even trying to do more than a very simple button-tile :smile:

Code is on GitHub in the ClarionClasses repo. Oh and there is an example app for C10. It should “just work” but let me know if I forgot to upload something!

Before (Design Time)

After (Run Time)

Get it Here:

Github: fushnisoft / ClarionClasses


Thanks Brahn,

If I copy your folder to a test folder, I can’t get the example app to open, I get an error that no templates are registered.

If I copy the app to a new folder, and then copy the master classes to the accessories/libsrc/win folder and try to compile I get illegal character errors in basewindowcomponent.inc and buttontiles.inc.

The example APP uses just standard templates but perhaps the local RED file is messing you around?

I have added some more details to the readme on how to run the examples. You will notice that I have used local redirection files to point from the examples directory to the _classes directory yeah?

Ah, I forgot to tell GitHub get to use text line endings. I am guessing you are downloading the zip version of the repo? This is fixed now so getting a new zip should work but I highly recommend grabbing a git client of some kind and cloning the repo instead. The GitHub client is quite good in case you don’t have one already.

I just did a test now with a clean, out of the box Clarion10:

  1. Clone the GitHub repository.
  2. Open ClarionClasses\TilesExample\TilesExample.sln
  3. Hit Ctrl+R to Generate, Make and Run.

Hope that helps!

Thanks Brahn,

I installed the Github client and cloned the repo, then just copied the new classes to my accessory libsrc folder and everything worked. I didn’t try using your .red file.

Very nice class Brahn, I’m learning a lot from your examples!

1 Like

I have pushed a new version to github that fixes an annoying bug in the ButtonTiles class. The Create() call was not setting the third parameter to assign a parent. I am using this on buttons in a toolbar in an MDI Frame widow and creating controls on a toolbar and not setting the parent seems to do bad and ugly things to something. The bad and ugly things manifested as a GPF when calling Destroy() on a region control in a window on a child thread… sometimes. Damn annoying but I am very glad to have found it!

Oh, and I have also refactored the code a bit as well as removed the need to manually specify the “hot” color. The tiles now lighter on hover and darker on MouseDown. Additionally, the tile will follow the position of the underlying button when you call a new RefreshTile method. The example app is now a resizable window in order to demonstrate this.

The pesky PROP:Parent!


1 Like

Works Great tanck you

1 Like

Do you perhaps have an exported txa of the app? Still on an old version of clarion …

I have added a source only example.


Just pulled it from the generated ABC with a few simplifications. Hopefully that will get you going!

That is great!, thank you !

1 Like

I get “illegal character” on all first lines
MEMBER() <---- illegal character

MEMBER() <---- illegal character


the same for
),once <---- in the include section


Oh, could be the way github does linefeeds. I have updated the gitattributes and it should work now.

Perfect now.

PS: I’ll make a template for me to make it easier to modify existing apps

1 Like

I have updated this now to be, I think, much cleaner. I have also added a “Toggle Tiles” feature where you can define a set of tiles to act as a group, kind of like an option control. Checkout the screenshots and give the updated example app a go!

  • The calculations for laying out the tile icon and prompt are much simpler and more consistent.
  • The tiles now work with both icon and prompt or just icon or just prompt. If there is only an icon then it is centred. If there is only text then it is also correctly centred!
  • Tile prompts copy all font attributes from the original button and also refresh to reflect any runtime changes!
  • Tiles refresh position and size automatically. The example app window is resizable, give it a go and see it in action.
  • Class refactored into two classes, ButtonTile and TileManager. You set it up like this:

  Tiles.AddButtonMimic(?ButtonUsers_TEXT, 0C67200h)
  Tiles.AddButtonMimic(?ButtonDashboard_TEXT, 0998500h)

The signature of these methods is:

Init                      PROCEDURE(WindowManager pWM, BYTE pLightenOnHoverPercentage=33, BYTE pPadding=8)
AddButtonMimic            PROCEDURE(SIGNED pButtonFEQ, LONG pColor, <BYTE pLightenOnHoverPercentage>, <BYTE pPadding>)

As you can see, you can optionally set the additional parameters for the set of tiles as well as override individual tiles as needed.

The “toggle” tiles are setup like:

  ToggleTiles.enableToggleSet = TRUE
  ToggleTiles.Init(SELF, 100)
  ToggleTiles.AddButtonMimic(?ButtonUsers_TOGGLE, 0C67200h)
  ToggleTiles.AddButtonMimic(?ButtonDashboard_TOGGLE, 0C67200h)
  ToggleTiles.AddButtonMimic(?ButtonDownload_TOGGLE, 0C67200h)

All this can be seen in the example app of course.

If you have any ideas or changes you are most welcome to fork and submit a pull request for consideration, that would be awesome!

Design Time

Run Time

Example app is found here:

Oh @dgleduc, I did not see your screenshot before. Nice one!
Hopefully the update will drop in ok for you. I am not sure exactly how backward compatible it will be but it should not be too complex to switch over.

I will let you know about the update.
for the screen, 3 different images on the main frame and text with orientation and effects.(my own template and classes)

1 Like

Works ok on my apps after update.
I did not tried the demo though

1 Like

Hello - I’m trying the source example and it compiles fine. However at run-time, the image looks little distorted.

Yeah, weird!

I am not sure if it is the RTL or if it is Windows but when I run the example in a text virtual machine (Win-Vista) I see the same symptoms.
I tried a few different images and a PNG file seems to be the cleanest but still has weirdness. See image:

My best guess at the moment is that Win10 is better at scaling the ico/image files somehow?

I also tried setting a specific width/height to the image control but no luck with that either.

Quite annoying!

Perhaps some more fiddling around with image types/dimensions will find something that works more consistently?
Could it be a bug in the Clarion RTL?

Hello Brahn,

I stumbled across this ButtonTileClass, its a really nice one.

Is there a chance to have a demo being an .APP - for dumbos like me?

Or maybe another topic, like “How to make and run a Clarion-project being a non-APP”, to solve that once and for all times. :smiley:

I downloaded all these .CLW and .CWPROJ and all other stuff one by one, but when I tried to open the .SLN or the .CWPROJ, I got “This is not a valid Clarion Projectwhatever-file” error.

I do a mistake, apparently. Hence my favor of .APP… :smiley:


Good idea! Perhaps also as part of that a series on using git too :slight_smile:
The problem with apps is backwards compatibility so, like you say, better to solve the root problem. I will try to get something started tonight.