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