Created
April 25, 2013 23:34
-
-
Save taliesinb/5464092 to your computer and use it in GitHub Desktop.
Easily create jquery-based slider animations from Mathematica. Get "slider.m" and then try: exportSlider[Table[Plot[Sin[x]+Sin[(b/10)x+b],{x,1,100},ImageSize->500,AspectRatio->.4,PlotRange->{{0,100},{-2,2}}],{b,1,20,1}]] That will rasterize the graphics expressions and create a composite jpg in Directory[] with a unique name, and return a snippe…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" > | |
| <title>Slider example</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> | |
| <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" media="all" /> | |
| </head> | |
| <body style="margin-top:40px;margin-left:40px;"> | |
| <p>Some text</p> | |
| INSERT SLIDER SNIPPET HERE | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ClearAll[StringTemplate]; | |
| StringTemplate[template_String][posargs___, ruleargs___Rule] := StringReplace[template, | |
| {"`" ~~ d:DigitCharacter.. ~~ "`" :> ToString[Part[{posargs}, ToExpression[d]]], | |
| "`" ~~ w:WordCharacter.. ~~ "`" :> ToString[Replace[w, {ruleargs, _ -> ""}]]}]; | |
| StringTemplate[template_String, rest__] := StringTemplate[template][rest]; | |
| $SliderTemplate = StringTemplate[ | |
| "<script> | |
| $(function() { | |
| $( \"#slider`ID`\" ).slider({ | |
| value: 0, min: 0, max: `Length`, step: 1, | |
| slide: function( event, ui ) { | |
| $( \"#anim`ID`\" ).css( \"background-position\", (-1*`Width`*ui.value)+\"px 0px\" ); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <div id=\"anim`ID`\" style=\"overflow: hidden; width: `Width`px; height: `Height`px; margin-top: 0px; | |
| background-image: url('sprite-`ID`.jpg'); background-position: 0px 0px;\"></div> | |
| <div id=\"slider`ID`\" style=\"width: `SliderWidth`px; margin-top: 10px; margin-left: 25px;\"></div> | |
| "]; | |
| exportSlider[graphics_] := Module[ | |
| {imgs,comp, width, height, length, dims, id}, | |
| id = Mod[Hash[graphics],16384]; | |
| imgs = Rasterize /@ graphics; | |
| dims = ImageDimensions /@ graphics; | |
| If[Length @ DeleteDuplicates @ dims != 1, Return[$Failed]]; | |
| comp = ImageAssemble[{imgs}]; | |
| {width, height} = First[dims]; | |
| length = Length[imgs]; | |
| Export[StringTemplate["sprite-`1`.jpg", id], comp]; | |
| $SliderTemplate["ID" -> id, "Length" -> length, "Width" -> width,"SliderWidth" -> Max[width-50, 100], "Height" -> height] | |
| ]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Taliesin,
I followed your instruction but I'm unable to make it work for me. I load the .m file and copied the generated snippet and replace the text "INSERT SLIDER SNIPPET HERE". But I only see the slider and not the picture when I open the html file in my browser. I can see the gif correctly generated in my home directory. Do you know where is the problem? Thanks.