I have a canvas and trying to setup the onmousedrag and onmouseup events in paperjs.
The events never gets fired up when I try to draw something on the canvas object.
<!-- templates/index.html -->
<html>
<head>
<title>Annotation Tool</title>
<!-- CSS Files -->
<link rel="stylesheet" href="/static/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css">
<!-- Paper files -->
<script src="/static/node_modules/paper/dist/paper-full.min.js" charset="utf-8"></script>
<!--<script type="text/paperscript" src="/static/js/paperscript.js" charset="utf-8" canvas="myCanvas"></script>-->
<!-- Javascript files -->
<script src="/static/node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="/static/node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/static/js/scripts.js" charset="utf-8"></script>
</head>
<body>
<script>
</script>
<div class="container">
<div class="row row-bordered">
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="draw-line">Line</button>
<button type="button" class="btn btn-primary" id="draw-rect">Rectangle</button>
<button type="button" class="btn btn-primary" id="draw-poly">Polygon</button>
</div>
</div>
<canvas id="myCanvas"></canvas>
<!--<div class="row">-->
<!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
<!--</div>-->
</div>
</body>
</html>
// scripts.js
var globals = {}
$(document).ready(function(){
alert('loaded')
paper.install(window)
paper.setup(myCanvas)
// tool.minDistance = 10;
var path;
path = new Path();
path.strokeColor = '#00000';
function onMouseDown(event) {
alert('test')
console.log('test')
path.add(event.point);
}
function onMouseDrag(event) {
// Every drag event, add a segment
// to the path at the position of the mouse:
path.add(event.point);
paper.PaperScript.load()
}
})
Your problem is that your code is executed in JavaScript context and you are defining named function onMouseDown and onMouseDrag and expect them to behave like in PaperScript context.
Quoting from documentation:
Installing Event Handlers
PaperScript recognises a couple of special event handlers when they are declared as global functions, while in JavaScript, these need to be manually installed on the appropriate object. Two such handlers are onFrame and onResize, which both belong to the View class. view is automatically created for us if we use the paperScope.setup(canvas) function as in the examples above. So all we have to do is install these handlers on the existing view object.
Working with Tools
Just like with the view handlers, PaperScript simplifies and hides the dealing with Tool objects by making the tool handlers seem global and by creating a tool for us on the fly if any of these handlers are present: onMouseDown, onMouseUp, onMouseDrag, onMouseMove, etc.
For convenience, as you are installing paper into local scope, you can directly set events handlers on the exposed view object.
Here is a simplified example of what you were trying to achieve (drag your mouse over the canvas to draw a path):
// Export paper variables into current scope.
// That's why we can use `view` or `Path` directly.
paper.install(window);
// Bound paper to canvas.
paper.setup('canvas');
var path;
// On mouse down...
view.onMouseDown = function(event) {
// ...init path.
path = new Path();
path.strokeColor = 'black';
};
// On mouse drag...
view.onMouseDrag = function(event) {
// ...add point to the path.
path.add(event.point);
};
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas[resize] {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas id="canvas" resize></canvas>
Related
I'm trying to get a function to run when some element on the page is loaded
<img src="" onload="myfunction()">
<footer>
<script src="main.js"></script>
</footer>
Now, the problem is that the page is trying to load the function before the js file is loaded
Do I have a solution other then loading the js file in the header??
I'd have a tiny function that just waits until the JS file is loaded, and then call the function in the JS file. Example:
<img src="" onload="stateCheck()">
<script>
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') { // could use = 'interactive' too
clearInterval(stateCheck);
myfunction()
}
}, 100);
</script>
<script src="main.js"></script>
I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});
I currently use button and trying to launch a new window passing parameter from mypage to the new page like this
<input type="button" name="launchpg" id="launchpg" value="LaunchPage" onclick="launch_page('<%=list_process_url%>',this.form.myform.options[this.form.myform.options.selectedIndex].value);"/>
Javascript is as below:
<script type="text/javascript">
//call servlet
function launch_new_window(list_process_url,smart_id)
{
popupWindow = window.open(list_process_url+"&id="+id,'List Process Page',
'scrollbars = yes');
}
I am trying to replace button with href link as in..
document.location='main.jsp?PAGE=myPage.jsp&id='+this.form.myform.options[this.form.myfom.options.selectedIndex].value;
I would like to use the same javascript for launching a new window passing the parameter to the script function.
The code however doesn't seem to work as it says Form is not valid for href.
Add this to wherever you want to launch a new page from:
window.location.href = "pageName.html";
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="main">
<script>
$(function () {
<!--Some Logic-->
<!--window.location.href = "NewWindowName.html";-->
}
$("#btnSave").click(function () {
openNewWindow();
});
function openNewWindow()
{
window.location.href = "NewWindowName.html";
}
});
</script>
<article>
<button id="btnSave">Save Data</button>
</article>
</div>
</body>
I found a solution to my question:
Open New Window
I have a website written in C# / ASP.NET. I try to add loading/waiting window while that page is loading. How can I do that in Asp.net? Thanks..
I solved it with DOJO. I used dijit.dialog. Here is a part of my code:
<head>
<!-- api's (you can use also google apis: https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js) -->
<link href="<%=Url.Content("~/Scripts/dojo/dijit/themes/tundra/tundra.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<link href="<%=Url.Content("~/Scripts/dojo/dojo/resources/dojo.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<script djconfig="parseOnLoad: true" type="text/javascript" src="<%=Url.Content("~/Scripts/dojo/dojo/dojo.js")%>"> </script>
</head>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.layout.ContentPane");
// This is the function to show the spinning whell (or something else to demonstrate the loading progress)
function wheelShow() {
var dialog = new dijit.Dialog({ title: "Loading...", id: "wheel" });
dialog.setContent("<img style='height: 55px; width: 55px; text-align:center' src='../../Content/images/loader.gif' />");
dialog.show();
// hiding of close button in dialog
dojo.query("#wheel .dijitDialogCloseIcon").forEach(function(node, index, arr) {
node.style.visibility = "hidden";
});
}
</script>
<body class="tundra">
<!-- after the page will be completly loaded - hide the wheel -->
<div id="delayedContent" onload="dijit.byId('wheel').hide()">
<!-- your page content here... -->
</div>
</body>
I found something like that. It seems easy and practical to use :
http://www.codeproject.com/Articles/42344/AJAX-Enabled-MessageBox
Thanks for your answer by the way.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Services</title>
<link rel="shortcut icon"
type="image/x-icon" href="css/images/favicon.ico" />
<script language="javascript">
var XMLHTTPRequestObj=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObj=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObj=new ActiveObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObj)
{
var obj=document.getElementById(divID);
XMLHttpRequestObj.open("GET", dataSource);
XMLHttpRequestObj.onreadystatechange = function() {
if(XMLHttpRequestObj.readyState == 4 &&
XMLHttpRequestObj.status == 200) {
alert("Inside the ready status "+dataSource);
if(dataSource=="ajaximport/1.jpg") {
alert("The if loop is working");
document.getElementById(
"targetDiv").innerHTML =
XMLHttpRequestObj.responseText;
var img = document.createElement('img');
alert("Variable img Recorded "+img);
img.onload = function (e){
alert("Loading Image");
document.getElementById(
"imgHolder").width=this.width;
document.getElementById(
"imgHolder").height=this.height;
document.getElementById(
"imgHolder").src=this.src;
}
img.onerror = function(e){
alert("Error processing Image. Please try again."+e);
}
img.src = XMLHttpRequestObj.responseImage;
}
else
obj.innerHTML=XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
</script>
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
</head>
<body>
<!-- Content -->
<div id="content">
<!-- Shell -->
<div class="shell">
<h2>We at Creative bits 5 are plegded to serve you our best in.......</h2>
<table>
<th>
<div id="hold_left">
<ul>
<li><label>
<a href="#" onmouseover="getData('ajaximport/1.jpg','targetDiv')">
Graphic Designing
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
Web Devlopment
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
Logo Designing
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
3D Walk-Through
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
3D Modelling
</a></label></li><br>
<li><label>
<a href="#" onmouseover="getData('text1.txt','targetDiv')">
2D Presentations
</a></label></li><br>
</ul>
</div>
</th>
<th>
<div id="targetDiv">
This is target
<img id="imgHolder" src="" alt="This is where image will load" />
</div>
</th>
</table>
</div>
<!-- end Shell -->
</div>
<!-- end Content -->
</body>
</html>
Hi I am Using ASP for my web project. but I got stuck with a problem when I tried loading an image into a target division when a mouse is hovered over a text describing that image.
The division holding the text is on the left side (which describes the loading image)
On the right side is the Target division.
All is fine when I used it to load a text from a .txt file but The problem started when I tried modifying the same code for loading an image in the same division instead of the text
My code is as above
If the image file is a physical file stored on the filesystem then XMLHttpRequest may not be such a good idea to load the image.
I would suggest that in your javascript code you can create an image and set the src to the image path. that would load it and your image onload routines can also run. furthermore, you would get the benefit of browser caching of the image.
It would have made sense to use XMLHttpRequest in case your image was stored as a BLOB somewhere and you need some mechanism to retrieve it. in that case have a look at this link.
Handling images from XMLHttpRequest (with HTML and Javascript)
hope this helps.
EDIT 1(in response to comment): You can have a separate method for setting images via JavaScript.that way the images can be handled by a separate function while dynamic data through XHR can be handled separately.
<script language="javascript">
var XMLHTTPRequestObj = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObj = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObj = new ActiveObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
if (XMLHttpRequestObj) {
var targetDIV = document.getElementById(divID);
XMLHttpRequestObj.open("GET", dataSource);
XMLHttpRequestObj.onreadystatechange = function () {
if (XMLHttpRequestObj.readyState == 4 &&
XMLHttpRequestObj.status == 200)
{
targetDIV.innerHTML = XMLHttpRequestObj.responseText;
}
}
XMLHttpRequestObj.send(null);
}
}
function getImage(dataSource, divID) {
//create image element
var img = document.createElement('img');
//assuming divID has the target div id
img.onload = function (e) {
alert("Loading Image");
document.getElementById(
divID).width = this.width;
document.getElementById(
divID).height = this.height;
}
img.onerror = function (e) {
alert("Error processing Image. Please try again." + e);
}
//set the path here
img.src = dataSource;
var targetDIV = document.getElementById(divID);
//clear contents of target div
if (targetDIV.hasChildNodes()) {
while (targetDIV.childNodes.length >= 1) {
targetDIV.removeChild(targetDIV.firstChild);
}
}
//finally add the image as a child control to the div.
targetDIV.appendChild(img);
}
</script>
and call this by onmouseover="getImage('Image/1.jpg','targetDiv')
please note that this is pure javascript code. you can always use a JS library such as JQuery to do the same work in very few lines of code.