Skip to content

Instantly share code, notes, and snippets.

@taliesinb

taliesinb/slider.html

Created April 25, 2013 23:34
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taliesinb/5464092 to your computer and use it in GitHub Desktop.
Save taliesinb/5464092 to your computer and use it in GitHub Desktop.
Download ZIP
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…
Raw
slider.html
<!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>
Raw
slider.m
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]
];
@xslittlegrass
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment