Yep - you can still do that but this works too!
1 Like
Why nonsense ? Few arguments there 
@Greenman Well, don't you need a converter when using the base64 method? That's why I was a little bit unhappy with it...
@Mike1 Here's the alternative to what @Sub3OneDay said.
The base64 method for adding a picture to a button.
˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚˚
-
Download the following Image to data URI converter.
Image to data URI converter.zip (111.6 KB) -
Load the jpg/png/gif images into the converter, then select the image that you'd like to add to a O-S-C button. Note that the converter has a bug: it will make you think that the wrong image is selected (by displaying a black contour on the image located before the one you clicked). Just ignore that contour.
GIF (converter problem)
- Select all the text from "url" all the way to the closing parenthesis. Copy it and add it inside the two parantheses below. The whole line must be copied to the CSS box.
If you'd like to have more control over the image (over how it looks on a button, etc), here's a little bit of code you could use. "Host.on" is when the button is pressed. "Host" is when the button is released. Don't forget to paste the image code (from the html converter) inside the two parantheses (for each of the button states). The code should work on both push and toggle buttons.background-image: url();
:host.on {
background-color:default;
color:white;
text-transform:none;
background-image: url();
background-position:center center;
background-size:200%;
border-radius:0px 10px 10px 0px;
}
:host {
background-color:default;
color:white;
text-transform:none;
background-image: url();
background-position:center center;
background-size:94%;
border-radius:0px 10px 10px 0px;
}
You might need to do some adjusting, but this is it, in a nutshell.
1 Like
I tried it today but can’t get any image to appear. Does it matter if the file is a jpeg or png ?
What exactly did you try?
No. It doesn't matter. It also works with jpeg files.
I added a jpeg into the URI converter and added the data into css tab inside OSC. But no picture appears.
Sorry. I wasn't clear enough. You need to copy the data inside the two parantheses (from "data:image").
Cat (jpeg) / Squirrel (png)...
Got it working. Thank you. I’m sure it won’t be long until I’m back here with my next question. Thank you very much for you detailed explanation. Hopefully other newbies find this helpful as well
1 Like
Or if you work on a Mac, I can recommend this converter:
"Image 2 Html"
1 Like
Back with another question. I added toggle buttons and created PLE commands to open ex flute folder and another PLE to close Flute folder.
I would like the icon to be brighter when activated and when flute folder is hidden to be grayed out a little. Can’t seem to find a way to have the folder close.
If you're looking for something like the behavior of the button in the GIF below, then use the following line inside the :host css code block:
opacity: 50%;
GIF
squirrel.json (150.6 KB)
You will also need to specify the opacity of the image in the host.on section. If not, the image will stay at 50% opacity, regardless of the button state (on/off).
Is this a question about Cubase or O-S-C?
1 Like
So I have 2 separate commands setup in Cubase and they work when using key commands. But I’m not sure how to assign 2 separate key commands to 1 button? Is that even possible?
Please, before you reply, give my post—or other user's posts—a like (if you found the info helpful). Now, regarding the new question you're asking, the answer is: yes, it's possible, definitely.
Depending on what you want to do exactly in Cubase, you can use either a push button or a toggle button. Other button modes are mentioned in the following screenshot.
Anyway, to fold/unfold the content of a folder in Cubase, please follow the steps below:
-
Create a button widget (by default, the button mode is set to toggle; if it's not set this way, go to inspector > button > mode and set the button to toggle).
-
Go to the scripting property of the button (in the inspector) and enter the following code:
// when the button is pressed (on) - first Cubase command
if (value === 1) {
send("midi:port", "/note", 1, 1, 127) // replace "port" and "1, 1" accordingly
}
// when the button is depressed (off) - second Cubase command
if (value === 0) {
send("midi:port", "/note", 1, 1, 127) // replace "port" and "1, 1" accordingly
}
The first "1" is the MIDI channel (1-16).
The second "1" is the note (0-127)
127 is the velocity, but it doesn't matter if it's 127 or 1 (as long as it's not 0).
You need to make sure the MIDI address (MIDI note, in this case) hasn't been used before (in another button). Otherwise, you might end up with a button that executes multiple commands when pressed. That's why I suggested to keep track of the MIDI messages you use when creating buttons/faders/etc in O-S-C.
- Read the "Long post" in the current thread to learn how to set the things up in Cubase. This is the post:
Newbie question - #14 by theodor_the_1st
In a nutshell, you need to use two MIDI messages (two notes). The first MIDI message (the one you put in the firstsend()function in O-S-C) needs to be linked to the first Cubase command in Generic Remote or MIDI Remote. The second MIDI message needs to be linked to the second Cubase command.
That's it!
1 Like
Thank you very much for the detailed reply.
1 Like
Anytime! ...
Thank you for your patience. I tried it but I must be doing something wrong.
Here is a screenshot of my screen. In the generic remote it’s only sending midi channel 1:1:127
Well, this is because I forgot to mention that the script should go inside the onValue box. Sorry.
If your MIDI port is called "OSC", then the script should look like this:
// first Cubase command
if (value === 1) {
send("midi:OSC", "/note", 1, 1, 127)
}
// second Cubase command
if (value === 0) {
send("midi:OSC", "/note", 1, 2, 127)
}
1 Like
That’s awesome! Thanks so much. I would have never figured this out on my own
1 Like
I doubt it, but it's nice of you to say this. Good luck!
1 Like
