Comments (5)
It might also be nice to add something like (draw-bitfield-headers 8)
which would set boxes-per-row
and draw the appropriate number of reversed column headers. Adjusting the box width and margins should still be up to the diagram author, though, as it depends on the content they are rendering, and whether the bit field spans multiple lines.
from bytefield-svg.
Related to this is that we have been using packetdiag for drawing register images. Packetdiag's svg output is however terrible and often do not render in a web browser without custom additional CSS (our antora site had blank images, while the asciidoctor-pdf alternative looked great).
I just looked into bytefield-svg for this purpose and must say that it looks great so far. It solves the issue with antora and packetdiag for sure.
Our main use here is essentially fixed width registers which have three rows. The first row has field names, the second row reset values and the third row access permissions for the field (e.g. ro, wo, rw).
Like with packetdiag we have had the same issues when small bit fields have long names. In the case of packetdiag we could rotate the labels in these cases and increase the row height of the first row, I have not yet figured out how to do this with bytefield-svg yet.
from bytefield-svg.
Hello, Mattias! I am not familiar with packetdiag, unfortunately: I very quickly dismissed its output as being inadequate for my needs when I was first creating my diagrams, and then went and learned LaTeX bytefield before creating this package. So I am not certain exactly of the results you are trying to achieve. If you could point me at an example (even if the SVG is ugly) it will help me understand better.
Given what I can understand from the context here, it sounds like you want to be able to rotate column labels. You’re right that I did not build anything like that into bytefield-svg yet, as none of my diagrams needed it. However I can certainly understand the value of such a feature. Luckily we can add features to the package without even releasing new versions, because diagram source can write new functions using effectively the full power of the language in which I created bytefield-svg, Clojure. So let’s start by seeing if we can come up with some code to embed in the diagrams to draw your rotated labels, and then once we are happy with it, we can fold it into the package itself to make it easier for others to benefit from.
The first step for me would be an example diagram you want to create. Then I can try to find some time to help you write the code, although I’d certainly be happy if you could take a crack at it yourself as well. 😄 I think I put some resources for learning Clojure in the user guide. But I also fully understand that is likely to be too deep a detour, so I remain happy to help sketch things out myself.
We should probably open a new issue to track rotated headers. I haven’t had time to do any serious research yet, but from what I remember of SVG, it is possible to rotate the transformation matrix, and I think that should be our approach: rotate it a quarter turn in the proper direction, draw the label, and restore it.
from bytefield-svg.
It was not the column labels, but rather the labels in the boxes that need rotating.
I can point at this PDF at the moment (from other people, but it shows the general idea): http://ww1.microchip.com/downloads/en/DeviceDoc/doc7703.pdf
I think Table 81 and 84 is a good example illustrating what we are trying to achieve. Basically when a label in a bit field becomes longer than the field itself, we would need to rotate it and increase the row height (preferably only for one row). Our hacky way around this with packetdiag was a heuristic about bit counts and label length in characters, which is not perfect, but it worked reasonably ok (we are generating the diagrams from other descriptions in the end so we can always do stuff like that).
I'll see if I can produce some more dedicated figures next week and I will raise a box text rotation issue instead.
from bytefield-svg.
Raised issue #15
from bytefield-svg.
Related Issues (20)
- Consider an option to set the viewport HOT 2
- Pull in some useful functions from other namespaces
- Omit XML processing structures for generating HTML embedded SVG
- Declare the namespaces in the <svg> HOT 8
- Support rotation of box labels HOT 6
- defattrs should call eval-attribute-spec
- Long boxes HOT 11
- Variable row height HOT 17
- Add more examples HOT 3
- Set svg background HOT 4
- Allow boxes-per-row > 16 HOT 4
- CLI Error - Could Not Resolve Symbol: Address HOT 2
- Support automatic dark mode HOT 4
- Add draw-column-headers Function in bytefield-svg HOT 3
- boxes-per-row can't do 32? HOT 7
- draw-box should auto advance rows
- Have draw-gap handle labels and finishing previous row
- Small/vertical draw-gap function HOT 10
- Support padding to a particular address
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bytefield-svg.