WEBGEN
Scroll for More Content
Check out the WebGen Python code for this page below!
- DOCUMENTATION -
WebGen is a custom Python to User Interface compiler with the goal of making website and app design cleaner and more efficient. WebGen uses Python classes to represent HTML elements, creating repeated structures much more reliably than copy/paste. Javascript, CSS, and PHP global files can be created and linked to pages, giving creators the ability to use the same pieces of code on every site. WebGen operates much more effectively than programming from scratch in HTML, while still presenting the customizable flexibility of creating a website through code. Created by Dre Barrera.
Tutorial Video
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 a c() function to be called
to compile the element. The c() 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 the c() functions defined in
modules.py, the head and body of the HTML
document is created, including external JavaScript, CSS, and
PHP scripts.
f(folder, filename) command to create a
new project named folder with the webpage named
filename.
e command to start editing your webpage.
This command should create a new Python file and open it for
editing.
html_element = mx.C(),
where C() is the div container class and
mx. refers to the imported modules file. For a
list of classes available, use the lm command in
the WebGen console interface.
html_element.property = "value". For a list of
default properties applied to a class, use the
mod m command, where m is the class
in reference. For more information on property assignment and
property defaults, see the Modular Commands section below.
r command to compile and load your
webpage your browser.
css and js commands to
create CSS and JavaScript files to be compiled with your HTML
webpage.
exit command to return to the main WebGen
interface. From here, you can change to another project,
webpage file, or create a global file.
exportf(filename, destination) or
export(destination) explained in detail in the
programming with WebGen section below.
e File Command: (Python)
This code is available in [files > example > example_page] of
this repository as example_page.py.
css File Command: (CSS)
This code is available in [files > example > example_page] of
this repository as example_page.css.
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, while
filename 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 to
f(folder, filename), this command will open or
create and open a global file. A global file is a file under
the name filename, which is accessible to all of
the pages within the project folder, folder by
importing with the command
from global_filename import * within individual
Python scripts. Global files cannot be individually compiled
with the r 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 name folder.
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 name
folder to the file location input as
destination. 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 assignments data and
body 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 as nav 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 code body.content = [nav], placing
the nav container within the
body 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 as
nav.background_color = "red" where the style of
the nav 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
command from 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
command from 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 command from 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.webp" 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 code
from global_filename import * in the Python
document.
lm - This command lists all object classes to
create HTML element with Python. Classes should be prepended
with mx. in Python files to reference the
imported module file. For example, creating a text element
would be done within a Python document with the code
text_elem = mx.T().
mod m - This command lists all the default object
properties associated with class m. 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 with text_elem.color = "red". Properties
using hyphenation, such as
background-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 commands import importlib and
importlib.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 as
destination. 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 with mx. 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 as C() and Table(), 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
as T(), 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 as
text-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 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.
data = mx.Data() - The Data element provides the
different components and metadata used in the
head 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 the
body 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 to
container_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 to
table_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 to
navtable_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 to
nav.background_color = "".
nav.position - The position style property of
the Container. Default is "fixed". To override for CSS
adjustment, reassign to nav.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
the icon.path property. The "x" type produces
an X icon. By default, no type is selected and the icon's
path is defined by icon.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. If
icon.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. If icon.type is not
defined, this property has no effect.
icon.color - The color property determines the
color of preconceived paths. The default is "black". If
icon.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 the images 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.webp" 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 the images 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.webp" 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>".
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.
WebGen 2022