A Metamask Donation Button

Ethereum is cool!

Tip me with ether is better than buy me a coffee nowadays.

The community around Ethereum is awesome. The MetaMask is a great browser plugin for the Ethereum blockchain, serving many Ðapps, like some collectable, breedable and adorable creatures.

MetaMask can serve the tipping purpose easily. This post is largely adapted from their own demo: TipButton. This post demos how to embed such donation link in a Jekyll Github page, very straightforward.

The Tip Button

Here we go:

It is SAFE to click it. An additional window will prompt up BEFORE you actually send the 0.005 ether to me, which is equivalent to a coffee by today 2018-04-16.

If you don’t have MetaMask installed, please consider visiting MetaMask.

What is it doing?

  1. Metamask provides the web3.js object for your browser that communicates with the blockchain in the air, manages your accounts, and most importantly protects (hopefully) your private keys.
  2. When you initiate a transaction on the Ethereum blockchain, it prompts a window to ask for your permission to sign the transaction.
  3. The tipping transaction is constructed in the embedded javascript code.
  4. If you hit confirm it, I will get the 0.005 ether after this transaction is mined into the chain.
  5. Thanks!

The Embedded JavaScript

The script is very simple and straightforward:

<script>
var tipButton = document.querySelector('.tip-button');
tipButton.addEventListener('click', function() {
  if (typeof web3 === 'undefined') {
    return alert('You need to install MetaMask to use this feature.')
  }
  var user_address = web3.eth.accounts[0];
  if (typeof user_address === 'undefined') {
    return alert('You need to log in MetaMask to use this feature.')
  }
  web3.eth.sendTransaction({
    to: "0x01eD38686432FFc8082D622A7a73c97dd4F3502b",
    from: user_address,
    value: web3.toWei('0.005', 'ether'),
  }, function (err, transactionHash) {
    if (err) return alert('Thanks for trying out!');
    alert('Thanks for the generosity!!');
  })
})
</script>

Enjoy the blockchain! LQ


Google VRView with Jekyll

Google VR view allows developer to host VR content very easily with various platforms, including Android, iOS and Web. The content being hosted can be image or video, mono or stereo. Developer is also able to embed hotspot to allow user interaction with the VR content. More importantly, the VR view repository is open-source on Github.

In this post, I embedded some sample VR view widgets on my Jekyll page hosted on Github. All you need is a Google Cardboard to experience the 3D immersive world!

Showcase

Mono 360 Image

Image courtesy: Google VRView example

Stereo 360 Image

Image courtesy: Google VRView webpage

If you are using a browser on PC, the mono and stereo 360 images are rendered in the same way. Differences come when you are using a browser on a phone, and by clicking the Cardboard button on the widget. The script will redirect you to the Cardboard viewing mode.

Mono 360 image is rendered on a sphere, and pixel will be placed at the same focal distance. With stereo 3D image, the vergence of your eye will give you binocular vision.

VRView on Jekyll Blog

Enabling VRView content on your Jekyll blog is very straight-forward.

1. Build a local version of VRView

Clone the repository of Google VRView, and compile as instructed.

2. Copy the vrview folder into your jekyll folder

3. Declare the place holder for vrview content in your blog file

<div id="vrview-image-mono"></div>

4. Add scripts to load desired content into the vrview widget

<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
  var vrView1 = new VRView.Player('#vrview-image-mono', {
    image: '/public/image/vrview-taj-mahal.jpg',
    is_stereo: false,
    width: '100%',
    height: 360
  });
}
</script>

The VRView Player class has some parameters that you can play with, for example, video looping, stereo mode control. The detailed list can be found on Google VR view website.

5. Build and experience!

Because Github page allows CORS (Cross-Origin Resource Sharing), the content you upload to your Github repo can be accessed, for example, the video in vrview.

How about Video?

A little bit tricky! Sometimes it does not play.

Video courtesy: Google VRView example

Another Trick

VRView is able to handle requests as well.

Image Request

This is another mono 360 image, available with vrview examples:

http://longqian.me/vrview?image=../public/image/vrview-chichen-itza.jpg

Video Request

The following link will play the same video as in the previous section.

http://longqian.me/vrview?video=../public/video/congo_2048.mp4&is_stereo=true

Player parameter can be appended to the URI with & symbol, and multiple parameters can be concatenated.

Bloging should be COOL in the VR era.

Thanks for reading! LQ