adapting front page
This commit is contained in:
Micho
parent
3dbfd6c0d5
commit
ce38c8d4a3
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,994 +0,0 @@
|
||||||
body, html {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
#countries {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
margin: 0;
|
|
||||||
padding-right: -2px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group {
|
|
||||||
position: absolute;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
left: 0px;
|
|
||||||
right: -2px;
|
|
||||||
}
|
|
||||||
#countries .btn-group:first-child button {
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group:nth-child(2) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group:last-child {
|
|
||||||
top:25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group:last-child button {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries button {
|
|
||||||
text-align: center !important;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 3px 0px 3px 1px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridSort {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridSort button {
|
|
||||||
width: 33.33%;
|
|
||||||
text-align: center !important;
|
|
||||||
padding-left: 1px !important;
|
|
||||||
padding-right: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
text-align: right;
|
|
||||||
color: #AAA;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer a {
|
|
||||||
color: #AAA;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px solid #CCC;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* responsive design */
|
|
||||||
|
|
||||||
@media screen and (min-width: 860px) {
|
|
||||||
|
|
||||||
#container {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 860px;
|
|
||||||
height: 610px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0px auto;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 860px;
|
|
||||||
height: 610px
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 500px;
|
|
||||||
height: 600px;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 500px;
|
|
||||||
height: 600px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#marker {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 15px;
|
|
||||||
border: 3px solid #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#tooltip {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
margin-right: -300px;
|
|
||||||
background: rgba(0,0,0,0.8);
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
color: #FFF;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
max-width: 220px;
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
z-index: 600;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
background: #FFF;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
width: 320px;
|
|
||||||
height: 580px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
padding: 3px 10px 17px 10px;
|
|
||||||
z-index: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
#infoboxContent {
|
|
||||||
margin: 10px;
|
|
||||||
max-height: 540px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox p {
|
|
||||||
|
|
||||||
line-height: 1.2em;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox #close {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 340px;
|
|
||||||
height: 110px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number-content {
|
|
||||||
|
|
||||||
font-size: 70px;
|
|
||||||
line-height: 70px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
width: 340px;
|
|
||||||
height: 20px;
|
|
||||||
right: 5px;
|
|
||||||
top: 590px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 140px;
|
|
||||||
width: 340px;
|
|
||||||
height: 450px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridFlag {
|
|
||||||
|
|
||||||
margin: 0px 0px 32px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation .btn-full,
|
|
||||||
#controller-navigation .btn-group-vertical button {
|
|
||||||
|
|
||||||
width: 340px;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries {
|
|
||||||
height: 95px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group:nth-child(2) {
|
|
||||||
top:27px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group:nth-child(2) button {
|
|
||||||
border-radius: 0px !important;
|
|
||||||
border-bottom: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries .btn-group:last-child {
|
|
||||||
top:54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#small-warning {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 640px) and (max-width: 859px) {
|
|
||||||
|
|
||||||
#container {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 640px;
|
|
||||||
height: 490px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0px auto;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 640px;
|
|
||||||
height: 490px
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 400px;
|
|
||||||
height: 480px;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 400px;
|
|
||||||
height: 480px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#marker {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 16px;
|
|
||||||
height: 12px;
|
|
||||||
border: 3px solid #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#tooltip {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
margin-right: -300px;
|
|
||||||
background: rgba(0,0,0,0.8);
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
color: #FFF;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
max-width: 220px;
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
z-index: 600;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
background: #FFF;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
width: 360px;
|
|
||||||
max-height: 450px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
padding: 3px 10px 17px 10px;
|
|
||||||
z-index: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infoboxContent {
|
|
||||||
margin: 10px 10px 40px 10px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox p {
|
|
||||||
|
|
||||||
line-height: 1.2em;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox #close {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 220px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number-content {
|
|
||||||
|
|
||||||
font-size: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
width: 220px;
|
|
||||||
height: 20px;
|
|
||||||
right: 5px;
|
|
||||||
top: 470px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 110px;
|
|
||||||
width: 220px;
|
|
||||||
height: 350px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridFlag {
|
|
||||||
|
|
||||||
margin: 0px 0px 27px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation h3 {
|
|
||||||
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#controller-navigation .btn-full,
|
|
||||||
#controller-navigation .btn-group-vertical button {
|
|
||||||
|
|
||||||
width: 220px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 5px 8px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation #gridSort button {
|
|
||||||
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 5px 12px 5px 13px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries button {
|
|
||||||
text-align: center !important;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 2px 0px 2px 1px !important;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#small-warning {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 520px) and (max-width: 639px) {
|
|
||||||
|
|
||||||
#container {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 520px;
|
|
||||||
height: 370px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0px auto;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 520px;
|
|
||||||
height: 370px
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 275px;
|
|
||||||
height: 360px;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 275px;
|
|
||||||
height: 360px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#marker {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 11px;
|
|
||||||
height: 9px;
|
|
||||||
border: 3px solid #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#tooltip {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
margin-right: -275px;
|
|
||||||
background: rgba(0,0,0,0.8);
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
color: #FFF;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
max-width: 220px;
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
z-index: 600;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
background: #FFF;
|
|
||||||
left: 20px;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
max-height: 380px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
padding: 3px 10px 40px 10px;
|
|
||||||
z-index: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
#infoboxContent {
|
|
||||||
margin: 10px;
|
|
||||||
max-height: 320px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox p {
|
|
||||||
|
|
||||||
line-height: 1.2em;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox #close {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
width: 225px;
|
|
||||||
height: 50px;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number-content {
|
|
||||||
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
width: 225px;
|
|
||||||
height: 20px;
|
|
||||||
right: 5px;
|
|
||||||
top: 350px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 65px;
|
|
||||||
width: 225px;
|
|
||||||
height: 290px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridFlag {
|
|
||||||
|
|
||||||
margin: 0px 0px 23px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation h3 {
|
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 18px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#controller-navigation .btn-full,
|
|
||||||
#controller-navigation .btn-group-vertical button {
|
|
||||||
|
|
||||||
width: 225px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 5px 8px;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation #gridSort button {
|
|
||||||
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 5px 11px 5px 11px;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#small-warning {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 420px) and (max-width: 519px) {
|
|
||||||
|
|
||||||
#container {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 400px;
|
|
||||||
height: 740px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0px auto;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 400px;
|
|
||||||
height: 740px
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#grid {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 220px;
|
|
||||||
width: 400px;
|
|
||||||
height: 480px;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: #000;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridImage, #gridCanvas, #gridCanvasOverlay {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 400px;
|
|
||||||
height: 480px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#marker {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background-image: url(../img/marker_640.png)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#tooltip {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
margin-right: -300px;
|
|
||||||
background: rgba(0,0,0,0.8);
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
color: #FFF;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
max-width: 220px;
|
|
||||||
pointer-events: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
z-index: 600;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
background: #FFF;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
width: 360px;
|
|
||||||
max-height: 450px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.6);
|
|
||||||
padding: 3px 10px 17px 10px;
|
|
||||||
z-index: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infoboxContent {
|
|
||||||
margin: 10px 10px 40px 10px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox p {
|
|
||||||
|
|
||||||
line-height: 1.2em;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 5px 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#infobox #close {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 10px;
|
|
||||||
width: 145px;
|
|
||||||
height: 51px;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#display-number-content {
|
|
||||||
|
|
||||||
font-size: 31px;
|
|
||||||
line-height: 31px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-sortby {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 5px;
|
|
||||||
width: 225px;
|
|
||||||
height: 50px;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-sortby h3 {
|
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 18px;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#gridFlag {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
top: 75px;
|
|
||||||
z-index: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridFlag h3 {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 170px;
|
|
||||||
float: left;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 7px 0px 0px;
|
|
||||||
clear: both;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridFlag h3+.btn-group-vertical,
|
|
||||||
#gridFlag h3+.btn-full {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 225px;
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation .btn-full,
|
|
||||||
#controller-navigation .btn-group-vertical button {
|
|
||||||
|
|
||||||
width: 225px;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 5px 8px;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#gridFlag .btn-group-vertical {
|
|
||||||
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
width: 225px;
|
|
||||||
height: 20px;
|
|
||||||
right: 5px;
|
|
||||||
bottom: 10px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#controller-navigation #gridSort button {
|
|
||||||
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 5px 11px 5px 11px;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#countries {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#small-warning {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 419px) {
|
|
||||||
|
|
||||||
#container {
|
|
||||||
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
min-width: 0px;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#small-warning {
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear {
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -10,11 +10,12 @@ body {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
box-shadow: 0px 0px 40px -20px rgba(0,0,0,0.4);
|
box-shadow: 0px 0px 40px -20px rgba(0,0,0,0.4);
|
||||||
width: 860px;
|
width: 950px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 50px;
|
padding: 30px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.social {
|
.social {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
|
@ -80,7 +81,7 @@ body {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a#odclogo {
|
a#odclogo, a#pclogo, a#ntlogo {
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -89,26 +90,24 @@ body {
|
||||||
font-size: 0px;
|
font-size: 0px;
|
||||||
text-indent: -1000px;
|
text-indent: -1000px;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
background: url(../img/opendatacity.png) center center no-repeat;
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a#mvlogo {
|
a#odclogo {
|
||||||
|
background: url(../img/opendatacity.png) center center no-repeat;
|
||||||
|
|
||||||
display: inline-block;
|
}
|
||||||
position: relative;
|
|
||||||
width: 200px;
|
a#pclogo {
|
||||||
height: 60px;
|
background: url(../img/picocell.png) center center no-repeat;
|
||||||
font-size: 0px;
|
|
||||||
text-indent: -1000px;
|
}
|
||||||
color: transparent;
|
|
||||||
background: url(../img/myvideo.png) center center no-repeat;
|
a#ntlogo {
|
||||||
margin: 0px;
|
background: url(../img/newthinking.png) center center no-repeat;
|
||||||
padding: 0px;
|
|
||||||
top: -5px;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 729 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -1,377 +0,0 @@
|
||||||
function Canvas(options) {
|
|
||||||
var me = this;
|
|
||||||
|
|
||||||
var imageNode = options.imageNode;
|
|
||||||
var node = options.node;
|
|
||||||
var nodeOverlay = options.nodeOverlay;
|
|
||||||
|
|
||||||
var context = node[0].getContext("2d");
|
|
||||||
var contextOverlay = nodeOverlay[0].getContext("2d");
|
|
||||||
|
|
||||||
var data = options.data;
|
|
||||||
var columns = options.columns;
|
|
||||||
var rows = (data.length/columns);
|
|
||||||
var thumbWidth = options.thumbWidth;
|
|
||||||
var thumbHeight = options.thumbHeight;
|
|
||||||
|
|
||||||
var width = thumbWidth*columns;
|
|
||||||
var height = thumbHeight*rows;
|
|
||||||
|
|
||||||
var projectX = [];
|
|
||||||
var projectY = [];
|
|
||||||
var deproject = [];
|
|
||||||
|
|
||||||
var indexes = [];
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
entry = data[i];
|
|
||||||
entry.id = i;
|
|
||||||
indexes[i] = { entry:entry, sortBy:i, id:i };
|
|
||||||
|
|
||||||
var x = (i % columns);
|
|
||||||
var y = Math.floor(i/columns);
|
|
||||||
|
|
||||||
entry.oldPos = i;
|
|
||||||
entry.newPos = i;
|
|
||||||
entry.oldColor = [0,0,0,0];
|
|
||||||
entry.newColor = [0,0,0,0];
|
|
||||||
|
|
||||||
projectX[i] = x*thumbWidth;
|
|
||||||
projectY[i] = y*thumbHeight;
|
|
||||||
|
|
||||||
if (deproject[x] === undefined) deproject[x] = [];
|
|
||||||
|
|
||||||
deproject[x][y] = i;
|
|
||||||
}
|
|
||||||
|
|
||||||
nodeOverlay.mouseenter(function (e) { me.toolTip.show(e.pageX, e.pageY) });
|
|
||||||
nodeOverlay.mousemove( function (e) { me.toolTip.show(e.pageX, e.pageY) });
|
|
||||||
nodeOverlay.mouseleave(function (e) { me.toolTip.hide() });
|
|
||||||
nodeOverlay.click(function (e) {
|
|
||||||
me.toolTip.showInfobox();
|
|
||||||
});
|
|
||||||
|
|
||||||
me.toolTip = new (function () {
|
|
||||||
var me = this;
|
|
||||||
var status = {};
|
|
||||||
var markedEntry;
|
|
||||||
|
|
||||||
var tooltip = $('#tooltip');
|
|
||||||
var marker = $('#marker');
|
|
||||||
var infobox = $('#infobox');
|
|
||||||
var infoboxContent = $('#infoboxContent');
|
|
||||||
|
|
||||||
$('#infobox .close').click(function () { infobox.hide() });
|
|
||||||
|
|
||||||
me.hide = function () {
|
|
||||||
if (status.shown) {
|
|
||||||
tooltip.hide();
|
|
||||||
marker.hide();
|
|
||||||
}
|
|
||||||
status.shown = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
me.show = function (x, y) {
|
|
||||||
if (!status.shown) {
|
|
||||||
tooltip.show();
|
|
||||||
marker.show();
|
|
||||||
}
|
|
||||||
status.shown = true;
|
|
||||||
|
|
||||||
var offset = $('#gridCanvas').offset();
|
|
||||||
x -= offset.left;
|
|
||||||
y -= offset.top;
|
|
||||||
|
|
||||||
var xi = clamp(Math.floor(x/thumbWidth ), 0, columns - 1);
|
|
||||||
var yi = clamp(Math.floor(y/thumbHeight), 0, rows - 1);
|
|
||||||
var index = deproject[xi][yi];
|
|
||||||
var id = index.id
|
|
||||||
var entry = indexes[index].entry;
|
|
||||||
var html = '<b>'+entry.title+'</b><br>'+entry.hint;
|
|
||||||
var content = html+xi+'_'+yi;
|
|
||||||
|
|
||||||
if (status.content != content) {
|
|
||||||
tooltip.html(html);
|
|
||||||
|
|
||||||
var tx = xi*thumbWidth;
|
|
||||||
var ty = yi*thumbHeight;
|
|
||||||
|
|
||||||
marker.css({
|
|
||||||
left: tx-3,
|
|
||||||
top: ty-3
|
|
||||||
});
|
|
||||||
|
|
||||||
tx += thumbWidth/2 - tooltip.outerWidth()/2;
|
|
||||||
if (tx < -5) tx = -5;
|
|
||||||
|
|
||||||
if (ty + thumbHeight + 120 < node.innerHeight()) {
|
|
||||||
tooltip.css({
|
|
||||||
left: tx,
|
|
||||||
top: ty + thumbHeight + 3,
|
|
||||||
bottom: 'auto'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
tooltip.css({
|
|
||||||
left: tx,
|
|
||||||
top: 'auto',
|
|
||||||
bottom: node.innerHeight() - (ty - 3)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
status.content = content;
|
|
||||||
markedEntry = entry;
|
|
||||||
}
|
|
||||||
|
|
||||||
function replace(text, regexp, value) {
|
|
||||||
value = value.replace(/%/g, '%');
|
|
||||||
return text.replace(regexp, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
var highlightCountries = {
|
|
||||||
// Deutschland
|
|
||||||
'DE':4,
|
|
||||||
// deutschsprachig
|
|
||||||
'CH':3,'AT':3,
|
|
||||||
// EU
|
|
||||||
'FR':2,'BE':2,'BG':2,'DK':2,'EE':2,'FI':2,'GR':2,'IE':2,'IT':2,'LV':2,'LT':2,'LU':2,'MT':2,'NL':2,'PL':2,'PT':2,'RO':2,'SE':2,'SK':2,'SI':2,'ES':2,'CZ':2,'HU':2,'GB':2,'CY':2,
|
|
||||||
// westliche Staaten
|
|
||||||
'US':1
|
|
||||||
};
|
|
||||||
|
|
||||||
me.showInfobox = function () {
|
|
||||||
infobox.show();
|
|
||||||
|
|
||||||
var c = markedEntry.restrictionsAll;
|
|
||||||
var countries = [];
|
|
||||||
for (var i = 0; i < c.length; i++) {
|
|
||||||
var countryName = countryCodes[c[i]];
|
|
||||||
if (countryName === undefined) console.error('Unbekannter Code: '+c[i]);
|
|
||||||
countryName = inEnglishPlease ? countryName.en : countryName.de;
|
|
||||||
|
|
||||||
var style = 'color:#888';
|
|
||||||
switch (highlightCountries[c[i]]) {
|
|
||||||
case 1: break;
|
|
||||||
case 2: break;
|
|
||||||
case 3: style = ''; break;
|
|
||||||
case 4: style = 'font-weight:bold'; break;
|
|
||||||
}
|
|
||||||
countries.push('<span title="'+countryName+'" style="'+style+'">'+c[i]+'</span>');
|
|
||||||
}
|
|
||||||
if (countries.length == 0) {
|
|
||||||
countries = 'Keinem Land';
|
|
||||||
} else {
|
|
||||||
countries = countries.join(', ');
|
|
||||||
}
|
|
||||||
|
|
||||||
var html = infoboxTemplate;
|
|
||||||
|
|
||||||
html = replace(html, /%title%/g, markedEntry.title);
|
|
||||||
html = replace(html, /%published%/g, formatDate(markedEntry.published));
|
|
||||||
html = replace(html, /%url%/g, markedEntry.url);
|
|
||||||
html = replace(html, /%author%/g, markedEntry.author);
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
html = replace(html, /%restriction%/g, (markedEntry.restrictedInDE > 1) ? 'Yes' : 'No');
|
|
||||||
html = replace(html, /%reason%/g, markedEntry.reasonEN);
|
|
||||||
} else {
|
|
||||||
html = replace(html, /%restriction%/g, (markedEntry.restrictedInDE > 1) ? 'Ja' : 'Nein');
|
|
||||||
html = replace(html, /%reason%/g, markedEntry.reasonDE);
|
|
||||||
}
|
|
||||||
html = replace(html, /%restrictionCountries%/g, countries);
|
|
||||||
html = replace(html, /%rank%/g, formatInteger(markedEntry.rank));
|
|
||||||
html = replace(html, /%thumbnail%/g, markedEntry.thumbnail);
|
|
||||||
html = replace(html, /%rating%/g, formatRating(markedEntry.rating));
|
|
||||||
html = replace(html, /%viewCount%/g, formatInteger(markedEntry.viewCount));
|
|
||||||
html = replace(html, /%category%/g, markedEntry.category);
|
|
||||||
|
|
||||||
if (!markedEntry.restrictedInDE > 1) html = replace(html, /%de%.*?%\/de%/g, '');
|
|
||||||
|
|
||||||
html = replace(html, /%\/?de%/g, '');
|
|
||||||
|
|
||||||
infoboxContent.html(html);
|
|
||||||
$('#infoboxContent span').tooltip();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
me.sort = function (options) {
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
indexes[i].sortBy = options.callback(indexes[i].entry);
|
|
||||||
indexes[i].oldIndex = i;
|
|
||||||
indexes[i].entry.hint = options.hint(indexes[i].entry);
|
|
||||||
}
|
|
||||||
|
|
||||||
indexes.sort(function (a, b) {
|
|
||||||
if (a.sortBy == b.sortBy) {
|
|
||||||
return a.oldIndex - b.oldIndex;
|
|
||||||
} else {
|
|
||||||
return a.sortBy - b.sortBy;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
for (var i = 0; i < indexes.length; i++) {
|
|
||||||
var entry = indexes[i].entry;
|
|
||||||
var id = entry.id;
|
|
||||||
var x = i % columns;
|
|
||||||
var y = Math.floor(i/columns);
|
|
||||||
|
|
||||||
entry.oldPos = entry.newPos;
|
|
||||||
entry.newPos = i;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
var cHigh = [237, 28, 36, 0.6];
|
|
||||||
var cMiddle = [255, 255, 60, 0.6];
|
|
||||||
var cLow = [200, 255, 200, 0.8];
|
|
||||||
|
|
||||||
var cHigh = [180, 28, 36, 0.6];
|
|
||||||
var cMiddle = [255, 142, 146, 0.6];
|
|
||||||
var cLow = [255, 255, 255, 0.8];
|
|
||||||
|
|
||||||
me.flag = function (options) {
|
|
||||||
var count = 0;
|
|
||||||
for (var i = 0; i < indexes.length; i++) {
|
|
||||||
var entry = indexes[i].entry;
|
|
||||||
var flagged = options.callback(entry);
|
|
||||||
var color;
|
|
||||||
|
|
||||||
switch (flagged) {
|
|
||||||
case 0.0: color = cLow; break;
|
|
||||||
case 0.5: color = cMiddle; break;
|
|
||||||
case 1.0: color = cHigh; break;
|
|
||||||
default:
|
|
||||||
var v = flagged*2;
|
|
||||||
if (v > 1) {
|
|
||||||
v -= 1;
|
|
||||||
color = [
|
|
||||||
cHigh[0]*v + (1-v)*cMiddle[0],
|
|
||||||
cHigh[1]*v + (1-v)*cMiddle[1],
|
|
||||||
cHigh[2]*v + (1-v)*cMiddle[2],
|
|
||||||
cHigh[3]*v + (1-v)*cMiddle[3]
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
color = [
|
|
||||||
cMiddle[0]*v + (1-v)*cLow[0],
|
|
||||||
cMiddle[1]*v + (1-v)*cLow[1],
|
|
||||||
cMiddle[2]*v + (1-v)*cLow[2],
|
|
||||||
cMiddle[3]*v + (1-v)*cLow[3]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (flagged > 0.5) count++;
|
|
||||||
|
|
||||||
entry.oldColor = entry.newColor;
|
|
||||||
entry.newColor = color;
|
|
||||||
}
|
|
||||||
return count;
|
|
||||||
}
|
|
||||||
|
|
||||||
me.makeItSo = function () {
|
|
||||||
var image = imageNode[0];
|
|
||||||
|
|
||||||
var frame = 1;
|
|
||||||
var frameNumber = 10;
|
|
||||||
|
|
||||||
var interval = setInterval(function () {
|
|
||||||
var a = frame/frameNumber;
|
|
||||||
a = (1-Math.cos(a*Math.PI))/2;
|
|
||||||
if (frame >= frameNumber) a = 1;
|
|
||||||
|
|
||||||
context.fillStyle = '#FFF';
|
|
||||||
context.fillRect(0,0,width,height);
|
|
||||||
|
|
||||||
var order = [];
|
|
||||||
|
|
||||||
for (var i = 0; i < indexes.length; i++) {
|
|
||||||
var entry = indexes[i].entry;
|
|
||||||
var id = entry.id;
|
|
||||||
order[i] = {
|
|
||||||
entry:entry,
|
|
||||||
value:(1-a)*entry.oldColor[3] + a*entry.newColor[3]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
order.sort(function (a,b) {
|
|
||||||
if (a.value == b.value) {
|
|
||||||
return a.newPos - b.newPos;
|
|
||||||
} else {
|
|
||||||
return a.value-b.value;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
for (var i = order.length-1; i >= 0; i--) {
|
|
||||||
var entry = order[i].entry;
|
|
||||||
var id = entry.id;
|
|
||||||
|
|
||||||
var x0 = projectX[entry.oldPos];
|
|
||||||
var y0 = projectY[entry.oldPos];
|
|
||||||
var x1 = projectX[entry.newPos];
|
|
||||||
var y1 = projectY[entry.newPos];
|
|
||||||
|
|
||||||
var x = Math.round((1-a)*x0 + a*x1);
|
|
||||||
var y = Math.round((1-a)*y0 + a*y1);
|
|
||||||
|
|
||||||
context.drawImage(
|
|
||||||
image,
|
|
||||||
projectX[id],
|
|
||||||
projectY[id],
|
|
||||||
thumbWidth,
|
|
||||||
thumbHeight,
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
thumbWidth,
|
|
||||||
thumbHeight
|
|
||||||
);
|
|
||||||
|
|
||||||
var color = [
|
|
||||||
(1-a)*entry.oldColor[0] + a*entry.newColor[0],
|
|
||||||
(1-a)*entry.oldColor[1] + a*entry.newColor[1],
|
|
||||||
(1-a)*entry.oldColor[2] + a*entry.newColor[2],
|
|
||||||
(1-a)*entry.oldColor[3] + a*entry.newColor[3]
|
|
||||||
];
|
|
||||||
|
|
||||||
color = generateRGBA(color);
|
|
||||||
|
|
||||||
context.fillStyle = color;
|
|
||||||
context.fillRect(x, y, thumbWidth, thumbHeight);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (frame >= frameNumber) {
|
|
||||||
clearInterval(interval);
|
|
||||||
for (var i = 0; i < indexes.length; i++) {
|
|
||||||
indexes[i].entry.oldColor = indexes[i].entry.newColor;
|
|
||||||
indexes[i].entry.oldPos = indexes[i].entry.newPos;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
frame++;
|
|
||||||
}, 60);
|
|
||||||
}
|
|
||||||
|
|
||||||
me.makeItFast = function () {
|
|
||||||
for (var i = 0; i < indexes.length; i++) {
|
|
||||||
var entry = indexes[i].entry;
|
|
||||||
var id = entry.id;
|
|
||||||
|
|
||||||
var x = projectX[entry.newPos];
|
|
||||||
var y = projectY[entry.newPos];
|
|
||||||
var color = generateRGBA(entry.newColor);
|
|
||||||
|
|
||||||
context.fillStyle = color;
|
|
||||||
context.fillRect(x, y, thumbWidth, thumbHeight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateRGBA(a) {
|
|
||||||
return 'rgba('+Math.round(a[0])+','+Math.round(a[1])+','+Math.round(a[2])+','+Math.round(a[3]*100)/100+')';
|
|
||||||
}
|
|
||||||
|
|
||||||
function clamp(value, min, max) {
|
|
||||||
if (value < min) value = min;
|
|
||||||
if (value > max) value = max;
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
return me;
|
|
||||||
}
|
|
||||||
|
|
@ -27,31 +27,9 @@ $(document).ready(function(){
|
||||||
/* embed code*/
|
/* embed code*/
|
||||||
if ($('#embed-form').length) {
|
if ($('#embed-form').length) {
|
||||||
var $f = $('#embed-form');
|
var $f = $('#embed-form');
|
||||||
var $url = 'http://apps.opendatacity.de/gema-vs-youtube/';
|
var $url = 'http://apps.opendatacity.de/relog/frame.html';
|
||||||
var embedCode = function(){
|
var embedCode = function(){
|
||||||
var $size = $('input:radio[name=size]:checked',$f).val();
|
var $code = '<iframe src="'+$url+'" width="950" height="580" scrolling="no" frameborder="0" style="margin:0"><a href="'+$url+'">re:log - Besucherstromanalyse per re:publica W-LAN</a></iframe><br><small>Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Unterstützt durch <a href="http://www.picocell.de">picocell</a> und <a href="http://newthinking.de">newthinking</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.</small>';
|
||||||
var $lang = $('input:radio[name=lang]:checked',$f).val();
|
|
||||||
$lang = ($lang === "") ? "de" : $lang;
|
|
||||||
$size = ($size === "") ? "large" : $size;
|
|
||||||
|
|
||||||
if ($lang == "de") {
|
|
||||||
var text = 'Die geblockten Top-1000-YouTube-Videos';
|
|
||||||
var suffix = 'Unterstützt durch <a href="http://www.myvideo.de">MyVideo</a>. Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.';
|
|
||||||
var file = 'frame.de.html';
|
|
||||||
} else {
|
|
||||||
var text = 'Top 1000 YouTube Videos';
|
|
||||||
var suffix = 'Supported by <a href="http://www.myvideo.de">MyVideo</a>. Made by <a href="http://www.opendatacity.de/">OpenDataCity</a>. This App is under <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">CC-BY 3.0</a>.';
|
|
||||||
var file = 'frame.en.html';
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#embed-size',$f).show();
|
|
||||||
switch ($size) {
|
|
||||||
case 'large': var $wh = 'width="860" height="610"'; break;
|
|
||||||
case 'medium': var $wh = 'width="640" height="490"'; break;
|
|
||||||
case 'small': var $wh = 'width="520" height="370"'; break;
|
|
||||||
case 'verysmall': var $wh = 'width="420" height="740"'; break;
|
|
||||||
}
|
|
||||||
var $code = '<iframe src="'+$url+file+'" '+$wh+' scrolling="no" frameborder="0" style="margin:0"><a href="'+$url+'">'+text+'</a></iframe><br><small>'+suffix+'</small>';
|
|
||||||
$('#embed-code', $f).text($code);
|
$('#embed-code', $f).text($code);
|
||||||
};
|
};
|
||||||
embedCode();
|
embedCode();
|
||||||
|
|
|
||||||
|
|
@ -1,487 +0,0 @@
|
||||||
|
|
||||||
var countryCodes = {
|
|
||||||
'AD':{de:'Andorra',en:'Andorra'},
|
|
||||||
'AE':{de:'Vereinigte Arabische Emirate',en:'United Arab Emirates'},
|
|
||||||
'AF':{de:'Afghanistan',en:'Afghanistan'},
|
|
||||||
'AG':{de:'Antigua und Barbuda',en:'Antigua and Barbuda'},
|
|
||||||
'AI':{de:'Anguilla',en:'Anguilla'},
|
|
||||||
'AL':{de:'Albanien',en:'Albania'},
|
|
||||||
'AM':{de:'Armenien',en:'Armenia'},
|
|
||||||
'AO':{de:'Angola',en:'Angola'},
|
|
||||||
'AQ':{de:'Antarktika',en:'Antarctica'},
|
|
||||||
'AR':{de:'Argentinien',en:'Argentina'},
|
|
||||||
'AS':{de:'Amerikanisch-Samoa',en:'American Samoa'},
|
|
||||||
'AT':{de:'Österreich',en:'Austria'},
|
|
||||||
'AU':{de:'Australien',en:'Australia'},
|
|
||||||
'AW':{de:'Aruba',en:'Aruba'},
|
|
||||||
'AX':{de:'Åland',en:'Åland Islands'},
|
|
||||||
'AZ':{de:'Aserbaidschan',en:'Azerbaijan'},
|
|
||||||
'BA':{de:'Bosnien und Herzegowina',en:'Bosnia and Herzegovina'},
|
|
||||||
'BB':{de:'Barbados',en:'Barbados'},
|
|
||||||
'BD':{de:'Bangladesch',en:'Bangladesh'},
|
|
||||||
'BE':{de:'Belgien',en:'Belgium'},
|
|
||||||
'BF':{de:'Burkina Faso',en:'Burkina Faso'},
|
|
||||||
'BG':{de:'Bulgarien',en:'Bulgaria'},
|
|
||||||
'BH':{de:'Bahrain',en:'Bahrain'},
|
|
||||||
'BI':{de:'Burundi',en:'Burundi'},
|
|
||||||
'BJ':{de:'Benin',en:'Benin'},
|
|
||||||
'BL':{de:'Saint-Barthélemy',en:'Saint Barthélemy'},
|
|
||||||
'BM':{de:'Bermuda',en:'Bermuda'},
|
|
||||||
'BN':{de:'Brunei Darussalam',en:'Brunei Darussalam'},
|
|
||||||
'BO':{de:'Bolivien',en:'Bolivia, Plurinational State of'},
|
|
||||||
'BQ':{de:'Bonaire, Sint Eustatius und Saba (Niederlande)',en:'Bonaire, Sint Eustatius and Saba'},
|
|
||||||
'BR':{de:'Brasilien',en:'Brazil'},
|
|
||||||
'BS':{de:'Bahamas',en:'Bahamas'},
|
|
||||||
'BT':{de:'Bhutan',en:'Bhutan'},
|
|
||||||
'BV':{de:'Bouvetinsel',en:'Bouvet Island'},
|
|
||||||
'BW':{de:'Botswana',en:'Botswana'},
|
|
||||||
'BY':{de:'Belarus (Weißrussland)',en:'Belarus'},
|
|
||||||
'BZ':{de:'Belize',en:'Belize'},
|
|
||||||
'CA':{de:'Kanada',en:'Canada'},
|
|
||||||
'CC':{de:'Kokosinseln',en:'Cocos (Keeling) Islands'},
|
|
||||||
'CD':{de:'Kongo, Demokratische Republik (ehem. Zaire)',en:'Congo, the Democratic Republic of the'},
|
|
||||||
'CF':{de:'Zentralafrikanische Republik',en:'Central African Republic'},
|
|
||||||
'CG':{de:'Republik Kongo',en:'Congo'},
|
|
||||||
'CH':{de:'Schweiz',en:'Switzerland'},
|
|
||||||
'CI':{de:'Elfenbeinküste',en:'Côte d’Ivoire'},
|
|
||||||
'CK':{de:'Cookinseln',en:'Cook Islands'},
|
|
||||||
'CL':{de:'Chile',en:'Chile'},
|
|
||||||
'CM':{de:'Kamerun',en:'Cameroon'},
|
|
||||||
'CN':{de:'China, Volksrepublik',en:'China'},
|
|
||||||
'CO':{de:'Kolumbien',en:'Colombia'},
|
|
||||||
'CR':{de:'Costa Rica',en:'Costa Rica'},
|
|
||||||
'CU':{de:'Kuba',en:'Cuba'},
|
|
||||||
'CV':{de:'Kap Verde',en:'Cape Verde'},
|
|
||||||
'CW':{de:'Curaçao',en:'Curaçao'},
|
|
||||||
'CX':{de:'Weihnachtsinsel',en:'Christmas Island'},
|
|
||||||
'CY':{de:'Zypern',en:'Cyprus'},
|
|
||||||
'CZ':{de:'Tschechische Republik',en:'Czech Republic'},
|
|
||||||
'DE':{de:'Deutschland',en:'Germany'},
|
|
||||||
'DJ':{de:'Dschibuti',en:'Djibouti'},
|
|
||||||
'DK':{de:'Dänemark',en:'Denmark'},
|
|
||||||
'DM':{de:'Dominica',en:'Dominica'},
|
|
||||||
'DO':{de:'Dominikanische Republik',en:'Dominican Republic'},
|
|
||||||
'DZ':{de:'Algerien',en:'Algeria'},
|
|
||||||
'EC':{de:'Ecuador',en:'Ecuador'},
|
|
||||||
'EE':{de:'Estland',en:'Estonia'},
|
|
||||||
'EG':{de:'Ägypten',en:'Egypt'},
|
|
||||||
'EH':{de:'Westsahara',en:'Western Sahara'},
|
|
||||||
'ER':{de:'Eritrea',en:'Eritrea'},
|
|
||||||
'ES':{de:'Spanien',en:'Spain'},
|
|
||||||
'ET':{de:'Äthiopien',en:'Ethiopia'},
|
|
||||||
'FI':{de:'Finnland',en:'Finland'},
|
|
||||||
'FJ':{de:'Fidschi',en:'Fiji'},
|
|
||||||
'FK':{de:'Falklandinseln',en:'Falkland Islands (Malvinas)'},
|
|
||||||
'FM':{de:'Mikronesien',en:'Micronesia, Federated States of'},
|
|
||||||
'FO':{de:'Färöer',en:'Faroe Islands'},
|
|
||||||
'FR':{de:'Frankreich',en:'France'},
|
|
||||||
'GA':{de:'Gabun',en:'Gabon'},
|
|
||||||
'GB':{de:'Vereinigtes Königreich Großbritannien und Nordirland',en:'United Kingdom'},
|
|
||||||
'GD':{de:'Grenada',en:'Grenada'},
|
|
||||||
'GE':{de:'Georgien',en:'Georgia'},
|
|
||||||
'GF':{de:'Französisch-Guayana',en:'French Guiana'},
|
|
||||||
'GG':{de:'Guernsey (Kanalinsel)',en:'Guernsey'},
|
|
||||||
'GH':{de:'Ghana',en:'Ghana'},
|
|
||||||
'GI':{de:'Gibraltar',en:'Gibraltar'},
|
|
||||||
'GL':{de:'Grönland',en:'Greenland'},
|
|
||||||
'GM':{de:'Gambia',en:'Gambia'},
|
|
||||||
'GN':{de:'Guinea',en:'Guinea'},
|
|
||||||
'GP':{de:'Guadeloupe',en:'Guadeloupe'},
|
|
||||||
'GQ':{de:'Äquatorialguinea',en:'Equatorial Guinea'},
|
|
||||||
'GR':{de:'Griechenland',en:'Greece'},
|
|
||||||
'GS':{de:'Südgeorgien und die Südlichen Sandwichinseln',en:'South Georgia and the South Sandwich Islands'},
|
|
||||||
'GT':{de:'Guatemala',en:'Guatemala'},
|
|
||||||
'GU':{de:'Guam',en:'Guam'},
|
|
||||||
'GW':{de:'Guinea-Bissau',en:'Guinea-Bissau'},
|
|
||||||
'GY':{de:'Guyana',en:'Guyana'},
|
|
||||||
'HK':{de:'Hongkong',en:'Hong Kong'},
|
|
||||||
'HM':{de:'Heard und McDonaldinseln',en:'Heard Island and McDonald Islands'},
|
|
||||||
'HN':{de:'Honduras',en:'Honduras'},
|
|
||||||
'HR':{de:'Kroatien',en:'Croatia'},
|
|
||||||
'HT':{de:'Haiti',en:'Haiti'},
|
|
||||||
'HU':{de:'Ungarn',en:'Hungary'},
|
|
||||||
'ID':{de:'Indonesien',en:'Indonesia'},
|
|
||||||
'IE':{de:'Irland',en:'Ireland'},
|
|
||||||
'IL':{de:'Israel',en:'Israel'},
|
|
||||||
'IM':{de:'Insel Man',en:'Isle of Man'},
|
|
||||||
'IN':{de:'Indien',en:'India'},
|
|
||||||
'IO':{de:'Britisches Territorium im Indischen Ozean',en:'British Indian Ocean Territory'},
|
|
||||||
'IQ':{de:'Irak',en:'Iraq'},
|
|
||||||
'IR':{de:'Iran, Islamische Republik',en:'Iran, Islamic Republic of'},
|
|
||||||
'IS':{de:'Island',en:'Iceland'},
|
|
||||||
'IT':{de:'Italien',en:'Italy'},
|
|
||||||
'JE':{de:'Jersey (Kanalinsel)',en:'Jersey'},
|
|
||||||
'JM':{de:'Jamaika',en:'Jamaica'},
|
|
||||||
'JO':{de:'Jordanien',en:'Jordan'},
|
|
||||||
'JP':{de:'Japan',en:'Japan'},
|
|
||||||
'KE':{de:'Kenia',en:'Kenya'},
|
|
||||||
'KG':{de:'Kirgisistan',en:'Kyrgyzstan'},
|
|
||||||
'KH':{de:'Kambodscha',en:'Cambodia'},
|
|
||||||
'KI':{de:'Kiribati',en:'Kiribati'},
|
|
||||||
'KM':{de:'Komoren',en:'Comoros'},
|
|
||||||
'KN':{de:'St. Kitts und Nevis',en:'Saint Kitts and Nevis'},
|
|
||||||
'KP':{de:'Korea, Demokratische Volksrepublik (Nordkorea)',en:'Korea, Democratic People’s Republic of'},
|
|
||||||
'KR':{de:'Korea, Republik (Südkorea)',en:'Korea, Republic of'},
|
|
||||||
'KW':{de:'Kuwait',en:'Kuwait'},
|
|
||||||
'KY':{de:'Kaimaninseln',en:'Cayman Islands'},
|
|
||||||
'KZ':{de:'Kasachstan',en:'Kazakhstan'},
|
|
||||||
'LA':{de:'Laos, Demokratische Volksrepublik',en:'Lao People’s Democratic Republic'},
|
|
||||||
'LB':{de:'Libanon',en:'Lebanon'},
|
|
||||||
'LC':{de:'St. Lucia',en:'Saint Lucia'},
|
|
||||||
'LI':{de:'Liechtenstein',en:'Liechtenstein'},
|
|
||||||
'LK':{de:'Sri Lanka',en:'Sri Lanka'},
|
|
||||||
'LR':{de:'Liberia',en:'Liberia'},
|
|
||||||
'LS':{de:'Lesotho',en:'Lesotho'},
|
|
||||||
'LT':{de:'Litauen',en:'Lithuania'},
|
|
||||||
'LU':{de:'Luxemburg',en:'Luxembourg'},
|
|
||||||
'LV':{de:'Lettland',en:'Latvia'},
|
|
||||||
'LY':{de:'Libyen',en:'Libya'},
|
|
||||||
'MA':{de:'Marokko',en:'Morocco'},
|
|
||||||
'MC':{de:'Monaco',en:'Monaco'},
|
|
||||||
'MD':{de:'Moldawien (Republik Moldau)',en:'Moldova, Republic of'},
|
|
||||||
'ME':{de:'Montenegro',en:'Montenegro'},
|
|
||||||
'MF':{de:'Saint-Martin (franz. Teil)',en:'Saint Martin (French part)'},
|
|
||||||
'MG':{de:'Madagaskar',en:'Madagascar'},
|
|
||||||
'MH':{de:'Marshallinseln',en:'Marshall Islands'},
|
|
||||||
'MK':{de:'Mazedonien, ehem. jugoslawische Republik',en:'Macedonia, the former Yugoslav Republic of'},
|
|
||||||
'ML':{de:'Mali',en:'Mali'},
|
|
||||||
'MM':{de:'Myanmar (Burma)',en:'Myanmar'},
|
|
||||||
'MN':{de:'Mongolei',en:'Mongolia'},
|
|
||||||
'MO':{de:'Macao',en:'Macao'},
|
|
||||||
'MP':{de:'Nördliche Marianen',en:'Northern Mariana Islands'},
|
|
||||||
'MQ':{de:'Martinique',en:'Martinique'},
|
|
||||||
'MR':{de:'Mauretanien',en:'Mauritania'},
|
|
||||||
'MS':{de:'Montserrat',en:'Montserrat'},
|
|
||||||
'MT':{de:'Malta',en:'Malta'},
|
|
||||||
'MU':{de:'Mauritius',en:'Mauritius'},
|
|
||||||
'MV':{de:'Malediven',en:'Maldives'},
|
|
||||||
'MW':{de:'Malawi',en:'Malawi'},
|
|
||||||
'MX':{de:'Mexiko',en:'Mexico'},
|
|
||||||
'MY':{de:'Malaysia',en:'Malaysia'},
|
|
||||||
'MZ':{de:'Mosambik',en:'Mozambique'},
|
|
||||||
'NA':{de:'Namibia',en:'Namibia'},
|
|
||||||
'NC':{de:'Neukaledonien',en:'New Caledonia'},
|
|
||||||
'NE':{de:'Niger',en:'Niger'},
|
|
||||||
'NF':{de:'Norfolkinsel',en:'Norfolk Island'},
|
|
||||||
'NG':{de:'Nigeria',en:'Nigeria'},
|
|
||||||
'NI':{de:'Nicaragua',en:'Nicaragua'},
|
|
||||||
'NL':{de:'Niederlande',en:'Netherlands'},
|
|
||||||
'NO':{de:'Norwegen',en:'Norway'},
|
|
||||||
'NP':{de:'Nepal',en:'Nepal'},
|
|
||||||
'NR':{de:'Nauru',en:'Nauru'},
|
|
||||||
'NU':{de:'Niue',en:'Niue'},
|
|
||||||
'NZ':{de:'Neuseeland',en:'New Zealand'},
|
|
||||||
'OM':{de:'Oman',en:'Oman'},
|
|
||||||
'PA':{de:'Panama',en:'Panama'},
|
|
||||||
'PE':{de:'Peru',en:'Peru'},
|
|
||||||
'PF':{de:'Französisch-Polynesien',en:'French Polynesia'},
|
|
||||||
'PG':{de:'Papua-Neuguinea',en:'Papua New Guinea'},
|
|
||||||
'PH':{de:'Philippinen',en:'Philippines'},
|
|
||||||
'PK':{de:'Pakistan',en:'Pakistan'},
|
|
||||||
'PL':{de:'Polen',en:'Poland'},
|
|
||||||
'PM':{de:'Saint-Pierre und Miquelon',en:'Saint Pierre and Miquelon'},
|
|
||||||
'PN':{de:'Pitcairninseln',en:'Pitcairn'},
|
|
||||||
'PR':{de:'Puerto Rico',en:'Puerto Rico'},
|
|
||||||
'PS':{de:'Palästinensische Autonomiegebiete',en:'Palestinian Territory, Occupied'},
|
|
||||||
'PT':{de:'Portugal',en:'Portugal'},
|
|
||||||
'PW':{de:'Palau',en:'Palau'},
|
|
||||||
'PY':{de:'Paraguay',en:'Paraguay'},
|
|
||||||
'QA':{de:'Katar',en:'Qatar'},
|
|
||||||
'RE':{de:'Réunion',en:'Réunion'},
|
|
||||||
'RO':{de:'Rumänien',en:'Romania'},
|
|
||||||
'RS':{de:'Serbien',en:'Serbia'},
|
|
||||||
'RU':{de:'Russische Föderation',en:'Russian Federation'},
|
|
||||||
'RW':{de:'Ruanda',en:'Rwanda'},
|
|
||||||
'SA':{de:'Saudi-Arabien',en:'Saudi Arabia'},
|
|
||||||
'SB':{de:'Salomonen',en:'Solomon Islands'},
|
|
||||||
'SC':{de:'Seychellen',en:'Seychelles'},
|
|
||||||
'SD':{de:'Sudan',en:'Sudan'},
|
|
||||||
'SE':{de:'Schweden',en:'Sweden'},
|
|
||||||
'SG':{de:'Singapur',en:'Singapore'},
|
|
||||||
'SH':{de:'St. Helena',en:'Saint Helena, Ascension and Tristan da Cunha'},
|
|
||||||
'SI':{de:'Slowenien',en:'Slovenia'},
|
|
||||||
'SJ':{de:'Svalbard und Jan Mayen',en:'Svalbard and Jan Mayen'},
|
|
||||||
'SK':{de:'Slowakei',en:'Slovakia'},
|
|
||||||
'SL':{de:'Sierra Leone',en:'Sierra Leone'},
|
|
||||||
'SM':{de:'San Marino',en:'San Marino'},
|
|
||||||
'SN':{de:'Senegal',en:'Senegal'},
|
|
||||||
'SO':{de:'Somalia',en:'Somalia'},
|
|
||||||
'SR':{de:'Suriname',en:'Suriname'},
|
|
||||||
'SS':{de:'Südsudan',en:'South Sudan'},
|
|
||||||
'ST':{de:'São Tomé und Príncipe',en:'Sao Tome and Principe'},
|
|
||||||
'SV':{de:'El Salvador',en:'El Salvador'},
|
|
||||||
'SX':{de:'Sint Maarten (niederl. Teil)',en:'Sint Maarten (Dutch part)'},
|
|
||||||
'SY':{de:'Syrien, Arabische Republik',en:'Syrian Arab Republic'},
|
|
||||||
'SZ':{de:'Swasiland',en:'Swaziland'},
|
|
||||||
'TC':{de:'Turks- und Caicosinseln',en:'Turks and Caicos Islands'},
|
|
||||||
'TD':{de:'Tschad',en:'Chad'},
|
|
||||||
'TF':{de:'Französische Süd- und Antarktisgebiete',en:'French Southern Territories'},
|
|
||||||
'TG':{de:'Togo',en:'Togo'},
|
|
||||||
'TH':{de:'Thailand',en:'Thailand'},
|
|
||||||
'TJ':{de:'Tadschikistan',en:'Tajikistan'},
|
|
||||||
'TK':{de:'Tokelau',en:'Tokelau'},
|
|
||||||
'TL':{de:'Osttimor (Timor-Leste)',en:'Timor-Leste'},
|
|
||||||
'TM':{de:'Turkmenistan',en:'Turkmenistan'},
|
|
||||||
'TN':{de:'Tunesien',en:'Tunisia'},
|
|
||||||
'TO':{de:'Tonga',en:'Tonga'},
|
|
||||||
'TR':{de:'Türkei',en:'Turkey'},
|
|
||||||
'TT':{de:'Trinidad und Tobago',en:'Trinidad and Tobago'},
|
|
||||||
'TV':{de:'Tuvalu',en:'Tuvalu'},
|
|
||||||
'TW':{de:'Republik China (Taiwan)',en:'Taiwan, Province of China'},
|
|
||||||
'TZ':{de:'Tansania, Vereinigte Republik',en:'Tanzania, United Republic of'},
|
|
||||||
'UA':{de:'Ukraine',en:'Ukraine'},
|
|
||||||
'UG':{de:'Uganda',en:'Uganda'},
|
|
||||||
'UM':{de:'United States Minor Outlying Islands',en:'United States Minor Outlying Islands'},
|
|
||||||
'US':{de:'Vereinigte Staaten von Amerika',en:'United States'},
|
|
||||||
'UY':{de:'Uruguay',en:'Uruguay'},
|
|
||||||
'UZ':{de:'Usbekistan',en:'Uzbekistan'},
|
|
||||||
'VA':{de:'Vatikanstadt',en:'Holy See (Vatican City State)'},
|
|
||||||
'VC':{de:'St. Vincent und die Grenadinen',en:'Saint Vincent and the Grenadines'},
|
|
||||||
'VE':{de:'Venezuela',en:'Venezuela, Bolivarian Republic of'},
|
|
||||||
'VG':{de:'Britische Jungferninseln',en:'Virgin Islands, British'},
|
|
||||||
'VI':{de:'Amerikanische Jungferninseln',en:'Virgin Islands, U.S.'},
|
|
||||||
'VN':{de:'Vietnam',en:'Viet Nam'},
|
|
||||||
'VU':{de:'Vanuatu',en:'Vanuatu'},
|
|
||||||
'WF':{de:'Wallis und Futuna',en:'Wallis and Futuna'},
|
|
||||||
'WS':{de:'Samoa',en:'Samoa'},
|
|
||||||
'YE':{de:'Jemen',en:'Yemen'},
|
|
||||||
'YT':{de:'Mayotte',en:'Mayotte'},
|
|
||||||
'ZA':{de:'Südafrika',en:'South Africa'},
|
|
||||||
'ZM':{de:'Sambia',en:'Zambia'},
|
|
||||||
'ZW':{de:'Simbabwe',en:'Zimbabwe'},
|
|
||||||
};
|
|
||||||
|
|
||||||
var canvas;
|
|
||||||
var sizeMode;
|
|
||||||
var thumbWidth, thumbHeight, columns, rows, imageUrl;
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
var entry = data[i];
|
|
||||||
|
|
||||||
entry.publishedTS = (new Date(entry.published)).getTime();
|
|
||||||
entry.updatedTS = (new Date(entry.updated )).getTime();
|
|
||||||
|
|
||||||
entry.restrictionCountries = {};
|
|
||||||
for (var j = 0; j < entry.restrictionsAll.length; j++) {
|
|
||||||
entry.restrictionCountries[entry.restrictionsAll[j]] = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var width = $(window).width();
|
|
||||||
|
|
||||||
if (width < 520) sizeMode = 1;
|
|
||||||
else if (width < 640) sizeMode = 0;
|
|
||||||
else if (width < 860) sizeMode = 1;
|
|
||||||
else sizeMode = 2;
|
|
||||||
|
|
||||||
switch (sizeMode) {
|
|
||||||
case 0: thumbWidth = 11; thumbHeight = 9; columns = 25; rows = 40; imageUrl = 'assets/img/grid_520.jpg'; break;
|
|
||||||
case 1: thumbWidth = 16; thumbHeight = 12; columns = 25; rows = 40; imageUrl = 'assets/img/grid_640.jpg'; break;
|
|
||||||
case 2: thumbWidth = 20; thumbHeight = 15; columns = 25; rows = 40; imageUrl = 'assets/img/grid_860.jpg'; break;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#gridImage').attr('src', imageUrl);
|
|
||||||
$('#gridImage, #gridCanvas, #gridCanvasOverlay').attr({width: thumbWidth*columns, height: thumbHeight*rows});
|
|
||||||
|
|
||||||
canvas = new Canvas({
|
|
||||||
imageNode: $('#gridImage'),
|
|
||||||
node: $('#gridCanvas'),
|
|
||||||
nodeOverlay: $('#gridCanvasOverlay'),
|
|
||||||
thumbWidth: thumbWidth,
|
|
||||||
thumbHeight: thumbHeight,
|
|
||||||
columns: columns,
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#gridFlag button').click(function (e) {
|
|
||||||
updateCanvas({ flagType:$(e.target).attr('value') });
|
|
||||||
})
|
|
||||||
|
|
||||||
$('#gridSort button').click(function (e) {
|
|
||||||
updateCanvas({ sortType:$(e.target).attr('value') });
|
|
||||||
})
|
|
||||||
|
|
||||||
updateCanvas({initialize:true});
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateCanvas(options) {
|
|
||||||
options = options || {};
|
|
||||||
var flagType = options.flagType || $('#gridFlag .active').attr('value');
|
|
||||||
var sortType = options.sortType || $('#gridSort .active').attr('value');
|
|
||||||
|
|
||||||
var flag;
|
|
||||||
var sort = function (entry) { return -entry.restrictedInDE };
|
|
||||||
var hint;
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
hint = function (entry) { return (entry.restrictedInDE > 1) ? 'Reason:<br><i>'+entry.reasonEN+'</i>' : '' };
|
|
||||||
} else {
|
|
||||||
hint = function (entry) { return (entry.restrictedInDE > 1) ? 'Begründung:<br><i>'+entry.reasonDE+'</i>' : '' };
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (flagType.split('-')[0]) {
|
|
||||||
case 'germany':
|
|
||||||
flag = function (entry) { return [0,0,1.0,1.0,1.0][entry.restrictedInDE] };
|
|
||||||
hint
|
|
||||||
break;
|
|
||||||
case 'gema':
|
|
||||||
flag = function (entry) { return [0,0,1.0,0.2,0.2][entry.restrictedInDE] };
|
|
||||||
break;
|
|
||||||
case 'other':
|
|
||||||
flag = function (entry) { return [0,0,0.2,1.0,1.0][entry.restrictedInDE] };
|
|
||||||
break;
|
|
||||||
case 'foreign':
|
|
||||||
flag = function (entry) { return (entry.restrictionsAll.length > ((entry.restrictedInDE > 1) ? 1 : 0)) ? 1 : 0 };
|
|
||||||
sort = function (entry) {
|
|
||||||
var inDE = (entry.restrictedInDE > 1) ? 1 : 0;
|
|
||||||
var onlyForeign = entry.restrictionsAll.length - inDE;
|
|
||||||
return -onlyForeign;
|
|
||||||
};
|
|
||||||
hint = function (entry) {
|
|
||||||
if (entry.restrictedInDE > 1) {
|
|
||||||
if (entry.restrictionsAll.length > 1) {
|
|
||||||
if (entry.restrictionsAll.length > 2) {
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
return 'blocked in '+(entry.restrictionsAll.length-1)+' countries<br>and in Germany';
|
|
||||||
} else {
|
|
||||||
return 'gesperrt in '+(entry.restrictionsAll.length-1)+' Ländern,<br>zusätzlich auch in Deutschland';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var id = (entry.restrictionsAll[0] == 'DE') ? 1 : 0;
|
|
||||||
var code = countryCodes[entry.restrictionsAll[id]];
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
return 'blocked in one country ('+code.en+')<br>and in Germany';
|
|
||||||
} else {
|
|
||||||
return 'gesperrt in einem Land ('+code.de+'),<br>zusätzlich auch in Deutschland';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
return 'blocked only in Germany';
|
|
||||||
} else {
|
|
||||||
return 'gesperrt nur in Deutschland';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (entry.restrictionsAll.length > 1) {
|
|
||||||
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
return 'blocked in '+entry.restrictionsAll.length+' countries,<br>but not in Germany';
|
|
||||||
} else {
|
|
||||||
return 'gesperrt in '+entry.restrictionsAll.length+' Ländern,<br>aber nicht in Deutschland';
|
|
||||||
}
|
|
||||||
} else if (entry.restrictionsAll.length > 0) {
|
|
||||||
var code = countryCodes[entry.restrictionsAll[0]];
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
return 'blocked only in '+code.en;
|
|
||||||
} else {
|
|
||||||
return 'gesperrt nur in '+code.de;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (inEnglishPlease) {
|
|
||||||
return 'nowhere blocked';
|
|
||||||
} else {
|
|
||||||
return 'nirgends gesperrt';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'country':
|
|
||||||
var country = flagType.split('-')[1];
|
|
||||||
var code = countryCodes[country];
|
|
||||||
flag = function (entry) { return (entry.restrictionCountries[country] === true) ? 1 : 0 };
|
|
||||||
sort = function (entry) { return -((entry.restrictionCountries[country] === true) ? 1000 : 0); };
|
|
||||||
hint = function (entry) {
|
|
||||||
if (entry.restrictionCountries[country] === true) {
|
|
||||||
return inEnglishPlease ? 'blocked in '+code.en : 'gesperrt in „'+code.de+'”';
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (sortType) {
|
|
||||||
case 'rank':
|
|
||||||
sort = function (entry) { return entry.rank };
|
|
||||||
break;
|
|
||||||
case 'rating':
|
|
||||||
sort = function (entry) { return -entry.rating };
|
|
||||||
break;
|
|
||||||
case 'category':
|
|
||||||
sort = function (entry) { return entry.category.toLowerCase() };
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas.sort({
|
|
||||||
callback: sort,
|
|
||||||
hint: hint
|
|
||||||
});
|
|
||||||
|
|
||||||
var value = canvas.flag({
|
|
||||||
callback: flag
|
|
||||||
});
|
|
||||||
|
|
||||||
setCounter(value);
|
|
||||||
|
|
||||||
if (options.initialize) {
|
|
||||||
canvas.makeItFast();
|
|
||||||
} else {
|
|
||||||
canvas.makeItSo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var oldValue, newValue, counterInterval;
|
|
||||||
function setCounter(value) {
|
|
||||||
function setValue(value) {
|
|
||||||
value = (value/10).toFixed(1).replace(/\./, ',')+'%';
|
|
||||||
if (value.length < 5) value = ' '+value;
|
|
||||||
$('#display-number-content').html(value);
|
|
||||||
}
|
|
||||||
if (oldValue === undefined) {
|
|
||||||
setValue(value);
|
|
||||||
oldValue = value;
|
|
||||||
} else {
|
|
||||||
clearInterval(counterInterval);
|
|
||||||
(function () {
|
|
||||||
var frame = 1;
|
|
||||||
var frameNumber = 20;
|
|
||||||
counterInterval = setInterval(
|
|
||||||
function () {
|
|
||||||
if (frame >= frameNumber) {
|
|
||||||
setValue(value);
|
|
||||||
oldValue = value;
|
|
||||||
clearInterval(counterInterval);
|
|
||||||
} else {
|
|
||||||
var a = frame/frameNumber;
|
|
||||||
a = (1-Math.cos(a*Math.PI))/2;
|
|
||||||
var v = (1-a)*oldValue + a*value;
|
|
||||||
setValue(v);
|
|
||||||
frame++
|
|
||||||
}
|
|
||||||
}, 30
|
|
||||||
);
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatRating(value) {
|
|
||||||
return value.toFixed(2).replace(/\./, ',');
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatInteger(value) {
|
|
||||||
var t = value.toFixed(0);
|
|
||||||
for (var i = t.length-3; i > 0; i -= 3) {
|
|
||||||
t = t.substr(0, i) + '.' + t.substr(i);
|
|
||||||
}
|
|
||||||
return t;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(value) {
|
|
||||||
value = new Date(value);
|
|
||||||
var day = value.getDate();
|
|
||||||
var month = value.getMonth() + 1;
|
|
||||||
var year = value.getFullYear();
|
|
||||||
return day + '.' + month + '.' + year;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<title>GEMA versus YouTubes Top 1000</title>
|
<title>re:log - Besucherstromanalyse per re:publica W-LAN</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<base href="http://apps.opendatacity.de/gema-vs-youtube/" target="_parent">
|
<base href="http://apps.opendatacity.de/relog/" target="_parent">
|
||||||
|
|
||||||
<meta property="og:title" content="GEMA versus YouTubes Top 1000" />
|
<meta property="og:title" content="re:log - Besucherstromanalyse per re:publica W-LAN" />
|
||||||
<meta property="og:type" content="article" />
|
<meta property="og:type" content="article" />
|
||||||
<meta property="og:url" content="http://apps.opendatacity.de/gema-vs-youtube/" />
|
<meta property="og:url" content="http://apps.opendatacity.de/relog/" />
|
||||||
<meta property="og:image" content="http://datenjournalist.de/wp-content/uploads/2013/01/grid_by_reason-853x1024.jpg" />
|
<meta property="og:image" content="http://apps.opendatacity.de/relog/screenshot.png" />
|
||||||
|
|
||||||
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||||
<link href="assets/css/index.css" rel="stylesheet" type="text/css">
|
<link href="assets/css/index.css" rel="stylesheet" type="text/css">
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
|
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
|
||||||
<script src="assets/js/helper.js" type="text/javascript"></script>
|
<script src="assets/js/helper.js" type="text/javascript"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var $embed_overlay = '<div id="embed-overlay"><div id="embed-content"><h1>Weitergeben</h1><form name="embed-form" id="embed-form" action="javascript:;" method="post"><fieldset id="embed-size" class="form-inline"><legend>Größe</legend><label class="radio"><input type="radio" name="size" value="large" checked="checked"> Groß (860×610)</label><label class="radio"><input type="radio" name="size" value="medium"> Mittel (640×490)</label><label class="radio"><input type="radio" name="size" value="small"> Klein (520×370)</label><label class="radio"><input type="radio" name="size" value="verysmall"> Sehr klein, aber hoch (420×740)</label></fieldset><fieldset class="form-inline"><legend>Sprache</legend><label class="radio"><input type="radio" name="lang" value="de" checked="checked"> Deutsch</label><label class="radio"><input type="radio" name="lang" value="en"> Englisch</label></fieldset><h2>Code</h2><p>Kopiere diesen Code in Deine Webseite:</p><code id="embed-code"></code></form><p><a href="javascript:;" class="btn btn-medium btn-primary">Schließen</a></p></div></div>';
|
var $embed_overlay = '<div id="embed-overlay"><div id="embed-content"><h1>Weitergeben</h1><form name="embed-form" id="embed-form" action="javascript:;" method="post"><h2>Code</h2><p>Kopiere diesen Code in Deine Webseite:</p><code id="embed-code"></code></form><p><a href="javascript:;" class="btn btn-medium btn-primary">Schließen</a></p></div></div>';
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -31,20 +31,16 @@
|
||||||
fjs.parentNode.insertBefore(js, fjs);
|
fjs.parentNode.insertBefore(js, fjs);
|
||||||
}(document, 'script', 'facebook-jssdk'));</script>
|
}(document, 'script', 'facebook-jssdk'));</script>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<h1>GEMA versus YouTubes Top 1000</h1>
|
<h1 style="font-size:36px">re:log - Besucherstromanalyse per re:publica-W-LAN</h1>
|
||||||
<div style="position:relative;">
|
<div style="position:relative;margin-top:40px">
|
||||||
<p class="lead" style="width:600px;">
|
<p class="lead" style="width:600px;">
|
||||||
Ein großer Teil der YouTube-Videos ist nicht überall zu sehen.<br />
|
Eine interaktive Karte zeigt, wie sich die Besucherströme der re:publica von einem Vortrag zum nächsten bewegen.<br>
|
||||||
Fast 19% der weltweiten Top 1000-Videos sind in einem oder mehreren Ländern außerhalb Deutschlands gesperrt.<br />
|
Die Karte basiert auf den Messungen des re:publica-WLANs, in das sich etwa 6700 Geräte eingewählt haben.
|
||||||
In Deutschland jedoch sind über <strong>60%</strong> der 1000 beliebtesten Videos nicht verfügbar, weil YouTube davon ausgeht, dass die Musikrechte <strong>„möglicherweise“</strong> bei der Musikverwertungsgesellschaft GEMA liegen.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div id="social" style="position:absolute; bottom:10px; right:0; width:180px">
|
<div id="social" style="position:absolute; bottom:-20px; right:0; width:180px">
|
||||||
<div class="social">
|
|
||||||
<small><b>deutsch</b> | <a href="http://apps.opendatacity.de/gema-vs-youtube/en/">english</a></small>
|
|
||||||
</div>
|
|
||||||
<div id="social-twitter" class="social">
|
<div id="social-twitter" class="social">
|
||||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://apps.opendatacity.de/gema-vs-youtube/" data-text="GEMA versus YouTube" data-via="opendatacity" data-lang="de">Twittern</a>
|
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://apps.opendatacity.de/relog/" data-text="re:log - Besucherstromanalyse per re:publica W-LAN" data-via="opendatacity" data-lang="de">Twittern</a>
|
||||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||||||
</div>
|
</div>
|
||||||
<div id="social-google" class="social">
|
<div id="social-google" class="social">
|
||||||
|
|
@ -60,53 +56,49 @@
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
<div id="social-facebook" class="social">
|
<div id="social-facebook" class="social">
|
||||||
<div class="fb-like" data-href="http://apps.opendatacity.de/gema-vs-youtube/" data-send="false" data-layout="button_count" data-width="180" data-show-faces="true"></div>
|
<div class="fb-like" data-href="http://apps.opendatacity.de/relog/" data-send="false" data-layout="button_count" data-width="180" data-show-faces="true"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="social"><a href="javascript:;" class="btn btn-primary embed-button">Einbetten</a></div>
|
<div class="social"><a href="javascript:;" class="btn btn-primary embed-button">Einbetten</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<iframe src="frame.de.html" width="860" height="610" scrolling="no" frameborder="0"><a href="">Die geblockten Top-1000-YouTube-Videos</a></iframe><p>Unterstützt durch <a href="http://www.myvideo.de" rel="follow">MyVideo</a>. Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.</p>
|
<iframe src="frame.html" width="950" height="580" scrolling="no" frameborder="0"><a href="">re:log - Besucherstromanalyse der re:publica</a></iframe><p>Realisiert von <a href="http://www.opendatacity.de/">OpenDataCity</a>. Unterstützt durch <a href="http://www.picocell.de">picocell</a> und <a href="http://newthinking.de">newthinking</a>. Anwendung steht unter <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">CC-BY 3.0</a>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="row-fluid" style="margin-top:50px">
|
<div class="row-fluid" style="margin-top:50px">
|
||||||
|
|
||||||
<div class="span6">
|
<div class="span6">
|
||||||
<h3>Weitere Informationen</h3>
|
|
||||||
<p>
|
<p>
|
||||||
Eine genauere Analyse der Daten so wie ein Making-of befindet sich auf <a href="http://datenjournalist.de/ueber-unsere-app-gema-vs-youtube">datenjournalist.de</a>. Außerdem bieten wir die gesammelten Daten zum Download an:
|
Die interaktive Karte zeigt, wo sich die Besucher/innen auf dem Gelände der re:publica aufgehalten haben. Nicht alle, sondern nur diejenigen, die über die rund 100 Access Points mit ihrem Gerät per W-LAN mit dem Internet verbunden haben.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<a href="data/top1000.tsv" class="btn btn-inverse">Download Data</a>
|
Tip: Mit gedrückter Maustaste bzw. per Fingerdruck lässt sich ein Rechteck aufziehen und eine Gruppe von Punkten markieren. Deren Weg über die re:publica lässt sich dann verfolgen. Per einfachen Klick auf die Karte, wird die Auswahl wieder aufgehoben. Die Zeitleiste unten ist scrollbar.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="span6">
|
<div class="span6">
|
||||||
<h3>Weiterverwendung</h3>
|
|
||||||
<p>
|
<p>
|
||||||
Die Applikation kann kann frei verwendet werden. Der HTML-Code, um die Applikation in die eigene Webseite oder den eigenen Blog einzubetten, kann hier generiert werden:
|
Das re:publica Team stellt die Daten anonymisiert zum <a href="data.csv.zip">Download</a> zur Verfügung - theoretisch wäre aber die Speicherung der eindeutigen MAC-Adresse jedes Geräts - ob Smartphone, Tablet und Laptop - denkbar gewesen. MAC-Adressen lassen sich allerdings ändern. So erklärt sich vielleicht auch die Zahl von über 6700 registrierter Geräte über den Lauf der drei Tage - mehr als Besucher, Speaker, Journalisten, Team und Helfer zusammen.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<a href="javascript:;" class="btn btn-primary embed-button">Code zum Einbetten</a>
|
Hintergrundinfos zur App finden sich hier bei <a href="http://datenjournalist.de/relog">datenjournalist.de</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr style="margin-top:70px; border-color:#EEE">
|
<hr style="margin-top:70px; border-color:#EEE">
|
||||||
|
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span4">
|
|
||||||
Unterstützt durch <br><a href="http://www.myvideo.de/" rel="follow" id="mvlogo">MyVideo</a>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
Realisiert von <br><a href="http://www.opendatacity.de/" id="odclogo">OpenDataCity</a>
|
Realisiert von <br><a href="http://www.opendatacity.de/" id="odclogo">OpenDataCity</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="span4" id="license">
|
<div class="span4">
|
||||||
Diese App steht unter einer <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/">Creative Commons Namensnennung 3.0 Lizenz</a>.
|
Unterstützt durch <br><a href="http://www.picocell.de/" id="pclogo">picocell</a>
|
||||||
|
</div>
|
||||||
|
<div class="span4">
|
||||||
|
und durch <br><a href="http://newthinking.de/" id="ntlogo">newthinking</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p style="text-align: right; margin-top: 10px">Diese Seite wird mit Google Analytics ausgewertet. <a href="http://www.opendatacity.de/kontakt/">Impressum</a></p>
|
<p style="text-align: right; margin-top: 100px">Diese Seite wird mit Google Analytics ausgewertet. <a href="http://www.opendatacity.de/kontakt/">Impressum</a></p>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _gaq = _gaq || [];
|
var _gaq = _gaq || [];
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Loading…
Reference in New Issue