"Classify garbage by image!" App creation diary day5 ~ Prepare front end with Bootstrap 2 ~

Introduction

"Classify garbage by image!" Today on the 5th day of the application creation diary, I would like to use Bootstrap to prepare the front end.

Article list

-"Trash classification by image!" App creation diary day1 ~ Data set creation ~ -"Trash classification by image!" App creation diary day2-Fine-tuning with VGG16- -"Trash classification by image!" App creation diary day3 ~ Web application with Django ~ -"Trash classification by image!" App creation diary day4 ~ Prepare the front end with Bootstrap ~ -"Trash classification by image!" App creation diary day5-Prepare front end with Bootstrap 2- ← Imakoko -"Trash classification by image!" App creation diary day6 ~ Correction of directory structure ~

Synopsis up to the last time

In the previous articles, I implemented an image recognition application, put it on Django, and even prepared the front end. In this article, I'll add features and tweak the views.py and template files accordingly.

Functions to add

The functions to be added are as follows.

--Execution with sample images --Side menu implementation --Footer implementation

Execution with sample image

First, let's display the image as a link in the index.

garbage/templates/garbage/index.html

		<h4>Use existing images</h4>
		<div class="container row">
			<div class="col-md-6 p-3">
				<a href="{% url "garbage:sample1" %}">
					<img src="./media/images/temp1.jpg " alt="Image 1" class="sample-img">
				</a>
			</div>
			<div class="col-md-6 p-3">
				<a href="{% url "garbage:sample2" %}">
					<img src="./media/images/temp2.jpg " alt="Image 2" class="sample-img">
				</a>
			</div>
		</div>

As a routing

garbage/urls.py

    path("sample1", views.sample1, name="sample1"),
    path("sample2", views.sample2, name="sample2"),

In this way, they are passed to different functions. Originally, pass it as a parameter as <a href="{% url "garbage:sample" num: 1%} "> and path ("sample / <int: num>", views.sample, name = "sample" I think that it should be processed as "),, but since the path of the image on the transition destination page is specified as a relative path, this is done because the link becomes strange. So I would like to improve if there is a way to load a static folder of images.

And the view file looks like this: I would like to combine it with result if it can be passed as a parameter, but I wanted to make it work for the time being, so it is awkward, but it takes the form specified here.

garbage/views.py

def sample1(request):
    img = "./media/images/temp1.jpg "
    pred = predict(img)

    params = {
        "img":img,
        "pred":pred
    }
    return render(request, "garbage/result.html", params)

Side menu implementation

Here we will set in HTML and CSS. First, how to write HTML is as follows (link omits request parameters).

garbage/templates/garbage/index.html

		<div class="container row">
			<div class="card col-md-4 py-4 px-0 d-none d-md-block">
				<p role="button" class="mb-2 btn border-dark rounded-0 btn-secondary">External links</p>
				<a href="https://manage.delight-system.com/threeR/web/bunbetsu" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">Sorted search</a>
				<a href="https://manage.delight-system.com/threeR/web/benri" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">How to separate and dispose of garbage</a>
			</div>

First of all, I'm trying to place two types of things in the side menu, and I'm trying to make the link classification a button that can not be pressed with a gray background, and the link a button with a dotted border. I will. The p element is a dark button, and Bootstrap specifies that the corners are sharpened and the color is set. Regarding the link, the setting to open it in another tab is written.

On the other hand, set the CSS as follows.

garbage/static/garbage/css/style.css

a[role="button"]{
	width: 90%;
	border: dotted 1px;
}

p[role="button"]{
	width: 90%;
}

p[role="button"]:not(:disabled):not(.disabled) {
    cursor: default;
}
p[role="button"]:hover{
	background-color: #6c757d ;
}

Since it is not possible to set width 90% and border to dotted line with Bootstrap, write it with CSS. Also, for buttons that cannot be pressed, it is confusing if it becomes a pointer or the background color changes, so I wrote a setting that overwrites the pseudo class specified arbitrarily by Bootstrap. (The reason why Bootstrap makes a button even if you do this is because the link uses the button, so it will look better if you also make the classification button accordingly)

Footer implementation

How to write HTML is as follows.

garbage/templates/garbage/index.html

		<footer>
			<p id="copyright" class="mb-0">Copyright &copy; 2020 eycjur All Rights Reserved.</p>
		</footer>

For this, apply CSS as follows

garbage/static/garbage/css/style.css

#wrapper{
	min-height: 100vh;
	position: relative;
	padding-bottom: 40px;
}

footer{
	position: absolute;
	bottom: 0;
	width: 100%;
}

By setting min-height, the footer is prevented from floating. Also, it prevents wearing when scrolling all with padding-bottom. Also, by setting position to relative for the parent element and absolute for the footer, it will be displayed at a fixed position.

The screen equipped with the above three functions looks like this.

finally

This time, I couldn't write much about it because it was like a gleaning. On the contrary, for each function, it is possible to write detailed articles for each, and I think that there is more demand, but since it is a development diary, I sometimes want to write articles according to my work pace. I'm really worried about what to do.

Next time, I'm thinking about supporting smartphones in the sidebar!

Article list

-"Trash classification by image!" App creation diary day1 ~ Data set creation ~ -"Trash classification by image!" App creation diary day2-Fine-tuning with VGG16- -"Trash classification by image!" App creation diary day3 ~ Web application with Django ~ -"Trash classification by image!" App creation diary day4 ~ Prepare the front end with Bootstrap ~ -"Trash classification by image!" App creation diary day5 ~ Prepare front end with Bootstrap 2 ~ ← Imakoko -"Trash classification by image!" App creation diary day6 ~ Correction of directory structure ~