Skip to content

Commit efdc906

Browse files
shapeokoshapeoko
committed
converting html to dynamic, adding template
1 parent 4269c8d commit efdc906

File tree

13 files changed

+844
-2394
lines changed

13 files changed

+844
-2394
lines changed

test.html renamed to HTML_TEMPLATE

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,10 @@
7070
$("#content").append(markdown.toHTML(response));
7171
}
7272
});
73+
74+
//rename the page
75+
document.title = 'Shapeoko 2 Electronics Setup';
7376
});
7477
</script>
7578
</body>
76-
</html>
79+
</html>

‎carriages.html‎

Lines changed: 70 additions & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -1,214 +1,79 @@
11
<!doctype html>
22
<html>
3-
<head>
4-
<!--
5-
The layout and styling of this page, and subsiquently the redesign of this site, are heavily influenced by
6-
the design of the chartjs.org site. It's beauty through simplicity was too much to resist. I have made slight
7-
changes so the styling of the site is more inline with the projects styling, but don't want to hide the fact
8-
that the styling is taken basically directly from their css file with only minor changes.
9-
10-
The awesome javascript function that turns H1s and H2s into the navigation is their code as well.
3+
<head>
4+
<title>Project Shapeoko</title>
5+
<link href="shapeoko.css" rel="stylesheet" />
6+
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel='stylesheet' type='text/css'>
7+
<script src="js/markdown.js"></script>
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
9+
</head>
10+
<body>
11+
12+
<script type="text/javascript">
13+
var _gaq = _gaq || [];
14+
_gaq.push(['_setAccount', 'UA-11630357-11']);
15+
_gaq.push(['_setDomainName', 'shapeoko.com']);
16+
_gaq.push(['_trackPageview']);
1117

12-
I hope this is a compliment to the folks at chartjs.org as opposed to being "not cool"
13-
-->
14-
<title>Project Shapeoko</title>
15-
<link href="shapeoko.css" rel="stylesheet" />
16-
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel='stylesheet' type='text/css'>
17-
</head>
18-
<body>
19-
20-
<script type="text/javascript">
21-
var _gaq = _gaq || [];
22-
_gaq.push(['_setAccount', 'UA-11630357-11']);
23-
_gaq.push(['_setDomainName', 'shapeoko.com']);
24-
_gaq.push(['_trackPageview']);
18+
(function() {
19+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
20+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
21+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
22+
})();
23+
</script>
2524

26-
(function() {
27-
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
28-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
29-
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
30-
})();
31-
</script>
25+
<div class="header">
3226

33-
<div class="header">
27+
<div class="left">
28+
<a href="http://docs.shapeoko.com"><span class="toplink">Shapeoko 2</span></a>
29+
</div>
30+
<div class="right">
31+
<ul>
3432

35-
<div class="left">
36-
<a href="http://docs.shapeoko.com"><span class="toplink">Shapeoko 2</span></a>
33+
</ul>
34+
</div>
35+
</div>
36+
37+
<div id="wrapper">
38+
<nav>
39+
<dl>
40+
<dt><a href='index.html'>Welcome!</a></dt>
41+
<dt><a href='tips.html'>Pro Tips!</a></dt>
42+
<dt><a href='software.html'>Software</a></dt>
43+
<dt><a href='electronics.html'>Electronics</a></dt>
44+
<dt><a href='wheels.html'>Wheels + Idlers</a></dt>
45+
<dt><a href='carriages.html'>Carriages</a></dt>
46+
<dt><a href='zaxis.html'>Z-Axis</a></dt>
47+
<dt><a href='gantry.html'>Gantry</a></dt>
48+
<dt><a href='yaxis.html'>Y-Axis</a></dt>
49+
<dt><a href='workarea.html'>Work Area</a></dt>
50+
<dt><a href='wiring.html'>Electrical Wiring</a></dt>
51+
<dt><a href='helloworld.html'>Hello, World</a></dt>
52+
<dt><a href='firstjob.html'>First Job</a></dt>
53+
</dl>
54+
</nav>
55+
56+
<div id="contentWrapper">
57+
<article id="content">
58+
<!--This is where the content gets rendered-->
59+
</article>
60+
</div><!--end contentWrapper-->
61+
</div><!--end wrapper-->
3762

38-
</div>
39-
<div class="right">
40-
<ul>
41-
42-
</ul>
43-
</div>
44-
</div>
45-
46-
<div id="wrapper">
47-
<nav>
48-
<dl>
49-
<dt><a href='index.html'>Welcome!</a></dt>
50-
<dt><a href='tips.html'>Pro Tips!</a></dt>
51-
<dt><a href='software.html'>Software</a></dt>
52-
<dt><a href='electronics.html'>Electronics</a></dt>
53-
<dt><a href='wheels.html'>Wheels + Idlers</a></dt>
54-
<dt><a href='carriages.html'>Carriages</a></dt>
55-
<dt><a href='zaxis.html'>Z-Axis</a></dt>
56-
<dt><a href='gantry.html'>Gantry</a></dt>
57-
<dt><a href='yaxis.html'>Y-Axis</a></dt>
58-
<dt><a href='workarea.html'>Work Area</a></dt>
59-
<dt><a href='wiring.html'>Electrical Wiring</a></dt>
60-
<dt><a href='helloworld.html'>Hello, World</a></dt>
61-
<dt><a href='firstjob.html'>First Job</a></dt>
62-
</dl>
63-
</nav>
64-
65-
<div id="contentWrapper">
66-
<article id="carriages"><h1>Carriages</h1>
67-
<h2>Overview</h2>
68-
<p><img alt="exploded view of Motor Mount Carriages" src="content/tPictures/PS20022_2.png">
69-
<img alt="Motor Mount Carriage, parts and tools" src="content/tPictures/so_motor_mount_carriages_parts_2.jpg">
70-
<img alt="Motor Mount Carriages parts" src="content/tPictures/so_motor_mount_carriage_parts_2.jpg"></p>
71-
<p>This step is the bulk of the work required to assemble your machine. There are two different styles of plates that we will be assembling in this step. The first style includes a stepper motor, there are 3 of these plates total, and they will be used to drive both your X- and Y-axes. The other style is nearly identical to the first, with the exception of not having a stepper motor or smooth idlers attached. This plate will be used to connect your Z-axis assembly to your X-axis assembly. </p>
72-
<p>The 3 plates with stepper motors are identical and interchangeable. The plates are symmetrical, so there is no such thing as a front and a back (as they're the same) until one determines this by attaching parts. Keep in mind that your stepper motor will go on the opposite side of your wheels and smooth idlers.</p>
73-
<p>It might be easier and more straight-forward to assemble all four of them to match the Z-axis motor carriage mount plate, then set one aside for that, and add smooth idler wheels to make the other three.</p>
74-
<h2>Motor Mount Carriages (PS20022) - 3 total</h2>
75-
<h3>Requirements</h3>
76-
<h4>Parts</h4>
77-
<ul>
78-
<li>Motor Mount Plate (12ga) (26029-01) x 3pcs</li>
79-
<li>Eccentric Nut (30158-01) x 6pcs</li>
80-
<li>(from previous step) - Dual Bearing V-Wheel (25203-02) x 12pcs</li>
81-
<li>(from previous step) - Smooth Idler (25197-02) x 6pcs</li>
82-
<li>M5 x 20mm Button Head Cap Screw (PS20004) x 12pcs</li>
83-
<li>M5 Flat Washer (25287-02) x 36pcs</li>
84-
<li>M5 Hex Nut (25284-02) x 12pcs</li>
85-
<li>M5 x 30mm Button Head Cap Screw (25286-05) x 6pcs</li>
86-
<li>3/8" x 5/16" x #12 bore Aluminum Spacer (25312-14) x 6pcs</li>
87-
<li>M3 SHCS x 12 pcs (for attaching the stepper motors)</li>
88-
<li>M3 Flat Washer x 12 pcs (for attaching the stepper motors)</li>
89-
<li>GT2 pulley (to attach to the stepper motors)</li>
90-
</ul>
91-
<h4>Tools</h4>
92-
<ul>
93-
<li>3mm Hex Key</li>
94-
<li>2.5mm Hex Key (used for the M3 screws if attaching the motor)</li>
95-
<li>1.5mm Hex Key (used for the set screws in the pulley)</li>
96-
</ul>
97-
<p><img alt="assembled idler" src="content/tPictures/so_smooth_idler_2.jpg">
98-
<img alt="assembled V-wheel" src="content/tPictures/so_v_wheel_2.jpg">
99-
<img alt="Motor Mount Carriages parts" src="content/tPictures/so_motor_mount_carriage_parts_2.jpg">
100-
<img alt="" src="content/tPictures/so_e_motor_pulley_2.jpg">
101-
<img alt="" src="content/tPictures/so_smooth_idler_bolt_spacer_washers_2.jpg"></p>
102-
<p>These are the plates that will mount on either end of the gantry and on the rear of the X-Axis.</p>
103-
<p><img alt="exploded view of Motor Mount Carriages" src="content/tPictures/PS20022_4.png"></p>
104-
<ol>
105-
<li>Connect V-Wheels to the plate<ul>
106-
<li>two static at the top</li>
107-
<li>two eccentric at the bottom</li>
108-
</ul>
109-
</li>
110-
<li>Connect the smooth idlers to plate<ul>
111-
<li>two total</li>
112-
<li>take note of the orientation of the bolt</li>
113-
<li>take note of the orientation of the bearings/idler</li>
114-
</ul>
115-
</li>
116-
<li>Attach your stepper motor<ul>
117-
<li>Using 4 x M3x6mm SHCS, attach the stepper motor</li>
118-
<li>Use an M3 washer between the SHCS and the plate</li>
119-
</ul>
120-
</li>
121-
</ol>
122-
<p><img alt="Assembled Motor Mount Carriages" src="content/tPictures/so_motor_mount_carriage_4.jpg"></p>
123-
<p>Please note that the above image does not show the stepper motor in place. As previously noted, one should attach at least one stepper motor for the X-axis plate, as it's difficult to attach it once the gantry carriage is assembled. Use 4 M3 screws, 4 M3 washers and also attach the GT2 pulley.</p></article><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
124-
<script src="jquery.simplemodal.1.4.4.min.js"></script>
125-
<script src="prettify.js"></script>
126-
<script>
127-
/*
128-
$(document).ready(function(){
129-
130-
var $nav = $("nav dl");
131-
132-
$("article").each(function(){
133-
var $el = $(this);
134-
var $h1 = $el.find("h1");
135-
var sectionTitle = $h1.html();
136-
var articleId = $el.attr("id");
137-
var $dt = $("<dt><a href=\"#"+articleId +"\">"+sectionTitle+"</a></dt>");
138-
139-
$dt.find("a").on("click",function(e){
140-
e.preventDefault();
141-
$('html,body').animate({scrollTop: $h1.offset().top},400);
142-
});
143-
144-
$nav.append($dt);
145-
146-
var $subtitles = $el.find("h2");
147-
148-
$subtitles.each(function(){
149-
var $h2 = $(this);
150-
var title = $h2.text();
151-
var newID = articleId + "-" +camelCase(title);
152-
$h2.attr("id",newID);
153-
var $dd = $("<dd><a href=\"#" +newID + "\">" + title + "</a></dd>");
154-
155-
$dd.find("a").on("click",function(e){
156-
e.preventDefault();
157-
$('html,body').animate({scrollTop: $h2.offset().top},200);
158-
})
159-
$nav.append($dd);
160-
161-
});
162-
163-
var $articles = $el.find("article");
164-
165-
});
166-
167-
$("canvas").each(function(){
168-
var $canvas = $(this);
169-
var ctx = this.getContext("2d");
170-
171-
172-
173-
eval($("code[data-for='" + $canvas.attr("id") + "']").text());
174-
175-
176-
var evalString = "new Chart(ctx)." + $canvas.data("type") + "(data);";
177-
178-
eval(evalString);
179-
180-
});
181-
prettyPrint();
182-
183-
function camelCase(str){
184-
var splitString = str.split(" ");
185-
186-
var returnedCamel = splitString[0].toLowerCase();
187-
188-
for (var i=1; i<splitString.length; i++){
189-
returnedCamel += splitString[i].charAt(0).toUpperCase() + splitString[i].substring(1).toLowerCase();
190-
}
191-
192-
return returnedCamel;
193-
194-
}
195-
});
196-
*/
197-
</script>
198-
<script>
199-
/*
200-
$(document).ready(function(){
201-
$(".photo").click(function(e) {
202-
var hrefval= $(this).attr("src");
203-
$.modal('<img src=" ' + hrefval + '">', {
204-
containerCss: { height:'auto',width:'auto'},
205-
overlayClose: true
206-
});
207-
e.preventDefault();
208-
});
209-
});
210-
/*
211-
</script>
63+
<!--This is the script that loads the appropriate .md file-->
64+
<script type="text/javascript">
65+
$(document).ready(function(){
66+
$.ajax({
67+
url:"content/carriages.md",
68+
dataType: "text",
69+
success: function(response){
70+
$("#content").append(markdown.toHTML(response));
71+
}
72+
});
21273

74+
//rename the page
75+
document.title = 'Shapeoko 2 - Carriage Assembly';
76+
});
77+
</script>
21378
</body>
214-
</html>
79+
</html>

0 commit comments

Comments
 (0)