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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<html>
<style type="text/css">
#textarea {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
white-space:nowrap;
font-family: sans;
padding:0px;
margin:0px;
border:0px;
text-align:center;
overflow:hidden;
}
#test {
position:absolute;
visibility:hidden;
top:0px;
left:0px;
font-size:30px;
white-space:pre;
font-family: sans;
border:0px;
padding:0.1em;
margin:0px;
}
#about {
position:absolute;
width:20em;
top:30px;
right:30px;
background-color:gray;
padding:1em;
}
</style>
<script type="text/javascript">
opacity = 100;
function adjust() {
ta = document.getElementById("textarea");
test = document.getElementById("test");
body = document.getElementById("test");
test.innerHTML=ta.value;
// Otherwise, the newline would not be counted.
if (ta.value[ta.value.length-1] == "\n") {
test.innerHTML += '.';
}
ratioX = (window.innerWidth) / test.offsetWidth;
ratioY = (window.innerHeight) / test.offsetHeight;
ratio = Math.min(ratioX,ratioY);
fontSize = Math.floor(30 * ratio) + "px"
ta.style.fontSize = fontSize;
newHeight = Math.ceil(test.offsetHeight * ratio);
//ta.style.height = newHeight + "px";
//ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
newWidth = Math.ceil(test.offsetWidth * ratio);
//ta.style.width = newWidth + "px";
ta.style.paddingLeft = Math.floor((window.innerWidth - newWidth)/2) + "px";
ta.style.paddingRight = Math.floor((window.innerWidth - newWidth)/2) + "px";
//test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
}
function showBox() {
opacity = 100;
window.clearTimeout(timeout);
setOpacity();
}
function fadeOut() {
opacity *= 0.985;
if (opacity > 1) {
timeout = window.setTimeout("fadeOut()",20);
} else {
opacity = 0;
}
setOpacity();
}
function setOpacity() {
about = document.getElementById("about");
about.style.opacity = opacity/100;
about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
}
function init() {
ta = document.getElementById("textarea");
ta.focus();
adjust();
timeout = window.setTimeout("fadeOut();",1000);
setOpacity();
}
</script>
<body onload="init()">
<textarea id="textarea" onKeyUp="adjust()">:-)</textarea>
<span id="test"></span>
<div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
<p>
This is an online-version of the program <strong>screen-message</strong> for Linux.
</p>
<p>
For more information about the original program, see what <a href="http://debaday.debian.net/2007/07/18/screen-message-use-your-screen-to-communicate/">Deb-a-Day</a> writes about it. You can download it from <a href="http://packages.debian.org/sid/sm">Debian</a> or <a href="http://darcs.nomeata.de/screen-message.upstream/">fetch the sourcecode</a>.
</p>
<p>
<strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
</p>
</div>
</body>
</html>
|
