"Classer les déchets par image!" Journal de création d'application day5 ~ Préparez le frontal avec Bootstrap 2 ~

introduction

"Classer les déchets par image!" Aujourd'hui, au 5ème jour du journal de création de l'application, j'aimerais utiliser Bootstrap pour préparer le front-end.


Liste d'articles

Synopsis jusqu'à la dernière fois

Dans les articles précédents, j'ai implémenté une application de reconnaissance d'image, l'ai mise sur Django, et même préparé le front-end. Dans cet article, j'ajouterai des fonctionnalités et modifierai les fichiers views.py et modèles en conséquence.

Fonctions à ajouter

Les fonctions à ajouter sont les suivantes.

--Exécution avec exemple d'image

Exécution avec exemple d'image

Tout d'abord, permettez à l'image d'être affichée sous forme de lien dans l'index.

garbage/templates/garbage/index.html


		<h4>Utiliser des images existantes</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>

En tant que routage

garbage/urls.py


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

De cette manière, ils sont passés à différentes fonctions. Initialement passé en tant que <a href="{% url "garbage:sample" num: 1%} "> en tant que paramètre path (" sample / <int: num> ", views.sample, name =" sample " Je pense qu'il devrait être traité comme "),, mais comme le chemin de l'image sur la page de destination de la transition est spécifié comme chemin relatif, cela est fait parce que le lien devient étrange. Je voudrais donc améliorer s'il existe un moyen de charger un dossier statique d'images.

Et le fichier de vue ressemble à ceci: Je voudrais le combiner avec le résultat s'il peut être passé en paramètre, mais je voulais le faire fonctionner pour le moment, donc c'est gênant, mais cela prend la forme spécifiée ici.

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)

Implémentation du menu latéral

Ici, nous allons définir en HTML et CSS. Tout d'abord, comment écrire du HTML est la suivante (le lien omet le paramètre de requête).

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">Liens externes</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">Recherche triée</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">Comment séparer et éliminer les déchets</a>
			</div>

Tout d'abord, j'essaie de placer deux types de choses dans le menu latéral, et j'essaie de faire de la classification des liens un bouton qui ne peut pas être pressé avec un fond gris, et le lien un bouton avec une bordure en pointillé. Je vais. L'élément p est un bouton sombre et Bootstrap spécifie que les coins sont accentués et que la couleur est définie. Le lien est configuré pour s'ouvrir dans un autre onglet.

D'autre part, définissez CSS comme suit.

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 ;
}

Puisqu'il n'est pas possible de définir la largeur à 90% et la bordure en pointillé avec Bootstrap, écrivez-le avec CSS. Aussi, pour les boutons qui ne peuvent pas être pressés, il est déroutant s'ils deviennent des pointeurs ou si la couleur d'arrière-plan change, j'ai donc écrit un paramètre qui écrase la pseudo-classe arbitrairement spécifiée par Bootstrap. (La raison pour laquelle Bootstrap crée un bouton même si vous faites cela est parce que le bouton est utilisé pour le lien, donc il sera meilleur si vous faites également le bouton de classification en conséquence)

Implémentation du pied de page

Comment écrire du HTML est la suivante.

garbage/templates/garbage/index.html


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

Pour cela, appliquez CSS comme suit

garbage/static/garbage/css/style.css


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

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

En définissant min-height, le pied de page ne peut pas flotter. Cela vous empêche également de le porter lorsque vous le faites défiler avec padding-bottom. De plus, en définissant «position» sur «relative» et le pied de page sur «absolu», il sera affiché dans une position fixe.

L'écran équipé des trois fonctions ci-dessus ressemble à ceci.

ps-3.png ps-4.png

enfin

Cette fois, je n'ai pas pu écrire grand-chose à ce sujet parce que c'était comme prendre les oreilles. Au contraire, pour chaque fonction, il est possible d'écrire des articles détaillés pour chacune, et je pense qu'il y a plus de demande, mais comme c'est un journal de développement, j'ai parfois envie d'écrire des articles en fonction de mon rythme de travail. Je suis vraiment inquiet de ce qu'il faut faire.

La prochaine fois, je pense à prendre en charge les smartphones dans la barre latérale!


Liste d'articles

Recommended Posts

"Classer les déchets par image!" Journal de création d'application day5 ~ Préparez le frontal avec Bootstrap 2 ~
"Classer les déchets par image!" Journal de création d'application day4 ~ Préparez le frontal avec Bootstrap ~
"Classer les déchets par image!" Journal de création d'application day2 ~ Mise au point avec VGG16 ~
"Classer les déchets par image!" Journal de création d'application jour1 ~ Création de l'ensemble de données ~
"Classification des déchets par image!" Journal de création d'application jour3 ~ Application Web avec Django ~
"Classer les déchets par image!" Journal de création d'application day8 ~ déploiement heroku ~
"Classer les déchets par image!" Journal de création d'application jour6 ~ Correction de la structure des répertoires ~
Tutoriel Django (Créer une application de blog) ⑦ --Front End Complete