hi,
i'm just wondering how one might add a background image to a control interface.
also, i'm wondering if it would be possible for said background image to move with your finger while dragging around the screen.
i'm trying to create something which displays a background image which is bigger than my ipad screen and lets me scroll around while outputting xy coordinates.
ta
There's a div named "selectedInterface" that holds all the widgets; you can set the background of this. Using jQuery, you could place the following code at the top of your interface (outside of the pages array) as a test:
$("#selectedInterface").css({
"background-image": "url('http://charlie-roberts.com/Control/images/iconWhiteBg.png')"
});To move it you would need to move the position of the image, you can see an example of doing this with CSS here:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px
And here's a link to general info on setting CSS background properties:
http://www.w3schools.com/cssref/default.asp#background
Hope this helps! - Charlie
You can also incorporate decoded images into your javascript:
I'm sorry to come across as dense, this is all pretty new to me, but I can't get this to work at all. I added your code to the dj.js interface right between the infoText section and the start of pages, but the background remains stock black. Specifically, I added:
$("#selectedInterface").css({
"background-image": "url('http://charlie-roberts.com/Control/images/iconWhiteBg.png')"
});and tried this, with the background image I'm testing with:
$("#selectedInterface").css({
"background-image": "url('http://dl.dropbox.com/u/41877267/CtrlBG.png')"
});And finally, I also tried this:
document.getElementById('selectedInterface').style.backgroundColor='#f00';
With the code above, the interface would just refresh to an all black screen without controls. If I then went back to the interfaces list and selected my version of dj again, it would load the previous working version...
A background color would be fine, but it's really a background image I'm looking to implement. The test image I used is scaled to 800x1280 for portrait mode on a Galaxy Tab 10.1.
Think I can get a friendly nudge in the right direction?
Thanks, my friend!
I'll try to take a look at this and see what's wrong. The code looks correct to me...
I really appreciate it, Charlie! Now that I've taught myself enough Pure Data to create the necessary patches for Traktor control, I was thinking it would be cool to build a DJ mixer interface that actually looks like a mixer. I own a Rane TTM-52 performance mixer from my vinyl days, so I want to Photoshop together a cool background image from that, and other found tech images. My own little franken-mixer. Then I'd build my Control code to overlay and line up with the background image. Probably been done, but I haven't found any published examples of it. Fun project, either way. Speaking of which, is there a good method for creating something akin to VU meters?
Since you requested code for the other issue, here's a slightly altered version of the Control template file that I'm working with to try and solve the background image problem:
loadedInterfaceName = "bgTest";
interfaceOrientation = "landscape";
$("#selectedInterface").css({
"background-image": "url('http://dl.dropbox.com/u/41877267/ctrlLayout.png')"
});
pages = [[
{
"name": "refresh",
"type": "Button",
"bounds": [.6, .8, .2, .1],
"startingValue": 0,
"isLocal": true,
"mode": "contact",
"ontouchstart": "interfaceManager.refreshInterface()",
"stroke": "#3dd182",
"label": "refresh",
},
{
"name": "tabButton",
"type": "Button",
"bounds": [.8, .8, .2, .1],
"mode": "toggle",
"stroke": "#3dd182",
"isLocal": true,
"ontouchstart": "if(this.value == this.max) { control.showToolbar(); } else { control.hideToolbar(); }",
"label": "menu",
},
]
];The image I'm linking to in the code is a grid image I tossed together to aid in button layout and ratio calculations.
Changes made:
-New interface name
-Swapped to landscape orientation
-moved the two buttons up from .9 to .8
-Changed button stroke color
-Added an "e" to the "refresh" label :)
All else the same and as basic as you can get... This interface loads just fine, sans the background image. Hope that helps. And if there's anyone out there who's had success with this, please let me know. Thanks!
John
Sorry for the bump, but this problem is killing me. Is it that I need to get Eclipse setup and recompile Control to get background images to work? I have a complex Traktor interface almost ready to pass along to the community, but I'd really like to include a background image, or theme images. I'm totally willing to accept that I'm missing something simple, but I just need a clue on what I'm doing wrong here. :/ Thanks!
Agggh... sorry. I'll look at it now.
The following worked for me in iOS:
loadedInterfaceName = "bgTest";
interfaceOrientation = "landscape";
function myInit() {
$("#selectedInterface").css({
"background-image": "url('http://dl.dropbox.com/u/41877267/ctrlLayout.png')",
"display": "block",
"height": Control.deviceHeight + "px",
});
}
pages = [[
{
"name": "refresh",
"type": "Button",
"bounds": [.6, .8, .2, .1],
"startingValue": 0,
"isLocal": true,
"mode": "contact",
"ontouchstart": "interfaceManager.refreshInterface()",
"stroke": "#3dd182",
"label": "refresh",
"oninit": "myInit()",
},
{
"name": "tabButton",
"type": "Button",
"bounds": [.8, .8, .2, .1],
"mode": "toggle",
"stroke": "#3dd182",
"isLocal": true,
"ontouchstart": "if(this.value == this.max) { control.showToolbar(); } else { control.hideToolbar(); }",
"label": "menu",
},
]
];For some reason selectedInterface was only filling half the screen, so i had to adjust the height accordingly. Other than that, it worked pretty much as I thought it would... let me know if this helps in Android, I'm guessing the height might be 0 or something for selectedInterface there.
Thanks very much for getting back to me, Charlie. Unfortunately, the code that works in iOS does not appear to be working in Android... I get all the proper widgets, but still have a completely black background. Not a hint of the bg image anywhere.
Apparently the div is named differently in the Android version. Try using #SelectedInterfacePage instead of #selectedInterface.
Sorry about this. Hopefully these inconsistencies will be removed as the new version gets developed. - Charlie
Hi Charlie - No go on my end. I've tried just the change you mentioned, as well as every other combination of display and height variables that I could think of. I'm wondering if we've stumbled on a deeper rooted issue with the Android version. I'll try this out on my iPhone, too, once I get it charged up, but there's definitely no love from my tablet as of now. Sorry that this has become such a headache. :/