To get us started we will create an html analog clock which uses separate stylesheet and javascript files.
I've
called it a Demo rather than a project because it is purely 'webby'
without any Basic - but we will create a Basic project version of it
later.
NOTE: what denotes a file as a web page is its file extension... which can be .html or just .htm (without the L)
We
could just upload the 3 required files, but for tutorial purposes we
will create them ourselves using the Annex-Wifi Basic text editor... to
show that despite their fancy names, they are still nothing more than
simple text files which can be edited by any text editor (even Notepad).
TIP:
when I plan to save contents of the editor to a different name file, I
have learned from experience that it's prudent to change the name FIRST then Save
existing (unwanted) contents to that new name... rather than modify or
paste new contents then hastily click Save before belatedly realising
I've just overwritten and lost my previous 'good' filename contents by
mistake (if you don't yet understand what I'm saying... you will !).
So in the 'File to Run' window, overtype the existing path and filename with the new "/html/clock.html" then click the Save button.
Now copy and paste the following text into the editor over the top of previous contents (using select all), then click Save again.
HTML:
<!DOCTYPE html>
<html>
<head> <title>Analog Clock</title> <script type="text/javascript" src="script.js"></script> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <div class="analog-clock"> <svg width="140" height="140"> <circle id="clock-face" cx="70" cy="70" r="65" /> <line id="h-hand" x1="70" y1="70" x2="70" y2="38" /> <line id="m-hand" x1="70" y1="70" x2="70" y2="20" /> <line id="s-hand" x1="70" y1="70" x2="70" y2="12" /> <line id="s-tail" x1="70" y1="70" x2="70" y2="56" /> <text x="62" y="18">12</text> <text x="126" y="76">3</text> <text x="66" y="130">6</text> <text x="7" y="76">9</text> </svg> <div class="time-text"> <span id="hr">00</span> <span>:</span> <span id="min">00</span> <span>:</span> <span id="sec">00</span> <span id="suffix">--</span> </div> </div> </body> </html> You don't need to understand any of it, just notice that the first line declares the document type as being HTML, and a few lines down it refers to an external javascript file called script.js and links to an external stylesheet called style.css - then Save it.
To avoid overwriting and losing it, type "/html/script.js" into the File to Save window then click Save in readiness for our javascript file, then right-click in the editor and Select All, then copy and paste the following javascript contents over the previous html, then Save it.
Javascript:
function clock(){
//calculate angle var d, h, m, s; d = new Date; h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60); m = 6 * d.getMinutes(); s = 6 * d.getSeconds(); //move hands setAttr('h-hand', h); setAttr('m-hand', m); setAttr('s-hand', s); setAttr('s-tail', s+180); //display time h = d.getHours(); m = d.getMinutes(); s = d.getSeconds(); if(h >= 12){ setText('suffix', 'PM'); }else{ setText('suffix', 'AM'); } if(h != 12){ h %= 12; } setText('sec', s); setText('min', m); setText('hr', h); //call every second setTimeout(clock, 1000); }; function setAttr(id,val){
var v = 'rotate(' + val + ', 70, 70)'; document.getElementById(id).setAttribute('transform', v); }; function setText(id,val){
if(val < 10){ val = '0' + val; } document.getElementById(id).innerHTML = val; }; window.onload=clock;
No need to worry what any of that javascript does, just notice the name of the 'clock()' function on the first line. Then click the Syntax dropdown arrow on the toolbar above the editor and select Js, and notice that the editor window changes to offer javascript script syntax-highlighting.
 Now we are going to create the CSS file, so type /html/style.css into the 'File to Run' window, then click Save.
Copy and paste the following stylesheet contents into the editor window over the top (so Select All of the old first), then Save it.
CSS:
*{
margin:0; padding:0; font-family:sans-serif; font-size:14px; } .analog-clock{
width:140px; height:140px; } #clock-face{ stroke: black; stroke-width: 2px ; fill :white; }
#clock-face{
stroke:black; stroke-width:2px; fill:white; } #h-hand, #m-hand, #s-hand, #s-tail{
stroke:black;
stroke-linecap:round; } #h-hand{
stroke-width:3px; } #m-hand{
stroke-width:2px; } #s-hand{
stroke-width:1px; } .time-text{
text-align:center; } Click the Syntax dropdown arrow on the toolbar above the editor and this time select Css syntax-highlighting.
Notice in the editor window how recognised css words are coloured, helping to highlight the difference between style instructions and user variables even if we don't recognise such instructions ourselves yet. TIP: take note of the following useful style rules which are evident in the css script above...
CSS
stands for Cascading Style Sheet, which uses a principle of cascading a
style definition to all specified elements and any deritaves, but
allowing any of those elements the freedom to subsequently over-ride the
cascaded style with a different individual style if wished.
NOTE: html strips out (ignores) all carriage-returns and all but the first of any consecutive spaces.
Notice the line: #clock-face{ stroke: black; stroke-width: 2px ; fill :white; } which has only been added for demonstration purposes.
If
you study the statements between the curly brackets you will see they
are actually the same as contained between the brackets of the #clock-face{ style definition underneath it - they both appear the same to a browser, therefore the white space (carriage-returns and spaces) is just there for user readability. Having made that point, delete one or other of the #clock-face definitions up to and including it's end curly bracket.
(it doesn't matter which you delete, but remember to Save the file again afterwards) NOTE: if you wish to insert a displayable 'carriage-return/line-feed' in html you need to send the "<br>" (break) instruction.
If you wish to insert displayable spaces you need to send one or more html " " (non-breaking space) entity. An 'entity' is the html way to send special characters using plain text, see https://www.w3schools.com/html/html_entities.asp Those few rules mentioned above pretty much sum up 'how' to use html and css, the rest is more a matter of what, where and when - which for a hacker is often a case of suck it and see... as we shall do now.  Let's take a look at our analog clock...
Close your Output tab or window if it is open, to make sure we are all in sync on the same page.
Right-click the File Manager button, open in a new tab, select "/html/clock.html" in the file list, then click the 'View' button.
Enjoy your first html demo... remember that YOU created and saved those 3 different files of html and css and javascript code. Now let's test out some of those rules we've just learned, by trying to tailor the second-hand to display a bit more to our liking.
Looking at the css code in the editor, it seems a reasonable guess to expect that #s-hand may be referring to the second-hand. It is mentioned twice, so we can see different style being declared in different places. But notice that the first time is also with other items that are all being set with the same styling, whereas the next time is to define some unique styling just for it. So
let's be sure we're looking at the right thing, by changing the value
mentioned in the unique style definition from 1 to 4 to see what
happens...
#s-hand{
stroke-width:4px; Click Save to save your modification, then switch back to the File Manager tab to view the clock.
Notice the display is still the same - but then press F5 keyboard button to refresh your browser screen, and watch what happens. Great... except for its tail. Ah, but now look at the line in the middle that declares #h-hand, #m-hand, #s-hand, #s-tail ? If we think about that for a moment, it tells us that all those different comma-separated #names are being set with the same style definition, so if we change the style for any item we will be changing it for all... which is perhaps not what we want.
In order to only style our second-hand tail we could copy and paste the name to create its own individual required style definition, ie: "#s-tail{stroke-width: 4px;}", which would work so long as it isn't restyled by a subsequent definition.
Our script does contain a subsequent #s-hand definition, but it doesn't also style the tail element, so the easiest solution is just to add our required tail style to that so it does both the second hand and it's tail... and let's make it red while we're at it, ie:  #s-hand, #s-tail {
stroke-width:4px; stroke:red; Save changes, switch to View the clock, then press F5 to refresh.
Try changing #clock-face fill from white; to wheat; then save and refresh to see the difference.
You want more ?
Add "color:blue; background:lightgray; border: 2px solid gray;" into the bottom .time-text definition, ie:
.time-text{
text-align:center; color:blue; background:lightgray; border: 2px solid gray; Change the style of anything you don't like until it suits your own preferences, then Save, and refresh output.
There are also other ways of specifying colours, as explained here... https://www.w3schools.com/colors/default.asp You might also be interested in transparency and opacity... https://www.w3schools.com/css/css_image_transparency.asp When you are finished trying different effects on the clock, let's move on to positioning it. Open the clock.html in the editor (click Open, select html folder, double-click clock.html). DIV tags are used to separate and enclose content, and are often used to group content together for styling and positioning.
Most tag elements, including <div>, can have extra 'inline' control info embedded into the tag. Our clock.html script has 2 such div containers, each giving their contents their own unique named class. The first declared <div class="analog-clock"> enloses the inner <div class="time-text"> which effectively sits inside. Therefore any positioning changes we make to the outer div will also affect the inner div. So rather than modify the CSS stylesheet as before, we'll modify the parent <div class="analog-clock"> by inserting inline style. See this link for more info about styles: https://www.w3schools.com/html/html_css.asp Positioning can be specified as absolute, relative, or fixed, depending on circumstances and requirements.
We will position our clock absolutely with reference to top and left of the window, so the style instructions that needs to be inserted into the div to center the clock on my screen would look like this: <div class="analog-clock" style = "position : absolute ; top:300px; left:650px; ;; " > (all
the unnecessary white space and semicolons have been added just to make
the point that white space is unnecessary and unimportant)
Change the position coordinates to suit your own screen... and you can try the effects of referencing from right and bottom instead of top and left.
Addressing
When happy with the positioning, look at the address displayed in the browser address bar.
 Remember you had clicked View on your selected file from the File Manager page, but the url now being displayed is actually the saved filename and path prefixed by the IP address, which is now being 'hosted' by the Annex-Wifi Basic Web Server,
The same applies to all web files you have on the device, they can each be addressed by prefixing their /path/filename with the IP address.
|
Join Our DiscussionCOUNTER |
|