test4/TestPage.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> \r
   2 <html> \r
   3         <head> \r
   4         \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
   7 \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
  11 \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
  14 \r
  15         <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>\r
  16 \r
  17 \r
  18                 <script type="text/javascript" src="./js/loadJSON.js"></script>\r
  19 \r
  20                 <script type="text/javascript" src="./js/buttonFunction.js"></script>\r
  21                 <script type="text/javascript" src="./js/jquery.rollover.js"></script>\r
  22 \r
  23                 <script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
  24 \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
  28 \r
  29                 <script type="text/javascript" src="./js/voronoi.js"></script>\r
  30 \r
  31 <script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
  32 \r
  33 \r
  34         <script type="text/javascript" src="./js/jquery.cookie.js"></script> \r
  35 \r
  36 \r
  37 \r
  38 \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
  44 \r
  45         <script type="text/javascript" src="./js_basic/prettify/prettify.js"></script>\r
  46 \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
  49 \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
  53 \r
  54 \r
  55 \r
  56 \r
  57                 <script type="text/javascript">\r
  58 <!--\r
  59                         var naviwidth = 200;\r
  60                         var naviheight = 800;\r
  61 \r
  62 \r
  63                         //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
  64                         var currentselectedID = "basiccode_step1";\r
  65 \r
  66                         //JSONからデータを利用するためindex\r
  67                         var currentselectedIndex;\r
  68 \r
  69                         //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
  70                         var professionalIndexs = new Array();\r
  71 \r
  72                         //library.jsonから読み込んだデータを格納する配列\r
  73                         var librarys;\r
  74 \r
  75                         //JSONデータをひとまとめにした配列\r
  76                         var nodedatas;\r
  77 \r
  78                         //現在開いているページのカテゴリのJSONデータを格納する配列\r
  79                         var currentselectedCategory;\r
  80 \r
  81 \r
  82                         var lang = "jp";\r
  83 \r
  84                         if (window.location.search.length != 0) {\r
  85                                 var temppath = window.location.search.substring(1);\r
  86 \r
  87                                 //lang取得\r
  88                                 if (temppath != null) {\r
  89                                         var templang = temppath.split('=');\r
  90                                         if (templang[0] == "lang" && templang[1] == "en") {\r
  91                                                 lang = "en";\r
  92                                         }\r
  93                                 }\r
  94                         }\r
  95 \r
  96 \r
  97 \r
  98 \r
  99                         //JSONを読み込み、処理を開始\r
 100                         window.onload = function () {\r
 101                                 loadParams('./json/library.json', callbackFunc);\r
 102                         }\r
 103 \r
 104                         function callbackFunc(params) {\r
 105                                 librarys = params.library;\r
 106                                 loadParams('./json/datas.json', callbackFunc1);\r
 107                         }\r
 108 \r
 109 \r
 110 \r
 111                         function callbackFunc1(params) {\r
 112 \r
 113                                 currentselectedCategory = params.articles;\r
 114 \r
 115                                 //現在開いているページのIDから、data.jsonの配列インデックスを取得\r
 116                                 for (i = 0; i < currentselectedCategory.length; i++) {\r
 117                                         if (currentselectedCategory[i].id == currentselectedID) currentselectedIndex = i;\r
 118                                 }\r
 119 \r
 120 \r
 121                                 var paper = Raphael("navi", naviwidth, naviheight);\r
 122 \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
 128 \r
 129 \r
 130                                 //位置を生成\r
 131                                 var posdatas = setPos(nodedatas.length, naviwidth - 100, naviheight - 200, 50, 160);\r
 132 \r
 133 \r
 134                                 //母点を生成\r
 135                                 var generatrices_data = createNode(nodedatas, posdatas, naviwidth, naviheight, paper, lang);\r
 136 \r
 137                                 //ボロノイを生成\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
 141 \r
 142                                         pa.attr({ "stroke-width": "0.8" });\r
 143                                         pa.attr({ "stroke": "#9D95A4" });\r
 144                                         pa.attr({ "opacity": "0.8" });\r
 145                                 }\r
 146 \r
 147 \r
 148                                 var flgx = 88;\r
 149                                 var flgy = 54;\r
 150                                 flg = paper.image("./img/currentpos.png", flgx, 0, 25, 77);\r
 151 \r
 152 \r
 153 \r
 154                                 //言語を切り替える時に使う\r
 155                                 url = currentselectedCategory[currentselectedIndex].url;\r
 156 \r
 157 \r
 158                                 $('#header').html(\r
 159                                 '<span class="highlight"><a href="./index.html"><img id="smalllogo" src="./img/logo_small.png" /></a></span>'\r
 160 \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
 164                                 + '</div>'\r
 165                                 + '<div class="space30px"></div>'\r
 166                                 + '<h1>Library</h1>'\r
 167                         );\r
 168 \r
 169                                 $('#tutoriallink1').html(\r
 170                                 "<a href='./basiccode_step1.html?lang=" + lang + "'>"\r
 171                                 + "<img src='./img/articles/basiccode01.jpg' />"\r
 172                                 + "</a>"\r
 173                         );\r
 174 \r
 175                                 $('#tutoriallink2').html(\r
 176                                 "<a href='./basiccode_step2.html?lang=" + lang + "'>"\r
 177                                 + "<img src='./img/articles/basiccode02.jpg' />"\r
 178                                 + "</a>"\r
 179                         );\r
 180 \r
 181 \r
 182                                 setButton(lang);\r
 183 \r
 184                                 $('.highlight a img').rollover();\r
 185 \r
 186                                 if (lang == "en") {\r
 187                                         $("#japanese").hover(function () {\r
 188                                                 $(this).css("cursor", "pointer");\r
 189                                         }, function () {\r
 190                                                 $(this).css("cursor", "default");\r
 191                                         });\r
 192                                 }\r
 193 \r
 194                                 if (lang == "jp") {\r
 195                                         $("#english").hover(function () {\r
 196                                                 $(this).css("cursor", "pointer");\r
 197                                         }, function () {\r
 198                                                 $(this).css("cursor", "default");\r
 199                                         });\r
 200                                 }\r
 201                         }\r
 202 \r
 203 \r
 204                         $(document).ready(function () {\r
 205                                 $(".tooltip").tipTip({\r
 206                                         maxWidth: "auto",\r
 207                                         edgeOffset: 0,\r
 208                                         fadeIn: 0,\r
 209                                         activation: "hover", //click\r
 210                                         defaultPosition: "top"\r
 211                                 });\r
 212                         });\r
 213 \r
 214 //-->\r
 215                 </script>\r
 216 \r
 217         </head>\r
 218 \r
 219 <body>\r
 220 <div id="wrapper">\r
 221 \r
 222         <div id="navi">\r
 223         <!-- #navi --></div>\r
 224         \r
 225         <div id="contents">\r
 226 \r
 227                 <div id="header"></div>\r
 228 \r
 229 \r
 230                 <div id="title"><h2>Basic Code Step1 </h2></div>\r
 231 \r
 232                 <div class="space30px"></div>\r
 233 \r
 234                 <div id="codecontents">\r
 235         \r
 236                 <div id="code" style="float:left; width:400px;">\r
 237 \r
 238 <pre id="main_code" class="main prettyprint cpp">\r
 239 ///+ Prefix\r
 240 //// Lines for set up Psychlops environment\r
 241 #include &lt;psychlops.h&gt;\r
 242 using namespace Psychlops;\r
 243 ///- Prefix\r
 244  \r
 245 ///+ Main Routine\r
 246 //// Psychlops runs at the first line of this function psychlops_main().\r
 247 void psychlops_main() {\r
 248         ///+ 1\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
 253         ///- 1\r
 254         \r
 255         ///+ 2\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
 258     \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
 263     \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
 266         ///- 2\r
 267     \r
 268         ///+ 3 \r
 269         //// Detect a Keyboard input\r
 270     while(!Keyboard::esc.pushed()) {} //exit a program when the escape key is pressed down.\r
 271     ///- 3\r
 272  \r
 273 }\r
 274 ///- Main Routine\r
 275 \r
 276 </pre>\r
 277 \r
 278         <!-- #code --></div>\r
 279 \r
 280 \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
 283         </div>\r
 284 \r
 285         <!-- #codecontents --></div>\r
 286 \r
 287         <div class="clearfix"></div>\r
 288 \r
 289 \r
 290         <div style="text-align:right;">\r
 291         <a class="txt" style="margin-right:200px;" href="./basiccode_step2.html">Next Step>></a>\r
 292         </div>\r
 293 \r
 294         <div class="space40px"></div>\r
 295         \r
 296         <div id="comment">\r
 297                 上記の文字は<b>Psychlopsのコード</b>です。そしてコードの実行結果はコード右のウィンドウに表示されています。<br />\r
 298                 コード内の<b>太文字をクリック</b>するとマウス操作で値を変えることができ、結果がすぐに反映されます。\r
 299                 また、コード内の<b>青い文字をロールオーバ</b>すると、ポップアップで説明が現れます。\r
 300         <!-- #comment --></div>\r
 301 \r
 302 </div>\r
 303 <!-- #wrapper --></div>\r
 304 </body>\r
 305 </html>\r