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/createPos.js"></script>\r
  16                 <script type="text/javascript" src="./js/createLinkButton.js"></script>\r
  17                 <script type="text/javascript" src="./js/createVoronoi.js"></script>\r
  18                 <script type="text/javascript" src="./js/setLangButton.js"></script>\r
  19 \r
  20 \r
  21                 <script type="text/javascript" src="./js/createVoronoiLine.js"></script>\r
  22                 <script type="text/javascript" src="./js/loadJSON.js"></script>\r
  23 \r
  24                 <script type="text/javascript" src="./js/createLinkButton_psychlops.js"></script>\r
  25 \r
  26 \r
  27 \r
  28 \r
  29                 <script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
  30 \r
  31                 <script type="text/javascript" src="./js/voronoi.js"></script>\r
  32 \r
  33 \r
  34         <script type="text/javascript" src="./js/jquery.cookie.js"></script> \r
  35 \r
  36 \r
  37                 <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>\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                 <script type="text/javascript">\r
  56 <!--\r
  57                 var naviwidth=200;\r
  58                 var naviheight=800;\r
  59 \r
  60 \r
  61                 //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
  62                 var currentselectedID="basiccode_step1";\r
  63 \r
  64                 //JSONからデータを利用するためindex\r
  65                 var currentselectedIndex;\r
  66 \r
  67                 //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
  68                 var professionalIndexs=new Array();\r
  69 \r
  70                 //library.jsonから読み込んだデータを格納する配列\r
  71                 var librarys;\r
  72 \r
  73                 //JSONデータをひとまとめにした配列\r
  74                 var linkbuttondata;\r
  75 \r
  76 \r
  77                 var lang="jp";\r
  78 \r
  79                 //GETからデータを取得\r
  80                 var lang="jp";\r
  81                 if(window.location.search.length!=0){\r
  82                         temppath=window.location.search.substring(1).split('&');\r
  83 \r
  84                         for (var i=0; i<temppath.length; i++){\r
  85                                 var temparray=temppath[i].split('=');\r
  86 \r
  87                                 //コンテンツのIDを取得\r
  88                                 if(temparray[0]=="id"){\r
  89                                         currentselectedID=temparray[1];\r
  90 \r
  91                                 //言語取得\r
  92                                 }else if(temparray[0]=="lang" && temparray[1]=="en"){\r
  93                                         lang="en";\r
  94                                 }\r
  95                         }\r
  96                 }\r
  97 \r
  98 \r
  99                 //JSONを読み込み、処理を開始\r
 100                 window.onload = function(){\r
 101 \r
 102                         $('#inner').html(\r
 103                                         '<div style="float:right;" >'\r
 104                                         +'<a href="./index.html?lang='+lang+'"><img id="smalllogo" class="semitransparent" src="./img/logo_small.png" /></a>'\r
 105                                         +'</div>'\r
 106                                         +'<div class="clearfix"></div>'\r
 107                                         \r
 108 \r
 109                                         +'<div style="text-align:right;" >'\r
 110                                                 +'<h1>Articles</h1>'\r
 111                                         +'</div>'\r
 112 \r
 113                                         +'<h2>'\r
 114                                                 +"Psychlops Tutorial"\r
 115                                         +'</h2>'\r
 116                         );\r
 117                         \r
 118                         var basiccode='using&nbsp;namespace&nbsp;Psychlops;'\r
 119                         +'void&nbsp;psychlops_main()&nbsp;{'\r
 120             +'Canvas&nbsp;window(Canvas::window);'\r
 121                 +'Psychlops::Rectangle&nbsp;figure;'\r
 122                   +'figure.set(&nbsp;100,&nbsp;100&nbsp;);'\r
 123                   +'figure.centering();'\r
 124                   +'figure.shift(&nbsp;10,&nbsp;10&nbsp;);'\r
 125                   +'figure.draw(&nbsp;Color(&nbsp;1,&nbsp;0,&nbsp;0)&nbsp;);'\r
 126                   +'window.flip();'\r
 127                   +'while(!Keyboard::esc.pushed()){}";'\r
 128 \r
 129                         $('#showcodebutton').html(\r
 130                                 '<form action="./showcode.php" target="_blank" method="POST" enctype="multipart/form-data">'\r
 131                                 +'<input type="hidden" name="code" value='+basiccode+' />'\r
 132                                 +'<input type="submit" value="Get CS Code! " name="submit" />'\r
 133                                 +'</form>'\r
 134                         );\r
 135 \r
 136 \r
 137 \r
 138 \r
 139 \r
 140 \r
 141 \r
 142 \r
 143                                 var paper=Raphael("basiccode_navi", 800, 260);\r
 144 \r
 145                                 var line;\r
 146                                 line =paper.path("M130 140 L180 140");\r
 147                                 line.attr({stroke: "#aaaaaa"});\r
 148                                 line =  paper.path("M230 140 L280 140");\r
 149                                 line.attr({stroke: "#aaaaaa"});\r
 150                                 line =  paper.path("M330 140 L380 140");\r
 151                                 line.attr({stroke: "#aaaaaa"});\r
 152                                 line =  paper.path("M430 140 L480 140");\r
 153                                 line.attr({stroke: "#aaaaaa"});\r
 154                                 line =  paper.path("M530 140 L580 140");\r
 155                                 line.attr({stroke: "#aaaaaa"});\r
 156 \r
 157                                 createLinkButton_psychlops(100,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode1.html");\r
 158 \r
 159                                 createLinkButton_psychlops(200,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode2.html");\r
 160 \r
 161                                 //3-1\r
 162                                 createLinkButton_psychlops(300,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1a.html");\r
 163                                 createLinkButton_psychlops(300,130+50, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1b.html");\r
 164                                 createLinkButton_psychlops(300,130+100, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1c.html");\r
 165 \r
 166                                 //3-2\r
 167                                 createLinkButton_psychlops(400,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-2a.html");\r
 168                                 createLinkButton_psychlops(400,130+50,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-2b.html");\r
 169                                 \r
 170                                 //4-1\r
 171                                 createLinkButton_psychlops(500,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1a.html");\r
 172                                 createLinkButton_psychlops(500,130+50,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1b.html");\r
 173                                 createLinkButton_psychlops(500,130+100,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1b.html");\r
 174                         \r
 175                                 //4-2\r
 176                                 createLinkButton_psychlops(600,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2a.html");\r
 177                                 createLinkButton_psychlops(600,130+50,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2b.html");\r
 178                                 createLinkButton_psychlops(600,130+100,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2b.html");\r
 179 \r
 180 \r
 181                                 var txt=paper.text(110, 110,"Step1");\r
 182                                 txt.attr({"font-size":"14px", "font-family":"arial"});\r
 183 \r
 184 \r
 185                                 txt=paper.text(210,110,"Step2");\r
 186                                 txt.attr({"font-size":"14px", "font-family":"arial"});\r
 187 \r
 188 \r
 189                                 txt=paper.text(310,110,"Step3-1");\r
 190                                 txt.attr({"font-size":"14px", "font-family":"arial"});\r
 191 \r
 192                                         txt=paper.text(310+16, 100+38+16,"a");\r
 193                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 194 \r
 195                                         txt=paper.text(310+16, 100+38+50+16,"b");\r
 196                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 197 \r
 198                                         txt=paper.text(310+16, 100+38+100+16,"c");\r
 199                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 200 \r
 201 \r
 202                                 txt=paper.text(410,110,"Step3-2");\r
 203                                 txt.attr({"font-size":"14px", "font-family":"arial"});\r
 204 \r
 205                                         txt=paper.text(410+16, 100+38+16,"a");\r
 206                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 207 \r
 208                                         txt=paper.text(410+16, 100+38+50+16,"b");\r
 209                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 210 \r
 211 \r
 212                                 txt=paper.text(510,110,"Step4-1");\r
 213                                 txt.attr({"font-size":"14px", "font-family":"arial"});\r
 214 \r
 215                                         txt=paper.text(510+16, 100+38+16,"a");\r
 216                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 217 \r
 218                                         txt=paper.text(510+16, 100+38+50+16,"b");\r
 219                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 220 \r
 221                                         txt=paper.text(510+16, 100+38+100+16,"c");\r
 222                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 223 \r
 224 \r
 225                                 txt=paper.text(610,110,"Step4-2");\r
 226                                 txt.attr({"font-size":"14px", "font-family":"arial"});\r
 227 \r
 228                                         txt=paper.text(610+16, 100+38+16,"a");\r
 229                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 230 \r
 231                                         txt=paper.text(610+16, 100+38+50+16,"b");\r
 232                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 233 \r
 234                                         txt=paper.text(610+16, 100+38+100+16,"c");\r
 235                                         txt.attr({"font-size":"14px", "font-family":"arial"});\r
 236 \r
 237 \r
 238 \r
 239         }\r
 240 \r
 241 \r
 242         $(document).ready( function(){ \r
 243                 $(".tooltip").tipTip({\r
 244                         maxWidth: "auto",\r
 245                         edgeOffset: 0,\r
 246                         fadeIn:0,\r
 247                         activation: "hover", //click\r
 248                         defaultPosition: "top"\r
 249                 });\r
 250         });\r
 251 \r
 252 //-->\r
 253                 </script>\r
 254 \r
 255         </head>\r
 256 \r
 257 <body>\r
 258 <div id="wrapper">\r
 259 \r
 260         <div id="contents_basiccode"  style="margin-top:20px;">\r
 261 \r
 262                 <div id="inner"></div>\r
 263                 \r
 264                 <div class="space40px"></div>\r
 265                 <h3>Basic Code : Step3-1a</h3>\r
 266                 <div class="space20px"></div>\r
 267 \r
 268                 <div id="code" style="float:left; width:400px;">\r
 269 \r
 270 \r
 271 <pre id="main_code" class="main prettyprint cpp">\r
 272 ///+ Prefix linkto BasicCode1\r
 273 //// Lines for set up Psychlops environment\r
 274 #include &lt;psychlops.h&gt;\r
 275 using namespace Psychlops;\r
 276 ///- Prefix linkto BasicCode1\r
 277 \r
 278 \r
 279 ///+ Main Routine\r
 280 //// Psychlops runs at the first line of this function psychlops_main().\r
 281 void psychlops_main() {\r
 282     \r
 283     ///+ 0 SetGlobal\r
 284     ////Prepare global parameters\r
 285      const int maxrectnum = 200;\r
 286      int rectnum = 100/*ID:rectnumber 25.0 200.0 25.0*/;\r
 287      double rectsize = 3.0/*ID:dotsize 1.0 10.0 1.0*/;\r
 288      Psychlops::Rectangle rect[maxrectnum];\r
 289      double rectcolorR[maxrectnum];\r
 290      double rectcolorG[maxrectnum];\r
 291      double rectcolorB[maxrectnum];\r
 292     ///- 0 SetGlobal\r
 293 \r
 294          Canvas window(Canvas::window);\r
 295 \r
 296      ///+ 1 Initialize\r
 297      ////Initialize\r
 298      for(int i=0; i &lt; rectnum; i++){\r
 299          ///+ 1.1\r
 300          ////set positions and sizes\r
 301          rect[i].set(rectsize, rectsize); //Set a size of rectangles.\r
 302          rect[i].centering(); //Move Rectangles to the center.\r
 303          rect[i].shift((i - 0.5 * rectnum) * rectsize * 1.5/*ID:RectHGap 1.0 3.0 0.5*/,\r
 304                                         (i - 0.5 * rectnum) * rectsize * 1.5/*ID:RectVGap 1.0 3.0 0.5*/); //Move Rectangles to initial positions\r
 305          ///- 1.1\r
 306 \r
 307          ///+ 1.2\r
 308          ////set colors\r
 309          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
 310          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
 311          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
 312          ///- 1.2\r
 313     }\r
 314     ///- 1 Initialize\r
 315     \r
 316     ///+ 2 drawing\r
 317     ////drawing objects\r
 318     while(!Keyboard::esc.pushed()){\r
 319         window.clear(Color::black); //Clear window with black\r
 320         for(int i=0; i &lt; rectnum; i++){\r
 321             rect[i].draw(Color(rectcolorR[i], rectcolorG[i], rectcolorB[i])); //draw objects by designated colors.\r
 322         }\r
 323         window.flip();\r
 324     }\r
 325     ///- 2 drawing\r
 326 \r
 327 }\r
 328 ///- Main Routine\r
 329 </pre>\r
 330 \r
 331 \r
 332         <!-- #code --></div>\r
 333 \r
 334 \r
 335         <div id="window" style="float:left; width:300px; height:300px; ">\r
 336         <div class="desc_child"><span id="xap">./Bin/Debug/PsychlopsSilverlight4test.xap</span></div>\r
 337         </div>\r
 338 \r
 339 \r
 340         <div class="clearfix"></div>\r
 341 \r
 342         <br />\r
 343         <br />\r
 344         \r
 345         <div id="showcodebutton" style="margin-left:40px;"></div>\r
 346 \r
 347         <div id="basiccode_navi"></div>\r
 348 \r
 349         <div class="space100px"></div>\r
 350 \r
 351 <!-- #contents --></div>\r
 352 \r
 353 <!-- #wrapper --></div>\r
 354 </body>\r
 355 </html>