Added background image support

lang/bg/home.php

@@ -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.";    
 ?>

lang/ch/home.php

@@ -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.";    
 ?>

lang/cs/home.php

@@ -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.";    
 ?>

lang/de/home.php

@@ -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.";    
 ?>

lang/el/home.php

@@ -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 περιέχει βάρος ελάχιστων άκρων μεταξύ κορυφών.";
 
@@ -298,4 +298,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.";    
 ?>

lang/en/home.php

@@ -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.";
 
@@ -302,4 +302,11 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</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.";
 ?>

lang/es/home.php

@@ -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.";    
 ?>

lang/fr/home.php

@@ -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.";    
 ?>

lang/nl/home.php

@@ -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.";    
 ?>

lang/pl/home.php

@@ -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.";    
 ?>

lang/pt/home.php

@@ -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.";    
 ?>

lang/ru/home.php

@@ -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} пикселей.";    
 ?>

lang/sv/home.php

@@ -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.";    
 ?>

script/Application.js

@@ -897,7 +897,7 @@ Application.prototype.onLoad = function()
 {
     this.canvas = this.document.getElementById('canvas');
 
-    this.SetDefaultHandler();
+    this.SetDefaultHandler()
 
     this.updateMessage();
     this.redrawGraph();
@@ -1602,7 +1602,15 @@ Application.prototype.SaveUserSettings = function()
             if (needEnd)
                 res = res + ",";
 
-            res = res + "\"" + entry.field + "\"" + ":" + JSON.stringify(entry.value);
+            let valueJson = "";
+            if (typeof entry.value.saveToJson === "function") {
+                valueJson = entry.value.saveToJson();
+            } else {
+                valueJson = 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();
 

script/BaseBackgroundDrawer.js

@@ -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;
+        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)
 }

script/EventHandlers.js

@@ -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,11 +2406,43 @@ 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'
 	});
     
+    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);
 }

script/texts.js

@@ -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;
+    });
+  }

tpl/home.php

@@ -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>
@@ -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>