Coder Social home page Coder Social logo

theacodes / kicanvas Goto Github PK

View Code? Open in Web Editor NEW
528.0 13.0 21.0 10.84 MB

The KiCAD web viewer

Home Page: https://kicanvas.org

License: Other

JavaScript 0.94% CSS 1.17% HTML 0.47% GLSL 0.19% TypeScript 97.22%
kicad canvas open-source-hardware web webgl

kicanvas's Introduction

KiCanvas

KiCanvas is an interactive, browser-based viewer for KiCAD schematics and boards. You can try it out for yourself at https://kicanvas.org.

kicanvas.demo.-.medium.mp4

NOTE: KiCanvas is currently in early alpha. There will be bugs and missing features. Please take a look at known issues and file an issue if you run into trouble.

You can also use KiCanvas on your own websites using the embedding API. It's written in modern vanilla TypeScript and uses the Canvas element and WebGL for rendering. You can learn more on the development page.

KiCanvas is developed by Thea Flowers with financial support from her sponsors.

Status and roadmap

KiCanvas is very early in its development and there's a ton of stuff that hasn't been done, there's a roadmap that you can use to get an idea of the overall status of the project.

Known issues

In general, please check the GitHub issues page before filing new issues. Some high-level things that we known won't work:

  • Any KiCAD 5 files, KiCanvas can only parse files from KiCAD 6 and later.
  • Some KiCAD 7 features might not be fully implemented, such as custom fonts in schematics.
  • Browsers other than desktop Chrome, Firefox, and Safari may run into issues, as we aren't currently running automated tests against other browsers. We welcome issues related to browser compatibility, just make sure it hasn't already been reported.

FAQ

Take a look at our FAQ page for commonly asked questions and answers.

License and contributing

KiCanvas is open source! Please take a chance to read the LICENSE file.

Contributions are welcome! However, since KiCanvas is in a super early stage please file an issue before you start working on something so we can coordinate. It's also recommended to take a moment and read over the development documentation.

Special thanks

KiCanvas would not be possible without the incredible financial support of our sponsors. KiCanvas received significant support from the following individual and organizations:

& donations and support from the following individuals:

kicanvas's People

Contributors

sago35 avatar theacodes avatar xiangyyang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kicanvas's Issues

kicanvas.js has a syntax error in Safari 16.2 (17614.3.7.1.7, 17614)

Describe the bug
All kicanvas.org pages appear as a blank white page on my version of Safari, including the home page.

Looking at the JS console, the following error appears:

[Error] SyntaxError: Unexpected token '{'
	(anonymous function) (kicanvas.js:1)

Expected behavior
On Firefox, the page appears as expected. It's just Safari that shows the behavior.

Environment
OS: macOS Monterey 12.6.2 (21G320)
Browser: Safari 16.2 (17614.3.7.1.7, 17614)

Footprint pad offset does not affect pad primitives

I'm currently also working on some kicad parsing & rendering, so I thought I should throw some of the stuff that made me trip up at KiCanvas to see what happens.

The attached PCB contains one instance of RF_Mini-Circuits:Mini-Circuits_BK377. This footprint for some reason contains pads that have a "drill" offset set. Now, even though that offset param in the s-expr occurs within the (drill) object, in KiCad it offsets all other pad primitives outside of the (drill) object, with the drill AFAICT remaining at (0, 0). This offset is also affected by rotation in the (at) object, a repro for that is RF_Mini-Circuits:Mini-Circuits_TTT167_LandPatternPL-079

PCB file for Repro (rename to .kicad_pcb, github can't attach .kicad_pcb files):
test.txt

Render in KiCanvas:
Screenshot from 2023-04-24 00-35-56

Render in KiCad:
Screenshot from 2023-04-24 00-36-10

Implement a browser addon to render GitHub

Is your feature request related to a problem? Please describe.

Many people host projects on GitHub/GitLab. Instead of opening kican and pasting the link, it would be nice to have KiCanvas directly rendered in GitHub/GitLab (just like, e.g., PDFs are rendered).

Describe the solution you'd like

It would be nice to have a browser plugin that renders KiCAD files directly on GitHub/GitLab

Describe alternatives you've considered

Writing a Grease monkey script. But a plugin is easier to install for BFU.

Additional context

There is not extra context. Thanks for the project!

Random behavior on input folder dragging (was Can't get it to do anything)

I am running Chrome Version 114.0.5735.198, OS is Linux Mint 21.1 Cinnamon.

If I drag and drop any .kicad_pro file onto https://kicanvas.org/ I see one of two behaviors (I can't reproducibly get one or the other): Either nothing at all happens, or it opens an Open File dialog with the correct file name but pointing into the wrong folder, namely ~/Desktop.

If I paste https://github.com/holmesrichards/herovco/blob/main/Hardware/PCB/herovco/herovco.kicad_pro and hit enter, nothing happens.

(Ah, I guess it wants a KiCad project folder, rather than the kicad_pro file. That was not clear. It says "Paste a GitHub link or drag & drop your KiCAD files", suggest it should more specifically tell you to paste a link to or drag and drop a KiCad project folder.)

Desktop Safari support

Describe the bug
Window remains blank

Expected behavior
Show open to face page.

Screenshots
Blank screen

Environment

  • OS: OSX
  • OS version: Ventura M2 laptop
  • Browser: Safari
  • Browser version:
  • Additional info:

Additional context
Add any other context about the problem here.

Note on landing page clarifying whether designs are uploaded to a server

Is your feature request related to a problem? Please describe.
On the landing page prompting for either a GitHub link or to upload KiCAD files, it's not immediately clear that the files are only handled by the client's web browser.

Describe the solution you'd like
I think it might be insightful to new users to let them know that their designs stay in their own browser. Of course, this would be more important for files uploaded than those downloaded from public GitHub repos. I haven't tried one, but I'm not sure how private GitHub repos would work in this regard.

Github revision browsing/side-by-side

The github file open feature is really cool, but to take the idea one or two steps further, it would be really cool if you were to parse the git history for that file and provide a simple UI to switch between versions of that file (only listing commits where that specific file was modified). Then, you could have two side-by-side views where you can select two different versions of the file to compare them. Diff highlighting would also be amazing, but I'm not familiar enough with the file formats to know how hard that last part might be.

Pointer events on Android Chrome not working for pan/zoom

Describe the bug
Touch inputs via Pointer events API on Android Chrome doesn't appear to pan and zoom the viewport.

To Reproduce
Steps to reproduce the behavior:

  1. Go to any schematic using and Android Chrome browser
  2. Try to pinch zoom or pan the viewport

Expected behavior
Pinch and pan zoom behaviors should work.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment
Android Chrome 112

Additional context
Add any other context about the problem here.

Alternative options for panning

Is your feature request related to a problem? Please describe.
With my peripherals (standard mouse with single scroll wheel, and a keyboard), it seems the only way to pan is with the mouse wheel for up/down, and shift+mouse wheel for left/right. With my setup, at least, the panning seems to be very insensitive. At a moderate zoom level, it takes a good number of wheel rotations for me to reach either side of the page.

Describe the solution you'd like
I think the insensitivity is okay for close-up movements, but it might be nice to have faster ways to pan. I haven't tried, but I would guess that currently a touchpad on a laptop might provide a better panning experience.

My suggestion would be to add either right- or middle-mouse + drag panning (with an implementation similar to that of KiCAD's).

Small stroke width lines are difficult to read

Is your feature request related to a problem? Please describe.
When loading files that include unfilled zones on the User.* layers, the line work can be difficult to read if the stroke width is very small.

Example file: https://kicanvas.org/?github=https%3A%2F%2Fgithub.com%2FGlasgowEmbedded%2Fglasgow%2Fblob%2F5cb023ee61cb5d3b05b2662aef9ee25edb6dfabe%2Fhardware%2Fboards%2Fglasgow%2Fglasgow.kicad_pcb

Problematic line s-expr:

  (gr_line (start 126 69) (end 54 69)
    (stroke (width 0.01) (type solid)) (layer "User.1") (tstamp 0d817c2c-d13a-4a6c-92e5-a11fa265616e))

Describe the solution you'd like
Line width should be clamped to a (user controllable?) minimum of at least a few pixels.

Describe alternatives you've considered

  • Leave the current behavior, as it is technically correct (the relevant lines do indeed specify a minuscule line width)
  • Adjust color scheme so the lines are higher contrast, even if they are only 1 pixel wide.

Additional context
image

non-default text & knockout text renders incorrectly

hi! I've noticed that knockout text (reverse video) and fancy fonts (georgia on the mac, in this case) don't render correctly.
it looks like the inside/outside rules are wrong.
https://github.com/plinkysynth/scratch_stuff/blob/main/hellokicanvas.kicad_pcb (I tried to make a direct kicanvas link but its not loading?! it loads locally tho)

how it looks in browser

how it looks in kicad

I've also created a more minimal file consisting of the board outline and a single letter 'o' in georgia font, if that's helpful for a simpler repro.
https://github.com/plinkysynth/scratch_stuff/blob/main/minimal.kicad_pcb

sorry if this is a dup, I couldn't see one!

Fine grid doesn't update when 'zoom to page' is clicked

Describe the bug
The fine grid remains in place when the 'zoom to page' button is clicked.

To Reproduce
Steps to reproduce the behavior:

  1. Zoom to level where fine grid is shown
  2. Click 'zoom to page'
  3. Fine grid remains in place

Expected behavior
Grid is updated

Screenshots
Before clicking 'zoom to page':
image
After clicking 'zoom to page':
image

Environment

  • OS: Windows
  • OS version: 11
  • Browser: Chrome
  • Browser version: 112.0.5615.121

Normal file upload or support any link

Is your feature request related to a problem? Please describe.
The site https://kicanvas.org/ only lets you drag and drop or post github links.
I have a bunch of stuff not hosted on github but on a private gitea and just pasting links to the "raw" download link to website out of github doesn't seem to do anything.

Other option is drag and drop. I don't have/use any kind of graphical file explorer and all my windows are full screen, I can't do any kind of drag and drop of a local file to a website.

Describe the solution you'd like
Ideally both :

  • Support arbitrary link to files to download. You can do a HEAD first to check it's reasonable size to avoid huge file downloads.
  • Add a simple "select file" button for classic upload dialog rather than this drag and drop stuff.

OrangeCrab project loading crashes

URL of project that produces the crash:

https://github.com/orangecrab-fpga/orangecrab-hardware/tree/main/hardware/orangecrab_r0.2

Console logs the following backtrace:

kicanvas-app> @ 134.486s
12:24:14.787
kicanvas.js:937 Loading project from GitHubFileSystem @ 134.487s
12:24:14.787
kicanvas.js:937 Loading file OrangeCrab.kicad_pcb @ 134.487s
12:24:15.723
kicanvas.js:937 Parsing expression with 2679533 chars @ 135.423s
12:24:15.723
kicanvas.js:1619 Error: Unexpected character while tokenizing atom at index 56: ~
Context: (kicad_pcb (version 20171130) (host pcbnew 5.1.5-52549c586ubuntu18.04.1)
at tokenize (kicanvas.js:941:144)
at BV.next ()
at listify_tokens (kicanvas.js:946:82)
at vl.next ()
at Function.from ()
at listify_tokens (kicanvas.js:946:192)
at vl.next ()
at Function.from ()
at listify_tokens (kicanvas.js:946:192)
at vl.next ()
12:24:15.724
kicanvas.js:937 Completed @ 135.424s
๏ปฟ

Root GitHub URLs do not load as expected

I'm not sure if this is on purpose, please excuse me and close the issue if it is.

If you have KiCad files in the root folder of your repo and you just paste the repo URL in KiCanvas (for example https://github.com/arturo182/serpente_hw), it doesn't open it. The console says "No valid KiCAD files found".
You need to explicitly specify the branch for it to work (for example https://github.com/arturo182/serpente_hw/tree/master/).

There was also no feedback after I pasted the first link, it took me a second to realize what was the problem.

Create "Open with" button

A lot of open source projects that are cloud based have a "open with" or "run on" button that through a carefully crafted URL will launch some open source code on a server. Heroku pioneered this idea with the, "Deploy to Heroku" button. You can see more examples at https://shields.io/. I think it would be neat (and good marketing) to have a "Open with KiCanvas" button that anyone could add to say their GitHub readme!

Footprints containing multiple pads with the same number only render one.

The file you're trying to view. If you don't want the file to be public, let us know and we'll arrange for you to send it privately.

https://kicanvas.org/?github=https://github.com/simplexion/rtl872xd-dev-board/tree/main/source/rtl872xd-dev-board

A screenshot of the file in KiCAD

will follow up

A screenshot of the file in KiCanvas

the board page doesn't render anything for me as of now. was still working yesterday...

A description of the issue

If a footprint has multiple pads with the same number (e.g. ground pads of coaxial connectors) only one of these pads gets filled.

Themes/colors

Is your feature request related to a problem? Please describe.
I really, thoroughly, utterly dislike the choice of colors used for the schematic display and for the UI in general. I very much prefer the colors used by default in KiCad for the schematic. I very strongly prefer light modes to dark. Blue/green on black is to my taste awful looking and difficult to read.

Describe the solution you'd like
Provide some themes functionality or other way to change the colors used.

Describe alternatives you've considered

Additional context

Zones with only front & back copper layers are not rendered

This one is a doozy!

For reasons only a deity could ever understand, KiCad uses some extra special syntax specifically when a zone includes both the front and back copper layers, but no inner copper layers. Instead of the S-expression (layers "F.Cu" "B.Cu") as one would expect, we instead get (layers "F&B.Cu"). When inner layers are included, we get (layers "F.Cu" "In1.Cu" ... as one would expect. This is only a really random special case, and does not affect any other layer combinations or S-expression attributes.

This quirk is present in both KiCad 6 and 7 file formats. The offending source location in the S-Expression serializer is https://gitlab.com/kicad/code/kicad/-/blob/d563e5be14bbea97e63ff8352a6f1504cceb7438/pcbnew/plugins/kicad/pcb_plugin.cpp#L1338

As far as I can tell, this code affects zone formatting for both standalone zones in a board, and zones that are part of a footprint, in both instances including keepout zones. It looks like it will also affect pads inside footprints.

Screenshot from 2023-07-05 16-53-29
Screenshot from 2023-07-05 16-53-40

Web component please?

Is your feature request related to a problem? Please describe.
An embeddable <ki-canvas> tag would be awesome!

Describe the solution you'd like
CDN bundled es module delivering a Custom Element for the viewer experience would be amazing. E.g.

<script src="http://kicanvas.org/embed.min.js" type="module"></script>
<ki-canvas href="http://myschematic.com/thingie.kicad_sch"><ki-canvas>

Describe alternatives you've considered
Image or script based embed would work for some use cases but would not have as much utility.

Additional context
This thing is fantastic and I am so happy to see you being it into reality!

Text varaibles aren't loaded

KiCad has the option to set text variables which then get stored in the project file.

These can be used for example to keep the title, revision etc. consistent throughout all files. KiCanvas doesn't seem to handle text variables yet.

project link

image

Allow for deep links to specific parts of a schematic

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like

It would be neat to allow deep links to a specific part of a schematic or PCB.

Describe alternatives you've considered

none.

Additional context

Say I want to share a specific trace a user should look at for debugging. I could find it in Kicanvas and the URL would be updated so I could directly share it and the other user would see the same state as I see.

Failed to load PCB with tildes in a net name

This file failed to load with the following error:

<kicanvas-app>  @ 14.327s
kicanvas.js:937  Loading project from GitHubFileSystem  @ 14.327s
kicanvas.js:937  Loading file HDMI-to-LH550WF1.kicad_pcb  @ 14.327s
kicanvas.js:937  Parsing expression with 594380 chars  @ 14.694s
kicanvas.js:1619 Error: Unexpected character while tokenizing atom at index 3637: ~
Context: 
  (net 61 /Control/~TRST~)
    at tokenize (kicanvas.js:941:144)
    at BV.next (<anonymous>)
    at listify_tokens (kicanvas.js:946:82)
    at vl.next (<anonymous>)
    at Function.from (<anonymous>)
    at listify_tokens (kicanvas.js:946:192)
    at vl.next (<anonymous>)
    at Function.from (<anonymous>)
    at listify_tokens (kicanvas.js:946:192)
    at vl.next (<anonymous>)
setup_project @ kicanvas.js:1619
await in setup_project (async)
(anonymous) @ kicanvas.js:1619
kicanvas.js:937  Completed  @ 14.697s

Quality of life improvement about zoom in/out

Describe the bug
I was using CTRL + Scroll to zoom in on the canvas and I accidentally moved the cursor to the parameters pane which changed the browser zoom level instead of canvas.

To Reproduce
Steps to reproduce the behavior:

  1. Position your mouse cursor on the right pane
  2. CTRL + Scroll
  3. Changes the zoom level of the whole browser

Expected behavior
I think, since zoom in/out is such a core part of this tool, it shouldn't mess with the browser zoom level at all.

Environment

  • OS: Linux
  • OS vesion: Ubuntu 22.10
  • Browser: Chrome
  • Browser version: 112.0.5615.49
  • Additional info: N/A

Layer offset

The file in KiCAD (7.0.5, MacOS)

Screenshot 2023-09-13 at 14 14 03

The file in KiCanvas (accessed Sep 13th, 2023):

Screenshot 2023-09-13 at 14 14 48 Screenshot 2023-09-13 at 14 14 57

The issue:

The layers seem to be offset from the drills and component placement. The traces don't make it all the way to the pads, and the ground trace/fill connection with the trace's drill doesn't match the XIAO footprint pad and drill position.

Unrelated

The user experience for pasting in a github link is fantastic. I wasn't expecting to be able to just drop in the URL including the folder offset (there are multiple projects in this repo), and when it popped up I was so excited. Thanks for such an incredible tool.

One nit: If I put in the repo URL with no subfolder path, it doesn't give me any feedback, something like "hmm, there's no kicad project here, if it's in a folder, make sure to include that path!" or something like that, maybe with a fixed example (some repo you control).

Hierarchical label positions change when returning to root sheet after entering subsheet

Tested on multiple projects, using the Luna files @ https://github.com/greatscottgadgets/luna/tree/main/hardware/rev0 as public reference that exhibits the issue.

Upon loading the project, everything looks fine, e.g.
Screenshot from 2023-04-21 15-57-17

After entering a hierarchical sheet by either double clicking it or using the sheet nav, and then returning to the root (possibly parent in general) sheet, the hierarchical label positions get offset, like this:
Screenshot from 2023-04-21 15-57-33

What's interesting is that repeating the same thing, i.e. again entering a sheet, then returning to root, seems to toggle the position offset. I.e. doing it once gets you back to the original, correct, view. Then doing the same thing again causes the offset to reappear, and so on, seemingly reliably.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.