//ArrowChat Code
Results 1 to 13 of 13

Thread: Website/page build thread (sort of) for Wire Harness layouts and Diagrams

  1. #1
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114

    Website/page build thread (sort of) for Wire Harness layouts and Diagrams

    Live Demo (work in progress) - http://atcfixer.com/harness.html

    I haven't really kept up with all the new stuff coming out for webpages (html) and such, so it's almost like starting over. This thread I suspect will go over most people's heads, and it's not really intended as a guide of any sorts, just figured it might be interested to some to see the progress of a project like this. Basically I'm planning to use some HTML5 and other newish goodies to create an interactive webpage to display wire harness layout (as if it's a physical harness) and have connections/wires clickable to view more info on them such as wire route/splices and connector pinouts. Also planning to include basic service specs such as the range of ohms the pulse generator should be.

    Since building all the harnesses by hand would take a long time and be inefficient, I'll also have to build another page for a editor to generate the data to use on the display pages to the end users. It might be interesting to include the editor on the page with an option to submit it to me for like custom harness requests or adding new models I don't have in the database. I kind of doubt people would want to learn the tool and build harnesses for free though, so I'm not sure if I should do that or not.

    I think it would be neat to also be able to generate a somewhat interactive wire diagram (printable and saveable too) similar to what we see in the service manuals and have it based on the harness layout data (generated on the fly). Main thing I think of will be components will have to be manually added, and add an option to move things around to make it easier to follow and such. This will probably be the last thing I do since I think it will be quite a task to pull off and not have wires overlapping and such.

    Anyway, I plan to post screen shots of the progress. Always open to ideas/suggestions. If I'm doing something stupid, tell me lol.

    Oh probably should mention, if I can complete this project, my plan is to make it available for free with no 3rd party ads. I'll probably figure a way to advertise my own products, but it won't be invasive, more like suggestions.

    Some background info on me (skip this if you don't care lol), just to show where I'm coming from. I probably won't be showcasing any of the back end since it's just raw code, but if someone wants to see the database design or something, I could show the show create tables output. I do a lot of small random projects, sometimes SEO based for web scraping and such, so I do a lot of programming in C# (used to use VB.net/VB6/GW Basic in the past), I like to use PHP to test ideas quickly because it's so fast to program in, clearly being a web page, php will be the server side language used. Almost all of my database experience is in mysql or flat files (basically text files like a CSV). I plan to use mysql for this project so searching for the diagrams and such is easier to code. I'm completely new to HTML5, I grew up on HTML 4.0 and up, so I rarely use CSS, Javascript, etc. I have kind of grown to hate Javascript on the web, so much poor programming out there, even from large companies like Ebay where my crappy internet just sits forever waiting for javascript to load/process. Seems like a lot of page crashes, CSS not loading etc on my terrible internet too, which basically never happens if it's all in one file. Anyway, I used java for a recent project, and it turned out great and very stable, so I suspect javascript isn't the fault, it's more poor programming. Probably should mention I have a bit of a thing for efficient programming, takes longer to make sometimes, but no freezing up and such. I also do a lot of things at lower levels at times, silly example being a for loop instead of a foreach loop even though both are basically exactly the same efficiency wise. Probably should stop typing or I'll have my whole life story typed up before I know it lol.
    Last edited by ps2fixer; 11-16-2018 at 12:21 AM.

  2. #2
    fabiodriven's Avatar
    fabiodriven is offline Aspiring romance novel cover model, and the Official 3WW slayer of thieves and swindlers. Catch me if you can
    Join Date
    Jun 2008
    Location
    The woods
    --
    10,515
    Any person well versed in electrical and electronics is invaluable. I don't know of anyone else archiving electrical systems specifically, and you are doing a fantastic job. Thank you!
    85 Tri-Zinger 60
    85 ATC250SX
    86 ATC250SX
    87 ATC250SX
    02 XR650L conversion
    84 ATC 480R

  3. #3
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Thanks for the positive words of encouragement. Ironically, my dream job was to fix computers, got that as my first job, moved up to database admin and the job environment I was in was horrible, so went into wire harnesses. I've had a hobby programming since I was around 10 which is why I listed GW Basic (1987 copyright if I recall correctly). I still remember some of the syntax for that old lang. I also played with electricity when I was a kid too, but it was more with DC power, batteries, lights and such, nothing fancy like actually using micro controllers or anything like that. Heck I still haven't had any real experience with a micro controller, even though I know a bit about them and might even be able to make a program for one.

    Anyway, small update on the project so far. I'm working on getting a basic GUI (the visual interface) setup and trying to think ahead of what all will be needed. For now I'm targeting to make this work for the 86 ATC250R wire layout because it's complicated enough to force me to over come most issues I think I'll face, while still being a somewhat simple harness overall.

    Couple notes, zoom is hard coded right now, planning to make a + and - buttons to zoom in/out, the dot grid is for measurements, each gap = 1inch. In the code I'm doing it based on 100 pixels and scaling out with a target of measurements accurate down to 1/4in. Basically all of my templates are physically down to the 1in because that's the peg board spacing. I have a few I built from screws and such that's real measurements, but they are slow to make, and hard to reproduce. Peg boards make it easy to reproduce, but less friendly for the actual harness making process.

    Anyway, progress is slow, I haven't done much programming lately so I'm a bit rusty and basically have no experience with javascript. The GUI won't be pretty right now, might never become pretty, I've never been a front end/graphics type of person, I've done better at the back end, basically the inner workings of stuff.

    Anyway, I'll post a photo so there's atleast some sort of visual to start this thread off with lol. Basically just the basic menu/control area and the grid so far.


  4. #4
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    As normal, fairly quick visible progress once I got a hang of things and stopped getting distracted lol. Zoom/scaling functions with the +/- buttons, there's 3 bars of text on the left (only one shown), basically title1, title2, and a status/hover message area. I hard coded the ATC350X harness layout into it as test input (the black lines), but it's not fully visible the top bar covers some of it.

    Planned things next are ASDW + arrow key controls + arrow buttons to move the grid around, start the grid's 0,0 point where it's fully visible. Maybe auto scale based on harness overall size. Shrink the black line to where the tubing/harness wrap stops, and make "wires" come out of the ends.

    So far the page is about 160 lines of code. Cpu usage seems very good, with it zoomed out as much as I allow it, max I see is 3% cpu usage. Typical is 0-1%. That's for the whole browser, and I have 10 tabs going lol. Anyway, next updates will likely be more function over visual.


  5. #5
    Join Date
    Oct 2002
    Location
    Northeast
    --
    17,433
    I love your products. I can appreciate the time and materials/tools it takes to do this sort of stuff.

    Some peeps just don't get it.

    I'm glad your around...
    All our government does is distract us while they steal from us, misspend our tax $ and ruin our country

  6. #6
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Thanks, it's hard to imagine what it takes to do x y and z when you've never done it. Like I have no clue how hard dentist work is, I just know the end product of cleanings/fillings etc. Like what's the time involved in making a crown, and there's more than one type of crown, so whats the manufacture differences etc. Same really goes for programming, anyone can copy code and have something running with their name in it in 5 mins or less, however build something truly unique and the viewpoint is a little different. Some people can do it better than others, and experience plays a huge role in that.

    Anyway, I've only ran into 1-2 customers that had issues with me, but out of 2000+ sales that's a great customer satisfaction rate, you can never make 100% everyone happy.

    I'm really nothing special, just my experiences are different than others. I couldn't talk hardly a minute on sports, just because I don't follow any sports, but I know there's a lot of people that know's the name of every term member of their favorite team, the ins and outs of the game etc. Where you put your focus in is what you excel at. I can only hope my IQ is average or slightly above, never took a test though.

    Hoping to get a little done on the page today, have one thing planned to do then on to doing more scripting.

    Kind of shocked someone with programming experience hasn't chimed in. Always fun to bounce ideas around.

  7. #7
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Another update.

    Arrow buttons added + functional
    Added grid coordinates to the "status" text line
    Added "wire ends" to the harness layout. All wires are added for the diagram, but they all overlap currently, I'll have to make them feather out so all wires are visible. Also stripe color is visible in the center of the wire line.
    top left point of visible grid is the logical start as well now, on startup that's 0,0 point

    Not a finished product, but figured I'd give a sample of what the "data" looks like to make this possible so far. Clearly it's not finished and likely to change. Also note the coords are 100 based, meaning 100 = 1in or 1 grid dot. I'll have to associate wires to which harness tubing end location to make the feather out system work. If I get fancy, I should be able to auto detect based on starting location (xstart and ystart) and always store the data with that requirement in mind.

    Note: seems the image quality drops some when I upload and things blur together a little. The page in person is crisp and clear and colors are consistent.


    Note: sadly there isn't a [code] tag to use to visualize the code better and to make the quote box limited in size (scroll-able).
    Quote Originally Posted by code
    insulation.push({xstart:500,ystart:1200,xend:4300, yend:1200});
    insulation.push({xstart:500,ystart:1200,xend:500,y end:300});
    insulation.push({xstart:2900,ystart:1200,xend:2900 ,yend:600});

    wireEnds.push({xstart:100,ystart:1200,xend:500,yen d:1200,color1:"green",color2:"green",device:"Handl ebar Switches",pin:1,connector:".110 Female 3pin"});
    wireEnds.push({xstart:100,ystart:1200,xend:500,yen d:1200,color1:"brown",color2:"brown",device:"Handl ebar Switches",pin:2,connector:".110 Female 3pin"});
    wireEnds.push({xstart:100,ystart:1200,xend:500,yen d:1200,color1:"white",color2:"yellow",device:"Hand lebar Switches",pin:3,connector:".110 Female 3pin"});
    wireEnds.push({xstart:100,ystart:1200,xend:500,yen d:1200,color1:"black",color2:"white",device:"Handl ebar Switches",pin:1,connector:"3.5mm Bullet Female"});

    wireEnds.push({xstart:500,ystart:1200,xend:500,yen d:1800,color1:"green",color2:"green",device:"Groun d",pin:1,connector:"6mm Ring"});

    wireEnds.push({xstart:500,ystart:300,xend:500,yend :100,color1:"green",color2:"green",device:"Coil",p in:1,connector:".250 Flag"});
    wireEnds.push({xstart:500,ystart:300,xend:500,yend :100,color1:"black",color2:"yellow",device:"Coil", pin:1,connector:".250 Flag"});

    wireEnds.push({xstart:2000,ystart:1200,xend:2000,y end:1000,color1:"black",color2:"red",device:"",pin :1,connector:"3.5mm Bullet Male"});
    wireEnds.push({xstart:2000,ystart:1200,xend:2000,y end:1000,color1:"white",color2:"yellow",device:"", pin:1,connector:".110 Male 2pin"});
    wireEnds.push({xstart:2000,ystart:1200,xend:2000,y end:1000,color1:"green",color2:"green",device:"",p in:2,connector:".110 Male 2pin"});
    wireEnds.push({xstart:2000,ystart:1200,xend:2000,y end:1000,color1:"blue",color2:"yellow",device:"",p in:1,connector:".110 Male 2pin (Red)"});
    wireEnds.push({xstart:2000,ystart:1200,xend:2000,y end:1000,color1:"green",color2:"white",device:"",p in:2,connector:".110 Male 2pin (Red)"});

    wireEnds.push({xstart:2900,ystart:600,xend:2900,ye nd:500,color1:"black",color2:"red",device:"CDI",pi n:1,connector:"CDI 4+2pin Female"});
    wireEnds.push({xstart:2900,ystart:600,xend:2900,ye nd:500,color1:"black",color2:"white",device:"CDI", pin:2,connector:"CDI 4+2pin Female"});
    wireEnds.push({xstart:2900,ystart:600,xend:2900,ye nd:500,color1:"blue",color2:"yellow",device:"CDI", pin:3,connector:"CDI 4+2pin Female"});
    wireEnds.push({xstart:2900,ystart:600,xend:2900,ye nd:500,color1:"green",color2:"white",device:"CDI", pin:4,connector:"CDI 4+2pin Female"});
    wireEnds.push({xstart:2900,ystart:600,xend:2900,ye nd:500,color1:"black",color2:"yellow",device:"CDI" ,pin:5,connector:"CDI 4+2pin Female"});
    wireEnds.push({xstart:2900,ystart:600,xend:2900,ye nd:500,color1:"green",color2:"green",device:"CDI", pin:6,connector:"CDI 4+2pin Female"});

    wireEnds.push({xstart:4300,ystart:1200,xend:4500,y end:1200,color1:"green",color2:"green",device:"Tai l Light",pin:1,connector:"3.5mm Bullet Female"});
    wireEnds.push({xstart:4300,ystart:1200,xend:4500,y end:1200,color1:"green",color2:"green",device:"Tai l Light",pin:1,connector:"3.5mm Bullet Double Female"});
    wireEnds.push({xstart:4300,ystart:1200,xend:4500,y end:1200,color1:"white",color2:"yellow",device:"Ta il Light",pin:1,connector:"3.5mm Bullet Female"});
    wireEnds.push({xstart:4300,ystart:1200,xend:4500,y end:1200,color1:"brown",color2:"brown",device:"Tai l Light",pin:1,connector:"3.5mm Bullet Double Female"});
    Just for the fun of it, I'll try to include line count for the page (while it's a single page atleast) at the end of each update.

    Bloated quite a lot this time, 266 lines of code, but a lot was copy/paste. The "buttons" are hard coded, probably should make a function to calculate text location and such but it's fine for now.

    Anyway, plans atm are:

    Add feather out system on the wire ends
    Add the data for the wires inside the harness to connect the wire ends
    Hover over a wire end displays wire route in the harness + display an info box for that wire + related connector info
    Add code for Click+Drag functionality (ex to move grid around via mouse, basically required to make the editor too)
    Add mouse scroll wheel code to allow it to control the zoom as well
    Add keyboard controls (none currently) so arrow keys, +, - etc can be used to control the page too
    Some sort of ?/Help button to give details on how to use the page (probably a much later thing)
    Add Edit/View Mode button (can always hide it if I don't want to editor public if I think it's too confusing to use for end users)
    Add Harness Layout/Wire Diagram button - assuming I can figure out how to auto-generate a wire diagram with the info so far.

    Clearly the above list is a little more long term focused.

  8. #8
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Well cheated a little, wire ends are changed how I store data on them now. xstart, ystart, wirelength, and angle. This gives me the feather option I talked about. Probably be a little more complicated in the editor mode, but the idea is to view the data as simple as possible. Anyway, never took trig or anything, so never did much with cos/sin functions. Good thing it's easy to search those functions, even though it was still a mess to get all the offsets and such to work with it and the 100 based system + scaling lol.

    Was hoping to make the feather out system automatic, but oh well, I'll figure that out while it's in editor mode.



    Cleaned up the code some, took out some test code etc, so 262 lines now.

  9. #9
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Started the hit detection on the wire ends. Basically a second screen is generated in memory with the "hot zones". Black = nothing special, everything else has a unique color, which can be extracted to detect what exactly is being hovered over or clicked. Here's the hot zones for example for the wire diagram in past posts. Colors are random generated and are unique (up to 16.7 million unique objects/colors possible). First time dealing with this type of idea, but never used angled lines/odd shaped buttons etc either.

    Added some very basic code for a mode select system (view, edit, debug). The screen shot below is the debug to show the hidden window.
    Also finally added the keyboard events to the code so arrow keys etc are usable to control the screen.

    Getting closer to the point where I could provide a live demo link.



    355 lines of code now

  10. #10
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Finished hit detection system, atleast for hovering over wire ends. While hovering over a wire end, the insulation turns a more gray color and draws the wire "middle" and only draws the wire ends for that color. Also have a little info box to the side. Thinking about making it if clicked, it will show more info about the connector, like a 2 pin connector would show a graphic representing the connector, pin layout, and which wire connects to which pin.

    Added scroll wheel based zoom. Zoom in targets cursor location, same with zoom out (kind of like google maps)



    473 lines of code now it's growing pretty fast lol.

    From the list before, here's the new to do list.

    Click wire end to view connector info (pins, location etc), maybe make it part of the hover box
    Add code for Click+Drag functionality (ex to move grid around via mouse, basically required to make the editor too)
    Some sort of ?/Help button to give details on how to use the page (probably a much later thing)
    Add Edit Mode
    Add Wire Diagram Mode
    Mouse wheel zoom is a little clunky, probably need to rework the offset system so it can be smoother

  11. #11
    Join Date
    Oct 2002
    Location
    Northeast
    --
    17,433
    Start up your own website, move on to models people buy more of... Of course, I will always appreciate your stuff...
    All our government does is distract us while they steal from us, misspend our tax $ and ruin our country

  12. #12
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    I do have a website =). http://atcfixer.com, the live demo will probably be hosted there. I also have http://atvinterchange.com with my 350x in the background, but it's kind of a project that died out (most of the info can be found on here anyway).

    That's kind of how I've been doing the wire harness stuff, most requested is what I focus on keeping in stock when possible. However, the not as common machines are simpler to build. Like the ATC90 harness takes me like 30-60 mins to make, a 350x harness is around 1-2 hours. Something like a big red or a machine with a battery, it would probably take 3-4 hours.

    It's not hard to push a live demo, and it's "ok" enough I think to give a preview. I guess I need to start putting a version number on it so it's easy to tell bug reports and such what era it's from. Probably cheat and use the yyyymmdd format.

    Anyway, here's the link http://atcfixer.com/harness.html I'll add it to the first post. Clearly a work in progress =).

  13. #13
    Join Date
    Apr 2012
    Location
    USA
    --
    4,114
    Been a long time since I updated this thread, figured I'd give an update. Kind of dropped the interactive wire diagram concept in favor for more typical and probably more user friendly image/website based diagrams.

    I've already started a site at https://atvmanual.com, however I would like some feedback on the completely redesigned site at the link below. It's still a work in progress, but once I get everything pushed to the new system I can create content so much more efficiently.


    https://dev.atvmanual.com

    I'm aware the make/model picker redirects to the main site, you have to choose Honda and manually navigate. The other brands currently don't have pages generated but will have pages by the time it goes live. Constructive criticism is welcomed. The redesign is based on page loading performance, mobile data usage, server load reduction, and a million times more flexible in design. In the back end the new pages are "static" never/rarely changing files that should load insanely fast while the old pages were generated on the fly which is a bit slower, and a ton of extra junk not really needed on every page (javascript, bloated CSS, etc). I'm not the greatest with knowing how good/bad something looks, I'm normally more of a back end dev.

    Here's the site I've been using to test the page loading metric. a 90/100 score means it performs as good as 75% or better than all other sites. 100 score the bar at 98%.


    OLD


    NEW



    Pretty hard to get better than that, and that's with "cheap" shared hosting so the server could be upgraded to give even better speeds. The goal was instant page loads (ignoring images) and it feels pretty instant to me =).

    There's two design concepts I merged together on this project. Mobile first, which is the site is designed for how it looks on mobile devices, then rules are applied when it's on a wider screen to make the tablet/desktop version of the site. The other concept is using static pages (effectively html files, no php, asp, js etc for server side processing). These are not exactly new concepts, but they are new to me for my experience with web dev. I wish more sites were designed with performance in mind instead of all the bloated pages that are really slow.

    Like 3ww does ok for desktop, but mobile it ranks a bit on the low side (73/100). I defo see some solid efficient design within the vbull software this site runs on, but other aspects are less than idea. Like there's a ton of images with no cache policy, so every page load requires re-downloading those images. Some do have a cache policy though, kind of weird. Looks like there's a fair bit of javascript bloat too, not as bad as like ebay though (their mobile score is 42/100). Anyway, not really trying to bash this site or anything, just stating facts and areas it could be made better for the end user.

    Talking about the end user, I''ve noticed search engine results on google have been really weird lately. Like try to research something not popular and it's super hard to find good solid results. Seems like the highest ranking pages only rank because they load faster than the other related pages. Bit of an SEO topic (Search Engine Optimization), but it just seems like google is giving a lot of weight to the ranking factors for page speed. Not a bad thing for popular searches with a lot of competitive sites proving the same thing, but it's pretty garbage when the search is not popular at all and performance is valued over the actual content. Maybe I'm just loosing my googlefu touch though. I've found I have to do a lot more "advanced" searches to find the stuff I want, like site:3wheelerworld.com, or adding "s to terms to get exact match and require it to be in the results. Not exactly the typical usage for an average user though.

    Anyway lots of work to do on the site, lots of content to make, but overall it's starting to get enough traffic to be interesting.

    I guess I'll end this post with the site spec's for google search impressions (site came up in a google search result), and clicks. From my research, it's doing pretty well since 3 wheeler related searches are not too common for what my site provides but that wasn't really the focus of the site in the first place. Just having it make enough to cover hosting costs would be nice (it's covering about 10-20% of the costs currently). Anything extra would give me pennies on the hour for the effort I've put into it so far lol. Been an interesting learning experience though with all the latest web dev stuff like html5.


//ArrowChat Integreation Code //