DIR : /home/kozerus/public_html/pn/uize/site-source/examples/image-port.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic Image Port | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="Uize.Widget.ImagePort"/>
<meta name="description" content="The image port widget displays an image in a view port using logical sizing and positioning values. See it here, with controls for all its properties."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<style type="text/css">
.label {
font-size:10px;
}
select {
border:1px solid #fff;
font-size:12px;
width:40px;
height:20px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Basic Image Port
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/image-port.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>In this example, an instance of <a href="../reference/Uize.Widget.ImagePort.html"><code>Uize.Widget.ImagePort</code></a> is wired up to demonstrate the sizing and positioning principles of this class. Slider controls are provided for controlling the values of the <code>alignX</code>, <code>alignY</code>, and <code>sizingValue</code> state properties, and <code>select</code> dropdowns are provided for controlling the values of the <code>sizingLowerBound</code> and <code>sizingUpperBound</code> state properties. Alignment for both the X and Y axes is adjustable between <code>0</code> and <code>1</code>. In this example, <code>sizingValue</code> is adjustable between <code>0</code> and <code>3</code>, where <code>0</code> means that the image will be sized to the <code>sizingLowerBound</code>, <code>1</code> means that the image will be sized to the <code>sizingUpperBound</code>, and values above <code>1</code> will oversize the image.</p>
</div>
<form>
<table border="0" cellspacing="0" cellpadding="0" style="margin:auto;">
<tr>
<td></td>
<td></td>
<td width="5"></td>
<td class="label" style="text-align:center;">alignY</td>
<td width="15"></td>
<td>
<select id="page-sizingUpperBound">
<option value="fill" selected>fill</option>
<option value="fit">fit</option>
</select>
</td>
<td class="label" style="padding-left:5px;">sizingUpperBound</td>
</tr>
<tr>
<td></td>
<td>
<div id="page_imagePort" style="position:relative; width:300px; height:300px; overflow:hidden; background:#000; border:1px solid #555;">
<img id="page_imagePort-image" src="http://upload.wikimedia.org/wikipedia/commons/d/db/Nasa_blue_marble.jpg" style="width:3000px; height:3075px; position:absolute;" alt=""/>
</div>
</td>
<td width="5"></td>
<td id="page-alignYSlider" style="height:300px;"></td>
<td width="5"></td>
<td>
<div id="page-sizingValueSlider" style="height:300px;"></div>
</td>
<td class="label" valign="center" style="padding-left:5px;">sizingValue (0 to 3)</td>
</tr>
<tr>
<td colspan="7" height="5"></td>
</tr>
<tr>
<td class="label" style="padding-right:5px;">alignX</td>
<td id="page-alignXSlider" style="width:300px;"></td>
<td></td>
<td></td>
<td></td>
<td>
<select id="page-sizingLowerBound">
<option value="fit">fit</option>
<option value="0" selected>0</option>
</select>
</td>
<td class="label" style="padding-left:5px;">sizingLowerBound</td>
</tr>
</table>
</form>
</div>
<!-- JavaScript code to activate the image port functionality -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.ImagePort',
'Uize.Widgets.Slider.Widget'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** add the image port child widget ***/
var imagePort = page.addChild (
'imagePort',
Uize.Widget.ImagePort,
{
sizingLowerBound:'0',
sizingUpperBound:'fill',
sizingValue:.5,
alignX:.5,
alignY:.5
}
);
/*** code to update the image port instance based on user input values ***/
function updateImagePortSettings () {
imagePort.set ({
alignX:+alignXSlider,
alignY:+alignYSlider,
sizingUpperBound:page.getNodeValue ('sizingUpperBound'),
sizingLowerBound:page.getNodeValue ('sizingLowerBound'),
sizingValue:+sizingValueSlider
});
}
/*** common values shared by alignX, alignY, and sizingValue sliders ***/
Uize.Widgets.Slider.Widget.set ({
value:.5,
fullColor:'#999',
trackLength:'100%',
increments:0,
built:false
});
/*** add the alignX slider child widget ***/
var alignXSlider = page.addChild (
'alignXSlider',
Uize.Widgets.Slider.Widget,
{
minValue:0,
maxValue:1,
orientation:'horizontal'
}
);
alignXSlider.wire ('Changed.value',updateImagePortSettings);
/*** add the alignY slider child widget ***/
var alignYSlider = page.addChild (
'alignYSlider',
Uize.Widgets.Slider.Widget,
{
minValue:1,
maxValue:0,
orientation:'vertical'
}
);
alignYSlider.wire ('Changed.value',updateImagePortSettings);
/*** add the sizingValue slider child widget ***/
var sizingValueSlider = page.addChild (
'sizingValueSlider',
Uize.Widgets.Slider.Widget,
{
minValue:0,
maxValue:10,
value:1,
orientation:'vertical'
}
);
sizingValueSlider.wire ('Changed.value',updateImagePortSettings);
/*** initialize the ImagePort instance ***/
updateImagePortSettings ();
/*** wire up the page widget ***/
page.wireUi ();
/*** watch for changes in sizing bound values ***/
page.wireNode ('sizingUpperBound','change',updateImagePortSettings);
page.wireNode ('sizingLowerBound','change',updateImagePortSettings);
}
);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer