diff --git a/src/html/settings.html b/src/html/settings.html
index 925a1c0..9b40c9f 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -69,6 +69,19 @@
+
+ Ratio Auto : |
+
+
+ |
+
+
+ Ratio (Y,X) : |
+
+
+
+ |
+
Margins : |
|
diff --git a/src/js/background.js b/src/js/background.js
index c1d035e..356f935 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -111,6 +111,9 @@ app.Settings.init = function(callback){ // Load settings and nodes
margin: 10,
rows: 4,
columns: 5,
+ ratioAuto: true,
+ ratioX: 5,
+ ratioY: 4,
backNode: true,
backIcon: 'url(/img/back.png)',
backIconMode: 3,
@@ -200,6 +203,11 @@ app.Settings.init = function(callback){ // Load settings and nodes
}
if(data.version == 4){ // Upgrade Data Version
if(!data.settings.grid.cells.snapshotDelay) data.settings.grid.cells.snapshotDelay = 2000;
+ if(!data.settings.grid.ratioX){
+ data.settings.grid.ratioAuto = true;
+ data.settings.grid.ratioX = data.settings.grid.columns;
+ data.settings.grid.ratioY = data.settings.grid.rows;
+ }
//app.Settings.save();
}
app.settings = data.settings;
@@ -301,7 +309,7 @@ app.SiteInfos.fromNewTab = function(url, callback){ // Retrieve infos from a ne
imgObj.src = img;
var previewWidth = 1200; // Need to be linked to settings
- var previewHeight = previewWidth / app.settings.grid.columns * app.settings.grid.rows;
+ var previewHeight = previewWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
if(app.settings.grid.title == true) previewHeight -= app.settings.grid.titleHeight;
var canvas = document.createElement('canvas');
@@ -368,7 +376,7 @@ app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an ifr
}
var previewWidth = 1200; // Need to be linked to settings
- var previewHeight = previewWidth / app.settings.grid.columns * app.settings.grid.rows;
+ var previewHeight = previewWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
if(app.settings.grid.title == true) previewHeight -= app.settings.grid.titleHeight;
var iframe;
var xmlHttp = new XMLHttpRequest();
diff --git a/src/js/dial.js b/src/js/dial.js
index c5fcf01..6689295 100644
--- a/src/js/dial.js
+++ b/src/js/dial.js
@@ -415,8 +415,8 @@ dial.updateGridLayout = function(){
var cellHeight = fullHeight / app.settings.grid.rows;
var linkWidth = 0;
var linkHeight = 0;
- if(cellWidth <= cellHeight * app.settings.grid.columns / app.settings.grid.rows) cellHeight = cellWidth / app.settings.grid.columns * app.settings.grid.rows;
- else cellWidth = cellHeight / app.settings.grid.rows * app.settings.grid.columns;
+ if(cellWidth <= cellHeight * app.settings.grid.ratioX / app.settings.grid.ratioY) cellHeight = cellWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+ else cellWidth = cellHeight / app.settings.grid.ratioY * app.settings.grid.ratioX;
linkWidth = cellWidth - 2 * (cellsMargin + 1) - 2 * borderSize;
linkHeight = cellHeight - 2 * (cellsMargin + 1) - 2 * borderSize - titleBorderSize;
return {
diff --git a/src/js/settings.js b/src/js/settings.js
index ea37bba..ddae6a0 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -28,6 +28,9 @@ app.init = function(){
BackgroundPreview.style.backgroundSize = '100% 100%';
GridRoot.value = app.settings.grid.root;
GridRows.value = app.settings.grid.rows;
+ GridRatioAuto.checked = app.settings.grid.ratioAuto;
+ GridRatioX.value = app.settings.grid.ratioX;
+ GridRatioY.value = app.settings.grid.ratioY;
GridMargins.value = app.settings.grid.margin;
GridColumns.value = app.settings.grid.columns;
GridBackNode.checked = app.settings.grid.backNode;
@@ -70,6 +73,7 @@ app.init = function(){
GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
GridCellsSnapshotDelay.value = app.settings.grid.cells.snapshotDelay;
+ GridRatioAuto.onchange();
});
BtnOk.onclick = function(){
@@ -83,6 +87,9 @@ app.init = function(){
app.settings.grid.rows = +(GridRows.value);
app.settings.grid.margin = +(GridMargins.value);
app.settings.grid.columns = +(GridColumns.value);
+ app.settings.grid.ratioAuto = GridRatioAuto.checked;
+ app.settings.grid.ratioX = GridRatioX.value;
+ app.settings.grid.ratioY = GridRatioY.value;
app.settings.grid.backNode = GridBackNode.checked;
app.settings.grid.backIconMode = +(GridBackMode.value);
app.settings.grid.backIcon = GridBackImage;
@@ -160,6 +167,28 @@ app.init = function(){
fileReader.readAsDataURL(BackgroundImageFile.files[0]);
}
+ GridRows.onchange = function(){
+ if(GridRatioAuto.checked){
+ GridRatioX.value = GridColumns.value;
+ GridRatioY.value = GridRows.value;
+ }
+ }
+ GridColumns.onchange = function(){
+ if(GridRatioAuto.checked){
+ GridRatioX.value = GridColumns.value;
+ GridRatioY.value = GridRows.value;
+ }
+ }
+
+ GridRatioAuto.onchange = function(){
+ if(GridRatioAuto.checked){
+ GridRatioX.value = GridColumns.value;
+ GridRatioY.value = GridRows.value;
+ }
+ GridRatioX.disabled = GridRatioAuto.checked;
+ GridRatioY.disabled = GridRatioAuto.checked;
+ }
+
GridBackImageReset.onclick = function(){
GridBackImage = 'url(/img/back.png)';
GridBackPreview.style.backgroundImage = GridBackImage;