Improving Documentation

edwardrford
Posts: 1250
Joined: Mon Apr 09, 2012 5:40 pm
Location: Dixon, IL
Contact:

Improving Documentation

Post by edwardrford » Thu Mar 13, 2014 11:14 pm

Reference this thread for an overview of what has transpired so far.

Use this new thread to tell us what you think.
Shapeoko 1 #0 - a couple of upgrades.
Shapeoko 2 #0 - a couple of upgrades.
Shapeoko 3 #2 - Stock

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Thu Mar 13, 2014 11:53 pm

The .svg idea seems to be working out well --- I've got a proof-of-concept file and will be finishing it up and posting the first one presently.

If people like it, it should address a number of issues:

- it'll allow people using tablets to zoom
- it'll let people tap on a part and see all instances of that part in a diagram
- it'll let people who print it out get a nice, sharp representation --- I guess we could make a separate page of all of them one after another so that they'd print one to a page --- in landscape they should look quite good.
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Fri Mar 14, 2014 2:55 am

Okay, I have a test file for the V-wheel diagram done.

Please look at: http://docs.shapeoko.com/wheels.html --- for some reason, I can't interact w/ the .svg placed on the page. If one right-clicks on it and opens it in it's own tab or window, then it works:

http://docs.shapeoko.com/content/tPictures/25203-02.svg

Please play around w/ the .svg and let me know what you think --- I considered making the parts themselves clickable --- it'd just take a bit more javascript, but it seemed more straight-forward to be able to just click through the parts.

If anyone understands why the .svg placed in the .html doesn't work, I'd be glad to know that as well.

Zooming w/ the iPad works okay, bit isn't as fluid-seeming as w/ a pixel image --- go figure. Same thing, the highlighting only works in a separate tab/window.

One further issue is the font isn't loading into the svg from the web fonts used in the HTML.
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

RobCee
Posts: 587
Joined: Wed Jan 08, 2014 11:33 am
Location: Birmingham, UK

Re: Improving Documentation

Post by RobCee » Fri Mar 14, 2014 8:54 am

Looking good, Will!
I have the same results as you with the iPad - highlight not working and (normal) level of detail loading lag.
On the plus side, the zoomable graphic on the main page is awesome, just what was missing with it.
Highlighting works perfectly in separate window, not sure why that is though.
I will check it out on the PC later today.
ShapeOko2 #3400 - Chinese 800W AC Spindle - Stiffened X-Axis - TR10 Z-Axis - Inverted Z Motor - Hall Effect Limits - Drag Chains & Custom Brackets

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Fri Mar 14, 2014 10:19 am

The other issue, and the one thing holding me back from fixing all of them w/ linked versions is that when the svg is opened in it's own window/tab it's appearing at it's natural size--- why doesn't it scale to fit the screen as an over-sized pixel graphic does?
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

RobCee
Posts: 587
Joined: Wed Jan 08, 2014 11:33 am
Location: Birmingham, UK

Re: Improving Documentation

Post by RobCee » Fri Mar 14, 2014 11:05 am

I am seeing the same things, Will.

Looking at the two pages, the .png file header contains the code: content="width=device-width"
Whereas the .svg file specifies it's size as being 800x400 in it's <svg> definition.

It has to be something to do with this, but I am not familiar enough with any of it to make sense of the appropriate settings.
ShapeOko2 #3400 - Chinese 800W AC Spindle - Stiffened X-Axis - TR10 Z-Axis - Inverted Z Motor - Hall Effect Limits - Drag Chains & Custom Brackets

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Fri Mar 14, 2014 11:42 am

Looks like there's something which would need to be done on the html generation to make the svg ``responsive'': http://demosthenes.info/blog/744/Make-SVG-Responsive

I'd still like an option to open the svg in a new window --- looks like this would be the solution to that: http://stackoverflow.com/questions/9720 ... indow?rq=1
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Fri Mar 14, 2014 7:59 pm

Okay, I've managed to work up a .html file which will scale the image to fill the available space:

http://docs.shapeoko.com/25203-02.html

but it doesn't allow the image to be dynamic as it does when only the image is loaded directly:

http://docs.shapeoko.com/content/tPictu ... -02-js.svg

I'm going to take a break from this and will investigate a bit more later. I think the answer lies w/in this page: http://stackoverflow.com/questions/1169 ... -right-way (or maybe here http://demosthenes.info/blog/744/Make-SVG-Responsive )--- if someone who's familiar w/ html and javascript could read that over and translate into something simple, or even provide instructions on what needs to change in this:

Code: Select all

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <title>Project ShapeOko diagram 25203-02</title>
  <style type="text/css" media="screen">
    body { background:#fff; margin:0 }
  </style>
</head><body><img src="content/tPictures/25203-02-js.svg" alt="V-Wheel Assembly" style="width: 100%; height: auto;"></img></body></html>
I'd be grateful.
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Sun Mar 16, 2014 12:36 am

Okay, I've tried everything I could find, but no success, so I posted it to stackexchange:

http://stackoverflow.com/questions/2243 ... ser-window

New version of the graphic (http://docs.shapeoko.com/content/tPictures/25203-02.svg ), which I think aside from:

- not being interactive when placed in-line on the web page
- not getting the Ubuntu font loaded from Google fonts
- not filling the browser window

works nicely --- does it seem reasonable to everyone else? Using the stacked text makes setting up the files a lot faster / simpler.
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

WillAdams
Posts: 8520
Joined: Mon Apr 09, 2012 6:11 pm
Location: Pennsylvania --- south of the Turnpike, East of US-15
Contact:

Re: Improving Documentation

Post by WillAdams » Sun Mar 16, 2014 12:35 pm

Okay, I've got a solution to filling the browser window, and have up-dated the first (V-wheel) diagram in http://docs.shapeoko.com/wheels.html --- please try it out and see if the instructions seem reasonable.

Remaining issues:

- making the diagram interactive on the page --- needs to be loaded into the web pages using something like the code in: http://docs.shapeoko.com/25203-02-test.html

- getting the font loaded from w/in the SVG

I'll probably go ahead and make another simple diagram or two, then work on the font issue.
Shapeoko 3XL #0006 w/Makita RT0701 Router w/0.125″ and ¼″ Elaire precision collets
Nomad 883 Pro #596 (bamboo)

Post Reply