LB Booster - Overlaying GRAPHICBOXES in window

LB Booster

Programming

Liberty BASIC language (Moderator: Richard Russell)

Overlaying GRAPHICBOXES in window

« Previous Topic | Next Topic »

Pages: 1 2 3

Author

Topic: Overlaying GRAPHICBOXES in window (Read 1261 times)

Richard Russell
Administrator

member is offline

Posts: 1348

Re: Overlaying GRAPHICBOXES in window
« Reply #5 on: Jul 3^rd, 2017, 9:05pm »

on Jul 3^rd, 2017, 8:09pm, flotulopex wrote:

Overlaping the text image over the backround should make the illusion.

I don't think I've yet fully understood what you are trying to achieve. If the 'text image' has the same background color as the graphicbox, why do you need a second graphicbox at all? Why can't you just DRAWBMP the text image in the correct place?

As Anatoly says, if you want to draw an image with a transparent background then you would need to use the Windows API, because LB/LBB doesn't support an 'alpha' channel (except with sprites, of course). But if you can arrange the text image to have the matching background color, as you suggest, I can't see why you would need a more complicated solution.

Richard.

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #6 on: Jul 4^th, 2017, 06:57am »

Thanks for the help.

I'll send you my "work" later on so you will see what I want to achieve.

Rog'

Logged

Roger

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #7 on: Jul 4^th, 2017, 3:42pm »

So, here's the link to download my program: http://home.citycable.ch/flotulopex/LBB/.

What's this program for? In a dance school, the teacher wants to announce the currently played dance and the upcoming one too (because some ladies need time to change shoes rolleyes

).

Once launched, drag the mouse on the right side of the screen and the dance list will open. The selected dance will appear in the bottom graphicbox "prochaine" or "next" in english; selecting a second dance will move the "next" dance up to the upper "maintenant" or "now" graphicbox and take place in the "next" graphicbox.

An info window can be opened by clicking the upper left screen's angle; to exit the program, click the lower left screen's angle.

Logged

Roger

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #8 on: Jul 4^th, 2017, 3:54pm »

Actually, the program works well. It is used with a 1920x1080 beamer.

But as you will see, the coding level is low embarassed

. Since I couldn't find a better way to do it quickly, I had to go with this version.

Nevertheless, I hate hard coding things (dance displays on both backgrounds; makes it up to 60 3MB files!!! shocked

) so I at least reached to get an external "config.ini" file for the dance list.

Next I would like to be able to draw the top "maintenant"/"now" and the bottom "prochaine"/"next" graphicboxes and write the selected dance on the top of them, adapting text color and size.

At best, all texts and backgrounds should be configurable within the program to make this one easy to adapt in case of changes.

So this is where I'm currently stuck - I can't make two graphicboxes overlap and/or drawing i.e. STATICTEXT and adjusting easily character back- and forecolor and size .

Does it look more clear for understanding the project now?

Logged

Roger

Richard Russell
Administrator

member is offline

Posts: 1348

Re: Overlaying GRAPHICBOXES in window
« Reply #9 on: Jul 4^th, 2017, 6:54pm »

on Jul 4^th, 2017, 3:54pm, flotulopex wrote:

Does it look more clear for understanding the project now?

No, sorry, I just can't see why you need multiple overlaid controls. To the extent that I follow your description, it sounds like a perfectly straightforward application for a single GRAPHICBOX onto which you draw colored text. This gives you full control over the font, position, foreground and background colors etc. of the text, so what is it you can't do that way?

Richard.

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #10 on: Jul 5^th, 2017, 06:28am »

Richard,

I understand your shock grin

and I know there is a simpler way to do it...but I didn't found it.

Would you please give me the "right" start in the way of an example?

What do I need to know?
1.- how do I fill the top half of the screen in one color and the bottom one in another color
2.- how do I place some different sized/colored text on this bicolor background
3,. something else important to start?

That would really help, I think.

BTW, I would be happy about further comments to improve my code. I would like to have as got as possible "at my level" wink

Logged

Roger

tsh73
Full Member

member is offline

Gender:

Posts: 210

Re: Overlaying GRAPHICBOXES in window
« Reply #11 on: Jul 5^th, 2017, 07:50am »

Code:

nomainwin
open "test" for graphics_nsb_nf as #gr
#gr "trapclose [quit]"
#gr "down; home; posxy cx cy"
width = 2*cx
height = 2*cy
color1$="red"
color2$="255 168 0"'some orange
#gr "color ";color1$
#gr "backcolor ";color1$
'for drawing filled box we need border color match fill color
#gr "place 0 0" 'upper left corner
#gr "boxfilled ";width ;" ";height/2    'other corner
'now change font, set size, and bold
#gr "font times_new_roman 48 bold"
'change text color
#gr "color ";color2$
'type a text
#gr "place 80 ";height/2 - 20   'position by trial and error
#gr "\";"Hello"

'about the same for bottom part
#gr "backcolor ";color2$
'for drawing filled box we need border color match fill color
#gr "place 0 ";height/2
#gr "boxfilled ";width ;" ";height  'over corner, not size!
#gr "font courier_new 48 bold"  'another font
#gr "color ";color1$
'type a text
'now a bit less trial and error:
'get line height in current font
#gr "posxy dummy y0"
#gr "\" 'new line - invisible
#gr "posxy dummy y1"
lineHeight = y1-y0
'Let a line width in current font
txt$="there"
#gr "stringwidth? txt$ lineWidth"

#gr "place ";(width-lineWidth)/2;" ";height/2 + lineHeight  
#gr "\";txt$

#gr "flush"
wait

[quit]
    close #gr
    end

Quote:

I would be happy about further comments to improve my code.

Did you post the code?

EDIT added determining line height, line width in second part.

« Last Edit: Jul 5^th, 2017, 08:00am by tsh73 »

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #12 on: Jul 5^th, 2017, 08:36am »

Quote:

Did you post the code?

Sorry, I thought I added it in the exe file. I'll send it asap.

Logged

Roger

Rod
Full Member

member is offline

Gender:

Posts: 110

Re: Overlaying GRAPHICBOXES in window
« Reply #13 on: Jul 5^th, 2017, 2:37pm »

Not sure if this helps or not.

Code:

nomainwin
WindowWidth  = 200
WindowHeight = 200
UpperLeftX = (DisplayWidth-WindowWidth)/2
UpperLeftY = (DisplayHeight-WindowHeight)/2
open "Graphic" for graphics_nsb as #1
'get the handle of the window
hWD=hwnd(#1)
'get the handle of the DC in that window
CallDll #user32, "GetDC", hWD as ulong, hDC as ulong
'set text to render with transparent background
calldll #gdi32, "SetBkMode",hDC as ulong,_TRANSPARENT as long, re as long
#1 "trapclose [quit]"
#1 "down"
#1 "color red ; backcolor red"
#1 "place 0 0 ; boxfilled 200 100"
#1 "color blue ; backcolor blue"
#1 "place 0 100 ; boxfilled 200 200"

#1 "color yellow ; home ; circle 100"
#1 "font Consolas 40 ; place 30 110 ;\Text"
wait

[quit]
close #1
end

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #14 on: Jul 5^th, 2017, 3:43pm »

Here is my code.

Code:

' "K'elle Danse"

' For 1920x1080 display

PrgVersion$ = "0-0-1-1"

NOMAINWIN

FilenameNow$  = ""
FilenameNext$ = ""

' Load danse list from file "Config.ini"
DIM Dance$(31)
OPEN "Config.ini" FOR input AS #ConfigFile
DO
  INPUT #ConfigFile, Dance$
  Dance$(index) = Dance$
  index = index + 1
LOOP UNTIL index >= 31
CLOSE #ConfigFile

' Load background images
LOADBMP "Now",  DefaultDir$ + "\" + "_Now.bmp"
LOADBMP "Next", DefaultDir$ + "\" + "_Next.bmp"

GRAPHICBOX #Main.GBx1,0,0,1920,540     ' top "Now" image
 STYLEBITS #Main.GBx1,0,_WS_BORDER,0,0 'remove image's border

GRAPHICBOX #Main.GBx2,0,540,1920,540   ' bottom "Next" image
 STYLEBITS #Main.GBx2,0,_WS_BORDER,0,0 'remove image's border

GRAPHICBOX #SideMenu.GBx1,0,0,200,1080     ' "Menu" image
 STYLEBITS #SideMenu.GBx1,0,_WS_BORDER,0,0 'remove image's border

BackgroundColor$ = "darkred" ' this color setting MUST stay before the STATICTEXT!!!

STATICTEXT #SideMenu.STx0, "  " + Dance$(0) ,10,  20,200,20
STATICTEXT #SideMenu.STx1, "  " + Dance$(1) ,10,  50,200,20
STATICTEXT #SideMenu.STx2, "  " + Dance$(2) ,10,  80,200,20
STATICTEXT #SideMenu.STx3, "  " + Dance$(3) ,10, 110,200,20
STATICTEXT #SideMenu.STx4, "  " + Dance$(4) ,10, 140,200,20
STATICTEXT #SideMenu.STx5, "  " + Dance$(5) ,10, 170,200,20
STATICTEXT #SideMenu.STx6, "  " + Dance$(6) ,10, 200,200,20
STATICTEXT #SideMenu.STx7, "  " + Dance$(7) ,10, 230,200,20
STATICTEXT #SideMenu.STx8, "  " + Dance$(8) ,10, 260,200,20
STATICTEXT #SideMenu.STx9, "  " + Dance$(9) ,10, 290,200,20
STATICTEXT #SideMenu.STx10,"  " + Dance$(10),10, 320,200,20
STATICTEXT #SideMenu.STx11,"  " + Dance$(11),10, 350,200,20
STATICTEXT #SideMenu.STx12,"  " + Dance$(12),10, 380,200,20
STATICTEXT #SideMenu.STx13,"  " + Dance$(13),10, 410,200,20
STATICTEXT #SideMenu.STx14,"  " + Dance$(14),10, 440,200,20
STATICTEXT #SideMenu.STx15,"  " + Dance$(15),10, 470,200,20
STATICTEXT #SideMenu.STx16,"  " + Dance$(16),10, 500,200,20
STATICTEXT #SideMenu.STx17,"  " + Dance$(17),10, 530,200,20
STATICTEXT #SideMenu.STx18,"  " + Dance$(18),10, 560,200,20
STATICTEXT #SideMenu.STx19,"  " + Dance$(19),10, 590,200,20
STATICTEXT #SideMenu.STx20,"  " + Dance$(20),10, 620,200,20
STATICTEXT #SideMenu.STx21,"  " + Dance$(21),10, 650,200,20
STATICTEXT #SideMenu.STx22,"  " + Dance$(22),10, 680,200,20
STATICTEXT #SideMenu.STx23,"  " + Dance$(23),10, 710,200,20
STATICTEXT #SideMenu.STx24,"  " + Dance$(24),10, 740,200,20
STATICTEXT #SideMenu.STx25,"  " + Dance$(25),10, 770,200,20
STATICTEXT #SideMenu.STx26,"  " + Dance$(26),10, 800,200,20
STATICTEXT #SideMenu.STx27,"  " + Dance$(27),10, 830,200,20
STATICTEXT #SideMenu.STx28,"  " + Dance$(28),10, 860,200,20
STATICTEXT #SideMenu.STx29,"  " + Dance$(29),10, 890,200,20
STATICTEXT #SideMenu.STx30,"  " + Dance$(30),10,1000,200,20


[MAIN]
   ' Main window - background
   UpperLeftX   = 0
   UpperLeftY   = 0
   WindowWidth  = 1920
   WindowHeight = 1080
   OPEN "Now & Next" FOR window_popup AS #Main 'no title, not resizable
   #Main "TRAPCLOSE [QUIT]"

   #Main.GBx1 "down"
   #Main.GBx1 "drawbmp Now 0 0"
   #Main.GBx1 "when leftButtonDown [MouseLeftButton]"
   #Main.GBx1 "when mouseMove [MouseMove]"

   #Main.GBx2 "down"
   #Main.GBx2 "drawbmp Next 0 0"
   #Main.GBx2 "when leftButtonDown [MouseLeftButton]"
   #Main.GBx2 "when mouseMove [MouseMove]"

   ' Side menu - dance selector
   UpperLeftX   = 1720
   UpperLeftY   = 0
   WindowWidth  = 190
   WindowHeight = 1080
   ForegroundColor$ = "white"
   OPEN "Side Menu" FOR window_popup AS #SideMenu  'no title, not resizable
   STYLEBITS #SideMenu,0,_WS_VISIBLE,0,0 ' startup hidden (not visible)
   #SideMenu "font tahoma 12 bold"
   #SideMenu.GBx1 "down; fill darkred"
   #SideMenu.GBx1 "when LeftButtonDown [DanceSelection]"

   WAIT


[QUIT]
   CLOSE #SideMenu
   CLOSE #Main
   END

[REFRESH]
   UNLOADBMP "Now" 'free-up memory
   LOADBMP "Now", DefaultDir$+"\"+FilenameNow$+"_Now.bmp"
   #Main.GBx1 "down"
   #Main.GBx1 "drawbmp Now 0 0"
   UNLOADBMP "Next" 'free-up memory
   LOADBMP "Next", DefaultDir$+"\"+FilenameNext$+"_Next.bmp"
   #Main.GBx2 "down"
   #Main.GBx2 "drawbmp Next 0 0"
   WAIT

[MouseLeftButton]
   IF MouseX = 0 AND MouseY < 10 THEN [ABOUT] 'upper left screen edge "About..."
   IF MouseX = 0 AND MouseY > 530 THEN [QUIT] '"Quitter"
   WAIT

[MouseMove] 'get mouse's XY position - for programming purpose
   IF MouseX > 1720 AND MouseX < 1900 THEN #SideMenu "show"
   IF MouseX < 1720 THEN #SideMenu "hide"
   IF MouseX > 1910 THEN #SideMenu "hide"
   WAIT

[DanceSelection]
   FilenameNow$ = FilenameNext$
   IF MouseY < 45                    THEN FilenameNext$ = Dance$(0)  GOTO [REFRESH]
   IF MouseY >= 45  AND MouseY < 75  THEN FilenameNext$ = Dance$(1)  GOTO [REFRESH]
   IF MouseY >= 75  AND MouseY < 105 THEN FilenameNext$ = Dance$(2)  GOTO [REFRESH]
   IF MouseY >= 105 AND MouseY < 135 THEN FilenameNext$ = Dance$(3)  GOTO [REFRESH]
   IF MouseY >= 135 AND MouseY < 165 THEN FilenameNext$ = Dance$(4)  GOTO [REFRESH]
   IF MouseY >= 165 AND MouseY < 195 THEN FilenameNext$ = Dance$(5)  GOTO [REFRESH]
   IF MouseY >= 195 AND MouseY < 225 THEN FilenameNext$ = Dance$(6)  GOTO [REFRESH]
   IF MouseY >= 225 AND MouseY < 255 THEN FilenameNext$ = Dance$(7)  GOTO [REFRESH]
   IF MouseY >= 255 AND MouseY < 285 THEN FilenameNext$ = Dance$(8)  GOTO [REFRESH]
   IF MouseY >= 285 AND MouseY < 315 THEN FilenameNext$ = Dance$(9)  GOTO [REFRESH]
   IF MouseY >= 315 AND MouseY < 345 THEN FilenameNext$ = Dance$(10) GOTO [REFRESH]
   IF MouseY >= 345 AND MouseY < 375 THEN FilenameNext$ = Dance$(11) GOTO [REFRESH]
   IF MouseY >= 375 AND MouseY < 405 THEN FilenameNext$ = Dance$(12) GOTO [REFRESH]
   IF MouseY >= 405 AND MouseY < 435 THEN FilenameNext$ = Dance$(13) GOTO [REFRESH]
   IF MouseY >= 435 AND MouseY < 465 THEN FilenameNext$ = Dance$(14) GOTO [REFRESH]
   IF MouseY >= 465 AND MouseY < 495 THEN FilenameNext$ = Dance$(15) GOTO [REFRESH]
   IF MouseY >= 495 AND MouseY < 525 THEN FilenameNext$ = Dance$(16) GOTO [REFRESH]
   IF MouseY >= 525 AND MouseY < 555 THEN FilenameNext$ = Dance$(17) GOTO [REFRESH]
   IF MouseY >= 555 AND MouseY < 585 THEN FilenameNext$ = Dance$(18) GOTO [REFRESH]
   IF MouseY >= 585 AND MouseY < 615 THEN FilenameNext$ = Dance$(19) GOTO [REFRESH]
   IF MouseY >= 615 AND MouseY < 645 THEN FilenameNext$ = Dance$(20) GOTO [REFRESH]
   IF MouseY >= 645 AND MouseY < 675 THEN FilenameNext$ = Dance$(21) GOTO [REFRESH]
   IF MouseY >= 675 AND MouseY < 705 THEN FilenameNext$ = Dance$(22) GOTO [REFRESH]
   IF MouseY >= 705 AND MouseY < 735 THEN FilenameNext$ = Dance$(23) GOTO [REFRESH]
   IF MouseY >= 735 AND MouseY < 765 THEN FilenameNext$ = Dance$(24) GOTO [REFRESH]
   IF MouseY >= 765 AND MouseY < 795 THEN FilenameNext$ = Dance$(25) GOTO [REFRESH]
   IF MouseY >= 795 AND MouseY < 825 THEN FilenameNext$ = Dance$(26) GOTO [REFRESH]
   IF MouseY >= 825 AND MouseY < 855 THEN FilenameNext$ = Dance$(27) GOTO [REFRESH]
   IF MouseY >= 855 AND MouseY < 885 THEN FilenameNext$ = Dance$(28) GOTO [REFRESH]
   IF MouseY >= 885 AND MouseY < 915 THEN FilenameNext$ = Dance$(29) GOTO [REFRESH]
   IF MouseY >= 915                  THEN FilenameNext$ = ""         GOTO [REFRESH]
   WAIT

[ABOUT]
      NOTICE "à propos de..."+CHR$(13)+_
      "              --- K'elle Danse ---"+CHR$(13)+CHR$(13)+_
      "version "+PrgVersion$+" / résolution 1920x1080"+CHR$(13)+CHR$(13)
   WAIT

Logged

Roger

Richard Russell
Administrator

member is offline

Posts: 1348

Re: Overlaying GRAPHICBOXES in window
« Reply #15 on: Jul 5^th, 2017, 4:18pm »

on Jul 5^th, 2017, 2:37pm, Rod wrote:

Not sure if this helps or not.

The same end result but achieved without any API calls (even works in Just BASIC):

Code:

nomainwin
WindowWidth  = 200
WindowHeight = 200
UpperLeftX = (DisplayWidth-WindowWidth)/2
UpperLeftY = (DisplayHeight-WindowHeight)/2
open "Graphic" for graphics_nsb as #1
#1 "trapclose [quit]"
#1 "down; fill blue; color yellow; backcolor blue"
#1 "font Consolas 40 ; place 30 110 ;\Text"
#1 "rule ";_R2_MASKNOTPEN
#1 "color blue; backcolor blue; place 0 0 ; boxfilled 200 100"
#1 "rule ";_R2_MERGEPEN
#1 "color red ; backcolor red; place 0 0 ; boxfilled 200 100"
wait 

[quit]
close #1
end

Richard.

« Last Edit: Jul 5^th, 2017, 4:21pm by Richard Russell »

Logged

tsh73
Full Member

member is offline

Gender:

Posts: 210

Re: Overlaying GRAPHICBOXES in window
« Reply #16 on: Jul 5^th, 2017, 5:41pm »

Quote:

The same end result but achieved without any API calls (even works in Just BASIC):

LOL
The point is that Rod's code draws transparent text on any background.
Any fancy loaded bitmap.

Speaking of "without any API calls"
As far as I remember, LB/JB drawbmp is not affected with RULE command.
Does LBB drawbmp obeys RULE command?
It looks something is changing.
So may be where is a way to make text look transparent on bitmap background, using RULE command?

EDIT and it looks like printing text is not affected with RULE command...

EDIT
Quote:

Does LBB drawbmp obeys RULE command?
It looks something is changing.

Not?

((

« Last Edit: Jul 5^th, 2017, 5:56pm by tsh73 »

Logged

Rod
Full Member

member is offline

Gender:

Posts: 110

Re: Overlaying GRAPHICBOXES in window
« Reply #17 on: Jul 5^th, 2017, 7:18pm »

Uggg, not able to run the code too much missing info. It looks like you want to list dance routines and have the user click on one.

You seem to have a graphicbox set to do this with areas set for each dance routine. You will print text or draw graphics in each area that identifies the dance routine and the mouse will select them.

What are all the statictext commands for?

You could just have one single bmp with the selections pre drawn. So I am not understanding why it is getting so complex.

Why not forget the code for now and tell us in as many words as you can what the screen should look like and how the user should interact with it.

Logged

Richard Russell
Administrator

member is offline

Posts: 1348

Re: Overlaying GRAPHICBOXES in window
« Reply #18 on: Jul 5^th, 2017, 8:15pm »

on Jul 5^th, 2017, 5:41pm, tsh73 wrote:

Does LBB drawbmp obeys RULE command?

Remember, in both LB and LBB (and JB) the graphics capabilities are simply 'thin wrappers' around the Windows API (GDI). In each case the 'heavy lifting' is done by Windows itself so, pretty much without exception, you can assume that they will work the same way.

Indeed, you can often ascertain how they will work by checking the documentation at MSDN. In this case, LB's rule command translates directly to the SetROP2 API. If you look up that function at MSDN you will find that it says "The SetROP2 function sets the current foreground mix mode. GDI uses the foreground mix mode to combine pens and interiors of filled objects with the colors already on the screen". So only "pens and interiors of filled objects" are affected by rule.

Richard.

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #19 on: Jul 5^th, 2017, 8:15pm »

Hi Rod,

I thought just running my code would be self explaining (...).

Quote:

not able to run the code too much missing info.

As far as I could test, anything is in the exe file I sent a link for in a previous post.

Logged

Roger

Pages: 1 2 3


« Previous Topic \| Next Topic »