OSDN Git Service

xsdsz
[psychlops/silverlight.git] / test4 / TestPage.html
index 23aee1f..44f4d11 100644 (file)
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-<html xmlns="http://www.w3.org/1999/xhtml" >\r
-<!-- saved from url=(0014)about:internet -->\r
-<head>\r
-    <title>PsychlopsSilverlight4test</title>\r
-    <style type="text/css">\r
-    html, body {\r
-           height: 100%;\r
-           overflow: auto;\r
-    }\r
-    body {\r
-           padding: 0;\r
-           margin: 0;\r
-    }\r
-    #silverlightControlHost {\r
-           height: 100%;\r
-           text-align:center;\r
+<!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/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
+\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
+\r
+               <script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
+\r
+               <script type="text/javascript" src="./js/voronoi.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
+\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
+\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 linkbuttondata;\r
+\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
+\r
+                       for (var i=0; i<temppath.length; i++){\r
+                               var temparray=temppath[i].split('=');\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
+                               }\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&nbsp;namespace&nbsp;Psychlops;'\r
+                       +'void&nbsp;psychlops_main()&nbsp;{'\r
+           +'Canvas&nbsp;window(Canvas::window);'\r
+               +'Psychlops::Rectangle&nbsp;figure;'\r
+                 +'figure.set(&nbsp;100,&nbsp;100&nbsp;);'\r
+                 +'figure.centering();'\r
+                 +'figure.shift(&nbsp;10,&nbsp;10&nbsp;);'\r
+                 +'figure.draw(&nbsp;Color(&nbsp;1,&nbsp;0,&nbsp;0)&nbsp;);'\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
+\r
+                               createLinkButton_psychlops(100,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode1.html");\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
+\r
+\r
+                               var txt=paper.text(110, 110,"Step1");\r
+                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+\r
+\r
+                               txt=paper.text(210,110,"Step2");\r
+                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+\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
+                                       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
+\r
+                               txt=paper.text(410,110,"Step3-2");\r
+                               txt.attr({"font-size":"14px", "font-family":"arial"});\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
+\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
+                                       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
+\r
+\r
+                               txt=paper.text(610,110,"Step4-2");\r
+                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+\r
+                                       txt=paper.text(610+16, 100+38+16,"a");\r
+                                       txt.attr({"font-size":"14px", "font-family":"arial"});\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
+\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="contents_basiccode"  style="margin-top:20px;">\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
+\r
+               <div id="code" style="float:left; width:400px;">\r
+\r
+\r
+<pre id="main_code" class="main prettyprint cpp">\r
+///+ Prefix linkto BasicCode1\r
+//// Lines for set up Psychlops environment\r
+#include &lt;psychlops.h&gt;\r
+using namespace Psychlops;\r
+///- Prefix linkto BasicCode1\r
+\r
+\r
+///+ Main Routine\r
+//// Psychlops runs at the first line of this function psychlops_main().\r
+void psychlops_main() {\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 &lt; 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
-    </style>\r
+    ///- 1 Initialize\r
     \r
-    <script type="text/javascript">\r
-        function onSilverlightError(sender, args) {\r
-            var appSource = "";\r
-            if (sender != null && sender != 0) {\r
-              appSource = sender.getHost().Source;\r
-            }\r
-            \r
-            var errorType = args.ErrorType;\r
-            var iErrorCode = args.ErrorCode;\r
-\r
-            if (errorType == "ImageError" || errorType == "MediaError") {\r
-              return;\r
-            }\r
-\r
-            var errMsg = "Silverlight アプリケーションでハンドルされていないエラーが発生しまし " +  appSource + "\n" ;\r
-\r
-            errMsg += "コード: "+ iErrorCode + "    \n";\r
-            errMsg += "カテゴリ: " + errorType + "       \n";\r
-            errMsg += "メッセージ: " + args.ErrorMessage + "     \n";\r
-\r
-            if (errorType == "ParserError") {\r
-                errMsg += "ファイル: " + args.xamlFile + "     \n";\r
-                errMsg += "行: " + args.lineNumber + "     \n";\r
-                errMsg += "位置: " + args.charPosition + "     \n";\r
-            }\r
-            else if (errorType == "RuntimeError") {           \r
-                if (args.lineNumber != 0) {\r
-                    errMsg += "行: " + args.lineNumber + "     \n";\r
-                    errMsg += "位置: " +  args.charPosition + "     \n";\r
-                }\r
-                errMsg += "メソッド名: " + args.methodName + "     \n";\r
-            }\r
-\r
-            throw new Error(errMsg);\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 &lt; rectnum; i++){\r
+            rect[i].draw(Color(rectcolorR[i], rectcolorG[i], rectcolorB[i])); //draw objects by designated colors.\r
         }\r
-    </script>\r
-</head>\r
-<body>\r
-    <form id="parameters">\r
-               <input type="text" size="10" id="TheInput" />\r
-       </form>\r
-\r
-    <form id="form1" runat="server" style="height:60%">\r
-    <div id="silverlightControlHost">\r
-        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">\r
-                 <param name="source" value="Bin/Debug/PsychlopsSilverlight4test.xap"/>\r
-                 <param name="onError" value="onSilverlightError" />\r
-                 <param name="background" value="white" />\r
-                 <param name="minRuntimeVersion" value="3.0.40624.0" />\r
-                 <param name="autoUpgrade" value="true" />\r
-                 <param name="enableHtmlAccess" value="true" />\r
-                 <param name="enableGPUAcceleration" value="false" />\r
-                 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">\r
-                         <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Microsoft Silverlight を入手" style="border-style:none"/>\r
-                 </a>\r
-           </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>\r
-    </form>\r
+        window.flip();\r
+    }\r
+    ///- 2 drawing\r
+\r
+}\r
+///- Main Routine\r
+</pre>\r
+\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>\r
+\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
+\r
+<!-- #contents --></div>\r
+\r
+<!-- #wrapper --></div>\r
 </body>\r
-</html>\r
+</html>
\ No newline at end of file