Hummingbird: Preview mockups on devices in realtime
- Published on
Edit: The Hummingbird Website
Hummingbird lets you preview designs and webpages from your computer on devices in realtime.
I wanted to view designs from my computer on a physical device and instantly make changes. None of the solutions I found were flexible enough so I built one.
Every time a png or htm(l) file in a given directory is modified, the changes are pushed to all currently viewing devices. Hummingbird works on Android and on any browser that supports websockets (Safari on iOS, IE 10 on Windows Phone, Chrome and Firefox on desktops...).
How it works
The Hummingbird server starts two servers on your computer: one websocket server and one http server. The websocket server runs on
(port) and the http server runs on
(port + 1). Hummingbird listens for file changes and then pushes the filename to all the clients over websockets. The clients then request the file from the http server.
For example, if I modified
test.png, the websocket server would tell all the clients to display
test.png. Each of these clients then requests the image from
http://server-ip:(port+1)/test.png and displays it.
The Android app uses an ImageView for images and a WebView for all other files.
- Install the server application as follows (requires node and npm):
npm install hummingbird-server -g
- (Optionally) Install the android app here.
Open a shell in the directory of your choosing. Run the hummingbird server as follows. There are three possible ways to start it:
hummingbird hummingbird port hummingbird port ip_to_bind_to
Any time a png or htm(l) file in that directory is updated, the changes will be pushed to all listening devices.
Press Ctrl+C to exit.
Open the Android App. Swipe up from the bottom of the screen (or down from the top of the screen). Hit the menu button and click settings. Set the server's IP address and port (defaults to 8080). Restart the app.
iOS, Windows Phone, Desktop Usage
on your device(s). For example if I ran "hummingbird 8080", I'd go to "http://server-ip:8081/". If unset, port defaults to 8080.
If you want to push a file to connected devices without having to modify the file, just type the filename in after running
C:\somedirectory>hummingbird Listening... > screen.png Displaying: screen.png... > me.png Displaying: me.png...
The source code for the Hummingbird server application is on GitHub here.
The source for the Android Application will be online soon.
Join the discussion on Hacker News!