i have a problem. I want to use my Processing code on the Google appengine cloud. I load the svg file asynchronously visa #psj preload tag and i have the map1.svg in the same directory as the .pde file, so I just want to display a PShape but it doesn't show up. I have the following processing code:
EDITED SEE BELOW !
I have all the files (.pde, processing lib, geoloc.js) and the map1.svg in the same folder ../static/processing/ .
Has anybody managed to get a processing file on the app engine, where the script uses loadImage() or loadShape() ? By the way the geoloc.js library is working and the processing code also works if I don't use the loadShape function, so i suspect that the path to map1.svg isn't correct ?
EDIT !!!!!!!!!
Ok so now i have stripped the files as much as possible and the map is still not shown on the appengine, the .html works if i open it in my desktop, so I still supspect that it has something to do with the loading of the map1.svg file in the processing code. I must point out that the processing .pde source is found it's just the map that is not shown !
Here is my crunched processing code:
EDITED AGAIN ! IT'S WORKING NOW...THE PATH SHOULD BE MORE SPECIFIC - relative !
/* #pjs preload="../static/processing/map1.svg"; */
PShape worldMap;
void setup ()
{
size(500, 500);
worldMap = loadShape("../static/processing/map1.svg");
}
void draw ()
{
shape(worldMap, 0, 0, 500, 500);
}
And the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>hiToYouToo : Built with Processing and Processing.js</title>
<meta name="Generator" content="Processing" />
<!--[if lt IE 9]>
<script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
<![endif]-->
<script src="../static/processing/processing.js" type="text/javascript"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'hiToYouToo'; }
</script>
</head>
<body>
<div id="content">
<div>
<canvas id="hiToYouToo" data-processing-sources="../static/processing/hiToYouToo.pde"
width="500" height="500">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
</div>
</body>
Ok so just to answer myself formally, so anyone looking for this would quickly find the answer.
Here is the processing code on app engine:
/* #pjs preload="../static/processing/map1.svg"; */
PShape worldMap;
void setup ()
{
size(500, 500);
worldMap = loadShape("../static/processing/map1.svg");
}
void draw ()
{
shape(worldMap, 0, 0, 500, 500);
}
And the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>hiToYouToo : Built with Processing and Processing.js</title>
<meta name="Generator" content="Processing" />
<!--[if lt IE 9]>
<script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
<![endif]-->
<script src="../static/processing/processing.js" type="text/javascript"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'hiToYouToo'; }
</script>
</head>
<body>
<div id="content">
<div>
<canvas id="hiToYouToo" data-processing-sources="../static/processing/hiToYouToo.pde"
width="500" height="500">
<p>Your browser does not support the canvas tag.</p>
<!-- Note: you can put any alternative content here. -->
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</div>
</div>
</body>
Related
i want create generate web to pdf. In My Website,
this script is work, but not generate images in my website.
you can download my script in this link > http://tinyurl.com/jspdftesting
you can test in file "test.html"
Before ask i already try search in google, but not found about this case.
Please help me. This is my script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('try.pdf');
});
});
</script>
</head>
<body >
<div id="target">
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.<br/>
<img src="http://cdnstatic-2.mydestination.com/library/images/481030_1680_948.jpg" width="200px" height="100px">
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
HTML/WEBPAGE VIEW
PDF VIEW
Someone might need this one day; Images have to be converted to base64.
I've found various ideas on how to detect when a web video ends, but can't get the syntax right for the way I'm using javascript to play the video. Note that I'm using version 4 of the jwplayer.
Here is the HTML that uses swfobject.js and player.swf. It works fine, but I want to add code that detects when the video has finished at will then redirect to a web location using - window.location.href = http://www.webpage.com
Any help will be very appreciated! Here's the full page of HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='swfobject.js'></script>
</head>
<body lang=EN-US bgcolor='#000000'>
<center>
<p id='preview'></p>
<script type='text/javascript'>
var so = new SWFObject('player.swf','player1','640','381','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','&file=mymovie.m4v&bufferlength=3&autostart=true&controlbar=bottom');
so.write('preview');
</script>
</center>
</body>
</html>
You need to use our JS API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
And, use our JW Embedder (Not SwfObject) - http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player
Then, the set up will look something like this:
<h2>Redirecting on complete</h2>
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"bunny.mp4",
flashplayer:"player.swf",
height:400,
width:600,
events:{
onComplete: function() {
window.location = "http://www.google.com";
}
}
});
</script>
Hope that helps!
I am a newbie so treat me gently.
I want to open an Highslide html window on load. I have seen an explanation on the old "Highsoft" site but cannot make it work.
Here is my test file without any script to make it open onload:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open on load - test</title>
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf- 8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<div>
<a href="#" onclick="return hs.htmlExpand(this, {
width: 400, creditsPosition: 'bottom left',
headingText: 'Stoke Gabriel Boating Association', wrapperClassName: 'titlebar' } )">Inline HTML</a>
<div class="highslide-maincontent">
<h3>Next Sailing Event</h3>
The next sailing event will take place on June 23.
</div>
</div>
</body>
</html>
What do I need to do to make the Highslide window open onload as well as keeping the clickable link?
Best Wishes
Geoffrey
First, you need to use the full Highslide script, not the stripped-down highslide-with-html.js version. Use highslide-full.js or highslide-full.min.js (a compressed version of the full script).
Next, your href needs a unique ID:
<a href="#" id="image1" onclick="return hs.htmlExpand....
The ID can be anything, as long as it's unique.
Finally, add this to the Highslide config options in your highslide.config.js file:
hs.addEventListener(window, "load", function() {
document.getElementById('image1').onclick();
});
hs.addEventListener(document, "ready", function() {
document.getElementById('image1').focus();
});
A good way would be to make a function fire when the document is ready.
if (document.readyState === "complete") { window.open(URL,name,specs,replace) }
Extra information:
Javascript - How to detect if document has loaded (IE 7/Firefox 3)
http://www.w3schools.com/jsref/prop_doc_readystate.asp
http://www.w3schools.com/jsref/met_win_open.asp
I am building a website with my school work (dreamfoxgames.com).
If you click on a button called "play" a popup/Modal will come with the game in flash or unity plugin. My problem is that when a visitor loads the page they will automatic load the flash file. This means that the music will start and the page will be slow with loading (all those games).
Is there a way to only load the flash player after somebody hit the play button?
Thanks a lot!
It can also be done using an embed element (no need for external api):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var flashEmbed = null;
function startFlash() {
if(flashEmbed != null) {
document.getElementById("flashContainer").removeChild(flashEmbed);
}
flashEmbed = document.createElement("embed");
document.getElementById("flashContainer").appendChild(flashEmbed);
flashEmbed.src="Flashfile.swf";
flashEmbed.type="application/x-shockwave-flash";
}
</script>
</head>
<body>
<button onclick="startFlash()">start flash</button>
<div id="flashContainer"></div>
</body>
</html>
You can use swfobject to load swf content in div.
Suppose if you have a div in your html as below
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
</head>
<body>
<div id="myContent">
swf will be embedded here
</div>
<button onclick="playSwf()">Click to play swf</button>
</body>
</html>
To play the swf..
<script type="text/javascript">
function playSwf()
{
//Syntax
//swfobject.embedSWF(swfUrl, id, width, height, version,
// expressInstallSwfurl, flashvars, params,
// attributes, callbackFn)
//optional parameters omitted
swfobject.embedSWF("test.swf", "myContent", "400", "400","10");
}
</script>
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??