Xpounded EZ GUI Builder

Simple use of Notepad, Javascript(, and VBScript)

Below is the Xpounded EZ GUI Builder that uses the table diagram to HTML script. With it you can quickly design a HTML GUI in any Text Editor.
Once you have a design you like, click 'Make GUI' to automatically create the HTML for the GUI.

Diagraming instructions:
(See NPTables for full diaramming instructions, or read the rules in the GUIBuilder source).

Content Building Instructions:
Content is included through the use of placeholders. A placeholder is just a name in bracketts. An example is [MyContent]. You use placeholder when you diaram a new GUI. You tell the system what content you want the placeholder to represent by making a content file.

Rules for the content file are:

A Content File must start with a Content Placeholder (a name in bracketts)
Any text that is beneath a placeholder but above all other placeholders in the content file is the actual content of that placeholder.
The system will replace all placeholders with their actual content when you click the 'Make GUI' button.
Blank lines are allowed in a content file.

The GUI Builder Interface

Diagram Buttons:

Browse: Lets you browse to a saved diagram file and load it - this option requires MSComDlg
Make HTML: Creates HTML for the diagram being viewed. Leaves placeholders untouched.
Last Image: Loads the last Diagram that was parsed using the 'Make HTML' button.
Make GUI: Creates HTML from a diagram, replacing placeholders with the actual content.
View HTML: Opens a new window for you to view the currently viewed contents
Reset: Re-Loads the origional Diagram File
Content: Switches the view, allowing you to view a Content File

Content Buttons:

Browse: Lets you browse to a saved content file and load it - this option requires MSComDlg
Reset: Re-Loads the origional Content File
Diagram: Switches the view, allowing you to view a Diagram File

To Use:
Design a table diagram in any Text Editor (like Notepad, or RHSCoder), browse to it and open it into the textarea (This option requires the MSComDlg CommonDialog Control).
Click 'Make GUI' and the HTML will be avilable for copy.
Click 'View HTML' and you can see the results of your design.

Un-comment the browse section to browse to your table defs.
Save the script into a script file and include file drag and drop functionality.
Make your own automation to replace the content placeholders with actual content from a seperate file.

(Target System: XP/2003/2000, IE6, WSH 5.6, with Common Dialog Control)

Save this file as npGUIBuilder.html --Mention Us!--

Select All

<HTML>
<HEAD>
<TITLE>
Xpounded EZ GUI Builder
</TITLE>
<STYLE>

</STYLE>
<script language="vbscript">
' VBS is used here only for the Browse Feature.
Function readFile(path)
	Dim f
	Set f = fso.OpenTextFile(path, 1)
	readFile = f.ReadAll
	f.Close
	Set f = Nothing
End Function
Sub saveFile(path,sContent)
	Dim result
	Set result = fso.createTextFile(path,True)
	result.Write sContent
	result.Close
	Set result = Nothing
End Sub
Function openDialog(sPath,sFilter)
	Dim oCDlg, sFile
	Const OFN_EXPLORER = &H80000
	Const OFN_LONGNAMES = &H200000
	Set oCDlg = CreateObject("MSComDlg.CommonDialog")
	sFile = String(260, Chr(0))
	With oCDlg
		.Flags = OFN_EXPLORER Or OFN_LONGNAMES
		.MaxFileSize = 260
		.InitDir = sPath
		If sFilter <> "" Then
			.Filter = sFilter
		Else
			.Filter = "All Files (*.*)|*.*"
		End If
		.ShowOpen
		sFile = .FileName
		If sFile <>"" Then
			sReturn = sFile
		End If
	End With
	Set oCDlg = nothing
	openDialog = sReturn
End Function

'BROWSE INSTRUCTIONS:
'To use the browse feature you must uncomment the following lines 
'	and comment the first two lines in the Sub browse_onclick.
'	browse requires MSComDlg (common dialog).
'Dim fso, desktop, WshShell
'set WshShell = CreateObject("WScript.Shell")
'desktop = WshShell.SpecialFolders("Desktop")
'set WshShell = Nothing
'Set fso = createObject("Scripting.FileSystemObject")
Sub browse_onclick
	msgbox "download and comment out this line and the next to use this feature."
	Exit Sub
	'See the BROWSE INSTRUCTIONS above

Dim sfile
	sfile=openDialog(desktop,"Text Only|*.txt")
	if sfile<>"" then
		results.value=readFile(sfile)
	end if
End Sub
Sub browse2_onclick
	msgbox "download and comment out this line and the next to use this feature."
	Exit Sub
	'See the BROWSE INSTRUCTIONS above

Dim sfile
	sfile=openDialog(desktop,"Text Only|*.txt")
	if sfile<>"" then
		filetext.value=readFile(sfile)
	end if
End Sub
</script>

<SCRIPT Language="JavaScript">
/////////////////////////////////////////////////////////////////////////////////////
///////////// HTML Tables from Notepad Diagrams
////////////
/////////// rdspons 
////////// Copyright Xpounded 2005
/////////
var colmarks
var rowmarks
function rawTableDef(s){
	//Takes a Notepad table design and splits the diagram so it can
	// create a table with Cap-Alpha 'A' and above entries that
	// uniformly (and homogeneously) fill the td areas, keeping 
	// the tables design structure unaltered.  
	var tdcntr=1
	var newlines=[]
	colmarks=[]
	rowmarks=[]
	newlines[0]=""
	var lines=s.split("\r\n")
	for(var i=1;i<lines.length;i++){
		rowmarks[i]=1
	}
	for(var i=1;i<lines[1].length;i++){
		colmarks[i]=1
	}
	for(var i=0;i<lines.length;i++){
		newlines[i]=""
		for(var j=0;j<lines[i].length;j++){
			if(lines[i].substr(j,1)=="|"){
				if(lines[i-1].substr(j,1)=="-"){
					tdcntr++
				}
			}
			if(lines[i].substr(j,1)=="-"){
				newlines[i]+="-"+""
				rowmarks[i]=0
			}
			else{
				if(lines[i].substr(j,1)=="|"){
					newlines[i]+="|"+""
					colmarks[j]=0
				}
				else{
					if(lines[i-1].substr(j,1)=="-"){
						newlines[i]+=String.fromCharCode(tdcntr+63)+""
					}
					else{
						newlines[i]+=newlines[i-1].substr(j,1)
					}
				}
			}
		}
	}
	return newlines
}
var colmarker=""
var rowmarker=""
function makeColMarker(){
	//Creates a string that holds the tables column seperation posistions
	makeRowMarker()
	colmarker=""
	var cntr=0
	for(var i=0;i<colmarks.length;i++){
		if(colmarks[i]==0){
			colmarker+="0"+""
			cntr++
		}
		else{
			colmarker+=cntr+""
		}
	}
}
function makeRowMarker(){
	//Creates a string that holds the tables row seperation posistions
	rowmarker=""
	var cntr=0
	for(var i=0;i<rowmarks.length;i++){
		if(rowmarks[i]==0){
			rowmarker+="0"+""
			cntr++
		}
		else{
			rowmarker+=cntr+""
		}
	}
}
function colMarkerDiagram(s){
	//creates a table fills each td area with the td's cooresponding colmarker number
	//the table structure is kept intact
	var cntr
	var newlines=[]
	var lines=s.split("\r\n")
	for(var i=0;i<lines.length;i++){
		newlines[i]=""
		cntr=0
		for(var j=0;j<lines[i].length;j++){
			if(lines[i].substr(j,1)=="|"){
				cntr=colmarker.substr(j+1,1)+""
				newlines[i]+="0"+""
			}
			else{
				if(lines[i].substr(j,1)=="-"){
					newlines[i]+="0"+""
				}
				else{
					newlines[i]+=cntr+""
				}
			}	
		}
	}
	return newlines
}
function rowMarkerDiagram(s){
	//creates a table fills each td area with the td's cooresponding rowmarker number

//the table structure is kept intact
	var cntr
	var newlines=[]
	var lines=s.split("\r\n")
	for(var i=0;i<lines.length;i++){
		newlines[i]=""
	}
	for(var j=0;j<lines[0].length;j++){
		cntr=0
		for(var i=0;i<lines.length;i++){
			if(lines[i].substr(j,1)=="-"){
				cntr=rowmarker.substr(i+1,1)+""
				newlines[i]+="0"+""
			}
			else{
				if(lines[i].substr(j,1)=="|"){
					newlines[i]+="0"+""
				}
				else{
					newlines[i]+=cntr+""
				}
			}	
		}
	}
	return newlines
}
function npDiagramToHTML(s){
  try{
	// takes a notepad table diagram and creates the HTML that will
	// reproduce it.
	// The html will include the content from the first line of the
	// diagram. This effect can be used to indicate content placeholders.
	try{				//Added for muliple deffinitions in the same file

n=s.indexOf("_use_")
		if(n>-1){
			s=s.split("_use_\r\n")
		}
		if(s[1].length>0){
			s=s[1]
		}
	}
	catch(e){}
	rawTableDef(s)
	makeColMarker()
	markers=colMarkerDiagram(s)				//td area col marks
	markers2=rowMarkerDiagram(s)				//td area row marks
	//var ret="<table border=\"1\" width=\"100%\">\r\n"
	var ret="<table border=\"1\">\r\n"
	var lines=s.split("\r\n")
	var mat=[]
	var newrow=0
	for(var i=0;i<lines.length;i++){
		mat[i]=[]
		for(var j=0;j<lines[i].length;j++){
			mat[i][j]=0
		}
	}
	var newtable=1
	var newrow=0
	var cont=""
	for(var i=1;i<lines.length;i++){
		for(j=0;j<lines[i].length;j++){
			if(lines[i-1].substr(j,1)=="-"){
				newrow=1
				break
			}
		}
		if(newrow==1){
			if(newtable==0){
				ret+="\t</tr>\r\n\t<tr>\r\n"
			}
			if(newtable==1){
				ret+="\t<tr>\r\n"
			}
		}
		newrow=0
		newtable=0
		for(var j=0;j<lines[i].length;j++){
			if(lines[i].substr(j,1)=="|"){cont=""}
			else{
				if(lines[i].substr(j,1)=="-"){cont=""}
				else{
					if(mat[i][j]==0){
						var spaceCnt=0
						for(var k=j;k<lines[i].length;k++){
							if(lines[i].substr(k,1)=="|"){
								break
							}
							newchr=lines[i].substr(k,1)
							if(newchr==" "){
								spaceCnt++
							}
							else{
								spaceCnt=0
							}
							if(spaceCnt<2){
								cont+=newchr
							}
						}
						ret+="\t\t<td valign='top'"
						mark=markers[i].substr(j,1)
						spancol=0
						spanrow=0
						for(var k=j;k<markers[i].length;k++){
							if(markers[i].substr(k,1)==mark){
								spantest1=colmarker.substr(k,1)-markers[i].substr(k,1)
								if(spantest1>0){
									spancol=spantest1+1
								}
								mat[i][k]=1
								mark2=markers2[i].substr(j,1)
								for(var l=i+1;l<markers2.length;l++){
									if(markers2[l].substr(k,1)==mark2){
										spantest2=rowmarker.substr(l,1)-markers2[l].substr(k,1)
										if(spantest2>0){
											spanrow=spantest2+1
										}
										mat[l][k]=1
									}
									else{
										break
									}
								}
							}
							else{
								break
							}
						}
						if(spancol>0){
							ret+=" colspan='"+spancol+"'"
						}

if(spanrow>0){
							ret+=" rowspan='"+spanrow+"'"
						}
						ret+=">"+cont+"</td>\r\n"
					}
				}
			}
		}
	}
	ret+="\t</tr>\r\n</table>\r\n"
  }
  catch(e){
	alert("Make sure you are using a valid NPTD source diagram")
	ret="The diagram is un-parseable in this version."
  }
	return ret
}
//\\\\\\\
//\\\\\\\\ Copyright Xpounded 2005
//\\\\\\\\\ rdspons 
//\\\\\\\\\\
//\\\\\\\\\\\ HTML Tables from Notepad Diagrams
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

//This is the example diagram as it would appear in notepad
/*
-----------------------------------------
| [box]  |    [verbage]                 |
-----------------------------------------
| Simple Example  |[text]               |
-----------------------------------------
| 2 EZ   |[sel1]  |[area]               |
|        |        |                     |
|        |        |                     |
|        |        |                     |
-----------------------------------------
|.                |[button1][button2]   |
-----------------------------------------
|        [footer]                       |
-----------------------------------------
*/

//This is the example content as it would appear in notepad
//Note: the decription must immediatly follow the sectionname, but
//	  you can add blank lines to seperate sections.
/*
[box]
<img src="Box.jpg" width="200" height="200">

[verbage]
<h1>Xpounded GUI Builder</h1><center><b>Another great reason to try<br><font size="+1">VBS QuickDev IDE</font></b></center>
<br>
<center>
<font size="-1">See how easy it is to create a GUI.</font>
</center>

[footer]
<center><font size="-1">Copyright Xpounded 2005</font></center>
<center><font size="-2">Thank you for visiting.</font></center>

[button1]
<button onclick="javascript:alert('OK')">OK</button>

[button2]
<button onclick="javascript:alert('Canceled')">Cancel</button>
[sel1]
<select><option>All Source</option><option>HTML Only</option><option>Script Only</option></select>
*/

//This is the example content in 'in-line' variable form
var filecontent="[box]\r\n"
	+	"<img src=\"Box.jpg\" width=\"200\" height=\"200\">\r\n\r\n"
	+     "[verbage]\r\n"
	+	"<h1>Xpounded GUI Builder<\/h1><center><b>Another great reason to try<br><font size=\"+1\">VBS QuickDev IDE</font></b></center>\r\n"
	+	"<br>\r\n"
	+	"<center>\r\n"
	+	"<font size=\"-1\">See how easy it is to create a GUI.</font>\r\n"
	+	"</center>\r\n\r\n\r\n"
	+	"[footer]\r\n"
	+	"<center><font size=\"-1\">Copyright Xpounded 2005<\/font><\/center>\r\n"
	+	"<center><font size=\"-2\">Thank you for visiting.<\/font><\/center>\r\n\r\n"
	+	"[button1]\r\n"
	+	"<button onclick=\"javascript:alert('OK')\">OK<\/button>\r\n\r\n"
	+	"[button2]\r\n"
	+	"<button onclick=\"javascript:alert('Canceled')\">Cancel<\/button>\r\n"
	+	"[sel1]\r\n"
	+	"<select><option>All Source</option><option>HTML Only</option><option>Script Only</option></select>\r\n"
baselinecontent=filecontent
//Content Parser
content=[]
function parseContent(){
	filecontent=filetext.value
	conlines=filecontent.split("\r\n")
	for(var i=0;i<conlines.length;i++){
		if(conlines[i].substr(0,1)=="["){
			var n=""
			var m=""
			for(var j=1;j<conlines[i].length;j++){
				if(conlines[i].substr(j,1)=="]")break
				n+=conlines[i].substr(j,1)
			}
			for(var k=i+1;k<conlines.length;k++){
				if(conlines[k].substr(0,1)=="["){break}
				else{
					if(conlines[k]==""){}
					else{
						m+="\r\n\t\t\t"
						for(var j=0;j<conlines[k].length;j++){
							m+=conlines[k].substr(j,1)
						}
					}
				}
				i++
			}
			content[n]=m+"\r\n\t\t"

}
	}
}
function init(){
	lis=s1
	results.value=lis
	filetext.value=filecontent
}
function parse(){
	lis=results.value
	results.value=npDiagramToHTML(results.value)
}
function reset(){
	lis=s1
	results.value=lis
}
function reset2(){
	filecontent=baselinecontent
	filetext.value=filecontent
}
var lis
function lastimg(){
	results.value=lis
}
function makeGUI(s){
	var ns=npDiagramToHTML(lis)
	results.value=gui(ns)
}
function gui(s){
	parseContent()
	s=s.replace(/\[text\]/g,"<input size='16'>")
	s=s.replace(/\[select\]/g,"<select><option>1</option><option>2</option><option>3</option></select>")
	s=s.replace(/\[radio\]/g,"<input type='radio'>")
	s=s.replace(/\[check\]/g,"<input type='checkbox'>")
	s=s.replace(/\[button\]/g,"<input type='button'>")
	s=s.replace(/\[area\]/g,"<textarea rows='4' cols='20'></textarea>")
	for(var i in content){
		s=s.replace("["+i+"] ","["+i+"]")
		s=s.replace("["+i+"]",content[i])
	}
	return s
}
function view(){
	res=window.open("about:blank")
	res.document.body.innerHTML=results.value
}
function switchdiv(n){
	switch(n){
		case(0):
			divdiagram.style.visibility="hidden"
			divcontents.style.visibility="visible"
			break
		case(1):
			divcontents.style.visibility="hidden"
			divdiagram.style.visibility="visible"
			break
	}
}
</SCRIPT>
</HEAD>
<BODY onload="init()">
<div style="position:relative;text-align:center;width:100%;">
<div id="divdiagram" style="position:absolute;left:0;top:0;text-align:center;width:100%;visibility:visible;">
<h1>Diagram File</h1>
<b>Create a Diagram of a window. Use placeholders to indicate content.</b>
<textarea id="results" rows="18" cols="80" wrap="off"></textarea><br>
<button id="browse" title="Browse for a Diagram file">Browse</button>
<button onclick="parse()" title="Create the Tables HTML. Makes the diagram recallable">Make HTML</button>
<button onclick="lastimg()" title="recalls the last parsed diagram">Last Image</button>
<button onclick="makeGUI()" title="Creates the HTML for the GUI by combining the diagram HTML with a content file">Make GUI</button>
<button onclick="view()" title="Look at the current HTML in a new window">View HTML</button>
<button onclick="reset()" title="Start Over: Diagram">Reset</button>
<button onclick="switchdiv(0)" title="Examine a content file">Content</button>
</div>
<div id="divcontents" style="position:absolute;left:0;top:0;text-align:center;width:100%;visibility:hidden;">
<h1>Content File</h1>
<b>Create content for placeholders to use in a diagram. SYNTAX: [placeholder] content</b>
<textarea id="filetext" rows="18" cols="80" wrap="off"></textarea><br>
<button id="browse2" title="Browse for a Content file">Browse</button>
<button onclick="reset2()" title="Start Over: Content">Reset</button>
<button onclick="switchdiv(1)" title="Examine a diagram file">Diagram</button>
</div>
</div>
</BODY>
</HTML>

View HTML

- Copyright 2003-2006 Xpounded -
All JS code developed by Xpounded is developed in RHSCoder.
All VBS code developed by Xpounded is developed in VBS QuickDev IDE, or RHSCoder.
Feedback