That Web UI is nice and easy! I’ll look at that, too. The Cantabile Notes have been very simple and if those could just displayed, I’d be quite happy!
1 Like
The Web UI seems to work very well and was very easy. All my Cantabile notes can now be anywhere. Is there a way to modify what is shown on the Web UI? I have no need for the play/pause/stop buttons or the File Name/TimeSignature/BPM tickers on top and bottom. I could utilize that space with more Notes.
1 Like
Currently the only way to customize what’s displayed in the web ui is to edit the HTML yourself.
https://www.cantabilesoftware.com/guides/networkDeveloperGuide
@brad, you’re right - Web UI looks like a winner for this!
(Still couldn’t resist a quick LivePrompter plug 
)
3 Likes
I agree. For my particular need, the Web UI looks like a better solution. Now I’ll start delving into the tweaking. Thanks guys!
1 Like
I’ve been thinking of editing the HTML for just show notes. Just took a look - doesn’t look like it will be difficult to remove the setlist and states elements.
1 Like
I’m looking at it, too (HTML looks like cuneiform at the moment!). That would be nice and simple to show the SHOW NOTES window only and leave out the transport, files names, hot buttons, etc. to utilize the entire screen for just notes.
1 Like
I’ll look at it tonight - I’m better at taking stuff out of HTML than putting in 
1 Like
For those playing with the html… if you’re making changes that you think might be useful to everyone try to make them in such a way that the current functionality doesn’t get broken. ie: Instead of modifying index.html directly, create a copy in the same folder and rename it to something useful such as “shownotes.html”. You can then access it via http://localhost:35007/shownotes
If you’ve come up with something you’d like included in future builds, submit a pull request to the themes repo and I’ll consider merging it in.
If “submitting pull requests to repos” is foreign speak to you and the changes are simply files to be added to the folder, email them to me and I’ll check it out.
Brad
2 Likes
No problem at all. Plug away!
1 Like
My “military grade” hardening 
of Win10 prevented connections to my recording desktop I wanted to use as the server. We use Webroot for one of the security layers. I think it was preventing connection even though I added exceptions in it.
I built a new Win10 machine today that works fine so tonight I’ll create shownotes.html
1 Like
Hi easteelreath,
I finally had time today to see what’s involved in making shownotes full screen. The following isn’t what I would qualify as a helpsheet. I could make one with screenshots and links to the tools I used. This is just a quick overview.
There is a file in the Cantabile program folder called root.webfolder. Inside it are the files that make up what one might call the website for the Cantabile Network Server (Cantabile webserver).
It’s actually an “archive” (better known as zip) file I believe created with 7zip.
What I did was:
- Use 7zip to extract the file root.webfolder to a folder which will be named Root.
- Move the root.webfolder file out of the Cantabile Program folder
- Rename the new “Root” folder (created by extracting root.webfolder file with 7zip) to root.webfolder
- Copy index.html file to shownotes.html
- Comment out in div id=“app”
<li><router-link to="/setlist">Set List</router-link></li> <li><router-link to="/states">States</router-link></li>
- Comment out the entire sections for the following template id =
- status-panel-template
- setlist-template
- states-template
- transportButtons-template
Note: I use NotePad ++, a free download, which lets you highlight sections and right click > Block Comment
- I then made a copy of styles.css and named it styles_shownotes.css
- I then edit shownotes.html and changed line 9 and 10 to this:
<!-- Styles --> <link href="/styles_shownotes.css?v=15" type="text/css" rel="stylesheet" />
- I then made edits to the shownotes.css (style sheets are used to control fonts, spacing, and other appearance related items on webpages) file so the footer is 5 pixels high and adjusted “margins” (padding, height etc) so the notes take up all but a tiny bit of the screen. If you look carefully you can see the flattened out left and right buttons in the footer. I put in screenshots of VB3 1.4 with my settings for “Us and Them” and YouTube keyboard shortcuts just for example.
Address in my web browser:
http://192.168.1.46:35007/shownotes.html#/notes
One last note - every time you save changes to the shownotes.html or styles_shownotes.css I hold Ctrl and tap F5 to force a refresh in the browser. Also you need to open the editor you use (again I used Notepad ++) as administrator (right click on the shortcut and chose run as administrator). That’s because the folders are under Program Files - windows is trying to protect changes to them by requiring you to do that.
1 Like
I know just enough HTML and CSS to cause this kind of trouble
1 Like
I had to copy Root.webfolder out of TopTen/Cantable folder because win10 is garbage…but that’s another, much longer, thread…
So I believe I’ve successfully done everything up to set 8. I’m omitting 8 because it’s looks like tweaking and I’m just trying to get this plane off the ground. All your steps were concise and able to follow.
Now I have an uncompressed folder named “WebFolder.Root” on C: with all the changes (Steps 1-7, above). I assume this has to be recompressed and copied back into the Cantabile folder. How would this be done with 7zip? I assume highlight the “WebFolder.Root”, Right Click and use 7zip in explorer menu to compress to “something”, then change the name to something, then copy back into cantabile folder. Please explain as I don’t want to get something wrong and get really confused.
It works without putting it back in the compressed folder. I noticed I had a “typo” in step 2 I just fixed. The folder needs to be named root.webfolder not webfolder.root.
If you have it named right it will work out of the “real” folder.
Good question about “recompiling” it. That was my next thing to figure out. When I examined the original root.webfolder I noticed only some files were compressed. Maybe someone who has built a theme can explain. I have installed git but not make which is new to me.
I think you can safely use it with the actual folder root.webfolder instead of the file root.webfolder
Thanks! It’s working. I’ll tweak the styles_shownotes.css a bit to get the header and footers as small as possible to showcase the notes.
After bumbling through css code, minimizing height and padding allowed the ShowNotes windows to take up the entire screen. Works well and thanks again.
I did recompress the root.webfolder (actual, uncompressed folder) with 7-zip which produced root.webfolder.zip, then deleted the .zip on end to recreate root.webfolder. After copying into Cantabile directory, nothing worked. Obviously, I missed a trick or two about recompressing. However, system works well with uncompressed folder and keeps ability to tweak css files realtime and updated webpage with ctrl-f5. Much easier to leave in uncompressed format.
One benefit that surprised me is the original Cantabile WebUI (with the transport keys, set list, states, etc) is still fully functional and addressable via same web address. One WebUI can be running in one tab the the other in another. Dual monitors would allow perpetual notes on one screen then setlist (and ability to change if touch screen) on the other.
1 Like
The original WebUI stuff works because Brad suggested copying the original index.html to shownotes.html. I added copying styles.css to styles_shownotes.css and having shownotes.html reference the latter. That way the orginal WebUI is intact and we can mess with our shownotes all we want and still be able to call the original. Glad you were able to edit the styles_shownotes on your own. I’m going to do a difference comparison of the two files and post the changes here that I made to mine
Just for anyone who wants to maximize the size of the note area. These are the two css edits that matter the most:
Blockquote
main {
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
color: white;
}
Blockquote
div.splitter div.left-panel {
overflow: auto;
height: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
flex: 0.5;
padding: 5px;
}