Created
February 25, 2015 20:45
-
-
Save codewizard13/850a774de8224d0f6d2b to your computer and use it in GitHub Desktop.
JavaScript Timeline Module. Create a historical timeline in vertical orientation in console/terminal. Designed to be run in a node.js console, or in a browser console (F12). This version does NOT require internet access.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* JavaScript Timeline Module. | |
| (Press F12 in your browser to see the results) | |
| @Creator: Eric Hepperle (CodeSlayer2010/CodeWizard13) | |
| @Date: 02/24/15 | |
| @Version: 1.0 | |
| @Purpose: Create a historical timeline in vertical orientation in | |
| console/terminal. Designed to be run in a node.js | |
| console, or in a browser console (F12). This version | |
| does NOT require internet access. | |
| This was a 'first draft' preliminary | |
| step for me to to develop the pseudocode for making | |
| a JavaScript, web-based graphical timeline. Now that I | |
| know how to display it, next will be figuring out | |
| how to do the "closest dates" feature. When the | |
| timeline displays, I want each of the 10 points | |
| to display next to it (or above/below) the closest | |
| historical events. This will be determined by a time-range | |
| value, like when searching for a restaurant within 10 miles, | |
| except this will be searching for any dates within | |
| 10 years. I'm looking forward to the progress I will | |
| make on this. Sure, I know others have already written | |
| timeline modules that I could just use instead, | |
| but the point is as an exercise to prove to | |
| myself that I can do it, and then also to have something | |
| practical as a result. | |
| Thanks for checking out my code and joining me on this | |
| journey! :) | |
| If you appreciate the value in what I am doing here | |
| and want to support my work, please consider making | |
| a contribution my PayPal account of | |
| [email protected]. | |
| Thanks so much!!! :) | |
| @Pseudocode: | |
| If first run, | |
| If only two dates then ... | |
| START date is 666000 BCE | |
| END date is TODAY | |
| Display Timeline Zoomed Out Full | |
| Get Browser Window width | |
| Get Browser Window height | |
| Calculate timeline pixel length as | |
| 80% of screen width | |
| // NOTE: In zoomed out full, we see 10 points displayed | |
| // including start and end points | |
| Calculate width between points in start view as | |
| timeline_length / (timeline_length - start_points_displayed) | |
| */ | |
| function init() { | |
| orig_start_date = -7000; // negagive = BCE | |
| // mysql_orig_end_date = new Date().toISOString().slice(0, 19).replace('T', ' '); | |
| orig_end_date = new Date().getFullYear() | |
| // total time in years between oldest and newest date | |
| start_to_end_period = orig_end_date - orig_start_date; | |
| // in node js, get console width as: | |
| console_width = process.stdout.columns; | |
| // calculate distance between two points when fully zoomed out | |
| inter_point_width_yrs = Math.round(start_to_end_period / 9); | |
| if (inter_point_width_yrs < 0) inter_point_width_yrs *= -1; | |
| // calculate distance between two points in pixels | |
| inter_point_width_px = Math.floor((console_width * 0.8)/ 9); | |
| } | |
| function isFirstRun() { | |
| getRecordedDateCount(); | |
| } | |
| function getRecordedDateCount() { | |
| console.log("\n\t ... I'm in getRecordedDateCount()!"); | |
| } | |
| function displayStartTimeline() { | |
| //orig_start_date = orig_start_date < 0 ? (orig_start_date * -1) + " BCE" : orig_start_date + " CE"; | |
| var out = "*\t" + orig_start_date + "\n"; | |
| for (i=1;i<9;++i) { | |
| this_year = parseInt(orig_start_date) + (parseInt(inter_point_width_yrs) * i) - 1; | |
| //this_year = this_year < 0 ? (this_year * -1) + " BCE" : this_year + " CE"; | |
| out += "|\n"; | |
| out += "*\t" + this_year + "\n"; | |
| } | |
| out += "|\n*\t" + orig_end_date + "\n"; | |
| console.log(out); | |
| } | |
| function main () { | |
| init(); | |
| console.log("orig_start_date = " + orig_start_date); | |
| console.log("orig_end_date = " + orig_end_date); | |
| console.log("start_to_end_period = " + start_to_end_period); | |
| console.log("inter_point_width_yrs = " + inter_point_width_yrs); | |
| console.log("console_width = " + console_width); | |
| console.log("inter_point_width_px = " + inter_point_width_px); | |
| console.log("\nThus, the distance between two points on the timeline in"); | |
| console.log("console mode = " + inter_point_width_px + " px, and " + | |
| inter_point_width_yrs + " yrs"); | |
| displayStartTimeline(); | |
| isFirstRun(); | |
| } | |
| // clear console | |
| // console.clear(); | |
| // Use the following for node.js | |
| process.stdout.write('\033c'); | |
| main(); | |
| /* | |
| @Updates: | |
| 02/24/15 | |
| 23:30 - Created initial code. | |
| 02/25/15 | |
| 12:41 - NOTE: need to remove the "- 1". It is causing | |
| dates to be off-by-one. | |
| */ | |
| /* | |
| @SampleOutput: | |
| orig_start_date = -7000 | |
| orig_end_date = 2015 | |
| start_to_end_period = 9015 | |
| inter_point_width_yrs = 1002 | |
| console_width = 80 | |
| inter_point_width_px = 7 | |
| Thus, the distance between two points on the timeline in | |
| console mode = 7 px, and 1002 yrs | |
| * -7000 | |
| | | |
| * -5999 | |
| | | |
| * -4997 | |
| | | |
| * -3995 | |
| | | |
| * -2993 | |
| | | |
| * -1991 | |
| | | |
| * -989 | |
| | | |
| * 13 | |
| | | |
| * 1015 | |
| | | |
| * 2015 | |
| ... I'm in getRecordedDateCount()! | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment