When I started to prototype a
remixerator, I created a simple form front-end using simple html and JQuery.
Here's the head. I used
this nice css theme generator to get an aesthetic that worked, put in a few of my own tweaks, and imported the necessary JQuery files. In my particular form, I liked the idea of having "sections" as tabs, and "subsections" represented by the accordion layout. When using accordions inside tabs, make sure to bring in accordions FIRST and tabs SECOND or else they won't render correctly.
<head>
<title>Remixerator Prototype</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/overall.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
$("#RemixPostForm").submit(function(e){
console.log("Entering Submit");
$.post('http://localhost:8080/handler.html', function(data) {
console.log("Entering Submit Callback");
});
});
});
</script>
</head>
Now for the body. Tabs are represented as a list with ids, and each tab's content is a div with a matching id. Otherwise, this is pretty standard html form stuff. I spent [too much] of my time dealing with css issues with this form.
<body>
<form id="RemixPostForm">
<!-- Tabs -->
<h2 class="demoHeaders">Remixerator</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-wall">Wallpaper</a></li>
<li><a href="#tabs-apps">Applications</a></li>
<li><a href="#tabs-create">Create</a></li>
</ul>
<div id="tabs-wall">
<h3>First, select your wallpaper.</h3>
<div id="wallpaper_table" align = "center">
<table id="imagegrid" border="0" width="400">
<tr>
<td align="center"><img src="images/ritwallpaper.jpg" alt="gallery thumbnail" height = "80" width = "120"/></td>
<td align="center"><img src="images/f15wallpaper.png" alt="gallery thumbnail" height = "80" width = "120"/></td>
</tr>
<tr>
<td align="center"><input type="radio" name="ritwallpaper_cb" id="ritwallpaper_cb" checked="checked"/></td>
<td align="center"><input type="radio" name="f15wallpaper_cb" id="f15wallpaper_cb"/></td>
</tr>
</table>
</div>
</div>
<div id="tabs-apps">
<h3>Next, choose the applications you want.</h3>
<div id="accordion">
<div>
<h3><a href="#">Office and Text</a></h3>
<div>
<input type="checkbox" name="vim_cb" id="vim_cb"/>Vim<br>
<input type="checkbox" name="emacs_cb" id="emacs_cb"/>Emacs<br>
<input type="checkbox" name="nano_cb" id="nano_cb"/>Nano<br>
<input type="checkbox" name="libre_cb" id="libre_cb"/>Libreoffice<br>
</div>
</div>
<div>
<h3><a href="#">Video, Images, and Music</a></h3>
<div>
<input type="checkbox" name="inkscape_cb" id="inkscape_cb"/>Inkscape<br>
<input type="checkbox" name="gimp_cb" id="gimp_cb"/>Gimp<br>
<input type="checkbox" name="dia_cb" id="dia_cb"/>Dia<br>
<input type="checkbox" name="banshee_cb" id="banshee_cb"/>Banshee<br>
</div>
</div>
<div>
<h3><a href="#">Communication and Internet</a></h3>
<div>
<input type="checkbox" name="firefox_cb" id="firefox_cb"/>Firefox<br>
<input type="checkbox" name="elinks_cb" id="elinks_cb"/>ELinks<br>
<input type="checkbox" name="midori_cb" id="midori_cb"/>Midori<br>
<input type="checkbox" name="pidgin_cb" id="pidgin_cb"/>Pidgin<br>
</div>
</div>
<div>
<h3><a href="#">Utility</a></h3>
<div>
<input type="checkbox" name="zsh_cb" id="zsh_cb"/>Z-Shell<br>
<input type="checkbox" name="git_cb" id="git_cb"/>Git<br>
<input type="checkbox" name="htop_cb" id="htop_cb"/>Htop<br>
<input type="checkbox" name="powertop_cb" id="powertop_cb"/>Powertop<br>
<input type="checkbox" name="screen_cb" id="screen_cb"/>Screen<br>
<input type="checkbox" name="wine_cb" id="wine_cb"/>Wine<br>
</div>
</div>
<div>
<h3><a href="#">Fun and Games</a></h3>
<div>
<input type="checkbox" name="nethack_cb" id="nethack_cb"/>Nethack<br>
</div>
</div>
</div>
</div>
<div id="tabs-create">
<h3>Now click the button below to start making your remix.</h3>
<input type="submit" value="Go!" name="start_button" id="start_button" />
</div>
</div>
</form>
</body>
Lastly, the twisted bits. I simply created a simple service, server.py, which hosted the form, and had the handler.
from twisted.web import static, http, resource, server
from twisted.web.server import Site
from twisted.web.static import File
from twisted.internet import reactor
from twisted.web.resource import Resource
import cgi
import sys
class FormPage(Resource):
isLeaf = True
allowedMethods = ('GET', 'POST')
def __init__(self):
resource.Resource.__init__(self)
def render_GET(self, request):
return self.render_POST(request)
def render_POST(self, request):
#Modify Kickstart, do validation
return '<html><body>ISO Created!</body></html>'
if __name__ == "__main__":
root = static.File('/Users/eitanromanoff/Documents/github/Remixerator')
indexPage = Resource()
formHandler = FormPage()
root.putChild('index.html', indexPage)
root.putChild('handler.html', formHandler)
reactor.listenTCP(8080, server.Site(root))
reactor.run()
