I am new to Raphael and am trying to do something very simple, but failing miserably. Does anyone know how to create a Raphael canvas and set the background color (ex: green)? This is what I have so far, but when I open it in a browser it displays nothing....
<html>
<head><title></title>
<script src="raphael-min.js"></script>
</head>
<body>
<script type="text/javascript">
//all your javascript goes here
var paper = Raphael(15,40,320,300);
</script>
</body>
</html>
When I put this code inside the js script it displays a circle correctly...
var circle = paper.circle(50,10,10);
circle.attr("fill","#0f0");
But again, my issue is trying to set the background color. Any help would be appreciated.
Thanks
RaphaelJS doesn't provide a default background styling, since its event system relies on being object-driven. However, you can designate a particular DIV and style it accordingly:
<div
id="my_paper_div"
style="background-color:limegreen;width:400px;height:400px"
></div>
Make sure you don't call either the DIV or variable paper. Give them different names, otherwise you'll run into some IE incompatibility.
Redeclare your paper javascript like so:
// declare outside the startup scope, so you can do fancy things later
var my_paper;
// raphaeljs' version of onload
Raphael( function() {
my_paper = Raphael("my_paper_div", 400, 400);
});
Since RaphaelJS rendering doesn't interfere with the background, you can technically mix and match HTML and SVG/VML. For example, see this jsfiddle: http://jsfiddle.net/NQtU5/
You could also draw a rectangle the size of the canvas:
var paper = Raphael("my_paper_div", 600, 400),
placemat = paper.rect(0,0,paper.width,paper.height).attr({"fill" : "#99FF99" });
I usually start this way with Raphael projects because I find it useful to have an object in the background to which to attach events, like a click event that closes all open tooltips.
See example.
Related
I'm using Appcelerator and wanted to do some video processing. I came across Seriously.js and saw that you could potentially do some impressive image and video stream manipulation in a "node" pipeline. So before taking on the appcelerator part of this effort, I figured I'd coerce the camera-source example (see: http://brianchirls.github.io/Seriously.js/examples) into doing more than just edge detection. So I quickly added a pixelation effect on top of that. Code looked like this:
<!DOCTYPE html>
<html>
<head>
<title>Seriously.js Camera Demo</title>
</head>
<body>
<canvas id="target" width="640" height="480"></canvas>
<script src="../../seriously.js"></script>
<script src="../../sources/seriously.camera.js"></script>
<script src="../../effects/seriously.edge.js"></script>
<script src="../../effects/seriously.pixelate.js"></script>
<script>
(function() {
//main code goes here
// declare our variables
var seriously, // the main object that holds the entire composition
source, // wrapper object for source video
edge, // edge detection effect
pixelate, // pixelate effect
target; // a wrapper object for our target canvas
if (Seriously.incompatible('camera')) {
document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
document.querySelector('canvas').style.display = 'none';
return;
}
// construct our seriously object
seriously = new Seriously();
// time to get serious
source = seriously.source('camera');
target = seriously.target('#target');
edge = seriously.effect('edge');
pixelate = seriously.effect('pixelate');
// connect all our nodes in the right order
edge.source = source;
pixelate.source = edge;
target.source = pixelate;
seriously.go();
}());
</script>
</body>
</html>
And cool it worked. But what I really wanted to do is use the blend effect (specifically difference). This takes a top and bottom for two different sources (images or videos, I assume) and performs the specified blend operation between corresponding frames. But what I really want is to have one video stream operated on and have the difference blend effect performed between frames. The closest I could get, which really isn't very close is to use the same video stream as both the top source and bottom source. Of course, there's no difference between them, so I don't really get what I'm after. So I'm guessing I need to access the previous frame, but I don't know how given the operation I see in the API. Here's the code I have:
<!DOCTYPE html>
<html>
<head>
<title>Seriously.js Camera Demo</title>
</head>
<body>
<canvas id="target" width="640" height="480"></canvas>
<script src="../../seriously.js"></script>
<script src="../../sources/seriously.camera.js"></script>
<script src="../../effects/seriously.edge.js"></script>
<script src="../../effects/seriously.blend.js"></script>
<script>
(function() {
//main code goes here
// declare our variables
var seriously, // the main object that holds the entire composition
source, // wrapper object for source video
edge, // edge detection effect
difference, // difference effect
target; // a wrapper object for our target canvas
if (Seriously.incompatible('camera')) {
document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
document.querySelector('canvas').style.display = 'none';
return;
}
// construct our seriously object
seriously = new Seriously();
// time to get serious
source = seriously.source('camera');
target = seriously.target('#target');
edge = seriously.effect('edge');
difference = seriously.effect('blend', { mode: "difference" } );
// connect all our nodes in the right order
edge.source = source;
difference.top = edge;
difference.bottom = edge; // I really want a frame sooner or later from edge
target.source = difference;
seriously.go();
}());
</script>
</body>
</html>
I look forward to a response.
Seriously.js doesn't do much in the way of manipulating image frames in time, at least not in the core code, since it's designed for processing live video, and storing frames could potentially take up a lot of memory.
However, there is a "freeze" effect plugin that could help. A freeze node has a "frozen" setting that causes it to stop updating, and you can use it to process an older frame. What you'd do is set up two freeze nodes, each taking input from your camera, and alternate which of the two nodes is frozen every time you render a frame. You'd also alternate the inputs of your blend node so the "bottom" input always receives the old frame (the "frozen" node) and the top receives the current frame (the unfrozen node).
It's best to set the bottom and top inputs on the blend node to "select" nodes, which will allow you to swap between the two different freeze nodes without disconnecting and re-connecting nodes on your node graph. This way you avoid any costly operations that sometimes happen when you change the network around. And you can do the swap in a callback to the ".go()" method, which runs before every frame render.
Here's a link to a working example:
https://jsbin.com/hisuha/edit?js
I didn't use an edge filter here because it didn't seem necessary, though you're welcome to give it a shot. I'd try putting it right after the camera node and have both freeze nodes use your edge node as the input. It's also worth noting that this is not quite the same as an optical flow effect, which I'm working on.
I've been trying to add blur effect to my posts but only thing that gets blurred is the main post content (pic: http://i.gyazo.com/9d94d2be5dc3f3ada982564aa212336e.jpg). Any idea how to target the background-image, instead of the content?
The code I am using at the moment is:
<script type="text/javascript">
var image = document.querySelector('.post-body img').src;
var target = document.body;
target.style.backgroundImage = "url(" + image + ")";
target.style.backgroundSize = "cover";
document.body.style["background-attachment"] = "fixed";
</script>
I have a odd feeling that you need to make the actual background image into standalone element but I have no idea how.
Also, is there a possibility I could add Blur.js into blogger or is it only for Wordpress? If yes, I'd like to know how?
Thanks in advance.
I worked on this and saw this question. So here's a suggestion.
<script type="text/javascript">
function showBackground() {
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundImage = "url('http://backgroundImage.jpg')";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundPosition = "center center";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundRepeat = "no-repeat";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundAttachment = "fixed";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(5px)";
}
window.onload = showBackground();
</script>
Explanation
As I used the simple template at this time, I noticed that the standard template has a class named body-fauxcolumn-outer which is used to set the background color.
So I adapt my answer here to answer this question.
I just added the following to fix the blur as you can see in the image bellow.
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(15px)";
You could try use this CSS 3 tag:
filter: blur(5px);
You can see the mdn documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
You can do this on Blogger without using any JS or CSS.
Upload your image into a Blogger post as if you want to put it in an article.
Copy the URL of the image and paste it into the body css like so:
body {
background-image: url('YOUR IMAGE URL HERE');
}
Replace the /s-1600/ part of the url with /s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/
Note: You can adjust the radius of the blur by fiddling with the second number after Soften=(in the case above, 20).
The advantage of doing this is it's lighter on code and completely compatible with every device and browser that is capable of loading an image!
So, I am currently working on an HTML5 game that uses a canvas element as a "point bucket", a visual gauge to the number of points the user has gained. But, something strange happens to the canvas when I add an element to the HTML document body
So, when writing to the body with javascript (document.body.innerHTML = "whatever";), the canvas will erase everything within itself and reset. Here is a quick and dirty example that I have whipped up to show you what I mean:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="a"></canvas>
<script type = "text/javascript">
function addToBody()
{
document.body.innerHTML += "<p>I am adding to the body</p>";
}
var can = document.getElementById("a");
var con = can.getContext("2d");
//Draw rectangle on canvas
con.fillRect(0,50,100,100);
//Add text to body after 5 seconds
setTimeout("addToBody()",5000);
</script>
</body>
</html>
I know the traditional way to reset a canvas is to assign the canvas width like so:
canvas.width = canvas.width;
Is this another way to achieve the same effect or just a bug? Can someone give me some insight about this? Thanks.
Doing innerHTML += something means that the contents are retrieved as a string, something is added to that string, then the whole lot is assigned to the body, whereupon (the layout of) it is all recalculated. (and event listeners are dropped - unless they're inline handlers)
You should use the object-oriented functions to do achieve the same.
I.e
var newElem = document.createElement('p');
newElem.appendChild( document.createTextNode('I am adding to the body') );
document.body.appendChild(newElem);
This will leave your canvas untouched.
I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.
Here's the relevant portions so far
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
And heres the edit.js source (its compiled from coffescript)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly.
I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.
I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set.
Thanks for any help.
I'm the guy who made EpicEditor, here's a solution for you:
var editor = new EpicEditor({
basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});
var updateEditorHeight = function () {
editorHeight = $(editor.getElement('editor').body).height();
// +20 for padding
$('#epiceditor').height(editorHeight + 20);
editor.reflow();
}
editor.load(function (){
updateEditorHeight();
});
editor.on('update', function () {
// You should probably put a check here so it doesn't
// run for every update, but just on update, AND if the
// element's height is different then before.
updateEditorHeight();
});
Also, in the CSS I added a overflow: hidden to epiceditor's wrapper so the scrollbars don't appear as it grows.
DEMO: http://jsbin.com/eyidey/1/
DEMO CODE: http://jsbin.com/eyidey/1/edit
UPDATE
As of EpicEditor 0.2.2 autogrow is built in. Just turn on the autogrow option.
Greetings.
I am developing an animated homepage for a Flash-HTML hybrid website, and for the sake of standards, my solution is proving difficult. I am not a Javascript pro, so any help is appreciated!
Here is the run-down:
For Flash users, HTML page loads a variable-height AS3 Flash movie that will start at 556 pixels high, and after finishing its animation sequence, tween via Actionscript + JavaScript to 250 pixels high.
To kick off this movie sequence -- (below-left) -- I am attempting to set the initial height of the Flash movie via MooTools, so if users do not have Flash or Javascript enabled, they will see the shorter-height image area with alternative image content and HTML content revealed (below-right).
Element.setStyle sets the height just fine until swfObject runs, at which point the movie collapses since I am not specifying a height via CSS. If users do not have Flash, it defaults to the height of a static image.
So here is my question: Does anyone know how to dynamically pass a height variable to swfobject when it is set up to width/height # 100%? Am I killing myself for no reason trying to work with two page heights?
Image Sequence:
Left - Initial Flash movie with HTML navigation below
Right - Resized movie at the end of the sequence with HTML nav & content below, looks the same as no-Flash version (static image)
alt text http://client.deicreative.com/op/images/twopages.jpg
^^ should land here for users w/o Flash
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
$('flashContent').setStyle('height', 556); // sets height for initial movie
$('homeContent').setStyle('display', 'none'); // hides homepage text + photos below
doSwfObject(); // attempting to start swfObject after setStyle is done
});
function resizePage(h) { // to be called from AS3
var tweenObj = new Fx.Tween('flashContent');
tweenObj.start('height', h);
}
function doSwfObject(){
var flashvars = {};
var params = { scale: "noScale" };
var attributes = { id: "flashContent", name: "flashContent" };
swfobject.embedSWF("swf/homeMovie.swf", "flashContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
alert(document.getElementById('flashContent').style.height);
// alerts & shows correct height, but page collapses after hitting 'ok'
}
//-->
</script>
The simplest solution is to embed your SWF in a wrapper DIV. Set the SWF to 100% width/height of the wrapper DIV, then use JS to resize the wrapper DIV, not the <object> itself. Less buggy that way.
Since SWFObject 2 replaces the target DIV with the object, you'll need an additional div in your markup:
<div id="wrapper">
<div id="flashcontent"></div>
</div>
becomes
<div id="wrapper">
<object id="flashcontent" width="100%" height="100%" (etc.) ></object>
</div>
I think the act of posting something on here helps me think through the problem -- after doing so, the answer became more clear. So here is my solution for anyone who stumbles across this later.
To animate the Flash movie's height to its initial, taller state while preserving shorter height for non-Flash users (see images above), I use JavaScript the same way I would to tween the movie's height once sequence is complete. The result resembles a push-down ad on a newspaper website.
In AS3, after preloading is done, I tell Javascript to tween the height of the flash movie container (simplified, obviously -- there is no preloading code):
package {
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;
public class HomeMovie extends MovieClip {
private var stageHeight:uint;
public function HomeMovie(){
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
stageHeight = 556;
// Tell javascript the stage needs resizing.
if (ExternalInterface.available) {
ExternalInterface.call("resizePage", stageHeight);
}
}
}
}
In JavaScript (via MooTools):
<script type="text/javascript">
<!--
window.addEvent('domready', function() { // hide content on home-page below movie
$('homeContent').setStyle('display', 'none');
});
function resizePage(h) {
var tweenObj = new Fx.Tween('flashContent', {
property:'height',
duration:500,
transition:Fx.Transitions.Quad.easeOut
});
tweenObj.start(h);
}
//-->
</script>
I will probably take it one step further and check for Flash before hiding the home-page content, so that it will not occur if the user has Javascript but not Flash. Again, this is all for the sake of standards.
Have you tryed SWFForceSize? It's an SWFObject addon and it could help you. Even if you don't use it, you could take a look at the source code to see how they do things.
Btw you don't need SWF object when using Mootools as it has a call called Swiff that does everything SWFObject does and then some! :D