Image Labeling Tool APP Design & Development Dairy

XXXT805

已于 2022-02-27 20:25:06 修改

阅读量237

点赞数

文章标签： web app

于 2021-08-26 22:54:07 首次发布

本文链接：https://blog.csdn.net/qq_43346150/article/details/119940631

版权

本文介绍了如何使用Flask和PostgreSQL在Ubuntu上构建一个应用，实现后台数据库中图片的显示、全尺寸查看、切换以及前端使用Ionic和Angular进行上传和标签操作。涵盖了虚拟机设置、数据库管理、Flask API设计及前端组件的实践应用。

摘要由CSDN通过智能技术生成

1. Introduction

An App be able to:

Show images from backend database
Show image in full size
Switch for next/previous image by buttons
Upload image
Tag image and save changes to database

2. Main Structure

在这里插入图片描述

3. Backend

Flask + PostgreSQL running on Ubuntu.

3.1 Backend Structure:

backend
- gallery (images are saved in this folder)
- venv (virtual environment)
- api.py

3.2 VirtualBox Set up

Download Oracle VM VirtualBox
Download Ubuntu Mirror
Set static IP address for VirtualBox
How to share files between Windows and VirtualBox

3.3 Set up PostgreSQL database on Ubuntu

Download PostgreSQL on Ubuntu
Download pgAdmin4 (Open Source administration and development platform for PostgreSQL, convenient for database operation)
How to backup/restore database in pgAdmin4

3.4 Flask

Install Flask on Ubuntu
Create a Virtual Environment for Flask
Start a smallest Flask App
Use SQLAlchemy to operate database:
- pip install psycopg2
- pip install flask-sqlalchemy
- Define data model
- Define api for add/query/delete/change data
References:

3.5 Set up Tomcat to read image by path on Windows

Ubuntu下使用Tomcat通过路径直接访问图片

4. Frontend

Ionic + Angular running on Windows.

4.1 Structure

app
- pages
  - gallery
  - gallery-detail
  - upload-img
- services
  - gallery.service
  - img.model.ts

4.2 Basic Ionic + Angular

Practise: First App
Ionic tutorial
Typescript tutorial
- https://www.youtube.com/watch?v=WBPrJSw7yQA
- https://www.runoob.com/typescript/ts-tutorial.html
- https://zhuanlan.zhihu.com/p/63346965
- https://zhuanlan.zhihu.com/p/39246495

4.3 HTTPClient Module Usage

Use HttpClient Module of Ionic to send http request

4.4 Echarts Usage

Echarts Documentation
使用 ECharts 与 Ionic 创建原生应用
使用SVG Path自定义水球图形
- Choose ector icons & stickers：https://www.flaticon.com/

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

@Component({
  selector: 'app-recipes-loading',
  templateUrl: './recipes-loading.page.html',
  styleUrls: ['./recipes-loading.page.scss'],
})
export class RecipesLoadingPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  ionViewDidEnter() {
    const ec = echarts as any;
    const container = document.getElementById('chart');
    const chart = ec.init(container);
    const svgPath = 'path://M725.536321 1024H298.88352a127.99584 127.99584 0 0 1-127.99584-127.99584v-388.254049A213.3264 213.3264 0 0 1 213.55296 85.363839a216.31297 216.31297 0 0 1 109.223117 29.865696 213.3264 213.3264 0 0 1 378.867687 0A216.31297 216.31297 0 0 1 810.866881 85.363839a213.3264 213.3264 0 0 1 42.66528 422.386272V896.00416a127.99584 127.99584 0 0 1-127.99584 127.99584zM256.21824 810.6736v85.33056a42.66528 42.66528 0 0 0 42.66528 42.66528h426.652801a42.66528 42.66528 0 0 0 42.66528-42.66528v-85.33056z m406.600119-85.33056H768.201601v-255.991681a42.66528 42.66528 0 0 1 42.66528-42.66528 127.99584 127.99584 0 1 0-97.276839-211.193136 42.66528 42.66528 0 0 1-73.384281-21.33264 127.99584 127.99584 0 0 0-255.991681 0 42.66528 42.66528 0 0 1-74.66424 21.33264A127.99584 127.99584 0 1 0 213.55296 426.686079a42.66528 42.66528 0 0 1 42.66528 42.66528v255.991681h109.64977v-127.99584a42.66528 42.66528 0 0 1 85.33056 0v127.99584h127.99584v-170.66112a42.66528 42.66528 0 0 1 85.33056 0z';

    chart.setOption({
      series: {
        type: 'liquidFill',
        data: [1, 0.9, 0.8, 0.7, 0.6],
        shape: svgPath,
        outline: {
          show: false
        },
        radius: 193.175,
        label: {
          normal: {
            show: false,
            formatter: ''
          }
        }
      }
    });
  }
}