Skip to content

Commit

Permalink
Blub
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvink
marvink committed Jul 15, 2016
1 parent 65f6a5e commit f30b49f
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 15 deletions.
10 changes: 8 additions & 2 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ function createWindow () {

// Open the DevTools.
mainWindow.maximize();
//mainWindow.webContents.openDevTools();
mainWindow.webContents.openDevTools();


// Emitted when the window is closed.
Expand Down Expand Up @@ -109,7 +109,7 @@ function createSecondWindow(callback) {
});


//secondWindow.webContents.openDevTools();
secondWindow.webContents.openDevTools();
mainWindow.webContents.send('viewport-change', secondWindow.getBounds())

secondWindow.webContents.on('did-finish-load', function() {
Expand Down Expand Up @@ -157,6 +157,12 @@ ipcMain.on('image-change', function(event, arg) {
secondWindow.webContents.send('image-change-reply', arg)
});
});

ipcMain.on('fogOfWar-change', function(event, arg) {
createSecondWindow(function() {
secondWindow.webContents.send('fogOfWar-change-reply', arg)
});
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', createSelectWindow);
Expand Down
2 changes: 1 addition & 1 deletion src/src/js/widgets/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $(function(){
var day = $(this).parents('li').data('day') + 1;
var moonIndex = moons.indexOf($(this).parents('li').data('moon'));

if(day == "28") {
if(day == "29") {
$(this).parents('li').data('day', 1);
$(this).parents('li').attr('data-day', 1);
$(this).parents('li').find('.day').html(1);
Expand Down
75 changes: 70 additions & 5 deletions src/src/js/widgets/image.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@

$(function(){

var $panzoom
var $panzoom;
var activeEraser = false;
var activeDrawer = true;

$('body').on('click', '.widget-image img', function(e) {
var path = $(this).attr('src');
Expand All @@ -12,12 +14,12 @@ $(function(){
}
tab.addClass("imageTab");
ipcRenderer.send("image-message", path);
tab.append('<div class="btn-toolbar"><div class="btn-group"><button class="showImage btn btn-mini btn-default"><span title="Anzeigen" class="icon fa-eye"></span></button><button class="hideImage btn btn-mini btn-default"><span title="Verbergen" class="icon fa-low-vision"></span></button></div></div>');
tab.append('<div class="btn-toolbar"><div class="btn-group"><button class="showImage btn btn-mini btn-default"><span title="Anzeigen" class="icon fa-eye"></span></button><button class="hideImage btn btn-mini btn-default"><span title="Verbergen" class="icon fa-low-vision"></span></button><button class="fogOfWar btn btn-mini btn-default"><span title="Fog of war" class="icon fa-cloud"></span></button><button class="removePaint btn btn-mini btn-default"><span title="Radierer" class="icon fa-pencil"></span></button></div></div></div>');

tab.append('<div class="overflow"><div class="panzoom"><canvas></canvas></div></div>');
tab.append('<div class="overflow"><div class="panzoom"><canvas class="imageCanvas"></canvas><canvas class="fogOfWarCanvas"></canvas></div></div>');

loadCanvas(tab.find('canvas')[0], path)
tab.find('canvas').attr("data-path", path);
loadCanvas(tab.find('.imageCanvas')[0], path);
tab.find('.imageCanvas').attr("data-path", path);

$panzoom = $('.panzoom').panzoom();

Expand All @@ -31,23 +33,86 @@ $(function(){
focal: e
});
});

$('body').on('click', '.fogOfWar', function(e) {
var context = tab.find('.fogOfWarCanvas')[0].getContext('2d');
context.fillStyle = "rgba(255,0,0,0.5)";
context.clearRect(0, 0, tab.find('.imageCanvas').data("width"), tab.find('.imageCanvas').data("height"));
context.fillRect(0, 0, tab.find('.imageCanvas').data("width"), tab.find('.imageCanvas').data("height"));
ipcRenderer.send("fogOfWar-change", {"width": tab.find('.imageCanvas').data("width"), "height": tab.find('.imageCanvas').data("height")});
});

$('body').on('click', '.removePaint', function(e) {

activeEraser = true;

var context = tab.find('.fogOfWarCanvas')[0].getContext('2d');
context.fillStyle = "red";
context.clearRect(e.clientX-20, e.clientY-20, 40, 40);
});

tab.find('.fogOfWarCanvas')[0].onmousemove = function(e) {
if (!activeEraser) {
return;
}

var coordinates = getMousePos(this, e)
var x = coordinates.x ;
var y = coordinates.y ;
var radius = 10; // or whatever
var fillColor = '#ff0000';
var context = tab.find('.fogOfWarCanvas')[0].getContext('2d');

context.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};

context.globalCompositeOperation = 'destination-out';
context.fillCircle(x, y, radius, fillColor);
};
tab.find('.fogOfWarCanvas')[0].onmousedown = function(e) {
activeEraser = true;
};
tab.find('.fogOfWarCanvas')[0].onmouseup = function(e) {
activeEraser = false;
};

$panzoom.on('panzoomchange', function(e, panzoom, transform) {
ipcRenderer.send("image-change", transform);
});
});

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
console.log("client" + evt.clientX)
console.log("rect" + rect.left)
console.log("berechnet" + (parseFloat($panzoom.panzoom("getMatrix")[0])+1) )
return {
x: ((evt.clientX - parseFloat($panzoom.panzoom("getMatrix")[4])) + 5),
y: ((evt.clientY - parseFloat($panzoom.panzoom("getMatrix")[5])) + 5 -50)
};
}

function loadCanvas(canvas, dataURL) {
var context = canvas.getContext('2d');

// load image from data url
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).data("width", imageObj.naturalWidth);
$(canvas).data("height", imageObj.naturalHeight);
tab.find('.fogOfWarCanvas').attr("width",imageObj.naturalWidth).attr("height",imageObj.naturalHeight);
$(canvas).attr("width",imageObj.naturalWidth).attr("height",imageObj.naturalHeight);
context.drawImage(this, 0, 0);
};

imageObj.src = dataURL;


/*
var isDrawing;
Expand Down
12 changes: 12 additions & 0 deletions src/src/scss/viewport.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,16 @@ body {
top:0;
vertical-align:middle;
text-align: center;

.imageCanvas {
position:absolute;
z-index:1;
}

.fogOfWarCanvas {
position:absolute;
z-index:10;
right:0px;
left:0px;
}
}
10 changes: 10 additions & 0 deletions src/src/scss/widgets/_image.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,14 @@
.overflow {
border:1px solid #000;
}

.imageCanvas {
position:absolute;
z-index:1;
}

.fogOfWarCanvas {
position:absolute;
z-index:10;
}
}
23 changes: 16 additions & 7 deletions src/viewport.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@

ipcRenderer.on('image-reply', function(event, arg) {

loadCanvas($('.image').find('canvas')[0],arg);
$('.image').find('canvas').attr("data-path", arg);
loadCanvas($('.image').find('.imageCanvas')[0],arg);
$('.image').find('.imageCanvas').attr("data-path", arg);

$panzoom = $('.panzoom').panzoom();
});
Expand All @@ -40,15 +40,23 @@
$panzoom.panzoom('resetDimensions');
});

ipcRenderer.on('fogOfWar-change-reply', function(event, arg) {
var context = $('.image').find('.fogOfWarCanvas')[0].getContext('2d');
context.fillStyle = "black";
context.clearRect(0, 0, arg.width, arg.height);
context.fillRect(0, 0, arg.width, arg.height);
});

ipcRenderer.on('toggle-image-reply', function(event, arg) {
var oldPath = $('.image').find('canvas').attr("data-path");
var oldPath = $('.image').find('.imageCanvas').attr("data-path");
if (oldPath != arg.path) {
$('.image').find('canvas').attr("data-path", arg.path);
loadCanvas($('.image').find('canvas')[0], arg.path);
$('.image').find('.imageCanvas').attr("data-path", arg.path);
loadCanvas($('.image').find('.imageCanvas')[0], arg.path);
$panzoom.panzoom('reset');
$panzoom.panzoom('resetDimensions');
}
$('.image').find('canvas').css('display',arg.display);
$('.image').find('.imageCanvas').css('display',arg.display);
$('.image').find('.fogOfWarCanvas').css('display',arg.display);
});

function loadCanvas(canvas, dataURL) {
Expand All @@ -58,6 +66,7 @@
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr("width",imageObj.naturalWidth).attr("height",imageObj.naturalHeight);
$('.image').find('.fogOfWarCanvas').attr("width",imageObj.naturalWidth).attr("height",imageObj.naturalHeight);
context.drawImage(this, 0, 0);
};

Expand All @@ -76,7 +85,7 @@
</div>

<div class="image">
<div class="overflow" style="width:100vw; height:100vh;"><div class="panzoom"><canvas style="display:none"></canvas></div>
<div class="overflow" style="width:100vw; height:100vh;"><div class="panzoom"><canvas class="imageCanvas" style="display:none"></canvas><canvas class="fogOfWarCanvas" style="display:none"></canvas></div>
</div>
</body>
</html>

0 comments on commit f30b49f

Please sign in to comment.