Can graphic area be placed in location?

[Psycho]

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]

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

[Psycho]

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

[Carl Gundel - admin]

Sept 7, 2008 20:42:32 GMT -5 Psycho said:

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

[Psycho]

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.

[Janet]

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]

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 ...

[Psycho]

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

[votan]

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?

[Psycho]

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.