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

77
hmml_to_html/hmml_to_html.c
View File

@ -154,39 +154,65 @@ StringsDiffer(char *A, char *B)
return *A - *B; return *A - *B;
} }
int typedef struct
{
int Hue;
int Saturation;
int Lightness;
} hsl_colour;
hsl_colour
CharToColour(char Char) 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') 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') 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') 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 else
{ {
return 0x777777; Colour.Hue = 180;
Colour.Saturation = 50;
} }
return Colour;
} }
int char *
StringToColourHash(char *String) StringToColourHash(buffer *Buffer, char *String)
{ {
int Result = 0; hsl_colour Colour = {0, 0, 26};
int i; int i;
for(i = 0; String[i]; ++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 int
@ -258,7 +284,7 @@ BuildCategories(buffer *AnnotationClass, buffer *Category, int *MarkerIndex, boo
} }
void void
GenerateTopicColours(char *Topic) GenerateTopicColours(buffer *Colour, char *Topic)
{ {
for(int i = 0; i < ArrayCount(CategoryMedium); ++i) for(int i = 0; i < ArrayCount(CategoryMedium); ++i)
{ {
@ -301,8 +327,8 @@ GenerateTopicColours(char *Topic)
++TopicsPtr; ++TopicsPtr;
} }
fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: #%X; background: #%X; }\n", fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: %s; background: %s; }\n",
SanitisePunctuation(Topic), StringToColourHash(Topic), StringToColourHash(Topic)); SanitisePunctuation(Topic), StringToColourHash(Colour, Topic), StringToColourHash(Colour, Topic));
fclose(TopicsFile); fclose(TopicsFile);
free(TopicsBuffer); free(TopicsBuffer);
@ -347,6 +373,7 @@ main(int ArgC, char **Args)
buffer AnnotationData; buffer AnnotationData;
buffer Text; buffer Text;
buffer Category; buffer Category;
buffer Colour;
buffer Master; buffer Master;
@ -397,6 +424,7 @@ main(int ArgC, char **Args)
ClaimBuffer(MemoryArena, &ClaimedMemory, &Category, 256); ClaimBuffer(MemoryArena, &ClaimedMemory, &Category, 256);
ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationClass, 256); ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationClass, 256);
ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, 1024 * 4); ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, 1024 * 4);
ClaimBuffer(MemoryArena, &ClaimedMemory, &Colour, 32);
CopyStringToBuffer(&AnnotationHeader, CopyStringToBuffer(&AnnotationHeader,
" <div data-timestamp=\"%d\"", " <div data-timestamp=\"%d\"",
@ -409,8 +437,8 @@ TimecodeToSeconds(Anno->time));
{ {
CopyStringToBuffer(&AnnotationClass, " authored"); CopyStringToBuffer(&AnnotationClass, " authored");
CopyStringToBuffer(&Text, CopyStringToBuffer(&Text,
"<span class=\"author\" style=\"color: #%X;\">%s</span> ", "<span class=\"author\" style=\"color: %s;\">%s</span> ",
StringToColourHash(Anno->author), StringToColourHash(&Colour, Anno->author),
Anno->author); Anno->author);
} }
@ -428,9 +456,10 @@ Anno->author);
if(Anno->markers[MarkerIndex].type == HMML_MEMBER) if(Anno->markers[MarkerIndex].type == HMML_MEMBER)
{ {
CopyStringToBuffer(&Text, 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, Anno->markers[MarkerIndex].marker,
StringToColourHash(Anno->markers[MarkerIndex].marker), StringToColourHash(&Colour, Anno->markers[MarkerIndex].marker),
StringLength(Readable), InPtr); StringLength(Readable), InPtr);
InPtr += StringLength(Readable); InPtr += StringLength(Readable);
++MarkerIndex; ++MarkerIndex;
@ -438,16 +467,18 @@ StringLength(Readable), InPtr);
else if(Anno->markers[MarkerIndex].type == HMML_PROJECT) else if(Anno->markers[MarkerIndex].type == HMML_PROJECT)
{ {
CopyStringToBuffer(&Text, 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, Anno->markers[MarkerIndex].marker,
StringToColourHash(Anno->markers[MarkerIndex].marker), StringToColourHash(&Colour, Anno->markers[MarkerIndex].marker),
Readable); Readable);
InPtr += StringLength(Readable); InPtr += StringLength(Readable);
++MarkerIndex; ++MarkerIndex;
} }
else if(Anno->markers[MarkerIndex].type == HMML_CATEGORY) 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); BuildCategories(&AnnotationClass, &Category, &MarkerIndex, &HasCategory, Anno->markers[MarkerIndex].marker);
} }
} }
@ -466,7 +497,7 @@ Readable);
" <div class=\"mouse_catcher\"></div>\n" " <div class=\"mouse_catcher\"></div>\n"
" <div class=\"refs\">\n"); " <div class=\"refs\">\n");
CopyString(ReferencesArray[RefIdentifier - 1].ID, CurrentRef->editor); CopyString(ReferencesArray[RefIdentifier - 1].ID, CurrentRef->editor);
CopyString(ReferencesArray[RefIdentifier - 1].RefTitle, "Title"); CopyString(ReferencesArray[RefIdentifier - 1].RefTitle, "Title");
CopyString(ReferencesArray[RefIdentifier - 1].URL, "http://example.com/"); CopyString(ReferencesArray[RefIdentifier - 1].URL, "http://example.com/");
CopyString(ReferencesArray[RefIdentifier - 1].Source, "Source"); CopyString(ReferencesArray[RefIdentifier - 1].Source, "Source");
@ -578,7 +609,8 @@ Anno->time);
while(MarkerIndex < Anno->marker_count) 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); BuildCategories(&AnnotationClass, &Category, &MarkerIndex, &HasCategory, Anno->markers[MarkerIndex].marker);
} }
@ -630,6 +662,7 @@ Anno->time);
CopyBuffer(&Player, &Annotation); CopyBuffer(&Player, &Annotation);
ClaimedMemory -= Colour.Size;
ClaimedMemory -= Text.Size; ClaimedMemory -= Text.Size;
ClaimedMemory -= AnnotationHeader.Size; ClaimedMemory -= AnnotationHeader.Size;
ClaimedMemory -= Category.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); * Main Purple: #372F46 or rgba(55, 47, 70, 1);
* Highlight Green: #3A4A3F or rbga(58, 74, 63, 1); * Highlight Green: #3A4A3F or rbga(58, 74, 63, 1);
*/ */
.title.obbg { .title.obbg {
background-color: #FFFFFF; background-color: #EEE;
color: #000000; color: #000;
border-bottom: 1px solid #372F46; border-bottom: 1px solid #372F46;
} }
@ -23,7 +24,7 @@
} }
.title.obbg .refs_container .refs { .title.obbg .refs_container .refs {
background-color: #FFFFFF; background-color: #EEE;
border: 2px solid #372F46; border: 2px solid #372F46;
border-top: none; border-top: none;
} }
@ -56,34 +57,33 @@
/* Regular */ /* Regular */
.markers_container.obbg { .markers_container.obbg {
background-color: #FFFFFF; background-color: #EEE;
} }
.markers_container.obbg > .marker { .markers_container.obbg > .marker {
border-bottom: 1px solid #2A3172; border-bottom: 1px solid #888;
} }
.markers_container.obbg > .marker:hover > .content { .markers_container.obbg > .marker:hover > .content {
background-color: #FFF8E7; background-color: #DDD;
} }
.markers_container.obbg > .marker:hover > .faded .content { .markers_container.obbg > .marker:hover > .faded .content {
background-color: rgba(42, 49, 114, 0.7); background-color: #68557E;
color: #FFFFFF; color: #FFFFFF;
} }
.markers_container.obbg > .marker > .content { .markers_container.obbg > .marker > .content {
background-color: #FFFFFF;
color: #000000; color: #000000;
} }
.markers_container.obbg > .marker.current > .content { .markers_container.obbg > .marker.current > .content {
color: #2A3172; color: #102369;
} }
.markers_container.obbg > .marker > .progress .content { .markers_container.obbg > .marker > .progress .content {
background-color: #2A3172; background-color: #372C44;
color: #FFFFFF; color: #EEE;
} }
/* Blackboard */ /* Blackboard */

12
hmml_to_html/riscy.css
View File

@ -1,5 +1,5 @@
.title.riscy { .title.riscy {
background-color: #FFFFFF; background-color: #EEE;
color: #000000; color: #000000;
border-bottom: 1px solid rgba(246, 178, 26, 0.8); border-bottom: 1px solid rgba(246, 178, 26, 0.8);
} }
@ -18,7 +18,7 @@
} }
.title.riscy .refs_container .refs { .title.riscy .refs_container .refs {
background-color: #FFFFFF; background-color: #EEE;
border: 2px solid rgba(246, 178, 26, 0.8); border: 2px solid rgba(246, 178, 26, 0.8);
border-top: none; border-top: none;
} }
@ -30,7 +30,7 @@
.title.riscy .refs_container > .refs .ref.current { .title.riscy .refs_container > .refs .ref.current {
background-color: #2A3172; background-color: #2A3172;
color: #FFFFFF; color: #EEE;
} }
.title.riscy .refs_container > .refs .ref:hover { .title.riscy .refs_container > .refs .ref:hover {
@ -51,7 +51,7 @@
/* Regular */ /* Regular */
.markers_container.riscy { .markers_container.riscy {
background-color: #FFFFFF; background-color: #EEE;
} }
.markers_container.riscy > .marker { .markers_container.riscy > .marker {
@ -68,7 +68,7 @@
} }
.markers_container.riscy > .marker > .content { .markers_container.riscy > .marker > .content {
background-color: #FFFFFF; background-color: #EEE;
color: #000000; color: #000000;
} }
@ -100,7 +100,7 @@
} }
.markers_container.riscy > .marker.blackboard > .content { .markers_container.riscy > .marker.blackboard > .content {
background-color: #FFFFFF; background-color: #EEE;
background-size: 12px 12px; background-size: 12px 12px;
background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px), 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); 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 { .markers_container > .marker.authored .content .author {
font-style: normal; font-style: normal;
font-variant: normal;
font-weight: bold;
} }
.markers_container > .marker.authored { .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.demo { border-color: hsl(335, 32%, 26%); background: hsl(335, 32%, 26%); }
.marker .content .categories .category.mathematics { border-color: #5E0595; background: #5E0595; } .marker .content .categories .category.simulation { border-color: hsl(174, 92%, 26%); background: hsl(174, 92%, 26%); }
.marker .content .categories .category.simulation { border-color: #7DF3B5; background: #7DF3B5; } .marker .content .categories .category.threading { border-color: hsl(64, 8%, 26%); background: hsl(64, 8%, 26%); }
.marker .content .categories .category.animation { border-color: #62FC95; background: #62FC95; } .marker .content .categories .category.language { border-color: hsl(251, 40%, 26%); background: hsl(251, 40%, 26%); }
.marker .content .categories .category.sorting { border-color: #8AF8AE; background: #8AF8AE; } .marker .content .categories .category.physics { border-color: hsl(218, 68%, 26%); background: hsl(218, 68%, 26%); }
.marker .content .categories .category.parsing { border-color: #70A3D6; background: #70A3D6; } .marker .content .categories .category.profiling { border-color: hsl(269, 88%, 26%); background: hsl(269, 88%, 26%); }
.marker .content .categories .category.language { border-color: #4CCCCC; background: #4CCCCC; } .marker .content .categories .category.optimisation { border-color: hsl(69, 92%, 26%); background: hsl(69, 92%, 26%); }
.marker .content .categories .category.ai { border-color: #28F5C2; background: #28F5C2; } .marker .content .categories .category.input-handling { border-color: hsl(126, 94%, 26%); background: hsl(126, 94%, 26%); }
.marker .content .categories .category.demo { border-color: #547AE0; background: #547AE0; } .marker .content .categories .category.ui { border-color: hsl(285, 12%, 26%); background: hsl(285, 12%, 26%); }
.marker .content .categories .category.debug-visualisation { border-color: #6DC3FE; background: #6DC3FE; } .marker .content .categories .category.rendering { border-color: hsl(146, 40%, 26%); background: hsl(146, 40%, 26%); }
.marker .content .categories .category.physics { border-color: #869535; background: #869535; } .marker .content .categories .category.memory { border-color: hsl(126, 32%, 26%); background: hsl(126, 32%, 26%); }
.marker .content .categories .category.experience { border-color: #604188; background: #604188; } .marker .content .categories .category.experience { border-color: hsl(236, 76%, 26%); background: hsl(236, 76%, 26%); }
.marker .content .categories .category.trivia { border-color: #7C962E; background: #7C962E; } .marker .content .categories .category.trivia { border-color: hsl(25, 92%, 26%); background: hsl(25, 92%, 26%); }
.marker .content .categories .category.pathfinding { border-color: #5A4C54; background: #5A4C54; } .marker .content .categories .category.audio { border-color: hsl(98, 80%, 26%); background: hsl(98, 80%, 26%); }
.marker .content .categories .category.optimisation { border-color: #7E4B17; background: #7E4B17; } .marker .content .categories .category.sorting { border-color: hsl(250, 80%, 26%); background: hsl(250, 80%, 26%); }
.marker .content .categories .category.memory { border-color: #8DA740; background: #8DA740; } .marker .content .categories .category.animation { border-color: hsl(167, 48%, 26%); background: hsl(167, 48%, 26%); }
.marker .content .categories .category.maths { border-color: #72B020; background: #72B020; } .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%); }