For a while, I've heard user complaints aired about the size of the panel being an issue when resource pages or popups are being designed. As the PEP editors don't allow the concept of a popup, I've been contemplating a standardized design pattern that could be used by all to make management of popups easier.

And, as it would be a recognized and standardized design pattern, would hopefully allow someone modifying a configuration to easily recognize the practice that was followed which will hopefully make looking at others configurations a bit easier..

With the advent of dynamic widgets, many of the ideas i've toyed with for a while have now become possible. What I'd like to do is to lay out some of the basic concepts here and ask other developers as well as graphic designers to chime in with some of their ideas as to what the XML Descriptor (may not actually be XML when final design is achieved) should look like.

Before I dive in head-first, let me take a moment to describe the overall philosophy of what I believe to be involved.

1. A WidgetSet class - Already developed (by me) but needs to be made more lightweight.

The WidgetSet is used for managing a set of widgets. Widgets can be moved as a set and made visible as a set. The WidgetSet, in short, can "proxy" as a single widget for Movement and Visibility control.

2. Hidden Popup Page - A page in the configuration where popup information (Set of Widgets and Popup Descriptor Widget) is contained.

3. Sets of Widgets (a popup) are assembled (with Prontoscript names) on a hidden page (#2) and optionally grouped together to be moved as a set, with ease, during editing. Images, Colors, Font Sizes, Text, could be also be assigned statically here. Basically, this set of widgets would be "cloned" for use on a regular UI page.

4. Popup Descriptor Widget - A panel is placed on hidden popup page with well-defined ProntoScript name - ie something like "POPUP_DESCRIPTOR".

The label of this panel would contain markup (XML most likely) that would provide information to call out the named widgets included in popup as designed in #3 as well as information as to what widget should do. For example, a button on a popup could issue "schedule/executeActions" on some other widget or could result in dismissal of the popup. Additional information such as starting location of the popup, font colors, sizes, and text for labels could could also be contained here. The descriptor could also contain inactivity timers to automatically dismiss popup after predetermined time. And yes, Barry, I know you have a MessageBox function so I'd like your input either publicly or privately as I'd want to include that type of logic here.

5. A Popup class - This is a javascript class that creates a popup from the information contained in the Popup Descriptor widget (#4). It would basically build a WidgetSet (#1) with dynamically created widgets that are "clones" of widgets called out in the Popup Descriptor.

So, this is where you guys come in. I'd like to open up the design a bit andl also make this a community effort. I will also make Philips aware of what I am trying to achieve hereas I personally would like some sort of ZOrder control via ProntoScript to ensure that widgets can be brought to front/sent to back as needed.

Comments are welcome here but please limit posts on this thread to those which are relevant to functionality you'd like to see or design of the Popup Descriptor. Let's try and keep this thread pure without extra comments such as "Attaboy" or "Yes, I agree this is needed".

Lyndel, as for the Popups, I think it should be possible to create types of message boxes aswell. Just like the vb msgbox. So yes or no, only ok etc. Of course this is something that could be prototyped in later, but I think much users would benefit from it.

As for making Philips aware... ZOrder would be great, but I think gif, httprequest with authentication and native JSON should be higher on their list. And I doubt if they have any time in the next months, the CRX9800 looks like a lot of work, and Philips accuiring Dynalite will probably mean that they will build some large Dynalyte modules. One of the main developers said gif wasn't going to be supported because it's getting less and less popular. Might be true, but it's still used for motion in 99% of the time. Most webbased devices use authentication and JSON is going to be next big thing.

Community effort is something I'd really like to see, I've tried it with the unfinished Denon script, but after a year no one replied with any actual change (not even a line) to the code. I think it's crazy that we all are building the same things, no one likes it when others profit, but I know that there are atleast 5 projects for XBMC, atleast 4 for Denon, atleast 2 for Sonance iPort, etc. So count me in where ever I can help.

I've been tinkering and playing with the idea for ages also but have been busy on prontoTunes lately.

I was thining if it was dynamically built (eg via code) then would the z-order be an issue? I assume (and that's always a bad thing) that if you create it, it would be at the front... Then on action you just delete it. Then just store your backgrounds corners, headers, buttons etc on a template page. Given we can now get text widths creating the size shouldn't be too hard with a parameter of how much padding on either side.

While on the whole z-order I'd love to see the ability of grouped objects, even if managed like in flash where you create a parent and then put your other objects inside it.. But only need to manage/move the first one to keep everything together.

Could Alerts be customized to act as popups ? They pop to the top .

I'm essentially doing the same thing in my AMX module, but handling it through AMX. Being able to do something similar without an AMX controller, or even easier AMX emulation would be great.

As it stands right now, I've only implemented the AMX @SHO command in prontoscript (shows/hides a button). The widget groups for every pop-up are programmed into AMX because that's what I know well. So telling my module to show 'popup-1' using standard AMX codes does a FOR loop to @SHO all buttons I declared to be in 'popup-1'.

What are the chances we could get the ability to treat a group as a widget and give it a name? Essentially doing what you are talking about but on a built-in level. Basically setup the 'popup' how you want with all buttons doing their thing and select them all and hit group. The group would then have a prontoscript label option available. Pilips could just have the built in show/hide/move functions work on a group widget as well.

Kevin D.

Not really. You only have one button and no ability to control modality. No good formatting for text, and no icon.

When I speak of a popup, it is not just in the sense of a message box. It could be something like a popup with 6 buttons that select different surround modes. On your main window where you are listening to music, you press surround, and voila, a popup appears.

Why would you delete items with each action? My thought was... Create popups at page load time, hide them, and show only when needed. In this case, you might want ZOrder.


The grouping construct can be handled by the WidgetSet class I mentioned.

I just uploaded something to the prontoscripts area . It has a PC-Style interface activity . If you press a button a menu appears. If you press a button x on that menu a sub-menu x with 12 buttons appear. If you press button x again, sub-menu x disappears. This activity uses the "top"and "left" to position elements.

I also added a Text activity where a keyboard is used to leave messages for other users. This activity uses the visible not visible to change the look of things.

It should be in the file section soon in the games/entertainment section under the name Project Boredom 2. These were made for the 9400 .

Lyndel, but is it really necessary to load the popup at the page level? Popups are by design rarely used (or should be).

I create popups (for selecting one of many computer inputs in a conference room) with dynamic widgets. They are always on top, so the z-order is not relevant. When you don't need them anymore you just do whatever.remove().

For the config, I use a trick. I have hidden pages for every popup I need, one page for each popup. On that page I have the buttons, with their actions, all buttons are named BUTN_+number. The popup resource page has the same name as the page that will be using those particular buttons in a popup. All I do then is: Take the tag of the current page, and with it set a variable to point to the popup resource page. And then I just loop through the BUTN_i, to draw all the buttons and associate actions to them. In this way you can have one library, and all users have to do is make pages with the popup elements, and they just have to call popup() in their code. One problem arises, if there are more popups needed. In this case you can add an index argument to the popup(), to get to the right page in the resources.

The look of the popup is on a separate page. You can have different ones. On the resource page of some popup buttons there can be a Panel that in the label holds the look (theme) to be chosen for the popup.

I hope this is any good.

OK


I thought this was what I proposed.

Spamming a bit. Sorry, I did not want to sound like a smarta... I'm not a native english speaker and sometimes I don't fully understand bits of written text.

I apologize.

Popups are nice and I use them, but I really wish the Pronto developers would have changed PEP to have an infinite canvas where you could place the screen at any coordinates, 0,0 being the most obvious.

In that way you could see everything you want for a page on the canvas and the widgets that have coordinates that are outside the range of the "Screen" just do not appear on the real screen when loaded, however a simple coordinate change at run time puts them just where you want them and visible. All the code is in the basic firmware and it does work that way as I use that trick when developing for a 9400.

Now what have I done, Basically what Lyndell is suggesting but being a very old programmer stuck in his ways I do not develop "classy" code. I basically have a global function (library or activity level). It handles showing or removing a popup. it deals with arrays holding a basic description of a Popup (where the resources are, basic size, where the button descriptions are, etc); and an array that describes buttons that can be used on the popup(s).

I allow for the Popup description to declare row and/or column size, or to have it computed by stating just one (rows or columns), Buttons can have fixed row column coordinates. Text is presented at the call and is above the buttons.

The most common one I use is a single button popup similar in nature to a windows dialog with an OK button. Next is a three button Popup with Yes, No, Cancel as the choices.

The most complex one is a Popup that provides for audio effects on a sophisticated A/V processor. It has 12 buttons one for each effect and an OK to remove the popup. Each button except OK sends a command to the AVP to invoke that effect. Obviously a similar scheme can be used for popups to do anything.

Part of the decription of a button on a popup is the function to execute when the button is pressed. That provides a lot of flexibility and power.

Here is some snippett code

var MSG=new Array(); MSG[0]={}; // This is for the general user message
MSG[0].label="OK"; // There is one button in the descriptor array at index 0
MSG[0].action="Popup,Remove,userMsg"; // What to do when pressed
MSG[0].color=255 // color for button text

var UMpnl=""; // This is the panel object storage
var UMbtn=new Array(); // This is the button array storage for a popup object.

var userMsg={}; // this is the definition of a Popup to do user messages
userMsg.name="UserMsg"; // The name of this popup
userMsg.Rpage="Resources"; // Where the widget images are (a resource page)
userMsg.Rpanel="UMPanel"; // widget for backgropund of the popup
userMsg.Rbutton="UMButton"; // widget for the buttons (all look the same)
userMsg.Dpanel=UMpnl; // temporary storage for panel
userMsg.Dbutton=UMbtn; / temporary storage for buttons
userMsg.btnInfo=MSG; // the name of the button descriptor array
userMsg.buttons=[0]; // which buttons in the button descriptor array to use

doPopup("Show",userMsg,"A non recoverable Socket\nTimeout has Occurred.")

Did not think you were being a smarta##. Just wanted to see if what I posted was what you intended.

A "Window-Style" design should be considered when re-designing the User Interface .

A panel with a task-bar ( window border ) and a close button should be incorporated into the design. If you place your finger on the task bar it should move around the screen. If you slide it off the screen it closes automatically. Maybe the close button could be replaced with a double tap of the task-bar. If the task-bar and button are not used they could remain invisible.

This would look absolutely great on a 9800, but on a 9400 because of the small screen it work even better. I would keep scroll bars out of the design because too much information should and could be on a new page or window.

I think this would be the next step in the U.I. design process.

Alpha,

I had not planned on writing the Windows desktop in Javascript. I am just interested in a common way to show/describe popups. If you'd like to use said mechanisms to write the desktop and want to contribute code to the project, I'd happily accept it. :-)