<commit_before>{#
    This template inherits from base.twig. See twig documentation: http://twig.sensiolabs.org/doc/templates.html
 #}

{% extends "base.twig" %}

{% block title %}Incipit Search{% endblock %}
{% block head %}
	{{ parent() }}
	<link rel="stylesheet" href="/public/piano/piano_style.css">
	<script src="/public/js/verovio-toolkit.js"></script>
	<script src="/public/piano/piano.js"></script>

{% endblock %}


{% block pageContent %}

	<script type="text/javascript">

		$(document).ready(function () {
			//create piano with 1 octave, starting at C4 (lowest key)
			//shows labels and octave shift buttons
			var keyboardHTML = htmlForKeyboardWithOctaves(1, octaves.C4, true, false, false, false)
			//render the keyboard in the div
			$("#keyboardContainer").html(keyboardHTML)
			//when keys are pressed updatePreview() is called
			bindKeysToFunction(updatePreviewWithNote)
			//set the default clef to G4
			setSelectedClef(clefs.G4)
			$("#backspaceButton").click(deleteLast)

		})

		//this stores all keyboard input
		var plaineEasieCodes = []
		var selectedClef = clefs.G4

		//this is called whenever a piano key is pressed
		function updatePreviewWithNote(sender, paeNote) {
			console.log("key pressed is " + paeNote)
			plaineEasieCodes.push(paeNote)
			updateNotesSVG()
		}

		//delete last input
		function deleteLast() {
			plaineEasieCodes.pop()
			updateNotesSVG()
		}

		function updateNotesSVG() {
			$('#search').val(plaineEasieCodes.join(""))
			//render the notes to an SVG using the Verovio tookit
			//width of the svg is 800px and note scaling 50%
			var notesSVG = svgNotesForPlaineEasieCode(plaineEasieCodes.join(""), selectedClef, 800, 50)
			//insert thes SVG code in our div
			var svgContainerDiv = $('#svgNotesContainer')
			svgContainerDiv.html(notesSVG)
			$('#svgNotesContainer > svg').incipitScroll()
			svgContainerDiv.scrollLeft($('#svgNotesContainer > svg').width())
		}


	</script>

	<div class="wrapper style1">
		<section class="container 75%">
			<div class="box">
				<h2>Geben Sie über die virtuelle Klaviatur eine kurze Melodie ein, um nach Werken zu suchen.</h2>
				<form action="{{ path_for('results') }}" method="GET">
					<div class="row uniform">
						<!-- TODO: checkboxes are not displayed in view (see styles from template); for the beginning: all should be checked -->
						<div class="7u 12u(normal)">
						<input type="checkbox" name="repository[]" value="Gluck-Gesamtausgabe" checked>
						<input type="checkbox" name="repository[]" value="RISM">
						</div>
					</div>
					<div class="row uniform">
						<div class="7u 12u(normal)">
							<input name="incipit" type="text" id="search" placeholder="Plaine & Easie Code" required><commit_msg>added checkbox-labels<commit_after>{#
    This template inherits from base.twig. See twig documentation: http://twig.sensiolabs.org/doc/templates.html
 #}

{% extends "base.twig" %}

{% block title %}Incipit Search{% endblock %}
{% block head %}
	{{ parent() }}
	<link rel="stylesheet" href="/public/piano/piano_style.css">
	<script src="/public/js/verovio-toolkit.js"></script>
	<script src="/public/piano/piano.js"></script>

{% endblock %}


{% block pageContent %}

	<script type="text/javascript">

		$(document).ready(function () {
			//create piano with 1 octave, starting at C4 (lowest key)
			//shows labels and octave shift buttons
			var keyboardHTML = htmlForKeyboardWithOctaves(1, octaves.C4, true, false, false, false)
			//render the keyboard in the div
			$("#keyboardContainer").html(keyboardHTML)
			//when keys are pressed updatePreview() is called
			bindKeysToFunction(updatePreviewWithNote)
			//set the default clef to G4
			setSelectedClef(clefs.G4)
			$("#backspaceButton").click(deleteLast)

		})

		//this stores all keyboard input
		var plaineEasieCodes = []
		var selectedClef = clefs.G4

		//this is called whenever a piano key is pressed
		function updatePreviewWithNote(sender, paeNote) {
			console.log("key pressed is " + paeNote)
			plaineEasieCodes.push(paeNote)
			updateNotesSVG()
		}

		//delete last input
		function deleteLast() {
			plaineEasieCodes.pop()
			updateNotesSVG()
		}

		function updateNotesSVG() {
			$('#search').val(plaineEasieCodes.join(""))
			//render the notes to an SVG using the Verovio tookit
			//width of the svg is 800px and note scaling 50%
			var notesSVG = svgNotesForPlaineEasieCode(plaineEasieCodes.join(""), selectedClef, 800, 50)
			//insert thes SVG code in our div
			var svgContainerDiv = $('#svgNotesContainer')
			svgContainerDiv.html(notesSVG)
			$('#svgNotesContainer > svg').incipitScroll()
			svgContainerDiv.scrollLeft($('#svgNotesContainer > svg').width())
		}


	</script>

	<div class="wrapper style1">
		<section class="container 75%">
			<div class="box">
				<h2>Geben Sie über die virtuelle Klaviatur eine kurze Melodie ein, um nach Einträgen zu suchen.</h2>
				<form action="{{ path_for('results') }}" method="GET">
					<div class="row uniform">
						<div class="7u 12u(normal)">
						<input type="checkbox" name="gga" value="Gluck-Gesamtausgabe" id="gga" checked>
							<label for="gga" id="gga">Gluck-Gesamtausgabe</label>
						<input type="checkbox" name="rism" value="RISM" id="rism" checked>
							<label for="rism" id="rism">RISM</label>
						</div>
					</div>
					<div class="row uniform">
						<div class="7u 12u(normal)">
							<input name="incipit" type="text" id="search" placeholder="Plaine & Easie Code" required>
{'fraction_non_alphanumeric': 0.14256917720359172, 'fraction_numerical': 0.010262048744731538, 'mean_word_length': 4.049028677150786, 'pattern_counts': {'":': 0, '<': 52, '<?xml version=': 0, '>': 56, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6847098', 'n_tokens_mistral': 2113, 'n_tokens_neox': 1783, 'n_words': 463}