--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> \r
+<html> \r
+ <head> \r
+ \r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
+ <meta http-equiv="Content-Style-Type" content="text/css" />\r
+\r
+ <link rel="stylesheet" href="./css/import.css" type="text/css" media="screen,print" />\r
+ <link rel="stylesheet" href="./css/jquery.lightbox-0.5.css" type="text/css" media="screen" />\r
+<link rel="stylesheet" href="./css/tipTip.css" type="text/css" /> \r
+\r
+ <script type="text/javascript" src="./js/raphael-min.js"></script> \r
+ <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>\r
+\r
+ <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>\r
+\r
+\r
+ <script type="text/javascript" src="./js/loadJSON.js"></script>\r
+\r
+ <script type="text/javascript" src="./js/buttonFunction.js"></script>\r
+ <script type="text/javascript" src="./js/jquery.rollover.js"></script>\r
+\r
+ <script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
+\r
+ <script type="text/javascript" src="./js/setPos.js"></script>\r
+ <script type="text/javascript" src="./js/createNode.js"></script>\r
+ <script type="text/javascript" src="./js/createVoronoi.js"></script>\r
+\r
+ <script type="text/javascript" src="./js/voronoi.js"></script>\r
+\r
+<script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
+\r
+\r
+ <script type="text/javascript" src="./js/jquery.cookie.js"></script> \r
+\r
+\r
+\r
+\r
+ <link type="text/css" href="./css_basic/south-street/jquery-ui-1.8.2.custom.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="./js_basic/fg.menu.js"></script>\r
+ <link type="text/css" href="./css_basic/fg.menu.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="./js_basic/jQuery.spinTheWheel.js"></script>\r
+ <script type="text/javascript" src="./js_basic/jquery.highlight-3.js"></script>\r
+\r
+ <script type="text/javascript" src="./js_basic/prettify/prettify.js"></script>\r
+\r
+ <script type="text/javascript" src="./js_basic/silverlight_host.js"></script>\r
+ <link rel="stylesheet" type="text/css" href="./css_basic/silverlight_host.css" media="all">\r
+\r
+ <script type="text/javascript" src="./js_basic/basiccode.js"></script>\r
+ <script type="text/javascript" src="./js_basic/basiccode_function_highlighter.js"></script>\r
+ <link rel="stylesheet" type="text/css" href="./css_basic/basiccode.css" media="all">\r
+\r
+\r
+\r
+\r
+ <script type="text/javascript">\r
+<!--\r
+ var naviwidth = 200;\r
+ var naviheight = 800;\r
+\r
+\r
+ //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
+ var currentselectedID = "basiccode_step1";\r
+\r
+ //JSONからデータを利用するためindex\r
+ var currentselectedIndex;\r
+\r
+ //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
+ var professionalIndexs = new Array();\r
+\r
+ //library.jsonから読み込んだデータを格納する配列\r
+ var librarys;\r
+\r
+ //JSONデータをひとまとめにした配列\r
+ var nodedatas;\r
+\r
+ //現在開いているページのカテゴリのJSONデータを格納する配列\r
+ var currentselectedCategory;\r
+\r
+\r
+ var lang = "jp";\r
+\r
+ if (window.location.search.length != 0) {\r
+ var temppath = window.location.search.substring(1);\r
+\r
+ //lang取得\r
+ if (temppath != null) {\r
+ var templang = temppath.split('=');\r
+ if (templang[0] == "lang" && templang[1] == "en") {\r
+ lang = "en";\r
+ }\r
+ }\r
+ }\r
+\r
+\r
+\r
+\r
+ //JSONを読み込み、処理を開始\r
+ window.onload = function () {\r
+ loadParams('./json/library.json', callbackFunc);\r
+ }\r
+\r
+ function callbackFunc(params) {\r
+ librarys = params.library;\r
+ loadParams('./json/datas.json', callbackFunc1);\r
+ }\r
+\r
+\r
+\r
+ function callbackFunc1(params) {\r
+\r
+ currentselectedCategory = params.articles;\r
+\r
+ //現在開いているページのIDから、data.jsonの配列インデックスを取得\r
+ for (i = 0; i < currentselectedCategory.length; i++) {\r
+ if (currentselectedCategory[i].id == currentselectedID) currentselectedIndex = i;\r
+ }\r
+\r
+\r
+ var paper = Raphael("navi", naviwidth, naviheight);\r
+\r
+ //カテゴリ別に分けられたJSONのデータをひとまとめにする\r
+ var nodedatas = new Array();\r
+ for (i = 0; i < params.visiondemo.length; i++) { nodedatas.push(params.visiondemo[i]); }\r
+ for (i = 0; i < params.blogparts.length; i++) { nodedatas.push(params.blogparts[i]); }\r
+ for (i = 0; i < params.articles.length; i++) { nodedatas.push(params.articles[i]); }\r
+\r
+\r
+ //位置を生成\r
+ var posdatas = setPos(nodedatas.length, naviwidth - 100, naviheight - 200, 50, 160);\r
+\r
+\r
+ //母点を生成\r
+ var generatrices_data = createNode(nodedatas, posdatas, naviwidth, naviheight, paper, lang);\r
+\r
+ //ボロノイを生成\r
+ var lines = setVoronoi(posdatas, naviwidth, naviheight);\r
+ for (n = 0; n < lines.length; n++) {\r
+ pa = paper.path("M" + lines[n].sx + " " + lines[n].sy + " L" + lines[n].ex + " " + lines[n].ey);\r
+\r
+ pa.attr({ "stroke-width": "0.8" });\r
+ pa.attr({ "stroke": "#9D95A4" });\r
+ pa.attr({ "opacity": "0.8" });\r
+ }\r
+\r
+\r
+ var flgx = 88;\r
+ var flgy = 54;\r
+ flg = paper.image("./img/currentpos.png", flgx, 0, 25, 77);\r
+\r
+\r
+\r
+ //言語を切り替える時に使う\r
+ url = currentselectedCategory[currentselectedIndex].url;\r
+\r
+\r
+ $('#header').html(\r
+ '<span class="highlight"><a href="./index.html"><img id="smalllogo" src="./img/logo_small.png" /></a></span>'\r
+\r
+ + '<div style="text-align:right; float:right;" >'\r
+ + '<img id="japanese" src="./img/japanese.png" onclick="buttonJP(url,0)" />'\r
+ + '<img id="english" src="./img/english.png" onclick="buttonEN(url,0)"/>'\r
+ + '</div>'\r
+ + '<div class="space30px"></div>'\r
+ + '<h1>Library</h1>'\r
+ );\r
+\r
+ $('#tutoriallink1').html(\r
+ "<a href='./basiccode_step1.html?lang=" + lang + "'>"\r
+ + "<img src='./img/articles/basiccode01.jpg' />"\r
+ + "</a>"\r
+ );\r
+\r
+ $('#tutoriallink2').html(\r
+ "<a href='./basiccode_step2.html?lang=" + lang + "'>"\r
+ + "<img src='./img/articles/basiccode02.jpg' />"\r
+ + "</a>"\r
+ );\r
+\r
+\r
+ setButton(lang);\r
+\r
+ $('.highlight a img').rollover();\r
+\r
+ if (lang == "en") {\r
+ $("#japanese").hover(function () {\r
+ $(this).css("cursor", "pointer");\r
+ }, function () {\r
+ $(this).css("cursor", "default");\r
+ });\r
+ }\r
+\r
+ if (lang == "jp") {\r
+ $("#english").hover(function () {\r
+ $(this).css("cursor", "pointer");\r
+ }, function () {\r
+ $(this).css("cursor", "default");\r
+ });\r
+ }\r
+ }\r
+\r
+\r
+ $(document).ready(function () {\r
+ $(".tooltip").tipTip({\r
+ maxWidth: "auto",\r
+ edgeOffset: 0,\r
+ fadeIn: 0,\r
+ activation: "hover", //click\r
+ defaultPosition: "top"\r
+ });\r
+ });\r
+\r
+//-->\r
+ </script>\r
+\r
+ </head>\r
+\r
+<body>\r
+<div id="wrapper">\r
+\r
+ <div id="navi">\r
+ <!-- #navi --></div>\r
+ \r
+ <div id="contents">\r
+\r
+ <div id="header"></div>\r
+\r
+\r
+ <div id="title"><h2>Basic Code Step1 </h2></div>\r
+\r
+ <div class="space30px"></div>\r
+\r
+ <div id="codecontents">\r
+ \r
+ <div id="code" style="float:left; width:400px;">\r
+\r
+<pre id="main_code" class="main prettyprint cpp">\r
+///+ Prefix\r
+//// Lines for set up Psychlops environment\r
+#include <psychlops.h>\r
+using namespace Psychlops;\r
+///- Prefix\r
+ \r
+///+ Main Routine\r
+//// Psychlops runs at the first line of this function psychlops_main().\r
+void psychlops_main() {\r
+ ///+ 1\r
+ //// Set a window for drawing stimulus\r
+ Canvas window(Canvas::window); //Create a window. Here, window variables are preset mode.\r
+ // You can write this statement as" Canvas window(Canvas::fullscreen); " for fullscreen mode\r
+ // or as " Canvas window(1024, 768, 32, 60.0); " This statement changes screenmode to 1024 x 768, 32bit color, 60 Hz refresh.\r
+ ///- 1\r
+ \r
+ ///+ 2\r
+ //// Set a figure size, position and color.\r
+ Psychlops::Rectangle/*ID:FIGURE selector Rectangle Ellipse*/ figure; //Create a figure (Rectangle or Ellipse) variable.\r
+ \r
+ figure.set( 100/*ID:SIZE_X 1 200 10*/, 100/*ID:SIZE_Y 1 200 10*/ ); // Set the size of figure.\r
+ figure.centering(); // Centering the figure in the window\r
+ figure.shift( 10/*ID:SHIFT_X -100 100 10*/, 10/*ID:SHIFT_Y -100 100 10*/ ); // Displacing the figure by designated vector. \r
+ 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
+ \r
+ window.flip(); // Reflect the drawing for the display by flipping frame buffers.\r
+ // Till this point, you will not see drawn figures.\r
+ ///- 2\r
+ \r
+ ///+ 3 \r
+ //// Detect a Keyboard input\r
+ while(!Keyboard::esc.pushed()) {} //exit a program when the escape key is pressed down.\r
+ ///- 3\r
+ \r
+}\r
+///- Main Routine\r
+\r
+</pre>\r
+\r
+ <!-- #code --></div>\r
+\r
+\r
+ <div id="window" style="float:left; width:200px; height:300px; ">\r
+ <div class="desc_child"><span id="xap">Bin/Debug/PsychlopsSilverlight4test.xap</span></div>\r
+ </div>\r
+\r
+ <!-- #codecontents --></div>\r
+\r
+ <div class="clearfix"></div>\r
+\r
+\r
+ <div style="text-align:right;">\r
+ <a class="txt" style="margin-right:200px;" href="./basiccode_step2.html">Next Step>></a>\r
+ </div>\r
+\r
+ <div class="space40px"></div>\r
+ \r
+ <div id="comment">\r
+ 上記の文字は<b>Psychlopsのコード</b>です。そしてコードの実行結果はコード右のウィンドウに表示されています。<br />\r
+ コード内の<b>太文字をクリック</b>するとマウス操作で値を変えることができ、結果がすぐに反映されます。\r
+ また、コード内の<b>青い文字をロールオーバ</b>すると、ポップアップで説明が現れます。\r
+ <!-- #comment --></div>\r
+\r
+</div>\r
+<!-- #wrapper --></div>\r
+</body>\r
+</html>\r
OSDN Git Service
