Layout for my application

All that relates to Javascript, CSS, HTML, ....
Post Reply
MarioL
Posts: 20
Joined: Sun Mar 21, 2021 8:38 am
Has thanked: 249 times
Been thanked: 33 times

Layout for my application

Post by MarioL »

Hi people of annex,
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

You do not have the required permissions to view the files attached to this post.
BeanieBots
Posts: 315
Joined: Tue Jun 21, 2022 2:17 pm
Location: South coast UK
Has thanked: 168 times
Been thanked: 102 times

Re: Layout for my application

Post by BeanieBots »

Thankyou Mariol for this. I'd been strugling with w3school & jsfiddle for ages to try and get something like this to work on an ESP.
However, could you (or anybody) please help me to take it little further.
I'm after being able to have a couple of windows that can be resized but still only show what I put on them (including my own exit/close button).
That is, just like full screen but resizeable and two or more of them with no window controls or address bar.
Any help would be much appreciated.

Edit: Each screen would be from a different device. I'm not expecting more than one from each but that would be nice if possible.
peridot
Posts: 46
Joined: Mon Mar 08, 2021 4:54 am
Has thanked: 7 times
Been thanked: 93 times

Re: Layout for my application

Post by peridot »

Needing a menu template for a new project and inspired by MarioL I developed a completely responsive UI template based on the W3.css responsive theme plus various other bits of CSS and JS code. The result is a menu template which is responsive and switches to a mobile menu below 995 pixels wide. It also incorporates css and JS code for responsive Iframes support, fallback wifi , web logo, web title, error log , startup log etc.

I have added a zip file with all the files including folder structure.
Annex-menu-1.zip
Annex1.jpg.jpg
Annex5.jpg.jpg
Annex6.jpg.jpg
Annex7.jpg
Annex8.jpg
You do not have the required permissions to view the files attached to this post.
Post Reply