From e590c206013bef0d991fa3e187b161f194323653 Mon Sep 17 00:00:00 2001 From: Peter Wu Date: Wed, 25 Mar 2015 22:05:10 +0100 Subject: Start with campus map --- images/campus.jpg | Bin 0 -> 205417 bytes js/campus-coords.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++ js/campus.js | 39 ++++++++++++++++++++++++++ pages/campus.html | 33 +++------------------- style/campus.less | 20 ++++++++++++++ style/colors.less | 6 ++++ style/main.less | 1 + 7 files changed, 148 insertions(+), 29 deletions(-) create mode 100644 images/campus.jpg create mode 100644 js/campus-coords.js create mode 100644 js/campus.js create mode 100644 style/campus.less diff --git a/images/campus.jpg b/images/campus.jpg new file mode 100644 index 0000000..c3b7d88 Binary files /dev/null and b/images/campus.jpg differ diff --git a/js/campus-coords.js b/js/campus-coords.js new file mode 100644 index 0000000..798bf69 --- /dev/null +++ b/js/campus-coords.js @@ -0,0 +1,78 @@ +define(function() { + 'use strict'; + return [ + { + "name": "Sportpark", + "coords": [ + [355,134], + [355,221], + [648,221], + [648,134] + ] + }, { + "name" : "Zwarte doos", + "coords": [ + [297,647], + [321,647], + [321,666], + [304,666], + [304,659], + [297,659], + ] + }, { + "name": "Metaforum", + "coords": [ + [453,492], + [512,492], + [512,607], + [453,607], + ] + }, { + "name": "Auditorium", + "coords": [ + [278,496], + [278,528], + [281,528], + [281,540], + [343,540], + [343,531], + [345,531], + [345,518], + [348,518], + [348,513], + [345,513], + [345,507], + [343,507], + [343,496], + [331,496], + [331,488], + [329,488], + [329,496], + ] + }, { + "name": "Hoofdgebouw", + "coords": [ + [400,454], + [400,482], + [387,482], + [387,510], + [397,510], + [397,528], + [391,528], + [391,558], + [401,558], + [401,587], + [416,587], + [416,558], + [429,558], + [429,528], + [419,528], + [419,519], + [429,519], + [430,482], + [416,482], + [416,454], + ] + } + ]; +}); diff --git a/js/campus.js b/js/campus.js new file mode 100644 index 0000000..941d5bb --- /dev/null +++ b/js/campus.js @@ -0,0 +1,39 @@ +define(['campus-coords', 'd3'], function(coords, d3) { + 'use strict'; + + var imageUrl = 'images/campus.jpg'; + + function initSvg(svg) { + svg + .attr('width', 1280) + .attr('height', 893); + + svg.append('image') + .attr('xlink:href', imageUrl) + .attr('width', 1280) + .attr('height', 893); + + svg.append('g') + .selectAll('polygon') + .data(coords) + .enter() + .append('a') + .attr('xlink:href', function(d) { + return '#/campus/' + d.name; + }) + .append('polygon') + .attr('class', 'building') + .attr('points', function(d) { + return d.coords.join(' '); + }) + .append('title') + .text(function(d) { + return d.name; + }); + } + + return function() { + var svg = d3.select('#campus-map').append('svg'); + initSvg(svg); + }; +}); diff --git a/pages/campus.html b/pages/campus.html index 59a64cd..fe62b9b 100644 --- a/pages/campus.html +++ b/pages/campus.html @@ -1,30 +1,5 @@ -

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mollis lacus. -Fusce rhoncus magna vel euismod scelerisque. Ut faucibus turpis eu dui mollis -accumsan. Sed id varius ipsum, a pharetra nisi. Donec porttitor sapien id -volutpat rutrum. Curabitur tincidunt nisi ut imperdiet varius. Nulla dignissim -nunc vel sem rhoncus malesuada. Proin in bibendum lectus. Donec porta velit eu -vulputate faucibus. Donec volutpat tristique sagittis. Proin et facilisis arcu, -ut viverra neque. Fusce vel aliquam nunc. Vestibulum faucibus eleifend -consequat. -

+ -

-In ipsum dolor, malesuada non interdum vitae, accumsan et risus. Aliquam -eleifend augue in enim gravida rhoncus a vel mi. Sed non ex eros. Morbi dapibus -condimentum lacus non tempus. Vestibulum eget molestie ex. Pellentesque nunc -neque, pulvinar eget massa eu, malesuada lacinia purus. Nam a tempor metus. -Curabitur ornare consectetur dui sed tincidunt. Morbi quis volutpat urna, sed -hendrerit orci. Sed mauris nisl, laoreet eu ex eget, pellentesque elementum -elit. Curabitur lobortis metus nec felis condimentum cursus. -

- -

-Aliquam dignissim ipsum ac metus hendrerit, a facilisis enim varius. Maecenas -nisi erat, sodales non mauris et, varius varius justo. Lorem ipsum dolor sit -amet, consectetur adipiscing elit. Curabitur mattis facilisis semper. Morbi -feugiat sagittis sem a congue. Morbi maximus vehicula faucibus. Suspendisse -lacinia mattis sagittis. Proin id feugiat ligula. Sed lorem augue, faucibus -vitae tristique a, congue et nibh. Vestibulum justo erat, dictum in vehicula ac, -venenatis sit amet ipsum. -

+
diff --git a/style/campus.less b/style/campus.less new file mode 100644 index 0000000..e93f4fa --- /dev/null +++ b/style/campus.less @@ -0,0 +1,20 @@ +@import "colors.less"; + +body[data-page="campus"] #campus-map { + /* NOTE: you cannot use all CSS properties here on SVG elements. + * Things like border-radius and box-shadow do not work here. */ + svg { + .building { + stroke: @color-campus-building-border; + stroke-width: 3; + fill: @color-campus-building-fill; + opacity: .3; + + &:hover { + opacity: .7; + stroke-width: 6; + } + } + } +} +/* vim: set sw=4 et ts=4: */ diff --git a/style/colors.less b/style/colors.less index 2518b5c..0f3fe7f 100644 --- a/style/colors.less +++ b/style/colors.less @@ -1,3 +1,9 @@ +/* Lovely colors! */ + +/* Campus map */ +@color-campus-building-border: #f00; +@color-campus-building-fill: #ccf; + /* Color scheme from http://paletton.com/#uid=53v0u0k7UUa3cZA5wXlaiQ5cFL3 */ @color-primary-0: #B5D6EB; /* Main Primary color */ diff --git a/style/main.less b/style/main.less index 65d7340..1a5f854 100644 --- a/style/main.less +++ b/style/main.less @@ -73,6 +73,7 @@ body[data-page="home"] { } @import "curriculum.less"; +@import "campus.less"; /* footer */ footer { -- cgit v1.2.1