Update vector-labels example
Add forms to let the user change the labels as they want. Text 'Wrap' doesn't work properly. '\n' are supposed to allow line to break.
This commit is contained in:
Alexandre Dubé
@@ -8,6 +8,45 @@
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style type="text/css">
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 15px;
|
||||
};
|
||||
|
||||
.scale-cnt {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.edit-form-ctn {
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
width: 230px;
|
||||
padding: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.edit-form input[type="button"] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.edit-form-elem label {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.edit-form-elem input[type="text"] {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.edit-form-elem select {
|
||||
width: 130px;
|
||||
}
|
||||
</style>
|
||||
<title>Vector labels example</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -28,6 +67,233 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input type="button" value="Refresh" onclick="refreshPoints();" />
|
||||
<h2>Points</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="points-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shorten" selected="selected">Shorten</option>
|
||||
<option value="wrap">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="points-maxreso">
|
||||
<option value="384000">384,000</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16"></option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="points-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="points-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="points-font">
|
||||
<option value="Arial" selected="selected">Arial</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="points-weight">
|
||||
<option value="bold">Bold</option>
|
||||
<option value="normal" selected="selected">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="12px" id="points-size" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="#aa3300" id="points-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="points-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="points-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input type="button" value="Refresh" onclick="refreshLines();" />
|
||||
<h2>Lines</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="lines-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shorten">Shorten</option>
|
||||
<option value="wrap" selected="selected">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="lines-maxreso">
|
||||
<option value="384000">384,000</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16"></option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="lines-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="lines-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="lines-font">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Courier New" selected="selected">Courier New</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="lines-weight">
|
||||
<option value="bold" selected="selected">Bold</option>
|
||||
<option value="normal">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="12px" id="lines-size" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="green" id="lines-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="lines-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="lines-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input type="button" value="Refresh" onclick="refreshPolygons();" />
|
||||
<h2>Polygons</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="polygons-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal" selected="selected">Normal</option>
|
||||
<option value="shorten">Shorten</option>
|
||||
<option value="wrap">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="polygons-maxreso">
|
||||
<option value="384000">384,000</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16"></option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="polygons-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="polygons-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="polygons-font">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Verdana" selected="selected">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="polygons-weight">
|
||||
<option value="bold" selected="selected">Bold</option>
|
||||
<option value="normal">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="10px" id="polygons-size" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="blue" id="polygons-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="polygons-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="polygons-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:left;"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
@@ -41,6 +307,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
Reference in New Issue
Block a user