VirtualDesktop.html
1 |
<!DOCTYPE html>
|
---|---|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<style>
|
6 |
.box {
|
7 |
height: 200px;
|
8 |
width: 200px;
|
9 |
display: inline-block;
|
10 |
border: 2px solid;
|
11 |
border-color: rgba(0,250,0, 0.5);
|
12 |
}
|
13 |
.windowIcon {
|
14 |
height: 32px;
|
15 |
width: 32px;
|
16 |
display: inline-block;
|
17 |
border: 1px solid black;
|
18 |
border-radius: 2px;
|
19 |
}
|
20 |
.taskBar {
|
21 |
background: lightgray;
|
22 |
position: relative;
|
23 |
width: 100%;
|
24 |
height: 100%;
|
25 |
}
|
26 |
.right {
|
27 |
position: fixed;
|
28 |
top: 0px;
|
29 |
right: 0px;
|
30 |
height: 100%;
|
31 |
width: 40px;
|
32 |
}
|
33 |
.bottom {
|
34 |
position: fixed;
|
35 |
bottom: 0px;
|
36 |
height: 40px;
|
37 |
width: 100%;
|
38 |
}
|
39 |
.virtualDesktop {
|
40 |
position: fixed;
|
41 |
left: 0px;
|
42 |
top: 0px;
|
43 |
}
|
44 |
.canvas {
|
45 |
position: relative;
|
46 |
width: 100%;
|
47 |
height: 100%;
|
48 |
}
|
49 |
.dock {
|
50 |
}
|
51 |
|
52 |
|
53 |
.tooltip:hover:after{
|
54 |
background: #333;
|
55 |
background: rgba(0,0,0,.8);
|
56 |
border-radius: 5px;
|
57 |
bottom: 26px;
|
58 |
color: #fff;
|
59 |
content: attr(title);
|
60 |
left: 20%;
|
61 |
padding: 5px 15px;
|
62 |
position: absolute;
|
63 |
z-index: 98;
|
64 |
width: 220px;
|
65 |
}
|
66 |
|
67 |
|
68 |
|
69 |
.tooltip{
|
70 |
display: inline;
|
71 |
position: relative;
|
72 |
}
|
73 |
|
74 |
|
75 |
|
76 |
.tooltip:hover:before{
|
77 |
border: solid;
|
78 |
border-color: #333 transparent;
|
79 |
border-width: 6px 6px 0 6px;
|
80 |
bottom: 20px;
|
81 |
content: "";
|
82 |
left: 50%;
|
83 |
position: absolute;
|
84 |
z-index: 99;
|
85 |
}
|
86 |
|
87 |
|
88 |
</style>
|
89 |
<script type="text/javascript" src="./dojo.js"></script> |
90 |
<script type="text/javascript"> |
91 |
var p2j = {};
|
92 |
p2j.isChrome = true;
|
93 |
p2j.chromeVersion = {major : 77};
|
94 |
|
95 |
/**
|
96 |
* Returns the Chrome version object if it is applicable, otherwise undefined value.
|
97 |
*
|
98 |
* @return The Chrome version object filled with major, minor, build and patch numbers.
|
99 |
*/
|
100 |
function getChromeVersion ()
|
101 |
{
|
102 |
var parts = navigator.userAgent.match(/Chrom(?:e|ium)\/([0-9]+)\.([0-9]+)\.([0-9]+)\.([0-9]+)/);
|
103 |
|
104 |
if (parts == null || parts.length != 5) {
|
105 |
return undefined;
|
106 |
}
|
107 |
|
108 |
parts = parts.map(part => parseInt(part, 10));
|
109 |
|
110 |
return {
|
111 |
major: parts[1],
|
112 |
minor: parts[2],
|
113 |
build: parts[3],
|
114 |
patch: parts[4]
|
115 |
};
|
116 |
}
|
117 |
|
118 |
/** The Chrome version */
|
119 |
p2j.chromeVersion = getChromeVersion();
|
120 |
|
121 |
p2j.setStyleForElement = function(element,styles) { dojo.style(element, styles);};
|
122 |
p2j.isDialogDisplayed = function () {
|
123 |
|
124 |
};
|
125 |
p2j.createOffscreenCanvas = function ()
|
126 |
{
|
127 |
/** The off screen canvas to be used to make batch drawing. */
|
128 |
if (p2j.isChrome && (p2j.chromeVersion.major >= 77) && (p2j.chromeVersion.major <= 78))
|
129 |
{
|
130 |
return new OffscreenCanvas(1, 1);
|
131 |
}
|
132 |
|
133 |
return document.createElement('canvas');
|
134 |
}
|
135 |
|
136 |
p2j.screen = {};
|
137 |
p2j.screen.getCurrentFont = function() {return -1;};
|
138 |
</script>
|
139 |
<script type="text/javascript" src="./src/com/goldencode/p2j/ui/client/driver/web/res/p2j.logger.js"></script> |
140 |
<script type="text/javascript" src="./src/com/goldencode/p2j/ui/client/driver/web/res/p2j.fonts.js"></script> |
141 |
<script type="text/javascript" src="./src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js"></script> |
142 |
<script type="text/javascript" src="./src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js"></script> |
143 |
<script type="text/javascript" src="./src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.virtual_desktop.js"></script> |
144 |
<script type="text/javascript"> |
145 |
"use strict";
|
146 |
var taskBar;
|
147 |
|
148 |
|
149 |
|
150 |
window.onload = function()
|
151 |
{
|
152 |
p2j.fonts.init();
|
153 |
p2j.logger.init(1024, true);
|
154 |
var desktop = new VirtualDesktop(null, [174, 174, 174], [144, 144, 144], p2j.fonts, p2j.logger);
|
155 |
taskBar = desktop.getTaskBar();
|
156 |
taskBar.setFont({font: 'sans-serif', size: 8});
|
157 |
taskBar.addTaskIcon(1);
|
158 |
taskBar.setTitleForTask(1, "Window 1");
|
159 |
taskBar.setTaskIconVisible(1, true);
|
160 |
|
161 |
taskBar.addTaskIcon(2);
|
162 |
taskBar.setTitleForTask(2, "Window 2");
|
163 |
taskBar.setTaskIconVisible(2, true);
|
164 |
taskBar.addTaskIcon(3);
|
165 |
taskBar.setTitleForTask(3, "Window 3");
|
166 |
taskBar.setTaskIconVisible(3, true);
|
167 |
taskBar.addTaskIcon(4);
|
168 |
taskBar.setTitleForTask(4, "Window 4 ");
|
169 |
taskBar.setTaskIconVisible(4, true);
|
170 |
taskBar.draw();
|
171 |
|
172 |
}
|
173 |
</script>
|
174 |
|
175 |
</head>
|
176 |
<body>
|
177 |
</body>
|
178 |
</html>
|