MotoJapan's Tech-Memo

技術めも

自宅IT

【python】OCR(tesseract-ocr / pyocr)で賞味期限を読み取る(画像→数列) 【お家IT#19】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 OCRとは tesseract-ocr / pyocrとは インストール 使い方と実装 pyocr.builders tesseract_layout (pagesegmode) 実装 結果 前回は、バーコード画像から商品情報を取得するところ…

【python】Yahoo Web APIでバーコード情報(JAN)から商品名を読み出す(数列→商品情報) 【お家IT#18】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 取得方法のアイディア 1.スクレイピングする方法 BeautifulSoup4 をインストール 実装 結果 2.WebAPIで検索する方法(種類) Product Advertising API (Amazon Web Services) 楽…

【python】zbarでバーコードを読み取る(画像→数列) 【お家IT#17】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 バーコードとは 環境 zbarインストール インストール時のトラブルシューティング 「error: command 'arm-linux-gnueabihf-gcc' failed with exit status 1」がインストール時に出…

【Javascript】非同期実行を実装し、ボタンを押したフィードバックを全画面に行う 【お家IT#16】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 そもそもの問題 非同期にする方法 実装 前回までで、javascript/CSSを用いて撮影画面を作成した。 最後にUIの完成度を高めたいので撮影ボタンを押したらバックグラウンド全体が青…

【CSS】接頭句の違い "#"と"." 【お家IT#15】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 前回は、ボタンの透過度を設定した。 今回は、基礎的な話でなんとなく使っていたCSSの接頭句の違いを書く。 前々回のコードをコピーしたのが下記。"."で開始するstyleは、classに…

【CSS】半透明(透明度)の設定方法 【お家IT#14】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 完成イメージ 実装 結果 前回は、レイアウトの重ね合わせを実装した。 今回は、ボタンの透過度を設定したい。 完成イメージ 前回からの続きだが、ボタンが透過して下レイヤーの映…

【Javascript / CSS】divタグでcanvas等のレイアウトを重ねる方法 【お家IT#13】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 完成イメージ 基本方針 div要素で重ねわせ方法と実装 ポイント 実装 結果 前回は、カメラ撮影枠を作成するために、カメラリソースの切り替えによるVideo要素のサイズ変化を検出し…

【Javascript】カメラ起動前後のvideoタグのサイズ変化を検出する 【お家IT#12】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 具体例:Video要素のプレビューの中央に撮影領域を作りたい 実装:Video要素のサイズ変化を検出、確定時のサイズを取得 前回は、UserMediaのカメラリソースを切り替えるなどの話…

【Javascript】カメラ(インカメラ/アウトカメラ)を切り替える方法 【お家IT#11】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp 目次 参考資料 MediaDeviceInfoの解説とUserMediaの使い方手順 前回からWebカメラ周り(Video要素やwebRTC, UserMedia)の操作を進めていたが、カメラリソース周りを今回進める。 やり…

【Javascript】video/canvasを上下180度反転(回転)させる方法 【お家IT#10】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 Videoの回転 Canvasの回転 参考資料 前回までの投稿でバックエンドとフロントエンドの通信周りは整理した。 ここからはWebカメラの操作を進める。今回は、video/canvasを上下180…

【flask to Javascript】jsonデータを送信/受信する方法(jsonify) 【お家IT#9】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 送信側実装 (python:flask) 受信側実装 (javascript) 前回までで、javascript->flaskへbase64を送信した。 これを画像処理して、その結果を返信するときjsonだと汎用性も高い。 …

【flask】Replyヘッダーに「Access-Control-Allow-Origin」を追加する【お家IT#8】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 対策 参考資料 前回は、base64でバックエンドに画像を送信したが、次のエラーが表示れている。 XMLHttpRequest cannot load https://192.168.0.100:12345/hoge_image_processing.…

【Javascript to flask】base64で画像を送信/受信する方法 【お家IT#7】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 base64とは 送信側実装(Javascript) 受信側実装(python : flask) 参考資料 前々回、ChromeでWebカメラを起動/撮影した後、Canvasに書き出すところまで進めた。 前回は、Ajaxを利…

【Javascript to flask】FormDataを送信/受信する方法 【お家IT#6】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 送信側実装(Javascript) 受信側実装(python : flask) 対応関係 前回まででWebカメラで撮影した画像をCanvas領域にコピーするところまで終えた。 が、根本的にJavascript - python…

【flask】https対応Webサーバーをバックグランド実行する方法 【お家IT#5】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 標準入力をバックグラウンドで無視すると落ちる バックグラウンド実行対策 参考資料 標準入力をバックグラウンドで無視すると落ちる 前回 flaskをhttps化 (http over ssl)したが…

【flask】Webサーバーをhttps対応する方法 【お家IT#4】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 SSL対応の手順 秘密鍵を作成 秘密鍵から公開鍵を作成 デジタル証明書を作成 flask上でHTTPSサーバー起動 おまけ JavascriptからWebカメラを起動しようとしたら下記コードで怒られ…

【Javascript】Webカメラを起動&撮影する 【お家IT#3】

本件の実装の一部 motojapan.hateblo.jp カメラ起動 参考にした記事① 参考にした記事② カメラ撮影 Webアプリ上でHTML+JSでWebカメラを動作させたい。 私の場合、それほど特殊なWebカメラの使い方をするわけでもないし、こういった類の記事は山のようにあるの…

【お家IT#2】Webアプリと画像認識で家の食品名と賞味期限を簡単に登録したい(構想編)

下記記事の続きです。 motojapan.hateblo.jp 構想 Google Spreadsheetを探して、食品名と賞味期限を手入力するのは、実は結構めんどくさい。 なので、Webアプリ開発と画像認識の勉強も兼ねて、下のような構成を構想。 写真を撮影すると商品情報が取得でき、…

【Raspberry Pi 3】sambaサーバーが接続できないときのハマリポイントまとめチェック

久しぶりにsambaを入れたらうまく動かないとか、ubuntu16.04ではsambaサーバーが動いていたのに、raspberry pi 3ではうまくいかないときのためのチェック項目 基本手順 インストール 設定変更 sambaを再起動 【チェック1】sambaが起動しているか確認する 【…

【お家IT#1】 googleスプレッドシートで管理した賞味期限リストをGASでメールで定期通知してみた

GAS(Google Apps Script)という、Google製サービス上で動くJavascript互換のスクリプトを初めて触ってみた。家の課題を解決するために。 課題:家の調味料や保存食の賞味期限がいつの間に切れていく やったこと 0.夫婦共有のスプレットシートを作る 1.スプレ…