varia/xppl
14
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

changed scape

Browse Source
This commit is contained in:
Alex 2018-06-13 15:12:32 +02:00
parent 8f05ff95a7
commit 4b5687db7a
10 changed files with 117 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
app/cover/3_The_Moral_Of_The_Xerox_cover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 KiB

BIN
app/cover/3_The_Moral_Of_The_Xeroxcover_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

2
app/models.py
View File

@ -170,6 +170,8 @@ class BookSchema(Schema):
category = fields.Str()
year_published = fields.Str()
stacks = fields.Nested(StackSchema, many=True)
scapeX = fields.Float()
scapeY = fields.Float()
def must_not_be_blank(data):

2
app/static/js/d3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
app/templates/base.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>XPPL</title>
@ -71,7 +72,7 @@ var socket = io.connect('{{server}}');
{% for message in chat %}
{
username: '{{ username }}',
text: '{{ message.message | replace("\n", " ") }}',
text: {{ message.message | replace("\n", " ") | tojson}},
time: convertTime("{{message.time}}")
}{% if not loop.last %},{% endif %}
{% endfor %}
@ -100,7 +101,6 @@ socket.on('connect', function() {
socket.on('channel-' + app.channel, function(msg) {
console.log("new: "+msg.text)
$(".messageback1").each(function() {
var oldColor = $(this).css("background-color");
var randomColor = colorHash(msg.text).rgb;

1
app/templates/home.html
View File

@ -39,7 +39,6 @@ Feel free to browse our catalogue, interfaced in many different ways.
<p class="user">[[ message.username ]]</p>
<p class="time">[[ message.time ]]</p>
<p class="msg">[[ message.text ]]</p>
</div>
</div>
</article>

3
app/templates/scape.html
View File

@ -7,6 +7,7 @@
<style>
#scape_container {
zoom: 1;
-moz-transform: scale(0.5,0.5);
}
body .ui-selecting { border:2px solid yellow; }
body .ui-selected {border:2px solid black;}
@ -235,7 +236,7 @@ $("#zoom-in").click(function(){
console.log(newnumber)
//$('#scape_container').css('zoom','90%'); /* Webkit browsers */
$('#scape_container').css('zoom',newnumber.toString()); /* Other non-webkit browsers */
// $('#scape_container').css('-moz-transform',scale(0.9, 0.9)); /* Moz-browsers */
$('#scape_container').css('-moz-transform',scale(newnumber, newnumber)); /* Moz-browsers */
});
$("#zoom-out").click(function(){
var currentZoom = $('#scape_container').css('zoom');

104
app/templates/scape_new.html Normal file
View File

@ -0,0 +1,104 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{{ url_for("static", filename="js/d3.min.js") }}"></script>
<style>
rect{
width: 40px;
height: 40px;
stroke: black;
fill: yellow;
}
svg{
width:100%;
height:100%;
}
.bg{
fill: blue;
}
</style>
</head>
<body>
<script>
console.log("hello");
// d3.json("/api/books").then(function(data){
// console.log("loaded");
// console.log(data)
// var g = d3.select('body')
// .append('div')
// .append('div');
// g.selectAll("div.item")
// .data(data.books)
// .enter()
// .append("div")
// .attr("class", "item")
// .text(function(d){return d.title})
// .style("position", "absolute")
// .style("top", function (d) { return d.scapeY})
// .style("left", function (d) { return d.scapeX})
//
// }) //.err(function(err) {console.log("error!", err)})
d3.json("/api/books").then(function(data){
console.log("loaded");
console.log(data)
var svg = d3.select('body')
.append('svg');
var bounds = svg.node().getBoundingClientRect(),
width = bounds.width, height = bounds.height;
var bg = svg.append("rect")
.attr("class", "bg")
.attr("width", width)
.attr("height", height)
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1/2, 4])
.on("zoom", zoomed));
function zoomed(){
g.attr("transform", d3.event.transform);
}
var g = svg.append('g');
var join = g.selectAll("g.item")
.data(data.books, function (d) { return d.id });
// process new items (enter)
join.enter()
.append("g")
.attr("class", "item")
// .text(function(d){return d.title})
.style("position", "absolute")
.attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"})
.append("a")
.call(d3.drag()
.container(function(){return this.parentNode})
.on("start", function(){})
.on("drag", function(d){
console.log("dragging", this, d3.event);
d3.select(this).attr("transform", "translate("+d3.event.x+"," +d3.event.y+")" )
})
)
.attr("xlink:href", function(d){return "/books/"+d.id})
.append("rect")
.attr("width", "40")
.attr("height", "40");
// update existing elements
join.transition(1000).attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"});
join.exit().remove();
})
</script>
</body>
</html>

3
app/views.py
View File

@ -136,6 +136,9 @@ def scape():
instances.append(instance)
return render_template('scape.html', books=books, instances=instances)
@app.route('/scape_new', methods=['POST', 'GET'])
def scape_new():
return render_template('scape_new.html')
@app.route('/books_grid')
def show_books_grid():