JSCity Source Code

aserg-ufmg · Sep 20, 2015 · 8ed421a · 8ed421a
1 parent b59aaec
commit 8ed421a
Show file tree

Hide file tree

Showing 251 changed files with 51,166 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,167 @@
-# JSCity
 
-This is the main page of the JSCity project. We will make JSCity source code publicly available soon.
+   # JSCity
+
+   JSCity is an implementation of the Code City metaphor for visualizing source code. We adapted and implemented this metaphor for JavaScript, using the three.js 3D library.
+   JSCity represents a JavaScript program as a city; folders are districts and files are sub-districts; the buildings are functions; inner functions are represented as buildings on the top of their nested function/building.
+   The Number Of Lines of Source (LOC) represents the height of the buildings/functions; the Number Of Variables (NOV) in a function correlates to the building's base size. Blue buildings denote named functions; green buildings are anonymous functions.
+
+   For examples of cities check: [Wiki](https://github.com/ASERG-UFMG/JSCity/wiki/JSCITY).
+
+   ### Steps to see your first 3D Javascript City
+   1. Install nodejs. You can download it from [https://nodejs.org/en/](https://nodejs.org/en/)
+   2. Install MySQL Server (https://dev.mysql.com/downloads/mysql/).  If you already have the mysql on your computer jump to step 3.
+   3. Start the MySQL server
+   4. Run the script **schema.sql** located inside of sql diretory.
+      - The schema.sql creates a database called jscity
+      - The schema.sql comes with a sample of data city
+   5. Setup the config.json, located inside of js diretory, if necessary. This file is already set up with the sample below and if you prefer you can use it.
+      ```
+      "host": "localhost",
+      "user": "root"
+      "password": "",
+      "database": "jscity"
+      ```
+   6. Open nodeJs console and go to the js diretory from JSCity.
+      ```sh
+      cd /path-to-jscity-directory/js
+      ```
+   7. Start the application server using the command.
+      ```sh
+      node serve.js
+      ```
+   8. Use your browser access the url below to open the jscity system:
+      ```
+      http://localhost:800/
+      ```
+   9. Select the system from the combobox and wait for the end of city design.
+   ### How to generate a city
+   1. Certifiy that you have [nodejs](https://nodejs.org/en/) and [MySQL server](https://dev.mysql.com/downloads/mysql/) installed on your computer.
+   2. Unpack your desired project and take a note of the path to access it. For this sample let`s imagine that my desired project is placed  inside the follow path:
+      ```
+      path-to-jscity-directory/js/backend/system/
+      ```
+   3. Make sure that your MySQL server is started.  If it isn`t, start the MySQL server.
+   4. Open nodeJs console and go to the js directory from JSCity
+      ```sh
+      cd /path-to-jscity-directory/js
+      ```
+   5. Start the application server using the command:
+      ```sh
+      node serve.js
+      ```
+   6. Open **another nodejs console** and go to the directory that you place your desired project.
+      ```sh
+      cd /path-to-jscity-directory/js/backend/system/name-of-your-project/
+      ```
+   7. Run the **generator.js** follow by the path of your project , a parameter -c and a name to your city. The  line below shows an example of how the command is supposed to be.
+      ```sh
+      node generator.js path-to-project-diretory -c "Name Your Project"
+      ```
+      This command reads all js file on the directory and its subdirectories and inserts  all the information   needed in the database to design the city. Remember to specify your project source code correct path, because some github cloned projects come with sample codes , minify libraries and other codes that don`t represent the real core of the system.
+      ```sh
+      node gerador.js ./backend/system/name-of-your-project/src/ -c "City Name"
+      ```
+      In some cases the analysed project have atthe end of the file, unfinished functions that close in antoher file. This may be the reason of problems at the parser, causing troubles in generating data cities. In that case, you should unify the archives or use the comand bellow to ignore parser errors.
+      ```sh
+      node gerador.js ./backend/system/name-of-your-project/src/ -c "City Name"
+      ```
+   8. Wait for the end of the process.
+   9. Use your browser access the url below to open the jscity system:
+      ```
+      http://localhost:800/
+      ```
+   10. Select the system from the combobox and wait for the end of city design.
+
+
+   ### City Controls
+
+   We`ve implemented two types of visualization controls. The defaul control is an Orbital but you can easly change to a first person control by accessing the controls menu.
+
+   ##### How to use the controls
+
+   **ORBITAL**
+   - Click drag with left button to orbit the current view
+   - Click and drag right to move about the screen plane
+   - Use the arrow keys to move about the screen plane
+   - Use the center button / mouse wheel to zoom in or zoon out
+
+   **FIRST PERSON**
+   - Click and drag to look
+   - Use W A S D or arrow keys to move
+   - Press space to reset city display
+   - Use + or - on the numeric keypad to change movement speed.
+      - You can see at the topbar a value of the speed movement.  The higher the number of the speed movement the fast you zoom in or zoom out.
+   - Press * key to returns to standard speed
+
+
+   ### Libraries Used
+
+   #### node.js
+   - (Https://nodejs.org/)  ou  https://github.com/joyent/node
+   - Version used: 0.12.3
+   - Suggested Version: 0.12.3
+   - Allows Javascript execution in command line
+
+   #### nodemon
+   - Https://www.npmjs.com/package/nodemon | https://github.com/remy/nodemon
+   - Version used: 1.3.7
+   - Suggested version: Later
+   - Resumes one node.js script file to automatically be changed.
+
+   #### forever
+   - Https://www.npmjs.com/package/forever | https://github.com/nodejitsu/forever
+   - Version used: 0.14.1
+   - Suggested version: Later
+   - Maintains a continuous process operation. In this case, a failure can shut down the server, the forever restarts.
+
+   #### mime
+   - Https://www.npmjs.com/package/mime | https://github.com/broofa/node-mime
+   - Version used: 1.3.4
+   - Suggested version: 1.3.n latest
+   - Used to detect the file type as defined by IANA to send the HTTP Content-Type header
+   - http://www.iana.org/assignments/media-types/media-types.xhtml
+
+   #### mysql
+   - Https://www.npmjs.com/package/mysql | https://github.com/felixge/node-mysql
+   - Version used: 2.6.2
+   - Suggested version: 2.6.n latest
+   - One of the "drivers" MySQL for node.js
+
+   #### nomnom
+   - Https://www.npmjs.com/package/nomnom | https://github.com/harthur/nomnom
+   - Version used: 1.8.1
+   - Suggested version: 1.8.n latest
+   - Library to process arguments in command line
+
+   #### esprima
+   - Http://esprima.org/ | https://github.com/ariya/esprima
+   - Version used: 2.2.0
+   - Suggested Version: 2.2.0
+   - Generator AST
+
+   #### three.js
+   - Http://threejs.org/ | https://github.com/mrdoob/three.js
+   - Version used: R71 (https://cdnjs.com/libraries/three.js)
+   - Suggested Version: R71
+   - Framework 3D
+
+   #### stats.js
+   - Https://github.com/mrdoob/stats.js
+   - Version used:
+   - Suggested version:
+   - Performance Meter same author Three.js
+
+   #### mootools
+   - Http://mootools.net/ | https://github.com/mootools/mootools-core
+   - Version used: 1.5.1
+   - Suggested version: 1.5.n latest
+   - Framework Object Oriented and cross-browser
+
+
+
+
+
+
+
+
 
-For examples of cities check: [Wiki](https://github.com/ASERG-UFMG/JSCity/wiki/JSCITY).
diff --git a/css/css.css b/css/css.css
@@ -0,0 +1,155 @@
+* {
+	margin: 0;
+	padding: 0;
+	-webkit-tab-size:3;
+	-o-tab-size:3;
+	-ms-tab-size:3;
+	-moz-tab-size:3;
+	tab-size:3;
+}
+html,
+body {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	height: 100%;
+	overflow: hidden;
+}
+/*html {
+	 forçando barras de rolagem para reduzir chances de rolagem horizontal 
+	overflow: scroll;
+}*/
+#interface {
+	background-color: rgba(255,255,255,.6);
+	border-color: #e7e7e7;
+	border-style: solid;
+	border-width: 0 0 1px;
+	color: #000;
+	left: 0;
+	overflow: visible;
+	position: fixed;
+	top: 0;
+	width: 100%;
+}
+#interface>*,
+#interface .painel>* {
+	display: inline-block;
+}
+#interface h1 {
+	color: #777;
+	font-size:18px;
+	height:20px;
+	line-height:20px;
+	padding: 15px;
+}
+#cities {
+	max-height: 500px;
+	overflow: auto;
+}
+ul.menu,
+ul.menu * {
+	list-style: none;
+}
+ul.menu {
+	font-size: 0;
+}
+ul.menu li {
+	font-size: 14px;
+	position: relative;
+	white-space: nowrap;
+}
+ul.menu li:hover {
+	background-color: #F5F5F5;
+	color: #262626;
+}
+ul.menu .active {
+	background-color: #D0D0F5;
+	color: #010126;
+}
+ul.menu>li {
+	display: inline-block;
+}
+ul.menu>li:hover {
+	background-color: #E7E7E7;
+	color: #555;
+}
+ul.menu li>a,
+ul.menu li>span {
+	color: #333;
+	display: block;
+	padding: 3px 20px;
+}
+ul.menu li>span {
+	cursor: default;
+}
+ul.menu>li>a,
+ul.menu>li>span {
+	color: #777;
+	padding: 15px;
+}
+ul.menu li>ul {
+	background-color: #FFF;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+	display: none;
+	min-width: 160px;
+	padding: 5px 0;
+	position: absolute;
+	top:100%;
+	z-index: 99;
+}
+ul.menu li:hover>ul {
+	display: block;
+}
+#interface .painel {
+	float: right;
+}
+#interface .painel>* {
+	padding: 15px;
+	vertical-align: middle;
+}
+#interface .painel>#stats {
+	padding: 0;
+}
+.pop .content {
+	display: none;
+	background-color: #FFF;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+}
+.pop .content>.titulo {
+	background-color: #E7E7E7;
+	color: #555;
+	padding: 5px 20px;
+}
+.pop .content>.texto {
+	padding: 15px 20px 20px;
+}
+.cities {
+	position: absolute;
+}
+#vis {
+	cursor: default; /* webkit... :( */
+	height: 100%;
+	width: 100%;
+}
+
+/* Cores devem ser as mesmas definidas no gerador.js */
+.i-nomeada,
+.fa-circle.e {
+	color:#337AB7;
+}
+.i-anonima,
+.fa-circle.d {
+	color:#4CAE4C;
+}
+.i-arquivo,
+.fa-circle.c {
+	color:#D9534F;
+}
+.i-diretorio,
+.fa-circle.b {
+	color:#F0AD4E;
+}
+.i-cidade,
+.fa-circle.a {
+	color:#DDDDDD;
+}
diff --git a/css/font-awesome-4.4.0/HELP-US-OUT.txt b/css/font-awesome-4.4.0/HELP-US-OUT.txt
@@ -0,0 +1,7 @@
+I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
+Fonticons (https://fonticons.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
+comprehensive icon sets or copy and paste your own.
+
+Please. Check it out.
+
+-Dave Gandy