TheBackShed.com

Forum Index : Microcontroller and PC projects : Any html experts out there ?

Author

Message

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 10:14am 23 Mar 2023

Copy link to clipboard

Print this post

Bit of a strange one (at least to me !)
I have two html files created by Microsoft Expression Web 4 (incidentally free to download and use)

Both files display perfectly when opening directly in various browsers.

However when I download to Picomite W via MCC Xmodem one displays perfectly and the other one is corrupted.

First one - Displays perfectly and via Picomite

Second one - Displays perfectly when opened direct in browser

However when second one is uploaded via xmodem to Picomite and called to browser via ip address it does not display and is corrupted.

Have tried other HTML editors with no change.

Any ideas gratefully received !

matherp
Guru

Joined: 11/12/2012
Location: United Kingdom
Posts: 9139

Posted: 11:23am 23 Mar 2023

Copy link to clipboard

Print this post

Try removing the <doctype...

The PicoMiteWeb created the header itself

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 11:51am 23 Mar 2023

Copy link to clipboard

Print this post

Unfortunately no difference ....

matherp
Guru

Joined: 11/12/2012
Location: United Kingdom
Posts: 9139

Posted: 11:59am 23 Mar 2023

Copy link to clipboard

Print this post

Zip up the html with any supporting files and post and then we can have a look

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 12:35pm 23 Mar 2023

Copy link to clipboard

Print this post

Here they are.... first1.html works fine, second1.html is the problem

kv1.zip

LeoNicolas

Guru

Joined: 07/10/2020
Location: Canada
Posts: 479

Posted: 01:33pm 23 Mar 2023

Copy link to clipboard

Print this post

Try to remove the head tags leaving the style inside the body tag.

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 01:50pm 23 Mar 2023

Copy link to clipboard

Print this post

No change unfortunately

matherp
Guru

Joined: 11/12/2012
Location: United Kingdom
Posts: 9139

Posted: 03:58pm 23 Mar 2023

Copy link to clipboard

Print this post

For reasons I don't understand your html is using a vast amount of either system stack or system heap - I think stack. The text "sans serif" is a result of memory corruption. Now this text doesn't appear in the firmware anywhere so it must be coming over the web from the host but doesn't appear in the normal html header.
I've made a change, posted in a29, which allows your code to work but if you put a syntax error in the interrupt routine so the program aborts then you can't edit as there is still corruption. I would suggest trying with an external CSS file but this is now beyond my knowledge.

panky

Guru

Joined: 02/10/2012
Location: Australia
Posts: 1101

Posted: 01:53am 24 Mar 2023

Copy link to clipboard

Print this post

@kaptinvimes

A few comments (not a html expert at all but W3Schools.com is your friend)

You should have a <html> tag immediately after the <!DOCTYPE html>

<meta ... > and <title> should be in the <head> tag, not <header>

Your <meta ... tag> should have the name content rather than the other way round you have - see code below

There is actually no need for a <header> tag

Repetitively invoking and embedding the class object is a memory consuming process and while it works(sort off) it is a very inefficient method - see the suggested thinned down version below.

I find that indenting clears up the structure and makes the html much easier to read and debug, remembering that tabs, new lines in the text are ignored by your browser.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.auto-style1 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
}
</style>
<title>PicoMiteWeb test page</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<header>

</header>
<body>


Alarm Status 





Alarm 1 = {alarmWeb1$}
 
Alarm 2 = {alarmWeb2$}
 
Alarm 3 = {alarmWeb3$}
 
Alarm 4 = {alarmWeb4$}
 
Alarm 5 = {alarmWeb5$}
 
Alarm 6 = {alarmWeb6$}
 
Alarm 7 = {alarmWeb7$}
 
Alarm 8 = {alarmWeb8$}
 



</body>
</html>

As far as using with PicoWEB, I don't have one yet so can not test in that environment. Hope this helps,
Regards,
Doug.

... almost all of the Maximites, the MicromMites, the MM Extremes, the ArmMites, the PicoMite and loving it!

TassyJim

Guru

Joined: 07/08/2011
Location: Australia
Posts: 6102

Posted: 02:11am 24 Mar 2023

Copy link to clipboard

Print this post

Your html code uses {} in the style definition.
MMBasic thinks that is a variable and replaces the contents with zeros

You need to double up on the {s to make the code work as expected.

I 'think' you only need to double the { to {{.
Not sure if the } needs the same treatment. The page seems to render without changing the } to }}

Jim

VK7JH
MMedit MMBasic Help

panky

Guru

Joined: 02/10/2012
Location: Australia
Posts: 1101

Posted: 02:21am 24 Mar 2023

Copy link to clipboard

Print this post

Jim,

With Firefox at least, if you use the {{ as suggested, the style is then ignored - ie. you get the default serif text and with out the x-large size in auto-style2

As Peter suggested, it might need the style code moved to an external file - unsure as to whether this would still be 'caught' by MMBasic?

Doug.

... almost all of the Maximites, the MicromMites, the MM Extremes, the ArmMites, the PicoMite and loving it!

TassyJim

Guru

Joined: 07/08/2011
Location: Australia
Posts: 6102

Posted: 02:37am 24 Mar 2023

Copy link to clipboard

Print this post

When you place {{ in the html code, MMBasic will convert it to a single { before serving the page.

If you want to look at the code before you send it to the picoW, then, yes, the browser will see the double {{ and get annoyed.

If the style definitions were in a separate file stored somewhere other than on the pico, the definitions don't need to be altered.

Jim

VK7JH
MMedit MMBasic Help

panky

Guru

Joined: 02/10/2012
Location: Australia
Posts: 1101

Posted: 02:46am 24 Mar 2023

Copy link to clipboard

Print this post

Jim,
I get it, thanks - I need a PicoWEB

Doug.

... almost all of the Maximites, the MicromMites, the MM Extremes, the ArmMites, the PicoMite and loving it!

panky

Guru

Joined: 02/10/2012
Location: Australia
Posts: 1101

Posted: 03:11am 24 Mar 2023

Copy link to clipboard

Print this post

Optionally, depending upon the complexity of your html program, you could embed any style info inline -

<!DOCTYPE html>
<html>
<head>
<title>PicoMiteWeb test page</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<header>

</header>
<body>


Alarm Status 





Alarm 1 = {alarmWeb1$}
 
Alarm 2 = {alarmWeb2$}
 
Alarm 3 = {alarmWeb3$}
 
Alarm 4 = {alarmWeb4$}
 
Alarm 5 = {alarmWeb5$}
 
Alarm 6 = {alarmWeb6$}
 
Alarm 7 = {alarmWeb7$}
 
Alarm 8 = {alarmWeb8$}
 



</body>
</html>

Doug.

... almost all of the Maximites, the MicromMites, the MM Extremes, the ArmMites, the PicoMite and loving it!

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 08:10am 24 Mar 2023

Copy link to clipboard

Print this post

Thanks all for this - I'll retry and get back to you.

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 10:34am 24 Mar 2023

Copy link to clipboard

Print this post

Tried Doug's html and guess what no problem, however when loading into Expression 4 and adding a font this is the result as generated

But on running and looking at the page source this is the result

Guessing .auto-style on line 9 is the cause of the problem ?

Moving on perhaps its time to change to a newer editor....

Thanks to all for your help !
David

TassyJim

Guru

Joined: 07/08/2011
Location: Australia
Posts: 6102

Posted: 11:09am 24 Mar 2023

Copy link to clipboard

Print this post

Once again, your code has a single { which MMBasic thinks is the start of a variable. Make it a {{ and all will be well again.

Jim

VK7JH
MMedit MMBasic Help

phil99

Guru

Joined: 11/02/2018
Location: Australia
Posts: 2141

Posted: 11:23am 24 Mar 2023

Copy link to clipboard

Print this post

" Moving on perhaps its time to change to a newer editor..."

Or if your current editor won't allow {{ use Notepad to add them where required before uploading to the Pico.

kaptinvimes
Newbie

Joined: 07/08/2022
Location: United Kingdom
Posts: 11

Posted: 12:18pm 24 Mar 2023

Copy link to clipboard

Print this post

TassyJim said Once again, your code has a single { which MMBasic thinks is the start of a variable. Make it a {{ and all will be well again.

Jim

Just realised that these { were added by Expression 4 as in

.auto-style2 {
font-size: x-large;
color: Tomato;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

I missed this and your previous comment had not sunk in

All is good now thank you.

David

Print this page

To reply to this topic, you need to log in.