Chat freely about anything...

User avatar
By ozayturay
#9474 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:

Image

And the generated html code:

Code: Select all<!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. :)
User avatar
By ozayturay
#9501 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" />