hmml_to_html.c: Category styling [#3]

Also squash some bugs and perform clean-up
This commit is contained in:
Matt Mascarenhas 2017-03-17 01:45:16 +00:00
parent e973b8376d
commit f7181c1877
3 changed files with 166 additions and 107 deletions

View File

@ -83,6 +83,20 @@ CopyStringToBuffer(char *Src, buffer *Dest)
}
}
int
StringsDiffer(char *A, char *B)
{
while(*A && *B)
{
if(*A != *B)
{
return *A - *B;
}
++A, ++B;
}
return *A - *B;
}
int
main(int ArgC, char **Args)
{
@ -139,9 +153,6 @@ main(int ArgC, char **Args)
" <body>\n"
" <div class=\"title\">\n"
" <span class=\"episode_name\">%s</span>\n", HMML.metadata.title);
Out.Ptr = Out.Location;
CopyBuffer(&Working, &Out);
int AnnotationIndex = 0;
@ -155,7 +166,6 @@ main(int ArgC, char **Args)
" <span>References &#9660;</span>\n"
" <div class=\"mouse_catcher\"></div>\n"
" <div class=\"refs\">\n");
CopyBuffer(&Working, &Out);
while(AnnotationIndex < HMML.annotation_count)
@ -169,7 +179,7 @@ main(int ArgC, char **Args)
" <div class=\"source\">%s</div>\n"
" <div class=\"ref_title\">%s</div>\n"
" </span>\n"
// NOTE(matt): Fill the div class="ref_indices" with <= 3 span
// TODO(matt): Fill the div class="ref_indices" with <= 3 span
// class="ref_index" and ensure to put these <=3 spans on the same line without
// a space between them
" <div class=\"ref_indices\">\n"
@ -183,39 +193,60 @@ HMML.annotations[AnnotationIndex].references[i].page ? HMML.annotations[Annotati
TimecodeToSeconds(HMML.annotations[AnnotationIndex].time),
ReferenceIndex,
HMML.annotations[AnnotationIndex].time);
CopyBuffer(&Working, &Out);
++ReferenceIndex;
}
++AnnotationIndex;
}
sprintf(Working.Location,
" </div>\n"
" </div>\n");
CopyBuffer(&Working, &Out);
}
++AnnotationIndex;
}
sprintf(Working.Location,
" </div>\n"
" </div>\n"
" <span class=\"annotator_container\">Annotator: <span class=\"annotator\">%s</span></span>\n"
" </div>\n"
" <div class=\"player_container\">\n"
" <div class=\"video_container\" data-videoId=\"%s\"></div>\n"
" <div class=\"markers_container\">\n", HMML.metadata.annotator, HMML.metadata.id);
CopyBuffer(&Working, &Out);
int DataRef = 1;
for(int AnnotationIndex = 0; AnnotationIndex < HMML.annotation_count; ++AnnotationIndex)
{
sprintf(Working.Location,
" <div class=\"marker");
CopyBuffer(&Working, &Out);
if(HMML.annotations[AnnotationIndex].marker_count)
{
for(int MarkerIndex = 0; MarkerIndex < HMML.annotations[AnnotationIndex].marker_count; ++MarkerIndex)
{
if(!StringsDiffer("blackboard", HMML.annotations[AnnotationIndex].markers[MarkerIndex].text) &&
HMML.annotations[AnnotationIndex].markers[MarkerIndex].type == HMML_CATEGORY)
{
sprintf(Working.Location, " blackboard");
CopyBuffer(&Working, &Out);
}
}
}
sprintf(Working.Location, "\" data-timestamp=\"%d\"", TimecodeToSeconds(HMML.annotations[AnnotationIndex].time));
CopyBuffer(&Working, &Out);
InPtr = HMML.annotations[AnnotationIndex].text;
ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, 256);
if(HMML.annotations[AnnotationIndex].reference_count) // || HMML.annotations[AnnotationIndex].is_quote)
{
sprintf(Working.Location,
" <div class=\"marker\" data-timestamp=\"%d\" data-ref=\"%d\">\n", TimecodeToSeconds(HMML.annotations[AnnotationIndex].time), AnnotationIndex);
sprintf(Working.Location, " data-ref=\"%d\"", AnnotationIndex);
CopyBuffer(&Working, &Out);
for(int RefLocalIndex = 0; RefLocalIndex < HMML.annotations[AnnotationIndex].reference_count; ++RefLocalIndex)
{
@ -262,17 +293,12 @@ HMML.annotations[AnnotationIndex].time);
}
CopyStringToBuffer(InPtr, &Text);
}
else
{
sprintf(Working.Location,
" <div class=\"marker\" data-timestamp=\"%d\">\n", TimecodeToSeconds(HMML.annotations[AnnotationIndex].time));
*Out.Ptr++ = '>';
*Out.Ptr++ = '\n';
CopyStringToBuffer(InPtr, &Text);
}
*Text.Ptr = '\0';
CopyBuffer(&Working, &Out);
sprintf(Working.Location,
" <div class=\"content\"><span class=\"timecode\">%s</span>%s</div>\n"
" <div class=\"progress faded\">\n"
@ -288,10 +314,9 @@ HMML.annotations[AnnotationIndex].time);
Text.Location,
HMML.annotations[AnnotationIndex].time,
Text.Location);
CopyBuffer(&Working, &Out);
ClaimedMemory -= Text.Size;
CopyBuffer(&Working, &Out);
}
sprintf(Working.Location,
@ -364,11 +389,8 @@ HMML.annotations[AnnotationIndex].time);
" </script>\n"
" </body>\n"
"</html>\n");
CopyBuffer(&Working, &Out);
hmml_free(&HMML);
FILE *OutFile;
//char *OutFilename;
//sprintf(OutFilename, "%s.html", Args[FileIndex]);
@ -381,6 +403,11 @@ HMML.annotations[AnnotationIndex].time);
fwrite(Out.Location, Out.Ptr - Out.Location, 1, OutFile);
fclose(OutFile);
}
else
{
fprintf(stderr, "%s:%d: %s\n", Args[FileIndex], HMML.error.line, HMML.error.message);
}
hmml_free(&HMML);
}
free(MemoryArena);
}

View File

@ -83,7 +83,7 @@
<div class="content"><span class="timecode">0:06</span>Recap and set the stage for the day</div>
</div>
</div>
<div class="marker" data-timestamp="51">
<div class="marker blackboard" data-timestamp="51">
<div class="content"><span class="timecode">0:51</span>Intuition on two's complement</div>
<div class="progress faded">
<div class="content"><span class="timecode">0:51</span>Intuition on two's complement</div>
@ -92,7 +92,7 @@
<div class="content"><span class="timecode">0:51</span>Intuition on two's complement</div>
</div>
</div>
<div class="marker" data-timestamp="250">
<div class="marker blackboard" data-timestamp="250">
<div class="content"><span class="timecode">4:10</span>We are counting with zeroes</div>
<div class="progress faded">
<div class="content"><span class="timecode">4:10</span>We are counting with zeroes</div>
@ -110,7 +110,7 @@
<div class="content"><span class="timecode">9:03</span>Revisit instructions.scala<sup>1</sup> and research register-transfer level<sup>2</sup></div>
</div>
</div>
<div class="marker" data-timestamp="955" data-ref="4">
<div class="marker blackboard" data-timestamp="955" data-ref="4">
<div class="content"><span class="timecode">15:55</span>Come to understand how to specify that rs1 represents an immediate or a register, thanks to the reply to the "Confusion Regarding Freedom E SDK inline asm" forum thread<sup>3</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">15:55</span>Come to understand how to specify that rs1 represents an immediate or a register, thanks to the reply to the "Confusion Regarding Freedom E SDK inline asm" forum thread<sup>3</sup></div>
@ -119,7 +119,7 @@
<div class="content"><span class="timecode">15:55</span>Come to understand how to specify that rs1 represents an immediate or a register, thanks to the reply to the "Confusion Regarding Freedom E SDK inline asm" forum thread<sup>3</sup></div>
</div>
</div>
<div class="marker" data-timestamp="1105">
<div class="marker blackboard" data-timestamp="1105">
<div class="content"><span class="timecode">18:25</span>Read clear_csr() to put csrrc into perspective with our new understanding of pseudo-instructions and the i vs r hints</div>
<div class="progress faded">
<div class="content"><span class="timecode">18:25</span>Read clear_csr() to put csrrc into perspective with our new understanding of pseudo-instructions and the i vs r hints</div>
@ -146,7 +146,7 @@
<div class="content"><span class="timecode">23:05</span>Walk through clear_csr() again</div>
</div>
</div>
<div class="marker" data-timestamp="1733" data-ref="8">
<div class="marker blackboard" data-timestamp="1733" data-ref="8">
<div class="content"><span class="timecode">28:53</span>GNU Assembly Syntax: Constraints and Syntax<sup>5</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">28:53</span>GNU Assembly Syntax: Constraints and Syntax<sup>5</sup></div>

View File

@ -40,6 +40,38 @@
color: black;
}
/* Blackboard */
.marker:hover.blackboard > .content {
background-color: #FFF8E7;
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);
}
.marker:hover.blackboard .faded .content {
background-color: rgba(42, 49, 114, 0.7);
background-size: 12px 12px;
background-image: linear-gradient(to right, rgba(0, 0, 0, .16) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
color: #FFFFFF;
}
.marker.blackboard > .content {
background-color: #FFFFFF;
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);
color: black;
}
.marker.blackboard.current > .content {
color: #2A3172;
}
.marker.blackboard .progress .content {
background-color: #2A3172;
background-size: 12px 12px;
background-image: linear-gradient(to right, rgba(255, 255, 255, .16) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
color: #FFFFFF;
}
/* MANDATORY */
.player_container {