Spaces:
Running
Running
File size: 3,114 Bytes
30e9731 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
function createPhotoScroller(){
var base_path = 'img/woman_washing_clothes.jpeg'
var data = [
{
'path': 'img/labels_1.svg',
'alt': 'Image of a woman washing clothes with bounding boxes including \'person\', and \'bucket\'',
'x': 198,
'y': 30,
'width': 305,
'height': 400,
},
{
'path': 'img/labels_4.svg',
'alt': 'Image of a woman washing clothes with bounding boxes including \'parent\', and \'laundry\'',
'x': 110,
'y': 60,
'width': 450,
'height': 470,
},
{
'path': 'img/labels_2.svg',
'alt': 'Image of a woman washing clothes with bounding boxes including \'hair_boho\', and \'decor_outdoor_rustic\'',
'x': 198,
'y': -35,
'width': 395,
'height': 500
},
{
'path': 'img/labels_3.svg',
'alt': 'Image of a woman washing clothes with one bounding box around her, labeled \'pedestrian\'',
'x': 190,
'y': 65,
'width': 190,
'height': 315
},
];
var photoIndex = 0;
var c = d3.conventions({
sel: d3.select('.person-photos').html(''),
height: 550
})
var photoSel = c.svg.append('svg:image')
.attr('x', 50)
.attr('y', 50)
.attr('width', 700)
.attr('height', 500)
.attr('xlink:href', base_path)
var photoSel = c.svg.appendMany('svg:image', data)
.attr('x', d => d.x)
.attr('y', d => d.y)
.attr('width', d => d.width)
.attr('height', d => d.height)
.attr('xlink:href', d => d.path)
.attr('alt', d => d.alt)
var buttonHeight = 35
var buttonWidth = 130
var buttonSel = c.svg.appendMany('g.photo-button', data)
.translate((d,i) => [(i * 170) + 100, 0])
.at({
// class: "dropdown"
})
.on('click', function(d, i){
photoIndex = i
setActiveImage()
timer.stop();
})
buttonSel.append('rect')
.at({
height: buttonHeight,
width: buttonWidth,
// fill: '#fff'
})
buttonSel.append('text')
.at({
textAnchor: 'middle',
// dominantBaseline: 'central',
dy: '.33em',
x: buttonWidth/2,
y: buttonHeight/2,
class: "monospace"
})
.text((d,i) => 'ground truth ' + (i + 1))
// buttonSel.classed('dropdown', true);
if (window.__photoPersonTimer) window.__photoPersonTimer.stop()
var timer = window.__photoPersonTimer = d3.interval(() => {
photoIndex = (photoIndex + 1) % data.length;
setActiveImage()
}, 2000)
function setActiveImage(i){
photoSel.st({opacity: (d, i) => i == photoIndex ? 1 : 0 })
buttonSel.classed('is-active-button', (d, i) => i == photoIndex)
}
setActiveImage()
}
createPhotoScroller();
|