//ArrowChat Code

Upcoming Events for the Next 120 Day(s)

Results 1 to 9 of 9

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

  1. #1
    Join Date
    Apr 2012
    Location
    MI, USA
    --
    2,132

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

    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.

  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
    East Bridgewater, MA
    --
    9,614
    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
    86 ATC 250SX
    02 XR650L conversion
    84 ATC 480R

  3. #3
    Join Date
    Apr 2012
    Location
    MI, USA
    --
    2,132
    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
    MI, USA
    --
    2,132
    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
    --
    16,698
    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...
    WHO IS Q?? WWG1WGA!!


    86 ATC200X Flatrack ( I may not be fast but this is one FAST 200X!!

    86 ATC350X Motocross, 86 ATC452X Flatrack!!

    07 Weekend Warrior Toy Hauler

  6. #6
    Join Date
    Apr 2012
    Location
    MI, USA
    --
    2,132
    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
    MI, USA
    --
    2,132
    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
    MI, USA
    --
    2,132
    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
    MI, USA
    --
    2,132
    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

//ArrowChat Integreation Code //