Page 1 of 2

Improving Documentation

Posted: Thu Mar 13, 2014 11:14 pm
by edwardrford
Reference this thread for an overview of what has transpired so far.

Use this new thread to tell us what you think.

Re: Improving Documentation

Posted: Thu Mar 13, 2014 11:53 pm
by WillAdams
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.

Re: Improving Documentation

Posted: Fri Mar 14, 2014 2:55 am
by WillAdams
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.

Re: Improving Documentation

Posted: Fri Mar 14, 2014 8:54 am
by RobCee
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.

Re: Improving Documentation

Posted: Fri Mar 14, 2014 10:19 am
by WillAdams
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?

Re: Improving Documentation

Posted: Fri Mar 14, 2014 11:05 am
by RobCee
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.

Re: Improving Documentation

Posted: Fri Mar 14, 2014 11:42 am
by WillAdams
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

Re: Improving Documentation

Posted: Fri Mar 14, 2014 7:59 pm
by WillAdams
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.

Re: Improving Documentation

Posted: Sun Mar 16, 2014 12:36 am
by WillAdams
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.

Re: Improving Documentation

Posted: Sun Mar 16, 2014 12:35 pm
by WillAdams
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.