PxPlus User Forum

Twitter Twitter Twitter

Author Topic: buttons  (Read 511 times)

Thomas Bock

  • Diamond Member
  • *****
  • Posts: 153
    • View Profile
buttons
« on: January 18, 2022, 07:23:49 AM »
I'm looking for a way to create "buttons" like the one in the attached hardcopy. It looks like a panel ON a button.
The hardcopy was taken from a MS-Teams dialog. A style like this is used in many applications now.
All ideas are welcome.

Stéphane Devouard

  • Diamond Member
  • *****
  • Posts: 101
  • PxPlus guru with skills in PHP, JS, C#, Java
    • View Profile
    • Stéphane's Web Resume
Re: buttons
« Reply #1 on: January 18, 2022, 07:47:04 AM »
Thomas

Since you need both icons and text with different font styles, I see several ways to do this :

- An easy one :
Define the buttons using graphical mnemonics (an image, two fonted texts and a frame with rounded corners) and then use SETMOUSE to define the clickable region and the CTL it should return. However it won't handle the hover event to change the button background color...

- A more complex one :
Define the buttons as bitmap buttons and use a virtual bitmap (using the *bitmap* special file) that you create yourself.
This way you can have the hover event handled

Regards
« Last Edit: January 18, 2022, 07:49:37 AM by Stéphane Devouard »
Stéphane Devouard
Portfolio | Work

Mike King

  • Administrator
  • Diamond Member
  • *****
  • Posts: 3661
  • Mike King
    • View Profile
    • PVX Plus Technologies
Re: buttons
« Reply #2 on: January 18, 2022, 10:22:41 AM »
It the text and contents of the buttons is static you could make PNG images of all the buttons you want.

For example:

0010 PRINT '4D',
0020 LET btn=10
0030 BUTTON btn,@(10,10,60,5)="{button1.png}"
0040 LET btn'border$="solid"
0050 LET btn'hoverbackcolor$="#eeeeFF"
0060 ESCAPE

And use the PNG attached to this email.

Mike King

  • Administrator
  • Diamond Member
  • *****
  • Posts: 3661
  • Mike King
    • View Profile
    • PVX Plus Technologies
Re: buttons
« Reply #3 on: January 18, 2022, 10:53:48 AM »
Actually if you want to avoid pre-creating the PNG, you can do something like this:

0010 PRINT '4D','CS',
0020 GOSUB make_button WITH btn=10,image$="!Bomb",ttl$="UnMute",msg$="Send notifications for all meetings",col=10,line=5
0030 GOSUB make_button WITH btn=11,image$="!Bug",ttl$="Mute until I join",msg$="Only send notifications if I've joined",col=10,line=10
0040 GOSUB make_button WITH btn=12,image$="!file",ttl$="Mute",msg$="Don't send notifications for any meetings",col=10,line=15
0050 ESCAPE
0060 END
0070 make_button:
0080 OPEN (HFN)"*bitmap*;length=48px;width=400px;margin=0:0:0:0"
0090 PRINT (LFO)'PICTURE'(@X(=5),@Y(=8),@X(=30),@Y(=40),image$,6),
0100 PRINT (LFO)'FONT'("Arial",-10,"B"),'TEXT'(@X(=35),@Y(=5),ttl$),
0110 PRINT (LFO)'FONT'("Arial",-8),'TEXT'(@X(=35),@Y(=24),msg$),
0120 SAVE FILE (LFO) TO "work.bmp"
0130 BUTTON btn,@(col,line,60,4.75)="{work.bmp,t}"
0140 LET btn'border$="solid"
0150 LET btn'hoverbackcolor$="#eeeeFF"
0160 ERASE "work.bmp"
0170 RETURN


Thomas Bock

  • Diamond Member
  • *****
  • Posts: 153
    • View Profile
Re: buttons
« Reply #4 on: January 19, 2022, 02:00:19 AM »
I thank you for the answers.

Mike King

  • Administrator
  • Diamond Member
  • *****
  • Posts: 3661
  • Mike King
    • View Profile
    • PVX Plus Technologies
Re: buttons
« Reply #5 on: January 19, 2022, 10:46:10 AM »
Actually if using Nomads where you want to use the designer to place the buttons and control events, what you could do is create a callable routine that you execute once the screen is displayed that would adjust the button contents.

For example, you could define a button in Nomads about 35 columns wide, 5 lines high with a bitmap and text where a vertical bar (|) separates the title (bold) line text and the secondary text.  The in the Post display logic call the routine below passing it the handle (CTL value) to the button.

Code: [Select]

 !
 ! Change hidden button identified by passed CTL value into a two
 ! line button with image on left edge, top line bolded
 ! Lines text separated by a |
 !
 ! Button must start as hidden to avoid flicker
 !
  enter btn
  if btn'visible<>0 \
   then exit ! Already done
  t$=btn'text$
  b$=arg(arg(t$,2,"{"),1,"}") ! Get bitmap
  t$=arg(t$,1,"{")+arg(t$,2,"}") ! Get text
 !
  w=btn'width-4,h=btn'height-4 ! Picture size
  open (hfn)"*bitmap*;length="+str(h)+"px;width="+str(w)+"px;margin=0:0:0:0"
  print (lfo)'picture'(@x(=5),@y(=0),@x(=30),@y(=h),b$,6),
  print (lfo)'font'("Arial",-10,"B"),'text'(@x(=35),@y(=5),arg(t$,1,"|")),
  print (lfo)'font'("Arial",-8),'text'(@x(=35),@y(=24),arg(t$,2,"|")),
  save file (lfo) to "work.bmp"
  close (lfo)
  btn'text$="{work.bmp,t}"
  btn'lookandfeel=4
  btn'border$="solid"
  btn'hoverbackcolor$="#eeeeFF"
  erase "work.bmp"
  btn'visible=1
  exit

You could place this in *plus/wdx/usr and call it there so it will work even when using WindX.

Attached are images before and after calling the program.