app.py

import dash
from dash import dcc, html, Input, Output, State
import os
import cv2
import numpy as np

app = dash.Dash(__name__)
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

# Sample data: list of JPEG2000 files
image_folder = 'images'
images = sorted([os.path.join(image_folder, f) for f in os.listdir(image_folder) if f.endswith('.jp2')])

# Function to read and process images
def load_image(image_path):
    img = cv2.imread(image_path, cv2.IMREAD_UNCHANGED)
    return img

# Get dimensions of the first image
first_image = load_image(images[0])
image_height, image_width = first_image.shape[:2]
aspect_ratio = image_width / image_height

color_scales = [
    'Viridis', 'Cividis', 'Inferno', 'Magma', 'Plasma', 'Jet',
    'Blackbody', 'Bluered', 'Blues', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Picnic', 'Portland',
    'Rainbow', 'RdBu', 'Reds', 'YlGnBu', 'YlOrRd'
]

app.layout = html.Div([
    html.H1("SunCET Interactive Movie Viewer"),
    html.Div([
        html.Label('Start Time'),
        dcc.Input(id='start-time', type='text', placeholder='Start Time')
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        html.Label('End Time'),
        dcc.Input(id='end-time', type='text', placeholder='End Time')
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        html.Label('Frame Rate'),
        dcc.Slider(
            id='frame-rate',
            min=1,
            max=30,
            step=1,
            value=15,
            marks={i: str(i) for i in range(1, 31)}
        )
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        html.Button('Play', id='play-button', n_clicks=0, className='button'),
        html.Button('Pause', id='pause-button', n_clicks=0, className='button'),
        html.Button('Step Forward', id='step-forward-button', n_clicks=0, className='button'),
        html.Button('Step Backward', id='step-backward-button', n_clicks=0, className='button')
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        dcc.Checklist(
            id='toggle-difference',
            options=[{'label': 'Running Difference', 'value': 'DIFF'}],
            value=[],
            className='checklist'
        )
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        html.Label('Color Scale'),
        dcc.Dropdown(
            id='color-scale-dropdown',
            options=[{'label': scale, 'value': scale} for scale in color_scales],
            value='Viridis'
        )
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        html.Label('Min Value'),
        dcc.Input(id='vmin', type='number', placeholder='Min value')
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        html.Label('Max Value'),
        dcc.Input(id='vmax', type='number', placeholder='Max value')
    ], style={'padding': 10, 'flex': 1}),
    html.Div([
        dcc.Checklist(
            id='scaling-options',
            options=[
                {'label': 'Log10 Scaling', 'value': 'LOG'},
                {'label': 'Sqrt Scaling', 'value': 'SQRT'}
            ],
            value=[]
        )
    ], style={'padding': 10, 'flex': 1}),
    dcc.Store(id='frame-index', data=0),  # Store the current frame index
    dcc.Store(id='relayout-data', data={}),  # Store the relayout data
    dcc.Graph(id='image-display'),
    dcc.Interval(id='interval-component', interval=1000, n_intervals=0)
], className='container', style={'display': 'flex', 'flex-direction': 'column', 'align-items': 'center'})

@app.callback(
    Output('interval-component', 'interval'),
    [Input('frame-rate', 'value')]
)
def update_interval(frame_rate):
    return int(1000 / frame_rate)

@app.callback(
    Output('interval-component', 'disabled'),
    [Input('play-button', 'n_clicks'),
     Input('pause-button', 'n_clicks')],
    [State('interval-component', 'disabled')]
)
def toggle_interval(play_clicks, pause_clicks, disabled):
    ctx = dash.callback_context
    if not ctx.triggered:
        return disabled
    button_id = ctx.triggered[0]['prop_id'].split('.')[0]
    if button_id == 'play-button':
        return False
    elif button_id == 'pause-button':
        return True
    return disabled

@app.callback(
    Output('frame-index', 'data'),
    [Input('interval-component', 'n_intervals'),
     Input('step-forward-button', 'n_clicks'),
     Input('step-backward-button', 'n_clicks')],
    [State('frame-index', 'data')]
)
def update_frame_index(n_intervals, step_forward_clicks, step_backward_clicks, current_index):
    ctx = dash.callback_context
    if not ctx.triggered:
        return current_index
    
    button_id = ctx.triggered[0]['prop_id'].split('.')[0]
    
    if button_id == 'interval-component':
        current_index = (current_index + 1) % len(images)
    elif button_id == 'step-forward-button':
        current_index = (current_index + 1) % len(images)
    elif button_id == 'step-backward-button':
        current_index = (current_index - 1) % len(images)
    
    return current_index

@app.callback(
    Output('relayout-data', 'data'),
    Input('image-display', 'relayoutData')
)
def update_relayout_data(relayout_data):
    if relayout_data is None:
        return {}
    return relayout_data

@app.callback(
    Output('image-display', 'figure'),
    [Input('frame-index', 'data'),
     Input('toggle-difference', 'value'),
     Input('color-scale-dropdown', 'value'),
     Input('vmin', 'value'),
     Input('vmax', 'value'),
     Input('scaling-options', 'value'),
     Input('relayout-data', 'data')]
)
def update_image(current_frame_index, diff_toggle, color_scale, vmin, vmax, scaling_options, relayout_data):
    img = load_image(images[current_frame_index])

    if 'DIFF' in diff_toggle and current_frame_index > 0:
        prev_img = load_image(images[current_frame_index - 1])
        img = cv2.absdiff(img, prev_img)
    
    if 'LOG' in scaling_options:
        img = np.log10(np.clip(img, 1e-5, None))
    elif 'SQRT' in scaling_options:
        img = np.sqrt(img)
    
    zmin = np.min(img) if vmin is None else vmin
    zmax = np.max(img) if vmax is None else vmax

    fig = {
        'data': [{
            'z': img,
            'type': 'heatmap',
            'colorscale': color_scale,
            'zmin': zmin,
            'zmax': zmax
        }],
        'layout': {
            'xaxis': {'visible': False},
            'yaxis': {'visible': False},
            'height': 600,  # You can adjust the height
            'width': 600 * aspect_ratio,  # Maintain aspect ratio
            'uirevision': 'constant'  # Prevent resetting of the UI state
        }
    }

    # Apply relayout data if available
    if relayout_data:
        fig['layout'].update(relayout_data)

    return fig

if __name__ == '__main__':
    port = int(os.environ.get("PORT", 8050))
    app.run_server(debug=True, host='0.0.0.0', port=port)