To be logged in you need to be using a TronWeb-enabled browser, as described above, with the attached wallet unlocked (i.e. enter your password in the wallet). Once everything is set up you should be logged in automatically. You will need to refresh the page however (e.g. hit F5) in order to enable realtime updates.

Firstly, go to the edit page and ensure you are logged in. Then move your mouse over the canvas to find somewhere to draw. If the plot is highlighted red, this means someone else owns that plot and you will not be able to draw at this location. If it is highlighted green it is available to purchase and otherwise it is highlighted yellow (meaning you already own it and can therefore draw on it).

Once you have found somewhere to draw, click on the plot. This will load the plot information in the sidebar. You can then select a color by clicking on the palette, clicking on the selected color (to bring up a color dialog) or using the RGB (red, green and blue) sliders. Once your color is selected, click inside the 10x10 grid to apply the color to that pixel. Repeat until drawing in this plot is complete. The resulting image is shown in the preview below and on the main canvas.

If you wish to draw a bigger image then you can click on a neighbouring plot in the preview area, and continue drawing as before in the new location.

Once your image is complete, you need to click on each of the plots you have edited (enter a URL for the plot if you wish) and click the ‘Submit changes’ button, which will update the status of the plot. You will likely be prompted to confirm the transaction by your wallet. Until this is done, your drawings are not saved anywhere, and will be lost when you refresh the page.

There are three ways to achieve this. Once you are on the edit page:

• You can paste image data directly into the browser from an image editing program. To do this, hover your mouse over the position in the canvas where you want the top left of the image to be placed and press the paste shortcut (e.g. Ctrl+V).
• You can drag and drop an image file onto the canvas from a file explorer. The position where you drop the file will be the top left of the image.
• You can click the file selector above the canvas, and select an image file from your system. The image will be loaded at the far top left of the canvas.

Using the above methods the image is always aligned at the top left of a 10x10 plot (so if the image is a multiple of 10 pixels it won't partially overlap with any other plots). Once your image is on the canvas you can click and drag it to a new location to adjust its position at pixel precision and the plots it overlaps will be highlighted (with color showing ownership – see the previous question). Whilst you can move the image, you can press delete or backspace to remove the image from the canvas.

To permanently position the image, click anywhere on the canvas outside of the image, then you will be taken to the sidebar with all the plots the image covers selected. You can then enter a URL to cover this area and click the ‘Submit changes’ button, which will submit each of the selected plots in turn. You will likely be prompted to confirm each of these transactions by your wallet.

You can select a rectangular block of plots by clicking and dragging over an area of the canvas. Once that is done you can set the URL and click the ‘Submit changes’ button, which will submit each of the selected plots in turn. You will likely be prompted to confirm each of these transactions by your wallet.

By default, Chrome (and other Chromium based browsers) try to use the color rendering profile set for the monitor, which may produce wrong looking, pale or limited range of colors (as well as degrading performance).

To fix this (in Chrome only) put in your address bar chrome://flags/#force-color-profile and set it to sRGB.

For other applications, it is also possible to change or disable the color profile for your monitor in your operating system settings, which may be preferable anyway, because it will apply the changes to all applications and not just to Chrome.

Tronpix tokens are TRC10 tokens, the native token type provided by the TRON blockchain. These are cheap to transfer between wallets (about as cheap as TRX itself), compared to other token types based on smart contracts. Tronpix tokens are not divisible (can only be transferred in whole numbers); on Tronscan this is indicated as a precision of 0.

The Tronpix canvas contains 150x600 = 90000 plots of 10x10 pixels. There is only one Tronpix token for each plot available, so there are 90000 tokens in total. Each Tronpix token can only be used to obtain ownership of a plot, but you can also sell a plot to get your token back and then use it elsewhere or sell it on a secondary market (such as on TronWatchMarket using TRC10 token ID 1000513). You can view more details of the token issuance on Tronscan.

The core component of this Dapp is a single smart contract that is running on the TRON blockchain. The smart contract governs how users are able to interact with the Dapp (buy, update and sell plots) and contains all the storage for the pixels in the canvas, the URLs associated with them and their owners. This data is all cached on the web server so it can be served quickly and then (if possible) the webpage (as well as the web server) subscribes to the events emitted by the smart contract to enable live updates to the canvas as it is edited by other users.

When you submit your drawings, you are sending a message to the smart contract (triggering a function call in the code) which causes it to update its storage with the provided data. In the case of buying a plot, one of your Tronpix tokens is attached to the message call and the smart contract verifies it has been received. In the case of buying tokens, TRX is attached to the message call instead and the smart contract sends you Tronpix tokens back.

The code of the smart contract is available in this Gist and the resulting ABI and bytecode can be found on Tronscan.

Unfortunately, none of the contract verification services, at the time this was published, were offering compilation with Solidity version 0.5.x, so this contract remains unverified. If you wish to verify the contract yourself get TRON Solidity 0.5.4 and run it as solc --evm-version constantinople --optimize --bin --abi --metadata Tronpix.sol. Note that the bytecode on Tronscan includes the 32 bytes of constructor arguments at the end, representing the value 200000000, which is the initial cost of a token from the smart contract (200TRX).

Please report all issues/bugs to support@tronpix.com and we will act on them ASAP.