Context-Additive Interface

context.js

var express = require('express');
var app = express();

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

var multer = require('multer');
var upload = multer();

var viewedData = [{
    title: "Memex",
    contextid: "memex",
    content: "<p>The memex (originally coined 'at random', though sometimes said to be a portmanteau of 'memory' and 'index') is the name of the hypothetical <a href=\"/addContext?contextid=hypertext\">proto-hypertext</a> system that <a href=\"/addContext?contextid=vannevar\">Vannevar Bush</a> described in his 1945 The Atlantic Monthly article 'As We May Think'. Bush envisioned the memex as a device in which individuals would compress and store all of their books, records, and communications, 'mechanized so that it may be consulted with exceeding speed and flexibility.' The memex would provide an 'enlarged intimate supplement to one's memory'. The concept of the memex influenced the development of early <a href=\"/addContext?contextid=hypertext\">hypertext</a> systems (eventually leading to the creation of the World Wide Web) and personal knowledge base software. The hypothetical implementation depicted by Bush for the purpose of concrete illustration was based upon a document bookmark list of static <a href=\"/addContext?contextid=microform\">microfilm</a> pages, and lacked a true <a href=\"/addContext?contextid=hypertext\">hypertext</a> system where parts of pages would have internal structure beyond the common textual format. Early electronic hypertext systems were thus inspired by memex rather than modeled directly upon it.</p>"
}];


var contextData = [{
    title: "History of Hypertext",
    contextid: 'hypertext',
    content: "<p>Hypertext is text displayed on a <a href=\"/addContext?contextid=computer\">computer</a> or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence.</p>"
}, {
    title: "Microform",
    contextid: "microform",
    content: "<p>Microforms are any forms, either <a href=\"/addContext?contextid=films\">films</a> or paper, containing microreproductions of documents for transmission, storage, reading, and printing. Microform images are commonly reduced to about one twenty-fifth of the original document size. For special purposes, greater optical reductions may be used.</p><p>All microform images may be provided as positives or negatives, more often the latter.</p><p>Three formats are common: microfilm (reels), aperture cards and microfiche (flat sheets). Microcards, a format no longer produced, were similar to microfiche, but printed on cardboard rather than photographic film.<p>"
}, {
    title: "Photographic Film",
    contextid: "films",
    content: "<p>Photographic film is a strip or sheet of transparent plastic film base coated on one side with a gelatin emulsion containing microscopically small light-sensitive silver halide crystals. The sizes and other characteristics of the crystals determine the sensitivity, contrast and resolution of the film.</p>"
}, {
    title: "Vannevar Bush",
    contextid: "vannevar",
    content: "<p>Vannevar Bush (/væˈniːvɑːr/ van-nee-var; March 11, 1890 – June 28, 1974) was an American engineer, inventor and science administrator, who during World War II headed the <a href=\"/addContext?contextid=osrd\">U.S. Office of Scientific Research and Development (OSRD)</a>, through which almost all wartime military R&D was carried out, including initiation and early administration of the Manhattan Project. He is also known in engineering for his work on analog computers, for founding Raytheon, and for the memex, a hypothetical adjustable microfilm viewer with a structure analogous to that of hypertext. In 1945, Bush published the essay \"As We May Think\" in which he predicted that \"wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified\". The memex influenced generations of computer scientists, who drew inspiration from its vision of the future. He was chiefly responsible for the movement that led to the creation of the National Science Foundation.</p>"
}, {
    title: "Office of Scientific Research and Development",
    contextid: "osrd",
    content: "<p>The Office of Scientific Research and Development (OSRD) was an agency of the United States federal government created to coordinate scientific research for military purposes during World War II. Arrangements were made for its creation during May 1941, and it was created formally by Executive Order 8807 on June 28, 1941. It superseded the work of the National Defense Research Committee (NDRC), was given almost unlimited access to funding and resources, and was directed by Vannevar Bush, who reported only to President Franklin Delano Roosevelt.</p><p>The research was widely varied, and included projects devoted to new and more accurate bombs, reliable detonators, work on the proximity fuze, guided missiles, radar and early-warning systems, lighter and more accurate hand weapons, more effective medical treatments, more versatile vehicles, and, most secret of all, the S-1 Section, which later became the Manhattan Project and developed the first atomic weapons.</p>"
}, {
    title: "Computer",
    contextid: "computer",
    content: "<p>A computer is a device that can be instructed to carry out an arbitrary set of arithmetic or logical operations automatically. The ability of computers to follow a sequence of operations, called a <a href=\"/addContext?contextid=program\">program</a>, make computers very applicable to a wide range of tasks. Such computers are used as control systems for a very wide variety of industrial and consumer devices. This includes simple special purpose devices like microwave ovens and remote controls, factory devices such as industrial robots and computer assisted design, but also in general purpose devices like personal computers and mobile devices such as smartphones. The Internet is run on computers and it connects millions of other computers.</p><p>Since ancient times, simple manual devices like the abacus aided people in doing calculations. Early in the Industrial Revolution, some mechanical devices were built to automate long tedious tasks, such as guiding patterns for looms. More sophisticated electrical machines did specialized analog calculations in the early 20th century. The first digital electronic calculating machines were developed during World War II. The speed, power, and versatility of computers has increased continuously and dramatically since then.</p><p>Conventionally, a modern computer consists of at least one processing element, typically a central processing unit (CPU), and some form of memory. The processing element carries out arithmetic and logical operations, and a sequencing and control unit can change the order of operations in response to stored information. Peripheral devices include input devices (keyboards, mice, joystick, etc.), output devices (monitor screens, printers, etc.), and input/output devices that perform both functions (e.g., the 2000s-era touchscreen). Peripheral devices allow information to be retrieved from an external source and they enable the result of operations to be saved and retrieved.</p>"
}, {
    title: "Computer Program",
    contextid: "program",
    content: "<p>A computer program is a collection of instructions that performs a specific task when executed by a computer. A computer requires programs to function, and typically executes the program's instructions in a central processing unit.</p><p>A computer program is usually written by a computer programmer in a programming language. From the program in its human-readable form of source code, a compiler can derive machine code—a form consisting of instructions that the computer can directly execute. Alternatively, a computer program may be executed with the aid of an interpreter.</p><p>A part of a computer program that performs a well-defined task is known as an algorithm. A collection of computer programs, libraries and related data are referred to as software. Computer programs may be categorized along functional lines, such as application software or system software.</p>"
}];

// 3000 = port Number
// callback function to run after app is running
// anonymous inline function
app.listen(3004, function() {
    console.log('Server listening on port 3004!')
});



// these are routes based on what the user requests

// inital index page
app.get('/', function(req, res) {

    var widthDiv = 100 / viewedData.length;

    var textContent = "<html><head><link href=\"https://fonts.googleapis.com/css?family=Roboto:300,700,700i\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"><style>.content-block {float: left; width:" + widthDiv + "%;}</style></script></head><body><div id='content'>";

    for (var i = 0; i < viewedData.length; i++) {

        if (viewedData.length > 1) {
            var minColor = 50;
            var weight = 255 / viewedData.length;

            var color = Math.round((i) * weight + minColor);
            color = 255 - color;
        } else {
            color = 0;
        }



        textContent += "<div class='content-block' style='color:rgb(" + color + "," + color + "," + color + ");'><h1>" + viewedData[i].title + "</h1>" + viewedData[i].content + "</div>";
    }

    textContent += "</body></html>";



    res.send(textContent);
});


app.get('/addContext', function(req, res) {
    var reqPostId = req.query.contextid;

    for (i = 0; i < contextData.length; i++) {
        if (contextData[i].contextid == reqPostId) {

            viewedData.push(contextData[i]);

            if (viewedData.length > 4) {
                // remove first item in array
                viewedData.splice(0, 1);
            }
        }
    }

    res.redirect("/");
});




// server static files as well as routes
app.use(express.static('public'));

console.log("An attempt at showing the references within a wikipedia article");