|
Post by Psycho on Sept 7, 2008 18:31:26 GMT -5
Is there a way to place a graphic area in a specific place on the screen (such as besides buttons or links)?
I am displaying a table with about 6 columns and several rows at the top of the screen, then I have several links going down the left side of the screen. Finally, I am displaying a graphic area with a bar graph of information below all that. The area below the table and to the right of the links would be a much better place to display this as the user would not have to scroll the screen to see all of it.
Can this be done?
|
|
neal
Full Member
Posts: 104
|
Post by neal on Sept 7, 2008 18:49:26 GMT -5
You should be able to put your image in a div and use CSS to position it where you want it, or if you really hate CSS you could do it the old fashioned way using a table
|
|
|
Post by Psycho on Sept 7, 2008 20:42:32 GMT -5
I can't say that I hate CSS, I just don't know or understand a lot about it I've learned about CSS background coloring, making links look like buttons (prior to Carl's button command in beta 2), changing button colors with hover, styling the looks of my tables, etc.. I needed to do this to make my program more functional and visually pleasing. After reading your reply, I did some searching but have only discovered how to have a graphic image placed in position as part of the div statement itself (when defining the CSSID). Can you help me with how to do the same with a native graphic area in RB that will display variable information based on data within the program? I haven't been able to figure out how to do that yet. Thanks for the help. Psycho
|
|
|
Post by Carl Gundel - admin on Sept 7, 2008 20:50:53 GMT -5
I can't say that I hate CSS, I just don't know or understand a lot about it I've learned about CSS background coloring, making links look like buttons (prior to Carl's button command in beta 2), changing button colors with hover, styling the looks of my tables, etc.. I needed to do this to make my program more functional and visually pleasing. After reading your reply, I did some searching but have only discovered how to have a graphic image placed in position as part of the div statement itself (when defining the CSSID). Can you help me with how to do the same with a native graphic area in RB that will display variable information based on data within the program? I haven't been able to figure out how to do that yet. Thanks for the help. Psycho What do you mean when you compare a "graphic image" with a "native graphic area"? It should not matter what it is, if you put an image ie. <IMG SRC="blah blah"/> in a DIV, or a RENDER #graphicObject in a DIV they should layout the same. -Carl
|
|
|
Post by Psycho on Sept 7, 2008 21:34:11 GMT -5
It appears I am just not getting this one. What I meant was I had found the following code in the wiki help area: CSSID #Section1, "{ Width: 200px; Background-Color: #FFFFCC; Background-Image: Url('http://runbasic.wikispaces.com/space/showimage/Lily4855.PNG'); Background-Repeat: No-Repeat; Background-Position: 50px 100px; }" DIV Section1 FOR i = 1 TO 20 PRINT "Line Number ";i NEXT i END DIV END I didn't know you could put a render #graphicObject in place of the image URL. Now that you've said it, I tried and failed. Clearly I'm missing something. Following is a simple sample with some fixed data. I modified the above CSS sample the way I thought it should be but after several guesses, I never got it to work. I'd like to know how I can place the graphic area #g at a specific area using CSS. As it stands now, it is placed in the default area starting at the top left 0,0. CSSID #Section1, "{ Background-Image: render #g; Background-Position: 350px 300px; }"
call graphlife 1000000,100000 end
sub graphlife expected, current 'create a graphic object graphic #g, 400, 300 graph=int(180-(100-(current/expected*100))) 'Check if current usage is greater than expected if graph >=80 then #g color("green") for x = graph to 180 #g line(140,x,200,x) next x else #g color("green") for x = 80 to 180 #g line(140,x,200,x) next x if graph<31 then graph=31 'Limit red to area on screen #g color("red") for x = graph to 79 #g line(140,x,200,x) next x end if 'place the drawing pen at beginning of box #g place(120,30) 'draw a box #g color("black") #g box(220, 181) 'print text for current die usage #g place(118,20) #g "\Current Usage" 'draw line and text for expected life #g line(121,80,219,80) #g place(10,82) #g "\Expected Life"
div Section1 render #g end div end sub Thanks for all the replies.
|
|
|
Post by Janet on Sept 7, 2008 23:34:30 GMT -5
Are you trying to create a bar graph? Divs can be nested.
Dim dmData(20) For i = 1 to 20 dmData(i) = Int(Rnd(1) * 10) + 1 Next i
' Style a column 15 px wide, 110 px high ' Float the column left cssID #colfloatleft, "{ width: 15px; height: 110px; border-width: thin; float: left; text-align: center; font-family: verdana; font-size: 9pt; }"
' Include a stopper column to the right cssID #colnofloat, "{ width: 15px; height: 110px; border: none; float: clear; }"
' Define a blue box cssID #boxblue, "{ width: 14px; height: 10px; background-color: blue; }" cssID #boxgreen, "{ width: 14px; height: 10px; background-color: green; }" cssID #boxwhite, "{ width: 14px; height: 10px; background-color: white; }"
' Draw the columns Cls html "</div>" hueStrand$ = "green blue" For i = 1 to 20 Div colfloatleft For j = 10 to 1 Step -1 If j > dmData(i) Then Div boxwhite: Print "": End Div Else If i Mod 2 = 0 Then Div boxgreen: Print "": End Div Else Div boxblue: Print "": End Div End If End If Next j Print dmData(i) End Div Next i Div colnoflat: End Div End
|
|
neal
Full Member
Posts: 104
|
Post by neal on Sept 8, 2008 4:47:19 GMT -5
Try something like this:
CSSID #Section1, "{ float: right; }"
div Section1 call graphlife 1000000,100000 end div
print "This will appear to the left of the graph..."
... rest of your program ...
|
|
|
Post by Psycho on Sept 8, 2008 11:03:18 GMT -5
Yes Janet, I am trying to create a bar graph. The simple one I have on my example was a quick throw together as it was the first time I used any of the graphics functions of RB. Your example looks very nice so I am going to print a hard copy for studying in hopes I can better understand how you've done this and possibly incorporate the same method for my needs. Neal, the float command and where the div statement goes is exactly what I needed to move forward with what I currently have. So much CSS to learn, so little time to program and learn it... Thanks for the replies, they've been very helpful. John Siejkowski
|
|
|
Post by votan on Sept 8, 2008 11:45:45 GMT -5
What actually is the "mod" command for? Couldn't find any documentation about it....If i Mod 2 = 0 Then Div boxgreen: Print "": End Div Else Div boxblue: Print "": End Div End If
Here it seems to work as an "is even/uneven" indicator... Can someone manybe expalin the "mod" command and how to use it a bit more here?
|
|
|
Post by Psycho on Sept 8, 2008 12:24:12 GMT -5
From the Liberty Basic help file: num1 MOD num2
Description: The MOD command returns the remainder when num1 is divided by num2.
Usage:
'divide 15 by 4 and return the remainder print 15 MOD 4 print 27 MOD 16
'produces 3 11 When 15 is divided by 4, the quotient is 3, with a remainder of 3. MOD returns that remainder. When 27 is divided by 16, the quotient is 1, with a remainder of 11. MOD returns that remainder. In Janets example, she is using 2 as the divisor to determine if the number is odd or even.
|
|