svgTemplateDialog.html - This HTML code creates a simple we…

/FlightsOfIdeas/svgTemplateDialog.html

http://sketchup-svg-outline-plugin.googlecode.com/ · HTML · 206 lines · 72 code · 0 blank · 134 comment · 0 complexity · dc1f5a0c9218a61e66f4e794a8cc17a1 MD5 · raw file


<head>
<meta http-equiv="Content-Type" content="text/html" />
<link href="flightsOfIdeasStyle.css" rel="stylesheet" type="text/css" />
<title>SVG Parameters (Flights of Ideas)</title>
<script language="javascript">
<!--
//###########################################################
//#
//#    Scalable Vector Graphics (SVG) from Google Sketchup Faces
//#    Copyright (C) 2008 Simon Beard
//#
//#    This program is free software: you can redistribute it and/or modify
//#    it under the terms of the GNU General Public License as published by
//#    the Free Software Foundation, either version 3 of the License, or
//#    (at your option) any later version.
//#
//#    This program is distributed in the hope that it will be useful,
//#    but WITHOUT ANY WARRANTY; without even the implied warranty of
//#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//#    GNU General Public License for more details.
//#
//#    You should have received a copy of the GNU General Public License
//#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
//#
//###########################################################

var previousUnits="";

//////////////////////////////////////////////////////////////////////////////////////////////////
// Called when ... button is selected
//////////////////////////////////////////////////////////////////////////////////////////////////
function onFileSave()
{
	window.location='skp:on_file_save@'+document.getElementById("svgFilename").value;
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// Called when Ok button is selected
//////////////////////////////////////////////////////////////////////////////////////////////////
function onOk()
{
	scale = "1";
	if (document.getElementById("templateScale").checked)		
		scale = "2.835";
		
	// Convert to mm
	if (document.getElementById("inches").selected) {
		window.location='skp:on_ok@'+(document.getElementById("paperBorder").value*25.4)+","+document.getElementById("svgFilename").value+","+scale+","+previousUnits;
	} else {	
		window.location='skp:on_ok@'+document.getElementById("paperBorder").value+","+document.getElementById("svgFilename").value+","+scale+","+previousUnits;
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// Called when cancelling dlg box
//////////////////////////////////////////////////////////////////////////////////////////////////
function onCancel()
{
	window.location='skp:on_close';
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// Called when changing units
//////////////////////////////////////////////////////////////////////////////////////////////////
function changeUnits()
{
	if ((document.getElementById("inches").selected) && (previousUnits=="mm")) {	
		document.getElementById("paperBorder").value=document.getElementById("paperBorder").value*0.0393700787;
		document.getElementById("borderLabel").innerHTML="Border (in):"
		previousUnits	="in";
	} else if ((document.getElementById("millimeters").selected) && (previousUnits=="in")) {
		document.getElementById("paperBorder").value=document.getElementById("paperBorder").value*25.4;
		document.getElementById("borderLabel").innerHTML="Border (mm):"
		previousUnits	="mm";
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// Called to set dlg defaults
//////////////////////////////////////////////////////////////////////////////////////////////////
function setDefaults(defaults)
{
	args = defaults.split(',');
	document.getElementById("svgFilename").value = args[0];
	document.getElementById("paperBorder").value = args[1];
	document.getElementById("templateScale").checked = false;
	if (args[2] == "true")
		document.getElementById("templateScale").checked = true;
	document.getElementById("millimeters").selected=true;
	document.getElementById("borderLabel").innerHTML="Border (mm):"
	previousUnits="mm";
	if (args[3] == "in") {		
		document.getElementById("inches").selected=true;
		changeUnits();
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// Called to set new SVG filename
//////////////////////////////////////////////////////////////////////////////////////////////////
function setFilename(filename)
{	

	// Peculiarity for mac appends ); to filename
	var os = navigator.appVersion.indexOf('Mac') != -1? 'Mac' : 'Win';
	if(os == 'Mac')
	{
		if (filename[filename.length-1]==';')
			filename[filename.length-1] = '\0';
		if (filename[filename.length-1]==')'	)
			filename[filename.length-1] = '\0';		
		if (filename[filename.length-1]=='\'')
			filename[filename.length-1] = '\0';			
	}

	document.getElementById("svgFilename").value = filename;
}

//////////////////////////////////////////////////////////////////////////////////////////////////
// Sketchup functions
//////////////////////////////////////////////////////////////////////////////////////////////////
function sizeWindow()
{
	// check the screen size
	if(window.screen.availHeight <= 600 || window.screen.availWidth <= 800)
	{
		window.location = "skp:small_window";
	}
}
function doLoad()
{
    var os = navigator.appVersion.indexOf('Mac') != -1? 'Mac' : 'Win';
    if(os == 'Win')
	{
		window.location='skp:onload'
	}
	document.getElementById("templateScale").checked = false
}
-->
</script>
<link href="./spikySawStyle.css" rel="stylesheet" type="text/css" />
</head>
<html>
<body onload="doLoad()"> 
<table style="width: 100%">
	<tr>	
		<td width="50px">
			<img src="./Images/dragonfly_50.png"/>
		</td>	
		<td width="100%">
			<h2>Export Faces To SVG</h2>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<table style="width: 100%">
				<tr>
					<td width="20%"><p class="heading-green">Output File:</p></td>
					<td width="70%"><input class="text" style="width: 100%" id="svgFilename" type="text" value="flightsofideas.svg"/></td>
					<td width="10%"><input class="button" type="button" value="..." onClick="onFileSave()"/></td>			
				</tr>
			</table>
			<table style="width: 100%">
				<tr>
					<td width="20%"></td>
					<td width="80%"><p class="heading-green"><input type="checkbox" id="templateScale"/> Scale for Ponoko Inkscape Templates</p></td>
				</tr>		
			</table>			
			<table style="width: 100%">
				<tr>
					<td width="20%"><p class="heading-green">Measurements:</p></td>
					<td width="20%">
						<select width="100%">
							<option id="millimeters">Millimeters...</option>
							<option id="inches">Inches...</option>
						</select>						
					</td>		
					<td width="20%">
						<input class="button" onClick="changeUnits()" type="button" value="Update Values"/>
					</td>
					<td width="40%"></td>					
				</tr>		
			</table>	
			<table style="width: 100%">
				<tr>
					<td width="20%"><p class="heading-green" id="borderLabel">Border:</p></td>
					<td width="20%"><input class="text" style="width: 100%" id="paperBorder" type="text" value="10"/></td>
					<td width="60%"></td>
				</tr>		
			</table>		
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<table style="width: 100%">
				<tr>
					<td width="33%" align="center"><input class="button" onClick="onOk()" type="button" value="Ok"/></td>
					<td width="33%" align="center"><input class="button" onClick="onCancel()" type="button" value="Cancel"/></td>
				</tr>
			   </table>
		<td>	   
	</tr>
</table>	   
</div> 
</body>
</html>

Summary ✨

This HTML code creates a simple web page for exporting faces from Google Sketchup to SVG format. It allows users to input file name, scale template, measurement units, and border value. The page also includes buttons for saving, canceling, and confirming the export process. The script is written in JavaScript and interacts with the HTML elements to perform various tasks when the user clicks on different buttons or selects options from dropdown menus.

Alerts (11)

'http://' Insecure HTTP link detected; use HTTPS for encrypted connections
23
'onload=' Inline event handler detected; use addEventListener in external JS for separation of concerns
144
'style=' Inline CSS detected; use external stylesheets for maintainability and performance
145 156 159 163 169 184 187 195
'<img' Image missing alt attribute; add alt text for accessibility
148