Permalink
Browse files

add custom spinner

  • Loading branch information...
1 parent d1e54ff commit 02f2f47979bf07c66c0d36359bf924c9b4390840 @blmoore committed May 18, 2015
Showing with 26 additions and 15 deletions.
  1. BIN data/accidents.rds
  2. +12 −10 server.R
  3. +2 −0 spin.min.js
  4. +12 −5 ui.R
  5. BIN { → www}/favicon.ico
View
Binary file not shown.
View
@@ -22,7 +22,6 @@ strs <- apply(accidents, 1, accident_desc)
strs <- str_wrap(strs, width=10)
# summary plot munging
-accidents$ym <- as.factor(zoo::as.yearmon(accidents$a_date))
d2 <- accidents %>% group_by(as.factor(ym)) %>%
summarise(n=n())
colnames(d2) <- c("ym", "n")
@@ -39,24 +38,27 @@ colnames(clean) <- c("Severity", "No. vehicles",
"Light conditions", "Weather conditions",
"Road conditions", "Special conditions", "Postcode")
-shinyServer(function(input, output) {
+shinyServer(function(input, output, session) {
output$mymap <- renderLeaflet({
-
fillv <- if(input$color == "None") "black" else
if(input$color == "Severity") pal[as.factor(accidents$severity)] else
if(input$color == "Casualties") pal[as.factor(accidents$no_casualt)] else
if(input$color == "Time") cont_pal[accidents$a_time_hr] else
if(input$color == "Vehicles") pal[as.factor(accidents$no_vehicle)] else
pal[as.factor(accidents$speed_limi)]
- leaflet(data=accidents) %>%
- addTiles(urlTemplate="http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}") %>%
- addTiles('http://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png',
- attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>') %>%
- setView(lng=-3.19, lat=55.95, zoom=13) %>%
- addCircleMarkers(~long, ~lat, radius=~(no_vehicle+.8)**1.5, fillOpacity=input$alpha,
- color=NA, popup=strs, weight=2, fillColor = fillv)
+ l <- leaflet(data=accidents) %>%
+ addTiles(urlTemplate="http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}") %>%
+ addTiles('http://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png',
+ attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>') %>%
+ setView(lng=-3.19, lat=55.95, zoom=13) %>%
+ addCircleMarkers(~long, ~lat, radius=~(no_vehicle+.8)**1.5, fillOpacity=input$alpha,
+ color=NA, popup=strs, weight=2, fillColor = fillv)
+
+ session$sendCustomMessage(type = "map_done", "done")
+
+ l
})
output$monthTotals <- renderPlot({
View
@@ -0,0 +1,2 @@
+//fgnass.github.com/spin.js#v2.1.0
+!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return m[e]||(k.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",k.cssRules.length),m[e]=1),e}function d(a,b){var c,d,e=a.style;for(b=b.charAt(0).toUpperCase()+b.slice(1),d=0;d<l.length;d++)if(c=l[d]+b,void 0!==e[c])return c;return void 0!==e[b]?b:void 0}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a,b){return"string"==typeof a?a:a[b%a.length]}function h(a){this.opts=f(a||{},h.defaults,n)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}k.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:k+" "+k,coordorigin:-j+" "+-j}),{width:k,height:k})}function h(a,h,i){b(m,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~h}),b(e(c("roundrect",{arcsize:d.corners}),{width:j,height:d.scale*d.width,left:d.scale*d.radius,top:-d.scale*d.width>>1,filter:i}),c("fill",{color:g(d.color,a),opacity:d.opacity}),c("stroke",{opacity:0}))))}var i,j=d.scale*(d.length+d.width),k=2*d.scale*j,l=-(d.width+d.length)*d.scale*2+"px",m=e(f(),{position:"absolute",top:l,left:l});if(d.shadow)for(i=1;i<=d.lines;i++)h(i,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(i=1;i<=d.lines;i++)h(i);return b(a,m)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k,l=["webkit","Moz","ms","O"],m={},n={lines:12,length:7,width:5,radius:10,scale:1,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",position:"absolute"};if(h.defaults={},f(h.prototype,{spin:function(b){this.stop();var c=this,d=c.opts,f=c.el=e(a(0,{className:d.className}),{position:d.position,width:0,zIndex:d.zIndex});if(e(f,{left:d.left,top:d.top}),b&&b.insertBefore(f,b.firstChild||null),f.setAttribute("role","progressbar"),c.lines(f,c.opts),!j){var g,h=0,i=(d.lines-1)*(1-d.direction)/2,k=d.fps,l=k/d.speed,m=(1-d.opacity)/(l*d.trail/100),n=l/d.lines;!function o(){h++;for(var a=0;a<d.lines;a++)g=Math.max(1-(h+(d.lines-a)*n)%l*m,d.opacity),c.opacity(f,a*d.direction+i,g,d);c.timeout=c.el&&setTimeout(o,~~(1e3/k))}()}return c},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function h(b,c){return e(a(),{position:"absolute",width:f.scale*(f.length+f.width)+"px",height:f.scale*f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*k+f.rotate)+"deg) translate("+f.scale*f.radius+"px,0)",borderRadius:(f.corners*f.scale*f.width>>1)+"px"})}for(var i,k=0,l=(f.lines-1)*(1-f.direction)/2;k<f.lines;k++)i=e(a(),{position:"absolute",top:1+~(f.scale*f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,l+k*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(i,e(h("#000","0 0 4px #000"),{top:"2px"})),b(d,b(i,h(g(f.color,k),"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}}),"undefined"!=typeof document){k=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}();var o=e(a("group"),{behavior:"url(#default#VML)"});!d(o,"transform")&&o.adj?i():j=d(o,"animation")}return h});
View
@@ -10,10 +10,13 @@ shinyUI(navbarPage("Blackspot", id="nav",
tags$head(
includeCSS("styles.css"),
- tags$link(rel="shortcut icon", href="favicon.ico")
+ includeScript("spin.min.js")
),
leafletOutput("mymap", width="100%", height="100%"),
+ tags$script("
+var spinner = new Spinner().spin();
+$( 'div#mymap' ).append(spinner.el);"),
# Shiny versions prior to 0.11 should use class="modal" instead.
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
@@ -31,9 +34,6 @@ shinyUI(navbarPage("Blackspot", id="nav",
h4("Controls"),
- #selectInput("color", "Color", vars),
- #selectInput("size", "Size", vars, selected = "adultpop"),
-
dateRangeInput('dates',
label = 'Occurred between:',
start = as.Date("2010-01-01"), end = as.Date("2013-07-01")),
@@ -55,7 +55,14 @@ shinyUI(navbarPage("Blackspot", id="nav",
a("github", href="http://github.com/blmoore/blackspot"),
"(original Shiny code adapted from",
a("Superzip", href="https://github.com/jcheng5/superzip"),
- "by Joe Cheng).")
+ "by Joe Cheng)."),
+
+ tags$script('
+ Shiny.addCustomMessageHandler("map_done",
+ function(s) {
+ spinner.stop();
+ $( "div#mymap" ).remove(spinner);
+ });')
),
File renamed without changes.

0 comments on commit 02f2f47

Please sign in to comment.