First attempt.

[mikeukmid]

Tested in IE6/IE7 only !


errorMsg$(1)="Error in conversion data!"
errorMsg$(2)="Error in meter readings!"
errorMsg$(3)="Error in energy cost data!"
[start]
'temp vars to store default data
tempcf=1.02264
tempcv=39.159
tempdv=3.6
tempuc=4.04978
'vars to retain data which may be changed by user whilst prog is running
cf=tempcf
cv=tempcv
dv=tempdv
uc=tempuc

cls
call styles
div main
html "<hr size=4>"
div header
 html "<h2>Gas<font size=2> (natural)</font> Units to kWh conversion</h2>"
end div
print
div creds
html "<blockquote><font size=1 color=blue>This utility converts gas units to kWh and calculates the cost of the energy used. It can also be used to compare suppliers by changing the cost/kWh price and clicking the 'Calculate' link.</font></blockquote>"
end div
div notice
html "<blockquote><font size=1 color=red>(If the Calorific value etc below differ from those quoted by your gas supplier,<br>  then enter the new values. Changes are retained for duration of session)</font></blockquote>"
end div
div dataArea
print "  Calorific value: ";
textbox #cv, str$(cv)
'#cv FONT("Tahoma",4)  'font setting for textbox ???
print
print "Conversion factor: ";
textbox #cf, str$(cf)
print
print "Divisor value: ";
textbox #dv, str$(dv)
print
print "Price per kWh (pence or cents): ";
textbox #cst, str$(uc)
print
print
end div 'dataArea
div user
print
html " "
print "Enter current meter reading: ";
textbox #current, ""
print
print "Enter previous meter reading: ";
textbox #prev, ""
print
end div 'user
div go
print "[ ";
link #finishLink, "Calculate", [calc]
print " ] [ ";
link #againLink, "Restart", [start]
print " ] [ ";
link #endLink, "Quit", [quit]
print " ]"
end div 'go
html "<hr size=4>"
print

end div 'main
wait  'use wait to stop and wait for user interaction

[calc]
div errors
'cls
errorCode=0
cv=#cv value()
cf=#cf value()
dv=#dv value()
if cv=0 or cf=0 or dv=0 then print errorMsg$(1):errorCode=1
c=#current value()
p=#prev value()
units=c-p
if c<=0 or p<=0 or units<=0 then print errorMsg$(2):errorCode=2
uc=#cst value()
if uc=0 then print errorMsg$(3):errorCode=3
end div
if errorCode=0 then
print
energy=(units*cf*cv)/dv
dim a(0,3)
a(0,0)=units
a(0,1)=energy
a(0,2)=uc
a(0,3)=using("####.##",(energy*uc)/100)
call cssTableStyle
div resOut
table #t1, a()
#t1 caption("Gas energy cost")
#t1 columnnames("Gas Units used,Energy used(kWh),Unit cost(pence/cents),Total cost(£ or $)")
#t1 cssclass("fix")
render #t1
'print
print "Click ";
link #againLink, "here", [start]
print " to restart"
end div
end if
wait 'use end when you want the program to stop responding

[quit]
cls
end

sub styles
 cssid #main, "{margin-left:auto; margin-right:auto; width:800px; padding: 10px 50px 10px 50px;text-align:right; background-image:url(http://www.karemi.talktalk.net/images/runbasic.jpg); background-color: #FFFACD;}"
 cssid #header, "{ width: 100%; font-family: Tahoma; color: green; font-style: italic;text-decoration: underline; text-align:center;}"
 cssid #creds, "{ text-align: center;}"
 cssid #notice, "{ text-align: center;}"
 cssid #dataArea, "{ float:left; width:50%; font-family: Tahoma; font-size: 10pt; color: black;}"
 cssid #user, "{ float:right; text-align: right;font-family: Tahoma; font-size: 10pt; color: black;}"
 cssid #go, "{width:100%; text-align: center;}"
 cssid #errors, "{text-align: center; font-family: Tahoma; font-size: 12pt; font-weight:bold;font-style:italic; color: red;}"
 cssid #resOut, "{text-align: center;}"
end sub

sub cssTableStyle
 cssclass "caption", "{ border: 2px ridge #CCF ;
                        font-family: Tahoma; font-size: 12pt;background:#EEF }"
 'cssclass "table.fix", "{ table-layout: fixed }"
 cssclass "table", "{ width: 600px;
                      border: 2px ridge #CCF ;
                      border-spacing: 1px;}" 'border-collapse:collapse;
 cssclass "tr", "{ background: #FFFACD; }"
 cssclass "td", "{border: 1px; border-style: solid; border-color: #000000; }"
end sub


Mike.

[carlgundel]

Very nice.

-Carl

[David den Haring]

Carl,

After running this sample program in IE6 on W2K, I noticed that it affected the visual appearance of the IDE. The RB tab bar became yellow and shifted to the right side of the screen.

[carlgundel]

daviddh said:

Carl,

After running this sample program in IE6 on W2K, I noticed that it affected the visual appearance of the IDE. The RB tab bar became yellow and shifted to the right side of the screen.

Yeah, but only until you run another program. It looks like the CSS that Mike defined conflicts with the CSS that I use to define how the IDE is displayed.

-Carl

[Jerry Muelver]

Since users' browsers might have "personal" CSS rules, and the RB server has its own rules, and our applications will all have their own rules, it might be a good idea to specify styled elements with an isolating prefix. For instance, instead of #header for an ID, how about #rbHeader for the server, Mike can use #muHeader in his apps, and I'll use #hyHeader in my HyText applications, and never the twain shall interfere.

[carlgundel]

jerrymuelver said:

Since users' browsers might have "personal" CSS rules, and the RB server has its own rules, and our applications will all have their own rules, it might be a good idea to specify styled elements with an isolating prefix. For instance, instead of #header for an ID, how about #rbHeader for the server, Mike can use #muHeader in his apps, and I'll use #hyHeader in my HyText applications, and never the twain shall interfere.

Good idea.

-Carl

[mikeukmid]

I didn't notice the effect on the IDE, I usually tick the full screen box.
Using #rbHeader etc to give exclusivity would not work would it?
Suppose Robin Butler decided to use #rbHeader as well. Unless of course #rbHeader was id'd as an error in the users program!

Could the IDE be on a different page?

By the way I noticed a problem with table styles clashing as well. When I tried to include a borderless table on the first screen, when the calculate link was clicked, the borderless table took on the style of the output table.

Mike.

[carlgundel]

mikeukmid said:

I didn't notice the effect on the IDE, I usually tick the full screen box.
Using #rbHeader etc to give exclusivity would not work would it?
Suppose Robin Butler decided to use #rbHeader as well. Unless of course #rbHeader was id'd as an error in the users program!

It might not be foolproof but it would certainly help. In any case we could get a lot more specific: #runbasicHeader

Could the IDE be on a different page?

We could make that an option.

By the way I noticed a problem with table styles clashing as well. When I tried to include a borderless table on the first screen, when the calculate link was clicked, the borderless table took on the style of the output table.

Perhaps objects could be given names that would identify them uniquely on the page?

In any case I don't think we're going to get really fancy here in the short term, and and I'm not sure how fancy things should really be. I'm going to err on the side of simplicity, and that won't happen if we move too quickly.

-Carl

[carlgundel]

mikeukmid said:

By the way I noticed a problem with table styles clashing as well. When I tried to include a borderless table on the first screen, when the calculate link was clicked, the borderless table took on the style of the output table.

Okay, I tried this. If you specify class types for each thing you are styling it seems to work okay. Here is an example:

 call css
 dim tableOne(5, 2)
 dim tableTwo(5, 2)
 for x = 0 to 5
   for y = 0 to 2
     tableOne(x, y) = x+y
     tableTwo(x, y) = x*y
   next y
 next x
 table #one, tableOne()
 table #two, tableTwo()

 print "add"
 render #one

 #two cssclass("two")
 #two tdclass("two")
 #two trclass("two")
 print "multiply"
 render #two

sub css
 cssclass "table.two", "{border: 1px ridge #33A ;  border-spacing: 1px}"
 cssclass "td.two", "{background: #F88}"
 cssclass "tr.two", "{font-family: courier; font-size: 150%}"
end sub
So I think this raises a question. Should there me a single method which sets the class for all the elements in a table in one shot, like:
#two allClass("two")
-Carl

[mikeukmid]

#two allClass("two")

As in :


call css
dim tableOne(5, 2)
dim tableTwo(5, 2)
for x = 0 to 5
for y = 0 to 2
tableOne(x, y) = x+y
tableTwo(x, y) = x*y
next y
next x
table #one, tableOne()
table #two, tableTwo()

print "add"
render #one

#two allclass("two")

print "multiply"
render #two

sub css
cssclass "table.two", "{border: 1px ridge #33A ; border-spacing: 1px}"
cssclass "td.two", "{background: #F88}"
cssclass "tr.two", "{font-family: courier; font-size: 150%}"
end sub


I can't see a reason not to as the css style flexibility for each part of the table appears to remain.

He he ... Yet again I was trying it out in RB personal and it didn't work!
Must try to remember I'm still on beta 3!

Mike.