45. Webエリア
WA OPEN URL
WA SET PAGE CONTENT
ページの場所をシステムパスまたはURLを指定
ページの内容をHTMLで指定
追加リソースを相対パスで指定できる
追加リソースを相対パスで指定できるのはMacのみ(ベースURL)
46. Webエリア
WA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
file:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL
47. Webエリア
WA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
file:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL
48. Webエリア
WA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
file:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL
49. Webエリア
WA OPEN URL
システムパスをPOSIXパスに変換
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
Convert path system to POSIX
WA SET PAGE CONTENT
C:/MyFolder/My File.html
/MyFolder/My File.html
// POSIX
50. Webエリア
WA OPEN URL
システムパスをPOSIXパスに変換してURLエスケープ
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
C:/MyFolder/My%20File.html
/MyFolder/My%20File.html
// ?
Convert path system to POSIX (...;*)
51. Webエリア
WA OPEN URL
システムパスをURLに変換
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
file:///C:/MyFolder/My%20File.html
file:////MyFolder/My%20File.html
// URL (Windows)
“file:///”+Convert path system to POSIX (...;*)
52. Webエリア
WA OPEN URL
システムパスをURLに変換
WA SET PAGE CONTENT
HTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENT
file://C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL (Mac OS)
“file://”+Convert path system to POSIX (...;*)
55. Webエリア
ベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>
56. Webエリア
ベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>
57. Webエリア
ベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)
58. Webエリア
ベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)
59. Webエリア
ベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head>
<base href=”file:///MyFolder/” />
<script src=”js/jquery.js”></script>
<link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)
73. Webエリア
フォームイベント
On End URL Loading
$filter{1}:="http://*"
$access{1}:=False
WA SET URL FILTERS (*;...;$filter;$access)
On Load
WA OPEN URL/WA SET PAGE CONTENT
WA SET PREFERENCE (*;...;wa enable JavaScript;True)
74. Webエリア
フォームイベント
On URL Filtering
$url:=WA Get last filtered URL
On End URL Loading
$filter{1}:="http://*"
$access{1}:=False
WA SET URL FILTERS (*;...;$filter;$access)
On Load
WA OPEN URL/WA SET PAGE CONTENT
WA SET PREFERENCE (*;...;wa enable JavaScript;True)
79. Webエリア
フォームイベント
On Clicked
WA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)
function clearCanvas () {
window.location = "http://clearCanvas/";
}
80. Webエリア
フォームイベント
On Clicked
WA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)
function clearCanvas () {
window.location = "http://clearCanvas/";
}
On URL Filtering
$url:=WA Get last filtered URL
100. ペイントツール
えんぴつ(フリーライン)
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
101. ペイントツール
えんぴつ(フリーライン)
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
102. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
103. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
104. var tempCanvas;
var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');
!
if (!tempCanvas) {
! alert('Error: cannot create a new canvas element!');
! return;
}
tempCanvas.id = 'myCanvasTemp';
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {
! alert('Error: failed to get the dtool element!');
! return;
}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');
!
if (!tempCanvas) {
! alert('Error: cannot create a new canvas element!');
! return;
}
tempCanvas.id = 'myCanvasTemp';
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {
! alert('Error: failed to get the dtool element!');
! return;
}
tool_select.addEventListener('change', ev_tool_change, false);
<select id="dtool" style="visibility:hidden;">
! <option value="line">Line</option>
! <option value="rect">Rectangle</option>
! <option value="pencil">Pencil</option>
! <option value="circle">Circle</option>
! <option value="eraser">Eraser</option>
! <option value="rectFill">Solid Rectangle</option>
! <option value="circleFill">Solid Circle</option>
</select>
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
イベントリスナーでツールを切り替え
105. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
106. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
107. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
108. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
pencil
109. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
pencil
pencil
110. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
tools[ pencil ]
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
pencil
pencil
111. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
tools[ pencil ]
112. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
tools[ pencil ]
tools.pencil
113. ペイントツール
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
function fireEvent(element,event){
! if (document.createEventObject){
! // for IE
! var evt = document.createEventObject();
! return element.fireEvent('on'+event,evt);
! }
! else{
! // for others
! var evt = document.createEvent('HTMLEvents');
! evt.initEvent(event, true, true); // bubbling,cancellable
! return !element.dispatchEvent(evt);
! }
}
function ev_tool_change (ev) {
! if (tools[this.value]) {
! tool = new tools[this.value]();
! }
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {
! var obj = document.getElementById('dtool');
! obj.value = drawTool;
! drawingTool = drawTool;
! fireEvent(obj,'change');
}
tools.pencil = function () {
! var tool = this;
! this.started = false;
! this.mousedown = function (ev) {
! ! contextTemp.beginPath();
! ! contextTemp.moveTo(ev._x, ev._y);
! ! tool.started = true;
! ! saveImage();
! };
! this.mousemove = function (ev) {
! ! if (tool.started) {
! ! ! contextTemp.lineTo(ev._x, ev._y);
! ! ! contextTemp.stroke();
! ! }
! };
! this.mouseup = function (ev) {
! ! if (tool.started) {
! ! ! tool.mousemove(ev);
! ! ! tool.started = false;
! ! ! img_update();
! ! }
! };
};
tools.pencil
114. ペイントツール
ライン色
intColor:=Select RGB color (intColor)
$hexColor:=UTIL_IntToHex (intColor)
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeColor";*;$hexColor)
function changeColor(hexColor) {
! var tempCanvas = document.getElementById('myCanvasTemp');
! var tempContext = tempCanvas.getContext('2d');
! color = hexColor;
! tempContext.strokeStyle = hexColor;
}
115. ペイントツール
ライン幅
function changeStrokeWidth(lWidth) {
! var tempCanvas = document.getElementById('myCanvasTemp');
! var tempContext = tempCanvas.getContext('2d');
! strokeWidth = lWidth;
! tempContext.lineWidth = lWidth;
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeStrokeWidth";*;size)
116. ペイントツール
書き出し
function getData() {
! var canvas = document.getElementById('myCanvas');
! var strData = canvas.toDataURL('image/png');
! return strData;
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"getData";image)
TEXT TO BLOB (image;$image_blob)
CREATE RECORD ([Images])
[Images]image_name:=imageName
[Images]image_data:=$image_blob
SAVE RECORD ([Images])
117. ペイントツール
読み込み
function loadImage(imageSource) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObject = new Image();
imageObject.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(imageObject, 0, 0, canvas.width, canvas.height);
};
imageObject.src = imageSource;
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"loadImage";*;image)