PxPlus User Forum

Main Board => Discussions => Programming => Topic started by: Thomas Bock on November 29, 2019, 06:17:52 AM

Title: add counter bubble to button image
Post by: Thomas Bock on November 29, 2019, 06:17:52 AM

We want to display the number of new items in the way mobile devices to it.
Is there a way to add a "counter bubble" to a button image?

Title: Re: add counter bubble to button image
Post by: Thomas Bock on December 02, 2019, 10:59:59 AM

I'm trying to draw that bubble myself.

Code: [Select]

begin
IMAGE_NAME$ = "BUBBLECOUNT"
x = 20
y = 10
w = 10
h = 1
btn = 1000
button remove btn,err = *next
button btn,@(x, y, w, h) = "Text", opt = "f"
info$ = obj(btn)
left  = @x(dec($00$ + mid(info$, 5, 2)))
top   = @y(dec($00$ + mid(info$, 7, 2)))
width = @x(dec($00$ + mid(info$, 9, 2)))
x = left + width
y = top
print (0) 'pen'(1, 1, 1), 'fill'(1, 1),
print (0) 'circle'(x, y, 17),
read data from fin(0, "STDFONT"), sep = "," to fontName$, FontSize
print (0) 'white','font'(FontName$, FontSize * .75),
print (0) 'text'(x, y-12, "99", "C"),
end
Thought it is drawn beneath the button, the calculation of its position looks good.
The calculation fails as soon as I use that code in a panel. The button is located in a title bar layout.
What am I missing?

Title: Re: add counter bubble to button image
Post by: Mike King on December 02, 2019, 11:38:52 AM

I'm not certain I understand what you are trying to create.  Could you post an image?

If all you want is a bubble with a counter try:

print '4d' ! Make sure you have 4d Styling enabled
button 10,@(10,10,4,4)="{!32x32/Buttons/Comment}5",opt="CfT"

You can try other images to find one you like such as !32x32/Weather/Sun or you could try something like this:

button 10,@(10,10,4,2)="{!32x32/Flags/New}5",opt="_fT",fnt="Arial"


The "C" option requires PxPlus 2019

Title: Re: add counter bubble to button image
Post by: Mike King on December 02, 2019, 01:08:00 PM

Actually here is a quick demo showing you how you can even scale up the image to fit the number you want to print.

Code: [Select]

print '4D','CS'
n=0
for i=1 to 4
  n=n*10+i
  t$=str(n)
  button i,@(5+10*i,5,len(t$)+3,5)="{!32x32/Weather/Sun}"+t$,opt="CfTS",fnt="Arial"
next i
escape
Basically we change the size of the button based on the number of digits we want to display inside it.

Title: Re: add counter bubble to button image
Post by: Stéphane Devouard on December 16, 2019, 05:44:09 AM

Mike

Thomas will correct me if I'm wrong but I guess the visual rendering he is after is of this kind :
https://getbootstrap.com/docs/4.4/components/badge/ (https://getbootstrap.com/docs/4.4/components/badge/)

Or those red bubbles that appear on your email or facebook clients icons on your smartphone home page, to let you know the number of unread emails or notifications...