Assets, sizes & formats

davidonthemoon,

It looks like it's been a few months since you asked this question (also, I'm obviously not the Panels App creator). But, if you or anyone else is still looking for an answer, I believe that I've learned enough about Panels to be useful here. 

My first recommendation would be to NOT use InDesign for any type of UI design. Out of the Adobe Creative Suite, it is the most difficult app to get individual assets out of later as it was designed for creating print collateral. Getting from design to individual graphic assets would be less painful with something like Illustrator or PhotoShop. My current favorite is Sketch (which isn't an Adobe product), because it was specifically designed for creating user interfaces. That being said, I have used InDesign for this purpose, in the past. It's not impossible, just less...fun. It's great for layout out documents.

The Panel views are responsive web views. And that means that the individual buttons will stretch/shrink either horizontally or vertically as needed. Because of that, a given button doesn't have a fixed pixel size. So if you use a background image on a button, make sure it works if it gets stretched one way or the other. The Elite Dangerous panels use CSS to create the orange, glowing borders on the buttons. I haven't tried using an SVG as a background image (I should do that). If they are supported, that gives you a non-rasterized, vector option that won't result in stretched pixels as it adapts to different device form factors.

One thing you can do (although it's a bit of a kludge) is:
- Lay out your panels/buttons using the creator tool.
- On whatever device you plan on using, take screen shots of the views. 
- Import the screenshots at 100% into whatever app you plan on creating your layouts in. 
- Draw boxes over the buttons and see what the width/height ended up being for your target device.

This is a somewhat low-tech measuring technique that I've used when I'm given an image to deal with instead of a source file. As long as you aren't planning to distribute your panel views to the masses, this would get you reasonably close dimensions for your purposes. 

I actually built my first panel using the Panel Creator tool. From there, I unzipped the generated package and began editing and tweaking code. It gave me a solid starting point without tackling the full learning curve all at once. And it is a lot faster to refresh a web browser than repackage, import, fire up the app, etc. 

Hope this helps!