ESP8266 Community Forum

- Sun Nov 15, 2015 1:04 pm #34083 Hello,

One of the things that was previously lacking with esp8266 basic was the ability to style the gui widgets with out much work.

I added a new command to v1.39 today that makes this easier.

To use it you must first upload the CSS file to your device using the file manager page. I uploaded a file called "test.css"

To use the CSS in your program you can now use the following code.

Code: Select allcss "test.css"
textbox test 1
dropdown "1,2,3,4,5" test2
button "Click me" [branch]
wait

[branch]
print "You clicked me"
wait

For the CSS file I uploaded:

Code: Select allbutton, input[type="button"], input[type="submit"] {
   border-top: 1px solid #96d1f8;
   background: #000000;
   background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#000000));
   background: -webkit-linear-gradient(top, #0099ff, #000000);
   background: -moz-linear-gradient(top, #0099ff, #000000);
   background: -ms-linear-gradient(top, #0099ff, #000000);
   background: -o-linear-gradient(top, #0099ff, #000000);
   padding: 20px 40px;
   -webkit-border-radius: 31px;
   -moz-border-radius: 31px;
   border-radius: 31px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 24px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
}


select {
  font-size: 32px;
}


input {
    border: 5px solid white;
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

You do not have the required permissions to view the files attached to this post.

Serial terminal in the chrome browser see https://serialTerminal.com

http://esp8266basic.com
A BASIC interpreter for your ESP

Working now on Autodrop3d. A 3d printer with automatic part ejection system. https://autodrop3d.com