print with layout mode and staveprofile #468

sugizo · 2020-12-18T21:49:33Z

sugizo
Dec 18, 2020

Description

<script>
var element = document.getElementById('notation');
var api = new alphaTab.AlphaTabApi(element);
document.getElementById ("printSVG").addEventListener ("click", printSVG, false);
function printSVG() {
    api.print();
}
</script>

with staveprofile = 2 (score)

api.print() only show 'page' layout mode
even when set into 'horizontal' layout mode it always show 'page' layout mode

tested on
http://sugizo.pythonanywhere.com/music/notation/form_score_in_notation

with choosen staveprofile

api.print() only show 'page' layout mode
even when set into 'horizontal' layout mode it always show 'page' layout mode
and
api.print() only show 'tab' staveprofile
even when set into another staveprofile

tested on
http://sugizo.pythonanywhere.com/music/notation/form_tablature_in_notation

Possible Solutions

<script>
document.getElementById ("printSVG").addEventListener ("click", printSVG, false);
var svg_class_name = document.getElementsByClassName("at-surface");
function printSVG() {
    let popupWindow;
    for (var i = 0; i < svg_class_name.length; i++) {
        var content = svg_class_name[i].innerHTML;
    }
    popupWindow = window.open('', '_blank', 'width=600,height=600,menubar=no,status=no,titlebar=no');
    popupWindow.document.open();
    popupWindow.document.write('<html><body onload="window.print()"><script src = "[[=URL('static', 'js/alphaTab.min.js') ]]" type="text/javascript"><\/script>' + content + '</body></html>');
    popupWindow.document.close();
}
</script>

result

clef, time signature, dynamics, notation, etc appears square (lack of css class .at)
print result only show 'page' layout mode and 'tab' staveprofile

expected result

clef, time signature, dynamics, notation, etc appears as is it
print result adaptable with layout mode and staveprofile settings

Question

is it possible to print with adaptable layout mode and staveprofile settings ?

thanks

Answered by Danielku15

Dec 19, 2020

Unfortunately this is not yet possible. But definitly a valid point. The printing should respect the custom settings that the main rendering area also has. Should be fairly easy to fix, the print method should just clone the current settings and adapt what is needed for printing on it.

Added #469 for version 1.2

View full answer

Danielku15 · 2020-12-19T13:38:00Z

Danielku15
Dec 19, 2020
Maintainer

Unfortunately this is not yet possible. But definitly a valid point. The printing should respect the custom settings that the main rendering area also has. Should be fairly easy to fix, the print method should just clone the current settings and adapt what is needed for printing on it.

Added #469 for version 1.2

3 replies

Danielku15 Dec 31, 2020
Maintainer

#469 closed and available in 1.2.0-alpha.79
https://www.alphatab.net/docs/reference/api/print/

sugizo Jan 2, 2021
Author

want to test it, but not sure how to test 1.2.0-alpha.79
check on
https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/alphaTab.min.js
still v1.1.0 (, build 3)

thanks

Danielku15 Jan 2, 2021
Maintainer

JsDelivr is a CDN over NPM. All versions are available if you specify them. @latest points to the released version

https://www.jsdelivr.com/package/npm/@coderline/alphatab
https://www.npmjs.com/package/@coderline/alphatab

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

print with layout mode and staveprofile #468

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

print with layout mode and staveprofile #468

sugizo Dec 18, 2020

Description

with staveprofile = 2 (score)

with choosen staveprofile

Possible Solutions

Question

Replies: 1 comment · 3 replies

Danielku15 Dec 19, 2020 Maintainer

Danielku15 Dec 31, 2020 Maintainer

sugizo Jan 2, 2021 Author

Danielku15 Jan 2, 2021 Maintainer

sugizo
Dec 18, 2020

Replies: 1 comment 3 replies

Danielku15
Dec 19, 2020
Maintainer

Danielku15 Dec 31, 2020
Maintainer

sugizo Jan 2, 2021
Author

Danielku15 Jan 2, 2021
Maintainer