I recently got a request from a Pixel Paint
user for a way to embed the Pixel Paint application into their web project with some extra UI customization features, so I have added a few things and thought I would share it with anyone who might want to do something similar.
Starting with Pixel Paint v2.9.0
, you can now embed the web app version of Pixel Paint into any html based project using a standard iframe tag and a handful of URL parameters which can be used to customize the user experience.
For the most basic implementation, you should append the emb=1
URL parameter to the base Pixel Paint URL. This will disable the Ape Apps Account related stuff as well as some features that do not work properly in a cross origin iframe. So a basic URL would look like this: https://pixelpaint.online/?emb=1
and you could use it on your website with something like this:
You would then use css to adjust the width/height of your iframe, and I would suggest a good starting point is an iframe size of 480x520 and then you can go from there based on your needs.
From there, Pixel Paint currently supports the following list of URL parameters. If you are interested in this feature and would like to see other customization parameters added, feel free to reply to this post and I will see what can be done.
size: the size of the paint grid, 16 = 16x16, 24 = 24x24, etc. Embedded mode currently only supports square dimensions.
fr: floating readout. when set to 1, the current x:y coordinate that the user is mouse hovering over will show up in a floating box to the side of the cursor.
inv: invert Y axis. when set to 1, 0:0 is at the bottom-left corner instead of the top.
layers: show layers tool. when set to 0, the layers tool will be hidden and disabled
sx: starting X coordinate offset. for example, if set to 5, the origin X coordinate will be 5 instead of 0.
sy: starting Y coordinate offset. for example, if set to 5, the origin Y coordinate will be 5 instead of 0.
ico: show .ico export option. when set to 0, the option to export as .ico will be hidden.
vpp: show .vpp export option. when set to 0, the option to export as a Voxel Paint file will be hidden.
print: show print option. when set to 0, the option to print will be hidden.
mdm: enable mixed dark mode. when set to 1, the app will appear in dark mode regardless of user theme, except for the grid area which will have a white background.
zoom: specify the default zoom level. default is 1, I think the minimum supported is 0.2 but I am not 100% sure on that.
labels: when set to 1, show x:y axis and origin labels
stats: when set to 1, show stats in the corner for number of pixels in painting and number of colors used
ps: preset sizes. a comma separated list of custom square grid sizes you will let the user select from, ex 8,16,32
Here is a sample URL of many of the URL parameters in use:
So those are all of the options currently available for Pixel Paint embedded mode. If there are other use cases you can think of for the app or other URL customization parameters you would like to see, just let me know and I will keep this thread updated with the latest information!