mirrors/graphonline
1
0
Fork 0
mirror of https://github.com/UnickSoft/graphonline.git synced 2025-08-15 23:56:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added background image support

Browse Source
This commit is contained in:
Oleg Sh 2023-10-21 12:08:07 +02:00
parent 131f1a0e14
commit 6f477f1e94
18 changed files with 275 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lang/bg/home.php
View File

@ -164,7 +164,7 @@
$g_lang["color"] = "Цвят";
$g_lang["alpha"] = "Прозрачност";
$g_lang["background_style"] = "Цвят на фона";
$g_lang["background_style"] = "Фон";
$g_lang["adjacency_matrix_multigraph_description"] = "Мултиграф матрица съдържа теглото на минималните ребра между върховете.";
@ -297,4 +297,11 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/ch/home.php
View File

@ -164,7 +164,7 @@
$g_lang["color"] = "颜色";
$g_lang["alpha"] = "透明度";
$g_lang["background_style"] = "背景颜色";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "多重图包含最短边的权重.";
@ -297,4 +297,11 @@
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/cs/home.php
View File

@ -163,7 +163,7 @@
$g_lang["color"] = "Barva";
$g_lang["alpha"] = "Průhlednost";
$g_lang["background_style"] = "Barva pozadí";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Multigrafická matice obsahuje váhu minimálních hran mezi vrcholy.";
@ -301,4 +301,11 @@
$g_lang["max_clique_not_found"] = "Maximální kliku nebylo nalezeno";
$g_lang["max_clique_size_is"] = "Velikost maximální kliky je ";
$g_lang["max_clique_contains"] = ". Klika obsahuje tyto vrcholy: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/de/home.php
View File

@ -135,7 +135,7 @@
$g_lang["edge_draw_style"] = "Kantenstil";
$g_lang["color"] = "Farbe";
$g_lang["alpha"] = "Opazität";
$g_lang["background_style"] = "Hintergrundfarbe";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Multigraph-Matrix enthält Gewicht der minimalen Kanten.";
$g_lang["graph_is_multi_message"] = "Multigraph unterstützt alle Algorithmen nicht";
$g_lang["graph_is_general_message"] = "";
@ -260,4 +260,11 @@
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

11
lang/el/home.php
View File

@ -165,7 +165,7 @@
$g_lang["color"] = "Χρώμα";
$g_lang["alpha"] = "Διαφάνεια";
$g_lang["background_style"] = "Χρώμα φόντου";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Ο πίνακας Multigraph περιέχει βάρος ελάχιστων άκρων μεταξύ κορυφών.";
@ -297,5 +297,12 @@
$g_lang["snowflake"] = "Snowflake";
$g_lang["save_edge_for_future"] = "Save edge to reuse in the future";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
$g_lang["reuse_saved_edge"] = "Reuse saved edge";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

11
lang/en/home.php
View File

@ -164,7 +164,7 @@
$g_lang["color"] = "Color";
$g_lang["alpha"] = "Opacity";
$g_lang["background_style"] = "Background color";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Multigraph matrix contains weight of minimum edges between vertices.";
@ -301,5 +301,12 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang["max_clique"] = "Max Clique";
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/es/home.php
View File

@ -164,7 +164,7 @@
$g_lang["color"] = "Color";
$g_lang["alpha"] = "Opacidad";
$g_lang["background_style"] = "Color de fondo";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Las matrices de multigrafos continen el mínimo de los pesos de las aristas que unen los vértices.";
@ -302,4 +302,11 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/fr/home.php
View File

@ -137,7 +137,7 @@
$g_lang["edge_draw_style"] = "Style d'arête";
$g_lang["color"] = "Couleur";
$g_lang["alpha"] = "Opacité";
$g_lang["background_style"] = "Couleur d'arrière plan";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "La matrice du multigraphe contient les poids des arêtes minimum entre sommets";
$g_lang["graph_is_multi_message"] = "Tous les algorithmes ne s'appliquent pas au multigraphe";
$g_lang["graph_is_general_message"] = "";
@ -270,4 +270,11 @@
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/nl/home.php
View File

@ -135,7 +135,7 @@
$g_lang["edge_draw_style"] = "Stijl van de weg";
$g_lang["color"] = "Kleur";
$g_lang["alpha"] = "Transparantie";
$g_lang["background_style"] = "Achtergrond kleur";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Multigraaf matrix bevat het gewicht van de minimale lijnen tussen hoekpunten";
$g_lang["graph_is_multi_message"] = "Multigraaf ondersteunt niet alle algoritme's";
$g_lang["graph_is_general_message"] = "";
@ -267,4 +267,11 @@
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/pl/home.php
View File

@ -164,7 +164,7 @@
$g_lang["color"] = "Kolor";
$g_lang["alpha"] = "Przeźroczystość";
$g_lang["background_style"] = "Kolor tła";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Macierz multigrafu zawiera wagi minimalnych krawędzi pomiędzy wierzchołkami.";
@ -302,4 +302,11 @@ Dodaliśmy polskie tłumaczenie, Patryk</a>";
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/pt/home.php
View File

@ -135,7 +135,7 @@
$g_lang["edge_draw_style"] = "Estilo da aresta";
$g_lang["color"] = "Cor";
$g_lang["alpha"] = "Opacidade";
$g_lang["background_style"] = "Cor de fundo do texto";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "Matriz de multigrafo contém pesos das arestas mínimas entre os vértices";
$g_lang["graph_is_multi_message"] = "Multigrafo não suporta todos os algoritmos";
$g_lang["graph_is_general_message"] = "";
@ -268,4 +268,11 @@
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

9
lang/ru/home.php
View File

@ -167,7 +167,7 @@
$g_lang["color"] = "Цвет";
$g_lang["alpha"] = "Прозрачность";
$g_lang["background_style"] = "Цвет фона";
$g_lang["background_style"] = "Фона";
$g_lang["adjacency_matrix_multigraph_description"] = "Для мультиграфа матрица содержит значения минимальных дуг между вершинами.";
@ -304,4 +304,11 @@
$g_lang["max_clique_not_found"] = "Максимальная клика не найден";
$g_lang["max_clique_size_is"] = "Размер Максимальной клики равена ";
$g_lang["max_clique_contains"] = ". Клика содержит следующие вершины: ";
$g_lang["remove_background_image"] = "Удалить фоновое изображение";
$g_lang["upload"] = "Загрузить";
$g_lang["background_image"] = "Фоновое изображение";
$g_lang['wrong_image_background_format'] = "Неправильный формат изображения. Только JPEG and PNG поддерживается";
$g_lang['wrong_image_background_size'] = "Размер изобажения слишком большой. Размер изображения должен быть меньше {0} пикселей.";
?>

9
lang/sv/home.php
View File

@ -139,7 +139,7 @@
$g_lang["edge_draw_style"] = "Kant ritning stil";
$g_lang["color"] = "Färg";
$g_lang["alpha"] = "Genomskinlighet";
$g_lang["background_style"] = "Bakgrundsfärg";
$g_lang["background_style"] = "Background";
$g_lang["adjacency_matrix_multigraph_description"] = "För en multigraf innehåller matrisen värdet på minsta bågar mellan topparna";
$g_lang["graph_is_multi_message"] = "Multigraph stöder inte alla algoritmer";
$g_lang["graph_is_general_message"] = "";
@ -264,4 +264,11 @@
$g_lang["max_clique_not_found"] = "Max Clique is not found";
$g_lang["max_clique_size_is"] = "Max Clique size is ";
$g_lang["max_clique_contains"] = ". Clique contains these vertecies: ";
$g_lang["remove_background_image"] = "Remove background image";
$g_lang["upload"] = "Upload";
$g_lang["background_image"] = "Background image";
$g_lang['wrong_image_background_format'] = "Wrong image format. Only JPEG and PNG are supported";
$g_lang['wrong_image_background_size'] = "Image size is too big. Image size must be less than {0} pixels.";
?>

21
script/Application.js
View File

@ -897,7 +897,7 @@ Application.prototype.onLoad = function()
{
this.canvas = this.document.getElementById('canvas');
this.SetDefaultHandler();
this.SetDefaultHandler()
this.updateMessage();
this.redrawGraph();
@ -1193,7 +1193,7 @@ Application.prototype.SaveSVGGraphOnDisk = function (showDialogCallback)
return imageName;
}
Application.prototype.LoadGraphFromString = function (str)
{
var graph = new Graph();
@ -1601,8 +1601,16 @@ Application.prototype.SaveUserSettings = function()
if (needEnd)
res = res + ",";
let valueJson = "";
if (typeof entry.value.saveToJson === "function") {
valueJson = entry.value.saveToJson();
} else {
valueJson = JSON.stringify(entry.value);
}
res = res + "\"" + entry.field + "\"" + ":" + JSON.stringify(entry.value);
res = res + "\"" + entry.field + "\"" + ":" + valueJson;
needEnd = true;
});
@ -1676,6 +1684,13 @@ Application.prototype.LoadUserSettings = function(json)
}
else
{
if (typeof entry.value.loadFromJson === "function") {
entry.value.loadFromJson(parsedSave[entry.field], function () {
setTimeout( function() { app.redrawGraph() }, 1000);
});
return;
}
if (!entry.deep)
entry.value.Clear();

40
script/BaseBackgroundDrawer.js
View File

@ -7,12 +7,14 @@ function CommonBackgroundStyle()
{
this.commonColor = '#ffffff';
this.commonOpacity = 1.0;
this.image = null;
}
CommonBackgroundStyle.prototype.Clear = function ()
{
delete this.commonColor;
delete this.commonOpacity;
delete this.image;
}
CommonBackgroundStyle.prototype.ShouldLoad = function (field)
@ -20,6 +22,25 @@ CommonBackgroundStyle.prototype.ShouldLoad = function (field)
return true;
}
CommonBackgroundStyle.prototype.saveToJson = function (field)
{
return JSON.stringify({commonColor: this.commonColor, commonOpacity: this.commonOpacity, image: this.image != null ? this.image.src : null});
}
CommonBackgroundStyle.prototype.loadFromJson = function (json, callbackOnLoaded)
{
this.commonColor = json["commonColor"];
this.commonOpacity = json["commonOpacity"];
this.image = null;
if (typeof json["image"] === 'string') {
this.image = new Image();
this.image.onload = function() {
callbackOnLoaded();
}
this.image.src = json["image"];
}
}
PrintBackgroundStyle.prototype = Object.create(CommonBackgroundStyle.prototype);
function PrintBackgroundStyle()
@ -28,6 +49,7 @@ function PrintBackgroundStyle()
this.commonColor = '#ffffff';
this.commonOpacity = 1.0;
this.image = null;
}
function BaseBackgroundDrawer(context)
@ -43,11 +65,25 @@ BaseBackgroundDrawer.prototype.Draw = function(style, width, height, position, s
context.clearRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
var oldOpacity = context.globalAlpha;
if (style.commonOpacity > 0.0)
{
context.globalAlpha = style.commonOpacity;
context.fillStyle = style.commonColor;
context.fillRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
context.globalAlpha = 1.0;
context.fillRect(-rect.minPoint.x, -rect.minPoint.y, rect.size().x + 1, rect.size().y + 1);
this.DrawImage(style, width, height, position, scale);
}
context.globalAlpha = oldOpacity;
}
BaseBackgroundDrawer.prototype.DrawImage = function(style, width, height, position, scale)
{
if (style.image == null) {
return;
}
var context = this.context;
context.clearRect(0, 0, style.image.width, style.image.height);
context.drawImage(style.image, 0, 0)
}

82
script/EventHandlers.js
View File

@ -2344,11 +2344,45 @@ function SetupBackgroundStyle(app)
{
BaseHandler.apply(this, arguments);
this.message = "";
this.maxImageSize = 2048;
}
// inheritance.
SetupBackgroundStyle.prototype = Object.create(BaseHandler.prototype);
SetupBackgroundStyle.prototype.handleImportBackgroundFile = function(files, updateBackgroundCallback) {
var graphFileToLoad = files[0];
var re = /(?:\.([^.]+))?$/;
var imageExtension = re.exec(graphFileToLoad.name)[1].toLowerCase();
if (!(imageExtension == "png" || imageExtension == "jpg" || imageExtension == "jpeg")) {
$("#UploadBackgroundImageError").html(g_wrongImageFormatPNGAndJPEG);
$("#UploadBackgroundImageError").show();
return;
}
let self = this;
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent){
var textFromFileLoaded = fileLoadedEvent.target.result;
var image = new Image();
image.onload = function() {
console.log(this.width + 'x' + this.height);
if (this.width > self.maxImageSize || this.height > self.maxImageSize) {
$("#UploadBackgroundImageError").html(formatString(g_wrongImageSizeP1, [self.maxImageSize]));
$("#UploadBackgroundImageError").show();
return;
}
updateBackgroundCallback(image);
}
image.src = 'data:image/' + imageExtension + ';base64' + textFromFileLoaded;
ImportBackgroundImage.value = "";
};
fileReader.readAsDataURL(graphFileToLoad);
}
SetupBackgroundStyle.prototype.show = function()
{
var handler = this;
@ -2372,12 +2406,44 @@ SetupBackgroundStyle.prototype.show = function()
var context = canvas.getContext('2d');
context.save();
let bestScale = 1.0;
if (style.image != null) {
let wScale = canvas.width / style.image.width;
let hScale = canvas.height / style.image.height;
bestScale = Math.min(wScale, hScale);
context.scale(bestScale, bestScale);
}
var backgroundDrawer = new BaseBackgroundDrawer(context);
backgroundDrawer.Draw(style, canvas.width, canvas.height, new Point(0, 0), 1.0);
backgroundDrawer.Draw(style, canvas.width, canvas.height, new Point(0, 0), bestScale);
context.restore();
if (style.image != null) {
$( "#RemoveBackgroundFile" ).show();
} else {
$( "#RemoveBackgroundFile" ).hide();
}
}
var loadFile = function() {
userAction("background_loadFromFile");
if (ImportBackgroundImage) {
ImportBackgroundImage.click();
}
}
var updateBackgroundImage = function(image) {
style.image = image;
$("#UploadBackgroundImageError").hide();
redrawVertex();
}
var clearBackgroundImage = function() {
style.image = null;
$("#UploadBackgroundImageError").hide();
redrawVertex();
}
dialogButtons[g_default] =
{
@ -2415,11 +2481,21 @@ SetupBackgroundStyle.prototype.show = function()
dialogClass: 'EdgeDialog'
});
redrawVertex();
try {
redrawVertex();
} catch (error) {
console.error(error);
}
$( "#backgroundColor" ).unbind();
$( "#backgroundTransporent" ).unbind();
$( "#LoadBackgroundFile" ).unbind();
$( "#ImportBackgroundImage" ).unbind();
$( "#RemoveBackgroundFile" ).unbind();
$( "#backgroundColor" ).change(redrawVertex);
$( "#backgroundTransporent" ).change(redrawVertex);
$( "#LoadBackgroundFile" ).click(loadFile);
$( "#ImportBackgroundImage" ).change( function () {handler.handleImportBackgroundFile(this.files, updateBackgroundImage);});
$( "#RemoveBackgroundFile" ).click(clearBackgroundImage);
}

12
script/texts.js
View File

@ -203,6 +203,9 @@ var g_MaxCliqueNotFound = "Max Clique is not found";
var g_MaxCliqueSizeIs = "Max Clique size is ";
var g_MaxCliqueContains = ". Clique contains these vertecies: ";
var g_wrongImageFormatPNGAndJPEG = "Wrong image format. We support only JPEG and PNG.";
var g_wrongImageSizeP1 = "Image size is too big. Image size must be less than {0} pixels.";
function loadTexts()
{
g_textsSelectAndMove = document.getElementById("SelectAndMoveObject").innerHTML;
@ -414,4 +417,13 @@ function loadTexts()
g_MaxCliqueNotFound = document.getElementById("maxCliqueNotFound").innerHTML;
g_MaxCliqueSizeIs = document.getElementById("maxCliqueSizeIs").innerHTML;
g_MaxCliqueContains = document.getElementById("maxCliqueContains").innerHTML;
g_wrongImageFormatPNGAndJPEG = document.getElementById("wrongImageFormatPNGAndJPEG").innerHTML;
g_wrongImageSizeP1 = document.getElementById("wrongImageSizeP1").innerHTML;
}
function formatString(string, params) {
return string.replace(/{(\d+)}/g, (match, index) => {
return typeof params[index] !== 'undefined' ? params[index] : match;
});
}

25
tpl/home.php
View File

@ -11,7 +11,7 @@
<script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
<script src="<?= Root("script/canvas2svg.js")?>" ></script>
<script src="<?= Root("script/example.js?v=72")?>" ></script>
<script src="<?= Root("script/example.js?v=73")?>" ></script>
<!-- Yandex.RTB -->
<script>window.yaContextCb=window.yaContextCb||[]</script>
@ -654,7 +654,7 @@
<div id="SetupBackgroundStyleDialog">
<form>
<fieldset>
<fieldset>
<div class="form-group row">
<label for="bacgkroundColor" class="col-sm-5 col-form-label"><?= L('color') ?></label>
<div class="col-sm-5">
@ -667,10 +667,27 @@
<input type="range" min="0" max="1" step="0.1" id="backgroundTransporent">
</div>
</div>
<div class="form-group row">
<label for="formFile" class="col-sm-5 col-form-label"><?= L('background_image') ?></label>
<div class="col-sm-7">
<input type="file" id="ImportBackgroundImage" accept=".jpg;.png;.jpeg" style="display:none">
<button type="button" id="LoadBackgroundFile" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
<?= L('upload') ?>
</button>
<button type="button" id="RemoveBackgroundFile" class="btn btn-default btn-xs" title="<?= L('remove_background_image') ?>">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
<!-- <input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" /> -->
<!-- <input class="form-control" type="file" id="backgroundFile"> -->
</div>
</div>
</fieldset>
</form>
<canvas id="BackgroundPreview" width="300" height="150"></canvas>
<canvas id="BackgroundPreview" width="300" height="150" style="border: 1px solid;"></canvas>
<div id="UploadBackgroundImageError" class="alert alert-danger" role="alert" style="display: none"></div>
</div>
<p id="SelectAndMoveObject" class="translation"><?= L('select_and_move_objects')?></p>
@ -872,6 +889,8 @@
<p id="maxCliqueSizeIs" class="translation"><?= L('max_clique_size_is')?></p>
<p id="maxCliqueContains" class="translation"><?= L('max_clique_contains')?></p>
<p id="wrongImageFormatPNGAndJPEG" class="translation"><?= L('wrong_image_background_format')?></p>
<p id="wrongImageSizeP1" class="translation"><?= L('wrong_image_background_size')?></p>
</section>
<!--
<script>