ButtonTiles Class

brahn · November 3, 2015, 6:27pm

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

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

github.com

fushnisoft/ClarionClasses/blob/master/README.md

# How to Run the Examples

Examples are setup for Clarion10. If you use an earlier version then you may have redirection issues but otherwise the classes themselves should work just the same.

The examples use redirection files to point to the common `_classes` directory. 
In order to compile the examples as-is you need to make sure you clone this *entire* repository. Otherwise, make sure to adjust the RED files or to place the classes in the right locations for your environment.

e.g. The TilesExample has this file:

`ClarionClasses/TilesExample/Clarion100.red`

Which is simply an include:

```
{include ..\Clarion100.red}
```

This points back to the RED file in the root which does the real redirection magic :)

# zdMem

This file has been truncated. show original

PurpleEdge2214 · November 9, 2015, 6:47am

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.

brahn · November 9, 2015, 1:28pm

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:

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

Hope that helps!

PurpleEdge2214 · November 10, 2015, 1:18am

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!

brahn · November 24, 2015, 9:27pm

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!

https://github.com/fushnisoft/ClarionClasses/blob/master/_classes/ButtonTiles.clw#L23

jarodav1 · November 26, 2015, 5:32pm

Works Great tanck you

saxie · September 28, 2016, 12:46pm

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

brahn · September 28, 2016, 1:00pm

I have added a source only example.

Example.cwproj
Example.sln
Example.clw

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

saxie · September 28, 2016, 1:23pm

That is great!, thank you !

dgleduc · September 28, 2016, 3:58pm

I get “illegal character” on all first lines
eg.
MEMBER() <---- illegal character
MAP
END
INCLUDE(‘BaseWindowComponent.inc’),ONCE

MEMBER() <---- illegal character

MAP
INCLUDE(‘CWUTIL.INC’),ONCE
END

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

Didier

brahn · September 29, 2016, 12:19am

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

dgleduc · September 29, 2016, 7:09am

Brahn,
Perfect now.

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

brahn · October 31, 2016, 11:26am

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.Init(SELF)

  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:

brahn · October 31, 2016, 11:28am

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.

dgleduc · October 31, 2016, 1:20pm

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)

dgleduc · November 1, 2016, 2:21pm

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

RexCalifornia · December 8, 2016, 12:26am

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

brahn · December 8, 2016, 1:05am

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?

Wolfgang_Orth · December 19, 2016, 9:13am

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.

UPDATE:
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…

tia
Wolfgang

brahn · December 19, 2016, 9:38am

Good idea! Perhaps also as part of that a series on using git too
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.