Shop Mobile More Submit  Join Login

Embedding deviantART muro

Tue Feb 12, 2013, 8:26 AM

A new way to use deviantART muro


The deviantART muro team have been beavering away for a little while on a new feature for third-party developers, and today we're pleased to reveal that deviantART muro now has a third-party embedding API.


What does this mean?


In simple terms it means that with a small amount of JavaScript code, you can bring the power of deviantART muro to your website, allowing your visitors to draw or edit images anywhere you like.


To make life easier for you there's a jQuery binding for the API, or a raw HTML/JavaScript example if you prefer to work more directly or use a different framework. There's also a WordPress plugin that can be used as an example of what can be done, or use on your blog if it's run on WordPress.


The jQuery plugin



Using the jQuery plugin is the easiest way to embed deviantART muro in your site, this quick snippet of JavaScript is an example of how little is involved in hooking up to deviantART muro to edit an image and receive the edited image back:


// Embed deviantART muro within the element with id "damuro-goes-here".
$('#damuro-goes-here').damuro({
   // Say what image we want the user to embed.
   background: '../images/crane_squared_by_mudimba_and_draweverywhere.png',
   // We don't want to have deviantART muro load automatically.
   autoload: false
   })
   // Bind a single-use onclick handler to open muro when they click on the splash screen
   .one('click', function () { $(this).damuro().open(); })
   // Chain down to the damuro object rather than $('#damuro-goes-here')
   .damuro()
   // The .damuro() object is a promise, so lets bind a done() and fail() handler.
   .done(function (data) {
           // Here's where you'd save the image, we'll just set the page background as an example
           if (data.image && !/\'/.test(data.image)) {
               $('body').css('backgroundImage', "url('" + data.image + "')");
           }
           $(this).hide().damuro().remove();
       })
   .fail(function (data) {
           $(this).hide().damuro().remove();
           if (data.error) {
               // Something failed in saving the image.
               $('body').append('<p>Sorry, something broke: ' + data.error + '.</p>');
           } else {
               // The user pressed "done" without making any changes.
               $('body').append("<p>Be that way then, don't edit anything.</p>");
           }
       });

If you want to see an example like this in action, take a look at the examples page.


The jQuery plugin also provides a convenient interface to the command API, allowing you to send commands to an embedded deviantART muro, the range of commands is currently fairly limited but it does allow you to apply filters or import new images into layers:


$('#damuro-goes-here').damuro().command('filter', {
   filter: 'Sobel',
   layer:  'Background'
   })
   .promise()
   .done(function (data) {
       alert("The filter was applied.");
   })
   .fail(function (data) {
       alert("There was an error applying the filter: " + data.error);
   });

Raw HTML/JavaScript examples



The jQuery plugin is the recommended way to use the deviantART muro API, but if you don't or can't use jQuery, you'll probably find the Raw HTML/JavaScript reference implementation to be useful, it has no external dependencies and can either be copied directly or used as the basis to write a plugin for the JavaScript framework of your choice.


The interface is less friendly: you'll need to send messages via postMessage() directly and implement your own secure event listener to receive the messages back and take care of setup and teardown yourself.


If you do use this example code to write your own JavaScript framework plugin, please let us know so we can give you a shout out and link to you.


deviantART muro WordPress plugin



If you're stumped for ideas or just want to add deviantART muro to your WordPress blog then the deviantART muro WordPress plugin is for you.


It hooks into WordPress in three places:


  • The Media Library - Now you can draw items directly into your WordPress Media Library.
  • Comments - You can enable deviantART muro in comments, allowing your site visitors to post images with their comments. You can configure moderation independently of text-only comments if you're not too keen on trusting the internet-at-large with uploading images to your blog.
  • Article shortcodes - You can embed an instance of deviantART muro within any article using a [damuro background='filename.jpg'] shortcode, this allows visitors to draw on an image of your choosing and post the result as a comment. How you use this is up to you, but you could use it to ask for critiques on your work or just to run competitions with a starting background.

Licensing and where to get it


All the code in these plugins is open-source under a standard BSD 3-Clause license, the image assets are under a Creative Commons Attribution 3.0 License.


You can find the latest version of all this code in our GitHub repository, or if you prefer you can fetch the latest stable releases from the jQuery plugins site and the WordPress plugins site.


Please note that the open-source license only applies to the plugin code provided on GitHub, not to the core deviantART muro code running on Sta.sh, that remains copyrighted and is the property of deviantART.



Ways to use deviantART muro on your own site.
Add a Comment:
 
:iconphotofroggy:
photofroggy Featured By Owner Mar 4, 2013  Hobbyist Artist
Just thought I'd let you know; I'm considering how I can integrate this with the dAmn chats on here.

I am making my own browser based client for dAmn, which can be seen here, and there's a deviation on my page for it.

I reckon it might be interesting to be able to draw images right in the client, stash them, then post a link automatically. And then I could probably have my client automatically load muro drawings posted by people (unless disabled).

Considering this I decided to give it a go on the demo page; saving seems pretty slow and buggy. Slowness may have been due to the crane drawing being saved. When muro removed itself, other items on the page seemed to shift upwards, with the items originally above muro overlapping the content below. Also, there was no longer a splash image. Is this intentional? Makes it seem like a single-use app not really intended for multiple uses in one session.
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Mar 5, 2013
Thanks for the interest. :)

You don't have to have the embed remove itself when it's done, or you could remove it and replace it with something else. You could reset it to an initial state ready to be used again if you wanted. The jQuery library gives you the tools to do these things. It's up to you to decide what you want to do with it though, the example is just an example of one thing that could be done.

Where you put the embed is entirely up to you too, you can put it in normal document flow or in a modal over the top, that's entirely up to you - the jQuery plugin doesn't care where you attach to the DOM. Only constraint is that the element you attach to is display: visible so that the box model has dimensions when dA queries its layout size. (It can be visibility: hidden, just not display: none.)

About slowness: When you draw with dA muro it autosaves to Sta.sh, this autosave process saves incrementally in smallish chunks while you work, but it doesn't kick in until you've drawn a few strokes. If you exit before the autosave process has got started, it has to do a full save rather than an incremental save, so it appears to take longer than it would in normal use. TL;DR: draw 2 strokes and save: slow; draw for 5 minutes and save: faster.

Depending on browser, the underlying HTML5 canvas implementation might be slow too, the larger the image the more this will be an issue.

If there's bugs in the way the example is rendering, I'll need to know a browser version and OS to reproduce and debug.

The example itself could probably do with a decent rewrite, it appears to be a common point of confusion about what it's doing and why.
Reply
:iconphotofroggy:
photofroggy Featured By Owner Mar 5, 2013  Hobbyist Artist
Ok cool.

So far, I've got the sandbox page working on its own, but when trying to actually embed this on another page using the jQuery plugin, I get this error.

"Unsafe JavaScript attempt to access frame with URL [link] from frame with URL [link]?. Domains, protocols and ports must match."

Not sure why this would be. This is the code I'm using to embed Muro: [link]

this.window is a jQuery thingy, so this should be working as per the example, as far as I can tell. This happened when testing locally and when testing with the page on a remote server. I haven't done anything with the .done and .fail callbacks yet because I was just trying to get it loaded first. Seems more problematic than I first though.

My web browser (Chrome v25, Windows and OS X) seems to be trying to prevent an XSS attempt, but it doesn't do this for the example page that you guys have put up, and the as mentioned before, the sandbox page works without problems.

Any ideas on what I'm doing wrong would be handy. If you need to see it in action, you can try visiting a channel using the mchat URI. Currently, /mchat/ only works when going directly to a channel, the other pages are not set up to work with it, as it is only meant as a test. On this version of the client, pressing the paint brush button above the input box should bring up the box with Muro embedded. Click "Test...". Chrome no likey.

Thanks for reading and responding!

It'll end up being that I've made some really stupid mistake, probably.
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Mar 6, 2013
"Unsafe JavaScript attempt to access frame with URL...". This is a warning rather than an error, WebKit browsers like Chrome or Safari emit it when postMessage (a way of passing messages between iframes) use an origin of '*'. It's ignorable - dA muro and the jQuery plugin verify the security of postMessage via the message.source attribute. We have to use an origin of '*' because we don't know what domain you're going to be running on. That said, if the warning bothers you, you can supply an 'origin' parameter with the correct value as part of the $().damuro() call.

Something like this.window.find('.content').damuro({origin: '[link]}) would work in your case. There might still be instances of the warning happening from within the communications sent my dA muro back up to the embedding site.

Looking at your mchat app, looks like the container div is 0px high and the jQuery damuro plugin is trying to adopt that height. Either supply height parameters to the damuro() constructor or style the div you're attaching to to have the height you want. Other than that it appears to be loading dA muro fine.
Reply
:iconphotofroggy:
photofroggy Featured By Owner Mar 14, 2013  Hobbyist Artist
Looking at my own stash, it looks as though 0 indicates a type. 0 being a deviation, 2 being a stack/folder. This is a guess because I can't find an example of anything starting with 1.

What is going on here?
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Mar 15, 2013
It's mentioned in the reference manual: [link] :)
Reply
:iconphotofroggy:
photofroggy Featured By Owner Mar 14, 2013  Hobbyist Artist
It seems as though the deviationid value returned when saving to sta.sh is not correct. The ID returned is missing the first character. So far, the first character always seems to be 0 (zero). I'm unsure if it will always be the same, whether it is by design or what. Is this intentional or is it a bug?

I could just assume that I have to prefix the returned deviationid with a 0, but currently I have no way of knowing if this would be correct for every case.

Having a valid deviationid would be useful as I am planning on making my client plugin automatically drop a sta.sh link in the input box so that people can post their drawings into dAmn straight away.

Thanks for your help so far.
Reply
:iconphotofroggy:
photofroggy Featured By Owner Mar 6, 2013  Hobbyist Artist
Ah, silly error on my part. Thanks for the help!

Might throw something in your direction when I'm done with this stuff; will hopefully be interesting.
Reply
:icondevibrigard:
DeviBrigard Featured By Owner Feb 13, 2013
Awesome :la:
Reply
:iconmiontre:
miontre Featured By Owner Feb 12, 2013  Hobbyist Photographer
That's awesome! :)
Reply
:iconparallellogic:
parallellogic Featured By Owner Feb 12, 2013
Starting from [link] the "Click to load in deviantART muro" button freezes my browser FF18.0.2 for about 10 seconds, and for another 5 seconds the browser responds in a jerky manner

After I click "Done" at the top right and it says "Saving from deviantART muro..." and never seems to confirm that the image has been saved
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Feb 12, 2013
Thanks for taking a look so quickly! :)

Loading deviantART muro can take a little while, that's probably the 10 seconds + 5 seconds sluggishness, firefox can be particularly slow for canvas operations. It's happening behind the scenes in the demo so you don't see much activity, if you visit [link] directly you should see the same process taking similar time directly in your browser window.

Did you do any drawing before clicking on the "Done" button?
Reply
:iconparallellogic:
parallellogic Featured By Owner Feb 12, 2013
Sure thing, you may also want to poke #devBUG if you're looking for feedback on Alpha features

Hmm, I see what you mean, it lags while opening the tab you provided too. I don't know the specifics of the technology you're working with, but do you anticipate performance will increase over time as the underlying (Canvas?) code is upgraded?

I draw a squiggle on top of the drawing. It appears with the squiggle in my Stash correctly, I just don't see any confirmation that it completed the save operation in the remote Muro session itself - it appears to be hanging while saving (perhaps that's intended behavior? Is there a dialog that should appear after the Muro is done saving?)...

Perhaps I wasn't waiting long enough. Right now it seems to do something after 20 seconds. Muro and the "Saving..." status message vanish and my final image (with the squiggle) appears behind the "Download .zip" buttons: [link]

As a developer, I'm not immediately seeing the application for this since it's currently giving me only one drawing session and saves the final image to my personal Stash. Should I presume that dA will require any person that wants to use Muro remotely to first create a dA account? Can I use Muro as a virtual whiteboard? So each new visitor to my webpage can make an edit to the image, save it, and the new image is presented to all subsequent visitors to my webpage? Will we be able to use such a collaborative whiteboard through our deviantART journals?
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Feb 13, 2013
Canvas performance is generally improving among browsers, Chrome and Safari are considerably faster than Firefox, but Firefox could well address that at some point. I don't know how far up their list of priorities it is, but it's certainly a possibility.

The demo page is constrained in what it can achieve - it's a demo rather than a fully fledged application - in particular it doesn't have any server-side code to save the image anywhere, so the only thing it can do is put the image somewhere in the page temporarily.

You do have full access to the image data within the client-side code however, and can literally do whatever you imagine with it - it's trivially easy to hook it up to an AJAX call to save it to the server - and this is what the WordPress plugin does.

What you do from there is really up to you, we're providing this as a tool for people to use rather than trying to say what it should be used for, I'm sure there's people out there who'll come up with stuff we'd never have thought of. :)

These are great questions, I think I'll put them in a FAQ and clarify the documentation where appropriate. Thanks.
Reply
Add a Comment:
 
×

Featured in Collections

JOURNALS AND NEWS by Elandria

Articles and journals by Eitvys200

README.TXT by MidnightExigent


More from DeviantArt



Details

Submitted on
February 12, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
47,706 (2 today)
Favourites
14 (who?)
Comments
14
×