Skip to content

A
adc2019-system
You need to sign in or sign up before continuing.
Commit 79827d1a authored by Kento HASEGAWA's avatar Kento HASEGAWA
Browse files
Options

Support for the problem viewer and dragging blocks in viewers

parent fb0ef6af
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 197 deletions
main.py
View file @ 79827d1a
......@@ -16,9 +16,9 @@ def webui_index():
# return adc2019system.role.role
return render_template('index.html')
@webui.route('/view/solution')
def webui_view_solution():
return render_template('view-solution.html')
@webui.route('/viewer')
def webui_viewer():
return render_template('viewer.html')
@webui.route('/part/problems')
def webui_part_problems():
......
roles/host.py
View file @ 79827d1a
......@@ -106,16 +106,17 @@ class Host(object):
else:
return {'status': 'unknown request'}
def get_solution_for_viewer(self, problem_key, solution_id):
def get_viewer_data(self, problem_key, solution_id):
problem = self.get_problem(problem_key)
if problem is None:
return None
problem_data = problem.get_d3json()
solution = problem.get_solution(solution_id)
if solution is None:
return None
solution_data = solution.get_d3json()
if solution_id is None:
solution_data = None
else:
solution = problem.get_solution(solution_id)
solution_data = solution.get_d3json()
return {
'problem': problem_data,
......@@ -146,10 +147,10 @@ class Host(object):
elif cmd == 'stop':
self.worker_manager.request_stop()
return {}
elif cmd == 'view/solution':
elif cmd == 'view':
problem_key = params['problem']
solution_id = params['solution']
return self.get_solution_for_viewer(problem_key, solution_id)
return self.get_viewer_data(problem_key, solution_id)
elif cmd == 'adccli/login':
with open('path-to-adccli-login', 'r') as fp:
d = json.load(fp)
......
static/js/adc2019-viewer.js
View file @ 79827d1a
......@@ -103,31 +103,33 @@ class ADC2019BoardViewer {
let cubeResolution = this.cubeResolution;
// Draw outer box
let _width = data['solution']['w'] * this.cubeResolution;
let _height = data['solution']['h'] * this.cubeResolution;
this.view.append("g")
.attr("class", "x axis")
.selectAll("line")
.data([0, _width])
.enter().append("line")
.attr("x1", function (d) { return d; })
.attr("y1", 0)
.attr("x2", function (d) { return d; })
.attr("y2", _height)
.attr("stroke", "#d00")
.attr("stroke-width", 2);
this.view.append("g")
.attr("class", "y axis")
.selectAll("line")
.data([0, _height])
.enter().append("line")
.attr("x1", 0)
.attr("y1", function (d) { return d; })
.attr("x2", _width)
.attr("y2", function (d) { return d; })
.attr("stroke", "#d00")
.attr("stroke-width", 2);
if(('solution' in data) && (data['solution'] != null)){
let _width = data['solution']['w'] * this.cubeResolution;
let _height = data['solution']['h'] * this.cubeResolution;
this.view.append("g")
.attr("class", "x axis")
.selectAll("line")
.data([0, _width])
.enter().append("line")
.attr("x1", function (d) { return d; })
.attr("y1", 0)
.attr("x2", function (d) { return d; })
.attr("y2", _height)
.attr("stroke", "#d00")
.attr("stroke-width", 2);
this.view.append("g")
.attr("class", "y axis")
.selectAll("line")
.data([0, _height])
.enter().append("line")
.attr("x1", 0)
.attr("y1", function (d) { return d; })
.attr("x2", _width)
.attr("y2", function (d) { return d; })
.attr("stroke", "#d00")
.attr("stroke-width", 2);
}
let colors = d3.schemeCategory10
......@@ -138,11 +140,18 @@ class ADC2019BoardViewer {
// Create data
var blocks = data['problem']['block'];
var block_nums = Object.keys(blocks).length;
var block_row = Math.ceil(Math.sqrt(block_nums));
var block_idx = 0;
for(var bi in blocks){
let bw = blocks[bi]['w'];
let bh = blocks[bi]['h'];
let bx = data['solution']['block'][bi]['x'];
let by = data['solution']['block'][bi]['y'];
var bx = (block_idx % block_row) * 3;
var by = (Math.floor(block_idx / block_row)) * 3;
if(('solution' in data) && (data['solution'] != null)){
bx = data['solution']['block'][bi]['x'];
by = data['solution']['block'][bi]['y'];
}
blocks[bi]['cellpos'] = Array();
for(var _h=0; _h<bh; _h++){
......@@ -161,6 +170,34 @@ class ADC2019BoardViewer {
blocks[bi]['x'] = bx;
blocks[bi]['y'] = by;
block_idx++;
}
function snapToGrid(p, r) {
return Math.round(p / r) * r;
}
var __view = this.view;
function dragged(d) {
var el = d3.select(this);
var _x = parseInt(el.attr('data-x'), 10) + d3.event.x;
var _y = parseInt(el.attr('data-y'), 10) + d3.event.y;
el.attr("transform", (d) => {
return 'translate(' + snapToGrid(_x, cubeResolution) + ',' + snapToGrid(_y, cubeResolution) + ')'
})
}
function dragended(d) {
var el = d3.select(this).classed("dragging", false);
var _x = parseInt(el.attr('data-x'), 10) + d3.event.x;
var _y = parseInt(el.attr('data-y'), 10) + d3.event.y;
d3.select(this)
.attr('data-x', snapToGrid(_x, cubeResolution))
.attr('data-y', snapToGrid(_y, cubeResolution));
}
function dragstarted(d) {
var el = d3.select(this);
el.raise().classed("dragging", true);
}
var itemContainer = this.view.selectAll("g.itemContainer")
......@@ -168,15 +205,19 @@ class ADC2019BoardViewer {
.enter()
.append('g')
.attr('class', 'itemContainer')
.attr("transform", (d) => 'translate(' + d.x + ',' + d.y + ')')
.attr("transform", (d) => 'translate(' + 0 + ',' + 0 + ')')
.attr('data-x', (d) => d.x)
.attr('data-y', (d) => d.y);
.attr('data-y', (d) => d.y)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var cellContainer = itemContainer.append('g')
.attr('class', 'cellContainer')
.attr('data-color', (d, i) => colors[i % colors.length])
.attr('x', 0)
.attr('y', 0)
.attr('y', 0);
cellContainer.selectAll('g')
.data((d) => d.cellpos)
......@@ -191,165 +232,100 @@ class ADC2019BoardViewer {
return d3.select(nodes[i].parentNode).attr('data-color');
});
cellContainer.selectAll('g')
.data((d) => d.cellpos)
.enter()
.append('text')
.attr('x', (d) => d[0] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('y', (d) => d[1] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('width', this.cubeResolution)
.attr('height', this.cubeResolution)
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.attr('font-size', '20px')
.attr('cursor', 'move');
// .text((d) => d[2]);
let sw = data['solution']['w'];
let sh = data['solution']['h'];
var lines = Object();
for(var _h=0; _h<sh; _h++){
for(var _w=0; _w<sw; _w++){
let line_index = data['solution']['map'][_h][_w];
if(line_index == 0){
continue;
}
if(('solution' in data) && (data['solution'] != null)){
cellContainer.selectAll('g')
.data((d) => d.cellpos)
.enter()
.append('text')
.attr('x', (d) => d[0] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('y', (d) => d[1] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('width', this.cubeResolution)
.attr('height', this.cubeResolution)
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.attr('font-size', '20px')
.attr('cursor', 'move');
}else{
cellContainer.selectAll('g')
.data((d) => d.cellpos)
.enter()
.append('text')
.attr('x', (d) => d[0] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('y', (d) => d[1] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('width', this.cubeResolution)
.attr('height', this.cubeResolution)
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.attr('font-size', '20px')
.attr('cursor', 'move')
.text((d) => d[2]);
}
if(!lines.hasOwnProperty(line_index)){
lines[line_index] = Array();
}
lines[line_index].push([_w, _h, line_index]);
if((_w+1<sw) && (data['solution']['map'][_h][_w+1] == line_index)){
lines[line_index].push([_w+0.5, _h, '']);
}
if((_h+1<sh) && (data['solution']['map'][_h+1][_w] == line_index)){
lines[line_index].push([_w, _h+0.5, '']);
if(('solution' in data) && (data['solution'] != null)){
// Draw lines
let sw = data['solution']['w'];
let sh = data['solution']['h'];
var lines = Object();
for(var _h=0; _h<sh; _h++){
for(var _w=0; _w<sw; _w++){
let line_index = data['solution']['map'][_h][_w];
if(line_index == 0){
continue;
}
if(!lines.hasOwnProperty(line_index)){
lines[line_index] = Array();
}
lines[line_index].push([_w, _h, line_index]);
if((_w+1<sw) && (data['solution']['map'][_h][_w+1] == line_index)){
lines[line_index].push([_w+0.5, _h, '']);
}
if((_h+1<sh) && (data['solution']['map'][_h+1][_w] == line_index)){
lines[line_index].push([_w, _h+0.5, '']);
}
}
}
let lineColors = d3.schemePastel2
var lineItemContainer = this.view.selectAll("g.lineItemContainer")
.data(Object.values(lines))
.enter()
.append('g')
.attr('class', 'lineItemContainer');
var lineContainer = lineItemContainer.append('g')
.attr('class', 'lineContainer')
.attr('data-color', (d, i) => lineColors[i % lineColors.length]);
lineContainer.selectAll('g')
.data((d) => d)
.enter()
.append('rect')
.attr('x', (d) => (d[0]+0.25) * this.cubeResolution)
.attr('y', (d) => (d[1]+0.25) * this.cubeResolution)
.attr('width', (this.cubeResolution*0.5))
.attr('height', (this.cubeResolution*0.5))
.attr('fill', (d, i, nodes) => {
return d3.select(nodes[i].parentNode).attr('data-color');
});
lineContainer.selectAll('g')
.data((d) => d)
.enter()
.append('text')
.attr('x', (d) => d[0] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('y', (d) => d[1] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('width', (this.cubeResolution*0.5))
.attr('height', (this.cubeResolution*0.5))
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.attr('font-size', '16px')
.text((d) => d[2]);
}
let lineColors = d3.schemePastel2
var lineItemContainer = this.view.selectAll("g.lineItemContainer")
.data(Object.values(lines))
.enter()
.append('g')
.attr('class', 'lineItemContainer');
var lineContainer = lineItemContainer.append('g')
.attr('class', 'lineContainer')
.attr('data-color', (d, i) => lineColors[i % lineColors.length]);
lineContainer.selectAll('g')
.data((d) => d)
.enter()
.append('rect')
.attr('x', (d) => (d[0]+0.25) * this.cubeResolution)
.attr('y', (d) => (d[1]+0.25) * this.cubeResolution)
.attr('width', (this.cubeResolution*0.5))
.attr('height', (this.cubeResolution*0.5))
.attr('fill', (d, i, nodes) => {
return d3.select(nodes[i].parentNode).attr('data-color');
});
lineContainer.selectAll('g')
.data((d) => d)
.enter()
.append('text')
.attr('x', (d) => d[0] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('y', (d) => d[1] * this.cubeResolution + 0.5 * this.cubeResolution)
.attr('width', (this.cubeResolution*0.5))
.attr('height', (this.cubeResolution*0.5))
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.attr('font-size', '16px')
.text((d) => d[2]);
}
// _draw_blocks(blocks){
// let cubeResolution = this.cubeResolution;
// function snapToGrid(p, r) {
// return Math.round(p / r) * r;
// }
// function dragged(d) {
// var el = d3.select(this);
// var _x = parseInt(el.attr('data-x'), 10) + d3.event.x;
// var _y = parseInt(el.attr('data-y'), 10) + d3.event.y;
// el.attr("transform", (d) => {
// return 'translate(' + snapToGrid(_x, cubeResolution) + ',' + snapToGrid(_y, cubeResolution) + ')'
// })
// }
// function dragended(d) {
// var el = d3.select(this).classed("dragging", false);
// var _x = parseInt(el.attr('data-x'), 10) + d3.event.x;
// var _y = parseInt(el.attr('data-y'), 10) + d3.event.y;
// d3.select(this)
// .attr('data-x', snapToGrid(_x, cubeResolution))
// .attr('data-y', snapToGrid(_y, cubeResolution));
// }
// function dragstarted(d) {
// var el = d3.select(this);
// el.raise().classed("dragging", true);
// }
// let colors = d3.schemeCategory10
// // Reference
// // Grid: https://bl.ocks.org/ngminhtrung/7c5721a1504f3e29a36da9ddd9e5039b
// // Snap: https://bl.ocks.org/evanjmg/ea3e59e67b4256c8831d3fc80f71294b
// // Nested data structure: https://codeday.me/jp/qa/20190428/720184.html
// var itemContainer = this.view.selectAll("g.itemContainer")
// .data(blocks)
// .enter()
// .append('g')
// .attr('class', 'itemContainer')
// .attr("transform", (d) => 'translate(' + d.x + ',' + d.y + ')')
// .attr('data-x', (d) => d.x)
// .attr('data-y', (d) => d.y)
// .call(d3.drag()
// .on("start", dragstarted)
// .on("drag", dragged)
// .on("end", dragended));
// var cellContainer = itemContainer.append('g')
// .attr('class', 'cellContainer')
// .attr('data-color', (d, i) => colors[i])
// .attr('x', 0)
// .attr('y', 0)
// cellContainer.selectAll('g')
// .data((d) => d.cells)
// .enter()
// .append('rect')
// .attr('x', (d) => d[0] * this.cubeResolution)
// .attr('y', (d) => d[1] * this.cubeResolution)
// .attr('width', this.cubeResolution)
// .attr('height', this.cubeResolution)
// .attr('cursor', 'move')
// .attr('fill', (d, i, nodes) => {
// return d3.select(nodes[i].parentNode).attr('data-color');
// });
// cellContainer.selectAll('g')
// .data((d) => d.cells)
// .enter()
// .append('text')
// .attr('x', (d) => d[0] * this.cubeResolution + 0.5 * this.cubeResolution)
// .attr('y', (d) => d[1] * this.cubeResolution + 0.5 * this.cubeResolution)
// .attr('width', this.cubeResolution)
// .attr('height', this.cubeResolution)
// .attr('text-anchor', 'middle')
// .attr('fill', 'white')
// .attr('font-size', '20px')
// .attr('cursor', 'move')
// .text((d) => d[2]);
// }
}
$(function(){
......@@ -359,17 +335,26 @@ $(function(){
hash = location.hash.replace("#", "");
params = hash.split('/');
problem_name = params[0];
if(params.length > 1){
solution_id = params[1];
}else{
solution_id = null;
}
$.ajax({
type: "POST",
dataType: "json",
url: "/api/view/solution",
url: "/api/view",
data: JSON.stringify({
"problem": params[0],
"solution": params[1]
"problem": problem_name,
"solution": solution_id
}),
contentType: 'application/json'
}).done((d) => {
board.draw(d);
}).fail((d) => {
console.log(d);
});
});
......
static/js/adc2019.js
View file @ 79827d1a
......@@ -38,7 +38,7 @@ class StatusView {
_this.container.find('.solution-detail-row.valid-solution td').click((e) => {
var solution_id = $(e.target).parent("tr").data("solution-id");
var problem_name = $(e.target).parent("tr").data("problem");
var viewer_url = "/view/solution#" + problem_name + "/" + solution_id;
var viewer_url = "/viewer#" + problem_name + "/" + solution_id;
window.open(viewer_url, "_blank");
});
......
templates/part_problem_status.html
View file @ 79827d1a
<div>
<h4 class='inline-heading' id='problem-status-title'>{{problem.name}}</h4>
<a href="/viewer#{{problem.name}}" target="_blank">Viewer</a>
{#% # if localmode %#}
<button class="btn btn-primary btn-lg start-button" type="button" data-qname="{{problem.name}}">Start</button>
<!-- <button class="btn btn-danger btn-lg stop-button" type="button" data-qname="all">Stop</button> -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment