Animating rotation of a planar shape about a point

@rahulrajpl wrote:

Hi all,

If there is a requirement to enable planar rotation of an element, @empet has created this amazing snippet to get a hint of how to do it. It can be found at https://plot.ly/~empet/15514 This is closest possible to the one available in this jsfiddle: https://jsfiddle.net/xpaz8etg/.

Additionally, I wanted to plot a location sensor data on to a map but orientation need to be set interactively. I have achieved such interactive rotation of html elements, including dcc.Graph component by linking CSS transform property and a slider component. Output will be similar to the following:

pan_zoom_rotate691×455 346 KB

This is achieved by following code

.
.
.
html.Div(
                className="app-plot",
                id="app-plotid",
                children=[
                    dcc.Graph(
                    id='live-graph',
                    animate=False,
                    config={
                        'autosizable':True,
                        'scrollZoom':True,
                        'displayModeBar':'hover',    
                    }
                    )
                ],
            ),

            dcc.Slider(
                id='rotate-slider',
                min=-180,
                max=180,
                step=2,
                value=0
            ),
.
.
.

@app.callback(Output('app-plotid', 'style'), 
        [Input('rotate-slider', 'value')])
def update_style(value):
    return {'transform': 'rotate({}deg)'.format(value)}

Hope this helps. If there is a better way to achieve the above, kindly post it to this thread.

Regards,
Rahul

Posts: 1

Participants: 1

Read full topic