Create a function to display images like Jupyter / RStudio [Docker]

Overview

I usually write Python and R scripts with neovim, but it was troublesome to open the file and check it after outputting the graph as png or html. I wanted a function that automatically pops up new files, so I made it with docker.

Seo5IDfC4BCZXHQDD0QL1594225984-1594226031.gif

First of all, I haven't made much. I hope you read it with a tension like "Hmm, there are people who think about that."

How to use

First, save the following script as docker-compose.yml [^ 1]. Please make docker-compose available.

[^ 1]: I think you have specified a docker image that you haven't seen, but it was created by me. Since it is published on Docker Hub, you should be able to docker pull normally.

docker-compose.yml


version: "3"
services:
  websocket:
    image: dr666m1/image_watcher_websocket:version-0.0
    volumes:
      - .:/work/sync
    ports:
      - "9999:9999"
  webserver:
    image: dr666m1/image_watcher_webserver:version-0.0
    volumes:
      - .:/work/sync
    ports:
      - "8888:8888"
    depends_on:
      - websocket

After that, move to the directory where you plan to output png and html, and start / stop with the following command ($ FILE_PATH is the previous docker-compose.yml).

#Start-up
docker-compose -f $FILE_PATH --project-directory $(pwd) up -d

#Stop
docker-compose -f $FILE_PATH --project-directory $(pwd) down

If you open http: // localhost: 8888 / in your browser during startup, you will see the screen shown at the beginning.

How it works

As you can see in docker-compose.yml, there are two docker containers running. The roles of each are briefly explained below. The code is posted on my github.

websocket (image_watcher_websocket) I'll leave the explanation of what WebSocket is to other articles. The role of this docker container is:

--Detects png / html file creation or update every few seconds --Send the information of the detected file to the browser

For implementation, I used Python's ** websocket-server ** package.

webserver (image_watcher_webserver) I'll leave the explanation of what a web server is to other articles. The role of this docker container is:

--Accepts request on local port 8888 and returns ʻindex.html` --png / html files are also returned if requested

I used Python's ** Flask ** package for implementation. In ʻindex.html`, I use ** React ** a lot.

Commitment

Show / hide

You can switch between showing and hiding with the "▶" and "▼" to the left of the file name.

Display on a separate screen

If you click the file name, only that file can be displayed on a separate screen.

Other

The vertical width of the iframe is automatically corrected according to the scrollHeight of the html file, and the implementation of the button to return to the top is also a little particular.

Finally

In my work, I only write Python, R, and SQL for analysis, so I learned how to make screens with React.

Recommended Posts

Create a function to display images like Jupyter / RStudio [Docker]
How to create a function object from a string
Create a dataset of images to use for learning
Create a function to visualize / evaluate the clustering result
How to hold a hands-on seminar using Jupyter using docker
Create a function in Python
Create a Mastodon bot with a function to automatically reply with Python
Display PIL images on Jupyter
How to call a function
Unable to display tensorboard in jupyter notebook on docker (solved)
Let's create a function to hold down Button in Tkinter
[Road to Python Intermediate] Call a class instance like a function with __call__
I wanted to create a smart presentation with Jupyter Notebook + nbpresent
I want to create a pipfile and reflect it in docker
Create a function to get the contents of the database in Go
Steps to create a Django project
How to create a Conda package
How to make a recursive function
How to create a virtual bridge
How to create a Dockerfile (basic)
How to delete a Docker container
5 Ways to Create a Python Chatbot
How to create a config file
Create a BOT that can call images registered with Discord like pictograms
Various methods to numerically create the inverse function of a certain function Introduction
Understand how to display images on Jupyter (utilization of imshow / matplotlib of OpenCV)
[Python / Tkinter] Search for Pandas DataFrame → Create a simple search form to display
How to create a wrapper that preserves the signature of the function to wrap
I tried to create a linebot (implementation)
How to create a clone from Github
Create a Python function decorator with Class
Create a bot to retweet coronavirus information
How to create a git clone folder
I tried to create a linebot (preparation)
Execute a script from Jupyter to process
Try to make a kernel of Jupyter
How to create an NVIDIA Docker environment
Function to save images by date [python3]
A simple IDAPython script to name a function
Create a Python-GUI app in Docker (PySimpleGUI)
I made a script to display emoji
Various ways to create a dictionary (memories)
How to create a repository from media
Script to create a Mac dictionary file
Create a web service with Docker + Flask
Introduction to docker Create ubuntu environment in ubuntu
Create an API to convert PDF files to TIF images with FastAPI and Docker
Install and set Jupyter Notebook to create a study note creation environment [Mac]