cluster-painter
Advanced tools
A fast library to display image clusters
##Demo##
Here you can see the library in action
npm install cluster-painter
Embed the libary:
var ClusterPainter = require("cluster-painter")
Here is a typical html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ClusterPainter</title>
<link rel="stylesheet" href="node_modules/cluster-painter/css/clusterPainter.css">
</head>
<body>
<div id = "container">
<div id = "1" class = "button">1</div>
<div id = "2" class = "button">2</div>
<div id = "3" class = "button">3</div>
<div id = "4" class = "button">4</div>
<div id = "5" class = "button">5</div>
<select id = "Types" class="select">
<option selected>Select</option>
<option selected>default</option>
<option >foto</option>
<option>film</option>
</select>
</div>
<div id = "scenery"></div>
</body>
</html>
To generate a cluster file, create an image folder with the name images, place all your images therein and then run the following command
node node_modules/cluster-painter/create_cluster.js
In case you want to use another folder name (or another timeframe), you have to modify the create_cluster.js file
var x = new TV({
path: "./images", // here you have to pass the folder
filename: "cluster.json", // **please leave this unchanged!**
callback: null,
timeframe: "day" // valid entries are [minute][hour][day][week][month][year]
});
If you have followed these instructions, you have prepared your image data sufficiently.
The library is optimized for a browserified client side use. So you can use the handy require call instead adding resources to your html file.
The only resource you have to embed manually is a link to the *.css which is necessary for a decent visual result
<link rel="stylesheet" href="node_modules/cluster-painter/css/clusterPainter.css">
The basic idea is that you have a super-simple api (and not have to worry how it works).
However, it's nice if something is working right from the start. To get accomodated to the library I recommend embedding the following snippet to your html code
<div id = "1" class = "button">1</div>
<div id = "2" class = "button">2</div>
<div id = "3" class = "button">3</div>
<div id = "4" class = "button">4</div>
<div id = "5" class = "button">5</div>
<select id = "Types" class="select">
<option selected>Select</option>
<option selected>default</option>
<option >foto</option>
<option>film</option>
</select>
</div>
<div id = "scenery"></div>
In the index.js (or whereever you want to require cluster-painter), you can invoke the clusterPainter object, like this:
var cluster = new ClusterPainter({
source: "cluster.json",
css_class: "standard",
div: "scenery",
type: "default"
});
The full code of the index.js, file could look like this. Here the interaction part is added which fits to the supposed html-code. However, invoking the clusterPainter is easy, you just have to pass a paint command and then the id of the image cluster
/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ /*global define */
var $ = require('jquery');
var ClusterPainter = require('cluster-painter');
$(document).ready(function(){
"use strict";
var cluster = new ClusterPainter({
source: "cluster.json",
css_class: "standard",
div: "scenery",
type: "foto"
});
$(".button").click(function(){
var id = parseInt($(this).attr("id"), 10) -1;
cluster.paint(id);
});
$("#Types").change(function(){
var v = $(this).val();
cluster.set_type(v);
});
});
});
If you want to change the dislay type, you write:
cluster.paint[id]
Include the following lines in your head and you are ready to go:
<script src="lib/jquery2.1.minified.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.1.0/q.js"></script>
<script src="lib/clusterPainter.js"></script>
You find a working index.html in the main directory
Bascally everythings works as mentioned above.
Copyright © 2015. Phalanstere.
FAQs
a fast library to display image clusters
The npm package cluster-painter receives a total of 13 weekly downloads. As such, cluster-painter popularity was classified as not popular.
We found that cluster-painter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.