plotly / dash-daq

Control components for Dash

dash_daq

DAQ components for Dash.

Docs: https://dash.plotly.com/dash-daq

Installation

pip install dash_daq

(Or for Python 3, pip3 install dash_daq)

Getting started for contributors

The source code and all the subsequent changes should be done inside src folder/directory.

Create a python virtual environment and activate it. inside that virtual enviornment

pip install dash
pip install pyyaml

This will install necessary build tools for building and testing library.

# Clone this repository
git clone https://github.com/plotly/dash-daq.git

# Install dependencies
$ npm install --also=dev

# Watch source for changes and build to `lib/`
$ npm start

Documentation

Component API documentation can be found at https://dash.plotly.com/dash-daq

Development

Demo server

You can start up a demo development server to see a demo of the rendered components:

$ npm run dash-demo

You have to maintain the list of components in demo/Demo.react.js.

Code quality and tests

To run lint and unit tests:

$ npm run test

Testing your components in Dash

1. Build development bundle to lib/

$ npm run start

2. Install module locally (after every change) in virtual environment

# Generate metadata, and install the daq pacakage locally for testing

$ npm run install-local

3. Run the Dash demo

$ npm run dash-demo

Installing python package locally

Before publishing to PyPi, you can test installing the module locally:

# Install in `site-packages` on your machine
$ yarn run install-local

Uninstalling python package locally

$ yarn run uninstall-local

Producing a new release as a tarball

vim dash_daq/version.py # and increase it to X.X.X
rm -rf node_modules dist build lib
yarn install
yarn build-tarball
ls dist/dash_daq-X.X.X.tar.gz # this is your tarball

Demo applications

• Dash Daq HP Multimeter - http://dash-gallery.plotly.host/dash-daq-hp-multimeter
• Dash Daq IV Tracer - http://dash-gallery.plotly.host/dash-daq-iv-tracer
• Dash Daq LED Control - http://dash-gallery.plotly.host/dash-daq-led
• Dash Daq Omega PID - http://dash-gallery.plotly.host/dash-daq-omega-pid
• Dash Daq Pressure Gauge KJL - http://dash-gallery.plotly.host/dash-daq-pressure-gauge-kjl
• Dash Daq Pressure Gauge Pfeiffer - https://dash-gallery.plotly.host/dash-daq-pressure-gauge-pv
• Dash Daq Robotic Arm Edge - http://dash-gallery.plotly.host/dash-daq-robotic-arm
• Dash Daq Sparki - http://dash-gallery.plotly.host/dash-daq-sparki
• Dash Daq Stepper Motor - http://dash-gallery.plotly.host/dash-daq-stepper-motor
• Dash Tektronix 350 - http://dash-gallery.plotly.host/dash-daq-tektronix350
• Dash Ocean Optics - http://dash-gallery.plotly.host/dash-ocean-optics

dash-daq's Issues

dash-daq breaks with the newest version of dash (0.36.0)

Due to events being removed from Dash, dash-daq fails during installation.

gauge custom scale not applying style

I am using a DAQ gauge as following

daq.Gauge(
            color={"gradient": True, "ranges": {"green": [0, 5], "yellow": [5, 7], "red": [7, 9], "black": [9, 10]}},
            value=2,
            max=10,
            min=0,
            scale={
                "custom": {
                    0.14: {"style": {"color": "red"}, "label": "Hello"},
                    4.14: {"style": {"color": "red"}, "label": "Foo"},
                    4.95: {"style": {"color": "red"}, "label": "Baz"},
                    8.12: {"style": {"color": "red"}, "label": "Jeez<br>bom"},
                }
            },
        ),

and I have the issues:

• style instruction is in the dom but has no effect (ie, text is not red)
  <text x="118.58641410998341" y="64.01665418691996" text-anchor="middle" style="color: red;">Baz</text>
• the
  is escaped

If style did work, would it be possible to have the text of the scale outside the gauge instead of inside ?

Joystick: handle shifts to a weird position on mousedown

On https://dash.plot.ly/dash-daq/joystick, the very first example does what you would expect - or at least, one of the two things you might expect: the handle moves so its center is exactly where the mouse pointer was when you moused down. (I might have wanted it to instead not move at all when you mouse down, just move when you drag, but I can see the argument for this behavior)

But the second and third examples don't behave correctly: mouse down and the handle moves to a point somewhere below where you clicked.

Confusion with dash-daq-drivers

Write-in from a user:

StopButton doesn't resize automatically with the buttonText size

This is the code I used to get the image above

    import dash_daq as daq
    daq.StopButton(id='source-choice-trigger',buttonText='Choose source')

Get rid of `BooleanSwitch`, just use `ToggleSwitch`?

It was unclear to me what the difference is between BooleanSwitch and ToggleSwitch, and in fact I was a bit annoyed to see they have different names for the toggle prop - on vs value.

In fact, looking at their implementations, BooleanSwitch is actually just a ToggleSwitch with a hard-coded booleanSwitch={true} prop - and ToggleSwitch hides the fact that it even has a booleanSwitch prop, so it’s always falsy. So what's the difference?

As @shammamah pointed out to me on slack: the difference between the ToggleSwitch and the BooleanSwitch just appears to be that ToggleSwitch has two indicator lights to display which “side” is currently activated, whereas BooleanSwitch gets its background color changed when it's activated. Even knowing that difference it's not clear to me from their names which is which, and the difference is so minor that it seems better to just have one component type, with an extra prop to define this behavior. Rather than a boolean prop as we currently have behind the scenes, let's make it an enum, something like:

indicatorMode: PropTypes.oneOf([
    'background', // current BooleanSwitch behavior
    'both sides', // current ToggleSwitch behavior
    'on side' // new idea: put an indicator only on the on side
]);

Components are dynamically generated but I expect to override them

The python component classes are generated using _dash.development.component_loader.load_components. This limits typing information support also it is not that easy to override them.

Comparatively other dash component providing libraries provide <component_name>.py files.

I generally override these classes to offer some additional functionalities. Is this approach limited to dash_daq library or is it going to be rolled out to other dash component providing libraries?

It would be nice to have physical python files deployed with the package.

Precision Input text not visible during entry

Just looking at the user guide: https://dash.plot.ly/dash-daq/precisioninput, text is not visible during entry in the field. Surely, this is not intended?

Using Safari Browser here

LabJack example

To add to dashdaq.io

https://labjack.com/

demo.py is not compatible with dash-0.40

Event disappeared from https://github.com/plotly/dash/blob/master/dash/dependencies.py

so one gets this diagnostics:

python demo.py
Traceback (most recent call last):
File "demo.py", line 4, in
from dash.dependencies import Input, Output, State, Event
ImportError: cannot import name 'Event' from 'dash.dependencies' (C:\ProgramData\Anaconda3\lib\site-packages\dash\dependencies.py)

Boolean switch indicates there is a size prop in documentation, but prop isn't listed.

The boolean switch in the documentation says there is a size prop, but when attempting to use this prop with the component, it's clear that this prop is missing.

TypeError: Unexpected keyword argument `size`
Allowed arguments: className, color, disabled, id, label, labelPosition, on, style, theme, vertical

Knob doesn't adjust when its prop `max` is modified via a callback

That is the component as it is rendered by the app the first time

and after a callback where the max has been adjusted to 100

If I go higher than 20, then the blue highlight display very wierdly

Expose a width parameter for daq.Tank (and maybe height instead of size)

At the moment the width of a daq.Tank is hardcoded (see https://github.com/plotly/dash-daq/blob/master/src/styled/Tank.styled.js#L8). We could also expose height instead of the current parameter size which is a bit confusing. Raised by https://community.plot.ly/t/edit-dash-daq-component-size/28394

On and Off labels for toggle switches

The two indicators/directions on a ToggleSwitch would be more useful if they were labeled. It's not even really clear which is True and which is False, but there are lots of cases where the switch doesn't even have a clear true/on vs false/off, just two different values - for example, a voltmeter with a "single-ended" vs "differential" switch.

Certainly users can add their own labels to do this job, but it would be more convenient if this was just built in as a couple of extra props, onLabel and offLabel perhaps.

Components fail to load for dash-daq v0.1.6

A few components in demo.py doesn't show up when bump dash-daq from 0.1.5 to 0.1.6.

requirements running demo.py:
dash==1.0.0

---

This comes from daq0.1.6:

with dev_tool errors:

Comparing with v0.1.5:

Thicker ring in gauge meter of dash_daq!

The ring that dash_daq.Gauge outputs is too thin. I would like to have thicker ring.

dash-daq docs slider component not interactive

All the other interactive (not read-only) widgets let users play with the component. The slider doesn't seem to react to my mouse clicks.

http://dash-daq.netlify.com/#Slider

Graduated bar margin bug

Hey hey people, top and bottom margins in graduated bars don't apply to the filling. When applying right and left margins, they disappear completely.

The LEDDisplay does not handle negative values

It displays invalid input instead of negative numbers

Error loading dependencies

Hi, I am getting the following error when I try to deploy one of your dash-daq graphs using heroku. I am using python 3, I listed my other installed packages below. I also installed dash-daq with pip3.
Let me now if you have any suggestions on how to fix this.

Thanks!

Eva

certifi==2018.11.29
chardet==3.0.4
Click==7.0
dash==0.36.0
dash-core-components==0.43.0
dash-daq==0.1.0
dash-html-components==0.13.5
dash-renderer==0.17.0
decorator==4.3.2
Flask==1.0.2
Flask-Compress==1.4.0
gunicorn==19.9.0
idna==2.8
ipython-genutils==0.2.0
itsdangerous==1.1.0
Jinja2==2.10
jsonschema==2.6.0
jupyter-core==4.4.0
MarkupSafe==1.1.0
nbformat==4.4.0
numpy==1.16.0
pandas==0.24.0
plotly==3.5.0
python-dateutil==2.7.5
pytz==2018.9
requests==2.21.0
retrying==1.3.3
scikit-learn==0.20.2
scipy==1.2.0
six==1.12.0
traitlets==4.3.2
urllib3==1.24.1
Werkzeug==0.14.1

Daq components in a form: get values with form submit?

Dear community,

I'm new at designing apps (with Dash), so my question may be a straightforward one.
I am using some dash-daq components in a form (e.g. NumericInput, sliders). Is there a way to obtain values from all components at once ("form submit")?

I found a working example using Dash core components here: https://community.plot.ly/t/form-submission-and-routing-to-new-page/13590
Can I do something similar? For example obtaining values for several sliders at once?

Any help is appreciated. Thanks!
Jeroen

Build-dist script causes errors

As noted in #33, changing build-dist-dev to build-dist before publishing the NPM package results in an Error loading dependencies:

Some packaging details

I've packaged this at conda forge and here are a few issues:

• The PyPi package name is "dash-daq" but the tarball on PyPi is named "dash_daq". It is typical convention for these names to be the same.
• The setup.py file does not include a list of dependencies, yet this package does depend on dash and other dash packages. setuptools and pip look for the dependencies by default in the setup.py file and conda forge checks this automatically on updates so we can keep the packages synced with PyPi. IT would be helpful for us (and likely users) if those were included in the setup.py file.
• The license file is not packaged in the tarball on PyPi. This can be done using a MANIFEST.in file.
• There are no Github releases (tags) for versions greater than 0.0.3. The tags are helpful for downstream packagers to detect differences in versions. PyPi indicates version 0.0.6 is the only version and it is difficult to see how that matches this repository.
• The changelog does not seem to reflect the current state of the releases.
• The setup.py file is missing many common entries that are used by PyPi and other downstream software. It would be helpful to have the standard items (descriptions, etc).

Conda forge pr: conda-forge/staged-recipes#7613

react-dom console error from knob components

A react-dom console error appears when dash-daq in tektronix app is loaded. Toggle knobs result in more errors.

A replicate snippet as follows:

import dash
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)
app.config['suppress_callback_exceptions'] = True
server = app.server

app.layout = html.Div(
    children=[
        daq.Knob(
            value=1E5,
            id="frequency-input",
            label="Frequency (Hz)",
            labelPosition="bottom",
            scale={'interval': 1000000},
            max=2500000,
            min=1E5,
        )
    ]
)

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

package for running it:
dash==0.43.0
dash-daq==0.1.5

Add left and right options for labelPosition in toggles

Hi.

I'm looking after an option to place the label text to the right or left of the toggles: Actually, I'm using only the BooleanSwitch component, but I think this could easily apply to Toggle Switch too.

Color not Dash Output type

The color option is not a Dash Output type. I would like to change the color of the switch depending on the user input. Should I instead use the theme parameter?

The error message I got:

dash.exceptions.IncorrectTypeException: The output argument stop_know.color is not of type dash.Output.

My component:

daq.ToggleSwitch(id='stop_know', value=False, color="#FF5E5E")

release tags

I'm working on some git-based conda packaging and it would be helpful if dash-daq followed the tagging conventions of the other plotly projects. In particular, to tag release commits with vX.Y.Z. It looks like this was followed up to version 0.0.3, but not since.

Integrate n_clicks_timestamps with StopButton

Integrating n_clicks_timestamps with the StopButton would make coding multiple buttons much easier.

Wondering if this oft-repeated "default adapter" code could be shared through an import in all your tests

Wondering if this oft-repeated "default adapter" code could be shared through an import in all your tests

Originally posted by @Marc-Andre-Rivet in #58

cant view the components inside docker container

cant view the components inside docker container

Add bi-directional props to Joystick component

In cases where the joystick should only move in 2 directions (up and down only or left and right only) it would be nice to have it so the joystick only moves in the two specified directions, so users don't get confused with empty commands.

Gauge colour as a gradient memory leak?

Seems to be a big performance issue with setting gradients on gauges.

This is how the browser splits its time, the 50% usage on the DOM function is reduced to a few percentage points after the gradient is removed.

daq.Gauge(
                color={"gradient":False,"ranges":{"#00998c":[0,6],"#E09A4F":[6,8],"#E0554E":[8,10]}},
                showCurrentValue=True,
)

Versions:
dash==0.39.0
dash-auth==1.3.2
dash-core-components==0.44.0
dash-daq==0.1.5
dash-html-components==0.14.0
dash-renderer==0.20.0
dash-table==3.6.0
Flask==1.0.2
Flask-Compress==1.4.0
Flask-SeaSurf==0.2.2
plotly==3.7.1

Browser: Firefox 67.0.1

Provide a ThemeProvider instead of a DarkThemeProvider

I find the DarkThemeProvider name misleading as it is possible to get a light theme by setting the attribute of DarkThemeProvider theme['dark'] to False.

IMHO, it would be useful to have a ThemeProvider which could also provide a "greyed out" theme, for when components are disabled for example :)

This would make the switch from light, dark or grey out easy using a callback on a theme['name'] attribute for example

Thermometer should have a flat measurement level

Seriously, how can you read the value from a circular endpoint? I'd prefer it to be completely flat, but would accept rounded corners as long as most of the width is flat.
This one in the docs is apparently 98.6, I probably would have guessed ~98.3:

Joystick's PropTypes docstring for setProps references ColorPicker instead.

dash-daq/src/components/Joystick.react.js

Line 141 in 47bc549

* the color picker's value changes

Error Loading Dependencies

Greetings, I am currently getting some strange results with dash-daq. In the minimum example, I get the Error Loading Dependencies message (and it seems to occur regardless of daq component [I didn't try them all]):
** Not deployed on Heroku but tried this anyway: #25

import dash
import dash_html_components as html
import dash_daq

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_daq.BooleanSwitch(id='toggle-drag', on=True),
])

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

The js console message:

[Error] TypeError: undefined is not an object (evaluating 'n.subscribe')
componentWillMount — bundle.js:2:716
performInitialMount — [email protected]:1998
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
performInitialMount — [email protected]:2003
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
performInitialMount — [email protected]:2003
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
mountChildren — [email protected]:4034
_createInitialChildren — [email protected]:2507
mountComponent — [email protected]:2440
mountComponent — [email protected]:4234
performInitialMount — [email protected]:2003
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
performInitialMount — [email protected]:2003
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
performInitialMount — [email protected]:2003
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
performInitialMount — [email protected]:2003
mountComponent — [email protected]:1976:149
mountComponent — [email protected]:4234
updateChildren — [email protected]:1869
_reconcilerUpdateChildren — [email protected]:4023
_updateChildren — [email protected]:4062
updateChildren — [email protected]:4056
_updateDOMChildren — [email protected]:2587:263
updateComponent — [email protected]:2531:105
receiveComponent — [email protected]:2513
receiveComponent — [email protected]:4247
_updateRenderedComponent — [email protected]:2097
_performComponentUpdate — [email protected]:2089:250
updateComponent — [email protected]:2067:294
receiveComponent — [email protected]:2051
receiveComponent — [email protected]:4247
_updateRenderedComponent — [email protected]:2097
_performComponentUpdate — [email protected]:2089:250
updateComponent — [email protected]:2067:294
performUpdateIfNecessary — [email protected]:2054:211
performUpdateIfNecessary — [email protected]:4251:86
s — [email protected]:4446
perform — [email protected]:5411:103
perform — [email protected]:5411:103
T — [email protected]:4501
close — [email protected]:4474:115
closeAll — [email protected]:5446
perform — [email protected]:5419
T — [email protected]:4501
close — [email protected]:4474:115
closeAll — [email protected]:5446
perform — [email protected]:5419
T — [email protected]:4501
T
closeAll — [email protected]:5446
perform — [email protected]:5419
u — [email protected]:4452:162
r — [email protected]:4358
enqueueSetState — [email protected]:4400
setState — [email protected]:12:7784
handleChange — zipWith.js:19
handleChange
dispatch — core.js:97
(anonymous function) — fetch.js:123
promiseReactionJob
(anonymous function) (dash_renderer.dev.js:33621)
promiseReactionJob

Python env:

(venv) Sterlings-MacBook-Pro:dash-draggable sterlingbutters$ /Users/sterlingbutters/odrive/AmazonDrive/PycharmProjects/DashComponents/dash-draggable/venv/bin/python --version
Python 3.6.8 :: Anaconda custom (64-bit)

(venv) Sterlings-MacBook-Pro:dash-draggable sterlingbutters$ pip show dash-daq
Name: dash-daq
Version: 0.1.2
Summary: DAQ components for Dash
Home-page: UNKNOWN
Author: The Plotly Team
Author-email: UNKNOWN
License: UNKNOWN
Location: /Users/sterlingbutters/odrive/AmazonDrive/PycharmProjects/DashComponents/dash-draggable/venv/lib/python3.6/site-packages
Requires: 
Required-by: 

This error is truly odd because several days ago it appeared to be working.

Overwrite auto-generated className for nested components

Inherited from styled-components, all daq components up to v0.1.7 are using auto-generated className for nested components. as shown below:

These are random characters hard to use for styling purpose. For consistency, it will be good to have component-specific className for easier tracking/styling in DOM tree.

cc @wbrgss

DAQ is not published on NPM

Contrary to other component repos for dash, daq is not published on NPM, which forces the use of app.scripts.config.serve_locally = True and prevents it from workinf with the default dash configuration.

It should be published like other packages :)

Original community issue here

Relates to #25

DarkThemeProvider doesn't change colour of input boxes

It appears as though custom CSS is required (e.g., in this app https://dash-daq-stepper-motor.herokuapp.com) to change the background colour of input boxes. Otherwise the background stays white, but the text colour changes, and this makes things hard to read (e.g., in this app https://dash-daq-pressure-gauge.herokuapp.com).

Range Slider with handle lables

Hi,
I would like to know if there's anyway to use the daq.Slider as range slider with handleLabel parameter, because the dcc.RangeSlider doesn't have this feature. If not, have you thought about implement it?
I've found this but it's a bit tricky.

Add CI to project

Add CI integration for running tests in PRs, etc.

Builtin events for some dash DAQ components

It would be nice to have more refined callbacks for the DashDaq components, and to have click for all of them.

Some ideas :

1. release (like click but only fires when the mouse is released)
2. double_click
3. pressed (like click but only when the mouse is pressed)
4. changed_ui vs changed_programatically to distinguish between user input or other callbacks

More ideas can be found in PyQt4/5 QtCore

Maybe this is what the SetProps attribute is for?

setup.py does nothing to ensure that metadata.json gets installed properly

daqNumericInput is not compatible with Dark Theme

daqNumericInput remains white on dark mode. Inside text is converted to white. This results white input on white background hence not readable. Please see below a reproducible R example and associated screenshots.

library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

theme <- list(
  'dark' = TRUE,
  'detail' = '#007439',
  'primary' = '#00EA64',
  'secondary' = '#6E6E6E'
)

rootLayout <- htmlDiv(list(
  daqLEDDisplay(value = "3.14159"),
  htmlBr(),
  daqNumericInput(min = 0, max = 10, value = 4),
  htmlBr(),
  daqPowerButton(on = TRUE)
))

app$layout(htmlDiv(
  list(daqDarkThemeProvider(theme = theme,
                            children = rootLayout)),
  style = list('backgroundColor' = '#303030',
                     'float' = 'left')
))

app$run_server(port = 8897)

VI_ERROR_RSRC_BUSY (-1073807246): The resource is valid, but VISA cannot currently access it.

Hi

I am trying to establish a serial communication with VISA on windows 10, python 3.7.3 :

import visa

rm = visa.ResourceManager()
instr = rm.open_resource('ASRL1::INSTR')

app = dash.Dash(__name__)
server = app.server
app.scripts.config.serve_locally = True
app.config["suppress_callback_exceptions"] = True

if __name__ == '__main__':
    # defaultset()
    app.run_server(port=8800, debug=True)

but get the following error when it's trying to open the resource.

pyvisa.errors.VisaIOError: VI_ERROR_RSRC_BUSY (-1073807246): The resource is valid, but VISA cannot currently access it.

Running this independent of dash daq server works fine. Please advise.

Cheers, H

Use boilerplate or DDC project structure instead of archetype

The handleLabel prop of Slider component must have 'label' key

The following results in component not rendering and many error messages in the console

dash_daq.Slider(
    id='a-slider',
    value=1,
    handleLabel={"showCurrentValue": True},
)

The current workaround is the following

dash_daq.Slider(
    id='a-slider',
    value=1,
    handleLabel={"showCurrentValue": True, "label": " "},
)

It makes sense that the user can choose to show the value without necessarily have a label.

Autogenerated python file in pypi package

Similar as other dash components, auto-generated python file enclosing docstrings(e.g. LEDDisplay.py, Indicator.py)could be packed together into tarball, so that pycharm editors may access docstrings/components declarations with shortcut, instead of help(daq.ColorPicker()).

This is found missing in dash-daq version 0.1.4, could be added in later version.

Knob indicator doesn't adjust when its `value` prop is modified though a callback

The title should be explicit enough, here are the callback and the visuals

@app.callback(
    Output('knob', 'value'),
    [],
    [],
    [
        Event('radio-choice', 'change')
    ]
)
def knob_reset():
    """reset the knob to 0 when the radio item is toggled"""
    return 0

Update generation to use `dash-generate-components`

Core component projects now use dash-generate-components from the dash repo to generate the Python and R wrappers.