Author Topic: Side project: Panels (Read 45760 times)

Gary · « **on:** December 10, 2016, 06:20:05 PM »

Hi, all. Just wanted to give you a heads up on what I've been doing for fun as a side project:

https://www.youtube.com/watch?v=7I2Rel3lYuw

I'm going to call the plugin, 'Panels' and it's going to allow you to interact with VoiceAttack through a browser (or other http-capable software if you choose). The idea is to provide a way for VoiceAttack users to be able to make and share their VERY OWN, 'panels' that can be presented on tablets, phones, touch screens (laptops/monitors) or other touch-enabled devices. There is no other software to install, as there's a browser built in to just about everything

In the video, you'll notice there are three different, 'panels', each with varying levels of complexity (two iPads and a Xoom... thanks for letting me borrow those, guys!). With the plugin, you'll be able to execute commands, as well as get and set variables through provided javascript functions. The level of complexity and what you control is entirely up to YOU.

Most of the development is done... just need to tidy things up and add just a couple more features then I'll be ready to hand it over to all of you. Do you think you'll use this?

Andydigital · « **Reply #1 on:** December 11, 2016, 01:47:20 AM »

Noice!! will get much use from me most likely.

Pfeil · « **Reply #2 on:** December 11, 2016, 03:58:55 AM »

Depending on how easy the layouts are to make functional, I could see this getting used for flight simulators, Elite, and just about any application that could use some direct inputs.

I do wonder, while inputs have been demonstrated, is there built-in method to have VoiceAttack refresh the page(or parts of it, individual layers for example) when used to display data?

I'm already glaring at an old tablet collecting dust that may get a new lease on life when this is released

Gary · « **Reply #3 on:** December 11, 2016, 02:13:40 PM »

Quote

Depending on how easy the layouts are to make functional, I could see this getting used for flight simulators, Elite, and just about any application that could use some direct inputs.

It's all HTML and Javascript. Just point your browser at the machine that VA is on and you should be set. I'm hoping this will be useful for people to create ship interiors as well as help with applications with frequently used buttons that could use some macro-ness. All you streamer guys could have some macros assigned to buttons without having to say the commands or remember hotkeys... stuff like that.

Quote

I do wonder, while inputs have been demonstrated, is there built-in method to have VoiceAttack refresh the page(or parts of it, individual layers for example) when used to display data?

The page itself can loop asynchronously and check VA variables if you need it to. You can refresh, redirect or change the state of your controls based on those values. What I didn't demonstrate was that if you refresh the, 'panel' with the audio slider, the audio level is checked first so that the slider is displayed correctly. Also, the state of the switches check on page load so that they display based on VA's variable settings. I'm hoping this is going to bring a level of fun for everybody

Malic · « **Reply #4 on:** December 11, 2016, 04:43:59 PM »

Very very cool. I have a program for my car ECU called Tuner Studio that interfaces with Megasquirt, and it has a thing to create custom dashboards. For some reason this reminds me of that, but interactable via touchscreen.

KuruptU4Fun · « **Reply #5 on:** December 11, 2016, 06:46:02 PM »

I'll be playing around with this and I'm sure a few people in the SimPit thread over in Star Citizen will take a gander at this as well!

ralf44 · « **Reply #6 on:** December 15, 2016, 07:52:36 PM »

That's amazing, thank you! This other new feature looks good too

https://www.youtube.com/watch?v=nkcKaNqfykg

Gary · « **Reply #7 on:** December 15, 2016, 10:49:07 PM »

Almost done with putting it all together. Thinking this weekend o_O

Grayson · « **Reply #8 on:** December 20, 2016, 02:07:08 PM »

Am I correct in thinking that Panels will be platform independent because it's browser based? Meaning it would work on a tablet, a smart phone, and/or another computer?

Some similar solutions are either Android/iOS only or Windows only.

I'm hoping that this will work regardless of the hardware so long as that operating system is capable of running the required programming languages within the browser.

Pfeil · « **Reply #9 on:** December 20, 2016, 02:22:48 PM »

Quote from: Grayson on December 20, 2016, 02:07:08 PM

Am I correct in thinking that Panels will be platform independent because it's browser based?

Quote from: Gary on December 10, 2016, 06:20:05 PM

can be presented on tablets, phones, touch screens (laptops/monitors) or other touch-enabled devices. There is no other software to install, as there's a browser built in to just about everything

Yes. From the way it's presented, anything that can render HTML and process javascript will run this.

Gary · « **Reply #10 on:** December 20, 2016, 08:05:52 PM »

Well, I just dropped the Panels beta: http://voiceattack.com/smf/index.php?topic=718.0

The idea is that if folks are going to share panels, they can just zip up their panel folder so it can be simply copied into the Panels plugin folder.

Hope you enjoy and find it useful!

10tacle · « **Reply #11 on:** January 02, 2017, 10:12:15 AM »

Hi Gary,

that is great. I just tested the demo and it works perfectly.
The last time I had a deeper look into javascript is > 15 years ago, and I did not figure out how to have let's say more than two different options for the Landing Gear scenario in your demo. Means I am setting a specific variable with VoiceAttack which in turn should change the Landing Gear icon (let's say I would have three different colors: green, yellow and red). Dependent the variables set by the respective VoiceAttack command (1, 2, or 3) I'd like to turn the Landing Gear icon green in case of 1, yellow in case of 2 and red in case of 3 (it is not for Elite, but for the sake of the example I'll stay with the Landing Gear example - I have the image with the yellow light ready).

I understand how to change the images while we have either a 0 or 1 situation, but I don't seem to get to an easy approach for more options. Would greatly appreciate a hint on hat one.

Thanks you and best regards,
10tacle

10tacle · « **Reply #12 on:** January 02, 2017, 10:54:53 AM »

Hi,

here's what is working currently (but not elegant really) as I did not seem to figure out how to receive the active class, so I remove the ones I do not want:

Code: [Select]

				if (Panels.getInt('status') == 1)  
				{
					$('#StatusDisplay').removeClass('lighttwo');
					$('#StatusDisplay').removeClass('lightthree');
					$('#StatusDisplay').addClass('lightone');
				}

				if (Panels.getInt('status') == 2)  
				{
					$('#StatusDisplay').removeClass('lightone');
					$('#StatusDisplay').removeClass('lightthree');
					$('#StatusDisplay').addClass('lighttwo');
				}

				if (Panels.getInt('status') == 3)  
				{
					$('#StatusDisplay').removeClass('lighttwo');
					$('#StatusDisplay').removeClass('lightone');
					$('#StatusDisplay').addClass('lightthree');
				}

Gary · « **Reply #13 on:** January 03, 2017, 05:47:12 PM »

Cool! Good work on that

Something I would try though... for speed (since calling getInt() three times is making three separate requests for the same value) :

int i = Panels.getInt('status');
if (i == 1)
{
$('#StatusDisplay').removeClass('lighttwo');
$('#StatusDisplay').removeClass('lightthree');
$('#StatusDisplay').addClass('lightone');
}
if (i == 2)
...
}
if (i == 3)
...
}

OR (what I would try out):

Rename your classes to 'light1', 'light2' and 'light3' and then do this:

$('#StatusDisplay').removeClass('light1 light2 light3').addClass('light' + Panels.getInt('status'));

this *should* remove all the light classes at once (separated by spaces) and then just add one based on the single call to status. With JQuery, you can chain functions together like that (handy

.

10tacle · « **Reply #14 on:** January 04, 2017, 10:52:16 AM »

Hi Gary,

thanks a ton for looking into this and providing an answer so fast - the "one line of code approach" works great.
This is even better as I am having another display with five different values which have to be chosen - also just a single line. Great!

Best,
10tacle

10tacle · « **Reply #15 on:** January 06, 2017, 04:14:24 PM »

Hi Gary,

I'm still working at my panel. However, I seem to lack an easy function. What I want to achieve is putting an image of button into a table row. In case this button is pressed, I want to execute a specific command in VA (I also have an animated gif of pushing this button but that as a side note).

I succeded by putting a single 'Panels.execCommand' into the EventListener section. However it seems that this is designed for a kind of on/off scenario. I do not need to "change" classes in the css for that single button - nor do I need to have an on/off situation. What I would like to achieve is having a single button, which triggers a VA command. Maybe I simply miss where to put the 'Panels.execCommand'. It's after midnight here and maybe I'm simply too tired as well...

Thanks and best regards,
10tacle

Gary · « **Reply #16 on:** January 07, 2017, 05:27:25 PM »

If you just want to simply execute a a command by touching an image, you can just do the following in your document ready event:

$('#myImageId')[0].addEventListener('touchstart', function (e) { Panels.execCommand('my command'); }, false);

...and then somewhere in your table have an image:
<img id='myImageId' src='whatever' alt='whatever'>

Note that this is in the touch start event. The reason being is that it will work when your finger hits the screen and doesn't require you to press and release. I can't remember if this will work with an img... you can always use a DIV and make the background the image:

<div id='myImageId' style="background-image:url('whatever');width=100px;height=100px;"></div>

If you want to press and release, just do something like this:

<img src='whatever' onclick="Panels.execCommand('my command')" alt='whatever'>

Not exactly sure if either of those work as I'm not able to test them... but I think they're at least somewhat close to what you are needing to do.

Hope that helps!

10tacle · « **Reply #17 on:** January 09, 2017, 12:53:05 PM »

Hi Gary,

thanks, that helped. Got it done according to your proposal! Much appreciated!

Best,
10tacle

sutex · « **Reply #18 on:** January 29, 2017, 04:46:49 PM »

Anyone , uploading any Elite dangerous panels ?

Corvack · « **Reply #19 on:** April 26, 2017, 04:05:35 AM »

I'm working on a page right now!
it's far from done, but i hope to expend it in the next couple of weeks.

Attachment: Dashboard for panels in space games

sutex · « **Reply #20 on:** May 24, 2017, 04:35:43 PM »

Quote from: Corvack on April 26, 2017, 04:05:35 AM

I'm working on a page right now!
it's far from done, but i hope to expend it in the next couple of weeks.

Attachment: Dashboard for panels in space games

CNCfan · « **Reply #21 on:** February 17, 2018, 10:27:18 PM »

Hi Trying to play with the Panels APP. When I start it I get the following:

Unable to start Panels service: The type initializer for 'NHttp.HttpServer' threw an exception.

Any suggestions would be appreciated.

Tinman_au · « **Reply #22 on:** September 05, 2019, 08:52:22 AM »

Man, it's amazing what you've done Gary

I can see this being really helpful, especially if you look at disability extentions and such

HCS VoicePacks · « **Reply #23 on:** October 21, 2020, 06:15:50 AM »

Panels. Needed. Want.

Pfeil · « **Reply #24 on:** October 21, 2020, 06:17:19 AM »

As noted a few posts in, a beta was released.

Author Topic: Side project: Panels (Read 45760 times)

Andydigital

KuruptU4Fun

Grayson

10tacle

10tacle

10tacle

10tacle

10tacle

Corvack