Mercurial > dottes
changeset 319:cbe9c10b5a3e
Render tune title, subtitle and composer in Latex/HTML and not in the image.
This way the titles remains a constant size even if the image needs to be scaled.
And we have that text appearance under our control.
I can't find a way of switching off the tune title in abcm2ps, and have worked around
by setting the title format to Y0. Y is not a defined ABC header and is not found in
any Dottes tune.
author | Jim Hague <jim.hague@acm.org> |
---|---|
date | Tue, 16 Jul 2013 16:35:07 +0100 |
parents | 77372a0166fe |
children | c0262e58abf6 |
files | dottes.html.tune dottes.tex firstline.fmt makeBookeTunePages.sh makeWeb.sh singletune.fmt web/css/dottes.css |
diffstat | 7 files changed, 105 insertions(+), 31 deletions(-) [+] |
line wrap: on
line diff
--- a/dottes.html.tune Tue Jul 16 16:27:49 2013 +0100 +++ b/dottes.html.tune Tue Jul 16 16:35:07 2013 +0100 @@ -20,22 +20,35 @@ </a> <div class="grid_12 dottes-body"> - <h1>@TITLE@</h1> - <img class="dottes-png" src="@TUNE@.png" alt="@TITLE@ dots"> - <div class="dottes-change-@CHANGEVISIBILITY@"> - Change: <a class="dottes-change-link" - href="@CHANGETUNE@">@CHANGETITLE@</a> + <div class="dottes-tune-display"> + <div class="dottes-tune-header"> + <div class="dottes-tune-header-row"> + <div class="dottes-tune-header-left"></div> + <div class="dottes-tune-header-middle"> + <h1>@TITLE@</h1> + <h2>@SUBTITLE@</h2> + </div> + <div class="dottes-tune-header-right"> + <em>@COMPOSER@</em> + </div> + </div> + </div> + <img class="dottes-png" src="@TUNE@.png" alt="@TITLE@ dots"> + <div class="dottes-change-@CHANGEVISIBILITY@"> + Change: <a class="dottes-change-link" + href="@CHANGETUNE@">@CHANGETITLE@</a> + </div> + <ul class="tune-data-list"> + <li><a class="dottes-link-tune dottes-pdf" + href="@TUNE@.pdf">PDF</a></li> + <li><a class="dottes-link-tune dottes-midi" + href="../@MASTERBOOKE@/@TUNE@.mid">MIDI</a></li> + <li><a class="dottes-link-tune dottes-mp3" + href="../@MASTERBOOKE@/@TUNE@.mp3">MP3</a></li> + <li><a class="dottes-link-tune dottes-abc" + href="@TUNE@.abc">ABC</a></li> + </ul> </div> - <ul class="tune-data-list"> - <li><a class="dottes-link-tune dottes-pdf" - href="@TUNE@.pdf">PDF</a></li> - <li><a class="dottes-link-tune dottes-midi" - href="../@MASTERBOOKE@/@TUNE@.mid">MIDI</a></li> - <li><a class="dottes-link-tune dottes-mp3" - href="../@MASTERBOOKE@/@TUNE@.mp3">MP3</a></li> - <li><a class="dottes-link-tune dottes-abc" - href="@TUNE@.abc">ABC</a></li> - </ul> </div> </div>
--- a/dottes.tex Tue Jul 16 16:27:49 2013 +0100 +++ b/dottes.tex Tue Jul 16 16:35:07 2013 +0100 @@ -47,17 +47,23 @@ % Show the main tune graphic and optional change. % Args are change title (optional), tune title, tune graphic filename. -\newcommand{\showtune}[3][]{% +\newcommand{\showtune}[5]{% \vfill \begin{center} \phantomsection - \hypertarget{#2}{% - \includegraphics[width=\textwidth,height=0.85\textheight,keepaspectratio]{#3} + \begin{tabular*}{\textwidth}{@{} p{0.25\textwidth} @{\extracolsep{\fill}} c >{\raggedleft\arraybackslash}p{0.25\textwidth} @{}} + & \Large{#1} & \emph{#3} \\ + \ifemptyarg{#2}{}{% + & #2 & \\ + }% + \end{tabular*} + \hypertarget{#1}{% + \includegraphics[width=\textwidth,height=0.85\textheight,keepaspectratio]{#4} } - \addcontentsline{toc}{section}{#2} + \addcontentsline{toc}{section}{#1} \end{center} - \ifemptyarg{#1}{}{% - Change: \hyperlink{#1}{#1} + \ifemptyarg{#5}{}{% + Change: \hyperlink{#5}{#5} }% }
--- a/firstline.fmt Tue Jul 16 16:27:49 2013 +0100 +++ b/firstline.fmt Tue Jul 16 16:35:07 2013 +0100 @@ -2,7 +2,7 @@ continueall false measurenb false writefields SRBDZHN 0 -titleformat +titleformat Y0 titlespace 0 topspace 0 infoline false
--- a/makeBookeTunePages.sh Tue Jul 16 16:27:49 2013 +0100 +++ b/makeBookeTunePages.sh Tue Jul 16 16:35:07 2013 +0100 @@ -41,6 +41,8 @@ title=`$dir/abcfield.py --field T --latex $filename` fixtitle "$title" title=$retval + subtitle=`$dir/abcfield.py --index 2 --field T --latex $filename` + composer=`$dir/abcfield.py --field C --latex $filename` changefile=`$dir/abcfield.py --field N $filename | grep "Change:" | sed -e "s/Change: *//"` changetitle="" @@ -49,7 +51,7 @@ fixtitle "$changetitle" changetitle=$retval fi - echo -E "\showtune[$changetitle]{$title}{$graphicsdir/$name}" >> $tunesoutput + echo -E "\showtune{$title}{$subtitle}{$composer}{$graphicsdir/$name}{$changetitle}" >> $tunesoutput echo -E "\showfirstline{$title}{$graphicsdir/firstline-$name}" >> $indexoutput done
--- a/makeWeb.sh Tue Jul 16 16:27:49 2013 +0100 +++ b/makeWeb.sh Tue Jul 16 16:35:07 2013 +0100 @@ -65,6 +65,8 @@ title=`$dir/abcfield.py --field T --html $filename` fixtitle "$title" title=$retval + subtitle=`$dir/abcfield.py --index 2 --field T --latex $filename` + composer=`$dir/abcfield.py --field C --latex $filename` changefile=`$dir/abcfield.py --field N $filename | grep "Change:" | sed -e "s/Change: *//"` changetitle="" changevisibility="no" @@ -88,6 +90,8 @@ # If the title contains HTML character entities, escape # initial '&' in the title - it means things to sed. sed -e "s/@TITLE@/${title//&/\&}/" \ + -e "s/@SUBTITLE@/${subtitle}/" \ + -e "s/@COMPOSER@/${composer}/" \ -e "s/@MASTERBOOKE@/${masterbooke}/" \ -e "s/@CHANGETITLE@/${changetitle//&/\&}/" \ -e "s/@CHANGETUNE@/${changefile/.abc/.html}/" \
--- a/singletune.fmt Tue Jul 16 16:27:49 2013 +0100 +++ b/singletune.fmt Tue Jul 16 16:35:07 2013 +0100 @@ -6,7 +6,7 @@ rightmarin 0 topmargin 0 scale 0.9 -titleformat T0 C1 +titleformat Y0 titlespace 0 topspace 0 % I don't want any info fields in the graphics. To turn off the @@ -18,6 +18,6 @@ infoname Z infoname H infoname N -infoline true +infoline false writehistory true continueall false
--- a/web/css/dottes.css Tue Jul 16 16:27:49 2013 +0100 +++ b/web/css/dottes.css Tue Jul 16 16:35:07 2013 +0100 @@ -11,7 +11,6 @@ h1 { background: white; - font-weight: normal; text-align: center; font-size: 25px; font-weight: bold; @@ -121,6 +120,56 @@ width: 30%; } +div.dottes-tune-display +{ + margin: 10px; +} + +div.dottes-tune-header +{ + display: table; + width: 100%; +} + +div.dottes-tune-header-row +{ + display: table-row; +} + +div.dottes-tune-header-left +{ + display: table-cell; + width: 25%; +} + +div.dottes-tune-header-middle +{ + display: table-cell; +} + +div.dottes-tune-header-middle h1 +{ + font-size: 25px; + font-weight: bold; + text-align: center; + margin: 0px; +} + +div.dottes-tune-header-middle h2 +{ + font-size: 15px; + font-weight: normal; + text-align: center; + margin: 0px; +} + +div.dottes-tune-header-right +{ + display: table-cell; + text-align: right; + width: 25%; +} + a.dottes-tune-link { font-size: 20px; @@ -143,19 +192,21 @@ { display: block; width: 100%; /* Make image fill width */ - /* margin-left: auto; /* Centre image */ - /* margin-right: auto; */ + margin-top: 10px; + margin-bottom: 10px; } ul.tune-data-list { list-style-type: none; + margin: 0px; } ul.tune-data-list li { display: inline; - margin: 10px; + margin-left: 0; + margin-right: 20px; } div.dottes-tune-list @@ -188,8 +239,6 @@ div.dottes-change-yes { - display: block; - margin: 10px; } div.dottes-change-link