The other side of the Ownable package will contain the visual elements: HTML, and media files like images and videos.
HTML
The index.html file will be rendered as widget in the wallet. It should have a structure resembling the following:
<html>
<head>
<style>
// all the styles for your ownable
</style>
</head>
<body>
<div>
// your ownable html
</div>
<script>
// any necessary functions
</script>
</body>
Styling
The styling should be responsive on all devices. As the wallet will render your provided template, you are in complete control of how it will be displayed.
If we consider the potion example which you can find in our demo repository, the script part of our HTML template may contain methods like this:
// Listen for a click on the button defined in the html template
// which will trigger the consume method
document.getElementById("drink-button").addEventListener('click', () => consume());
function consume() {
// building the message to be passed to WASM for execution
// this should match the msg expected by the lib.rs entry points
let msg = {
"consume": {
"amount": getDrinkAmount(),
},
};
// posting the message to the wallet which will relay it to WASM
// check index.js for the listener to see how it does it
// https://github.com/ltonetwork/ownable-demo/blob/eb0bda9c323659a78d69bd669861f46473d16fa2/www/index.js#L163
window.parent.postMessage({type: "execute", ownable_id, msg}, "*");
}
// gets the selected amount to drink from the html slider
function getDrinkAmount() {
let stringAmount = document.getElementsByClassName('slider')[0].valueOf().value;
return parseInt(stringAmount);
}
// listener for the wallet messages indicating the state after the execute msg
// see wasm-wrappers.js for details:
// https://github.com/ltonetwork/ownable-demo/blob/main/www/wasm-wrappers.js#L210-L217
window.addEventListener("message", (event) => {
const state = event.data.state;
updateTemplate(state.color, state.current_amount)
});
// method to update the visual template defined in the html file
function updateTemplate(color, amt) {
document.getElementsByClassName('juice')[0].style.backgroundColor = color;
document.getElementsByClassName('juice')[0].style.top = (100 - amt) + '%';
document.getElementsByClassName('juice')[0].style.height = amt + '%';
document.getElementsByClassName('amount')[0].textContent = amt;
}
The widgets in which the Ownables will be placed always have a 1:1 aspect ratio (square). Use the vh and vw, and/or to ensure the content of the widget properly scales.
