Upload files to '08/ArtemisGryllaki'
parent
56c22da0f6
commit
ba10e131b2
@ -0,0 +1,159 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Social Networks</title>
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: bree-serif;
|
||||||
|
src: url("bree-serif/BreeSerif-Regular.otf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: georgia;
|
||||||
|
src: url("georgiai.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
font-family: bree-serif;
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 57px;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1.3em;
|
||||||
|
font-family: bree-serif;
|
||||||
|
margin-right: 50px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1.3em;
|
||||||
|
font-family: georgia;
|
||||||
|
margin-right: 50px;
|
||||||
|
margin-left: 75%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.underline {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: #df5b57;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #df5b57;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Questions on</br> <span class="underline">Social Networks</span></h1>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function shuffle(a) {
|
||||||
|
for(let i = a.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[a[i], a[j]] = [a[j], a[i]];
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages = shuffle([
|
||||||
|
"Can decentralised web have an impact beyond geeks & social web enthusiasts?",
|
||||||
|
"Why do we need decentralised networks?",
|
||||||
|
"How do we perceive federated publishing?",
|
||||||
|
"Collectivity vs individuality: does decentralisation helps?",
|
||||||
|
"Who moves to a decentralised network and why?",
|
||||||
|
"What content does a federated network host?",
|
||||||
|
"Is the medium the message?",
|
||||||
|
"Does the medium transform the message?",
|
||||||
|
"Does the same story have a different value, according to where is heard?",
|
||||||
|
"How important is to choose, or create our media of communication?",
|
||||||
|
"Is decentralisation a panacea, or a pharmakon?",
|
||||||
|
"Is decentralisation enough?",
|
||||||
|
"What are the dangers of centralised networks?",
|
||||||
|
"Whose voice is amplified or curbed in a centralised network?",
|
||||||
|
"Do we need digital social networking platforms?",
|
||||||
|
"Do we need virtual public spheres that are difficult to shut down?",
|
||||||
|
"Is a federated network oriented towards answering a common goal?",
|
||||||
|
"How is the common goal of the network shaped?",
|
||||||
|
"Is being part of the network as important as being a custodian of it?",
|
||||||
|
"Who maintains a federated network?",
|
||||||
|
"What is the lifespan of a federated network?",
|
||||||
|
"How can a federated network be sustained with economic means?"
|
||||||
|
]);
|
||||||
|
|
||||||
|
function getRandomArbitrary(min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min) + min);
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = document.getElementById('container');
|
||||||
|
const containerWidth = parseInt(getComputedStyle(container).width) - 40;
|
||||||
|
|
||||||
|
messages.forEach(message => {
|
||||||
|
const row = document.createElement('div');
|
||||||
|
row.classList.add('row');
|
||||||
|
row.style.marginBottom = getRandomArbitrary(10,10) + 'px';
|
||||||
|
|
||||||
|
const circle = document.createElement('div');
|
||||||
|
circle.classList.add('circle');
|
||||||
|
|
||||||
|
const text = document.createElement('div');
|
||||||
|
text.classList.add('text');
|
||||||
|
text.textContent = message;
|
||||||
|
|
||||||
|
row.appendChild(circle);
|
||||||
|
row.appendChild(text);
|
||||||
|
container.appendChild(row);
|
||||||
|
|
||||||
|
const circleWidth = parseInt(getComputedStyle(circle).width);
|
||||||
|
const textWidth = parseInt(getComputedStyle(text).width);
|
||||||
|
|
||||||
|
const dw = containerWidth - circleWidth - textWidth;
|
||||||
|
row.style.marginLeft = getRandomArbitrary(0,dw) + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
<html>
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
|
||||||
|
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
|
||||||
|
var svg = document.getElementById('canvas');
|
||||||
|
var padding = 8;
|
||||||
|
var circleRadius = 8;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a random number between min (inclusive) and max (exclusive)
|
||||||
|
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
|
||||||
|
*/
|
||||||
|
function getRandomArbitrary(min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min) + min);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns randomly either "true" or "false" with 50% chance for each one.
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
function getRandomBoolean() {
|
||||||
|
return getRandomArbitrary(0, 2) === 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//when we execute sleep (...ms), program waits for (...ms)
|
||||||
|
function sleep(time) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve();
|
||||||
|
}, time);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
|
||||||
|
function pickARandomCirclePosition() {
|
||||||
|
var w = parseInt(window.getComputedStyle(svg).width);
|
||||||
|
var h = parseInt(window.getComputedStyle(svg).height);
|
||||||
|
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
|
||||||
|
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
|
||||||
|
//return an object which has 2 properties, named x,y and value the value of var x,y
|
||||||
|
return { x: x, y: y };
|
||||||
|
}
|
||||||
|
|
||||||
|
//======================================================================//
|
||||||
|
// new code 2019.03.02:
|
||||||
|
|
||||||
|
const messages = [
|
||||||
|
"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS AND SOCIAL WEB ENTHUSIASTS?",
|
||||||
|
"WHY DO WE NEED A DECENTRALIZED NETWORK?",
|
||||||
|
"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
|
||||||
|
"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
|
||||||
|
"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
|
||||||
|
"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
|
||||||
|
"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
|
||||||
|
"IS THE MEDIUM THE MESSAGE?",
|
||||||
|
"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
|
||||||
|
"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
|
||||||
|
"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
|
||||||
|
"IS DECENTRALIZATION A PANACEA, OR A PHARMAKON?",
|
||||||
|
"IS DECENTRALIZATION ENOUGH?",
|
||||||
|
"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
|
||||||
|
"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
|
||||||
|
"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
|
||||||
|
"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
|
||||||
|
"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
|
||||||
|
"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
|
||||||
|
"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
|
||||||
|
"WHO MAINTAINS A FEDERATED NETWORK?",
|
||||||
|
"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
|
||||||
|
"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC AND ECOLOGICAL MEANS?",
|
||||||
|
];
|
||||||
|
|
||||||
|
const clickedCircles = [];
|
||||||
|
const links = [];
|
||||||
|
const positions = [];
|
||||||
|
|
||||||
|
const positionsFromJson = JSON.parse('[{"x":420,"y":388},{"x":408,"y":269},{"x":356,"y":673},{"x":246,"y":499},{"x":1009,"y":476},{"x":468,"y":399},{"x":714,"y":189},{"x":1336,"y":427},{"x":1307,"y":595},{"x":1496,"y":95},{"x":876,"y":657},{"x":929,"y":373},{"x":356,"y":599},{"x":1375,"y":726},{"x":1293,"y":465},{"x":1512,"y":325},{"x":972,"y":387},{"x":1115,"y":720},{"x":547,"y":85},{"x":663,"y":431},{"x":1583,"y":272},{"x":1019,"y":416},{"x":1500,"y":592}]');
|
||||||
|
let positionFromJsonIndex = 0;
|
||||||
|
|
||||||
|
class Question {
|
||||||
|
constructor(text) {
|
||||||
|
// Create property "text".
|
||||||
|
this.text = text;
|
||||||
|
|
||||||
|
//const position = pickARandomCirclePosition();
|
||||||
|
const position = positionsFromJson[positionFromJsonIndex++];
|
||||||
|
positions.push(position);
|
||||||
|
|
||||||
|
const htmlCircle = this.createCircle(position);
|
||||||
|
const htmlText = this.createText(position, text);
|
||||||
|
|
||||||
|
htmlCircle.addEventListener('mouseenter', () => {
|
||||||
|
htmlText.style.display = 'block';
|
||||||
|
});
|
||||||
|
htmlCircle.addEventListener('mouseleave', () => {
|
||||||
|
htmlText.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
htmlCircle.addEventListener('mouseenter', () => {
|
||||||
|
htmlCircle.style.fill = 'red';
|
||||||
|
});
|
||||||
|
htmlCircle.addEventListener('mouseleave', () => {
|
||||||
|
htmlCircle.style.fill = 'black';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
htmlCircle.addEventListener('click', () => {
|
||||||
|
//if(!clickedCircles.includes(htmlCircle)) {
|
||||||
|
clickedCircles.push(htmlCircle);
|
||||||
|
//}
|
||||||
|
this.linkClickedWithPreviouslyClicked();
|
||||||
|
//this.linkClickedWithAllPreviouslyClicked();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createCircle(position) {
|
||||||
|
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||||
|
circle.style.fill = 'black';
|
||||||
|
circle.setAttribute('cx', position.x);
|
||||||
|
circle.setAttribute('cy', position.y);
|
||||||
|
circle.setAttribute('r', circleRadius);
|
||||||
|
svg.appendChild(circle);
|
||||||
|
return circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
createText(position, textContent) {
|
||||||
|
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
text.setAttribute('x', position.x + 2*circleRadius);
|
||||||
|
text.setAttribute('y', position.y + circleRadius/2);
|
||||||
|
text.textContent = textContent;
|
||||||
|
text.style.display = 'none';
|
||||||
|
text.style.fontStyle = "italic";
|
||||||
|
text.style.fontStyle = "italic";
|
||||||
|
text.style.fontFamily = "Courier";
|
||||||
|
text.style.fontWeight = "bold";
|
||||||
|
text.style.fontSize = "large";
|
||||||
|
svg.appendChild(text);
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
createLine(position1, position2) {
|
||||||
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||||
|
line.setAttribute('x1', position1.x);
|
||||||
|
line.setAttribute('y1', position1.y);
|
||||||
|
line.setAttribute('x2', position2.x);
|
||||||
|
line.setAttribute('y2', position2.y);
|
||||||
|
line.setAttribute('stroke', 'black');
|
||||||
|
svg.appendChild(line);
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
|
||||||
|
linkClickedWithPreviouslyClicked() {
|
||||||
|
const length = clickedCircles.length;
|
||||||
|
if(length < 2) { return; }
|
||||||
|
|
||||||
|
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
|
||||||
|
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
|
||||||
|
|
||||||
|
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
|
||||||
|
|
||||||
|
const htmlLine = this.createLine(circle1Pos, circle2Pos);
|
||||||
|
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getCircleCenterPosition(htmlCircle) {
|
||||||
|
return {
|
||||||
|
x: htmlCircle.cx.baseVal.value,
|
||||||
|
y: htmlCircle.cy.baseVal.value,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
getLinkAsString(circle1Pos, circle2Pos) {
|
||||||
|
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
|
||||||
|
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
|
||||||
|
|
||||||
|
const linkAsString = pos1AsString + "-" + pos2AsString;
|
||||||
|
|
||||||
|
return linkAsString;
|
||||||
|
}
|
||||||
|
|
||||||
|
linkAlreadyExists(circle1Pos, circle2Pos) {
|
||||||
|
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function network() {
|
||||||
|
for(let i = 0; i < messages.length; i++) {
|
||||||
|
const message = messages[i];
|
||||||
|
new Question(message);
|
||||||
|
|
||||||
|
//"await" works only inside async functions
|
||||||
|
const delayBetweenQuestionCreations = 50;
|
||||||
|
await sleep(delayBetweenQuestionCreations);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(JSON.stringify(positions));
|
||||||
|
}
|
||||||
|
network();
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Question Nodes</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
height: 20%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<svg id="canvas"></svg>
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript" src="nodesscript.js">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Questions on Networks</title>
|
||||||
|
<link rel="stylesheet" href="styleq.css">
|
||||||
|
<script src="questions.js"></script>
|
||||||
|
</head>
|
||||||
|
<header><br>
|
||||||
|
<h1>Questions on Networks</h1>
|
||||||
|
<p><span class="blink">Centralized - Decentralized </br> Federated</blink></a></p>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<br><br><br><br><br><br>
|
||||||
|
<div class="box"><h2 id="oneliner-1">QUESTIONS</h2></div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<!--<p>Contributors: </p>-->
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue