ライブ壁紙アプリのKLWPを使っていて、週間天気予報の予想気温を折れ線グラフにしたかった。
探しても探しても作り方が見つからないので（探し方が下手なのかも）、自分なりに作った方法を忘れないようにまとめてみた。
完成予定図
シンプル過ぎて面白みがないけど、これが雛形だと思う。ここまでの作り方をまとめた。
下準備
後々のメンテナンス性を上げる為に、まずはいくつかグローバル変数を用意。
| ① | $gv(グラフ幅)$ | グラフ全体の幅：グラフ幅修正用 |
| ② | $gv(グラフ高さ)$ | グラフ全体の高さ：グラフ高さ修正用 |
| ③ | $gv(点サイズ)$ | マーカーの大きさ：マーカーサイズ調整用 |
| ④ | $gv(週最高気温)$ | 週の最高気温 +2℃：グラフの最大値 |
| ⑤ | $gv(週最低気温)$ | 週の最低気温 -2℃：グラフの最小値 |
| ⑥ | $gv(高さper1℃)$ | 気温1℃の高さ：後々の計算用 |
【補足】
④テキストサンプル
|
1 |
$mu(max, wf(max, 0), wf(max, 1), wf(max, 2), wf(max, 3), wf(max, 4), wf(max, 5), wf(max, 6)) + 2$ |
⑤テキストサンプル
|
1 |
$mu(min, wf(min, 0), wf(min, 1), wf(min, 2), wf(min, 3), wf(min, 4), wf(min, 5), wf(min, 6)) - 2$ |
⑥テキストサンプル
|
1 |
$gv(グラフ高さ) / (gv(週最高気温) - gv(週最低気温))$ |
あとはフォント、フォント色、フォントサイズ、折れ線の色、など用意しておくと後々の調整やカスタマイズがラクになる。
作り方
折れ線グラフを作る方法は色々あると思うけど、難しく考えるのが嫌なので、現時点で思いつく限りシンプルな作り方。
1.位置ずれ防止の為にグループを作る
最終的にホーム画面の上で位置を自由に変えられるように、アニメーションを一括で適用できるように、ひとつのグループにしてしまった方がラクだと思った。
ホーム画面に週間天気予報しか載せないのであれば、グループにする必要はないかも。
グループ内の最終的なレイヤー一覧
- 折れ線グラフ（グループ化重ねる）
- 縦線（図形・長方形）
- 横線（図形・長方形）
- 最高気温折れ線（グループ化並べる）
- 1日目～2日目（図形・長方形）
- 繰り返し
- 最高気温マーカー （グループ化並べる）
- 1日目最高気温（図形・円）
- 繰り返し
- 最低気温折れ線（グループ化並べる）
- 1日目～2日目（図形・長方形）
- 繰り返し
- 最低気温マーカー （グループ化並べる）
- 1日目最高気温（図形・円）
- 繰り返し
※上の画像は並び順が違う。折れ線をマーカーの下に配置しておいた方がいいかも。
2.グラフスペースを分かりやすくする為に、縦線横線を作る
マーカーと折れ線の位置がズレないようにする為に、基準位置を固定したいから縦線と横線でグラフスペースを確保する。
作り方は説明するまでもないと思うけど書いておく。
| 縦線 | 横線 | |
| 図形 | 長方形 | |
| 幅 | 1 | $gv(グラフ幅)$ |
| 高さ | $gv(グラフ高さ)$ | 1 |
| 基準位置 | 左下 | |
これでグラフの左と下の線を表現。
3.最高気温、最低気温の７日分のマーカーを作る
マーカーを使わない場合は飛ばして問題なし。
| グループ化（並べる） | |
| 並べ方 | 下（横方向） |
| 余白 | $gv(グラフ幅) / 7 – gv(点サイズ)$ |
| 基準位置 | 下 |
グループ化（並べる）を使えば等間隔で並ぶから、[レイヤー > 余白]でマーカーの間隔を調整する。
グラフ幅を日数で割って、マーカーサイズ分を引けばきれいにグラフ幅内に収まる。
基準位置を下にするのは、気温によってマーカーの位置（高さ）を簡単に決められるようにするため。
「グループ化並べる」の用意が終わったら、中に日数分の「図形・円」を作る。
| マーカー | |
| 図形 | お好みで |
| 幅 | $gv(点サイズ)$ |
| 余白（下） | 下記 |
余白（下）で、当日の最低気温、最高気温に合わせた高さに調整する。
例として１日目最低気温で説明すると、
当日最低気温から週の最低気温を引いて、それに1℃分の高さを乗算するだけ。
|
1 |
$(wf(min, 0) - gv(週最低気温)) * gv(高さper1℃) - gv(点サイズ) / 2$ |
マーカーサイズの半分を引き忘れるとズレる。
あとはコピペで最高気温と最低気温のマーカーは完成。
4.マーカー同士を繋ぐ折れ線を作る
これが一番めんどくさい。そしてややこしい。三角関数の知識がちょっと必要。
| グループ化（並べる） | |
| 並べ方 | 下（横方向） |
| 余白 | 0 |
| 基準位置 | 下 |
「グループ化並べる」の設定は、マーカーの時とほぼ同じ。
違う部分は余白が「0」になる。余白つけちゃうと折れ線グラフに隙間が出ちゃう。
「グループ化並べる」の用意が終わったら、日数分-1の「図形・長方形」を作る。
| 折れ線 | |
| 図形 | 長方形 |
| 幅 | 計算式① |
| 高さ | 1 |
| 回転 | 手動 |
| オフセット（角度） | 計算式② |
| 余白（下） | 計算式③ |
長方形の高さを「1」にして線に見えるようにする。
「幅」と「角度」は直角三角形の底辺と高さから色々求める三角関数(?)を使う。
直角三角形の底辺は、マーカーのグループで設定した余白の幅。
直角三角形の高さは、翌日との気温差による高さの差。
直角三角形の斜辺の長さは、(底辺)2 + (高さ)2の平方根（√）
角度の求め方は、ややこしい。逆タンジェント？よくわからない。わからなくてもできた。
【計算式①】
|
1 |
$mu(sqrt, mu(pow, (wf(min, 0) - wf(min, 1)) * gv(高さper1℃), 2) + mu(pow, gv(グラフ幅) / 7 – gv(点サイズ), 2))$ |
【計算式②】
|
1 |
$mu(atan, (wf(min, 0) - wf(min, 1)) * gv(高さper1℃) / (gv(グラフ幅) / 7 – gv(点サイズ)))$ |
これで斜辺ができたから、あとは高さを調整すれば終わり。
２日間の気温の低い方に合わせて「余白（下）」を変える。
【計算式③】
|
1 |
$mu(min, wf(min, 0), wf(min, 1)) - gv(週最低気温) * gv(高さper1℃)$ |
これを６つ作れば、最低気温の折れ線グラフが完成。
同じように最高気温の折れ線も作れば、全て完成。
5.おまけ
折れ線グラフのグループ（重ねる）とは別に、新しいグループ（並べる）を作り、グラフの下部に配置する。
その新しいグループの中に、テキストで各日の最高気温・最低気温を改行して作れば、最初の完成予定図と同じものが完成する。
他にも折れ線グラフの左側に、同じようにグループを作りグラフの最低値と最高値をつけてもいいかも。
さらには、グラフにグリッドをつけたり、アイコンフォントの天気アイコンを配置したりとか、いろいろできることはまだまだある。
そもそもコンポーネントとして保存しておけば、作り方をメモしておく必要はなかったかも。
コメント
丁寧な説明で有り難い。
でもちょっと線と○がずれる、マイナス温度の時は？
参考にして作成したのが、これ
http://whitecats.dip.jp/up/download/1592174787/attach/1592174787.klwp
and20200615
ありがとうございます。
マイナス温度を手入力して試した所、週の最低気温も同時に下がるので問題なく動作しました。
線と○がズレる件に関して見直した所、一部の式に誤りがありました。
折れ線の【計算式①】が
$mu(sqrt, mu(pow, (wf(min, 0) - wf(min, 1)) * gv(高さper1℃), 2) + mu(pow, gv(グラフ幅) / 7 – gv(点サイズ), 2))$ではなく、正しくは
$mu(sqrt, mu(pow, (wf(min, 0) - wf(min, 1)) * gv(高さper1℃), 2) + mu(pow, gv(グラフ幅) / 7, 2))$でした。申し訳ありません。
また、折れ線の太さ(図形の高さ)を考慮していなかったので、太い線にしてしまうと折れ線の高さがズレる現象が起こりました。
併せて「グループ（並べる）」で作った事で、折れ線として使用した「図形：長方形」の角度が変わった際に線の太さ分、横に押し出される現象も起こりました。
この問題を簡単に解決する方法が思いつかなかったので、ちょっとじっくり考えてみて訂正します。
もしかしたら、根本的に作り方を変える必要があるかもしれません。
ますます丁寧な説明で有り難い。
無理やりエラーを発生してすみませんが、
温度
-10,0,ー20,-1,1,-2,-30
とすると、ずれますね
で、mincorrで底上げしてます。
説明されている方法のが、シンプルでいいのですが、
週間天気予報の予想気温を折れ線グラフ
pipWeatherGraph for KLWP
それを参考して作成したのが、これです。
http://whitecats.dip.jp/up/download/1592259772/attach/1592259772.klwp
and470
おぉ…ご丁寧にありがとうございます！
凄すぎてまだ理解が追いついてないので、じっくり分析させて頂きます。
ちゃんと理解できたら、また自分なりにアレンジしてみます！
グラフ全体の幅,高さを変更すると、グループ化並べるで、
位置が変更される説明されているほうが、使いやすいです。
ミスっていたので、修正します。
yahooピンポイント天気 コンポーネント
http://whitecats.dip.jp/up/download/1592429563/attach/1592429563.komp
yw20200618
線を回転させた時に中心がずれてしまうようで
線と○がズレが、気になりますが、
これで、使えるでしょう たぶん
http://whitecats.dip.jp/up/download/1592777885/attach/1592777885.komp
sabotte0622
KLWPユーザーもっと増えないかなぁ。って書いてあるけど、
本当に少ないですね。
線を回転させた時に中心がずれてしまうけど、
誤差の範囲だと思う
作り易さ
グラフ全体の幅、高さを変えると、配置が変わる
週の最高気温 +2℃： 週の最低気温 -2℃：で高さ というのが非常にいい
作ってみたけど、この方法が、なかなか綺麗
yahoo天気グラフklwp
http://whitecats.dip.jp/up/download/1593947042/attach/1593947042.klwp
sbo0705
まとめ
作り易さ
グラフ全体の幅、高さを変えると、配置が変わる
週の最高気温 +2℃： 週の最低気温 -2℃：で高さ というのが非常にいい
この記事を参考にして作った。
yahoo天気klwp
白猫アップローダー
FILE ID
1593947042
パス
sbo0705
後から、読んでよくわからないので
できれば、上の方の書き込みは削除してほしい