notebook.community

Edit and run



In [1]:

    
import sys
sys.path.append("..")

from ParseTree import *
from BasicHTMLGenerator import *
from CSSHTMLGenerator import *
from BootstrapHTMLGenerator import *

import json

def VisualParse(json_filepath):
    object_tree = json.load(open(json_filepath, 'r'))
    return doParse(object_tree)

def doParse(vnode):
    jbbox = vnode['bbox']
    bbox = RelativeBoundingBox(int(jbbox['offsetX']),int(jbbox['offsetY']),int(jbbox['width']),int(jbbox['height']))
    thisnode = VisualNode(vnode['parent'], vnode['type'], bbox)
    for cnode in vnode['children']:
        thisnode.addNewChild(doParse(cnode))
    return thisnode

def writeHTMLToFile(html,filename):
    with open(filename,"w") as f:
        f.write(html)



In [6]:

    
test_json_file = "test3.json"



In [7]:

    
VisualTree = VisualParse(test_json_file)
hTMLTree = HTMLTree(VisualTree)
html = HTMLGenerate(hTMLTree,BasicHTMLGenerator())
print html
writeHTMLToFile(html,"basic.html")









    



<!DOCTYPE html><html lang='en'><head><title>A First Draft</title></head><body><div style='border: dashed; width: 1024px; height: 768px'><div ><img src='http://lorempixel.com/1024/30/cats' ></img><div style='background-image: url("http://lorempixel.com/400/70/city")' >Lorem Ipsum</div><input type='text' ><button type='submit' value='submit' >Submit</button></div></div></body></html>



In [8]:

    
VisualTree = VisualParse(test_json_file)
hTMLTree = HTMLTree(VisualTree)
html = HTMLGenerate(hTMLTree,CSSHTMLGenerator())
print html
writeHTMLToFile(html,"css.html")









    



<!DOCTYPE html><html lang='en'><head><title>A First Draft</title> <style type='text/css'>#aa { 
position: absolute;
top: 0px;
height: 768px;
width: 1024px;
left: 0px;
}

#aada { 
position: absolute;
top: 200px;
height: 40px;
width: 70px;
left: 820px;
}

#aaba { 
position: absolute;
top: 100px;
height: 70px;
width: 400px;
left: 300px;
}

#aaca { 
position: absolute;
top: 200px;
height: 40px;
width: 700px;
left: 100px;
}

#aaaa { 
position: absolute;
top: 0px;
height: 30px;
width: 1024px;
left: 0px;
}

#aabaaa { 
position: absolute;
top: 10px;
height: 30px;
width: 50px;
left: 10px;
}

</style> </head><body><div style='border: dashed; width: 1024px; height: 768px'><div id='aa'><img src='http://lorempixel.com/1024/30/cats' id='aaaa'></img><div style='background-image: url("http://lorempixel.com/400/70/city")' id='aaba'>Lorem Ipsum</div><input type='text' id='aaca'><button type='submit' value='submit' id='aada'>Submit</button></div></div></body></html>



In [9]:

    
VisualTree = VisualParse(test_json_file)
hTMLTree = HTMLTree(VisualTree)
html = HTMLGenerate(hTMLTree,BootstrapHTMLGenerator())
print html
writeHTMLToFile(html,"bcss.html")









    



<!DOCTYPE html><html lang='en'><head><title>A First Draft</title> <link href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'><script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> <style type='text/css'>#aa { 
position: absolute;
top: 0px;
height: 768px;
width: 1024px;
left: 0px;
}

#aada { 
position: absolute;
top: 200px;
height: 40px;
width: 70px;
left: 820px;
}

#aaba { 
position: absolute;
top: 100px;
height: 70px;
width: 400px;
left: 300px;
}

#aaca { 
position: absolute;
top: 200px;
height: 40px;
width: 700px;
left: 100px;
}

#aaaa { 
position: absolute;
top: 0px;
height: 30px;
width: 1024px;
left: 0px;
}

#aabaaa { 
position: absolute;
top: 10px;
height: 30px;
width: 50px;
left: 10px;
}

</style> </head><body><div style='border: dashed; width: 1024px; height: 768px'><div id='aa'><img src='http://lorempixel.com/1024/30/cats' id='aaaa'></img><div style='background-image: url("http://lorempixel.com/400/70/city")' id='aaba'>Lorem Ipsum</div><input type='text' id='aaca'><button type='submit' value='submit' id='aada'>Submit</button></div></div></body></html>



In [5]:



In [ ]: