Go Down

Topic: Where to Learn HTML (Read 16214 times) previous topic - next topic

Babar_Latif

Guys ......

What is the best source on the net to learn embedded HTML from. ??

Thanks
Babar

DrAzzy

"embedded html"? HTML is HTML. I like w3schools for web-design stuff (HTML, CSS, and JS).

On embedded systems, space is at a premium and large files are awkward - particularly if you're generating the code within your sketch (as opposed to serving it off an SD card or something) - so you'll naturally be making different tradeoffs than you would if you were serving it  off a full scale server, but all the concepts, syntax, etc are the same.


That said - I tend to use a somewhat different paradigm when the embedded system is really cramped for resources: I serve most of the site with a bog standard apache server running on a raspi on the same network; this way, you can develop like you would on a normal server, instead of constantly worrying about the size of the pages you're serving up. The embedded system, instead of serving up HTML, just serves the data in JSON format (with the damned CORS header), and the page that the raspi serves up uses an XHR to grab that data. That way the embedded system is *only* serving what only it can, and the resource-rich raspi is serving up the html and other resources. An example of this is what I do for mood lighting in my room (not Arduino though - it's Espruino, so it's embedded JS) that uses this paradigm is here - This stuff is sitting on a raspi: https://github.com/SpenceKonde/AzzyProjects/tree/master/Animate/WebControlPanel while it's making those XHRs aimed at this lighting controller ( https://github.com/SpenceKonde/AzzyProjects/blob/master/Animate/Version8.js )
ATtiny core for 841+1634+828 and x313/x4/x5/x61/x7/x8 series Board Manager:
http://drazzy.com/package_drazzy.com_index.json
ATtiny breakouts (some assembled), mosfets and awesome prototyping board in my store http://tindie.com/stores/DrAzzy

travis_farmer

Hmm, thanks for that tidbit DrAzzy, great idea! my server rack fan controller has an embedded webpage for monitoring and configuration. but it could be far more efficient if it only had to deliver the data only. and my main server handles the "grunt work".

+1 for the idea :D

~Travis
Current Obsession: Ham Radio, and my CNC Router
Check out my website, i have my own forum on my hobby server.

Robin2

#3
Mar 07, 2017, 10:56 pm Last Edit: Mar 08, 2017, 09:34 am by Robin2
That said - I tend to use a somewhat different paradigm ....
While the details are very different that concept sounds the same as the way I use Python with the Bottle web framework. The Bottle part serves up the web pages and other parts of the Python code communicate with the Arduino to send and receive data - in my case, over the USB cable.

Using HTML, CSS and a little Javascript (with JQuery) makes it very easy to create a GUI.

And I also like the w3schools website.

...R
Edited to mention JQuery, which I had overlooked, and which makes Javascript much simpler
Two or three hours spent thinking and reading documentation solves most programming problems.

xl97

* I'd be careful about w3schools..... many have dub'd them w3fools.   (I believe because they either have not updated or provide erroneous knowledge at times).

That being said.. I have used many examples from them without issue  (I guess it depends on what your looking for)

There are so many HTML resources out there.. just google and pick one.

Codecademy has a nice lesson structure to it:

https://www.codecademy.com/learn/learn-html-css

IMHO..  start with HTML 5 and CSS, learn the proper way to make efficient webpages..
* (and then forget it all if you ever have to make HTML emails!)  lol

Javascript (not to be confused with JAVA) and jQuery would be the next building blocks IMO..







Babar_Latif

Thanks xl97,

I being only a newbie and hobbyist are trying to juggle with different GUIs to work from Chrome browser.
.
Problem that I have is, when I try to plug the standard html statements into Arduino IDE, it gives errors and errors.
.
So came to think, as if there is some different kind of html for embedded stuff or something like that ...... why the standard html won't work in this case, need a clue, Thanks.

Babar_Latif

DrAzzy,

Here's a statement of standard html; <input type="button" name="ok" value="OK" />

However, when I try to plug it in Arduino IDE sketch code ...... I get nothing but error ... (I do print it to client by adding client.println(" ...... ...... ") ??

There isn't any help from the Arduino Reference also.

I am newbie / hobbyist ..... so you know :)

travis_farmer

DrAzzy,

Here's a statement of standard html; <input type="button" name="ok" value="OK" />

However, when I try to plug it in Arduino IDE sketch code ...... I get nothing but error ... (I do print it to client by adding client.println(" ...... ...... ") ??

There isn't any help from the Arduino Reference also.

I am newbie / hobbyist ..... so you know :)
did you escape the quotes in the html with a back-slash ( \ )?

~Travis
Current Obsession: Ham Radio, and my CNC Router
Check out my website, i have my own forum on my hobby server.

Robin2

Here's a statement of standard html; <input type="button" name="ok" value="OK" />

However, when I try to plug it in Arduino IDE sketch code
Post the actual line of Arduino code that you are trying to use.

@travis-farmer's comment may well hold the solution

...R
Two or three hours spent thinking and reading documentation solves most programming problems.

Babar_Latif

Post the actual line of Arduino code that you are trying to use.

@travis-farmer's comment may well hold the solution

...R
Hi Robin2,

Here's how I tried to code it in the sketch:

Original HTML statement: 

<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>


Coded in the Sketch: 

client.println("<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>");

Is there a good source to learn the Syntax to code html for Arduino IDE ??


Robin2

#10
Mar 17, 2017, 09:38 am Last Edit: Mar 17, 2017, 09:39 am by Robin2
Coded in the Sketch:  
Code: [Select]
client.println("<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>");
The problem is not a HTML problem but due to your lack of knowledge of C++. Indeed I think the problem would also arise in any language, including in more complesx HTML

The problem is that the second double-quote matches the first one and is interpreted as the end of that piece of text. That leaves the text http://www.tutorialspoint.com" target= dangling in the breeze.

If you want to include double-quote characters in your text you must "escape" them by preceding them with a backslash like this (as suggested earlier by @travis-farmer)
Code: [Select]
client.println("<a href=\"http://www.tutorialspoint.com\" target=\"_self\">Tutorials Point</a>");

...R
Two or three hours spent thinking and reading documentation solves most programming problems.

Babar_Latif

The problem is not a HTML problem but due to your lack of knowledge of C++. Indeed I think the problem would also arise in any language, including in more complesx HTML

The problem is that the second double-quote matches the first one and is interpreted as the end of that piece of text. That leaves the text http://www.tutorialspoint.com" target= dangling in the breeze.

If you want to include double-quote characters in your text you must "escape" them by preceding them with a backslash like this (as suggested earlier by @travis-farmer)
Code: [Select]
client.println("<a href=\"http://www.tutorialspoint.com\" target=\"_self\">Tutorials Point</a>");

...R
Thanks Robin2,

You are right, I barely have any significant knowledge of C / C++ (though continuing as much as an hobbiyst can :) ). Escaping double quotes with backslashes worked out perfect.
.
I need further help on identifying the variable that changes by clicking text / button on the client side. Once I know the variable, rest I can handle.
Thanks

Robin2

#12
Mar 17, 2017, 11:54 pm Last Edit: Mar 17, 2017, 11:55 pm by Robin2
I need further help on identifying the variable that changes by clicking text / button on the client side. Once I know the variable, rest I can handle.
Maybe I missed something earlier but that sounds a lot like "how do I adjust the seat on my 1963 car" :)

...R
Two or three hours spent thinking and reading documentation solves most programming problems.

Babar_Latif

Maybe I missed something earlier but that sounds a lot like "how do I adjust the seat on my 1963 car" :)

...R
You are not wrong, but I tried to find the lever to adjust that seat and couldn't ...... :(

Robin2

You are not wrong, but I tried to find the lever to adjust that seat and couldn't ...... :(
The point I was trying to get you to appreciate is that you did not provide enough information with the question in Reply #11

...R
Two or three hours spent thinking and reading documentation solves most programming problems.

Go Up