main.py
- This file holds the interface commands (see Programming With WebGen) used to create, organize, and export files. Run this file to start your WebGen interface and begin programming.modules.py
- This file contains the modular python commands (see Programming With WebGen) used to create HTML elements with Python. To add a new custom HTML element, create a new class. Assign custom style properties, such as "position" or "background_color" (underscores are used instead of hyphens). Include ac()
function to be called to compile the element. Thec()
function should return an HTML element as a string.comp.py
- This file contains the code used to compile the Python files created in the WebGen interface into HTML. Using thec()
functions defined inmodules.py
, the head and body of the HTML document is created, including external JavaScript, CSS, and PHP scripts.
- Download the WebGen Repository. Run main.py with the IDE of your choice. The WebGen interface should appear in your console.
- Use the
f(folder, filename)
command to create a new project namedfolder
with the webpage namedfilename
. - Use the
e
command to start editing your webpage. This command should create a new Python file and open it for editing. - Create HTML objects by assigning Python variables to class objects with the format
html_element = mx.C()
, whereC()
is the div container class andmx.
refers to the imported modules file. For a list of classes available, use thelm
command in the WebGen console interface. - Assign content to your HTML objects with nested lists and strings. For more information on content assignment, see the Modular Commands section below.
- Edit style properties of your HTML content by using the syntax
html_element.property = "value"
. For a list of default properties applied to a class, use themod m
command, wherem
is the class in reference. For more information on property assignment and property defaults, see the Modular Commands section below. - Use the
r
command to compile and load your webpage your browser. - Use the
css
andjs
commands to create CSS and JavaScript files to be compiled with your HTML webpage. - Use the
exit
command to return to the main WebGen interface. From here, you can change to another project, webpage file, or create a global file. - When ready to export your webpages, use the
exportf(filename, destination)
orexport(destination)
explained in detail in the programming with WebGen section below.
Example Webpage with WebGen: See the Compiled HTML Page
This code is available in [files > example > example_page] of this repository as example_page.py
.
import modules as mx
import sys
import os
homedir = os.getcwd() + r'/files/Portfolio/'
sys.path.append(homedir)
data = mx.Data()
body = mx.Body()
### OBJECTS ###
nav = mx.Nav()
nav_title = mx.T()
nav_space = mx.X() # Custom HTML space
page_content = mx.C()
heading = mx.T()
subheading = mx.T()
paragraph = mx.T()
gitHub_link = mx.Link()
gitHub_linkText = mx.T()
### CONTENT ###
body.content = [nav, page_content] # Assign containers to body content
nav.content = [[nav_title, nav_space]]
nav_title.content = "WebGen Example"
# Create three nav option links named "nav_option_i"
text_content = ["WebGen Github","Creator's Portfolio","Contact Creator"]
src_content = ["https://github.com/drebarrera/WebGen/","https://www.drebarrera.com","https://www.drebarrera.com/contact"]
for i in range(1,4):
objName = "nav_option_"+str(i)
exec(objName + ' = mx.Link()') # 1. Create link object
exec(objName + 'Text = mx.T()') # 2. Create text object
exec(objName + 'Text.content = "' + text_content[i - 1] + '"') # 3. Assign text_content[i - 1] to text object
exec(objName + '.content = [' + objName + 'Text]') # 4. Assign text object to link object content
exec(objName + '.cl = "button buttonRed"') # 5. Assign button classes to link object
exec(objName + '.src = "' + src_content[i - 1] + '"') # 6. Assign source to link object
exec('nav.content[0].append('+ objName +')') # 7. Append link object to nav content
page_content.content = [heading, subheading, paragraph, gitHub_link] # Assign objects to page content
heading.content = "Hello World"
subheading.content = "Webpage Made With WebGen"
paragraph.content = "This webpage was made with WebGen - a custom Python to User Interface compiler with the goal of making website and app design cleaner and more efficient.\nFor more information about WebGen, visit the link below."
gitHub_link.content = [gitHub_linkText]
gitHub_linkText.content = "WebGen GitHub"
### PROPERTIES ###
# Nav Components
nav.id = "nav"
nav.background_color = ""
nav.tableid = "navTable"
nav_title.type = "h1"
# Page Components
page_content.id = "pageContent"
page_content.background_color = ""
heading.type = "h2"
subheading.type = "h3"
subheading.color = "#005580"
subheading.font_weight = "500"
paragraph.padding = "10px"
paragraph.line_height = "1.2"
gitHub_link.cl = "button buttonBlue"
gitHub_link.src = "https://github.com/drebarrera/WebGen/"
This code is available in [files > example > example_page] of this repository as example_page.css
.
body {
display: flex;
justify-content: center;
}
p, h1, h2, h3 {
margin-block-start: 0px;
margin-block-end: 0px;
}
.button {
position: relative;
display: inline-block;
padding: 1.25vh;
border-radius: 1vh;
cursor: pointer;
color: white;
text-decoration: none;
font-size: 1.75vh;
margin: 1vh;
margin-left: 1.5vh;
margin-right: 1.5vh;
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.25));
}
.buttonRed {
background-color: #ff5938;
border: 2px solid #ff5938;
}
.buttonRed:hover {
background-color: white;
color: #ff5938;
}
.buttonBlue{
background-color: #005580;
border: 2px solid #005580;
}
.buttonBlue:hover{
background-color: white;
color: #005580;
}
#nav {
display: flex;
justify-content: center;
width: 100vw;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
#navTable_0_0{
text-align: center;
}
#navTable_0_1 {
width: 6vw; /* Adjust the nav_space size */
}
#pageContent {
border: 2px solid #005580;
padding: 25px;
margin-top: 100px;
max-width: 700px;
width: 90vw;
position: absolute;
}
- Interface Commands - Commands used to create, organize, and export files.
- Modular Python Commands - Python commands used to create HTML elements and adjust style properties within files.
- Global Programming - Programming used to implement JavaScript, CSS, and PHP into compiled webpages.
help
- General help command. Using this command will list the options for selection and instruction.f(folder, filename)
- Open or create and open (if the file does not already exist) a file.folder
is the project name, whilefilename
is the name of the page to be created. Once opened, the WebGen interface will switch to accepting File Commands (see File Commands).gf(folder, global_filename)
- Similar tof(folder, filename)
, this command will open or create and open a global file. A global file is a file under the namefilename
, which is accessible to all of the pages within the project folder,folder
by importing with the commandfrom global_filename import *
within individual Python scripts. Global files cannot be individually compiled with ther
command (see File Commands). PHP scripts are exclusively included via global files (see FAQs).fdir
- This command opens the file directory where WebGen is held.kill(folder)
- The kill command is used to completely delete a project with the namefolder
. This includes all webpages, global files, and other content associated with the project. Once performed, the effects of this command are final.exportf(folder, destination)
- The export command will export an entire project with the namefolder
to the file location input asdestination
. The file will be exported as a zip file. When referencing the destination path, make sure to prepend with the letter r, like so:r"THIS\IS\A\PATH"
exit
- The exit command is used to exit a file and return to the WebGen interface or quit the WebGen interface and end the program.restart
- The restart command is used to exit the WebGen interface and end the program.
e
- The edit command,e
, is used to edit the Python file used to define HTML elements. When using the edit command, a document window will be generated for Python coding. Every Python webfile requires the content generated on first use of the command (except for the comments). While the assignmentsdata
andbody
define the head and body elements of the HTML document, the comments,### OBJECTS ###
,### CONTENT ###
,### PROPERTIES ###
are used to structure your code. See more below:### OBJECTS ###
- The Objects section is typically used to define the modular assignments used within the Python script. For example,nav = mx.C()
defines a Container object referred to asnav
and would be written in this section.### CONTENT ###
- The Content section is typically where object content is assigned. Continuing from the previous example, this section would be where we would apply the codebody.content = [nav]
, placing thenav
container within thebody
element of the page.### PROPERTIES ###
- The Properties section is typically where object style properties is assigned. Continuing from the previous examples, this section would include statements such asnav.background_color = "red"
where the style of thenav
container includes a red background color.css
- The CSS command creates a css document to be automatically linked to the HTML page generated by the Python document. If the Python document associated with the CSS document is a global file, the global file must be imported to the main file to use the global file with the commandfrom global_filename import *
. (do not include file extensions)js
- The JavaScript command creates a JavaScript document to be automatically linked to the HTML page generated by the Python document. If the Python document associated with the JavaScript document is a global file, the global file must be imported to the main file to use the global file with the commandfrom global_filename import *
. (do not include file extensions)php
- The PHP command creates a PHP document associated exclusively with global files. Because the PHP document is associated with a global file, the global file must be imported to the main file to use the global file with the commandfrom global_filename import *
(do not include file extensions).fdir
- This command opens the file directory where the project operated on is held.images
- This command opens or creates and opens (if the file doesn't already exist) the file directory where images and other media elements are stored for developmental use. Use the source url "../images/image_name.jpg" to add media to elements within a Python or CSS file.lgf
- This command lists all global files associated with the given project. In order to add a global file to a given webpage, use the codefrom global_filename import *
in the Python document.lm
- This command lists all object classes to create HTML element with Python. Classes should be prepended withmx.
in Python files to reference the imported module file. For example, creating a text element would be done within a Python document with the codetext_elem = mx.T()
.mod m
- This command lists all the default object properties associated with classm
. To change a property's value, simply reassign the property for the given object assignment. For example, given a text element,text_elem = mx.T()
, changing its color would be done withtext_elem.color = "red"
. Properties using hyphenation, such asbackground-color
replace the hyphen with an underscore in Python scripts (ie.background_color
).r
- The refresh command,r
compiles the Python document along with its dependencies and opens the compiled HTML webpage in a browser. This command is used to refresh the browser page when changes have been made to the Python document or its dependencies. Note: If a global file is changed, use the commandsimport importlib
andimportlib.reload(sys.modules['global_filename'])
to reload global files without having to restart WebGen after each change.kill
- The kill command is used to delete the webpage or global file being operated on. This does not include the global files imported to the page, but will remove the JavaScript, CSS, or PHP files directly linked to the Python document deleted. Once performed, the effects of this command are final.export(destination)
- The export command will export the webpage operated on to the file location input asdestination
. The file will be exported as a zip file.exit
- The exit command is used to exit a file and return to the WebGen interface or quit the WebGen interface and end the program.restart
- The restart command is used to exit the WebGen interface and end the program.
modules.py
and the properties of said modules, use the lm
and mod m
commands in the WebGen interface (see File Commands above). To assign an object, follow the steps below:
container_elem = mx.C()
- Object assignment is done by assigning a variable to a class (in this example the container class,C()
, is used). Remember to prepend the class withmx.
to declare the object as an imported module class.container_elem.content = [text_elem]
- Content assignment is done by two different methods: For container classes such asC()
andTable()
, the objects stored within the containers are stored within lists and are in object form (in this example, text_elem is an object within container_elem). For text-based elements, such asT()
, the content refers to text (ie.text_elem.content = "This is text"
).container_elem.text_align = "center"
- Property assignment is done by assigning values to the style properties desired. Note that properties using hyphenation, such astext-align
replace the hyphen with an underscore in Python scripts (ie.text_align
). Some properties have defaults which may be overriden by reassignment. Properties such asmargin
,height
, andwidth
are considered Dynamic Properites because they typically vary by viewport dimensions. Because style properties are fixed and cannot be adjusted with CSS after being set, Dynamic Properties are restricted from being set with style properties, but instead must be adjusted with CSS or JavaScript code.
data = mx.Data()
- The Data element provides the different components and metadata used in thehead
element of the webpage.data.title
- The title of the webpage.data.charset
- The charset metadata of the webpage. Default is "utf-8".data.description
- The description metadata of the webpage.data.keywords
- The keyword metadata of the webpage. List your keywords within a list:data.keywords = ['these','are','keywords']
data.author
- The author metadata of the webpage.data.viewport
- The viewport metadata of the webpage. Default is "width=device-width, initial-scale=1".data.jquery_script
- The jquery_script property enables the use of the jQuery source file imported from the WebGen directory. Default is True. To disable, reassign to False.data.jquery_ui_script
- The jquery_ui_script property enables the use of the jQuery-UI source file imported from the WebGen directory. Default is True. To disable, reassign to False.data.scripts
- The scripts property contains a list of imported scripts via source URLs. List the imported script locations like so:data.scripts = ['script1_location','script2_location']
.body = mx.Body()
- The Body element allows for the adjustment of the style properties and content of thebody
element of the webpage.body.background_color
- The background color of the webpage. Default is "#ffffff".body.overflow_x
- The overflow-x property of the webpage. Default is "hidden".body.font_family
- The font-family property of the webpage. Default is "Helvetica".body.color
- The color property of the webpage. Default is "black".body.content
- The content of the webpage. Body is a container object, meaning that all content should also be objects, listed in order of priority like so:body.content = [element1, element2, element3]
.text_elem = mx.T()
- The Text element generates paragraph, heading, and other text content.text_elem.type
- The text tag represented by the element. Default is a paragraph tag, "p", but can be reassigned to "h1", "em", or other tags.text_elem.id
- The ID HTML attribute.text_elem.cl
- The Class HTML attribute.text_elem.content
- The content of the text element. Text element content is a string and can be assigned like so:text_elem.content = "This is text content"
.link_elem = mx.Link()
- The Link element generates a link container around other object content.link_elem.src
- The href source of the link. Assign a URL to this property.link_elem.id
- The ID HTML attribute.link_elem.cl
- The Class HTML attribute.link_elem.target
- The Target HTML attribute. Default is "_self".link_elem.content
- The content of the link element. Link element content is a list of objects wrapped by the link like so:link_elem.content = [element1, element2]
.container_elem = mx.C()
- The Container element generates a div container with other object content.container_elem.id
- The ID HTML attribute.container_elem.cl
- The Class HTML attribute.container_elem.onclick
- The onclick event HTML attribute.container_elem.onhover
- The onhover event HTML attribute.container_elem.attr
- This property serves to define a custom HTML attribute.container_elem.background_color
- The background color of the container. Default is "lightblue" for visibility and identification. To override for CSS adjustment, reassign tocontainer_elem.background_color = ""
.container_elem.overflow_x
- The overflow-x property of the container. Default is "visible".container_elem.overflow_y
- The overflow-y property of the container. Default is "visible".container_elem.content
- The content of the container element. Container element content is a list of objects wrapped by the container like so:container_elem.content = [element1, element2]
.table_elem = mx.Table()
- The Table element generates a table with cells defined by nested lists.table_elem.id
- The ID HTML attribute. When assigned an ID, the cells of the Table will also assume the same ID with the appended "_rowNumber_columnNumber". The default ID is "table". Thus, row 2, column 4 will have the ID "table_2_4" unless the ID is adjusted.table_elem.cl
- The Class HTML attribute. Default is ".table".table_elem.background_color
- The background color of the table. Default is "coral" for visibility and identification. To override for CSS adjustment, reassign totable_elem.background_color = ""
.table_elem.content
- The content of the table element. Table element content is generated by a nested list of objects wrapped by the table like so:table_elem.content = [[row1_col1_content, row1_col2_content, row1_col3_content], [row2_col1_content, row2_col2_content, row2_col3_content]]
.nav_table_elem = mx.NavTable()
- The Nav Table element generates a table-like structures with cells in the form of divs, defined by nested lists.nav_table_elem.id
- The ID HTML attribute. When assigned an ID, the cells of the Table will also assume the same ID with the appended "_rowNumber_columnNumber". The default ID is "navtable". Thus, row 2, column 4 will have the ID "navtable_2_4" unless the ID is adjusted.nav_table_elem.cl
- The Class HTML attribute. Default is ".navtable".nav_table_elem.background_color
- The background color of the table. Default is "coral" for visibility and identification. To override for CSS adjustment, reassign tonavtable_elem.background_color = ""
.nav_table_elem.display
- The display property of the nav table element. It is imperative for this element that the display property remains "table".nav_table_elem.content
- The content of the nav table element. Nav table element content is generated by a nested list of objects wrapped by the table like so:nav_table_elem.content = [[row1_col1_content, row1_col2_content, row1_col3_content], [row2_col1_content, row2_col2_content, row2_col3_content]]
.nav = mx.Nav()
- The Nav element generates a container wrapped table, which is great for creating navigational bars.nav.id
- The ID HTML attribute of the Container. The default ID is "nav".nav.cl
- The Class HTML attribute of the Container.nav.tableid
- The ID HTML attribute of the Table. When assigned an ID, the cells of the Table will also assume the same ID with the appended "_rowNumber_columnNumber". The default ID is "navtable". Thus, row 2, column 4 will have the ID "navtable_2_4" unless the ID is adjusted.nav.tablecl
- The Class HTML attribute of the Table.nav.background_color
- The background color of the Container. Default is "orange" for visibility and identification. To override for CSS adjustment, reassign tonav.background_color = ""
.nav.position
- The position style property of the Container. Default is "fixed". To override for CSS adjustment, reassign tonav.position = ""
.nav.z_index
- The z-index style property of the Container.nav.content
- The content of the Table element. Table element content is generated by a nested list of objects wrapped by the table like so:nav.content = [[row1_col1_content, row1_col2_content, row1_col3_content], [row2_col1_content, row2_col2_content, row2_col3_content]]
.menu_icon = mx.Menu()
- The Menu element generates a 3-bar customizable svg menu icon.menu_icon.id
- The ID HTML attribute of the Menu. The default ID is "menubutton".menu_icon.length
- The length property determines the horizontal length of the Menu in pixels. Default is "35".menu_icon.width
- The width property determines the thickness or width of the Menu bars in pixels. Default is "4".menu_icon.spacing
- The spacing property determines the height of the Menu as a percentage of the length property. Spacing is a number on a scale of 0 to 1. Default is "0.85".menu_icon.radius
- The radius property determines the border radius of the Menu bars in pixels. Default is "1.75".menu_icon.color
- The color of the Menu. The default is "black".menu_icon.custom
- Custom code for the menu svg icon. This property can be used to implement custom animations.icon = mx.Icon()
- The Icon element generates a custom svg icon with a preconceived or user-defined path.icon.id
- The ID HTML attribute of the Icon. The default ID is "icon".icon.cl
- The Class HTML attribute of the Icon.icon.type
- The type property allows for the selection of an icon with a preconceived path, overriding theicon.path
property. The "x" type produces an X icon. By default, no type is selected and the icon's path is defined byicon.path
.icon.path
- The custom svg HTML path of the icon. Svg tags are already supported by the compiler and are not needed to be included in the path. Ificon.type
is defined, this property is overriden.icon.height
- The height property determines the height of the Menu in pixels. Default is "35".icon.width
- The width property determines the width of the Menu in pixels. Default is "35".icon.stroke
- The stroke property determines the thickness or stroke width of preconceived paths in pixels. Default is 3. Ificon.type
is not defined, this property has no effect.icon.color
- The color property determines the color of preconceived paths. The default is "black". Ificon.type
is not defined, this property has no effect.image = mx.Image()
- The Image element generates an image.image.id
- The ID HTML attribute of the Image.image.cl
- The Class HTML attribute of the Image.image.src
- The Src HTML attribute of the Image. Use theimages
command in the WebGen interface to find the image directory for your project. Store images in the image directory and use the source "../images/image_name.jpg" to reference your media.video = mx.Video()
- The Image element generates an image.video.id
- The ID HTML attribute of the Image.video.cl
- The Class HTML attribute of the Image.video.autoplay
- The Autoplay HTML attribute of the Video. If assigned the boolean True, the video will autoplay on load. Default is False.video.muted
- The Muted HTML attribute of the Video. If assigned the boolean True, the video will be muted. Default is False.video.controls
- The Controls HTML attribute of the Video. If assigned the boolean True, the video will show play controls. Default is True.video.loop
- The Loop HTML attribute of the Video. If assigned the boolean True, the video will loop when finished. Default is False.video.src
- The Src HTML attribute of the Video. Use theimages
command in the WebGen interface to find the image directory for your project. Store videos in the image directory and use the source "../images/video_name.jpg" to reference your media.x = mx.X()
- The X element generates a custom HTML element with user-generated HTML source code.x.content
- The HTML source code of the X element. In order to program custom HTML code, simply write it as a string assigned to a X element like so:x.content = "<p>This is a custom paragraph</p>"
.
- Why won't WebGen let me define the margin property?
- Why is my content not showing on my compiled webpage?
- How do I create a PHP webpage?
Properties such as margin
, height
, and width
are considered Dynamic Properites because they typically vary by viewport dimensions. Because style properties are fixed and cannot be adjusted with CSS after being set, Dynamic Properties are restricted from being set with style properties, but instead must be adjusted with CSS or JavaScript code.
If you are having a hard time seeing your content appear on your compiled webpage after using the r
command, make sure that the desired elements have been added as content within the body
element of the webpage or another embedded container element. Elements must be embedded in order to be properly compiled: container_elem.content = [element]
.
To create a PHP page, simply create a normal file with the Interface Command f(folder, filename)
and add the HTML components (forms, containers, etc.) of the webpage. Then, use the exit
command to return to the main interface and create a global file with the gf(folder, global_filename)
command. Instead of using the e
command to edit the HTML elements (forms, containers, etc.) of the page, use the php
File Command to add PHP content. No enclosing PHP tags are needed - just start programming your PHP content.