render images to one position

metro
Full Member

Posts: 180

render images to one position Sept 14, 2015 10:15:35 GMT -5

Quote

Post by metro on Sept 14, 2015 10:15:35 GMT -5

This is where I show my lack of knowledge
I'm trying to display a selection of charts repeatedly
to one graphic object. seems I have to refresh the whole
screen to get the desired result.(tackling that now)

any help appreciated

UPDATE:
so AJAX is what we need
www.w3schools.com/Ajax/ajax_intro.asp

'***********
DIM a$(57)
global DR$,ChartCode$

'LOAD ASX CODES
    AsxOptCodesList$ = "AGL,AIO,AMC,AMP,ANZ,ASX,AWC,BEN,BHP,BLD,BOQ,BSL,BXB,CBA,CCL,CIM,COH,CPU,CSL,CSR,FMG,FXJ,GPT,HVN,IAG,"
    AsxOptCodesList$ = AsxOptCodesList$ + "AJHX,LLC,MQA,MQG,MYR,NAB,NCM,ORG,ORI,OSH,OZL,PPX,QAN,QBE,RIO,SGP,STO,STW,SUN,TAH,"
    AsxOptCodesList$ = AsxOptCodesList$ + "TCL,TEN,TLS,TOL,TTS,WBC,WDC,WES,WOR,WOW,WPL,XJO"
    for a=1 to 57
      a$(a)=WORD$(AsxOptCodesList$,a,",")
     next a
selected$=""




Call setCSS

gosub [displaymain]
gosub [displaynav]

'DEFAULT CHART
ChartCode$="^AXJO"
DR$="1y"
gosub [CREATEGRAPHIC]
gosub [DISPLAYCHART]

wait
 
[select] 'LISTBOX CHOICE
selected$=#lb selection$()
print
ChartCode$=selected$
    if ChartCode$<>"XJO" then
     ChartCode$=ChartCode$+".AX"
    end if

    if ChartCode$="XJO" then
     ChartCode$="^A"+ChartCode$
    end if
   

GOSUB [DISPLAYCHART]

WAIT

[displaynav]
div navigation
 print "Menu"
print
listbox #lb,a$(),1
print
print

link #sel, "Get Selection",[select]
print
print
print
 link #d1, "One Day", [BuildChart]
 link #d5, "Five Days", [BuildChart]
 link #m3 , "Three Months", [BuildChart]
 link #m6, "Six Months", [BuildChart]
 link #y1, "ONE YEAR", [BuildChart]
 link #y2, "TWO YEARS", [BuildChart]
 link #y5, "FIVE YEARS", [BuildChart]
 link #ya, "All HISTORY", [BuildChart]

#d1 CSSClass("fancyButton")
#d5 CSSClass("fancyButton")
#m3 CSSClass("fancyButton")
#m6 CSSClass("fancyButton")
#y1 CSSClass("fancyButton")
#y2 CSSClass("fancyButton")
#y5 CSSClass("fancyButton")
#ya CSSClass("fancyButton")

end div
RETURN

WAIT
[CREATEGRAPHIC]
graphic #g, 800, 600
RETURN

[DISPLAYCHART]

 urlfile$ = "http://chart.finance.yahoo.com/z?s=" +ChartCode$+ "&t="+DR$+"&q=l&l=on&z=l&p=m10,m50,v&a=r14 "
 page$=HTTPGET$(urlfile$)


open "pic.png" for binary as #1
print #1, page$
close #1

'Load the image
 loadimage "picture", "pic.png"
'create a graphic object.

'draw the image in the graphic object.
#g place(0,0)
#g drawimage("picture",0,0)
'display it on the web page
render #g
RETURN

[displaymain]

div Container 'Main
html "<head>" 
html "<h1> ASX CHARTS</h1>"
html "</head>"
html "<div align='right'>"
end div
RETURN

'***********************SUBS************************
[BuildChart]

'   'SETUP DATE RANGES AVAILABLE
'    timespan$="1d,5d,3m,6m,1y,2y,5y,my"

print " ":print "Handle is ";EventKey$
if EventKey$= "#d1" then DR$="1d"
if EventKey$= "#d5" then DR$="d5"
if EventKey$= "#m3" then DR$="m3"
if EventKey$= "#m6" then DR$="m6"
if EventKey$= "#y1" then DR$="y1"
if EventKey$= "#y2" then DR$="y2"
if EventKey$= "#y5" then DR$="y5"
if EventKey$= "#ma" then DR$="ma"


GOSUB [DISPLAYCHART]

WAIT


Sub setCSS
    CSSID #Container, "{
    align center 
    margin-left: auto;
    margin-right: auto;
    width: 70%;
         Margin:  20px Auto;
        Background-Color: #C6C6B8;
        Font-Family: Tahoma;
        Font-Size: 1em;
        Font-Weight: Bold;
        Text-Align: Center;
        Color: Black;
        Width: 1100px;
        Height: 710px;
        Padding: 20px 20px 0px 10px;
        Border-Color: #45453D;
        Border-Size: Thick;
        Border-Style: Ridge;
        Border-Bottom-Style: Ridge;
   
    }"
cssid #navigation, "{

font-family: Tahoma;
 font-size: small;
 color: #CC0000;
  border-right: 3px solid #666666;
 background: #ADAD99;
 padding: 4px;
 width: 250px;
 height: 570px;
 float: left;
 white-space: normal;
  background-repeat: repeat;
 background-image: url('/pagebg.PNG');
Text-Align: Center;
 }"
'********************************************************



CSSID #footer, "{
 Background-Color:#77776E;
        Font-Family: Verdana;
        Width: 1100px;
        Height: 25px;
        Padding: 5px 5px 5px 0px;
        Text-Align: Center;
   }"

CSSID #mytable, "{
 Font-Family: Verdana;
        Font-Size: .75em;
Padding: 10px 10px 0px 0px;
Width: 675px;
        Height: 570px;
 Background-Color: #FFFFFF;
 overflow-y: scroll;
}"



CSSID #h1, "{
font-family: Tahoma;
    display: block;
font-family: Tahoma;
color: #3D3D1F;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}"
 
'minimum CSSClass to make a link look like a button
CSSClass "a.linkButton", "{
         align center 
        Width: 140px;
        Height: 30px;
        Text-Align: Center;
        Border-Width: Medium;
        Border-Style: Outset;
        Text-Decoration: None;
        Display: Block;
    }"
 
'more styles added
CSSClass "a.fancyButton", "{
         align center; 
        Text-Decoration: None;
        Font-Size: 14pt;
        Font-Weight: Bold;
        Width: 240px;
        Height: 30px;
        Display: Block;
        Background: #C0C0C00;
        Color: #000000;
        Text-Align: Center;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #AAAAAA;
    }"
End Sub

Last Edit: Sept 14, 2015 18:33:06 GMT -5 by metro

Intel Core2 QUAD CPU @2.54 x 4 Mint Linux 19.3 Mate

meerkat
Full Member

Posts: 220

render images to one position Sept 15, 2015 5:05:22 GMT -5

Quote

Post by meerkat on Sept 15, 2015 5:05:22 GMT -5

G'Day Metro.
Why not simply use HTML with a <TABLE>.
Give the area you want to display a ID as in id=shoChart. Then use getelementbyid to display the chart there.

Here is an example of doing it that way.. Not nearly as fancy as yours but you can fix that..


AsxOptCodesList$ = "AGL,AIO,AMC,AMP,ANZ,ASX,AWC,BEN,BHP,BLD,BOQ,BSL,BXB,CBA,CCL,CIM,COH,CPU,CSL,CSR,FMG,FXJ,GPT,HVN,IAG,"
AsxOptCodesList$ = AsxOptCodesList$ + "AJHX,LLC,MQA,MQG,MYR,NAB,NCM,ORG,ORI,OSH,OZL,PPX,QAN,QBE,RIO,SGP,STO,STW,SUN,TAH,"
AsxOptCodesList$ = AsxOptCodesList$ + "TCL,TEN,TLS,TOL,TTS,WBC,WDC,WES,WOR,WOW,WPL,XJO"
ChartCode$	= "ALG"

dim mdy$(8)
dim mdyDiap$(8)
mdy$(1) = "1d"	: mdyDisp$(1)	= "One Day"
mdy$(2) = "d5"	: mdyDisp$(2)	= "Five Days" 
mdy$(3) = "m3"	: mdyDisp$(3)	= "Three Months"
mdy$(4) = "m6"	: mdyDisp$(4)	= "Six Months"
mdy$(5) = "y1"	: mdyDisp$(5)	= "ONE YEAR"
mdy$(6) = "y2"	: mdyDisp$(6)	= "TWO YEARS"
mdy$(7) = "y5"	: mdyDisp$(7)	= "FIVE YEARS"
mdy$(8) = "ma"	: mdyDisp$(8)	= "All HISTORY"
DR$	= "1d"

CSSClass ".hide", "{visibility: hidden; height:0px; bprder:none}"

' ------ interactive interface to RB -----
button	#optClick,"",[BuildChart1]
	#optClick setid("optCodeClick")
	#optClick cssclass("hide")

html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100% BGCOLOR='silver'>"
html "<TR><TD COLSPAN=2 ALIGN=CENTER><H1><FONT FACE='Arial'>ASX CHARTS"
html "</TD></TR><TR>"
html "<TD BGCOLOR='gray' align=center width=10%>"

html "<SELECT name='optCodes' onChange=document.getElementById('optCodeClick').click(); />"
i = 1
while word$(AsxOptCodesList$,i,",") <> ""
	a$ = word$(AsxOptCodesList$,i,",")
	if AspOptCode$ = a$ then sel$ = "selected" else sel$ = ""
	html  "<option value='";i;"' ";sel$;">";a$;"</option>"
	i = i + 1
WEND
html "</SELECT><BR>"
for i = 1 to 8
 button #mdy, mdyDisp$(i), [BuildChart]
	#mdy setkey(mdy$(i))
html "<BR>"
next i

html "</TD><TD id=shoChart>"
html "No Chart Yet"
html "</TD></TR></TABLE>"
wait

[BuildChart]
DR$		= EventKey$
goto [shoChart]

[BuildChart1]
optNum$		= #request get$("optCodes")
optNum		= val(optNum$)
ChartCode$	= word$(AsxOptCodesList$,optNum,",")
[shoChart]
'----- show chart ---
html "<script> document.getElementById('shoChart').innerHTML = """
html "<IMG SRC='http://chart.finance.yahoo.com/z?s=" +ChartCode$+ "&t="+DR$+"&q=l&l=on&z=l&p=m10,m50,v&a=r14' width=100%>"
html """;</script>"
wait

Hope this helps...
Good luck .. Dan

Last Edit: Sept 15, 2015 5:22:53 GMT -5 by meerkat

metro
Full Member

Posts: 180

render images to one position Sept 15, 2015 10:01:49 GMT -5

Quote

Post by metro on Sept 15, 2015 10:01:49 GMT -5

Thanks Dan,
I'll give it a try when I'm back at my PC
Bl###y magic how you churn out code
That's another ale I owe you
Its gotta be 5 o'clock somewhere

Appreciate you taking the time

Laurie

PS

html "<SELECT name='optCodes' onChange=document.getElementById('optCodeClick').click(); />"

showing my ignorance here...is this java script or HTML
I want to understand it, i can see it will be quite useful

Last Edit: Sept 15, 2015 21:39:12 GMT -5 by metro

Intel Core2 QUAD CPU @2.54 x 4 Mint Linux 19.3 Mate

meerkat
Full Member

Posts: 220

render images to one position Sept 16, 2015 7:12:49 GMT -5

Quote

Post by meerkat on Sept 16, 2015 7:12:49 GMT -5

That's nothing but pure HTML instead of using RB's 'listbox'.

I normally stay away from the RB's interface such as listbox, radiogroup, and checkbox.
You can look up html "<select" for listbox, "radio button' for radiogroup, or "checkbox" for checkbox.

You have a lot more options with HTML code. Such as having a number or code associated with the drop down list. For example the statement you point out uses a event trigger "onChange" to cause it to click a button in RB.
There are many triggers such as onLeave (when your mouse leaves a field) onHover ( when your mouse enters a field). Look up html event attributes.

So when something changes in the drop down list it clicks the hidden RB button. That's a sneaky way to make RB interactive. (See runbasic.proboards.com/thread/1737/rb-interactive-new-html-features on making RB interactive)

Anyway once you use HTML instead of RB's HTML you will see a lot more options.

Hope this helps....

Dan