ESP8266 Community Forum

- Sat Oct 31, 2015 1:38 am #32659 Hey all, I've been working on expanding on a project done by Randomnerd (thanks Rui), that will control gpio pins via wifi. The program supplied works fine but I wanted to experiment and maybe expand it. In its original state it controls 2 gpio pins with "on/off" buttons. My first issue was that I couldn't see the small buttons on my cell phone. So to start I added a css style of size(width and height), and font size within the HTML button element. Those worked (yay). So then I thought "hey how about colored buttons", green for on, and red for off. When I added that, the ESPlorer compiler error-ed with "unexpected symbol" (with no real indication of where except "near" the line I was in (duh)). I've been stuck on this for a while. I've tried escaping special characters all different ways without any luck. I have found if I remove one of the attributes in the style (either width and height, or font size), and replace it with background-color, it works, but I can't get all attributes to go. Here is a snippet of where the issue is.

Code: Select all       end
        end
        buf = buf.."<h1> ESP Web Controller</h1>";
        buf = buf.."<p>Switch 1 <a href=\"?pin=ON1\"><button style= \"width:150px;height:150px;font-size:100px;>On</button></a>&nbsp;<a href=\"?pin=OFF1\"><button style= \"width:150px;height:150px;font-size:100px;>Off</font></button></a></p>";
        buf = buf.."<p>Switch 2 <a href=\"?pin=ON2\"><button style= \"width:150px;height:150px;font-size:100px;>On</button></a>&nbsp;<a href=\"?pin=OFF2\"><button style= \"width:150px;height:150px;font-size:100px;>Off</font></button></a></p>";
        local _on,_off = "",""

Note that these lines build a string in a buffer which is sent to the calling browser. When I add "background-color:green" to the css style It won't compile. However if I replace one of the other attributes with it, it will compile. I might also mention that the same code written in an HTML editor (without the escaped characters) works fine when viewed in a browser. Anyone know where am I going wrong?

- Mon Dec 21, 2015 2:32 am #36877 flagtrax,

First thing, if I may ask you to format the post better next time. It is just a huge block of text with a lot of information crammed in. Not saying I havn't done that before when going down a rabbit hole

Second, I have no idea. When I have been using HTML in the Lua it goes all kinds of wonky. I am assuming it is just running out of space.

SO here is a gotcha you may know of... buf uses HTML5 with CSS3; where as, conn:send uses HTML4 with inline only because of the way it reads.

I know I have experimented with this before and I believe I just put CSS above the buttons in the heading of the HTML using <style> tags and not inline CSS. Have you tried styling the buttons that way?

Also, another gotcha is that the ESP8266 doesn't handle styling well. If you go too far down this path the ESP8266 will eventually just stop loading code when you send it (not bricking just won't take any more code)... It just hates it. I ended up just creating an IIS web-server on my desktop with a web page that just send AJAX commands to the specified ESP8266.