Skip to content

Access Images via webserver

Pierre Baudin edited this page Apr 18, 2022 · 25 revisions

How to configure, Access and Manage the Local LAN webserver

Description

webserver.py is a single file python webserver that is installed as part of the pi-timolo project. Little or No configuration is required. If required webserver settings can be customized from the config.py file. The webserver displays LAN (local area network) only content. You can navigate folder structure and display media files using the right pane listing per the specified web root (default is media folder). From another computer on the same LAN use a web browser to access the RPI ip:port Eg 192.168.1.120:8080. Due to security you will not be allow to access Internet URL's so Internet links won't work.

pi-timolo webserver screen shot

How To Edit Webserver Settings

To customize webserver.py settings use menubox.sh SETTINGS menu pick

cd ~/pi-timolo
./menubox.sh

or use nano

nano ./config.py

Edit config.py web server settings located near bottom of file per variable comments

#======================================
#       webserver.py Settings
#======================================

# Web Server settings
# -------------------
web_server_port = 8080        # default= 8080 Web server access port eg http://192.168.1.100:8080
web_server_root = "media"     # default= "media" webserver root path to webserver image/video sub-folders
web_page_title = "Pi-Timolo Media"  # web page title that browser show (not displayed on web page)
web_page_refresh_on = False   # False=Off (never)  Refresh True=On (per seconds below)
web_page_refresh_sec = "180"  # default= "180" seconds to wait for web page refresh  seconds (three minutes)
web_page_blank = True         # True Starts left image with a blank page until a right menu item is selected
                          # False displays second list[1] item since first may be in progress

# Left iFrame Image Settings
# --------------------------
web_image_height = "768"       # default= "768" px height of images to display in iframe
web_iframe_width_usage = "75%" # Left Pane - Sets % of total screen width allowed for iframe. Rest for right list
web_iframe_width = "100%"      # Desired frame width to display images. can be eg percent "80%" or px "1280"
web_iframe_height = "100%"     # Desired frame height to display images. Scroll bars if image larger (percent or px)

# Right Side Files List
# ---------------------
web_max_list_entries = 0         # 0 = All or Specify Max right side file entries to show (must be > 1)
web_list_height = web_image_height  # Right List - side menu height in px (link selection)
web_list_by_datetime = True      # True=datetime False=filename
web_list_sort_descending = True  # reverse sort order (filename or datetime per web_list_by_datetime setting

You can customize the web server root folder path, sort order, web port number (default 8080), max images to list Etc. per script variable comments.
Note: The web_server_root can be a relative path Eg "media/motion", "media/timelapse" or absolute path Eg "/home/pi/pi-timolo/media". Default is "media"

There is a setting to limit the max number of files to show in the right pane listing. This feature works better if sorted by date descending (default) or by filename if named by number not date. That way you can browse the last 100 .. 200 or so images Up to 500 works OK as well, Note with a long list you may want to turn off refresh or set to a longer time period. Default is 180 seconds (3 minutes). Also you can setup a second web server by copying the existing webserver.py and sh and config.py to another directory. Change the webserver web_server_port= variable different from the first one Eg 8090. You can then have two web servers pointing at two locations if you wish.

Test webserver

To test settings, access the RPI via SSH or Desktop terminal session and change directory to the location of the webserver.py (default is /home/pi/pi-timolo) and start the webserver per the following command. Make sure there are more than two jpg files in the web_server_root folder.

cd ~/pi-timolo
./webserver.py

See if there are any error messages in the webserver.py console. Note you cannot ctrl-c or end the terminal session when this is running since it will stop the webserver port from opening. The webserver should be accessible on a web browser via the ip and specified port and web activity will be shown in the console or terminal session that is running pi-timolo.py. It appears that nothing else is using port 8080. You could always try another port eg 8081, 8090 or similar

Open a second terminal session and type

pgrep -f webserver.py

to check if the webserver.py started OK. A pid number will be returned if it is running OK. pgrep -f parameter looks at the complete command since the primary command is python and webserver.py is a parameter. You can always do a

ps -ef 

to see all processes and look for python webserver.py

If webserver.py fails then review the error message, correct the problem and try again. Usually it would be a misconfigured variable setting in webserver.py. Use nano to edit webserver.py file variables if that is the problem. Also make sure you are Not running under python3. I get a ImportError: No module named 'SocketServer' error if I try to run python3 webserver.py

If ./webserver.py appears to run OK then the problem may be with the network, router of a windows firewall setting, Etc. It may be possible that another machine has the same IP address as the RPI. This can sometimes happen if you configure a fixed IP address in the same range as the router DHCP scope. I have actually had this problem on a network. I usually run fring on my ipod to check ip and hosts on my network since I have some devices with fixed IP's and also the router will sometimes change a DHCP ip address for one of my RPI's that I am trying to SSH, filezilla, mobaxterm or VNC to.

Other than a port being blocked (by RPI, Browser, OS firewall, or used by another process, misconfigured webserver.py variable, permissions or network issue that is the only things I can think of. I have run this on quite a few RPI's with different Raspbian versions and hardware vintages without problem.

IMPORTANT: This will NOT run webserver.py in the background so if the terminal session is closed the webserver will stop. Use webserver.sh or menubox.sh to run webserver.py as a background daemon.

How To Access the webserver

On another computer on the same network, open a web browser and access the rpi web server by entering the RPI's IP address and port in the URL box of the browser. Eg. http://192.168.1.123:8080 If you are not sure of your IP address use the raspbian ifconfig command or if webserver.py is run in the foreground with verbose=True the ip:port will be displayed per startup message.
To view an image select an image (or other file type) url on right side panel listing, and it will be displayed in the left side panel. If you select a directory the contents of the directory will be displayed. Large directories may take a while to process. To navigate to a previous directory select the <=BACK link on the right panel listing. Note this link will not be displayed if you are in the webserver root.

Accessing Other File Types

Although this was mainly developed to view jpg files, it can be setup as a normal local area network web server to view other file types or download unrecognized file types. If you have an index.html then no right pane is displayed and the index.html takes up the whole page. If you create a folder and put txt, html (no index.html) or other similar files in the folder, then you can create a sub web server. When you click on the folder the list of files is displayed. html files only seem to work locally, no access to internet. You could use this for looking at txt, html or other types of files besides jpg. This server does work with javascript, css and most web content that is installed locally. Enjoy

IMPORTANT: This is an insecure web server for use on a local secure network so caution is advised.

How to Run Multiple Webservers

Of course if you want more than one webserver.py you can make a copy of webserver.py eg

cp webserver.py webserver_1.py

You can then edit it to set a different socket eg 8081 and folder so you can have two or more web server processes running. Of course you would have to copy and edit a complementary webserver.sh script to run it as a background process.

How to Use webserver.sh

This script will run webserver.py as a background task daemon. Make sure webserver.py runs properly before running webserver.sh. Start the webserver from menubox.sh menu pick

./menubox.sh

In a console terminal session execute

./webserver.sh start

This will start webserver.py as a background task and display status and PID number. You can then close the console session and the webserver will continue to run.
To stop the webserver.sh background task execute

./webserver.sh stop

To just check status execute command with no parameters

./webserver.sh

Do not try to run webserver.py once webserver.sh has been started in the background or you will get a socket.error address already in use message.

How To Run on Boot

You can start webserver.py on boot using the webserver.sh script from an entry in the /etc/rc.local file as the pi user rather than root. From a logged in SSH or RPI desktop terminal start nano per the following

sudo nano /etc/rc.local

Then add the following command before the exit 0 command. This will launch the webserver in the background under the pi user (not root). Note the webserver run on boot is optional.

su pi -c "nohup /home/pi/pi-timolo/webserver.sh start"

ctrl-x y to save changes
For Additional Details See Wiki How To Run on Boot

Optional Download

The webserver utility is automatically installed as part of the pi-timolo project but if you wish to download only webserver, then the following commands from logged in SSH or Desktop terminal session will copy and setup the files. You can modify the folder name or change to an existing folder if you wish.

cd ~
mkdir webserver
cd webserver
wget -O webserver.py https://raw.github.com/pageauc/pi-timolo/master/source/webserver.py
wget -O webserver.sh https://raw.github.com/pageauc/pi-timolo/master/source/webserver.sh 
wget -O config.py https://raw.github.com/pageauc/pi-timolo/master/source/config.py 
chmod +x webserver.py
chmod +x webserver.sh

How to Make a Timelapse Video from Images

Clone this wiki locally