ESP8266 Community Forum

Posted: **Wed Feb 11, 2015 10:09 am**

I found a jQuery Mobile Interface Builder and wanted to share it.

https://01.org/rib/online/

Here is a sample design made in a few minutes:

And the generated html code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title>title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/jquery-1.6.4.js"></script>
        <script src="lib/jquery.mobile-1.1.0.js"></script>
        <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet" />
        <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet" />
    </head>
    
    <body>
        <div data-role="page" id="main" data-title="RGB Controller">
            <div data-role="header">
                <h1>RGB Controller</h1>
            </div>
            <div data-role="content">
                <form action="" method="GET">
                    <div data-role="fieldcontain" id="r1">
                        <label for="r1-range">Red:</label>
                        <input type="range" id="r1-range" value="0" min="0" max="1023" step="1"
                        data-highlight="true" />
                    </div>
                    <div data-role="fieldcontain" id="g1">
                        <label for="g1-range">Green:</label>
                        <input type="range" id="g1-range" value="511" min="0" max="1023" step="1"
                        data-highlight="true" />
                    </div>
                    <div data-role="fieldcontain" id="b1">
                        <label for="b1-range">Blue:</label>
                        <input type="range" id="b1-range" value="1023" min="0" max="1023" step="1"
                        data-highlight="true" />
                    </div>
                    <a data-role="button" class="ui-btn-active" data-theme="a">Set RGB Values</a>
                </form>
            </div>
            <div data-role="footer" data-position="fixed">
                <h1>Copyright © 2015 Özay Turay a.k.a Simon</h1>
            </div>
        </div>
    </body>

</html>

Hope it helps with your UI designs.

Posted: **Wed Feb 11, 2015 3:15 pm**

Nice but only works with chrome type browsers.

Posted: **Wed Feb 11, 2015 3:49 pm**

Yes, and you can also run it locally (with or without a local webserver) and it is open source.

https://01.org/rapid-interface-builder

https://github.com/01org/rib

But the point is generated html code is so small that you can integrate it in your lua or whatever code for the ESP8266 and the page served from the module can run from a lot of browsers on a lot of platforms jQuery & jQuery Mobile supports.

You must let the browser to load script and stylesheet files from jQuery.com to save space on the module:

Code: Select all

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

Posted: **Wed Sep 02, 2015 1:03 pm**

Thank you for the tip. It saved me a lot of time! :geek:

ESP8266 Community Forum

Rapid Interface Builder (jQuery Mobile)

Rapid Interface Builder (jQuery Mobile)

Re: Rapid Interface Builder (jQuery Mobile)

Re: Rapid Interface Builder (jQuery Mobile)

Re: Rapid Interface Builder (jQuery Mobile)