====== Basic Interaction from a Custom Web Page ====== This application note describes how a custom web page can talk to Blocks to trigger a number of tasks. The more extensive application note titled "[[blocks:app-note:interacting-from-a-custom-web-page|Advanced Interaction from a Custom Web Page]]" discusses a number of methods of custom integration. However, in doing so, it may also be perceived as complex and overwhelming. Hence this more "Basic" application not, where the emphasis is on simplicity. ==== Installation and Usage ==== You need a computer with a running blocks server and a web browser to run this application note. Here's the {{ :blocks:app-note:custom-web-page:webtask.zip| Blocks root}} for this application note. See the the [[blocks:app-note:start|general setup section]] for details on downloading and installation. Once that general setup is done, follow these steps to run the application note: - Start Blocks. - Open the Blocks editor using the Admin button. - Log in using the proper credentials (default user name is //admin// and the password is //pixi//). - Navigate to the Task page. - Select the Realm named "Public". - Select the "Web" group. - Select the task named "One", containing a single log statement. - Open a second browser window to the same address as the editor window, but replace /edit/xxx with /public/html/WebTask.html to open the custom web page (see below). - Click the //One// button. {{ :blocks:app-note:custom-web-page:customwebpage.png?nolink |}} When you click the button, the "Started" message will be logged on the Task page in the Editor. ===== Behind the Scenes ===== This integration consists of two custom parts: - A custom web page, showing two buttons. - A User Script in Blocks, accepting and acting upon the request. ==== Custom Web Page ==== As you can see above, the custom web page is very basic indeed, consisting only of some text and two buttons. Here's the HTML code behind that page. Start Task: You can see the code corresponding to the text and the two buttons at the end of this code, inside the //// section. Each of those buttons have an //onclick// handler, calling a //startTask// function with the name of the task to be started. This //startTask// function is defined in the //