Show table which Adaptation has implemented what

[christofmuc]

You wouldn't necesarily need a generator, you could just format the Python file in that there is a section at the top which defines the data fields, and code below uses that data. Later you could then load the data from a file generated by some tool etc.

Originally I though you would just start with a rather similar synth in the create new Adaptation button function, and then just edit the file which has enough comments to get you going. But even finding out which one is similar can be hard task (we had that over there with the idea of the table showing all the features of the adaptations).

[christofmuc]

@markusschloesser This is taken from the Adaptation generator idea #59. As it stands now people are happy to take a similar looking Adaptation and just change the text and implementation (that's what I do anyway). I found a way to implement the automatic generation of that overview table, so in the next release I'll post that!

[markusschloesser]

this is a great idea!

[christofmuc]

The table is there now, linked in also from the Wiki start page: https://github.com/christofmuc/KnobKraft-orm/blob/master/adaptions/implementation_overview.md

[Andy2No]

@christofmuc Nice. Does X mean yes? In MIDI spec charts, it usually means no, with a circle for yes... I think. Maybe a Y or y would be less ambiguous, or perhaps a tick icon?

[Andy2No]

@christofmuc Also, I don't see the DSI/Sequential Prophet Rev2 in the table.

[Andy2No]

I'm finding it difficult to see which column is which, when reading synths further down in the table. A floating header probably isn't practical, as it's set in a github page, but it might help a little if the columns were shaded in alternate colours.

Maybe better still, the columns could be colour coded. For example, I've done the first and last couple of rows colour coding by the last digit. It takes a while to do it by hand, so I haven't done the whole thing, but you get the idea:

FWIW, I did it with inline styles, but css might be better. I used these colours, but maybe they're a bit gaudy:

<tr>
<th align="center" style="background-color: #260">Synth name</th>
<th align="center" style="background-color: #800">2</th>
<th align="center" style="background-color: #840">3</th>
<th align="center" style="background-color: #880">4</th>
<th align="center" style="background-color: #480">5</th>
<th align="center" style="background-color: #4a0">6</th>
<th align="center" style="background-color: #0ac">7</th>
<th align="center" style="background-color: #08a">8</th>
<th align="center" style="background-color: #048">9</th>
<th align="center" style="background-color: #008">10</th>
<th align="center" style="background-color: #440">11</th>
<th align="center" style="background-color: #800">12</th>
<th align="center" style="background-color: #840">13</th>
<th align="center" style="background-color: #880">14</th>
<th align="center" style="background-color: #480">15</th>
<th align="center" style="background-color: #4a0">16</th>
<th align="center" style="background-color: #0ac">17</th>
<th align="center" style="background-color: #08a">18</th>
<th align="center" style="background-color: #048">19</th>
<th align="center" style="background-color: #008">20</th>
<th align="center" style="background-color: #440">21</th>
<th align="center" style="background-color: #800">22</th>
<th align="center" style="background-color: #840">23</th>
</tr>

[christofmuc]

@Andy2No You're totally correct, the table is probably a bit unwieldy. I was surprised it is that large in the first place.

The table is generated via Python to markdown. Not sure how to set the colours there, and if they really help. Alternating would probably be better.

I can change the X for a Y easily :-)

[Andy2No]

@christofmuc Can you get it to insert bits of html, or is it just processing a table of data without you having any further input?

If all you can give is data for the cells of the table, you could maybe generate a table with spans around the "Y" or "-", instead of just giving the Y or -

FWIW, here's a row of the table, as I did it there - it's essentially the same as the header row:

<tr>
<td align="center" style="background-color: #260">Minilogue XD</td>
<td align="center" style="background-color: #800">X</td>
<td align="center" style="background-color: #840">X</td>
<td align="center" style="background-color: #880">X</td>
<td align="center" style="background-color: #480">X</td>
<td align="center" style="background-color: #4a0">X</td>
<td align="center" style="background-color: #0ac">-</td>
<td align="center" style="background-color: #08a">X</td>
<td align="center" style="background-color: #048">-</td>
<td align="center" style="background-color: #008">X</td>
<td align="center" style="background-color: #440">-</td>
<td align="center" style="background-color: #800">-</td>
<td align="center" style="background-color: #840">X</td>
<td align="center" style="background-color: #880">X</td>
<td align="center" style="background-color: #480">-</td>
<td align="center" style="background-color: #4a0">-</td>
<td align="center" style="background-color: #0ac">-</td>
<td align="center" style="background-color: #08a">-</td>
<td align="center" style="background-color: #048">-</td>
<td align="center" style="background-color: #008">-</td>
<td align="center" style="background-color: #440">-</td>
<td align="center" style="background-color: #800">-</td>
<td align="center" style="background-color: #840">-</td>
</tr>

Instead of setting the colour in the td (or th) tag, you could maybe change all occurrences of Y or - to something like;

"<span style=\"background-color: #" + hex_colour[column_number % 10] + "\">Y</span>"

maybe using a Python script to process your original table, substituting values like that. For alternating colours, just make it modulo 2, instead of modulo 10, of course.

[christofmuc]

Hm, I changed the code generating the table, and it looks good locally, but github won't use the styles. Probably we'd need to host the page somewhere else for it to leave the github styling.

[christofmuc]

@Andy2No Oh, and the Rev2 (and Access Virus and others) are missing because they are still C++ and no adaptations.

[Andy2No]

@christofmuc That's a shame. It looks good.

You could try putting

!important

after each colour code, e.g.

"<span style=\"background-color: #" + hex_colour[column_number % 10] + "!important\">Y</span>"

It's an exclamation mark (bang) immediately followed by the word "important", with or without a space before the ! That may override whatever they've set that's breaking it. "!important" is usually followed by a semicolon ; but I don't think that matters, at the end of an inline style definition.

EDIT: It seems that probably doesn't work, but see my next comment for something that might.

I hadn't realised the C++ ones weren't in the table, but that makes sense.

[Andy2No]

@christofmuc I've found a possible solution, via: https://github.com/github/markup/issues/1440

Assuming the rules are the same as for posting a comment, we can use some LaTex / KaTex embedded in the output for the table, to get colours. Chunks of LaTex have to be surrounded by $ signs.

$\textcolor{yellow}{\text{Hello World}}$ $\textcolor{Red}{\text{Hello World}}$

$\colorbox{Mahogany}{Lorem ipsum dolor sit amet, orangeconsectetur adipiscing elit}$

$\colorbox{Mahogany}{Lorem}$ $\colorbox{Mahogany}{ipsum}$ $\colorbox{BurntOrange}{dolor sit amet, orangeconsectetur adipiscing elit}$ $\colorbox{LimeGreen}{sit amet, orangeconsectetur adipiscing elit}$ $\colorbox{GreenYellow}{amet, orangeconsectetur adipiscing elit}$ $\colorbox{Green}{orangeconsectetur adipiscing elit}$ $\colorbox{Lavender}{adipiscing elit}$ $\colorbox{Mahogany}{elit}$

$\definecolor{c0}{RGB}{128,0,0}$ $\definecolor{c1}{RGB}{128,128,0}$ $\definecolor{c2}{RGB}{0,128,128}$ $\definecolor{c3}{RGB}{0,128,0}$ $\definecolor{c4}{RGB}{128,0,128}$

$\colorbox{c0}{Lorem}$ $\colorbox{c1}{ipsum}$ $\colorbox{c2}{dolor sit amet, orangeconsectetur adipiscing elit}$ $\colorbox{c3}{sit amet, orangeconsectetur adipiscing elit}$ $\colorbox{c4}{amet, orangeconsectetur adipiscing elit}$ $\colorbox{c0}{orangeconsectetur adipiscing elit}$ $\colorbox{c1}{adipiscing elit}$ $\colorbox{c2}{elit}$

You can't have two $$ signs in a row, you need a space between them, which gets shown in the output, but you can have a compound statement / definition.

This:

$\colorbox{c0}{Lorem }$ $\colorbox{c1}{ipsum}$ $\colorbox{c2}{dolor }$ $\colorbox{c3}{sit}$ $\colorbox{c4}{amet, }$ $\colorbox{c0}{orangeconsectetur }$ $\colorbox{c1}{adipiscing }$ $\colorbox{c2}{elit }$

Produces this: $\colorbox{c0}{Lorem }$ $\colorbox{c1}{ipsum}$ $\colorbox{c2}{dolor }$ $\colorbox{c3}{sit}$ $\colorbox{c4}{amet, }$ $\colorbox{c0}{orangeconsectetur }$ $\colorbox{c1}{adipiscing }$ $\colorbox{c2}{elit }$

Now, without the spaces:

$\colorbox{c0}{Lorem }\colorbox{c1}{ipsum}\colorbox{c2}{dolor }\colorbox{c3}{sit}\colorbox{c4}{amet, }\colorbox{c0}{orangeconsectetur }\colorbox{c1}{adipiscing }\colorbox{c2}{elit }$

$\colorbox{c0}{Lorem }\colorbox{c1}{ipsum}\colorbox{c2}{dolor }\colorbox{c3}{sit}\colorbox{c4}{amet, }\colorbox{c0}{orangeconsectetur }\colorbox{c1}{adipiscing }\colorbox{c2}{elit }$

Produce: Hello World like this:

 $\textcolor{yellow}{\text{Hello World}}{\text{Hello World}}\textcolor{yellow}{\text{Hello World}}$

$\textcolor{yellow}{\text{Hello World}}{\text{Hello World}}\textcolor{yellow}{\text{Hello World}}$

There are 68 standard colours, but more can be defined, e.g. as RGB. See: https://en.wikibooks.org/wiki/LaTeX/Colors#The_68_standard_colors_known_to_dvips

The HTML (6 digit hex) form isn't supported, but defining a colour like this works:

$\definecolor{c4}{RGB}{128,0,128}$ 

The above colours were defined like this:

$\definecolor{c0}{RGB}{128,0,0}$   $\definecolor{c1}{RGB}{128,128,0}$ 
$\definecolor{c2}{RGB}{0,128,128}$  $\definecolor{c3}{RGB}{0,128,0}$ 
$\definecolor{c4}{RGB}{128,0,128}$ 

All those spaces and carriage returns go to the output text, so really, I should have written it like this - just run it all together as one line without spacing:

$\definecolor{c0}{RGB}{128,0,0}\definecolor{c1}{RGB}{128,128,0}\definecolor{c2}{RGB}{0,128,128}\definecolor{c3}{RGB}{0,128,0}\definecolor{c4}{RGB}{128,0,128}$ 

As you can see, the descenders on lower case letters are a problem, but...

$\colorbox{c0}{X}\colorbox{c1}{X}\colorbox{c2}{-}\colorbox{c3}{Y}\colorbox{c4}{-}\colorbox{c0}{N}\colorbox{c1}{Y}\colorbox{c2}{Y}$

sticking to characters of the same height would do it. Maybe there's a way around ones of different height.

[christofmuc]

Fascinating! Too bad it seems the math renderer it uses bails out after formatting half of the table:

https://github.com/christofmuc/KnobKraft-orm/blob/19240f76b3f99b16d6d881d63402e8582901007d/adaptions/implementation_overview.md

Even without the many tds it still bails out:

https://github.com/christofmuc/KnobKraft-orm/blob/3b16c4bd0d6c843bd6d623faf632f4896fd67594/adaptions/implementation_overview.md

[Andy2No]

@christofmuc Hmm... Maybe it bails out due to a buffer overrun, if the expression between $ signs is too long?

I can see why there's no colours, by using the Raw button - you need the bit to define them, somewhere at the top:

$\definecolor{c0}{RGB}{128,0,0}\definecolor{c1}{RGB}{128,128,0}\definecolor{c2}{RGB}{0,128,128}\definecolor{c3}{RGB}{0,128,0}\definecolor{c4}{RGB}{128,0,128}$ 

That would normally go in the preamble of the LaTex document, which is a bit like the head tag on a web page, but it doesn't seem to matter if it's put in the body.

Where is the source code that produces that table? I could try experimenting with it, but I might be out of my depth :) I don't know a lot of Python.

[Andy2No]

@christofmuc I tried an experiment to see what happens if I paste the colours definition, at the top, then paste in the Raw form of one of those into a reply. I used the one with all the td tags. It at least showed some colours, in the Preview, but posting it gave mostly errors, so I've edited it out.

[christofmuc]

@Andy2No This is how it looks for me when I click on the link of the intermediate version:

So there are colors c0 c1 c2, you don't need to define them. I know LaTeX, from back in the days. The code is in test_implementation_status.py in the adaptions dir, but it needs to be run by pytest. This can be seen in the Windows gitrunner file in the .github subdirectory.

But my take was that probably the math renderer of github, as you state above, is resource limited in that it is not allowed to produce that large an output, because it certainly has to format that dynamically (else it wouldn't be a problem).

The original coloured table I screenshotted above looks great when I view it locally e.g. in PyCharm, so I am not sure if spending that much time on a github only issue is warranted. The bigger step maybe would be to start thinking if we should/could host documentation on a more suited platform, like read the docs. Then we are not limited by the github standard styles.

[Andy2No]

@christofmuc The screenshot looks good. That's roughly what I had in the Preview of the post I tried to make, yesterday, but looking at the pages you linked to was only giving me monochrome. Maybe it's because FireFox is now showing me github with a dark theme, for some reason, after a recent update. I'm fine with that, so I haven't tried to change it, but maybe it's messing with colours.

I have used LaTex in the distant past too, but I only learned a subset of it - just enough to get a PDF generated from a database, using PHP/MySQL. I've probably forgotten almost all of what I knew about it too.

Moving the documentation to another platform makes sense. I've tried to look at some of the documentation for Read The Docs, and it seems like a lot to learn, but I like the part about it being free.

I haven't managed to find an example of a table with coloured columns there yet, just alternately shaded rows, but it seems likely that it can do it. There appears to be a way to just put chunks of html in too, which would be my preference... as yet, I haven't found anything specific on how to do that, though.