Embedded Files
This mini project offers 2 different subtle animations which can both add their own touch of style to other scripts.
They are not specific to the Colour Ball, and are merely using it to demonstrate that Annex-Wifi Basic is capable of web animations.
Most of you will be aware that video animation consists of sequences of still images called frames.
CSS3 animation uses a blending between different frames (styles) over a specified duration.
The 'key' to CSS animation is its use of 'keyframes' - the full sequence is assigned a duration, starting at 0% and ending at 100% of the full duration whatever it may be. The animation is a smooth morphing blend between selected styles over the specified duration. As an example, if we use a start (0%) style that colours some text red, and an end style that colours it blue, with a duration of 10 seconds... the text will smoothly change from red through to blue over 10 seconds.
Intermediate 'frames' styles can be inserted at desired % points of the duration. So if we inserted a green style at 50%, the animation would transition from red to green during the first 5 secs (50%) then from green to blue during the last 5 secs.
If the green style was instead inserted at 20% of the duration, it would cause the red to green transition to only last for 2 secs (20%), and the green to blue transition would last for 8 secs (80%).
The sequence of transitions can end after completion, or repeat a specified number of iterations, or continue indefinitely.
Remember that CSS style can also specify position, so it is possible to move animated items around the screen if wished.
Many other 'animatable' properties are listed here: https://www.w3schools.com/cssref/css_animatable.asp
More CSS animation info can be found at: https://www.w3schools.com/css/css3_animations.asp
Copy and paste the following code to the bottom of the Colour Ball script, then add "gosub slidedown" underneath 'cls' in the 'paintscreen' subroutine (it's probably already there and just needs uncommenting).
Save the modified script to a suitable name, eg: /program/bonusball.bat (to avoid overwriting the old version), then run it.
It will cause 2 slight differences to the old script for you to spot.
Basic:
'Bonus - Add to bottom of Colourball script then uncomment "gosub slidedown" (underneath CLS at the beginning of the paintscreen: subroutine)
slidedown:
a$ = ""
a$ = a$ + |function openNav() {|
a$ = a$ + | document.getElementById("myNav").style.height = "100%";|
a$ = a$ + |}|
a$ = a$ + ||
a$ = a$ + |function closeNav() {|
a$ = a$ + | document.getElementById("myNav").style.height = "0%";|
a$ = a$ + |}|
jscript a$
a$ = ""
a$ = a$ + |<!DOCTYPE html>|
a$ = a$ + |<html>|
a$ = a$ + |<head>|
a$ = a$ + |<style> |
a$ = a$ + |#mycol {|
a$ = a$ + | color: yellow;|
a$ = a$ + | -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */| a$ = a$ + | animation: mymove 20s infinite;| a$ = a$ + |}| a$ = a$ + |/* Chrome, Safari, Opera */| a$ = a$ + |@-webkit-keyframes mymove {| a$ = a$ + | 20% {color: blue;}| a$ = a$ + | 40% {color: green;}| a$ = a$ + | 60% {color: yellow;}| a$ = a$ + | 80% {color: red;}| a$ = a$ + |}| a$ = a$ + |/* Standard syntax */| a$ = a$ + |@keyframes mymove {| a$ = a$ + | 20% {color: blue;}| a$ = a$ + | 40% {color: green;}| a$ = a$ + | 60% {color: yellow;}| a$ = a$ + | 80% {color: red;}| a$ = a$ + |}| a$ = a$ + |</style> | a$ = a$ + |</head>| a$ = a$ + |<body>| a$ = a$ + |<span style="position:absolute;top:7;right:33px;margin-left:50px;font-size:30px;color:white;cursor:pointer" onclick="openNav()">☰</span>| a$ = a$ + |<div id="myNav" class="overlay">| a$ = a$ + | <link type="text/css" rel="stylesheet" href="/html/slidedown.css">| a$ = a$ + | <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>| a$ = a$ + | <div class="overlay-content">| a$ = a$ + | <h1 id="mycol">Colour Ball</h1><br><br>| a$ = a$ + | <p style="color:aqua;">Red Green Blue manual sliders<br></p>| a$ = a$ + | <p style="color:aqua;">Random R G B colour button<br></p>| a$ = a$ + | <p style="color:aqua;">Separate brightness slider<br></p>| a$ = a$ + | <p style="color:aqua;">Diameter and line-thickness controls<br></p>| a$ = a$ + | <i><p style="color:PowderBlue">(emulate the appearance of an LED)</p></i><br><br><br><br>| a$ = a$ + | <h3 style="color:Gray;">Click X at top right to close</h3>| a$ = a$ + | </div>| a$ = a$ + |</div>| a$ = a$ + |</body>| a$ = a$ + |</html>| html a$ a$ = "" return '---------------------- Bonus END ----------------------
The 'slidedown overlay' page is used here to present a Help page, but in a later project a variant is used to present a menu.
Here's the original w3schools 'overlay' examples: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
NOTE: In 'web-world' a hash character '#' denotes a 'bookmark', ie: a pointer to somewhere on the same web page.
These # pointers offer a handy way to connect styles to web components such as div's, which is a useful point to know.
The required style is created and assigned the required id name prefixed with #, eg: #myDIV {color:red;}.
Any component that includes that id in its declaration, ie: <div id='myDIV'>, will be styled accordingly.
Take a look at the 'original colour-change' example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_color
Notice that the div id points to the animation defined in the style section, causing the div contents to aquire the specified animation style.
TIP: A handy 'unsung' development tool is sitting in plain sight right in front of you. The w3schools 'Tryit Editor' offers opportunity to edit code snippets in the left-hand window, click the Run >> button above it, then view the results in the right-hand window.
Try it for yourself: rename all instances of 'myDIV' to 'myID' (or whatever you prefer), then Run to check it still works.
TIP: Check out their comprehensive list of keyboard shortcuts: https://www.w3schools.com/tags/ref_keyboardshortcuts.asp
Some handy editing keyboard shortcuts are:
CTRL F to find specified text
Hold Shift while using Up or Down arrows to select individual lines.
CTRL A to select all
CTRL C to copy selected contents (to clipboard, ready for pasting)
CTRL V to paste contents from clipboard
CTRL D to delete selected text
CTRL Z to undo last edits
Use the keyboard shortcuts to copy and paste a duplicate of "50% {color: blue;}" and change it to "25% {color: green;}".
Repeat again, but this time change it to "75% {color: yellow;}".
Run it and check for the additional colours - if they don't appear it is most likely that you've changed the other definition for not your browser, so copy the changes to both browser definitions then try it again. Try changing the time duration, tailor the text to say what you want, remove the border, make whatever changes you might want if using the code for your own purposes.
Then all you would need do is copy and paste it into the Annex-Wifi Basic 'Html Converter' for a resulting Basic script.
These comments are not specific to only this example BTW, you could similarly use any of their 'Tryit' examples for the same purpose.
Page updated
Google Sites
Report abuse