Differences

This shows you the differences between two versions of the page.

--- shared:people [2022/09/04 13:19]
justin
+++ shared:people [2024/01/24 22:52]
hyunwoo
@@ Line 3: / Line 3: @@
 it says: "Add yourself above this line"
 *+=*+=*+=*+=*+=*+=*+=*+=*+=*+=*+=*+=*+=*+=*+=*+=* --></html>
-<html><style>
+<html><script type="text/javascript" language="JavaScript">
+// Names of images (these should be in data/media/home. To add, move to the home directory in gru@gru as a jpg file and then run wikiimage)
+imageNames = new Array("alpineinn", "spiral", "textureguy");
+// If useSrcset is true then each of the above images need to be scaled to
+// multiple widths for faster loading. There is a csh script in ~/bin called
+// wikiimage which automatically scales images and moves them into the data/media/home directory
+useSrcset = true;
+srcsetScales = [480, 960, 1136, 1334, 1920, 2560];
+// Set how often to update the images in ms. Note that the transition times
+// are defined in the style for changingImage items
+imageUpdateTime = 8000;
+// Set how to do cross-fade. Half cross-fade means that the previous image
+// goes from 100% to 0 while the new image (below) stays at 100%.
+// Full cross-fade means that the previous image goes from 100% to 0
+// while the new image goes from 0 to 100. The full cross-fade was implemented
+// to hide issues that happen when different images have different sizes
+fullCrossFade = false;
+</script>
+<style>
 .page table {
   border: none;
   table-layout: fixed;
-  width: 100%
+  width: 100%;
 }
@@ Line 22: / Line 46: @@
   border-radius: 25px;
   box-shadow: 4px 8px 6px lightgray;
+  max-height: 160px;
 }
@@ Line 43: / Line 68: @@
 }
-img {
+.page #changingImage {
-}.animation {
+  position:relative;
-    -webkit-transition: 1s background 500ms ease-in 500ms; /* property duration timing-function delay */
+  align="middle";
-    -moz-transition: 1s background 500ms ease-in 500ms;
-    -o-transition: 1s background 500ms ease-in 500ms;
-    transition: 1s background 500ms ease-in 500ms;
 }
-</style>
-<table style="width:100%;border:0;"><tr style="border:0;"><td style="border:0;font-family:helvetica,arial,sans-serif;font-size:28px;font-weight:bold;">
-<script type="text/javascript" language="JavaScript">
-// create cookie
+.page #changingImage img.top {
-function createCookie(name,value,days) {
+  position:relative;
-  if (days) {
+  -webkit-transition: opacity 1s ease-in-out;
-    var date = new Date();
+  -moz-transition: opacity 1s ease-in-out;
-    date.setTime(date.getTime()+(days*24*60*60*1000));
+  -o-transition: opacity 1s ease-in-out;
-    var expires = "; expires="+date.toGMTString();
+  transition: opacity 1s ease-in-out;
-  }
+  max-height: 100%;
-  else var expires = "";
-    document.cookie = name+"="+value+expires+"; path=/";
 }
-// read cookie
+.page #changingImage img.bottom {
-function readCookie(name) {
+  position:absolute;
-  var nameEQ = name + "=";
+  opacity:0;
-  var ca = document.cookie.split(';');
+  -webkit-transition: opacity 1s ease-in-out;
-  for(var i=0;i < ca.length;i++) {
+  -moz-transition: opacity 1s ease-in-out;
-    var c = ca[i];
+  -o-transition: opacity 1s ease-in-out;
-    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+  transition: opacity 1s ease-in-out;
-    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+  max-height: 100%;
-  }
-  return null;
 }
+</style>
+<script type="text/javascript" language="JavaScript">
 // Set to how many images there are
-nImages = 10;
+nImages = imageNames.length;
+console.log(nImages);
-imageNames = new Array(nImages);
+// Set last image, so that the first displayed image
-imageWidth = new Array(nImages);
+// will be the first image in the list
-imageHeight = new Array(nImages);
+var lastImageNum = nImages-2;
-// Names of images
-imageNames[0] = 'anzabrainego';
-imageNames[1] = 'california'; // needs higher res
-imageNames[2] = 'diamond_ice_brain';
-imageNames[3] = 'brainnewfinnotext'; // needs higher res
-imageNames[4] = 'sunmoon';
-imageNames[5] = 'miyakojima';
-imageNames[6] = 'lavabrain';
-imageNames[7] = 'fishlights'; // needs higher res
-imageNames[8] = 'miyako'; // needs higher res
-imageNames[9] = 'iceland'; // needs higher res
-function writeRandomImage(imageWidth, imageHeight) {
+// function to write img tag for a random one of the above images
-  // read the cookie value for the last displayed image
+function writeRandomImage(className, imageWidth, imageHeight) {
-  var lastImageNum = readCookie('lastImageNum');
-  // increment value
+  // increment value of lastImage
   lastImageNum = parseInt(lastImageNum)+1;
   if (!((lastImageNum < nImages) && (lastImageNum >= 0)))
     lastImageNum = 0;
-  // save the lastImageNum
-  createCookie('lastImageNum',lastImageNum,1)
   // set the image number to display
   dispImage = lastImageNum;
+  // write out image tag
+  imgTag = '<img ';
+  // write classname if asked for
+  if (className !== undefined) {
+    // write the class id
+    imgTag = imgTag+'class="'+className+'" ';
+    // also give it the same id
+    imgTag = imgTag+'id="'+className+'" ';
+  }
+  else {
+    // write the default class
+    imgTag = imgTag+'class="media" ';
+  }
-  // Images are scaled to multiple widths for faster loading
+  // Write out image string
-  // There is a csh script in home called wikiimage which automatically   scales images
+  imgTag = imgTag+'src='+getImageSrc(dispImage)+' ';
-  imageScales = [480, 960, 1136, 1334, 1920];
+  if (useSrcset) {
-  // Write out image string with srcset which allows for multiple scaled images
+    // now set up the secret which allows for multiple scaled images
-  document.write('<img id="mainImage"  src="/lib/exe/fetch.php/home/'+imageNames[dispImage]+'_1136w.jpg'+'" cache=cache" srcset="');
+    // The default image will just be called e.g. image.jpg and then
+    // there are scaled images that are called image_1920w.jpg for example
+    // that are scaled to a width of 1920 pixels
+    imgTag = imgTag+'srcset="'+getImageSrcset(dispImage);
-  // write out each one of the scaled image names and the width
+    // remove last comma and end subset field
-  imageScales.forEach(function (item) {
+    imgTag = imgTag.substr(0,imgTag.length-2)+'" ';
-    document.write('/lib/exe/fetch.php/home/'+imageNames[dispImage]+'_'+item+'w.jpg '+item+'w ');
+  }
-  });
   // write image width and height if passed in
   if ((imageWidth !== undefined) && (imageHeight !== undefined)) {
-    document.write('width="imageWidth" height="imageHeight" "');
+    imgTag=imgTag+' width="'+imageWidth+'" height="'+imageHeight+'" ';
   }
   // close the img html
-  document.write('" class="media" alt="" style="box-shadow:10px 10px 10px #AAAAAA"/>');
+  imgTag=imgTag+' alt="" />';
+  //imgTag=imgTag+' alt="" style="box-shadow:10px 10px 10px #AAAAAA"/>';
+  // write the imgTag
+  document.write(imgTag);
+  console.log(imgTag);
 }
-  // put image into a table
+// get the full image src name from the imageNum
-document.write('<tr style="border:0;"><td style="border:0;">');
+function getImageSrc(imageNum) {
-  // write a random image
+  return '"/lib/exe/fetch.php/home/'+imageNames[imageNum]+'.jpg"';
-  writeRandomImage();
-let index = 0;
-const imgElement = document.getElementById('mainImage');
-function change() {
-   console.log("hello world");
-   //imgElement.src = '/lib/exe/fetch.php/home/'+imageNames[index]+'_1136w.jpg';
-   fadeOutAndfadeIn(imgElement,'/lib/exe/fetch.php/home/'+imageNames[index]+'_1136w.jpg');
-   index > 1 ? index = 0 : index++;
 }
-function fadeOutAndfadeIn(image, newImage){
+// get the full image srcset string from the imageNum
-  var opacity = 1;
+function getImageSrcset(imageNum) {
-  var timer = setInterval(function(){
+  srcset = '';
-  if(opacity < 0.1){
+  // write out each one of the scaled image names and the width
-    clearInterval(timer);
+  srcsetScales.forEach(function (item) {
-    //swap the image, and fadeIn, which is the same as above function
+    srcset=srcset+'/lib/exe/fetch.php/home/'+imageNames[imageNum]+'_'+item+'w.jpg '+item+'w, ';
-    image.src = newImage;
+  });
-    fadeIn(image);
+  return srcset;
-  }
-    image.style.opacity = opacity;
-    opacity -=  0.1;
-  }, 50);
 }
-function fadeIn(element) {
+// Make a double image - the top one is the one being shown and
-    var op = 0.1;  // initial opacity
+// the bottom one is used for transitions.
-    var timer = setInterval(function () {
+document.write('<div id="changingImage">');
-        if (op >= 1){
+writeRandomImage("bottom");
-            clearInterval(timer);
+writeRandomImage("top");
-        }
+document.write('</div>');
-        element.style.opacity = op;
-        op += 0.1;
+// some variables for the changeImage function
-    }, 10);
+let changeIndex = dispImage;
+const topImage = document.getElementById('top');
+const bottomImage = document.getElementById('bottom');
+// transition time should be longer than the style sheet
+// has for changing the opacity
+transitionTime = 2000;
+// function changes the images from top to bottom and then
+// loads a new image for the next transition. It gets
+// called periodically to change the images
+function changeImage() {
+   // set the top image to change opacity to 0
+   // this will go incrementally over a second
+   // due to the style settings
+   topImage.style.opacity=0;
+   bottomImage.style.opacity=100;
+   // set a timeout to flip the images back once
+   // the transition expected to be over
+   setTimeout(function(){
+     // now set the top image (which should have opacity 0 by now)
+     // to be the same as the bottom image
+     topImage.src = bottomImage.src;
+     if (useSrcset) {
+       topImage.srcset = bottomImage.srcset;
+     }
+     setTimeout(function(){
+       // and make the top image visible again
+       topImage.style.opacity = 100;
+       // once it is done we can set the bottom image src
+       setTimeout(function(){
+         // now it should be safe to set the bottomImage to the
+         // next in the sequence - i.e. it is not showing now
+         changeIndex = (changeIndex==(nImages-1)) ? 0 : changeIndex+1;
+         bottomImage.src = getImageSrc(changeIndex);
+         // only set the bottom image to 0 if we want a full cross-phase
+         if (fullCrossFade) bottomImage.style.opacity = 0;
+         if (useSrcset) {
+           bottomImage.srcset = getImageSrcset(changeIndex);
+         }
+         // start the process again
+         setTimeout(changeImage, imageUpdateTime-3*transitionTime);
+       },transitionTime);
+     },transitionTime);
+   },transitionTime);
 }
-setInterval(change, 5000);
+// run the changeImage function to change the pictures
+setTimeout(changeImage, imageUpdateTime);
 </script>
-<noscript>
 <img src="/data/media/shared/brainnewfin800.jpg" class="media" alt="" />
+<noscript>
 </noscript>
 </tr></td>
@@ Line 188: / Line 243: @@
 <html><!-- ************************************************** --></html>
 <html><div></html>
-^Justin L. Gardner<html><br/></html>Principle Investigator^
+^Justin L. Gardner<html><br/></html>Principal Investigator^
-|[[:shared:justin_gardner_cv|{{ :shared:jlgheadshot.jpg?240x160 |}}]]|
+|[[:shared:justin_gardner_cv|{{ :shared:jlg_landscape.jpg?240x160 |}}]]|
 | ++ More|
 <html><br/></html>Associate Professor
@@ Line 196: / Line 251: @@
 <html><br/></html>[[https://med.stanford.edu/neurogradprogram.html|Neurosciences Graduate IDP]]
 <html><br/></html>Stanford University
-<html><br/></html><html><br/></html>[[:shared:justin_gardner_cv|CV]]<html><br/></html>
+<html><br/></html><html><br/></html>[[:shared:justin_gardner_cv|CV]]
-<html><br/></html>How does neural activity in the human cortex create our sense of visual perception? Our lab at Stanford uses a combination of functional magnetic resonance imaging, computational modeling, and psychophysical measurements to link human perception to cortical brain activity.++|
+<html><br/></html>[[https://gru.stanford.edu/justin/pictures|Pictures]]<html><br/></html><html><br/></html>How does neural activity in the human cortex create our sense of visual perception? Our lab at Stanford uses a combination of functional magnetic resonance imaging, computational modeling, and psychophysical measurements to link human perception to cortical brain activity.++|
 <html></div></html>
 <html><!-- ************************************************** --></html>
 <html><div></html>
 ^Jiwon Yeon <html><br/></html> Post-doc^
-|<html><script>writeRandomImage(240,160);</script></html>|
+|<html><center><script>writeRandomImage("bottom",212,160);</script></center></html>|
 | ++ More|
 <html><br/></html>
@@ Line 211: / Line 266: @@
 <html><div></html>
 ^Minyoung Lee <html><br/></html> PhD Student^
-|{{:shared:minyoung_lee.jpg?240x160|}}|
+| {{ :shared:minyoung_lee.jpg?160x160 |}} |
 | ++ More|
 <html><br/></html>Korea University
@@ Line 220: / Line 275: @@
 <html><div></html>
 ^Jun Hwan (Joshua) Ryu <html><br/></html> PhD Student^
-|{{ :shared:josh190901.jpg?240x160 |}}|
+|{{ :shared:josh190901.jpg?140x160 |}}|
 | ++ More|
+<html><br/></html>Stanford, M.S. Computational and Mathematical Engineering, 2022
 <html><br/></html>Yale University, B.A. Cognitive Sicence and Mathematics, 2016
 <html><br/></html>
-<html><br/></html>Josh is interested in using neural and psychophysical measurements in order to understand neural mechanisms underlying our visual perception.++|
+<html><br/></html> Josh is interested in using neural and psychophysical measurements in order to understand neural mechanisms underlying our visual perception. He is working on developing and validating models of human visuomotor control. ++|
 <html></div></html>
 <html><!-- ************************************************** --></html>
 <html><div></html>
 ^Josh Wilson<html><br/></html> PhD Student^
-|{{ :shared:jw.jpg?240x160 |}}|
+|{{ :shared:jw.jpg?160x160 |}}|
 | ++ More|
 <html><br/></html>UC Berkeley, B.A. Molecular & Cell Biology (Neurobiology) and Cognitive Science 2019
@@ Line 238: / Line 294: @@
 <html><div></html>
 ^Austin Kuo<html><br/></html> PhD Student^
-|{{ :shared:austin.jpg?240x160 |}}|
+|{{ :shared:austin.jpg?115x160 |}}|
 | ++ More|
 <html><br/></html>University of Texas at Austin, B.S. Neuroscience, 2018
 <html><br/></html>
-<html><br/></html>Austin is interested in using neural and psychophysical measurements in order to understand neural mechanisms underlying our visual perception.++|
+<html><br/></html>Austin is interested in exploring in how representations of low-level visual features, such as spatial frequency, are represented in visual cortex by analyzing neural measurements obtained from fMRI and building computational models to predict neural responses to visual stimuli.++|
 <html></div></html>
 <html><!-- ************************************************** --></html>
 <html><div></html>
 ^Alex Durango<html><br/></html> PhD Student^
-|<html><script>writeRandomImage(240,160);</script></html>|
+|<html><center><script>writeRandomImage("bottom",212,160);</script></center></html>|
 | ++ More|
 <html><br/></html>
@@ Line 256: / Line 312: @@
 <html><div></html>
 ^Hyunwoo Gu<html><br/></html> PhD Student^
-|<html><script>writeRandomImage(240,160);</script></html>|
+|{{ :shared:hwgu.jpg?150x150 |}}|
 | ++ More|
 <html><br/></html>
@@ Line 277: / Line 333: @@
 <html><div></html>
 ^Franco Pestilli<html><br/></html>Post-doc^
-|[[http://www.francopestilli.com|{{ :shared:photo_021807_003.jpg?240x160 |}}]]|
+|[[http://www.francopestilli.com|{{ :shared:photo_021807_003.jpg?120x160 |}}]]|
 | ++ More|
 <html><br/></html>Associate Professor
@@ Line 286: / Line 342: @@
 <html><div></html>
 ^Steeve Laquitaine<html><br/></html>Post-doc^
-|[[https://steevelaquitaine.blogspot.com|{{ :shared:steevelaquitaine.jpg?240x160 |}}]]|
+|[[https://people.epfl.ch/steeve.laquitaine/?lang=en|{{ :shared:steevelaquitaine.jpg?160x160 |}}]]|
 | ++ More|
-<html><br/></html>Postdoctoral Research Associate, Riken BSI, 2010-2012
+<html><br/></html>Scientist
-<html><br/></html>University Bordeaux 2, PhD in Neurosciences, 2010
+<html><br/></html>EPFL BBP-CORE++|
-<html><br/></html>University Bordeaux 2, MSc Medical and Biological Sciences, 2007++|
 <html></div></html>
 <html><!-- ************************************************** --></html>
@@ Line 324: / Line 379: @@
 <html><div></html>
 ^Andrew Isaac Meso<html><br/></html>Visiting Post-doc^
-|[[https://www.kcl.ac.uk/people/andrew-meso|{{ :shared:sel_6551a.jpg?240x160 |}}]]|
+|[[https://www.kcl.ac.uk/people/andrew-meso|{{ :shared:sel_6551a.jpg?160x160 |}}]]|
 | ++ More|
 <html><br/></html>Lecturer in Computational Neuroscience
@@ Line 332: / Line 387: @@
 <html><div></html>
 ^Cameron McKenzie<html><br/></html>PhD Student^
-|[[https://au.linkedin.com/in/cameron-mckenzie-36412b185|{{ :shared:screen_shot_2019-09-19_at_9.24.26_pm.png?240x160 |}}]]|
+|[[https://au.linkedin.com/in/cameron-mckenzie-36412b185|{{ :shared:camcoffee.png?240x160 |}}]]|
 | ++ More|
 <html><br/></html>Medical Student
@@ Line 364: / Line 419: @@
 <html><div></html>
 ^Katharina Dobs<html><br/></html>Visiting PhD Student^
-|[[https://www.katharinadobs.com|{{ :shared:katharina_dobs_web.jpg?240x160 |}}]]|
+|[[https://www.katharinadobs.com|{{ :shared:katharina_dobs_web.jpg?180x160 |}}]]|
 | ++ More|
 <html><br/></html>Group Leader of the Cognitive Computational Neuroscience Lab
@@ Line 380: / Line 435: @@
 <html><div></html>
 ^Darren Seibert<html><br/></html>Visiting PhD Student^
-|[[https://www.semanticscholar.org/author/Darren-Seibert/11287004|{{ :shared:darren.jpg?240x160 |}}]]|
+|[[https://www.semanticscholar.org/author/Darren-Seibert/11287004|{{ :shared:darren.jpg?120x160 |}}]]|
 | ++ More|
 <html><br/></html>Medical Student
@@ Line 388: / Line 443: @@
 <html><div></html>
 ^Yuko Hara (原 由子)<html><br/></html>Technical Staff^
-|[[https://www.linkedin.com/in/mryuko|{{ :shared:yukohara2.jpg?240x160 |}}]]|
+|[[https://www.linkedin.com/in/mryuko|{{ :shared:yukohara2.jpg?120x160 |}}]]|
 | ++ More|
 <html><br/></html>Software Engineer
@@ Line 396: / Line 451: @@
 <html><div></html>
 ^Li-Feng Yeh<html><br/></html>Technical Staff^
-|[[|{{ :shared:lfy.png?240x160 |}}]]|
+|[[|{{ :shared:lfy.png?180x160 |}}]]|
 | ++ More|
 <html><br/></html>Research Associate

Gardner Lab

Stanford University

Site Tools

Differences

Page Tools