Dash DAQ⑯（ToggleSwitchコンポーネント）

July 23, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

ToggleSwitchコンポーネント

ToggleSwitchコンポーネントを使うと、ブール型のトグルスイッチを表示することができます。

初期値はvalueで設定します。（11行目）

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.ToggleSwitch(
        id='my-toggle-switch',
        value=False
    ),
    html.Br(),
    html.Div(id='my-toggle-switch-output')
])

@app.callback(
    Output('my-toggle-switch-output', 'children'),
    Input('my-toggle-switch', 'value')
)
def update_output(value):
    return 'The switch is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

トグルスイッチが表示されました。

トグルスイッチをクリックすると、オンとオフが切り替わることを確認できます。

Dash DAQ⑮（Thermometerコンポーネント）

July 22, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Thermometerコンポーネント

Thermometerコンポーネントを使うと、温度計型の計器を表示することができます。

初期値をvalue、最小値をmin、最大値をmaxでそれぞれ設定します。（12～14行目）

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Thermometer(
        id='my-thermometer-1',
        value=5,
        min=0,
        max=10,
        style={
            'margin-bottom': '5%'
        }
    ),
    html.Br(),
    dcc.Slider(
        id='thermometer-slider-1',
        value=5,
        min=0,
        max=10,

    ),
])

@app.callback(
    Output('my-thermometer-1', 'value'),
    Input('thermometer-slider-1', 'value')
)
def update_thermometer(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

温度計型の計器が表示されました。

スライドバーで数値を変更すると、温度計内の水色のエリアが変わることを確認できます。

Dash DAQ⑭（Tankコンポーネント）

July 21, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Tankコンポーネント

Tankコンポーネントを使うと、タンク型の計器を表示することができます。

初期値をvalue、最小値をmin、最大値をmaxでそれぞれ設定します。（13～15行目）

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Br(),
    daq.Tank(
        id='my-tank-1',
        value=5,
        min=0,
        max=10,
        style={'margin-left': '50px'}
    ),
    html.Br(),
    dcc.Slider(
        id='tank-slider-1',
        value=5,
        min=0,
        max=10,
    ),
])

@app.callback(Output('my-tank-1', 'value'), Input('tank-slider-1', 'value'))
def update_tank(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

タンク型の計器が表示されました。

スライドバーで数値を変更すると、タンク内の水色のエリアが変更されることを確認できます。

Dash DAQ⑬（StopButtonコンポーネント）

July 20, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

StopButtonコンポーネント

StopButtonコンポーネントを使うと、ストップボタンを表示することができます。

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.StopButton(
        id='my-stop-button-1',
        label='Default',
        n_clicks=0
    ),
    html.Br(),
    html.Div(id='stop-button-output-1')
])

@app.callback(
    Output('stop-button-output-1', 'children'),
    Input('my-stop-button-1', 'n_clicks')
)
def update_output(n_clicks):
    return 'The stop button has been clicked {} times.'.format(n_clicks)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

ストップボタンが表示されました。

ストップボタンをクリックするたびに、ボタン下にあるラベルのクリック回数が更新されることを確認できます。

Dash DAQ⑫（Sliderコンポーネント）

July 19, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Sliderコンポーネント

Sliderコンポーネントを使うと、ターゲットレベルを設定できるスライダーを表示することができます。

初期値はvalueで指定します。（12行目）

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Br(),
    daq.Slider(
        id='our-daq-slider-ex',
        value=50
    ),
    html.Br(),
    html.Div(id='slider-result')
])

@app.callback(
    Output('slider-result', 'children'),
    Input('our-daq-slider-ex', 'value')
)
def update_output(value):
    return 'The slider is currently at {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

スライダーが表示されました。

スライダーをクリックしたりドラッグしたりすると、設定値を変更することができます。

Dash DAQ⑪（PrecisionInputコンポーネント）

July 18, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

PrecisionInputコンポーネント

PrecisionInputコンポーネントを使うと、特定の精度に変換する入力エリアを表示することができます。

数字の精度はprecisionで指定します。（12行目）

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.PrecisionInput(
        id='our-precision',
        label='Default',
        precision=6,
        value=1234
    ),
    html.Div(id='precision-result')
])

@app.callback(
    Output('precision-result', 'children'),
    Input('our-precision', 'value')
)
def update_output(value):
    return 'The current value is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

特定の精度に変換する入力エリアが表示されました。

上下ボタンで数値を変更したり、直接数値を入力したりすることができます。

指定した精度を超える数字の場合は、精度内に丸められた数字に変換されて表示されます。

Dash DAQ⑩（PowerButtonコンポーネント）

July 17, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

PowerButtonコンポーネント

PowerButtonコンポーネントを使うと、ブール型のパワーボタンを表示することができます。

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.PowerButton(
        id='our-power-button',
        on=False
    ),
    html.Div(id='power-button-result')
])

@app.callback(
    Output('power-button-result', 'children'),
    Input('our-power-button', 'on')
)
def update_output(on):
    return 'The button is {}.'.format(on)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

パワーボタン（電源ボタン）が表示されました。

ボタンをクリックすると、オンとオフを切り替えることができます。

（ちょっと色合いが微妙で見づらいですが・・・😥）

Dash DAQ⑨（NumericInputコンポーネント）

July 16, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

NumericInputコンポーネント

NumericInputコンポーネントを使うと、指定範囲内の数値が選択できる入力エリアを表示することができます。

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.NumericInput(
        id='our-numeric-input',
        value=0
    ),
    html.Div(id='numeric-input-result')
])

@app.callback(
    Output('numeric-input-result', 'children'),
    Input('our-numeric-input', 'value')
)
def update_output(value):
    return 'The value is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

数値が選択できる入力エリアが表示されました。

上下ボタンを押すと、入力エリア内の数字が変化することを確認できます。

Dash DAQ⑧（LED Displayコンポーネント）

July 15, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

LED Displayコンポーネント

LED Displayコンポーネントを使うと、LEDディスプレイを表示することができます。

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.LEDDisplay(
        id='LED-display',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='LED-display-slider',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])

@app.callback(
    Output('LED-display', 'value'),
    Input('LED-display-slider', 'value')
)
def update_output(value):
    return str(value)


if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

LEDディスプレイが表示されました。

スライドバーをドラッグすると、LEDディスプレイに表示される数値が変わることが確認できます。

Dash DAQ⑦（Joystickコンポーネント）

July 14, 2022

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Joystickコンポーネント

Joystickコンポーネントを使うと、力の強さと方向を示すジョイスティックを表示することができます。

[ソースコード]

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Joystick(
        id='our-joystick',
        label="Default",
        angle=0
    ),
    html.Div(id='joystick-result')
])

@app.callback(
    Output('joystick-result', 'children'),
    Input('our-joystick', 'angle'),
    Input('our-joystick', 'force')
)
def update_output(angle, force):
    return ['Angle is {}'.format(angle), html.Br(), 'Force is {}'.format(force)]

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

ジョイスティックが表示されました。

中心の円をドラッグすると、力の強さと方向を表す数値が変わることが確認できます。