1

python+streamlitで、短期間にWebアプリを作ろうとしてします。
又、短いコードで描画を行えるライブラリとして、plotlyを候補にしています。そこで、件名の質問に至った次第です。

現状は、自由に描画できる機能を探し出せていません。グラフに特化した描画機能のみです
(これはplotlyの目的がそうだからかもしれません)。
ので、何とか自由に描画を行えないか探しています。

"自由に描画"する処理とは、下記の通りです。
・実在しない地図画像を1枚 Webブラウザのクライアント領域に描く
・その上に、●と直線を数百本描く
・上述は、Google Mapのようの拡縮と指定移動ができるようにする
・●と直線は、クリックで操作できるようにする

plotlyで出来ないなら、「皆様が経験済」のお勧めのライブラリを教えて頂けると幸いです。

※極力自分で調べましたが、調査時間が無い為 経験者の皆様の知恵をお借りしたい次第です。

【環境】
python3.9
streamlit 0.83.0
Win10 20H2
仮想環境 未使用

どうぞよろしくお願いします。

4
  • 2
    やりたいことと、使おうとしているツールの主要な目的が合ってないような気がするので、そもそもベースとなるStreamlitの選択から見直した方が良いと思われるのですが。The fastest way to build and share data apps, Streamlit: データサイエンティストのためのフロントエンド, Python: Streamlit を使って手早く WebUI 付きのプロトタイプを作る, Pythonのスクリプトからウェブアプリを簡単に作れるStreamlitをさわってみた 良く見つかる記事のタイトルは「Webアプリが簡単に」というのが多いですが、目的は機械学習とかデータ分析のようです。
    – kunif
    Commented 2021年7月5日 3:35
  • 2
    "自由に描画" がどう言ったものを想定しているのか (例えばフリーハンドでのお絵描きレベル?) 辺りを詳しく書いた方が回答が付きやすいと思います。plotly 等は基本的にデータを元にプロットするため、結果もグラフに特化したものになっていると思われます。
    – cubick
    Commented 2021年7月5日 4:13
  • 1
    kunifさん どうもありがとうございます。 私がしたい事( 画面上に画像、点、線を描き、それらをGoogleMapのように拡縮かつ視点移動できる )は、streamlit + plotly がが想定した用途でないかもしれません。 がとにかく時間がないため、最小の初期投資 = 学習コスト で行える環境を探している次第です。 既にstreamlitは使い始めてしまったため、「絶対に使い物にならない証拠」が見つかるまでは、何とか進めようと考えています。新たな環境を見つけるコストも、只ではないためです。
    – user37806
    Commented 2021年7月5日 9:32
  • cubick さん ありがとうございました。助言に沿い、元の文に加筆致しました。
    – user37806
    Commented 2021年7月5日 9:41

1 件の回答 1

0

「plotlyでCanvasに自由に描画」する機能はあります。
点や線画像を描画可能です。
しかしサンプルコードの通りグラフに特化した描画機能の延長で描画しているので、若干無理やりな感じは否めません。

目的や用途、そしてPythonコードのみで解決すべきかThree.jsなどjavascript側の描画フレームワークを使って良いのかなどの条件を質問文に追記していただけるとより的確な回答を得やすいかもしれません。

コメントにあるように「利用者が自由に描画」できる仕組みはstreamlit-drawable-canvasなどのライブラリが用意されています。

サンプルコード

import plotly.graph_objects as go

fig = go.Figure()

# Create scatter trace of text labels
fig.add_trace(go.Scatter(
    x=[1, 1.75, 2.5],
    y=[1, 1, 1],
    text=["$Stack$", "$Stackoverflow$", "$overflow$"],
    mode="text",
    textfont=dict(
        color="black",
        size=18,
        family="Arail",
    )
))

# Update axes properties
fig.update_xaxes(
    showticklabels=False,
    showgrid=False,
    zeroline=False,
)

fig.update_yaxes(
    showticklabels=False,
    showgrid=False,
    zeroline=False,
)

# Add image
fig.add_layout_image(
    dict(
        source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
        x=0.8,
        y=0.65,
    ))

fig.update_layout_images(dict(
        sizex=0.3,
        sizey=0.3,
        xanchor="left",
        yanchor="top" 
))

# Add circles
fig.add_shape(type="circle",
    line_color="blue", fillcolor="yellow",
    x0=0, y0=0, x1=2.25, y1=2
)
fig.add_shape(type="circle",
    line_color="gray", fillcolor="orange",
    x0=1.25, y0=0, x1=3.5, y1=2
)

# Add rect
fig.add_shape(type="rect", x0=0,y0=0.178,x1=3.5,y1=1.83)

fig.update_shapes(opacity=0.3, xref="x", yref="y")

fig.update_layout(
    margin=dict(l=20, r=20, b=100),
    height=600, width=800,
    plot_bgcolor="white" 
)

fig.show()

サンプルコード実行結果

5
  • payaneco さん、丁寧にサンプルコードまでお付け頂き、感謝の言葉もございません。早速試し、グラフに限らず自在に描けそうな事は分かりました。が、 >無理やりな感じは否めません は気になりました。現時点で「無理やり」感があるなら、「マウス操作で、描いた物を操作できるようにする」のは、無理やり感が助長されそうそうです (そんな事ないようでしたら、お手数ですが再びご指摘と助言を頂けると幸いです)。 streamlit-drawable-canvas は初めて知ったため、今すぐ調べたいと思います。貴重なお時間と労力を割いて下さり、どうもありがとうございました。
    – user37806
    Commented 2021年7月5日 9:50
  • streamlit-drawable-canvas は、python3.9環境で使えませんでした。PyArrowという物に依存しているらしく、それが3.9で動かないみたいだからです。
    – user37806
    Commented 2021年7月5日 11:25
  • 1
    PyPIの情報だとpyarrowはPython3.6~3.9までサポートしているようです。pyarrow 4.0.1 Download files 注意書きにVC++2015の再頒布可能dllが必要とあるのでそれかもしれませんね If you encounter any issues importing the pip wheels on Windows, you may need to install the Visual C++ Redistributable for Visual Studio 2015.
    – kunif
    Commented 2021年7月5日 13:16
  • kunifさん、再びありがとうございます。 PyArrow はpython3.9でも動くのですね。 が、pypi.org/project/streamlit-drawable-canvas の1つ目のサンプルコードを動かそうとすると、 StreamlitAPIException: To use Custom Components in Streamlit, you need to install PyArrow. Unfortunately, PyArrow does not yet support Python 3.9. You can either switch to Python 3.8 with an environment manager like PyEnv, or stay on 3.9 by installing Streamlit with conda: conda install -c conda-forge streamlit Traceback: 略 と表示されてしまうのです。それを読み、上述のPyArrowの問題提起に至った次第です。 尚 問題を起こした直接の原因は canvas_result = st_canvas()の行です。
    – user37806
    Commented 2021年7月5日 16:39
  • streamlit-drawable-canvas のサンプルコード( pypi.org/project/streamlit-drawable-canvas の最上部にある奴 )、動きました。 PyArrow だけを別途単体で pip install で導入するだけです。 エラーメッセージが不正確でした。 ひとまずstreamlit-drawable-canvasとpayanecoさん謹製のサンプルコードを検証し、私が何とか使える状態にもっていこうと思います。 kunifさん、そして payaneco さん、どうもありがとうございました。とても助かりました。
    – user37806
    Commented 2021年7月6日 3:17

この質問に回答するには、ログインする必要があります。