January 21, 2020, 11:35:21 am

News:

Own IWBasic 2.x ? -----> Get your free upgrade to 3.x now.........


Bitmap Buttons

Started by Egil, August 15, 2016, 02:24:06 pm

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Egil

August 15, 2016, 02:24:06 pm Last Edit: August 15, 2016, 02:26:03 pm by Egil
As posted earlier today, I have promissed to host another CB workshop saturday, where we will try to code a working example using bitmap buttons as a menu.
There is a file called bitmapbutton.cba in the CB Samples directory that does not work. So I copied the TextControl part of it to make my own version.
For the picture I copied and modified two versions of the Bug.bmp file, also found in the samples directory.

By drawing my own bitmaps (or downloading them from the internet), I hope it will be possible to use this idea to make my own CB "RebarControl Menu", or at least some kind of a clone.

Almost can't wait to see what the young guys come up with. But then, they have surprised me before... :)

Enclosing a zipfile containing source code, bitmaps and a working EXE-file.


Have fun!

Egil

Support Amateur Radio  -  Have a ham  for dinner!

GWS

Hi Egil,

Incredible - after all these years, no-one had spotted that example was not working ..  ::)

Here's a working version :

Code Select

DEF d1:DIALOG
DIALOG d1,0,0,295,168,@caption|@sysmenu,0,"Caption",Handler
CONTROL d1,"T,,(295-70)/2,40,70,74,@CTLSTCBITMAP ,1"

DOMODAL d1
END

SUB handler
select @class
case @IDINITDIALOG
centerwindow d1
SETCONTROLTEXT d1,1,GETSTARTPATH + "mybitmap.bmp"
endselect
RETURN



It requires the 70x74 pixel bitmap "mybitmap.bmp", which I've attached as a zipped file.
This needs to go in the CBasic Samples folder, wherever you chose to put it ..

best wishes, :)

Graham

Tomorrow may be too late ..

Egil

QuoteIncredible - after all these years, no-one had spotted that example was not working ..  ::)


Maybe no-one fully realize that the included samples are excellent code for further experimentation?


This morning I modified a few standard icons by adding lines around the edges, and saving the modified files as bitmaps. Then I expanded the code posted yesterday a little, just to demonstrate that the idea really works. The bitmaps are in the attached zip file.

This project has plenty room for experimentation and improvements, so if you have any ideas, please don't hesitate to post them here.


Have fun!

Egil

Code Select
'-------------------------------------------------------------------------------------
' ButtonDemo.cba
' Simulating a Rebar Menu
' Egil August 2016
'-------------------------------------------------------------------------------------
AutoDefine "Off"
def win:window 
def run:int 

Window win,-300,0,290,210,0,0,"    CB BitmapButton Demo",messages 

CONTROL win,"T,MYBITMAP,5,5,34,34,@CTLSTCBITMAP,10"
SETCONTROLTEXT win,10,getstartpath+"world1.bmp"
CONTROL win,"T,MYBITMAP,45,5,34,34,@CTLSTCBITMAP,20"
SETCONTROLTEXT win,20,getstartpath+"chart_bar1.bmp"
CONTROL win,"T,MYBITMAP,85,5,34,34,@CTLSTCBITMAP,30"
SETCONTROLTEXT win,30,getstartpath+"chart_pie1.bmp"
CONTROL win,"T,MYBITMAP,125,5,34,34,@CTLSTCBITMAP,40"
SETCONTROLTEXT win,40,getstartpath+"cross1.bmp"


run = 1 
WAITUNTIL run = 0 
CLOSEWINDOW win 
END 


SUB messages()
'-------------------------------------------------------------------------------------
' Main Loop
'-------------------------------------------------------------------------------------
'
SELECT @class

CASE @idcreate 
centerwindow win 

CASE @idclosewindow 
run = 0 

'*************************************************************************************

CASE @IDLBUTTONDN :' Left mouse button pressed

' check if mouse is over button when pressed:
if (@mousex > 5 & @mousex < 5+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,10,getstartpath+"world2.bmp"
move win,10,80
print win,"You press the Globe Button!"
endif

if (@mousex > 45 & @mousex < 45+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,20,getstartpath+"chart_bar2.bmp"
move win,10,80
print win,"You press the BarChart Button!"
endif

if (@mousex > 85 & @mousex < 85+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,30,getstartpath+"chart_pie2.bmp"
move win,10,80
print win,"You press the PieChart Button!"
endif

if (@mousex > 125 & @mousex < 125+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,40,getstartpath+"cross2.bmp"
move win,10,80
print win,"When you release this button"
move win,10,100
print win,"the program Terminates!"
endif


CASE @IDLBUTTONUP :' Left mouse button released

' check if mouse is over button when released:
if (@mousex > 5 & @mousex < 5+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,10,getstartpath+"world1.bmp"
'Place code for whatever you want to do here...
move win,10,80
print win,"                                                           "
endif

if (@mousex > 45 & @mousex < 45+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,20,getstartpath+"chart_bar1.bmp"
'Place code for whatever you want to do here...
move win,10,80
print win,"                                                           "
endif

if (@mousex > 85 & @mousex < 85+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,30,getstartpath+"chart_pie1.bmp"
'Place code for whatever you want to do here...
move win,10,80
print win,"                                                           "
endif

if (@mousex > 125 & @mousex < 125+34) &(@mousey >5 & @mousey < 5+34)
SETCONTROLTEXT win,40,getstartpath+"cross1.bmp"
'Place code for whatever you want to do here...
run = 0
endif


'*************************************************************************************


ENDSELECT 
RETURN


Support Amateur Radio  -  Have a ham  for dinner!

GWS

Hi.

I think I prefer using Buttons in a case like this ..  ;D

They're easier to handle. I never could see how text boxes could make better clickable controls.

Here is my modified version ..

Code Select

'-------------------------------------------------------------------------------------
' ButtonDemo.cba
' Simulating a Rebar Menu
' Egil August 2016

' modified to use buttons and a timer - Graham
'-------------------------------------------------------------------------------------
AutoDefine "Off"
def win:window 
def run,terminate:int 

Window win,-300,0,290,210,0,0,"    CB BitmapButton Demo",messages 

CONTROL win,"B,MYBITMAP,5,5,34,34,@CTLBTNBITMAP ,10"
SETCONTROLTEXT win,10,getstartpath+"world1.bmp"
CONTROL win,"B,MYBITMAP,45,5,34,34,@CTLBTNBITMAP,20"
SETCONTROLTEXT win,20,getstartpath+"chart_bar1.bmp"
CONTROL win,"B,MYBITMAP,85,5,34,34,@CTLBTNBITMAP,30"
SETCONTROLTEXT win,30,getstartpath+"chart_pie1.bmp"
CONTROL win,"B,MYBITMAP,125,5,34,34,@CTLBTNBITMAP,40"
SETCONTROLTEXT win,40,getstartpath+"cross1.bmp"

terminate = 0 :' a stop run flag

run = 1 
WAITUNTIL run = 0 
CLOSEWINDOW win 
END 


SUB messages

SELECT @class

case @idcreate 
centerwindow win 

case @idclosewindow 
run = 0 

case @IDControl
select @controlid
case 10
move win,10,80
print win,"You pressed the Globe Button!"
starttimer win,1500
case 20
move win,10,80
print win,"You pressed the BarChart Button!"
starttimer win,1500
case 30
move win,10,80
print win,"You pressed the PieChart Button!"
starttimer win,1500
case 40
move win,10,80
print win,"You pressed the Terminate Button!"
terminate = 1
starttimer win,1500
endselect

case @idtimer
rect win,10,80,250,25,0xffffff,0xffffff
stoptimer win
if (terminate = 1) then run = 0

ENDSELECT 
RETURN



This version still needs your bitmaps to work of course ..

best wishes, :)

Graham
Tomorrow may be too late ..

Egil

August 16, 2016, 07:22:30 am #4 Last Edit: August 16, 2016, 07:25:30 am by Egil
Hi Graham,

The first thing I  tried, was code very similar to your example. But never was able to include the bitmaps in the buttons. Was not able to achieve this  with your code either, as shown in attached screendump.

Our challenge is to make a windows program with bitmap buttons that acts visually the same way as ordinary button controls, e.g. you can see that the button "move" when clicking on it. This is possible to do in many programming languages, but so far I have not been able to do it in any of the CB versions in my possession. So when my young friends wanted to use CB to make a program that is visually similar to what can be achieved with  the professional packages, we started to experiment.

The code I posted here, is my version of how it can be done. Acccording to one of the boys' father, they work hard to solve this challenge, but so far they have not achieved a sgood result... But they are very inventive, so I will not be surprised if they  come up with a good solution saturday.

My code is not as easy to handle as yours, and it takes a little longer to execute the button choices. But the text control method, using two bitmaps for simulating the button "animation" is the only method I have tried that really works. And the extra execution times are not noticeable on any of my computers.

I just love challenges like this. Saturday will bring the moment of truth.... I really look forward to it. ;D


Egil


PS. I really like the way you use a timer to terminate the program. That's an idea I'm going to steal from you!
Support Amateur Radio  -  Have a ham  for dinner!

GWS

That's very strange - if you've got my version in a folder, together with your unzipped bitmaps, and you load the cba program from there (so that Getstartpath is correct) - it's got to work ..  ;D
Well, it's working fine here ..  :)

The only other thing I can think of, is I'm using CB Verasion 1.0 - maybe you're using a later version that may have some differences in it .. can't be sure about that.  Some fiddling went on in later versions which I never used ' cos they hadn't been tested enough.

all the best, :)

Graham
Tomorrow may be too late ..

Egil

August 16, 2016, 08:32:36 am #6 Last Edit: August 16, 2016, 08:34:36 am by Egil
QuoteThe only other thing I can think of, is I'm using CB Verasion 1.0 - maybe you're using a later version that may have some differences in it .. can't be sure about that.  Some fiddling went on in later versions which I never used ' cos they hadn't been tested enough.


You are quite right Graham!


Thanks for reminding me....
Was using version 1.15 here. Installed it last winter when I needed it to try out the Client/Server Component Paul made. But I forgot to change to the old version 1.01 I had used for years when I discovered that the component did not accept UDP comms.
Installed the "old" version now, and your example works like a dream. I should have thought of this version mess myself, but I blaim my advanced age for not remembering. Could have save me a lot of work if I had been aware if this before. :-[

Two of the boys used my computers during our last workshop, both with version 1.15, and the third used his own laptop with the version now made available as "donationware".
I purchased a license and gave it to him some weeks ago. Not sure what version it is, but code similar to what you posted today did not work for him.
Maybe we should ask Larry Sykes to change the donationware version to 1.01. It seems to work more stable then the other versions.

Right now I see that I also have version 1.0 om a USB stick. Not sure what is the difference between 1.00 and 1.01.

Egil
Support Amateur Radio  -  Have a ham  for dinner!

GWS

August 16, 2016, 10:41:07 am #7 Last Edit: August 16, 2016, 10:48:01 am by GWS
Glad it worked for you.  ;D

As far as I recall, Version 1.01 is more or less OK - it mainly dealt with the Windows fiasco of Vista and later.

Quote
Creative 1.01:
This update adds Windows Vista compatibility and a few bug fixes.  Previously Windows Vista users would have to install to a directory other than Program Files in order to build an executable.  All of the sample programs were moved to the installed users documents directory, a fresh install will look in the correct path now.  The sample programs can be found in:

My Documents\Creative BASIC\samples


I load my CB on to a logical drive "F" - so I had to copy the Samples from the above into my CB folder on Drive "F" - that's if I remembered to do it  ::) 

I always install to my preferred Creative Basic folder, which on my machine is always on a logical 'F:\' drive. Now when I do this, the sample files are left in the My Documents\Creative BASIC\samples on the C:\ drive.
Consequently, they don't appear when I start the IDE.

It's simply solved by dragging a copy of the \Samples folder from the C:\ drive across to my CBasic directory on the F: drive. Then all works fine.

So later I went back to using Version 1.0, which didn't get involved with the "C" drive. Much easier.

best wishes, :)

Graham
Tomorrow may be too late ..

Egil

Thanks for the orientation!

And... For programming I  always work the same way as you. Strange, isn't it? :D

In addition, all my IWB tools, and source code, are also on a USB stick that is fastened to my key-ring. That  way I do not need my own computers when I get the "urge".
Last year I purchased a small netbook. Very slim, with SSD storage and the battery lasts for around twelvle hours when using it continuosly. I have not installed a single program on it myself. All I need in addition to internet browser and email client (that already was installed), is on the USB stick. Such as the IWB programming packages, Libre office, and a lot of different decoding software for use with my SDR radios. (FDM Duo QRP-transceiver and FDM-S2 multichannel receiver,  both from ELAD in Italy)

The only thing I don't like with that small computer is Windows 10. But booting Linux from another USB stick gives me the possibility to change quickly. Not fully comfortable with Linux yet, but then I have barely scratched the surface...


All the best!

Egil
Support Amateur Radio  -  Have a ham  for dinner!

Egil

As mentioned in a post yesterday (http://www.ionicwind.com/forums/index.php?topic=5920.msg43726#msg43726), I found an old EB example on how to use pics as buttons. And since the method Graham suggested for bitmap buttons does not work with all the available versions of CB, the mentioned EB code was translated to CB code. This code should work with all versions of CB.

So unless I find a way to get @MOUSEMOVE to function also whith cursor over a Button Control, I'll use the method demonstrated here for mouseover and tooltips effects.
Pics needed for the demo is in the atached zip file.


Have fun!
Egil

Code Select
' Demonstration of PICTURES as BUTTONS Using PtInRect with MOUSEOVER EFFECT
' EBASIC / IBASIC PRO CODE by Junner2003
' modified by Pip1957
' Converted to CB code by Egil 2016
'----------------------------------------------------------------------------------------

autodefine "OFF"
DECLARE "user32.dll",PtInRect(pRect:WINRECT, x:INT, y:INT),INT
DECLARE "user32.dll",SetRect(pRect:WINRECT, x1:INT, y1:INT, x2:INT, y2:INT),INT

def headpic:INT
def icon1a:INT
def icon1b:INT
def icon2a:INT
def icon2b:INT
def icon3a:INT
def icon3b:INT
def icon4a:INT
def icon4b:INT
def a,MB_ICONINFORMATION:int
Const MB_ICONINFORMATION = 64     :REM Used in the MESSAGE BOX

' define rectangle structures
TYPE MYRGN
DEF Left:INT
DEF Top:INT
DEF Right:INT
DEF Bottom:INT
ENDTYPE
DEF pic1,pic2,pic3,pic4:MYRGN

'Define file name and path of the pictures:
headpic = LoadImage(GetStartPath + "header.jpg", @IMGSCALABLE)
icon1a = LoadImage(GetStartPath + "settings0.jpg", @IMGSCALABLE)
icon1b = LoadImage(GetStartPath + "settings1.jpg", @IMGSCALABLE)
icon2a = LoadImage(GetStartPath + "backup0.jpg", @IMGSCALABLE)
icon2b = LoadImage(GetStartPath + "backup1.jpg", @IMGSCALABLE)
icon3a = LoadImage(GetStartPath + "history0.jpg", @IMGSCALABLE)
icon3b = LoadImage(GetStartPath + "history1.jpg", @IMGSCALABLE)
icon4a = LoadImage(GetStartPath + "delete0.jpg", @IMGSCALABLE)
icon4b = LoadImage(GetStartPath + "delete1.jpg", @IMGSCALABLE)


def win:window
def wstyle,run:int
wstyle = @minbox

' open a window ..
window win,0,0,500,300,wstyle,0,"  Pictures as BUTTONS Using PtInRect DEMO",messages

CONTROL win,"T,This is Button One,42,203,96,32,0x50000101,5"
CONTROL win,"T,This is Button Two,142,203,96,32,0x50000101,6"
CONTROL win,"T,This is Button Three,244,203,96,32,0x50000101,7"
CONTROL win,"T,This is Button Four,345,203,96,32,0x50000101,8"
for a=5 to 8
showwindow(win,@SWHIDE,a)
SETCONTROLCOLOR win, a, RGB(100,100,100), RGB(255,255,255)
next a

' setup the rectangles
SetRect(pic1,67,152,115,200)
SetRect(pic2,167,152,215,200)
SetRect(pic3,267,152,315,200)
SetRect(pic4,367,152,415,200)

' show images
ShowImage win,headpic,@IMGSCALABLE,0,0,500,35
ShowImage win,icon1a,@IMGSCALABLE,67,152,48,48
ShowImage win,icon2a,@IMGSCALABLE,167,152,48,48
ShowImage win,icon3a,@IMGSCALABLE,267,152,48,48
ShowImage win,icon4a,@IMGSCALABLE,367,152,48,48

' some static text on the main window:
DRAWMODE win,@TRANSPARENT              :REM make font background transparent
SETFONT win, "Ariel", 24, 700          :REM font name and size
FRONTPEN win,RGB(255,255,255)          :REM font color white
MOVE win,10,0                          :REM Put The font to the right position
PRINT win,"Welcome!"                   :REM header text (overlay on the header pic)

' ORANGE frame for text
rect win, 0, 35,494,85,RGB(255,128,0)

SETFONT win, "Ariel", 12, 700
FRONTPEN win,RGB(0,64,128)                :REM font color black
MOVE win,10,40
PRINT win,"PICTURES as button DEMO"

LINE win, 10, 60, 480, 60, RGB(0,64,128)   :REM a line here used as a seperator

SETFONT win, "Arial", 8, 500
FRONTPEN win,RGB(95,95,95)             :REM font color black
MOVE win,10,65
PRINT win,"Below you see 4 JPG IMAGES. Move your mouse over the pictures and see what this SCRIPT"
MOVE win,10,80
PRINT win, "DEMONSTRATION does: While moving the mouse over an ICON it will virtually 'zoom', and when"
MOVE win,10,95
PRINT win,"clicking on one of them it will do something ..."



run = 1

WAITUNTIL run = 0
CLOSEWINDOW win
END


SUB messages()
SELECT @class

'MouseOver effects:
CASE @IDMOUSEMOVE

' PICTURE 1
IF PtInRect(pic1,@Mousex,@Mousey)
ShowImage win,icon1b,@IMGSCALABLE,67,152,48,48
showwindow(win,@SWRESTORE,5)
ELSE
ShowImage win,icon1a,@IMGSCALABLE,67,152,48,48
showwindow(win,@SWHIDE,5)
ENDIF

' PICTURE 2
IF PtInRect(pic2,@Mousex,@Mousey)
ShowImage win,icon2b,@IMGSCALABLE,167,152,48,48
showwindow(win,@SWRESTORE,6)
ELSE
ShowImage win,icon2a,@IMGSCALABLE,167,152,48,48
showwindow(win,@SWHIDE,6)
ENDIF

' PICTURE 3
IF PtInRect(pic3,@Mousex,@Mousey)
ShowImage win,icon3b,@IMGSCALABLE,267,152,48,48
showwindow(win,@SWRESTORE,7)
ELSE
ShowImage win,icon3a,@IMGSCALABLE,267,152,48,48
showwindow(win,@SWHIDE,7)
ENDIF

' PICTURE 4
IF PtInRect(pic4,@Mousex,@Mousey)
ShowImage win,icon4b,@IMGSCALABLE,367,152,48,48
showwindow(win,@SWRESTORE,8)
ELSE
ShowImage win,icon4a,@IMGSCALABLE,367,152,48,48
showwindow(win,@SWHIDE,8)
ENDIF

' Left mouse button clicked:
CASE @IDLBUTTONDN

' Event PICTURE 1
IF PtInRect(pic1,@Mousex,@Mousey)
System "http://www.msn.com"
ShowImage win,icon1a,@IMGSCALABLE,67,152,48,48
ENDIF

' Event PICTURE 2
IF PtInRect(pic2,@Mousex,@Mousey)
Messagebox 0, "You pressed PICTURE BUTTON number 2! Respect!\n :-)", "Click on #2", MB_ICONINFORMATION
ShowImage win,icon2a,@IMGSCALABLE,167,152,48,48
ENDIF

' Event PICTURE 3
IF PtInRect(pic3,@Mousex,@Mousey)
System "http://www.ionicwind.com/forums/"
ShowImage win,icon3a,@IMGSCALABLE,267,152,48,48
ENDIF

' Event PICTURE 4
IF PtInRect(pic4,@Mousex,@Mousey)
run = 0
ENDIF

CASE @IDCLOSEWINDOW
        run = 0

CASE @idcreate
centerwindow win

ENDSELECT
RETURN


Support Amateur Radio  -  Have a ham  for dinner!

Brian

Egil,

Been watching your attempts at a bitmap button with tooltips. I then realised I had done a program a few years ago for a friend's company which had just what you wanted - a bitmap button that when hovered over showed a tooltip, and when the bitmap button is pressed, it goes to the company's website

Included all you will need . . . have fun,

Brian

Brian

Egil,

Sorry, forgot to say that the program is for printing multiple labels. Here's a screenshot of a correctly
filled in screen

Brian

(Don't know how to include the graphic within my text!)

Egil

That's a great program Brian!
Thanks for sharing. I will most probably use some of your ideas next time I need tooltips effects in my IWB code.

The boys in the workshop group have decided to code a mediaplayer using CB. And they want to use bitmap buttons with tooltips.
And after they discoverred that the different CB versions does not handle buttons the same way, the goal has been making code that works equally well in all versions of CB. This is quite a challenge, so I have been helping them a little by experimenting with different ways to achieve their goals. I think that  when we meet saturday they'll go for the method I posted today.

Since the schools now have started again after the summer leave, they have to give school work priority, but I have promised to arrange a workshop every saturday until they are finished. By then they'll hopefully be full fledged CB coders that can come on this forum as soon as they have learned a little english. Right now  they are preparing the bitmaps. Scalable pictures, GIF and JPG, will also be tried. And when everything works ok, the plan is to embed the bitmaps in the final EXE file. By then they also plan to be able to read the latest version of ID tags for MP3 files for inclusion in the program. So they certainly have set some hairy goals!

And for me, it is a real vitamin injection to follow their efforts and guide them a little when needed.  ;D ;D


Egil
Support Amateur Radio  -  Have a ham  for dinner!

Brian

Egil, you're going to wear yourself out keeping up with them! My grandchildren always look a little
exasperated and tend to tut-tut when I ask something about my smartphone. Give it here, they say,
and before I can blink, they have done it. Heaven knows what they have done, but it usually works!

That little program is for a specific size of Avery labels. The printing company used to get this
job in, and unbeknown to the client, they sent it out to another printing company. They made
very little profit, as you can imagine. A friend of mine worked there, and asked if I could help

At the time, I really should have put in a method to measure the length and height of the created
text, because it goes a bit iffy if you alter the sizes, but I didn't know how to do it at the time

Anyone know how to measure text!

Brian

Egil

Here is a piece of advice:

Granddad's rule #1: "Never ask grandchildren how to use you smart phone! You don't understand anyway..."
Granddad's rule #2: "Never ask grandchildren how to use you smart phone! You don't understand anyway..."
Granddad's rule #3: "Never ask grandchildren how to use you smart phone! You don't understand anyway..."
e.t.c.....


Egil
Support Amateur Radio  -  Have a ham  for dinner!

LarryMc

LarryMc
Larry McCaughn :)
Author of IWB+, Custom Button Designer library, Custom Chart Designer library, Snippet Manager, IWGrid control library, LM_Image control library