Creating your first metapage
Once you’ve entered the metapage.io site and created an account you are now ready to create your first metapage. Let’s start with a simple example to upload and display an image.
Step 1: Create a new metapage by clicking on the “+ New” button at the top right of the metaframes homepage.
Step 2: Give your new metapage a name. This can be whatever you want. We will call it “My first metapage”
Step 3: After you first create the new metapage it will look like this.
Step 4: In order to upload and view files we will use the “Files” metaframe. To add this, first click on the “+ Add” button, then select “Files View” from the dropdown.
Step 5: The files metaframe should now appear in your metapage. You can resize the metaframe by dragging the bottom right corner. You can reposition the metaframe by dragging the button on the top left side. Additional menu options can also be accessed by clicking on this button. Check out the menu options and try resizing and repositioning the metaframe using these features now.
Step 6: Next, we will add the “Show Image” metaframe to view the image that we will upload. To do this select from the metaframes “+ Add” menu “Image/Video” then “Display Image”.
Step 7: We have now added all the metaframes we wanted to add to our metapage. Resize and reposition the metaframes so they are side-by-side in the metapage.
Step 8: Let’s now upload an image to view using the “Files” metaframe. Click the upload button to upload your image of choice. If you would like, you can download the image example we use here by clicking on the link below.
Step 9: Now to ensure the correct file is sent we will change the display mode to Selector. To do this, click on the gear icon at the top right of the files metaframe then select “Selector” under the Display mode.
Step 10: Now use the “Select file” dropdown to select your image file.
Step 11: You’ve now selected the file to send, but it’s not yet displayed in the “showimage” metaframe because we haven’t yet created a data connection. To do this, Click on the “Data Flow” button in the files metaframe menu to open the data connections editor. Make sure “files” is in green and “Show Image” is orange in the boxes on the top. If not, click on “Show Image” to turn it orange. A dotted line pointing from “files” to “Show Image” indicates the connection we will make.
Step 12: Let’s connect our metaframes! To do this just click on “Connect All”. This will send all outputs of files to the inputs of Show Image. (Note: The ** you see is a bash wildcard which specifies which files to pass. In this case, all of them. For more information about creating connections, see the page linked below.)
Click “Save” to save the changes and exit the connections editor.
Step 13: Your selected image will now appear in the “Show Image” metaframe. Congratulations on creating your first functional metapage!!
We’ve covered important features of metapages here including how to create a new metapage, how to add metaframes and create data connections between them. In the next walkthrough we will run our first code in a metapage by running Python with Pyodide.