本文へスキップ

Kwik App Design Book: 22 Canvas with Social Posting


Created Thursday 22 January 2015

http://www.kwiksher.com/tutorials/Multi/SocialCanvas_Sample.zip

This is experimental to send a screenshot to facebook or twitter
Twitter and Facebook book Rest APIs are used. Please login each developer site to register apps.

https://apps.twitter.com
https://developers.facebook.com/apps

Twitter

Go https://apps.twitter.com and click Create New App on the right hand corner

For instance, kwik Social Demo app is created, Callback URL is http://twitter.com/kwiksher

From Keys and Access Tokens Tab, you find Consumer key(API key) and Consumer Secret(API Secret) which are set in controller/twiilter.lua

Facebook

Go https://developers.facebook.com/apps and Add a New App

Choose Website in Add a New App window

For instance, I created Kwik Social Demo. Settings Site URL is http://coronalabs.com/
You find App ID and App Secret which are used in contoller/facebook.lua

In SocailNetwork Folder, you find the following folders and lua files.

  • lib/
  • controller/
  • main_code.lua
  • logout_code.lua
  • post_fb_code.lua
  • post_tw_code.lua


Open controller folder, and open twitter.lua and facebook.lua with a text editor. Let's set the keys of twitter and facebok.



then copy lib and controller folders to the build folder.

Add Main.lua Externl Code from Project and Pages

Set main_code.lua

Now you can make twitter layer as a button with external code.
Create twitter button with post_tw_code.lua

Now you can make facebook layer as a button with external code.
Create facebook button with post_fb_code.lua

Now you can make logoutBtn layer as a button with external code.
Create logout button with logout_code.lua

That's all. Publish and you can test facebook and twiiter post with corona simulator.

Canvas

if you have not done Canvas tutorial yet. Please follow the instrution below.

The following steps to make a canvas to draw with touch are as same as the old Kwik2's tutorial http://kwiksher.com/tutorials_kwik/canvas/ but the screenshots are new of kwik3

Open canvas.psd file. The psd size is for 1024x768 so let's create a kwik project with iPad Mini.
Publish without any interactions firstly.

Published images on corona simulator

select ButMedium layer and click Add button from Interactions

In Add button window, select Brush Size from Canvas interactions. Create a brush with Size 15 and Alpha 100%.

Select butLarge and click add button.

Bursh Size is 30 and Alpha is 15% for but_large

To take a screenshot and to save it to device's photo folder, selet butCamera layer and create a button for screenshot.

In Add Button window, but_screenshot is created with Canvas's TakeScreenshot.

Next Coloring brush, select butOrange and create a button wtih Brush Color

Brush Color with orange is created

Layer butWhite for Brush with white color. It is better not to make all RGB value with 255 to make white. So the B value is 252

ButBlue is Brush blue.

Erase canvas is done by shaking the device. From Actions in Project and Pages, let's create an erase action beforehand.

In Add Action button, choose Erase Canvas

Now Enable shake in Interactions is set with the action above.

Select act_erase in Enable Shake window

bigCnadice-Canvas

bigCandeice is the canvas to draw. There is one trick for kwik3 to detect the canvas size. Please be aware there are small squares on the left top corner and the right bottm corner of bigCandice layer. Because photoshop script does not let kwik to know the width and height of a layer if layer is completely transparent, Kwik3 needs the small squares to know the width and height.


Select bigCandice layer and click Set canvas from Interactions.

In Set Canvas window, you can set default properties of brush size, brush colors etc.

Pubish now.

Shake is in Hardware menus