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.
About
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...).
TL;DR: An open source, cross platform Skala Preview/ Sketch Mirror that also works with HTML
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.
Installation
- Install the server application as follows (requires node and npm):
npm install hummingbird-server -g
- (Optionally) Install the android app here.
Usage
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.
Android Usage
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
Go to
http://server-ip:(port+1)/
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.
Other Features
If you want to push a file to connected devices without having to modify the file, just type the filename in after running hummingbird:
C:\somedirectory>hummingbird
Listening...
> screen.png
Displaying: screen.png...
> me.png
Displaying: me.png...
Source Code
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!