Simple LEDs and Buttons Website - Page 1
Forum section: electronics / general

author: rcbuck
author_rank: Frequent Contributor
timestamp: December 22, 2016, 03:11:39 am
content: Looks like this is the place since this question doesn't fit any of the electronics related sub-forums.I am designing an Ethernet board (actually already done) and it will be accessed through a browser. What is the most simple website builder tool that can be used to create a set of buttons and LED indicators?I will have 4 buttons, 4 LEDs, and 4 labels. The LEDs obviously would just be circles that color could be applied to. Red would indicate off and green would indicate on. The buttons, LEDs, and labels would sit next to each other in 4 rows. When a button is clicked, I would do a submit to the webpage and toggle the state of the LEDs.I know how to capture and handle the data once it is submitted to the board. I just need a quick and dirty way to create the webpage. I have an older copy of Dreamweaver that I used a few years back to create a website. I don't remember much about how to use it but I think it would be overkill anyway.

author: imidis
author_rank: Frequent Contributor
timestamp: December 22, 2016, 03:49:27 am
content: Hmm, I use notepad++. Since most sites are generally php etc, the webpage design programs don't really help much, I suppose there is microsofts expression web 4. Little out of date but free.

author: rcbuck
author_rank: Frequent Contributor
timestamp: December 22, 2016, 06:21:54 am
content: This will be a website embedded in a PIC18F6760 so it has to be small. That probably means basically html code. PHP will not be running on the procssor.

author: tpowell1830
author_rank: Frequent Contributor
timestamp: December 22, 2016, 07:11:26 am
content: Well, the first question is: How is your code going to interface with the html page?Second question: Can your code load a html page?If all of the above is possible then html is easy. Create the pages you need and load them as your code requires. Notepad or a text based editor is all that you need to write html.There are plenty of tutorials for html on the internet.PEACE===>T

author: Wilksey
author_rank: Super Contributor
timestamp: December 22, 2016, 12:42:55 pm
content: Try this:https://html-online.com/

author: ebclr
author_rank: Super Contributor
timestamp: December 22, 2016, 01:54:53 pm
content: Chek thishttp://www.ti.com/lit/ml/spmz858/spmz858.pdfhttp://www.ti.com/tool/ek-tm4c1294xlhttps://youtu.be/JpGNNCYjtFw

author: rcbuck
author_rank: Frequent Contributor
timestamp: December 22, 2016, 05:23:31 pm
content: tpowell, interfacing to the html page won't be a problem. Once the page is created, it is ran through a conversion program that puts it in a format the processor understands. I did this for a project a couple of years ago. I had someone where I worked create the page and then I ran the conversion process. I don't know anyone who can create the page now and I was trying to do it myself but I am not a web programmer.Wilksey, I looked at the site and will give it a try. If that doesn't work, maybe I can find another online tutorial as tpowell suggests. The requirements seem simple enough, just 3 circles, buttons, and text boxes. I don't need any graphics or anything fancy.

author: cdev
author_rank: Super Contributor
timestamp: December 22, 2016, 05:33:45 pm
content: "CGI" ?

author: rcbuck
author_rank: Frequent Contributor
timestamp: December 22, 2016, 07:54:55 pm
content: There are no script engines running on the PIC. Everything has to be self contained.I looked at the files the were created for my previous project. There is a index.htm, oneColLiqCtr.css, button1.swf, and button2.swf file. That website had two buttons, a text message that indicated whether a relay was open or closed, and some miscellaneous text.So maybe I can use Dreamweaver to create the page. I know it uses css for the layouts. Time to look for a Dreamweaver tutorial online.

author: Wilksey
author_rank: Super Contributor
timestamp: December 22, 2016, 10:14:24 pm
content: You can use CSS to make buttons etc, this is rendered by the browser, not the server.

author: tpowell1830
author_rank: Frequent Contributor
timestamp: December 22, 2016, 11:14:22 pm
content: Quote from: rcbuck on December 22, 2016, 07:54:55 pmThe swf file extension is for shockwave flash, now you are getting deeper in order to run these.PM me offline a simple paint picture or a snapshot of a napkin that you hand drew of what you want and I will send a simple page that will get you started, including the CSS. Some explanation of what you want to happen would also help.PEACE===>T