Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

hmml_to_html.c: Switch to hsl colours [#23] 

These colours should be visible on both dark and light backgrounds
This commit is contained in:
Matt Mascarenhas 2017-04-14 00:46:21 +01:00
parent 1b3db237f5
commit 6925dfb565
5 changed files with 93 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
hmml_to_html/hmml_to_html.c
View File

@ -154,39 +154,65 @@ StringsDiffer(char *A, char *B)
return *A - *B;
}
int
typedef struct
{
int Hue;
int Saturation;
int Lightness;
} hsl_colour;
hsl_colour
CharToColour(char Char)
{
// Hue between 0 - 256
// Saturation between 0 - 100
// Lightness = 74
// hsl(120, 100%, 50%)
hsl_colour Colour;
if(Char >= 'a' && Char <= 'z')
{
return (((float)Char - 'a') / ('z' - 'a') * 0xFFFFFF);
Colour.Hue = (((float)Char - 'a') / ('z' - 'a') * 256);
Colour.Saturation = (((float)Char - 'a') / ('z' - 'a') * 100);
}
else if(Char >= 'A' && Char <= 'Z')
{
return (((float)Char - 'A') / ('Z' - 'A') * 0xFFFFFF);
Colour.Hue = (((float)Char - 'A') / ('Z' - 'A') * 256);
Colour.Saturation = (((float)Char - 'A') / ('Z' - 'A') * 100);
}
else if(Char >= '0' && Char <= '9')
{
return (((float)Char - '0') / ('9' - '0') * 0xFFFFFF);
Colour.Hue = (((float)Char - '0') / ('9' - '0') * 256);
Colour.Saturation = (((float)Char - '0') / ('9' - '0') * 100);
}
else
{
return 0x777777;
Colour.Hue = 180;
Colour.Saturation = 50;
}
return Colour;
}
int
StringToColourHash(char *String)
char *
StringToColourHash(buffer *Buffer, char *String)
{
int Result = 0;
hsl_colour Colour = {0, 0, 26};
int i;
for(i = 0; String[i]; ++i)
{
Result += CharToColour(String[i]);
Colour.Hue += CharToColour(String[i]).Hue;
Colour.Saturation += CharToColour(String[i]).Saturation;
}
return Result / i;
// hsl(120, 100%, 50%)
Colour.Hue = Colour.Hue % 360;
Colour.Saturation = Colour.Saturation % 100;
Buffer->Ptr = Buffer->Location;
CopyStringToBuffer(Buffer, "hsl(%d, %d%%, %d%%)", Colour.Hue, Colour.Saturation, Colour.Lightness);
return(Buffer->Location);
}
int
@ -258,7 +284,7 @@ BuildCategories(buffer *AnnotationClass, buffer *Category, int *MarkerIndex, boo
}
void
GenerateTopicColours(char *Topic)
GenerateTopicColours(buffer *Colour, char *Topic)
{
for(int i = 0; i < ArrayCount(CategoryMedium); ++i)
{
@ -301,8 +327,8 @@ GenerateTopicColours(char *Topic)
++TopicsPtr;
}
fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: #%X; background: #%X; }\n",
SanitisePunctuation(Topic), StringToColourHash(Topic), StringToColourHash(Topic));
fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: %s; background: %s; }\n",
SanitisePunctuation(Topic), StringToColourHash(Colour, Topic), StringToColourHash(Colour, Topic));
fclose(TopicsFile);
free(TopicsBuffer);
@ -347,6 +373,7 @@ main(int ArgC, char **Args)
buffer AnnotationData;
buffer Text;
buffer Category;
buffer Colour;
buffer Master;
@ -397,6 +424,7 @@ main(int ArgC, char **Args)
ClaimBuffer(MemoryArena, &ClaimedMemory, &Category, 256);
ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationClass, 256);
ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, 1024 * 4);
ClaimBuffer(MemoryArena, &ClaimedMemory, &Colour, 32);
CopyStringToBuffer(&AnnotationHeader,
" <div data-timestamp=\"%d\"",
@ -409,8 +437,8 @@ TimecodeToSeconds(Anno->time));
{
CopyStringToBuffer(&AnnotationClass, " authored");
CopyStringToBuffer(&Text,
"<span class=\"author\" style=\"color: #%X;\">%s</span> ",
StringToColourHash(Anno->author),
"<span class=\"author\" style=\"color: %s;\">%s</span> ",
StringToColourHash(&Colour, Anno->author),
Anno->author);
}
@ -428,9 +456,10 @@ Anno->author);
if(Anno->markers[MarkerIndex].type == HMML_MEMBER)
{
CopyStringToBuffer(&Text,
"<a href=\"https://handmade.network/m/%s\" target=\"blank\" style=\"color: #%X; text-decoration: none\">%.*s</a>",
// TODO(matt): Hoverbox
"<a href=\"https://handmade.network/m/%s\" target=\"blank\" style=\"color: %s; text-decoration: none\">%.*s</a>",
Anno->markers[MarkerIndex].marker,
StringToColourHash(Anno->markers[MarkerIndex].marker),
StringToColourHash(&Colour, Anno->markers[MarkerIndex].marker),
StringLength(Readable), InPtr);
InPtr += StringLength(Readable);
++MarkerIndex;
@ -438,16 +467,18 @@ StringLength(Readable), InPtr);
else if(Anno->markers[MarkerIndex].type == HMML_PROJECT)
{
CopyStringToBuffer(&Text,
"<a href=\"https://%s.handmade.network/\" target=\"blank\" style=\"color: #%X; text-decoration: none\">%s</a>",
// TODO(matt): Hoverbox
"<a href=\"https://%s.handmade.network/\" target=\"blank\" style=\"color: %s; text-decoration: none\">%s</a>",
Anno->markers[MarkerIndex].marker,
StringToColourHash(Anno->markers[MarkerIndex].marker),
StringToColourHash(&Colour, Anno->markers[MarkerIndex].marker),
Readable);
InPtr += StringLength(Readable);
++MarkerIndex;
}
else if(Anno->markers[MarkerIndex].type == HMML_CATEGORY)
{
GenerateTopicColours(Anno->markers[MarkerIndex].marker);
// TODO(matt): Uncomment
GenerateTopicColours(&Colour, Anno->markers[MarkerIndex].marker);
BuildCategories(&AnnotationClass, &Category, &MarkerIndex, &HasCategory, Anno->markers[MarkerIndex].marker);
}
}
@ -578,7 +609,8 @@ Anno->time);
while(MarkerIndex < Anno->marker_count)
{
GenerateTopicColours(Anno->markers[MarkerIndex].marker);
//TODO(matt): Uncomment
GenerateTopicColours(&Colour, Anno->markers[MarkerIndex].marker);
BuildCategories(&AnnotationClass, &Category, &MarkerIndex, &HasCategory, Anno->markers[MarkerIndex].marker);
}
@ -630,6 +662,7 @@ Anno->time);
CopyBuffer(&Player, &Annotation);
ClaimedMemory -= Colour.Size;
ClaimedMemory -= Text.Size;
ClaimedMemory -= AnnotationHeader.Size;
ClaimedMemory -= Category.Size;

22
hmml_to_html/obbg.css
View File

@ -3,9 +3,10 @@
* Main Purple: #372F46 or rgba(55, 47, 70, 1);
* Highlight Green: #3A4A3F or rbga(58, 74, 63, 1);
*/
.title.obbg {
background-color: #FFFFFF;
color: #000000;
background-color: #EEE;
color: #000;
border-bottom: 1px solid #372F46;
}
@ -23,7 +24,7 @@
}
.title.obbg .refs_container .refs {
background-color: #FFFFFF;
background-color: #EEE;
border: 2px solid #372F46;
border-top: none;
}
@ -56,34 +57,33 @@
/* Regular */
.markers_container.obbg {
background-color: #FFFFFF;
background-color: #EEE;
}
.markers_container.obbg > .marker {
border-bottom: 1px solid #2A3172;
border-bottom: 1px solid #888;
}
.markers_container.obbg > .marker:hover > .content {
background-color: #FFF8E7;
background-color: #DDD;
}
.markers_container.obbg > .marker:hover > .faded .content {
background-color: rgba(42, 49, 114, 0.7);
background-color: #68557E;
color: #FFFFFF;
}
.markers_container.obbg > .marker > .content {
background-color: #FFFFFF;
color: #000000;
}
.markers_container.obbg > .marker.current > .content {
color: #2A3172;
color: #102369;
}
.markers_container.obbg > .marker > .progress .content {
background-color: #2A3172;
color: #FFFFFF;
background-color: #372C44;
color: #EEE;
}
/* Blackboard */

12
hmml_to_html/riscy.css
View File

@ -1,5 +1,5 @@
.title.riscy {
background-color: #FFFFFF;
background-color: #EEE;
color: #000000;
border-bottom: 1px solid rgba(246, 178, 26, 0.8);
}
@ -18,7 +18,7 @@
}
.title.riscy .refs_container .refs {
background-color: #FFFFFF;
background-color: #EEE;
border: 2px solid rgba(246, 178, 26, 0.8);
border-top: none;
}
@ -30,7 +30,7 @@
.title.riscy .refs_container > .refs .ref.current {
background-color: #2A3172;
color: #FFFFFF;
color: #EEE;
}
.title.riscy .refs_container > .refs .ref:hover {
@ -51,7 +51,7 @@
/* Regular */
.markers_container.riscy {
background-color: #FFFFFF;
background-color: #EEE;
}
.markers_container.riscy > .marker {
@ -68,7 +68,7 @@
}
.markers_container.riscy > .marker > .content {
background-color: #FFFFFF;
background-color: #EEE;
color: #000000;
}
@ -100,7 +100,7 @@
}
.markers_container.riscy > .marker.blackboard > .content {
background-color: #FFFFFF;
background-color: #EEE;
background-size: 12px 12px;
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);

2
hmml_to_html/style.css
View File

@ -126,6 +126,8 @@
.markers_container > .marker.authored .content .author {
font-style: normal;
font-variant: normal;
font-weight: bold;
}
.markers_container > .marker.authored {

36
hmml_to_html/topics.css
View File

@ -1,17 +1,19 @@
.marker .content .categories .category.rendering { border-color: #60B60A; background: #60B60A; }
.marker .content .categories .category.mathematics { border-color: #5E0595; background: #5E0595; }
.marker .content .categories .category.simulation { border-color: #7DF3B5; background: #7DF3B5; }
.marker .content .categories .category.animation { border-color: #62FC95; background: #62FC95; }
.marker .content .categories .category.sorting { border-color: #8AF8AE; background: #8AF8AE; }
.marker .content .categories .category.parsing { border-color: #70A3D6; background: #70A3D6; }
.marker .content .categories .category.language { border-color: #4CCCCC; background: #4CCCCC; }
.marker .content .categories .category.ai { border-color: #28F5C2; background: #28F5C2; }
.marker .content .categories .category.demo { border-color: #547AE0; background: #547AE0; }
.marker .content .categories .category.debug-visualisation { border-color: #6DC3FE; background: #6DC3FE; }
.marker .content .categories .category.physics { border-color: #869535; background: #869535; }
.marker .content .categories .category.experience { border-color: #604188; background: #604188; }
.marker .content .categories .category.trivia { border-color: #7C962E; background: #7C962E; }
.marker .content .categories .category.pathfinding { border-color: #5A4C54; background: #5A4C54; }
.marker .content .categories .category.optimisation { border-color: #7E4B17; background: #7E4B17; }
.marker .content .categories .category.memory { border-color: #8DA740; background: #8DA740; }
.marker .content .categories .category.maths { border-color: #72B020; background: #72B020; }
.marker .content .categories .category.demo { border-color: hsl(335, 32%, 26%); background: hsl(335, 32%, 26%); }
.marker .content .categories .category.simulation { border-color: hsl(174, 92%, 26%); background: hsl(174, 92%, 26%); }
.marker .content .categories .category.threading { border-color: hsl(64, 8%, 26%); background: hsl(64, 8%, 26%); }
.marker .content .categories .category.language { border-color: hsl(251, 40%, 26%); background: hsl(251, 40%, 26%); }
.marker .content .categories .category.physics { border-color: hsl(218, 68%, 26%); background: hsl(218, 68%, 26%); }
.marker .content .categories .category.profiling { border-color: hsl(269, 88%, 26%); background: hsl(269, 88%, 26%); }
.marker .content .categories .category.optimisation { border-color: hsl(69, 92%, 26%); background: hsl(69, 92%, 26%); }
.marker .content .categories .category.input-handling { border-color: hsl(126, 94%, 26%); background: hsl(126, 94%, 26%); }
.marker .content .categories .category.ui { border-color: hsl(285, 12%, 26%); background: hsl(285, 12%, 26%); }
.marker .content .categories .category.rendering { border-color: hsl(146, 40%, 26%); background: hsl(146, 40%, 26%); }
.marker .content .categories .category.memory { border-color: hsl(126, 32%, 26%); background: hsl(126, 32%, 26%); }
.marker .content .categories .category.experience { border-color: hsl(236, 76%, 26%); background: hsl(236, 76%, 26%); }
.marker .content .categories .category.trivia { border-color: hsl(25, 92%, 26%); background: hsl(25, 92%, 26%); }
.marker .content .categories .category.audio { border-color: hsl(98, 80%, 26%); background: hsl(98, 80%, 26%); }
.marker .content .categories .category.sorting { border-color: hsl(250, 80%, 26%); background: hsl(250, 80%, 26%); }
.marker .content .categories .category.animation { border-color: hsl(167, 48%, 26%); background: hsl(167, 48%, 26%); }
.marker .content .categories .category.inventory { border-color: hsl(278, 32%, 26%); background: hsl(278, 32%, 26%); }
.marker .content .categories .category.font { border-color: hsl(161, 4%, 26%); background: hsl(161, 4%, 26%); }
.marker .content .categories .category.mathematics { border-color: hsl(308, 4%, 26%); background: hsl(308, 4%, 26%); }