1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
6 <meta http-equiv="Content-Style-Type" content="text/css" />
\r
8 <link rel="stylesheet" href="./css/import.css" type="text/css" media="screen,print" />
\r
9 <link rel="stylesheet" href="./css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
\r
10 <link rel="stylesheet" href="./css/tipTip.css" type="text/css" />
\r
12 <script type="text/javascript" src="./js/raphael-min.js"></script>
\r
13 <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
\r
15 <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>
\r
18 <script type="text/javascript" src="./js/loadJSON.js"></script>
\r
20 <script type="text/javascript" src="./js/buttonFunction.js"></script>
\r
21 <script type="text/javascript" src="./js/jquery.rollover.js"></script>
\r
23 <script type="text/javascript" src="./js/jquery.tipTip.js"></script>
\r
25 <script type="text/javascript" src="./js/setPos.js"></script>
\r
26 <script type="text/javascript" src="./js/createNode.js"></script>
\r
27 <script type="text/javascript" src="./js/createVoronoi.js"></script>
\r
29 <script type="text/javascript" src="./js/voronoi.js"></script>
\r
31 <script type="text/javascript" src="./js/jquery.tipTip.js"></script>
\r
34 <script type="text/javascript" src="./js/jquery.cookie.js"></script>
\r
39 <link type="text/css" href="./css_basic/south-street/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
\r
40 <script type="text/javascript" src="./js_basic/fg.menu.js"></script>
\r
41 <link type="text/css" href="./css_basic/fg.menu.css" rel="stylesheet" />
\r
42 <script type="text/javascript" src="./js_basic/jQuery.spinTheWheel.js"></script>
\r
43 <script type="text/javascript" src="./js_basic/jquery.highlight-3.js"></script>
\r
45 <script type="text/javascript" src="./js_basic/prettify/prettify.js"></script>
\r
47 <script type="text/javascript" src="./js_basic/silverlight_host.js"></script>
\r
48 <link rel="stylesheet" type="text/css" href="./css_basic/silverlight_host.css" media="all">
\r
50 <script type="text/javascript" src="./js_basic/basiccode.js"></script>
\r
51 <script type="text/javascript" src="./js_basic/basiccode_function_highlighter.js"></script>
\r
52 <link rel="stylesheet" type="text/css" href="./css_basic/basiccode.css" media="all">
\r
57 <script type="text/javascript">
\r
59 var naviwidth = 200;
\r
60 var naviheight = 800;
\r
63 //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID
\r
64 var currentselectedID = "basiccode_step1";
\r
66 //JSONからデータを利用するためindex
\r
67 var currentselectedIndex;
\r
69 //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列
\r
70 var professionalIndexs = new Array();
\r
72 //library.jsonから読み込んだデータを格納する配列
\r
75 //JSONデータをひとまとめにした配列
\r
78 //現在開いているページのカテゴリのJSONデータを格納する配列
\r
79 var currentselectedCategory;
\r
84 if (window.location.search.length != 0) {
\r
85 var temppath = window.location.search.substring(1);
\r
88 if (temppath != null) {
\r
89 var templang = temppath.split('=');
\r
90 if (templang[0] == "lang" && templang[1] == "en") {
\r
100 window.onload = function () {
\r
101 loadParams('./json/library.json', callbackFunc);
\r
104 function callbackFunc(params) {
\r
105 librarys = params.library;
\r
106 loadParams('./json/datas.json', callbackFunc1);
\r
111 function callbackFunc1(params) {
\r
113 currentselectedCategory = params.articles;
\r
115 //現在開いているページのIDから、data.jsonの配列インデックスを取得
\r
116 for (i = 0; i < currentselectedCategory.length; i++) {
\r
117 if (currentselectedCategory[i].id == currentselectedID) currentselectedIndex = i;
\r
121 var paper = Raphael("navi", naviwidth, naviheight);
\r
123 //カテゴリ別に分けられたJSONのデータをひとまとめにする
\r
124 var nodedatas = new Array();
\r
125 for (i = 0; i < params.visiondemo.length; i++) { nodedatas.push(params.visiondemo[i]); }
\r
126 for (i = 0; i < params.blogparts.length; i++) { nodedatas.push(params.blogparts[i]); }
\r
127 for (i = 0; i < params.articles.length; i++) { nodedatas.push(params.articles[i]); }
\r
131 var posdatas = setPos(nodedatas.length, naviwidth - 100, naviheight - 200, 50, 160);
\r
135 var generatrices_data = createNode(nodedatas, posdatas, naviwidth, naviheight, paper, lang);
\r
138 var lines = setVoronoi(posdatas, naviwidth, naviheight);
\r
139 for (n = 0; n < lines.length; n++) {
\r
140 pa = paper.path("M" + lines[n].sx + " " + lines[n].sy + " L" + lines[n].ex + " " + lines[n].ey);
\r
142 pa.attr({ "stroke-width": "0.8" });
\r
143 pa.attr({ "stroke": "#9D95A4" });
\r
144 pa.attr({ "opacity": "0.8" });
\r
150 flg = paper.image("./img/currentpos.png", flgx, 0, 25, 77);
\r
155 url = currentselectedCategory[currentselectedIndex].url;
\r
159 '<span class="highlight"><a href="./index.html"><img id="smalllogo" src="./img/logo_small.png" /></a></span>'
\r
161 + '<div style="text-align:right; float:right;" >'
\r
162 + '<img id="japanese" src="./img/japanese.png" onclick="buttonJP(url,0)" />'
\r
163 + '<img id="english" src="./img/english.png" onclick="buttonEN(url,0)"/>'
\r
165 + '<div class="space30px"></div>'
\r
166 + '<h1>Library</h1>'
\r
169 $('#tutoriallink1').html(
\r
170 "<a href='./basiccode_step1.html?lang=" + lang + "'>"
\r
171 + "<img src='./img/articles/basiccode01.jpg' />"
\r
175 $('#tutoriallink2').html(
\r
176 "<a href='./basiccode_step2.html?lang=" + lang + "'>"
\r
177 + "<img src='./img/articles/basiccode02.jpg' />"
\r
184 $('.highlight a img').rollover();
\r
186 if (lang == "en") {
\r
187 $("#japanese").hover(function () {
\r
188 $(this).css("cursor", "pointer");
\r
190 $(this).css("cursor", "default");
\r
194 if (lang == "jp") {
\r
195 $("#english").hover(function () {
\r
196 $(this).css("cursor", "pointer");
\r
198 $(this).css("cursor", "default");
\r
204 $(document).ready(function () {
\r
205 $(".tooltip").tipTip({
\r
209 activation: "hover", //click
\r
210 defaultPosition: "top"
\r
223 <!-- #navi --></div>
\r
225 <div id="contents">
\r
227 <div id="header"></div>
\r
230 <div id="title"><h2>Basic Code Step1 </h2></div>
\r
232 <div class="space30px"></div>
\r
234 <div id="codecontents">
\r
236 <div id="code" style="float:left; width:400px;">
\r
238 <pre id="main_code" class="main prettyprint cpp">
\r
240 //// Lines for set up Psychlops environment
\r
241 #include <psychlops.h>
\r
242 using namespace Psychlops;
\r
246 //// Psychlops runs at the first line of this function psychlops_main().
\r
247 void psychlops_main() {
\r
249 //// Set a window for drawing stimulus
\r
250 Canvas window(Canvas::window); //Create a window. Here, window variables are preset mode.
\r
251 // You can write this statement as" Canvas window(Canvas::fullscreen); " for fullscreen mode
\r
252 // or as " Canvas window(1024, 768, 32, 60.0); " This statement changes screenmode to 1024 x 768, 32bit color, 60 Hz refresh.
\r
256 //// Set a figure size, position and color.
\r
257 Psychlops::Rectangle/*ID:FIGURE selector Rectangle Ellipse*/ figure; //Create a figure (Rectangle or Ellipse) variable.
\r
259 figure.set( 100/*ID:SIZE_X 1 200 10*/, 100/*ID:SIZE_Y 1 200 10*/ ); // Set the size of figure.
\r
260 figure.centering(); // Centering the figure in the window
\r
261 figure.shift( 10/*ID:SHIFT_X -100 100 10*/, 10/*ID:SHIFT_Y -100 100 10*/ ); // Displacing the figure by designated vector.
\r
262 figure.draw( Color( 1.0/*ID:COLOR_R 0 1.0 0.1*/, 0.0/*ID:COLOR_G 0.0 1.0 0.1*/, 0.0/*ID:COLOR_B 0 1.0 0.1*/) ); // Drawing the rectangle with a designated color.
\r
264 window.flip(); // Reflect the drawing for the display by flipping frame buffers.
\r
265 // Till this point, you will not see drawn figures.
\r
269 //// Detect a Keyboard input
\r
270 while(!Keyboard::esc.pushed()) {} //exit a program when the escape key is pressed down.
\r
278 <!-- #code --></div>
\r
281 <div id="window" style="float:left; width:200px; height:300px; ">
\r
282 <div class="desc_child"><span id="xap">Bin/Debug/PsychlopsSilverlight4test.xap</span></div>
\r
285 <!-- #codecontents --></div>
\r
287 <div class="clearfix"></div>
\r
290 <div style="text-align:right;">
\r
291 <a class="txt" style="margin-right:200px;" href="./basiccode_step2.html">Next Step>></a>
\r
294 <div class="space40px"></div>
\r
297 上記の文字は<b>Psychlopsのコード</b>です。そしてコードの実行結果はコード右のウィンドウに表示されています。<br />
\r
298 コード内の<b>太文字をクリック</b>するとマウス操作で値を変えることができ、結果がすぐに反映されます。
\r
299 また、コード内の<b>青い文字をロールオーバ</b>すると、ポップアップで説明が現れます。
\r
300 <!-- #comment --></div>
\r
303 <!-- #wrapper --></div>
\r