HTML canvas resize and mouse coordinates

Posted on April 10, 2015 by Alex

If you are using canvas with predefined width and height you probably know that resizing the window and canvas result in size not always the same as the screen.

This is annoying especially for retrieving mouse coordinates exactly matching with the canvas size instead of the window size.

Here is an idea on how to stretch the canvas and still keep the coordinates correct for the original dimension:

canvasName = "mycanvas";

document.getElementById(canvasName).addEventListener('mousemove', function(evt) {
    var xy = getMousePos(evt);

    var position = (xy.x) + ', ' + (xy.y);

    alert(position);
}

function getMousePos(evt) {
    var rect = document.getElementById(canvasName).getBoundingClientRect();

    var X = (evt.clientX - rect.left) / (document.getElementById(canvasName).clientWidth / document.getElementById(canvasName).width);
    var Y = (evt.clientY - rect.top) / (document.getElementById(canvasName).clientHeight / document.getElementById(canvasName).height);
    X = Math.ceil(X);
    Y = Math.ceil(Y);

    return {
        x: X,
        y: Y
    };
}

canvasName = "mycanvas";

document.getElementById(canvasName).addEventListener('mousemove', function(evt) {

var xy = getMousePos(evt);

var position = (xy.x) + ', ' + (xy.y);

alert(position);

}

function getMousePos(evt) {

var rect = document.getElementById(canvasName).getBoundingClientRect();

var X = (evt.clientX - rect.left) / (document.getElementById(canvasName).clientWidth / document.getElementById(canvasName).width);

var Y = (evt.clientY - rect.top) / (document.getElementById(canvasName).clientHeight / document.getElementById(canvasName).height);

X = Math.ceil(X);

Y = Math.ceil(Y);

return {

x: X,

y: Y

};

}

Yii CSqlDataProvider sort

Posted on September 10, 2014 by Alex

In order to sort Yii CSqlDataProvider you have to pass CSort() object to it.

		$sort = new CSort();
		$sort->attributes = array(
				'id' => array(
						'asc' => 'table.id',
						'desc' => 'table.id DESC'
				),
				'value1' => array(
						'asc' => 'table.value1',
						'desc' => 'table.value1 DESC'
				)
		);

$sort = new CSort();

$sort->attributes = array(

'id' => array(

'asc' => 'table.id',

'desc' => 'table.id DESC'

'value1' => array(

'asc' => 'table.value1',

'desc' => 'table.value1 DESC'

)

);

In case the CSqlDataProvider is not sorted you should probably check your query passed to the object. Pay attention not to add a semicolon at the end of your query.

$query = "SELECT * FROM table1";
		$dataProvider = new CSqlDataProvider($query, array(
				'totalItemCount'=> $count1,
				'sort'          => $sort,
				'params' => array(),
				'pagination'    => array(
						'pageSize'=> 300
				)
		));

$query = "SELECT * FROM table1";

$dataProvider = new CSqlDataProvider($query, array(

'totalItemCount'=> $count1,

'sort' => $sort,

'params' => array(),

'pagination' => array(

'pageSize'=> 300

)

));

Redirect with Timer in PHP

Posted on July 1, 2014 by Alex

How you can make a redirect with PHP after a specific number of seconds ?

There are three options available:
The first one is to use a meta refresh

<meta http-equiv="refresh" content="10;url=http://yoursite.com">

1	<meta http-equiv="refresh" content="10;url=http://yoursite.com">

or a javascript function:

setTimeout(function(){
  window.location = "http://yoursite.com";
}, 10000);

setTimeout(function(){

window.location = "http://yoursite.com";

}, 10000);

You can however use the PHP function header with the following sintax:

header('Refresh: 10; URL=http://yoursite.com');

1	header('Refresh: 10; URL=http://yoursite.com');

Image (of unknown size) vertically centered inside a div in css

Posted on May 4, 2014 by Alex

You may have encountered the complexity of centering an image inside a div vertically similar to what was possible with table cell (<td>) and valign property (valign=middle)

Here is an example on how to do it with CSS

<style>
div.holder {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    display: table-cell;
    height: 300px;
    text-align: center;
    vertical-align: middle;
    width: 748px;
}
</style>


<div class="holder">
	<span id="container">
		<img src="image.png">
	</span>
</div>

<br clear='all' />
<div class="holder">
	<span id="container">
		<img src="image2.png">
	</span>
</div>

<br clear='all' />
<div class="holder">
	<span id="container">
		<img src="image3.png">
	</span>
</div>

<style>

div.holder {

background: none repeat scroll 0 0 #FFFFFF;

border: 1px solid #DDDDDD;

display: table-cell;

height: 300px;

text-align: center;

vertical-align: middle;

width: 748px;

}

</style>

</span>

</div>

</span>

</div>

</span>

</div>

Amiga UAE experiment page – HTML Javascript emulator online

Posted on May 1, 2014 by Alex

Scripted Amiga Emulator is an online emulator of Amiga demo and games running on your browser.

The site is the homepage of the project SAE, an experimental Amiga emulator in pure JavaScript and HTML5. SAE is based on WinUAE and does use the AROS-kickstart replacement. For more details, please see the description.

You can access the emaultion from: http://www.scriptedamigaemulator.net

For additional information on the emulator: http://www.scriptedamigaemulator.net/readme.htm

The Amiga is a family of personal computers sold by Commodore in the 1980s and 1990s. Based on the Motorola 68000 family of microprocessors, the machine has a custom chipset with graphics and sound capabilities that were unprecedented for the price, and a pre-emptive multitasking operating system called AmigaOS (source wikipedia).

Amiga OS4.1 browser emulator

Posted on May 1, 2014 by Alex

Here is a wonderful emulation of AmigaOS4.1 workbench running in browser window. There are some applications you can launch and you can play with the User Interface and some Preferences (configuration) options.

http://www.taws.ch/WB.html

Prevent iCloud backup of Phonegap’s localstorage

Posted on April 29, 2014 by Alex

In a defalt setup (Phonegap 2.8.1), localstorage is marked for backup to iCloud. This may get your app rejected by Apple, depending on the size with the following rejection motivation:

The iOS Data Storage Guidelines indicate that only content that the user creates using your app, e.g., documents, new files, edits, etc., should be backed up by iCloud.

To prevent this to happen you can use the BackupWebStorage option in config.xml file. You can set BackupWebStorage to “none” or “local”

<preference name="BackupWebStorage" value="none" />

1	<preference name="BackupWebStorage" value="none" />

To verify how much data the app is storing Apple suggests the following procedure:

Install and launch your app
Go to Settings > iCloud > Storage & Backup > Manage Storage
If necessary, tap “Show all apps”
Check your app’s storage

Sencha Touch 2 – clear LocalStorage programmatically

Posted on April 29, 2014 by Alex

To clear Browser local storage for current Sencha Touch 2 app you can execute in your code the following javascript:

window.localStorage.clear()

1	window.localStorage.clear()

mysql change root user password

Posted on April 23, 2014 by Alex

A simple way to change root user password is to open SQL box and launch the following query:

UPDATE mysql.user SET Password=PASSWORD(‘password’) WHERE User=’root’; FLUSH PRIVILEGES;

Javascript show parent caller function

Posted on April 10, 2014 by Alex

A good practice to use especially when the Javascript code gets particularly complicated is to show an alert with the caller of the current function. This can be done with the following code:

alert(“caller is ” + arguments.callee.caller.toString());

ictKnowledge

ICT Knowledge Base

Author Archives: Alex

HTML canvas resize and mouse coordinates

Yii CSqlDataProvider sort

Redirect with Timer in PHP

Image (of unknown size) vertically centered inside a div in css

Amiga UAE experiment page – HTML Javascript emulator online

Amiga OS4.1 browser emulator

Prevent iCloud backup of Phonegap’s localstorage

Sencha Touch 2 – clear LocalStorage programmatically

mysql change root user password

Javascript show parent caller function