Django Image Processing Webapp Part II

Django

May 12, 2023

Django Image Processing Webapp Part II

In part I, we had only two options: Rotate and Transpose. In second part, we will add two drop down lists and other options so that the user can choose between many filters to process the image.

List of Filters
Adding Drop Down in html
Second Drop Down
Adding Basic filters list
- Adding range slider
Adding Spatial filters list
- Adding range slider
Adding Frequency Filters list
Git push

List of Filters

We have three types of filters.

Basic
Spatial Filters
Frequency Filters

Within Basic we want user to choose between following options.

Basic
- Bit Plane Slicing
- Power Transform
- Image Threshold
- Image Negative
- Histogram Equalization

For “Bit Plane Slicing”, “Power Transform” and “Image Threshold” we will ask the user for the extra input.

These options and the option for number input will be generated dynamically using javascript.

For the Spatial we will ask the user to choose between one of the following options.

Spatial Filters
- Smooth Filter
- Sharp Filter
- Min Filter
- Max Filter
- Median Filter
- High Boost Filter

We will also ask the use to enter the size of kernel for these filters.

For Frequency filters we will give the following options to the user.

Frequency Filters
- Low Pass Filter
- High Pass Filter

Adding Drop Down in html

To adding layers of drop down list and a place to input number, edit the templates/image_process.html as follows:

{% extends "base.html" %}
{% block content %}
{% load static %}




{% if object%}
<h1>Image uploaded</h1>
<img src="{{ object.image.url }}">
    {% if object.image_enhanced %}
    <img src="{{ object.image_enhanced.url }}">
    {% endif %}

    <form id="dropdown-form" method="post" url="">
        {% csrf_token %}
        <label for="first-dropdown">First Dropdown:</label>
    <select name="first-dropdown" id="first-dropdown">
      <option value="">Choose an option</option>
      <option value="1">Basic</option>
      <option value="2">Spatial</option>
      <option value="3">Frequency</option>
    
    </select>
    
    <!-- HTML code for the second dropdown menu -->
    <div id="second-dropdown-container"></div>
    
 
    
    <!--Input number -->
    <div id="number-input"></div>
    <button id="submit-button">Submit</button>
    </form>
    
{% endif %}
<script type="text/javascript" src="{% static 'js/script.js' %}"></script>
{% endblock content %}

Here, we have options for two drop down menu and a number input. We have added three options in out “first-dropdown”. We will add options dynamically in second drop down. We will also add the number input only when needed. This addition of drop down menu and number input will be handled dynamically by ‘script.js’.

The drop down will look as follow for now.

Add the second drop down according to value of first drop down.

Create a image_project/static/js/static.js.

// Get references to the dropdown menus and containers
const firstDropdown = document.getElementById("first-dropdown");
const secondDropdownContainer = document.getElementById("second-dropdown-container");
const thirdDropdownContainer = document.getElementById("third-dropdown-container");
const numberInputContainer = document.getElementById("number-input")
const selectButton = document.getElementById("submit-button")


let firstValue = 1
let secondValue = ""
let thirdValue = ""

// Add event listener to the first dropdown menu
firstDropdown.addEventListener("change", () => {
    // Remove any existing options from the second and third dropdown menus
    secondDropdownContainer.innerHTML = "";
    
  
    // Get the selected value from the first dropdown menu
    const selectedValue = firstDropdown.value;

    if (selectedValue === "1") {
        console.log("Basic Selected")
    }
    else if (selectedValue === "2"){
        console.log("Spatial Filter Selected")
    }

    else if (selectedValue === "3"){
        console.log("Frequency filter selected")
    }
})

For now we just check which option is selected in first drop down menu and print name of that option in javascript console.

Edit the Image/views.py to do something according to selected options of first drop down.

from django.shortcuts import render
from django.http import HttpResponse
from .models import ImageEnhance
from .forms import ImageForm

# Create your views here.


# Create your views here.
def imageHome(request):
       
    try:
        images = ImageEnhance.objects.all()
        
        return render(request,'image_home.html',{'images':images})
    except:
        return HttpResponse("We do not have any images to show you")
    
def imageForm(request):
    if request.method == 'POST':
        form = ImageForm(request.POST,request.FILES)
        if form.is_valid():
            #save the model instance
            instance = form.save(commit=False)
            
            instance.save()

            return render(request,"image_process.html",{"form":form,'object':instance})
        else:
            latest_object = ImageEnhance.objects.latest('id')
            process = request.POST["first-dropdown"]

            if process == '1':
                print("************Basic Selected")
                return HttpResponse("Basic Selected")

            elif process == '2':
                print("************ Spatial Filter Selcted")
                return HttpResponse("Spatial Filter Selected")
            elif process == '3':
                print("************ Freuency Filter Selected")
                return HttpResponse("Frequency Filter Selected")

        
    else:
        form = ImageForm()

    return render(request,"image_form.html",{'form':form})

Now, we will be redirected to a message according to the different options selected.

Add Options in second level drop down menu for Basic filters.

Add the list of basic filters in script.js

const basicFilters = ["Select an option","Bit Plane Slicing",'Power Transform','Image Threshold','Image Negative','Histogram Equalization']

Now, loop through all the options in above array, to add them as the list of second drop down.

.............................................
if (selectedValue === "1") {
        console.log("Basic Selected")
        firstValue = 1
        const secondDropdown = document.createElement("select");
        secondDropdown.setAttribute("name","second-dropdown");

        var options = [];

        
        for (index = 0; index < basicFilters.length; index++) {
            console.log(basicFilters[index]);
            options[index] = document.createElement("option");
            options[index].value = "1a";
            options[index].textContent = basicFilters[index];
            secondDropdown.appendChild(options[index]);
        
        }

        secondDropdownContainer.appendChild(secondDropdown);

    }

.................................................................

We will also add a range slider for few filters.

Adding more to script.py

.....................................................................
if (selectedValue === "1") {
        console.log("Basic Selected")
        firstValue = 1
        const secondDropdown = document.createElement("select");
        secondDropdown.setAttribute("name","second-dropdown");

        var options = [];

        
        for (index = 0; index < basicFilters.length; index++) {
            console.log(basicFilters[index]);
            options[index] = document.createElement("option");
            options[index].value = "1"+String.fromCharCode(65+index);
            console.log("1"+String.fromCharCode(65+index));
            options[index].textContent = basicFilters[index];
            secondDropdown.appendChild(options[index]);
        
        }


        secondDropdownContainer.appendChild(secondDropdown);

        secondDropdown.addEventListener("change",() => {
            secondValue = secondDropdown.value

            if(secondValue === "1B"){
                console.log(basicFilters[1])

                //following line of code is to remove any other div set by other options
                while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);

                  }

                  //the range of numbers that we want user to enter in case of bitplane slicing is 1-8
                  //we will add the number slider (range 0-8) 

                  var numInput = document.createElement("INPUT");
                    numInput.setAttribute("type", "range");
                    numInput.setAttribute("name","num-Input");
                    numInput.setAttribute("min","0");
                    numInput.setAttribute("max","8");
                    numInput.setAttribute("value","5");
                    numInput.setAttribute("step","1")
                   
                    numInput.setAttribute("oninput","this.value")
            
                    var showValue = document.createElement("output");
            
                    numberInputContainer.appendChild(numInput)
                    numberInputContainer.appendChild(showValue);
                    showValue.innerText = numInput.value;
                    numInput.setAttribute("oninput","this.nextElementSibling.innerText = this.value")
            
                    numberValue = numInput.value

                

            }

            else if(secondValue === "1C"){
                console.log(basicFilters[2]);


                //following line of code is to remove any other div set by other options
                
                  while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);

                  }
                  //the range of numbers that we want user to enter in case of power trasnform is 0-2 with the step size of 0.1
                  //we will add the number slider (range 0-8) 

                  var numInput = document.createElement("INPUT");
                    numInput.setAttribute("type", "range");
                    numInput.setAttribute("name","num-Input");
                    numInput.setAttribute("min","0");
                    numInput.setAttribute("max","2");
                    numInput.setAttribute("value","1.1");
                    numInput.setAttribute("step","0.1")
                   
                    numInput.setAttribute("oninput","this.value")
            
                    var showValue = document.createElement("output");
            
                    numberInputContainer.appendChild(numInput)
                    numberInputContainer.appendChild(showValue);
                    showValue.innerText = numInput.value;
                    numInput.setAttribute("oninput","this.nextElementSibling.innerText = this.value")
            
                    numberValue = numInput.value

            }

            else if(secondValue === "1D"){
                console.log(basicFilters[3]);

                //following line of code is to remove any other div set by other options
                
                while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);

                  }
                  //the range of numbers that we want user to enter in case of Threshold is 10-240 with the step size of 1
                  //we will add the number slider (range 0-8) 

                  var numInput = document.createElement("INPUT");
                    numInput.setAttribute("type", "range");
                    numInput.setAttribute("name","num-Input");
                    numInput.setAttribute("min","10");
                    numInput.setAttribute("max","240");
                    numInput.setAttribute("value","150");
                    numInput.setAttribute("step","1")
                   
                    numInput.setAttribute("oninput","this.value")
            
                    var showValue = document.createElement("output");
            
                    numberInputContainer.appendChild(numInput)
                    numberInputContainer.appendChild(showValue);
                    showValue.innerText = numInput.value;
                    numInput.setAttribute("oninput","this.nextElementSibling.innerText = this.value")
            
                    numberValue = numInput.value

            }

            else if(secondValue === "1E"){
                console.log(basicFilters[4]);

                //following line of code is to remove any other div set by other options
                
                while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);

                  }

                //We are not asking user to enter any number in case of Negative Image


            }

            else if(secondValue === "1F"){
                console.log(basicFilters[5]);
                //following line of code is to remove any other div set by other options
                
                while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);

                  }

                //We are not asking user to enter any number in case of Histogram Equlization

            }

            else if(secondValue === '1A'){

                //following line of code is to remove any other div set by other options
                
                while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);

                  }

            }


        })



    }

..........................................................................

Rang Slider for bit plane slicing

Range Slider for Power Transform

Range Slider for Threshold

Add Options in second level drop down menu for Spatial filters.

Add the list of spatial filters in script.js

.............................................................
const spatialFilters = ["Select an option","Smooth Filter","Sharp Filter","Min Filter","Max Filter","Median Filter","High Boost Filter"]
.............................................................

Following code will all the options in second drop down for Spatial filters.

........................................................
else if (selectedValue === "2"){
        console.log("Spatial Filter Selected")
        
        firstValue = 2
        const secondDropdown = document.createElement("select");
        secondDropdown.setAttribute("name","second-dropdown");

        var options = [];

        
        for (index = 0; index < spatialFilters.length; index++) {
            console.log(spatialFilters[index]);
            options[index] = document.createElement("option");
            options[index].value = "2"+String.fromCharCode(65+index);
            console.log("2"+String.fromCharCode(65+index));
            options[index].textContent = spatialFilters[index];
            secondDropdown.appendChild(options[index]);
        
        }


        secondDropdownContainer.appendChild(secondDropdown);
    }
......................................................................

We will add range slider for user to input the kernel size


...................................................................

function kernelSetter() {
    console.log("---------kernel setter")
    var numInput = document.createElement("INPUT");
                numInput.setAttribute("type", "range");
                numInput.setAttribute("name","num-Input");
                numInput.setAttribute("min","3");
                numInput.setAttribute("max","12");
                numInput.setAttribute("value","3");
                numInput.setAttribute("step","1")
               
                numInput.setAttribute("oninput","this.value")
        
                var showValue = document.createElement("output");
        
                numberInputContainer.appendChild(numInput)
                numberInputContainer.appendChild(showValue);
                showValue.innerText = numInput.value;
                numInput.setAttribute("oninput","this.nextElementSibling.innerText = this.value")
        
                numberValue = numInput.value

                return numberValue
    
  }
....................................................................
secondDropdown.addEventListener("change",() => {
            secondValue = secondDropdown.value
            if(secondValue){
                console.log(spatialFilters[1])
    
                //following line of code is to remove any other div set by other options
                while(numberInputContainer.hasChildNodes()){
                    numberInputContainer.removeChild(numberInputContainer.children[0]);
    
                  }
    
                  //the range of numbers that we want user to enter in case of bitplane slicing is 1-8
                  //we will add the number slider (range 0-8) 
                  numberValue = kernelSetter()  
                  console.log("-------------"+secondValue)
                  console.log("-------------"+numberValue)

    
            }

            
        
        
        })
......................................................

Range slider for various options

Add Options in second level drop down menu for Frequency filters.

.............................................................
const frequencyFilters = ["Select an option","Low Pass","High Pass"]
.............................................................

.............................................................
else if (selectedValue === "3"){
        console.log("Frequency filter selected")
        
        
        firstValue = 3
        const secondDropdown = document.createElement("select");
        secondDropdown.setAttribute("name","second-dropdown");

        var options = [];

        
        for (index = 0; index < frequencyFilters.length; index++) {
            console.log(frequencyFilters[index]);
            options[index] = document.createElement("option");
            options[index].value = "3"+String.fromCharCode(65+index);
            console.log("3"+String.fromCharCode(65+index));
            options[index].textContent = frequencyFilters[index];
            secondDropdown.appendChild(options[index]);
        
        }


        secondDropdownContainer.appendChild(secondDropdown);


    }
...............................................................

When Frequency is selected in first drop down

Git Push

#Terminal
git add .
git commit -m "Filters and other options added dynamically"
git push

So we are done with creating dynamic options for users to apply various filters using JavaScript.

In Part III, we will handle these inputs and process our images accordingly.

pontu

Django Image Processing Webapp Part II

Table of Contents

List of Filters

Adding Drop Down in html

Add the second drop down according to value of first drop down.

Add Options in second level drop down menu for Basic filters.

We will also add a range slider for few filters.

Rang Slider for bit plane slicing

Range Slider for Power Transform

Range Slider for Threshold

Add Options in second level drop down menu for Spatial filters.

We will add range slider for user to input the kernel size

Range slider for various options

Add Options in second level drop down menu for Frequency filters.

When Frequency is selected in first drop down

Git Push

Categories

Recent Posts