PxPlus User Forum

Twitter Twitter Twitter

Author Topic: add counter bubble to button image  (Read 1735 times)

Thomas Bock

  • Diamond Member
  • *****
  • Posts: 177
    • View Profile
add counter bubble to button image
« 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?

Thomas Bock

  • Diamond Member
  • *****
  • Posts: 177
    • View Profile
Re: add counter bubble to button image
« Reply #1 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?

Mike King

  • Diamond Member
  • *****
  • Posts: 3811
  • Mike King
    • View Profile
    • BBSysco Consulting
Re: add counter bubble to button image
« Reply #2 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
Mike King
President - BBSysco Consulting
eMail: mike.king@bbsysco.com

Mike King

  • Diamond Member
  • *****
  • Posts: 3811
  • Mike King
    • View Profile
    • BBSysco Consulting
Re: add counter bubble to button image
« Reply #3 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.
Mike King
President - BBSysco Consulting
eMail: mike.king@bbsysco.com

Stéphane Devouard

  • Diamond Member
  • *****
  • Posts: 122
  • PxPlus guru with skills in PHP, JS, C#, Java
    • View Profile
    • Stéphane's Web Resume
Re: add counter bubble to button image
« Reply #4 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/

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...
Stéphane Devouard
Portfolio | Work