HTML5 Canvas based drawing tool with square footage calculation for various shapes. Built using KineticJS. Will not allow merging of objects once a chamfer has been added. You can edit a shape by moving the orange bar or by entering distances in inches. Add the chamfers once you are done dimensioning the shape.
Please note that the area (shown in the top-right part of the screen) will be incorrect if the shapes self-intersect.
The orange bar will move in one inch increments when dragged with the mouse. Keep the CTRL key pressed to have it move in 0.25 inches increments.
Most of these demos are intended for desktop use. The Canvas size is fixed in the drawing ones and they rely on mouse hover events which are not usually available on phones and tablets.
Another HTML5 Canvas based drawing tool with square footage calculation for various shapes. Built using Paper.js, this one is a lot more flexible when it comes to shapes. You can merge or subtract any shapes, without any restrictions. This is still a work in progress pending integration of a JQuery edit box. Not all the primitives for shapes have been implemented.
Hold down the CTRL key to select multiple shapes for merging or shape subtraction. When you subtract the first shape is retained and the second is used to cut and then removed. If you need to keep the second shape then clone it before the subtraction.
The “Load” and “Save” functionality in Demo 1 and Demo 2 was built with the intention of having these tools run inside a Windows Desktop Application, in a Chromium Browser. The data exchange was based on running these on a LAN using IIS rather than directly on the Web, and it works by writing data to the console.log in JSON format. All the other Demos starting with 3 use API to exchange data between the Web Server and the local session.
This demo showcases data transfer between a Windows program (CGM Program – a granite countertops manufacturing software) and a web application. The web part allows the filtering of records by slab thickness and/or part of the colour description.
All the Demos starting with number 3 use a MySQL database and are written in PHP. Some use JQuery and DevExtreme components.
The data transfer in Demo 3 is unidirectional, from the CGM Program (written in Delphi) to the Web Server database.
This demo allows bi-directional data transfer between a Windows program (a mockup Windows program simulating a granite countertops manufacturing software) and a web application. The web part allows you to reserve slabs and release the reservations as you please. It features PHP, JavaScript and JQuery with a MySQL database. The Windows program can be updated in real time from the Web.
This demo allows the display of the leaderboard scores for a fictional game. The game covers 4 areas, named Ganymede, Callisto, Io and Europa. The top scores are organized by area. The players with the top 10 scores will be shown for each area. For the same score the players will be presented in chronological order of the score submission. The data is kept in a MySQL database, the communication is based on REST API's and the code is PHP, JavaScript and JQuery.