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 1232 times)

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Overlaying GRAPHICBOXES in window
« Thread started on: Jul 3^rd, 2017, 5:47pm »

Hi,

Is there a way to overlay 2 or 3 GRAPHICBOXes in a window of "window" type?

Rog'

Logged

Roger

Richard Russell
Administrator

member is offline

Posts: 1348

Re: Overlaying GRAPHICBOXES in window
« Reply #1 on: Jul 3^rd, 2017, 6:44pm »

on Jul 3^rd, 2017, 5:47pm, flotulopex wrote:

Is there a way to overlay 2 or 3 GRAPHICBOXes in a window of "window" type?

There should be no problem overlaying multiple controls, so long as only one of them is visible at any given time. So if you send the "show" command to that one and the "hide" command to the others it should work (see code below). Is that what you meant?

Richard.

Code:

    GRAPHICBOX #w.gb1, 20, 20, 260, 200
    GRAPHICBOX #w.gb2, 20, 20, 260, 200
    GRAPHICBOX #w.gb3, 20, 20, 260, 200
    BUTTON #w, "Box 1", [b1], UL, 20, 250
    BUTTON #w, "Box 2", [b2], UL, 120, 250
    BUTTON #w, "Box 3", [b3], UL, 220, 250
    OPEN "Overlaid graphicboxes" for WINDOW as #w
    #w.gb2 "hide"
    #w.gb3 "hide"
    #w.gb1 "down; fill red"
    #w.gb2 "down; fill green"
    #w.gb3 "down; fill blue"
    WAIT

[b1]
    #w.gb1 "show"
    #w.gb2 "hide"
    #w.gb3 "hide"
    WAIT
    
[b2]
    #w.gb1 "hide"
    #w.gb2 "show"
    #w.gb3 "hide"
    WAIT
   
[b3]
    #w.gb1 "hide"
    #w.gb2 "hide"
    #w.gb3 "show"
    WAIT

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

Re: Overlaying GRAPHICBOXES in window
« Reply #2 on: Jul 3^rd, 2017, 7:58pm »

Thank you Richard.

No, I meant to draw (or fill) a background (1st graphicbox) and then put (overlay) some text in a form of a bmp.image in a second smaller graphicbox centered over the background.

Logged

Roger

tsh73
Full Member

member is offline

Gender:

Posts: 210

Re: Overlaying GRAPHICBOXES in window
« Reply #3 on: Jul 3^rd, 2017, 8:00pm »

Just say what are you hoping to get from that?
EDIT *got it aswered while I typed*

So you want second bitmap (with text) be transparently overlaid upon first?
Just happened on LB forums - transparentBlit

« Last Edit: Jul 3^rd, 2017, 8:05pm by tsh73 »

Logged

flotulopex
Junior Member

member is offline

Gender:

Posts: 94

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

I have a background, let's say it's red.

Then I make some other bmp image with white text on the same red text backcolor as the background.

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

Logged

Roger

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

Pages: 1 2 3


« Previous Topic \| Next Topic »