Find User
here you can look for a user
Embed Pixel Paint Into Your Website or Project
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:
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.
https://pixelpaint.online/
#pixelpaint
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:
<iframe src="https://pixelpaint.online/?emb=1"></iframe>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
csv: when set to 1, shows the export to csv quick tool in the main toolbox
em: When supplied with an absolute URI that is base64 encoded (using js btoa function for example) that points to a valid Pixel Paint file (*.ppp), will download and display the file.
Here is a sample URL of many of the URL parameters in use: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
csv: when set to 1, shows the export to csv quick tool in the main toolbox
em: When supplied with an absolute URI that is base64 encoded (using js btoa function for example) that points to a valid Pixel Paint file (*.ppp), will download and display the file.
https://pixelpaint.online/?emb=1&size=24&fr=1&inv=1&sy=1&sx=1&ico=0&vpp=0&print=0&mdm=1&zoom=0.65&labels=1&stats=1&ps=9,16,24So 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!
https://pixelpaint.online/
#pixelpaint
Owner of Ape Apps, LLC
Updated on 2024-03-02 to document the csv and em URL parameters.
Owner of Ape Apps, LLC
