電子工作ヒヤリハットその2

Flask 電子工作ヒヤリハット

単独でWEBアプリを作成する事にした
フレームワークはFlaskを使う

選んだ理由として新しいものに挑戦したい
Djangoより簡単そうだから

まずはページのイメージ図を作るとこから始める

2022-09-26

電子工作作業報告書その58

Django 電子工作作業報告書管理　EWRN

実際にモデル作成models.pyを作っていく

モデル作成にはモデル定義書が必要になる
まずはそのモデル定義書を作成する事になる

models.pyを作る上で必要となる用語がいくつか出てくる
・null：データベース上でnullを許容するかどうか
・blank：ユーザーが入力項目として必須とするか
・IDの自動生成：idはdjangoで自動生成される。
・外部キー：必要であれば付ける

またER図を作成し、テーブル同士の関係性が分かるようにしたい

ER図を作る時のコツは、テーブルの項目を列記する

列記したあとに、主キーと外部キーを決める。

最後に
テーブル同士を線でつなぐ

まずは、ER図で関係性を可視化する

これがEWRNのER図

2022-09-09

電子工作作業報告書その57

電子工作作業報告書管理　EWRN

ewrn2のテーブルの書き出し作業から正規化作業まで

まずはテーブルの書き出しから

主キーである「作業名」「作業日」に注目してみる

それが出来れば第2正規化で重複していたデータの分離をする

そうすると作業情報、登録情報、道具情報テーブルに分けることが出来る

第3正規化で主キー「作業日」「作業日」以外に関数従属する項目を切り出す

最終的に作業情報、登録情報、道具情報、写真情報の4つのテーブルになった

上記の4つの表からキーを決める

データの種類を考える

種類が決まったらデータの大きさ(桁数)を決め

最後にデータ型を決定する　これで正規化作業は終わり

正規化まで出来たので、次回は、実際にモデル作成models.pyを作っていく
あとヒヤリハットのアプリは単独のアプリにする
理由としては、本来ヒヤリハットはハットと思われる出来事を記録するため

2022-09-09

電子工作作業報告書その56

電子工作作業報告書管理　EWRN

登録内容確認ページで
1から10までの項目を本来の入力したデータを表示させる様に
コードを変えていく予定だったが、

モデルの作成が必要だと判明したので

データベースの正規化をEWRN2用に書き換えて

そこからモデル定義書を作成し、それをもとにモデル作成をする

モデルの項目としては以下のような内容に
・作業名
・分類
・気付いた事
・作業内容
・備考
・作業日
・登録日
・状況写真
・使用した工具
・使用したソフト
・使用した部品

次回は、実際に上記のテーブルの書き出しから正規化までを作成する

2022-09-08

電子工作ヒヤリハットのWEBアプリ作成その1

電子工作ヒヤリハット

作成経緯として昨今のヒヤリハットが
原因で死亡事故や事故になったケースが多いので、
電子工作でもこれが原因で回路が動かないや
プログラムが動作しないなど起きそうな事が起こりそうなので作成しようと思った

しかし、現在開発途中のEWRN(電子工作作業報告書WEBアプリ)に
新しく組み込むか単独でWEBアプリにするか迷う

組み込むならばデータベースから組み直す必要が
出てくる

悩みどころではあるが。。どうするかな

2022-09-04

電子工作作業報告書その55

CSS 電子工作作業報告書管理　EWRN

登録内容確認ページについて紹介する

これは、データ入力1から3までに入力した各データに
間違いが無いかを確認したがために作成したページ

見た目として表形式で表示させる

CSS無しverだとこんな感じに

CSSで調整するとこんな感じになる

/* EWRN登録内容確認画面のCSS 2022-9-2作成
ボタンは作業日のinputより左下に配置 */


/* "登録しますか"のテキスト位置調整 */
.data_text {
    position: absolute;
    left: 250px;
    top: 20px;
    transform: translateX(-25%);
}


/* 詳細表の位置調整 */
.details_table {
    width: 20%;  /* 横幅 */
    margin: 115px auto; /* 上下115px 左右auto */
}


/* "報告する"ボタンの位置調整 */
.btn {
    position: relative;
    left: 1300px;
    top: 130px;
}

/* "新規登録へ戻る"ボタンの位置調整 */
.form1_backbtn {
    position: relative;
    left: 430px;
    top: 130px;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}

次回は、1から10までの項目を本来の入力したデータを表示させる
ようにコードを変えていく

2022-09-03

電子工作作業報告書その54

CSS 電子工作作業報告書管理　EWRN

今回は、フォーム2と3のCSSが完成したので、
適用後の見た目とCSSのコードを載せる

/* EWRN入力画面2のCSS 2022-8-19作成
ボタンは作業日のinputより左下に配置

*/

/* プログレスバー */
.js-progress-bar2 {
    position: absolute;
    width: 100%;  /* 横幅 */
    z-index: 1;
    left:50px;
    
}

/* 気付いた事のテキスト */
.ton_t {
    position: absolute;
    left: 15%;
    transform: translateX(-25%);
}

/* 気付いた事の複数行フォーム */
.textarea_b5 {
    position: relative;
    left: 50%;
    transform: translateX(-25%);
    border-color: #da0622;
    outline: none;
}

/* 状況写真のテキスト */
.sp_t {
    position: relative;
    left: 10%;
    top: 20px;

}

/* 作業日のテキスト */
.wk_t {
    position: relative;
    left: 270px;
    top: 70px;
}

.workday {
    position: relative;
    left:150px;
}

/* "入力欄クリア"ボタンの位置調整*/
.clearbtn {
    position: relative;
    left: 130px;
    top: 130px;
}

/* "入力3へ"ボタンの位置調整*/
.form3_nextbtn {
    position: relative;
    left: 430px;
    top: 130px;
    
}

/* "一覧へ戻る"ボタンの位置調整*/
.listbtn {
    position: relative;
    left: 280px;
    top: 130px;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}

フォーム3の画面CSS

/* EWRN入力画面3のCSS 2022-9-1作成
ボタンは作業日のinputより左下に配置
*/

/* プログレスバー */
.js-progress-bar3 {
    position: absolute;
    width: 100%;  /* 横幅 */
    z-index: 1;
    left:50px;
    
}

/* 使用した工具のテキスト */
.used_tools {
    width: 1400px;
    text-align: center;
}

/* 使用した工具の複数行フォーム */
.textarea_b6 {
    text-align: center;
}

/* 工具入力欄にカーソルがある時だけ色を変える */
.textarea_b6:focus { 
    background-color: #da0622;
    border: 2px solid #26af11;
}

/* */
.used_software{
    width: 1400px;
    text-align: center;
}

/* 使用したソフトの複数行入力フォーム */
.textarea_b7 {
    text-align: center;
}

/* */
.used_parts{
    width: 1400px;
    text-align: center;
}

/* 使用した部品の複数行入力フォーム */
.textarea_b8 {
    text-align: center;
}

/* "入力欄クリア"ボタンの位置調整*/
.clearbtn3{
    position: relative;
    left: 40px;
    
}

/* "内容確認"ボタンの位置調整*/
.reg_detail_nextbtn {
    position: relative;
    left: 1070px;
    
}

/* "一覧へ戻る"ボタンの位置調整 */
.listbtn {
    position: relative;
    left: 380px;
    
}

/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da; /* 紫色 */
}

以前よりだいぶ見栄えが良くなった

次回は、登録内容確認ページについて紹介する

余談だが、回路CADのライブラリパーツを確認するのに
わざわざ、回路CADを開いてライブラリパーツを確認してというのが
面倒なので専用データベースを作りたい　GUIを検討している

ryotankの備考録日記

趣味の電子工作についての備考録などなど