e-tipsmemo

ごった煮

web

growi、elasticsearch、mongodbをアップデートする(Ubuntuマシン(普通のPC)とQNAP NAS)

growiをアップデートしたい。 具体的には以下のことを実現したいが、内容が壊れないで実行可能かわからない あと、機能的に変更がないか growiのアップデート elasticsearchのバージョンアップ mongodbのアップデート growiをno_cdnにする(オプション) 特に…

Tauriを使ってみる(だけ)

GUI開発をしたいので、面倒なものをいれるよりは、Windows上でやったほうがいい気がしたのでWindowsで行う。 WSL2上では、fish-shellを使っているのでnodejsを入れるのがめんどくさい 準備 Rustを入れる。 Rust をインストール - Rustプログラミング言語node…

Typescripの開発環境とテンプレートプロジェクト

Typescriptを1 ~ 2年に1回ぐらい書きたくなることがあるが、毎回プロジェクト構築方法を検索していたり、 Windows を再インストールしなおしたりして環境が破壊されていたりするのでメモ WSL Windows Storeからインストールする ついでにWindows Terminalと…

tasmotaを使用してみる

ちょっとネットワークに接続したデバイスを作りたいと思い、 手元あったESPxxxxマイコンの開発環境がどれくらい変化したかを確認することにした。ESP8266EXが入っているWROOM-02を使いやすくしてあるモジュールで試す。 ESP−WROOM−02開発ボード: …

ThingsBoardを利用する 3.

Thingsboardに送る適当なプログラムは書いたので Thingsboardのグラフ画面を作成する。とは言ってもここの動画で行っていることをアレンジするだけ Getting Started | ThingsBoard 複数のセンサーが増えてきたときのために 動画内では、 defaultダッシュボー…

ThingsBoardを利用する 2.

今回は、Rustのプログラムを書いて、 実際のデータを使って、何秒か一回にデータが送られるようにする。 reqwest e-tipsmemo.hatenablog.com 前回はreqwestを使って単発で送ったので 今回は昔の電力測定プログラムを合わせるだけ。 fn main() { println!("He…

ThingsBoardを利用する 1.

e-tipsmemo.hatenablog.com 前回設定したThingsboardを 以前構築した録画サーバーの電力測定とつなげることを考える。Thingsboardにデータを送るためのAPIドキュメント ThingsBoard API reference | ThingsBoard今回はデータを受ける側を準備して、データを…

Raspberry piにThingsBoardのインストールと試用

家においてあるパソコンが集まっている部屋の温度とか湿度とか電力とか監視するために Raspberry piとその他もろもろを設置したのはいいが、 それらを統合して視覚化できたほうが便利そこでIoT Platformと銘打っているThingsBoardをRaspberry pi上に入れて自…

diagram-js customize 6. CustomizeRenderer

今回はBase Renderを継承した自作クラスに切り替えるbpmn-jsを参考にすると、lib/drawに主な3つのファイルがあるので それを作る。(今回はまだMyRenderUtilは使わない) 四角をつなげる線を引いたりするのに lib/util/RenderUtilが必要で、 diagram-jsからそ…

diagram-js customize 5. ContextPadProvider

e-tipsmemo.hatenablog.comつぎはContextPadProvider といっても今回もソースコードを分離する程度 ExampleContextPadProvider.jsの実装を/lib/features/context-pad/に移す。 ほぼコピペContextPadProvider.js import { assign, forEach, isArray } from 'm…

diagram-js customize 4. PaletteProvider

次にPaletteProvider bpmn-jsを習って、 app/lib/features/palette を以下のように構成。 index.jsはappからimportするときの読み込まれる? jsでファイルを分割するときの手法っぽい import PaletteModule from 'diagram-js/lib/features/palette'; import …

diagram-js customize 3. CONNECTION/SHAPE_STYLE

e-tipsmemo.hatenablog.com まず、前回スタイルがピンク色だったが、ここの色を変えるには1.BaseRenderのスタイルを上書き 2.app/lib/draw/Renderに新しくdiagram-js/BaseRenderを継承したRender Classをつくっていろいろとやる。とあるが、2は今は面倒なの…

diagram-js customize 2. Viewer

e-tipsmemo.hatenablog.com Viewer.js import Diagram from 'diagram-js'; import { assign, find, isFunction, isNumber, omit } from 'min-dash'; import { domify, query as domQuery, remove as domRemove } from 'min-dom'; var DEFAULT_OPTIONS = { wi…

diagram-js customize 1. container

e-tipsmemo.hatenablog.com 前回はリファレンスとなるbpmn-js-exampleを実行できるようになったので 今度はdiagram-jsのexampleに機能を追加する。 e-tipsmemo.hatenablog.com public 以下のindex.htmlを必要に応じてbpmn-jsに寄せた。 <html> <head> <link rel="stylesheet" href="css/diagram-js.css"> <link rel="stylesheet" href="css/app.css" /> <style> .palette-icon-l</link></link></head></html>…

diagram-js example とbpmn-js の再構築②

前回はdiagram-jsのexampleを実行したので、 次はbpmn-jsの差分を追加して起動できるかを確かめる。 動作とコードの確認をするためなので不要なファイルが残っていてもあまり気にしない。github.com bpmn-jsをcloneする。lib以下をdiagram-jsのapp以下にコピ…

diagram-js customize 0. font準備

e-tipsmemo.hatenablog.com diagram-jsからbpmn-jsの再構築した後に、 さて自分のアプリを書く番になると、 PaletteProviderにフォントが必要になるのでその作り方をメモする。 使用するもの Inkscape Fontello - icon fonts generator 参考 bpmn-font/HOWTO…

diagram-js example とbpmn-js の再構築①

diagram-jsを使うと決めたはいいが、ドキュメントはそこまで親切ではない感じなので わかったことをメモって行く。e-tipsmemo.hatenablog.com 最初はdiagram-jsのサンプルはgithubにある シンプルなdiagram-jsからどう言った点を実装すればbpmn-js(のような…

diagram-js 検討

とあるものが必要なきがしてので、どのように作るのがいいか検討していた。 GUIが欲しかったので 表が得意そうなライブラリが豊富なjavascriptで書くことにして、 javascriptで書くのがつらそうなコアのバックグラウンド処理は webassemblyとか使おうかなと…

nodejs Webpack-dev-server js html ウェブブラウザ更新

webpack dev serverの設定メモ エディタでjsをいじるとブラウザで自動リロードされる htmlをいじると自動リロード bundleも更新される(webpack-dev-serverはbundleしたものをメモリ上に置くので実態のファイル自体は更新されない? その他 ファイル構成 app/…

Ryzen 電力測定⑥

e-tipsmemo.hatenablog.come-tipsmemo.hatenablog.comグラフ表示できるようになったので、 Rustで書いたWebsocketのサーバーから送られてくるjsonでグラフを更新する。 jsonは以下のような形 { "time":2019/01/14 02:50:07, "voltage":102.396, "current":10…

Ryzen サーバー 電力測定⑤/Chart.js

前回はjsonで電力測定値をクライアントに送れるようになった。 e-tipsmemo.hatenablog.com これをきれいにグラフ化したい。 そこでChart.jsを使う。 Chart.jsによる折線グラフ作成<Chart.js<Javascript<木暮仁とりあえず必要 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 表示部分は <body> <input type="text" name="message" value=""> </body>