Shop More Submit  Join Login
About Deviant Administrator SamMale/United Kingdom Groups :icondt: dt
Devious Technology
Recent Activity
Deviant for 4 Years
Premium Member 'til Hell freezes over
Statistics 10 Deviations 212 Comments 46,919 Pageviews

Newest Deviations

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

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.



Thing thing...

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

Visitors

Once upon a time... 

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

Comments


Add a Comment:
 
: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
:iconcupcakesnshit:
CupcakesNShit Featured By Owner Feb 4, 2014  Hobbyist Digital Artist
Cool stuff!
Reply
:icondreamon-mpak:
DreamON-Mpak Featured By Owner Dec 25, 2013  Hobbyist Digital Artist
With this message I want to thank you for the great work you apply each year to keep this wonderful site.. Over the past 2013 years there were many changes .. some changes were not well received by users (such as changing the symbols to our names) .. some of the changes were sad (closure of DeviantGEAR) .. But we know that you do in order to keep the website up and there giving us the opportunity to present our work in the most - the best way.. We're grateful for every minute of your time that you spend on this site..I hope you will spend with your family and friends some amazing holidays and  new year be wonderful for you.. Filled with personal and professional success.. Much love, health, happiness and luck.. Thank you again .. Your work moves forward this site.. We appreciate your work..

This message it send to each member of DA Team  .. Always remember that you are an amazing team .. As individuals you are amazing people .. as a team you create miracles.. Together you can do much more, and you prove it every year.. Be always Deviants..
Happy Holidays DeaviantART Team .. We users ot this site  love you and always will support you .. :aww:
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Jan 2, 2014
Thank you for the kind thoughts and words, hope you had a great holiday too. :)
Reply
:iconrhynwilliams:
RhynWilliams Featured By Owner Nov 18, 2013   Traditional Artist
uk huh, wow :D
Reply
:iconask-shadestep:
Ask-Shadestep Featured By Owner Jul 22, 2013
((Your badges... how did you break dA? xDD))
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Jul 26, 2013
I forget... uh, I mean I've learned from my experiences and will never make the same mistakes again and have merely put them behind me.
Reply
:icondreamon-mpak:
DreamON-Mpak Featured By Owner Dec 26, 2012  Hobbyist Digital Artist
:holly: Merry Christmas and Happy Holidays..
Thank you for your tireless efforts that make this site more better place for art..It means a lot to us.. appreciate your work..Thank you!
I hope coming 2013 will be filled with many pleasant emotions for you and many personal and professional success.. Be Happy! Be Deviant!
Reply
:iconsgrahamuk:
sgrahamUK Featured By Owner Dec 26, 2012
Thanks for your kind thoughts, hope you had a merry Christmas too. :)
Reply
Add a Comment: