I needed a simple user interface with a fix menu column, a data display area and, why not, a title area.
HTLM, CSS and Java is not my field, from various websites I have deduced this code maybe made better.
I have left the examples of the links that I often use in my applications.
Salve, gente di annex,
avevo bisogno di una semplice interfaccia utente con una colonna fissa per i menu, un'area di visualizzazione dati e, perchè no, un'area titolo.
HTLM, CSS e Java non sono tra le mie competenze, da vari siti web ho dedotto questo codice forse migliorabile.
Ho lasciato gli esempi dei link che uso spesso nelle mie applicazioni.
Code: [Local Link Removed for Guests]
' *************************************************************************************
' ***** File Info *****
' *************************************************************************************
' Filename: Layout
' Date : 18/03/2022
' Version : 3
' Edit. by: MarioL.
' Function: My standard layout for hunan interface
' Firmware: ANNEX WiFi 1.42.3
' Hardware: D1 mini.
' Doc.Ref.: Annex WiFi RDS Help Version 1.42,
' Note :
' ***************************************************************************************
myIP$ = WORD$(IP$,1) 'return local IP address Module
onhtmlreload lblDrawPage
gosub lblDrawPage
wait
lblDrawPage:
cls
A$ = || 'from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float
A$ = A$ + |<!DOCTYPE html>|
A$ = A$ + |<html lang="it">|
A$ = A$ + |<head>|
A$ = A$ + |<link rel="icon" href="/favicon.ico" />| 'if favicon desidered upload it in ESP
A$ = A$ + |<meta charset="utf-8">|
A$ = A$ + |<meta name="viewport" content="width=device-width, initial-scale=1">|
A$ = A$ + |<style>|
A$ = A$ + |* {|
A$ = A$ + | box-sizing: border-box;|
A$ = A$ + |}|
A$ = A$ + |body {|
A$ = A$ + | font-family: verdana, Arial;|
A$ = A$ + | background-color: #000;|
A$ = A$ + |}|
' |/* Style the header */|
A$ = A$ + |header {|
A$ = A$ + | background-color: #666;|
A$ = A$ + | border: 3px solid black; border-radius: 20px;|
A$ = A$ + | padding: 5px;|
A$ = A$ + | text-align: center;|
A$ = A$ + | color: white;|
A$ = A$ + | height: 100px;|
A$ = A$ + |}|
' |/* Create two columns/boxes that floats next to each other */|
A$ = A$ + |nav {|
A$ = A$ + | float: left;|
A$ = A$ + | width: 20%;|
A$ = A$ + | height: 500px; |
A$ = A$ + | border: 3px solid black; border-radius: 10px;|
A$ = A$ + | background: #E6E6FA;|
A$ = A$ + | padding: 5px;|
A$ = A$ + |}|
' |/* Side navigation links */|
A$ = A$ + |nav a {|
A$ = A$ + | color: darkgreen;| 'text color #228B22
A$ = A$ + | background-color: lightgrey;|
A$ = A$ + | padding: 8px;|
A$ = A$ + | text-decoration: none;|
A$ = A$ + | display: block;|
A$ = A$ + | border: ridge;|
A$ = A$ + | border-radius: 15px 1px;;|
A$ = A$ + |}|
' |/* Change color on hover */|
A$ = A$ + |nav a:hover {|
A$ = A$ + | background-color: #000;|
A$ = A$ + | color: lime;|
A$ = A$ + |}|
A$ = A$ + |DataInterface {|
A$ = A$ + | float: left;|
A$ = A$ + | padding: 20px;|
A$ = A$ + | width: 80%;|
A$ = A$ + | background-color: #f1f1f1;|
A$ = A$ + | border: 3px solid black; border-radius: 10px;|
A$ = A$ + | height: 500px; |
A$ = A$ + | text-align: center;|
A$ = A$ + |}|
' |/* Clear floats after the columns */|
A$ = A$ + |section::after {|
A$ = A$ + | content: "";|
A$ = A$ + | display: table;|
A$ = A$ + | clear: both;|
A$ = A$ + |}|
' |/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */|
A$ = A$ + |@media (max-width: 600px) {|
A$ = A$ + | nav, DataInterface {|
A$ = A$ + | width: 100%;|
A$ = A$ + | height: auto;|
A$ = A$ + | }|
A$ = A$ + |}|
A$ = A$ + |</style>|
A$ = A$ + |</head>|
A$ = A$ + |<body>|
A$ = A$ + |<header>|
'******************************* EDIT HERE TITLE AND SUBTITLE *******************************
A$ = A$ + | <b style="font-size:30px">MAIN TITLE HERE</b>| 'title
A$ = A$ + | <span style="font-size:20px"><br><i>Sub title here </i></span>| 'subtitle
A$ = A$ + |</header>|
html a$ : a$ = "" 'little chunk, more free RAM
A$ = A$ + |<section>|
A$ = A$ + | <nav>|
A$ = A$ + | <center><b> Menu' and Commands </b></center>| 'menù sectionn title
A$ = A$ + | <hr noshade size="5">| 'add a horizontal line
'****************** EDIT/ADD HERE LINK AND OBJECT FOR COMMAND AND MENU FUNCTION **************************
'links at label lblTglFullScrn
A$ = A$ + |<a href="#" data-var='lblTglFullScrn' onclick='cmdButton(this)'>Toggle Full Screen</a>|
'open config in other tab
a$ = a$ + |<a href="http://| + myIP$ + |/config" target="_blank">Open /CONFIG page</a>|
'link to page with annex toolbar meù
a$ = a$ + |<a href="http://| + myIP$ + |/output?menu" >Menu bar Enable</a>|
'link to page without annex toolbar meù
a$ = a$ + |<a href="http://| + myIP$ + |/output" >Menu bar Disable</a>|
'links at label reboot device
A$ = A$ + |<a href="#" data-var='lblRebootDevice' onclick='cmdButton(this)'>Reboot device</a>|
a$ = a$ + |<br>|
'links at label lblFromMenuLink1
A$ = A$ + |<a href="#" data-var='lblFromMenuLink1' onclick='cmdButton(this)'>Execute branch label lblFromMenuLink1</a>|
'add more link and command. . . remember, no scroll bar avail!
'************************************ limit for commands and menu *****************************
A$ = A$ + | </nav>|
html a$ : a$ = "" 'little chunk, more free RAM
A$ = A$ + | <DataInterface>|
'************************ EDIT/ADD HERE OBJECT FOR HUMAN DATA INTERFACE **************************
A$ = A$ + |<p>Data interface</p>|
a$ = a$ + textbox$(MyIP$)
'******************************** limit for Human Data interface *****************************
A$ = A$ + | </DataInterface>|
A$ = A$ + |</section>|
A$ = A$ + |</body>|
A$ = A$ + |</html>|
html a$ : a$ = "" 'little chunk, more free RAM
autorefresh 1000
return
lblFromMenuLink1:
'create a message in alert box
n=n+1
Message$ = "Called label lblFromMenuLink1 n."+STR$(n)
jscall "alert('" + Message$ + "')"
return
lblRebootDevice:
reboot
return
lblTglFullScrn:
'toglle full screen wview
J$ = ||
J$ = J$ + |{ var doc = window.document;|
J$ = J$ + | var docEl = doc.documentElement;|
J$ = J$ + | var requestFullScreen = docEl.requestFullscreen; |
J$ = J$ + | var cancelFullScreen = doc.exitFullscreen ;|
J$ = J$ + | if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {|
J$ = J$ + | requestFullScreen.call(docEl);|
J$ = J$ + | }|
J$ = J$ + | else {|
J$ = J$ + | cancelFullScreen.call(doc);|
J$ = J$ + | }|
J$ = J$ + |}|
jscript J$: J$ = "" 'more free ram
'wlog ramfree
return