animation & vignette outputs probably not all needed

afrimapr · Aug 12, 2020 · a88e6d9 · a88e6d9
1 parent 8001d0e
commit a88e6d9
Show file tree

Hide file tree

Showing 184 changed files with 1,677 additions and 4 deletions.
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+ text-decoration: none;
+}
+del {
+ text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/css/scianimator.blue.css b/css/scianimator.blue.css
@@ -0,0 +1,44 @@
+/**
+ * SciAnimator - Scientific Image Animator Plugin for jQuery
+ *
+ * Copyright (c) 2010 Brent Ertz
+ * Released under the MIT license.
+ * http://github.com/brentertz/scianimator
+*/
+
+/* Blue theme */
+.scianimator.blue,
+.scianimator.blue a,
+.scianimator.blue a:visited {
+ color: #3985a8;
+}
+.scianimator.blue {
+ background: #ddeef6;
+}
+.scianimator.blue .controls,
+.scianimator.blue .control {
+ background-color: #ddeef6;
+ border: 1px solid #89bad2;
+ color: #3985a8;
+ text-shadow: 0 1px #fff; 
+}
+.scianimator.blue .controls {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -17px #cbe6f2, 0 0 3px #89bad2;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #cbe6f2, 0 0 3px #89bad2;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #cbe6f2, 0 0 3px #89bad2;
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #cbe6f2, 0 0 3px #89bad2;
+}
+.scianimator.blue .control {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #89bad2;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #89bad2;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #89bad2;
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #89bad2;
+}
+.scianimator.blue a:hover {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #3985a8;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #3985a8;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #3985a8; 
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #cbe6f2, 0 0 3px #3985a8;
+ color: #fff;
+ text-shadow: 0px 1px #3985a8; 
+}
diff --git a/css/scianimator.css b/css/scianimator.css
@@ -0,0 +1,108 @@
+/**
+ * SciAnimator - Scientific Image Animator Plugin for jQuery
+ *
+ * Copyright (c) 2010 Brent Ertz
+ * Released under the MIT license.
+ * http://github.com/brentertz/scianimator
+*/
+
+/* Comment out @imports for themes not in use */
+@import url('scianimator.light.css');
+@import url('scianimator.dark.css');
+@import url('scianimator.blue.css');
+
+.scianimator {
+ font-family: 'Lucida Grande', sans-serif;
+ font-size: 12px;
+ text-align: center;
+ margin: auto auto 1em auto;
+ position: relative;
+}
+.scianimator .controls,
+.scianimator .control {
+ border: 1px solid;
+ border-radius: 4px;
+ -moz-border-radius: 4px;
+ font-family: 'Lucida Grande', sans-serif;
+ font-size: 10px;
+ text-shadow: 0 1px #fff; 
+ margin: 2px;
+ position: relative;
+}
+.scianimator .controls {
+ margin: 0;
+ padding: 4px;
+ position: relative;
+}
+.scianimator a,
+.scianimator a:visited {
+ cursor: pointer;
+ display: inline-block;
+ padding: 5px 10px;
+ text-decoration: none;
+}
+.scianimator a.small,
+.scianimator a:visited.small {
+ padding: 1px 2px;
+}
+.scianimator a:active {
+ top: 1px;
+}
+.scianimator select.control,
+.scianimator label {
+ margin: 1px;
+ vertical-align: middle;
+}
+.scianimator .control.box {
+ padding: 1px 5px;
+ display: inline-block;
+ vertical-align: top;
+}
+.scianimator .control.box .control {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.scianimator .box.control.navigator {
+ padding: 2px;
+}
+
+.scianimator .box a.control.navigator,
+.scianimator .box a:hover.control.navigator {
+ display: inline-block;
+ height: 10px;
+ margin: 2px;
+ padding: 0;
+ width: 10px;
+
+ background: #00FF00;
+ box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px #00FF00;
+ -o-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px #00FF00;
+ -webkit-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px #00FF00; 
+ -moz-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px #00FF00; 
+}
+.scianimator .box a.navigator.disabled,
+.scianimator .box a:hover.navigator.disabled {
+ background: red;
+ box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px red;
+ -o-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px red;
+ -webkit-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px red; 
+ -moz-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px red;
+}
+.scianimator .box a.navigator.current,
+.scianimator .box a:hover.navigator.current {
+ background: blue;
+ box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px blue;
+ -o-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px blue;
+ -webkit-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px blue; 
+ -moz-box-shadow: 0 0 3px 1px #666666 inset, 0 0 1px blue;
+}
+
+.scianimator .status {
+ background: red;
+ color: #fff;
+ right: 0;
+ padding: 5px;
+ position: absolute;
+ top: 0;
+}
diff --git a/css/scianimator.dark.css b/css/scianimator.dark.css
@@ -0,0 +1,44 @@
+/**
+ * SciAnimator - Scientific Image Animator Plugin for jQuery
+ *
+ * Copyright (c) 2010 Brent Ertz
+ * Released under the MIT license.
+ * http://github.com/brentertz/scianimator
+*/
+
+/* Dark theme */
+.scianimator.dark,
+.scianimator.dark a,
+.scianimator.dark a:visited {
+ color: #ccc;
+}
+.scianimator.dark {
+ background: #333;
+}
+.scianimator.dark .controls,
+.scianimator.dark .control {
+ background-color: #333;
+ border-color: #666;
+ color: #ccc;
+ text-shadow: 0 1px #000; 
+}
+.scianimator.dark .controls {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -17px #000, 0 0 3px #000;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #000, 0 0 3px #000;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #000, 0 0 3px #000;
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #000, 0 0 3px #000;
+}
+.scianimator.dark .control {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #000;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #000;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #000;
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #000;
+}
+.scianimator.dark a:hover {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #555;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #555;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #000, 0 0 3px #555; 
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #333, 0 0 3px #555;
+ color: #fff;
+ text-shadow: 0px 1px #000; 
+}
diff --git a/css/scianimator.light.css b/css/scianimator.light.css
@@ -0,0 +1,44 @@
+/**
+ * SciAnimator - Scientific Image Animator Plugin for jQuery
+ *
+ * Copyright (c) 2010 Brent Ertz
+ * Released under the MIT license.
+ * http://github.com/brentertz/scianimator
+*/
+
+/* Light theme */
+.scianimator.light,
+.scianimator.light a,
+.scianimator.light a:visited {
+ color: #555;
+}
+.scianimator.light {
+ background: #ddd;
+}
+.scianimator.light .controls,
+.scianimator.light .control {
+ background-color: #ddd;
+ border-color: #999;
+ color: #555; 
+ text-shadow: 0 1px #fff; 
+}
+.scianimator.light .controls {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -17px #ccc, 0 0 3px #999;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #ccc, 0 0 3px #999;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #ccc, 0 0 3px #999;
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -17px #ccc, 0 0 3px #999;
+}
+.scianimator.light .control {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #999;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #999;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #999;
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #999;
+}
+.scianimator.light a:hover {
+ box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #555;
+ -o-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #555;
+ -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #555; 
+ -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -10px #ccc, 0 0 3px #555;
+ color: #fff;
+ text-shadow: 0px 1px #555; 
+}
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,3 @@
+body {
+ margin: 20px;
+}
diff --git a/images/allafrica-hdx1.png b/images/allafrica-hdx1.png
diff --git a/images/allafrica-hdx10.png b/images/allafrica-hdx10.png
diff --git a/images/allafrica-hdx11.png b/images/allafrica-hdx11.png
diff --git a/images/allafrica-hdx12.png b/images/allafrica-hdx12.png
diff --git a/images/allafrica-hdx13.png b/images/allafrica-hdx13.png
diff --git a/images/allafrica-hdx14.png b/images/allafrica-hdx14.png
diff --git a/images/allafrica-hdx15.png b/images/allafrica-hdx15.png
diff --git a/images/allafrica-hdx16.png b/images/allafrica-hdx16.png
diff --git a/images/allafrica-hdx17.png b/images/allafrica-hdx17.png
diff --git a/images/allafrica-hdx18.png b/images/allafrica-hdx18.png
diff --git a/images/allafrica-hdx19.png b/images/allafrica-hdx19.png
diff --git a/images/allafrica-hdx2.png b/images/allafrica-hdx2.png
diff --git a/images/allafrica-hdx20.png b/images/allafrica-hdx20.png
diff --git a/images/allafrica-hdx21.png b/images/allafrica-hdx21.png
diff --git a/images/allafrica-hdx22.png b/images/allafrica-hdx22.png
diff --git a/images/allafrica-hdx23.png b/images/allafrica-hdx23.png
diff --git a/images/allafrica-hdx24.png b/images/allafrica-hdx24.png
diff --git a/images/allafrica-hdx25.png b/images/allafrica-hdx25.png
diff --git a/images/allafrica-hdx26.png b/images/allafrica-hdx26.png
diff --git a/images/allafrica-hdx27.png b/images/allafrica-hdx27.png
diff --git a/images/allafrica-hdx28.png b/images/allafrica-hdx28.png
diff --git a/images/allafrica-hdx29.png b/images/allafrica-hdx29.png
diff --git a/images/allafrica-hdx3.png b/images/allafrica-hdx3.png
diff --git a/images/allafrica-hdx30.png b/images/allafrica-hdx30.png
diff --git a/images/allafrica-hdx31.png b/images/allafrica-hdx31.png
diff --git a/images/allafrica-hdx4.png b/images/allafrica-hdx4.png
diff --git a/images/allafrica-hdx5.png b/images/allafrica-hdx5.png
diff --git a/images/allafrica-hdx6.png b/images/allafrica-hdx6.png
diff --git a/images/allafrica-hdx7.png b/images/allafrica-hdx7.png
diff --git a/images/allafrica-hdx8.png b/images/allafrica-hdx8.png
diff --git a/images/allafrica-hdx9.png b/images/allafrica-hdx9.png
diff --git a/images/animation-allafrica-hdx.gif b/images/animation-allafrica-hdx.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<html>
+<head>
+ <meta charset="utf-8" />
+ <meta name="generator" content="R package animation 2.6">
+ <title>Animations Using the R Language</title>
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/styles.css" />
+ <link rel="stylesheet" href="css/scianimator.css" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css">
+
+ <script src="js/jquery-1.4.4.min.js"></script>
+ <script src="js/jquery.scianimator.min.js"></script>
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/languages/r.min.js"></script>
+ <script>hljs.initHighlightingOnLoad();</script>
+
+</head>
+<body>
+
+ <div class="scianimator"><div id="record_plot" style="display: inline-block;"></div></div>
+ <div class="scianimator" style="width: 480px; text-align: left"><pre><code class="r">## Animations generated in R version 3.6.2 (2019-12-12)
+## using the package animation
+library(afriadmin)
+library(animation)
+library(devtools)
+library(usethis)
+ani.replay()
+## R version 3.6.2 (2019-12-12)
+## Platform: x86_64-w64-mingw32/x64 (64-bit)
+## Other packages: afriadmin 0.0.0.9000, animation 2.6, devtools 2.2.2, usethis
+## 1.5.1</code></pre></div>
+ <script src="js/record_plot.js"></script>
+ <div class="scianimator"><div id="allafrica-hdx" style="display: inline-block;"></div></div>
+ <div class="scianimator" style="width: 480px; text-align: left"><pre><code class="r">## Animations generated in R version 3.6.2 (2019-12-12)
+## using the package animation
+library(sf)
+library(mapview)
+library(afriadmin)
+library(animation)
+library(devtools)
+library(usethis)
+ani.replay()
+## R version 3.6.2 (2019-12-12)
+## Platform: x86_64-w64-mingw32/x64 (64-bit)
+## Other packages: sf 0.8-1, mapview 2.7.0, afriadmin 0.0.0.9000, animation 2.6,
+## devtools 2.2.2, usethis 1.5.1</code></pre></div>
+ <script src="js/allafrica-hdx.js"></script>
+<!-- highlight R code -->
+
+</body>
+</html>
diff --git a/js/allafrica-hdx.js b/js/allafrica-hdx.js
@@ -0,0 +1,12 @@
+(function($) {
+ $(document).ready(function() {
+
+ $('#allafrica-hdx').scianimator({
+ 'images': ['images/allafrica-hdx1.png', 'images/allafrica-hdx2.png', 'images/allafrica-hdx3.png', 'images/allafrica-hdx4.png', 'images/allafrica-hdx5.png', 'images/allafrica-hdx6.png', 'images/allafrica-hdx7.png', 'images/allafrica-hdx8.png', 'images/allafrica-hdx9.png', 'images/allafrica-hdx10.png', 'images/allafrica-hdx11.png', 'images/allafrica-hdx12.png', 'images/allafrica-hdx13.png', 'images/allafrica-hdx14.png', 'images/allafrica-hdx15.png', 'images/allafrica-hdx16.png', 'images/allafrica-hdx17.png', 'images/allafrica-hdx18.png', 'images/allafrica-hdx19.png', 'images/allafrica-hdx20.png', 'images/allafrica-hdx21.png', 'images/allafrica-hdx22.png', 'images/allafrica-hdx23.png', 'images/allafrica-hdx24.png', 'images/allafrica-hdx25.png', 'images/allafrica-hdx26.png', 'images/allafrica-hdx27.png', 'images/allafrica-hdx28.png', 'images/allafrica-hdx29.png', 'images/allafrica-hdx30.png', 'images/allafrica-hdx31.png'],
+ 'width': 480,
+ 'delay': 500,
+ 'loopMode': 'loop'
+ });
+ $('#allafrica-hdx').scianimator('play');
+ });
+})(jQuery);