MockUphone

Create device mockups in one click

Environments

• Staging: https://staging.mockuphone.com/
• Production: https://mockuphone.com/

Getting started

Prerequisites:

• Node.js 18

Now, in your terminal:

> npm install
> npm run dev

# omitted

  🚀  astro  v2.8.3 started in 106ms

  ┃ Local    http://127.0.0.1:3000/
  ┃ Network  use --host to expose

# Visit http://127.0.0.1:3000/ and have fun!

Add new device image

Prerequisites

• python 3.8+
• PIL
  • pip install Pillow
• opencv
  • pip install opencv-python

Add device image

1. Place the portrait and landscape image as {device_id}-portrait.png and {device_id}-landscape.png in public/images/mockup_templates/
2. Run make create-mask-image to create mask image to public/images/mockup_mask_templates/
3. Run make add-new-device, and input device info, this script will let user use {device_id}-portrait.png in public/images/mockup_mask_templates/ to get the frame of the image
   • The script will ask you to input some info for the device, after input the device info, you should see a window as below:
   • 
   • Resize the window if you can't see 4 trackbar on top
   • You can scroll the trackbar to adjust the frame on device image
4. After adjust the frame, manual add device_info to src/scripts/device_info.json, or press enter in the image window to generate device_info and auto add it to src/scripts/device_info.json
   • the device_info template:

   {
       "credits": '<p><a href="http://facebook.design/devices" target="blank">Facebook - Design Resources</a></p>',
       "desc": "{device_color}",
       "meta_title": "{device_name} {device_color} Mock Up",
       "meta_description": "1 click to generate your {device_name} {device_color} mockup! You can wrap screenshots in {device_name} {device_color} for prototypes.",
       "display_resolution": [width, height],
       "device_type": f"{device_type}",
       "device_id": f"{device_id}",
       "name": f"{device_name}",
       "orientations": [
           {
               "alt": "",
               "coords": [
                   [top-left-point],
                   [top-right-point],
                   [bottom-right-point],
                   [bottom-left-point]
               ],
               "name": "portrait",
           },
           {
               "alt": "",
               "coords": [
                   [top-right-point],
                   [bottom-right-point],
                   [bottom-left-point],
                   [top-left-point]
               ],
               "name": "landscape",
           },
       ],
       "view_desc": "Portrait<br/>Landscape",
   }
   

   • Both portrait and landscape image's coords will auto calculate by the frame we get from image window
   • You might need to manual modify some fields in the device_info like credits and alt in orientations
     • the credits, desc, name, view_desc will display in https://mockuphone.com/device_list
   • for example:

     make add-new-device
     Input device_id(ex: samsung-galaxys20ultra-cosmicgrey): samsung-galaxys20ultra-cosmicgrey
     Input device_color(ex: Pink): Pink
     Input device_name(ex: Samsung Galaxy S20): Samsung Galaxy S20
     Input device_type(Android/iOS/TV/Laptops/Macbook): Android
     

     • After press enter in image windpw, it will add below text to src/scripts/device_info.json

     {
         "credits": "<p><a href=\"http://facebook.design/devices\" target=\"blank\">Facebook - Design Resources</a></p>",
         "desc": "Pink",
         "meta_title": "Samsung Galaxy S20 Pink Mock Up",
         "meta_description": "1 click to generate your Samsung Galaxy S20 Pink mockup! You can wrap screenshots in Samsung Galaxy S20 Pink for prototypes.",
         "display_resolution": [1440, 3200],
         "device_type": "Android",
         "device_id": "samsung-galaxys20ultra-cosmicgrey",
         "name": "Samsung Galaxy S20",
         "orientations": [
             {
             "alt": "",
             "coords": [
                 [200, 200],
                 [1640, 200],
                 [1640, 3400],
                 [200, 3400]
             ],
             "name": "portrait"
             },
             {
             "alt": "",
             "coords": [
                 [3400, 200],
                 [3400, 1640],
                 [200, 1640],
                 [200, 200]
             ],
             "name": "landscape"
             }
         ],
         "view_desc": "Portrait<br/>Landscape"
     }
     

     • Press Esc to close image window
5. In src/scripts/device_info.json, add the device_id to the device_cat it belongs to
6. Run npx prettier src/scripts/device_info.json --write to format src/scripts/device_info.json