Shop Mobile More Submit  Join Login
About Deviant Senior Member SamMale/United Kingdom Group :icondt: dt
Devious Technology
Recent Activity
Deviant for 6 Years
Core Member 'til Hell freezes over
Statistics 14 Deviations 218 Comments 59,977 Pageviews

Newest Deviations

Groups

Thing thing...

...tha thing thing, thing tha thing tha thing.

Visitors

Once upon a time... 

54%
40 deviants said They all died in freak boating accident.
31%
23 deviants said They lived happily ever after.
15%
11 deviants said He won the girl and lost the girl.

deviantID

sgrahamUK
Sam
United Kingdom
Current Residence: Bristol, UK
Favourite genre of music: Industrial/Synthpop
Operating System: Linux
MP3 player of choice: Creative Muvo
Shell of choice: bash
Wallpaper of choice: Hubble NGC 3324
Interests

Activity


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.



Comments


Add a Comment:
 
:icondrowelfrocker:
DrowElfRocker Featured By Owner 1 day ago   Digital Artist
SAM! SAM! SAM! SAM!

IT'S YOU!
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner 23 hours ago
The Encheesening begins.
Reply
:iconbijancaparis:
BijancaParis Featured By Owner Aug 7, 2015  Hobbyist Traditional Artist
Dude, I love your profile pic.
Reply
:icondevlant:
DEVlANT Featured By Owner Jul 22, 2015  Student Artist
:manhug:
Reply
:iconmidnightexigent:
MidnightExigent Featured By Owner Jul 21, 2015  Hobbyist Digital Artist
:handshake:
Reply
:iconrhynwilliams:
RhynWilliams Featured By Owner Mar 13, 2015   General Artist
:wave:
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Mar 23, 2015
Hola! (belatedly)
Reply
:iconrhynwilliams:
RhynWilliams Featured By Owner Mar 23, 2015   General Artist
How are you doing? :D
Reply
:iconmelito2010:
melito2010 Featured By Owner Apr 6, 2014
petitions.whitehouse.gov/petit…

www.avaaz.org/en/stop_the_corp…

action.sumofus.org/a/australia…

you better tell the others too it's not a joke it's serious or will be the end of deviantart.

But better start to tell the others too
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Mar 14, 2014
Test test, mysterious test.
Reply
Add a Comment: