Post by bfraley on Nov 5, 2013 16:03:27 GMT -5
Let's say your application is a web page, or a web page with application in it, or multiple components of functionality on a single page, all served from .bas files.
Using clear screen will obviously clear the whole page. So instead of clearing the screen
and rendering / re-loading the surrounding page, along with the other functional components that are maybe also on the page (all in separate div elements), here is a very concise and easy alternative I wrote.
NOTES:
- I have made numerous fixes on this post. You can now copy and paste the top two code blocks and it should run without errors. Only run on RBFree or Personal, this won't work in the runbasic.com editor.
-READ the code and comments. Much of it is just for this example, but some is important.
-Run in Full Screen Mode, and erase or comment out the SVG too see a seamless change.
Put this in head of html like this:
Don't forget the quotations before or after <script> </script>
Then use and call the function like this:
OR use other element types like this:
This simple wiper function must be used before, after, or if something,
to avoid code or html immediately being "not shown" in the element.
So you have to think about timing, placement, and where your program
starts, stops, waits, and moves to. Also, consider what is getting "wiped" and when.
I haven't actually run my above code as typed. Just my own wiper versions.
But I will, and fix any typos if needed.
You'll want to make your own wiper by filling in your own variable name and refer to the
html element you're wiping. If you're familiar with JS, you could build really complex
behaviors and dynamic relationships between elements with this.
I will keep an eye on this, answer questions, and modify my post as needed.
There'e probably typos. I spent longer on this post than actually writing and using "wiper()".
EXTRA NOTES:
-The use of .innerHTML is not a JS standard, but is massively used.
-You could call the "head" and link to a separate JS file containing the
wiper function, more complex usage, or implement it into other objects/functionality.
This is the most ideal way, I think.
-You could use an .innerHTML based functions to programmatcally change
single words, sentences, divs, or whatever - All based on procedural steps of a
RB application.
-You could define many elements as variables and re-use wiper, another form
of wiper, as well as other functions on them.
-I will eventually post a more advanced object / function way of doing this for those with a limited understanding of JS or HTML.
Using clear screen will obviously clear the whole page. So instead of clearing the screen
and rendering / re-loading the surrounding page, along with the other functional components that are maybe also on the page (all in separate div elements), here is a very concise and easy alternative I wrote.
NOTES:
- I have made numerous fixes on this post. You can now copy and paste the top two code blocks and it should run without errors. Only run on RBFree or Personal, this won't work in the runbasic.com editor.
-READ the code and comments. Much of it is just for this example, but some is important.
-Run in Full Screen Mode, and erase or comment out the SVG too see a seamless change.
Put this in head of html like this:
[start]
' Use clear screen here for going back to start branch
cls
head "<script>
// JavaScript Wiper Function
function wiper() {
var myProgram=document.getElementById('program');
myProgram.innerHTML="""";
}
// Note that nothing goes in the quotations. This sets the innerHTML to nothing, and blank.
</script>"
Don't forget the quotations before or after <script> </script>
Then use and call the function like this:
' *************************************
'HTML or RB stuff outside of the below container
' *************************************
html "<header id=""header"">"
' **SVG that may run in your browser.
' shows even better how the static stuff is unaffected.
' The SVG resets because the browser parses it using JS.
' So you have your JS, the browser running scripts along
' with various event listeners, and the JS that is running in RB too.
html "<svg width=""200px"" height=""50px"">
<circle cx=""20px"" cy=""20px"" r=""15px"" fill=""#008FCC"">
<animate attributeName=""cx"" type=""rotate"" dur=""3s"" values=""20px;160px;20px"" repeatCount=""indefinite""/>
</circle>
</svg>"
' ** SVG done **
html "<h1>JavaScript Wiper Function</h1>"
html "<h2>I'm HTML, and oblivious to any changes below</h2>"
print "Me too! I come from a print statement."
html "</header><!--END header id: header-->"
'Start html element / container
'********************************
' a little style first
'********************************
cssid #header, "{
background-color:#222;
font-family:sans;
color:#DDD;
text-align:center;
margin:0;
padding:10px;
}"
cssid #program, "{
width:500px;
height:300px;
margin:auto;
padding:10px;
border:5px solid #DDD;
background-color:#444;
color:#FFF;
white-space:normal;
font-family:sans;
font-size:1.25em;
}"
' *****done with CSS****
html "<div id=""program"">"
' Don't put the start of your html div /container
' inside the branch label because then the element
' will load over each time the branch code is run.
' It will load the "div" or whatever over and over.
' Also I tried using " div program " and it causes weird
' looping problems, doesn't work, and will pretty much stall your
' browser / RB Server.
[programDiv]
' Put a bunch of instructions here, here, and here and call the
' wiper function
' after an input is entered, or link is clicked, or after a wait
' statement, or at the start of ' a new branch label or subroutine.
'JAVASCRIPT call JS function wiper()
html "<script>wiper();</script>"
print "Pick One, Two, or Three"
link #defaultLink, "# 1",[LinkOne]
link #defaultLink, "# 2",[LinkTwo]
link #defaultLink, "# 3",[LinkThree]
' ***********
' clear screen
' ***********
print "Use Clear Screen"
link #defaultLink, "Clear Screen", [clearScreen]
' *************************************
' wait for a link to be clicked or whatever to happen
' *************************************
wait
' ***********
' link branch labels
' ***********
[LinkOne]
'JAVASCRIPT call JS function wiper()
html "<script>wiper();</script>"
print "This is Link One"
html "<h1>link 1</h1>"
html "<p>Now this text is all that's here in the div container, all around my container is unaffected. I'm an HTML paragraph</p>"
print "This text comes from a print statement."
link #defaultLink, "BACK", [programDiv]
wait
[LinkTwo]
'JAVASCRIPT call JS function wiper()
html "<script>wiper();</script>"
print "This is Link Two"
html "<h1>link 2</h1>"
html "<p>Now this text is all that's here in the div container, all around my container is unaffected. I'm an HTML paragraph</p>"
print "This text comes from a print statement."
link #defaultLink, "BACK", [programDiv]
wait
[LinkThree]
'JAVASCRIPT call JS function wiper()
html "<script>wiper();</script>"
print "This is Link Three"
html "<h1>link 3</h1>"
html "<p>Now this text is all that's here in the div container, all around my container is unaffected. I'm an HTML paragraph</p>"
print "This text comes from a print statement."
link #defaultLink, "BACK", [programDiv]
wait
' end the div element
html "</div><!---END div id: program-->"
[clearScreen]
cls
print "oh no"
link #defaultLink, "BACK", [start]
wait
' PROGRAM END
end
OR use other element types like this:
html "<some element id = ""program"" >" 'line of html has ended
'Your Run Basic logic
html "<p>Some more HTML if you want.</p>"
'More instructions and procedural logic
html "</some element>" 'html container element has ended
This simple wiper function must be used before, after, or if something,
to avoid code or html immediately being "not shown" in the element.
So you have to think about timing, placement, and where your program
starts, stops, waits, and moves to. Also, consider what is getting "wiped" and when.
I haven't actually run my above code as typed. Just my own wiper versions.
But I will, and fix any typos if needed.
You'll want to make your own wiper by filling in your own variable name and refer to the
html element you're wiping. If you're familiar with JS, you could build really complex
behaviors and dynamic relationships between elements with this.
I will keep an eye on this, answer questions, and modify my post as needed.
There'e probably typos. I spent longer on this post than actually writing and using "wiper()".
EXTRA NOTES:
-The use of .innerHTML is not a JS standard, but is massively used.
-You could call the "head" and link to a separate JS file containing the
wiper function, more complex usage, or implement it into other objects/functionality.
This is the most ideal way, I think.
-You could use an .innerHTML based functions to programmatcally change
single words, sentences, divs, or whatever - All based on procedural steps of a
RB application.
-You could define many elements as variables and re-use wiper, another form
of wiper, as well as other functions on them.
-I will eventually post a more advanced object / function way of doing this for those with a limited understanding of JS or HTML.
