\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
+<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/createPos.js"></script>\r
- <script type="text/javascript" src="./js/createLinkButton.js"></script>\r
- <script type="text/javascript" src="./js/createVoronoi.js"></script>\r
- <script type="text/javascript" src="./js/setLangButton.js"></script>\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/createVoronoiLine.js"></script>\r
<script type="text/javascript" src="./js/loadJSON.js"></script>\r
\r
- <script type="text/javascript" src="./js/createLinkButton_psychlops.js"></script>\r
-\r
-\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
- <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>\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
+ <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
- <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
<script type="text/javascript">\r
<!--\r
- var naviwidth=200;\r
- var naviheight=800;\r
+ var naviwidth = 200;\r
+ var naviheight = 800;\r
\r
\r
- //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
- var currentselectedID="basiccode_step1";\r
+ //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
+ var currentselectedID = "basiccode_step1";\r
\r
- //JSONからデータを利用するためindex\r
- var currentselectedIndex;\r
+ //JSONからデータを利用するためindex\r
+ var currentselectedIndex;\r
\r
- //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
- var professionalIndexs=new Array();\r
+ //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
+ var professionalIndexs = new Array();\r
\r
- //library.jsonから読み込んだデータを格納する配列\r
- var librarys;\r
+ //library.jsonから読み込んだデータを格納する配列\r
+ var librarys;\r
\r
- //JSONデータをひとまとめにした配列\r
- var linkbuttondata;\r
+ //JSONデータをひとまとめにした配列\r
+ var nodedatas;\r
\r
+ //現在開いているページのカテゴリのJSONデータを格納する配列\r
+ var currentselectedCategory;\r
\r
- var lang="jp";\r
\r
- //GETからデータを取得\r
- var lang="jp";\r
- if(window.location.search.length!=0){\r
- temppath=window.location.search.substring(1).split('&');\r
+ var lang = "jp";\r
\r
- for (var i=0; i<temppath.length; i++){\r
- var temparray=temppath[i].split('=');\r
+ if (window.location.search.length != 0) {\r
+ var temppath = window.location.search.substring(1);\r
\r
- //コンテンツのIDを取得\r
- if(temparray[0]=="id"){\r
- currentselectedID=temparray[1];\r
-\r
- //言語取得\r
- }else if(temparray[0]=="lang" && temparray[1]=="en"){\r
- lang="en";\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
- //JSONを読み込み、処理を開始\r
- window.onload = function(){\r
\r
- $('#inner').html(\r
- '<div style="float:right;" >'\r
- +'<a href="./index.html?lang='+lang+'"><img id="smalllogo" class="semitransparent" src="./img/logo_small.png" /></a>'\r
- +'</div>'\r
- +'<div class="clearfix"></div>'\r
- \r
\r
- +'<div style="text-align:right;" >'\r
- +'<h1>Articles</h1>'\r
- +'</div>'\r
\r
- +'<h2>'\r
- +"Psychlops Tutorial"\r
- +'</h2>'\r
- );\r
- \r
- var basiccode='using namespace Psychlops;'\r
- +'void psychlops_main() {'\r
- +'Canvas window(Canvas::window);'\r
- +'Psychlops::Rectangle figure;'\r
- +'figure.set( 100, 100 );'\r
- +'figure.centering();'\r
- +'figure.shift( 10, 10 );'\r
- +'figure.draw( Color( 1, 0, 0) );'\r
- +'window.flip();'\r
- +'while(!Keyboard::esc.pushed()){}";'\r
-\r
- $('#showcodebutton').html(\r
- '<form action="./showcode.php" target="_blank" method="POST" enctype="multipart/form-data">'\r
- +'<input type="hidden" name="code" value='+basiccode+' />'\r
- +'<input type="submit" value="Get CS Code! " name="submit" />'\r
- +'</form>'\r
- );\r
-\r
-\r
-\r
-\r
-\r
-\r
-\r
-\r
- var paper=Raphael("basiccode_navi", 800, 260);\r
-\r
- var line;\r
- line =paper.path("M130 140 L180 140");\r
- line.attr({stroke: "#aaaaaa"});\r
- line = paper.path("M230 140 L280 140");\r
- line.attr({stroke: "#aaaaaa"});\r
- line = paper.path("M330 140 L380 140");\r
- line.attr({stroke: "#aaaaaa"});\r
- line = paper.path("M430 140 L480 140");\r
- line.attr({stroke: "#aaaaaa"});\r
- line = paper.path("M530 140 L580 140");\r
- line.attr({stroke: "#aaaaaa"});\r
+ //JSONを読み込み、処理を開始\r
+ window.onload = function () {\r
+ loadParams('./json/library.json', callbackFunc);\r
+ }\r
\r
- createLinkButton_psychlops(100,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode1.html");\r
+ function callbackFunc(params) {\r
+ librarys = params.library;\r
+ loadParams('./json/datas.json', callbackFunc1);\r
+ }\r
\r
- createLinkButton_psychlops(200,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode2.html");\r
\r
- //3-1\r
- createLinkButton_psychlops(300,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1a.html");\r
- createLinkButton_psychlops(300,130+50, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1b.html");\r
- createLinkButton_psychlops(300,130+100, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1c.html");\r
\r
- //3-2\r
- createLinkButton_psychlops(400,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-2a.html");\r
- createLinkButton_psychlops(400,130+50, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-2b.html");\r
- \r
- //4-1\r
- createLinkButton_psychlops(500,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1a.html");\r
- createLinkButton_psychlops(500,130+50, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1b.html");\r
- createLinkButton_psychlops(500,130+100, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1b.html");\r
- \r
- //4-2\r
- createLinkButton_psychlops(600,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2a.html");\r
- createLinkButton_psychlops(600,130+50, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2b.html");\r
- createLinkButton_psychlops(600,130+100, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2b.html");\r
+ function callbackFunc1(params) {\r
\r
+ currentselectedCategory = params.articles;\r
\r
- var txt=paper.text(110, 110,"Step1");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ //現在開いているページのIDから、data.jsonの配列インデックスを取得\r
+ for (i = 0; i < currentselectedCategory.length; i++) {\r
+ if (currentselectedCategory[i].id == currentselectedID) currentselectedIndex = i;\r
+ }\r
\r
\r
- txt=paper.text(210,110,"Step2");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\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
- txt=paper.text(310,110,"Step3-1");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
\r
- txt=paper.text(310+16, 100+38+16,"a");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ //位置を生成\r
+ var posdatas = setPos(nodedatas.length, naviwidth - 100, naviheight - 200, 50, 160);\r
\r
- txt=paper.text(310+16, 100+38+50+16,"b");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
\r
- txt=paper.text(310+16, 100+38+100+16,"c");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\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
- txt=paper.text(410,110,"Step3-2");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ pa.attr({ "stroke-width": "0.8" });\r
+ pa.attr({ "stroke": "#9D95A4" });\r
+ pa.attr({ "opacity": "0.8" });\r
+ }\r
\r
- txt=paper.text(410+16, 100+38+16,"a");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
\r
- txt=paper.text(410+16, 100+38+50+16,"b");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ var flgx = 88;\r
+ var flgy = 54;\r
+ flg = paper.image("./img/currentpos.png", flgx, 0, 25, 77);\r
\r
\r
- txt=paper.text(510,110,"Step4-1");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
\r
- txt=paper.text(510+16, 100+38+16,"a");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ //言語を切り替える時に使う\r
+ url = currentselectedCategory[currentselectedIndex].url;\r
\r
- txt=paper.text(510+16, 100+38+50+16,"b");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
\r
- txt=paper.text(510+16, 100+38+100+16,"c");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\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
- txt=paper.text(610,110,"Step4-2");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ $('#tutoriallink1').html(\r
+ "<a href='./basiccode_step1.html?lang=" + lang + "'>"\r
+ + "<img src='./img/articles/basiccode01.jpg' />"\r
+ + "</a>"\r
+ );\r
\r
- txt=paper.text(610+16, 100+38+16,"a");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
+ $('#tutoriallink2').html(\r
+ "<a href='./basiccode_step2.html?lang=" + lang + "'>"\r
+ + "<img src='./img/articles/basiccode02.jpg' />"\r
+ + "</a>"\r
+ );\r
\r
- txt=paper.text(610+16, 100+38+50+16,"b");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\r
\r
- txt=paper.text(610+16, 100+38+100+16,"c");\r
- txt.attr({"font-size":"14px", "font-family":"arial"});\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
- }\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
+ $(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
<body>\r
<div id="wrapper">\r
\r
- <div id="contents_basiccode" style="margin-top:20px;">\r
+ <div id="navi">\r
+ <!-- #navi --></div>\r
+ \r
+ <div id="contents">\r
\r
- <div id="inner"></div>\r
- \r
- <div class="space40px"></div>\r
- <h3>Basic Code : Step3-1a</h3>\r
- <div class="space20px"></div>\r
+ <div id="header"></div>\r
\r
- <div id="code" style="float:left; width:400px;">\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 linkto BasicCode1\r
+///+ Prefix\r
//// Lines for set up Psychlops environment\r
#include <psychlops.h>\r
using namespace Psychlops;\r
-///- Prefix linkto BasicCode1\r
-\r
-\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
- ///+ 0 SetGlobal\r
- ////Prepare global parameters\r
- const int maxrectnum = 200;\r
- int rectnum = 100/*ID:rectnumber 25.0 200.0 25.0*/;\r
- double rectsize = 3.0/*ID:dotsize 1.0 10.0 1.0*/;\r
- Psychlops::Rectangle rect[maxrectnum];\r
- double rectcolorR[maxrectnum];\r
- double rectcolorG[maxrectnum];\r
- double rectcolorB[maxrectnum];\r
- ///- 0 SetGlobal\r
-\r
- Canvas window(Canvas::window);\r
-\r
- ///+ 1 Initialize\r
- ////Initialize\r
- for(int i=0; i < rectnum; i++){\r
- ///+ 1.1\r
- ////set positions and sizes\r
- rect[i].set(rectsize, rectsize); //Set a size of rectangles.\r
- rect[i].centering(); //Move Rectangles to the center.\r
- rect[i].shift((i - 0.5 * rectnum) * rectsize * 1.5/*ID:RectHGap 1.0 3.0 0.5*/,\r
- (i - 0.5 * rectnum) * rectsize * 1.5/*ID:RectVGap 1.0 3.0 0.5*/); //Move Rectangles to initial positions\r
- ///- 1.1\r
-\r
- ///+ 1.2\r
- ////set colors\r
- rectcolorR[i]=(double)i * 0.5/*ID:RGain 0.0 1.0 0.5*//(double)rectnum; //Set R values. Note that "i" and "rectnum" is converted to double-type.\r
- rectcolorG[i]=(double)i * 0.5/*ID:GGain 0.0 1.0 0.5*//(double)rectnum; //Set G values. Note that "i" and "rectnum" is converted to double-type.\r
- rectcolorB[i]=(double)i * 0.5/*ID:BGain 0.0 1.0 0.5*//(double)rectnum; //Set B values. Note that "i" and "rectnum" is converted to double-type.\r
- ///- 1.2\r
- }\r
- ///- 1 Initialize\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
- ///+ 2 drawing\r
- ////drawing objects\r
- while(!Keyboard::esc.pushed()){\r
- window.clear(Color::black); //Clear window with black\r
- for(int i=0; i < rectnum; i++){\r
- rect[i].draw(Color(rectcolorR[i], rectcolorG[i], rectcolorB[i])); //draw objects by designated colors.\r
- }\r
- window.flip();\r
- }\r
- ///- 2 drawing\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
-</pre>\r
\r
+</pre>\r
\r
<!-- #code --></div>\r
\r
\r
- <div id="window" style="float:left; width:300px; height:300px; ">\r
- <div class="desc_child"><span id="xap">./Bin/Debug/PsychlopsSilverlight4test.xap</span></div>\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
- <br />\r
- <br />\r
- \r
- <div id="showcodebutton" style="margin-left:40px;"></div>\r
-\r
- <div id="basiccode_navi"></div>\r
\r
- <div class="space100px"></div>\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
-<!-- #contents --></div>\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>
\ No newline at end of file
+</html>\r
OSDN Git Service
