ESP8266 Community Forum

- Wed Apr 19, 2017 5:52 am #65063 Hello,

Apologies if this has been covered before. Just after a quick tutorial or getting started for adding HTML and Javascript to my app. I am from a web page developer background so was wondering if things like jquery etc is actually possible with ESP8266 BASIC?

Does anyone know of a good tutorial that covers adding HTML, CSS and javascript to you programs.

Thanks,

Jason

- Wed Apr 19, 2017 9:13 am #65071

Apologies if this has been covered before. Just after a quick tutorial or getting started for adding HTML and Javascript to my app.

Tracker J offers a javascript Beep example which may help to get you going:
http://www.esp8266-projects.com/2016/10/esp-basic-tutorial-beep-button.html

Does anyone know of a good tutorial that covers adding HTML, CSS and javascript to you programs.

No mate - web interfacing is a very important aspect of Esp_Basic which has a variety of relevent commands available that mostly have a minimal accompanying example, but I'm afraid they don't have additional alternative examples or additional broader explanations to those given, nor are there any general tutorial guidelines for bringing things together.
Mmiscool is the best guy to help you, but in the meantime I've included some example links and 'webby' commands that may be of interest.

http://www.esp8266.com/viewtopic.php?f=40&t=7056
https://www.esp8266basic.com/css-example.html
http://www.esp8266.com/viewtopic.php?f=39&t=12361
http://www.esp8266.com/viewtopic.php?f=40&t=13348
https://www.esp8266basic.com/msg-url-usage.html
https://www.esp8266basic.com/msg-url-advanced.html
http://www.esp8266.com/viewtopic.php?f=40&t=7162
http://www.esp8266.com/viewtopic.php?f=40&t=9841

HTMLID():
The html id function will return the randomly generated id for the last gui object created. Useful for javascript interaction capabilities.
htmlid()

CSSID:
The cssid command will apply css to the desired item by id. This should be executed immediately after creating a gui object.
Example:
cssid htmlid(), "background-color: yellow;"

CSSCLASS:
The cssclass command will apply css to the desired class of gui objects.
Example: Will set all buttons to color yellow.
cssclass "button", "background-color: yellow;"

JAVASCRIPT:
Will allow you to include javascript files in your page. File must be uploaded to the device using the file manager.
javascript {filename}

CSS:
Will allow you to include css files in your page. File must be uploaded to the device using the file manager.
See the CSS example here.
css {filename}

JSCALL:
Will allow for execution of javascript in the web browser for the purpose of calling a function is a javascript file included with the javascript command.
jscall {function name}
Example:
Javascript "beep.js" 'include the js file in the web page
Jscall "beep" 'call the beep function from the javascript loaded in the page.

WEB MSG HANDLER COMMANDS
Msg handler events will only be handed when there is a request at the url http://device ip/msg? is used.
See example /msg-url-usage.html for more information.

MSGBRANCH:
Will set the branch for handling msg input urls. This branch will execute when the url "ESP-IP-address/msg?" is accessed.
msgbranch {branch label}

MSGGET({url arg}):
Will retrieve a url argument and place it in a variable.
Bla = msgget({url arg})
Example:
Will retrieve the url argument "color" and place it into myColorVar
Use browser to access "ESP-IP-address/msg?color=blue"
myColorVar = msgget("collor")

MSGRETURN:
Will set the text to be returned by the browser. No additional html is provide. Will overwrite previous return text if called more than once. Text will be returned when interpreter encounters the wait command.
msgreturn {variable name or string for return}

Where to get modules?

https://www.banggood.com/custlink/KvGGhGF4wG

- Thu Apr 20, 2017 4:02 am #65087 Great reply Electroguard thanks very much