Notes of a Developer » FireFox

Use Matrix of rotate +MozOrientation

Vladimir Boychentsov — Sun, 24 Jan 2010 14:23:12 +0000

Previous post is simple example of usage MozOrientation. But now i use Matrix of rotate and i have nice animation.

You can read many information about Matrix of rotate here. These methods are used in game development, make animations and many others.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var context = drawingCanvas.getContext('2d');

var xc = 75;
var yc = 75;
var xi = 0;
var yi = 0;

var myImage = new Image();

var angle = (Math.PI/2)*-o.x;
myImage.onload = function() {
context.clearRect(0,0,150,150);
context.save();

xi = xi*Math.cos(angle)-yi*Math.sin(angle)-xc;
yi = yi*Math.sin(angle)+yi*Math.cos(angle)-yc;

context.translate( xc , yc);

context.rotate(angle);
context.scale(1+o.y,1+o.y);
context.drawImage(myImage, xi, yi);

context.restore();
}
myImage.src = "feedme.png";

Result:

Your browser doesn’t support canvas.

JavaScript examples for MozOrientation of FireFox 3.6

Vladimir Boychentsov — Sat, 23 Jan 2010 21:43:53 +0000

Today i present new feature of FireFox 3.6 – MozOrientation

With Canvas and MozOrientaion you will get nice web site!

Please look on my icons of Feed and Twitter! :)

My twitter source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

1	<body onload="init()">

Example for handle orientation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>
<head>
<style>
p { font-size: 12px;
color: rgb(0, 220, 98);
background-color: black;
}
body { background-color: black; }
</style>

<script>
var count = 0;

function handleOrientation(orientData) {
count++;
var d = document.getElementById("display");
d.innerHTML = "<p> count = " + count + "<p> x = " + orientData.x + "<p> y = " + orientData.y + "<p> z = " + orientData.z;
}

window.addEventListener("MozOrientation", handleOrientation, true);
</script>
</head>

<body>
<div id="display">
</body>
</html>

example

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics.

Nice feature in firefox Saving a canvas image to a file

And many information about it in apple documentation

Additional

Yandex тиЦ

Vladimir Boychentsov — Sun, 30 Aug 2009 19:35:29 +0000

Обновлено расширение для FF :)

https://addons.mozilla.org/ru/firefox/addon/8945

Yandex тИЦ status bar 1.1

Vladimir Boychentsov — Wed, 11 Mar 2009 09:38:37 +0000

Мелочь а приятно :)

https://addons.mozilla.org/ru/firefox/addon/8945#reviews

Спасибо за комменты под плагином :)

Yandex тИЦ в статус баре FireFox`a

Vladimir Boychentsov — Sat, 20 Sep 2008 12:52:13 +0000

Искал расширение(extention) для Firefox которое показывает в статус баре(status bar) один Yandex тИЦ. Нашел, но оно уже не работает в новом FireFox 3. Пришлось написать своё :)

Пару часов лазанья по интернету и экспериментов и результат на лицо:

Человек я добрый :)

Поделюсь своей работай Yandex тИЦ

Будут вопросы, пишите.

Строка состояния в full screen FireFox

Vladimir Boychentsov — Thu, 18 Sep 2008 21:16:18 +0000

Рылся по ру нету, но ничего не нашел на свой вопрос:
“Как сделать отображаемой строку состояния(statusbar) в полноэкранном режиме (full screen) браузера firefox?”

Может и не так нужно было поставить вопрос :)

Мне строка состояния очень нужна для разработки, т.к. я работаю на ноутбуке. Экрана соответственно маловато, а в статус баре firebug, всякие статистики по загрузке страницы, gmail и пузомерка(для интереса).

Почитавши доки браузера нашел то, что мне нужно, чудо файлик userChrome.css!

Чтоб появился статус бар нужно в нем прописать:

1
2
3
4

#status-bar
{
visibility: visible !important;
}

Вот и все!

Наслаждаемся!