MultiQ Content Creation, Part 2
Contents
1. Wan fle nat ca De replaced by another sound Figure 23 The website includes a number of files such as two PHP scripts and the jquery library along with a java script that you never need to touch The click wav file can be replaced by another sound Focus is on how to modify the html pages The buttons will take action on button down which is the correct approach when it comes to touch panel applications MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 29 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice Coordinates are measured in relation to the upper left corner Shee Depot 1280 badies Shoes Mens Shoes Athetis Shoes Fi Depot A I lt gt y The Shoe Depot ee iii ii Q 9 Athletic cibis m 9 shoe Depot a Figure 24 It is wise to start the project by designing the dashboards in drawing software When using Web Plus the software acts as a drawing a well as a web development tool Here we need to use a separate drawing program and then we build the code separately First we create the background images All button images must be in the PNG format to work with the java scripts us2. Play lost Modes Fla Pf whe Di play Tima Lock om apet 1 z Biya bole Slaying change LJO ee A Duration O0 00015 Size 0 8 ts at Show channel schedule Save Add Log oul Figure 2 Define your URL to your website as a media spot in the media archive in the Import tab by pressing the Add URL button 1 You can choose to zoom the website to fit horizontally without any horizontal scrollbar 8 Then create a channel The Web Kiosk Channel 5 where you put your URL media spot You can set the time interval at which you like the website to be reloaded when nobody is interacting with the website 7 MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 7 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice You need to create a site for your media monitor if you don t already have one Go to the Sites tab and click the Sites icon to the right Then click Add at the bottom right to create a site Next create a unit by pressing the Create unit button while inside a site multi o Impot Publish pr System Help Logged in as user admin __tog out 1J First Store Address Phone
3. This command makes the media monitor move to the next spot in the current playlist http 127 0 0 1 multig mapids php function next amp area_name AreaO Go to previous spot This command makes the media monitor move to the previous spot in the current playlist http 127 0 0 1 multig mapids php function previous amp area_name AreaQO MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 25 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice OD WebPlus X5 Shoe Depot Dashboardwpp i tSS DSO FETE A Uea ETETETT eE ET ETT GR Edit Button Gy Ect Button Design Convert to Navigation Bar z Ele Edit Wiew Jnsert Format Tet Table ools Arrange Window Help AX D5 Shoe_Depot_Dashboard pp oe Swatches Olour l Line Transparency gt i is 4 oe 2 wil t A a gt Trt a 0 i site Objects styles Galery z re Waster F Ladies Th B l e Pages h D O Shoe Depot OE me g a it Mens Shes y a HED Lathes Shoes i ihia Athletic Shoes 4 I lt Ci i 35 NoHypfrik i ntemst Pa Cr
4. Example lt img id Ladies_pumps_ info style top 1 70px lett 20px src images Pumps png gt This line will just make the Ladies_pumps_info playlist start playing and the dashboard remains unaffected when pressing the button represented by the Pumps png image file Note that the line with id Menu_index will make the main menu dashboard load and the index playlist to start playing This was the reason for naming the default playlist index To work with the code it is recommended that you use a good text editor A very good choice is using Notepad which is a free software that is considerably better than using the standard Windows notepad editor The buttons will take action on button down when using the method above 4 7 To publish the Shoe Depot Dashboard site to the system Whatever of the two methods you used to create the dashboard site the next thing to do is to zip the web site folder This is simple Overs gt Lars Ingernar Lundstr m Documents Shoe Depot gt Info kiosk dashboard v Search P Organize A Explore e Mi E mail pe Share W Burn Name Date modified Type Size Tags E Documents b Explore RB Music Open Pictures Shoe_Depot_ Add to VLC media player s Playlist 90 More Dashboard Open as Notebook in OneNote Folders v Play with VLC media player J OneNote Notebooks a Zip gt Pinnacle Studio So Scala T lat ae J ii am
5. rather than on release As discussed before it is essential that the buttons take action when they are pressed and not on release Standard web development tools do not take this into account However by making two simple additions to the dashboard website just created we can change this To get the buttons and all other hot spots can controls that are available in Web Plus you need to add the script madstixjs to the dashboard website folder that you have just published to a folder on your computer This script can be downloaded from the Multiq website The script changes all commands created within Web Plus to be activated on mouse down rather than on release The procedure described here should work with most web development tools So Web Plus is just used as an example MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 26 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice In reality you do not have to think about the content of the madstixjs script Just add it to your dashboard site folder igs Shoe Depot m Dashboard ie ia oil amp T wpimnages wpscripts index htril rmigdstix s
6. General m Umit ID i04 i J Name First Store Web kiosk Street Units Location ZIP Code lt a Description F City i Country U nit Templates Localization i Timezone SE Evrope Stockhelm anced Language English Display Mode SGA Full screen portrait 270 Output Display Awo 4 32 16 9 54 Unit Template py unit templates in system Inherit changes from Template Ei Unit control Report Interval 170 Fast Download Interval io Bandwidth limit kbit s 0 mo limit o Log media files M Schedule Reboot F Request Log Upload F Encrypted Communication M Report Status Interval 3600 SNMP monitoring 24 7 F Master Volume io Enable remote access to webserver F Enable remote ssh and ftp access M Remote configuration of unit Edit values Software video playback M Display mouse pointer EAE Bananen Figure 5 In the Settings menu of the media monitor check the box Display mouse pointer and then click the Save button at the bottom of the page 3 1 Media monitor installation A media monitor is configured very much in the same way as a separate media player as discussed in part 1 of the MultiQ Digital Signage Creation Quick Guide section 5 By pressing the Ctl Alt c keys on the keyboard you get to the setup menu of the media monitor First select the orientation of the screen and the language of your keyboard Then you will either get directly to the config
7. Templates Area scheduld Media from channels ic Channel Playlist Shoe Depot Dashboard Channel Units W Local Storage Shoe_Depot_Dashboard zip Display Time iSs lt A Add X a 7 Media on unit Templates The playlist is empty Add J Ares has no site playlist Advanced Figure 32 Finally the Shoe Depot Dashboard Channel is connected to Area1 of the media player and the dashboard will become visible on the screen and is ready for testing MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 36 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice If you need to update your dashboards you just publish a new version to a folder having the same name as the original website and then zip the website as before Then you upload the zipped file as a media spot as we did previously Then the dashboard will be replaced automatically all throughout the system MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 37
8. International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 2 Introduction In the MultiQ Digital Signage Creation Quick Guide part 1 Getting started with digital signs we have created a number of slideshows and video clips These video clips where organized into a channel that finally consisted of a number of playlists that can be scheduled to be played at desired hours Most digital signage in the world work this way However the customer is quite passive in relation to the digital signs and can not affect what is shown on the screens By using interactive kiosks you can activate your customers And you can get them to search for information according to their own preferences There are two basic ways of creating kiosks web kiosks and information kiosks This manual is focused on how to produce content and there are brief instructions on how to manage content in the MultiQ digital signage system For more details on how to handle the management system please consult the MultiQ DSMS 3 6 User Guide Media monitors 5 amp 7 operated in centrally managed mode We start off with web kiosks using keyboard and pointing devices such as a mouse because they do not require any specifically adapted content Your already existing website will do Information kiosks use content t
9. Description a Site id Sites pioa O Uana Manage playlists Site playlist settings Extensions support Tracking E Units on this site ite Templates p Fa First Store Screen 1 101 23 hours and 15 minutes 30 seconds ago 5 E s _ m W First Store Media Monitor 102 1 minute 31 seconds ago ta z A Units i 4 First Store Screen 3 103 2 seconds ago a ji E g ad as First Store Screen 4 104 Unit has never reported 5 nit a Foe Templates Add unit Create unit w al Advanced Figure 3 In the Sites tab Sites menu click Create unit inside a site that you have previously created MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 8 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice mulio Import Publish Sites System Help Logged in as user admin Log out J Add unit cy Unit ID Sites Name First Sto Street Web kiosk ve Location ZIP Code J Site Description City Templates 3 Country t J Display Mode 5XGA Full screen portrait 270 ae Unit Template No unit templates in system a Unit z Add view to cha
10. Multia MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice Table of Contents E RCONT LOY e E 3 2 INO OUC IOR eeen e A EE EAEE EE E E EE 4 3 Web kiosks using existing websites s ssesssrssesrsrsrrsnsrsrnrnrsrnrnrnnnsrnrnnnnnnnnnnnnnnnnnnnnnnn 5 3 1 Media monitor installation es ssesessssesnsresnsresnsresnnnnrnnnsrnnnsnunnsnunnnnnrnnnnnunnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnao 10 A iniormaton KIOSKS vacciicacensevtsceseteuscsiscevticecshdenusesicedices eea ai EEEa ia a 12 4 1 Some basic principles for successful creation of touch panel applications 13 4 2 To create informative content suitable for kiosks ssssssesesssresnsresnnrernnrsrnnnsrnnnsrnnnsrnrnsnnnas 15 4 3 To split the screen into tWO parts sssssssssssssnsrsssssnsnnnnsnsnsnsntnnnnnnununnnnnnnnnn
11. V we have rearranged the text and added some details A good way to start is to make a list of all features and details that are related to each product The details should be organized in a uniform way and added to the product images Horizon Juliet Pump Gain instant elegance when you slip into the Horizon Juliet Pump sure to 3 become a goes with everything favorite IA style Full grain leather or crocoprint leather upper Leather covered polyurethane cushioned footbed Rubber sole v Stacked look heel and covered platform Figure 10 By adding an area containing details for a product you can easily adapt content to an information kiosk If you want dynamic content as to let the customer know whether the product is in stock or not you can use web pages designed as above where the details are retrieved from web content already available on the net The images with product details can be organized into playlists that are played depending on what buttons on the screen are pushed After having added the product details to the images they are organized into different playlists depending on kinds of shoes MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 15 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their re
12. ack to the default playlist the playlist on top in the channel 4 4 The dashboard At the bottom of the screen there should be a dashboard with buttons allowing the customer to select what video clips and images to watch This way the customer can find the information asked for If no one is touching the screen there is a default playlist including an animated logo and some shoe images with transitions You can say that in this mode the media monitor provides conventional digital signage There are means in the system to allow for scheduled default playlists to use different messages at different times Below the upper image and video area there is a dashboard This dashboard is a web site By detault the main index page is shown where there is a possibility to choose between Ladies shoes men s shoes and athletic shoes When a button is pressed the menu is replaced with a sub menu and a video clip associated with the sub menu content is played For the ladies and men s shoes there are three choices of kinds of shoes Each sub menu also has buttons to move forward gt and backward lt between different shoe models contained in the currently selected playlist For the athletic shoes there is no further choice but to move in between the different athletic shoe models by pressing the move to next and move to previous buttons The sub menus also have buttons to move back to the main menu see figures 15 amp 25 MultiQ D
13. art 2 Activate your customers with kiosks Version 1 29 11 2011 11 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 4 Information kiosks Information kiosks with touch panels are ideal when you wish to convey information in an impressive way to the customers The kiosk contains dashboards with buttons that are optimized for touch panel manoeuvring Most content is downloaded in advance for rapid access but can be combined with online content if so desired Information kiosks are very well adapted to show video clips and providing other high resolution content An information kiosk may consist of one or more monitors where a button on one touch monitor may initiate content to be played on a second monitor and so on As a summary you can say that an information kiosk is designed to work with primarily downloaded content and to be manoeuvred using a touch panel The basic idea is to use a 19 touch panel media monitor that has a built in media player The screen of the media monitor is split in two parts In the upper part we can play HD video clips the area is 1280x720 pixels corresponding to the 720p format show images or even display web pages In the lower part of the screen there is a dashboar
14. d with buttons By pressing the buttons the customer can choose between different options to find more details on specific products The media monitor to be used as information kiosk is installed very much the same way as the web kiosk described in the previous section However at first start up the touch panel need to be calibrated This is done by pressing anywhere on the screen while the multi colour test pattern is shown and then by following the instructions Another difference is that the mouse pointer should be left invisible since it has no meaning in touch manoeuvred applications Much content previously created for in store TV digital signage can be reused in information kiosks Here we will take a closer look at how this can be done MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 12 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 1280 pixels Di 720 pixels e La Q Depot A 304 pixels ones es em Figure 6 An info kiosk is designed to be manoeuvred using a touch panel Content can be video clips images and web pages that are downloaded in advance to the media monitor However also onli
15. e by using underscore instead of spaces between the words in the names of the playlists it will be easier to address the playlists when designing the dashboards holding the buttons MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 18 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice i i n as user n Log out Import Publish Sites System Help Logged in as user adm B g 4 Settings hl Interactive Button Pause Time 235 J Status Interactive Timeout Goto Default Playlist 50 Channel Cache Time 5 Show Legacy Image Controls tting lt Mediaplayer Configuration J Script URL demo multiqms se demo4 Security Script User demo4 3 Script Password KJUTtaTa Server API Configuration Upgrade Server API URL demo multiqms se demo4 multig 3 0 0 mapids php demo multiqms se demo4 multig 3 1 0 mapids php Login demo4 Password Te4zTo9n 4 Parameters Name Scope Type Default Value Description There are no defined parameters in the system Add Figure 14 In the Settings menu of the System tab it is possible to set the time interval after which the media monitor will revert b
16. e Stockholm Advanced Language English Display Mode CUSTOM SXGA Shoe Depot Info Kiosk Output Display Auto 4 3 16 9 5 4 Unit Templat m Save nit Template No unit templates in system Inherit changes fro Template V Unit control Figure 12 Select the Sites tab and look up the specific media monitor Then choose the new custom video mode Custom SXGA Shoe Depot Info Kiosk and click the Save button at the bottom of the page The Shoe Depot Info Kiosk Channel In this case an information kiosk containing information on various kinds of shoes shall be designed In the upper part of the screen the Shoe Depot Info Kiosk Channel is to be used The channel contains a number of playlists that can be addressed by the customer by pressing buttons on the screen The playlist on top is the one that will be played automatically when nobody has touched the kiosk for a while Here we have chosen to rename this playlist to index The reason for doing this is that things become simpler when using the manual method to create the dashboard which is described in section 4 6 MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 17 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respec
17. e or less The 19 MultiQ media monitors are SXGA 1280x1024 pixels in resolution By setting the media monitors in portrait position we get an excellent view of the website Using portrait orientation of the screen means that the screen will become larger in vertical direction and that less scrolling will be required than when using conventional computer screens in landscape orientation It is simple to set up a web kiosk First define the URL of your web site as a media spot in the media library If the website should prove to be a little bit too narrow or too wide this can be easily compensated for by using the Zoom feature in the MultiQ system making the horizontal scroll bar disappear Next put the website web spot into a channel in this case The Web Kiosk Channel that is connected to the media monitors you intend to use The idea of using channels is that you can have a larger number of media monitors to use the same channel When you want to change the content displayed on the screens you just need to change the content of the channel rather than changing content on each media monitor separately In a web kiosk you may come to a situation where you want to change the URL to the web site or even use different URL s at different hours or during specific periods of time MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 6 2011 MultiQ are registered trademarks
18. eates a hyperlink to an nterne page w F Ste Ps typerin information Internet Page 3 Tnt enet Fall RI artiress v H f Fle oe wad Ancho r ai Pac Hyperlink to Start Ladies_pumps_info z RSS Feed 1 Shopping dert Nevigatior ent E p g User pata The target is a document frame ifrm_2 Target Window or Frane Type Dozunent Frame gt mz Jp active document frame None Media Use JavaScript pop up code Settings S DE Yagil ther Properties dign Transform Character 3 Tite GR Access key wes X27 px iS W 251 px zj p Ci visa Ei Hip ie T 100z a P 100 i Olio gt Rud ox cane tee izomp Hh O Figure 20 On each of the sub dashboards there are buttons with hyperlinks that initiate playlists These hyperlinks will return responses that need to be sent to a document frame in order not to replace the dashboard itself In this case ifrm_2 is used as target for these responses The second document frame ifrm_9 is used to start the Ladies_pumps playlist when the ladies Shoes dashboard is loaded Once you have completed the dashboard website the next step is to publish the site to a folder on your computer To do so select File gt Publish Site gt Publish to Disk Folder Create and select a folder named Shoe_Depot_Dashboard You will now have your dashboard web site in a separate folder 4 5 4 To get the buttons to react on button down
19. ed in this solution The reason for this is that we want to be able to use transparent graphics which will allow for buttons having rounded edges The button images representing the down stat have the same name as the corresponding image representing the normal up state except from the names being extended with _inv MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 30 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice saat amp wt 4 4 fr Ma a a Mainbackground Athleticshoesba Mlensshoesback Ladiesshoesback Athletic shoespng Ladies shoespng Mens shoes png Dress shoes png Athletic Ladies Mens Dress Main menu prg sandals png shoes_inme prng shoes ime prg shoes inw prng shoes_ine png Main sandals in png Fumps png Boots png Mules prng Boots ins png Purnps_inw prig menuin png Mules ine png Nexteang Previous png Previous _In prig Mestine png Figure 25 The images that are needed to create the dashboards the background images and the button images representing the normal state and the pressed button down states MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with
20. editor the monitor screen can be divided into several parts The area on top is AreaQ and the one at the bottom is Areal MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 16 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice To activate the video mode you choose the Sites tab and select the unit to be used In the Settings tab of the unit and select the Custom SXGA Shoe Depot Info Kiosk video mode and click Save at the bottom of the page The media monitor will now reboot after which the screen will be divided in two parts with AreaOQ on top and Area at the bottom multio z C ae ia Log out Import Publish weSileSeee System Help Logged in as user admin 1J First Store Media Monitor 4 Unit ID 102 Location Site First Store Sites Last report 2011 11 17 16 16 01 Address Description 4 AreaOd a Areal j Audio 3 Settings Extensions 3 Status 3 Time Share 6 Idle Spot Templates General Unit ID 102 7m T Name First Store Media Monitor Street Location ZIP Code mi Description a City L oe J x Countr Unit Yy Templates Localization i Timezone SE Europ
21. ee e paged htril paged html page4 html Figure 21 Add the mqdsfix js script file to the Shoe_Depot_Dashboard folder To activate the script in your dashboard website you need to add the following line to the header section of each of the web pages dashboard and sub dashboards lt script src mqdsfix js gt lt script gt To add the line to each of your dashboard web pages you right click on each of the web pages and select the Attach HTML command Once you have added the line to a page trom within Web Plus it becomes a part of the project file and will stay there even though you edit the content of that page After adding the line to each of the pages publish the site to the local folder on your computer once more MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 27 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice File Edit View Insert Format Text Table Tools Arrange Window Help 8X IDBB 438 0 8 B c EEE eSEE M ERNA EBs Site Structure fal Site Manager Colour Scheme Designer E Layout Guides Q9 Set User Details B Options Page Security CE Shoe_Depot_Dashboard wpp a Swatches C
22. hat is adapted for this kind of kiosks as we will discuss later on MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 4 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 3 Web kiosks using existing websites If you intend to use an existing website in your stores the best choice may be to set up a web kiosk A web kiosk is a media monitor that uses a keyboard and a mouse or other pointing device to directly access an existing web site The idea is to reuse an existing website and not to create any specitically adapted content A media monitor is a monitor with a built in media player This minimizes cabling and completely eliminates the overheating and cooling problems often caused in conventional PC kiosk solutions Putting your website inside the stores is not only a way to market your website to the customers but also a way to improve the ways for the customers to easily and quickly find the intormation that they are looking for This relieves the staff in the store and reduces waiting for the customers Your website is a great means for customer communication inside as well as outside the store Web kiosks are ideal if you need to make exis
23. having the same size 1280x304 pixels Name them Men s Shoes Ladies Shoes and Athletic Shoes respectively You can see the tree structure of the web site to the right of the screen 4 5 2 To set up the main dashboard Home or index page We start off with the main page or the index page Buttons The next step is to add elements to the page In general it is best to start off with the buttons Start by adding one button using the Add button tool see figure 17 Then edit the button using the Button Design Editor see figure 18 that appears on the top menu as you select a button or as one alternative when you right click on the button Once you have made one button to your preference just copy the button and make more The label on the button is very easy to change just by right clicking on the button and then selecting the Edit MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 21 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice button command It is also in this menu see figure 19 that you add the hyperlink and set the targets for the hyperlinks discussed below There is a number
24. igital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 19 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice amp 9 Default playlist index The Shee Depot es Coe OEN y to When the Ladies Shoes button is pressed When the Men s Shoes button is pressed When the Athletic Shoes p on is pressed the Ladies_pumps playlist is initiated and Then the Mens_classic_shoes_info playlist the Athletic_info playlist is initiated and the the sub dashboard for ladies shoes is displayed is initiagted and the sub dashboard for men s sub dashbeard for Athletic shoes is displayed shoes is displayed Move to Move to Move to Main menu Main menu Main menu Move to Move to previous previous Move to Move to next next A aL anien a 0 wet et ee le Di ERS a kd T Ladies_mules_info playlist Mens_sandals_info playlist Ladies_boots_info playlist Mens_boots_info playlist Athletic_info playlist Ladies_pumps_info playlist Mens_classic_shoes_info playlist Figure 15 The Shoe Depot information terminal has buttons that addresses playlists It is possible t
25. in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice E Creates ahypsinkto a pege in your ste Si ste Page Hyperlink Information E Internet Emad Page name lf Ladies shoes T Export as absolute URL Target Window cr Frame f Shae ue so gurcie ed peni actye Cooument Frame None Zaa wl File Edit View Insert Format lus Jevesertt popup cde Settings 8X Other Properties The i Accesskey OBB 18 1 EB Site Structure E Site Manager Site Objects styles Galery 7 Master Pagas B B Pages m De G E SS Framer ater Add web Page Site structure One main dashboard And the three sub dashboards Medis Bar QuickBuilder Bar ree No Hyper s Sta Page B rternet Page Orag tems From here onto your page L g Pie UAL address http 127 0 0 1 rukiq mapids phprfunton gto pi gi t a Anchor s Smart Object i a RSS Feed Navigation Bar Button Photo Galery Text Frame l User bets merrer TE iniip 127_0 0 limulbgimapids php function goto piristi namesarca narne rca spayisi name index Figure 17 Start by adding the buttons and the hyperlinks to the button right click on
26. ipt type text javascript src javascriptjs gt lt script gt lt body gt lt audio id audiotag src click wav preload auto gt lt audio gt lt img id Ladies_pumps_info style top 1 70px left 20px src images Pumps png gt lt img id Ladies_boots_info style top 1 7Opx left 300px src images Boots png gt lt img id Ladies_mules_into style top 1 70px left 570px src images Mules png gt lt img id Menu_index style top 35px left 300px src images Main menu png gt lt img id Previous style top 35px left 5 7Opx src images Previous png gt lt img id Next style top 35px left 700px src images Next png gt lt body gt lt html gt Figure 27 The Ladies_pumps html code Here are three examples where the Menu _ prefix is not used In these cases it is just the playlists having the same names as the id that starts to play Also there are Previous and Next buttons that make the media monitor to move to the next or the previous media spot MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 38 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice
27. kiosks Version 1 29 11 2011 31 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice The HTML pages First we will take a look at the index html file lt html gt lt head gt lt style gt body background url images Mainbackground png background repeat no repeat margin O moz user select inone j img position fixed j lt style gt lt head gt lt script type text javascript src jquery 1 4 4 min js gt lt script gt lt script type text javascript src javascriptjs gt lt script gt lt body gt lt audio id audiotag src click wav preload auto gt lt audio gt lt img id Menu_Ladies_pumps style top 35px left 20px src images Ladies shoes png gt lt img id Menu_Mens_classic_shoes style top 35px left 300px src images Mens shoes png gt lt img id Menu_Athletic_info style top 35px left 570px src images Athletic shoes png gt lt body gt lt html gt Figure 26 The index html code On top the background image is defined Then there is an id for each button followed by the position of the top left corner of each button in relation to the upper left corner of the web page Finally there is a refe
28. nce your dashboard is completed and you have added the mqdsfix js script with the references on the web pages as described in the previous section you are ready to use the dashboard on the media monitor Now go to section 4 7 to see how to publish the dashboard web site to the system Note that the commands intended for the media monitor will not work if you try to run the website on your computer MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 28 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 4 6 Toset up your dashboard using the manual text editor method Some people prefer to code web pages manually rather than using WYSIWYG tools Here is an alternative way to build the above dashboard using the traditional notepad method The basic principles of sending hyperlinks containing commands to the media monitor web browser are the same as in the above example However things are somewhat differently organized in the dashboards themselves compared to the WYSIWYG alternative The method is based on using a background images having the same size as the dashboard 1280x304 pixels The background images include the decorations such a
29. ne content can be used In this example the top part of the screen is used to show video clips and images while the bottom part is a website used as a dashboard to contro what is shown on the rest of the screen The upper part is 1280x720 pixels in consistence with the 720p format 4 1 Some basic principles for successful creation of touch panel applications To be successtul with touch panel kiosks there are a few things to think about when creating the application In the public environments people tend to have much less patience than when sitting at home or in the office surfing the web Therefore the buttons must react instantly and there must be a quick response from the button when pressed It is essential to note that the human behaviour is slightly different when handling touch panel controls than when using a mouse Mouse manoeuvring is based on the command being sent when the mouse button is released rather than when the mouse button is pressed down Mouse users are very used to the action on release behaviour and do not think about this MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 13 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications wi
30. nnel Templates Primary E fy The Shoe Depot Channel i E J The Shoe Depot Channel PI I n Advanced V N Kiosk Channel Audio ey The Shoe Depot Channel The Shoe Depot Channel PI a m ey The Web Kiosk Channe Cancel Add Figure 4 When creating the unit select the SXGA Full screen portrait 270 video mode Then tick the box besides The Web Kiosk Channel to connect the channel with the link to your web site to the media monitor Don t forget to click the Add button at bottom right when you are done To use a mouse as pointing device we need to activate the visible mouse pointer This is done by ticking the Display mouse pointer box in the Settings tab of the unit MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 9 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice multio Import Publish niihin System Help Logged in as user admin i nt 1 First Store Web kiosk Unit ID 104 Location Site First Store Last report Not available Address Description roid s ere P d Primary Audio we Settings 3 Extensions a Status 3 Time Share 3 Idle Spot Templates
31. nnnnnnnnnnnnnnnnnnnnnnnnnennae 16 AA E NDO eE 19 4 5 To set up your dashboard using the Web Plus WYSIWYG web creation tool 20 43l Tocreal 116 dash00ald suntamicnrtar aia eateries nea Eten toned eetaea 21 4 5 2 To setup the main dashboard Home or index page seereessessresssesssesssesssesssesssesseeeneeenseen 21 4 5 3 To setup the sub dashboard WED pag S sessssessesssrresreserrsssrensnnensnreonsnnennennnenenreennnnenrnnenns 25 4 5 4 To get the buttons to react on button down rather than ON r lCASCuiusessssssesesesneee 26 4 6 To set up your dashboard using the manual text editor Method sssr 29 4 7 To publish the Shoe Depot Dashboard site to the system ceeeseeteeteteteeteeeeteees 34 MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 2 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 1 Revision history A description of changes with revision number will be noted in the revision log below MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 3 2011 MultiQ are registered trademarks or trademark applications of MultiQ
32. not interested in the response but we only want to send the command to the media monitor We do not want the response to replace our dashboard which would make the dashboard disappear and be replaced by an empty white page Therefore to take care of the response we set a document frame as a target The document frame is an invisible area on the dashboard and landing the returned web page here will not affect the dashboard itself For this reason a document frame with no hyperlink is added to the dashboard and when setting the hyperlinks of each of the buttons the document frame is set as target To make the document frame invisible no borders should be chosen and the background shall be chosen to be transparent Also there is a second framed document on each sub menu that is used initiate playlists in AreaQ as each of the sub dashboards are loaded respectively So the framed documents are used for two completely separate purposes Only three kinds of hyperlinks are needed to control the content of the info kiosk These are listed below Go to playlist The go to playlist hyperlink contains two parameters the area name and the playlist name In this case the area name is always AreaQ set when creating the video mode The playlist name is therefore the only thing that is varying between the buttons http 127 0 0 1 multig mapids php function goto_playlist_name amp area_name AreaQ0 amp playlist_name Ladies_pumps_info Go to next spot
33. nt text html charset UTF 8 gt lt meta name Generator content Serif WebPlus X5 13 0 2 025 gt he lt meta http equiv X Ua Compatible content IE EmulateIE8 gt E lt title gt Home lt title gt pz lt Page Head gt IN s lt script sre mqdsfix js gt lt spript gt val lt Master Page Head gt lt Header code for Button b lt Headez code for The Shoe lt Header code for Button btn lt Headexr code for Button btr_ j e lt Header code for Senki Hak Peina airan VOR Emb Bitmap pic 6 gt lt Header code for Red High Heel Pumps wdp Emb Bitmap pic 5 gt lt Header code for Nike Zoom Air Football Boots 2 wdp Emb Bitmap pic 7 gt 3 gt re t png Emb Bitmap pic 3 gt 2 gt E lt Headex code for Framed Document ifm 8 gt g lt style type text css gt z body margin Opx padding Opx Bie Master Page StyleSheet Q z Page StyleSheet AR Buttoni Buttoni link Buttoni visited background position Opx Opx text decoration none display block position absolute background image url wpimes F Button1i focus outline style none e x z HE n x sj zA Gi G Hone a teat wasi EO Figure 22 Right click on the background area of each web page and select Attach HIML Then add the lt script src mqdsfix js gt lt script gt line in the Page Head section of the page code O
34. o move between different media spots in each playlist by pressing the gt go to next and lt go to previous buttons We will now take a closer look at two different ways to design the dashboard or rather the dashboard web site containing the main dashboard and the three sub dashboards In both cases the task is to create a three page web site that sends commands to the media monitor to play different playlists depending on what button is pressed There should also be buttons to move forward and backward between the media spots in the playlist that is in use at the moment When pressing the main dashboard buttons the men should be replaced by the proper sub menu and there should also be buttons to be able to return trom the sub menus to the main menu In principle both solutions give similar results Partly it is a matter of taste what solution to use Some people like to have the complete arsenal of graphical tools offered by WYSIWYG software while others want complete control of the code We will start off with the WYSIWYG alternative 4 5 To set up your dashboard using the Web Plus WYSIWYG web creation tool The dashboard is divided into two levels in a tree structure quite similar to how a website is designed In this example the Serif Web Plus WYSIWYG tool has been used to build the dashboards Those who prefer manual web development to complete the dashboard site should refer to section 4 6 Of course it is also possible to u
35. ocument Media Name Local Storage Shoe_Depot_Dashboard zip a URL hitp 127 0 0 1 Isf Shoe_Depot_Dashboard ae Username Tickers Password Al Zoom 100 Keep Aspectratio yes Extensions i Volume 100 Allow Ticker yes P No Cancel Save Figure 31 The media spot will lead directly to the index html file since no filename is specified in the path of the URL of the web site which will work in this case In other cases you may want to start at another page That can be changed in this menu Create a channel for your dashboards It is recommended that you define a channel to hold the dashboard site The reason for this is that if you have a number of media monitors it is practical to let all of them use the same channel If you make a change you only need to deal with the just channel and not with the media monitors individually When the Shoe Depot Dashboard Channel has been created the Local Storage Shoe_Depot_Dashboard zip file is added as a media spot and finally the complete channel is added as Media from channels to Areal of the media monitor multio gt 0 a 3 Log out Import Publish _ System Help Logged in as user adm m F First Store Media Monitor gt n Fe Unit ID 102 Location Site First Store J Sites Last report 2011 11 21 17 03 00 Address Description ia z d 4 AreaO a Areal Audio 3 Settings 6 Extensions a Status 6 Time Share 3 Idle Spot te
36. of pre made button designs available that you can use if not interested in making your own button designs Framed documents Note that framed documents are the key to get the Web Plus application to work with the media monitors On the index page a framed document is used to start the index playlist when the index dashboard is reloaded If there is a hyperlink connected to a framed document on a web page this hyperlink will be addressed as the page is loaded This will happen when someone pushes the Main menu button on any of the other three web pages In this case the framed document includes the hyperlink to start the index playlist When using framed documents it is essential to use a transparent background and to disable the border to keep the framed documents invisible An alternative way to make framed documents invisible is to hide then behind images used on the dashboard http 127 0 0 1 multiq mapids php function goto_playlist_name amp area_name AreaQ amp playlist_name index This hyperlink sends a command to the media monitor to start the index playlist in AreaQ You can use this kind of command to start any playlist by modifying the area and the playlist names that are marked in red in the figures MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 22 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB
37. olour Line Transparency ed EJs a J File View Preview in Window Internet Explorer tf gt Attach HTML a Ae X Estimate Download Time 7 EER Page Properties z7 ail Master Page i Site Objects Styles Gallery P M E Layout Guides D i Master Pages gt f Snapping TEONE S o o u5 ivr Merge Re epe ating A fre s to New f ublication Pages html i E Set Object Order z iA A Paste Ctrl V Media Bar QuickBuilder Bar 7 E fh Paste Special Ctrl L se Drag items From here onto your page if Options DA R N E Text Frame Flash Navigation Bar Button Page Photo Gallery Smart Object aa gt Align Transform Character l 3 4 gt EN EB Attach HTML to the code forthe page 319 9 26 5p RO Eile Edit jew Ta er Tet Table Tools Arrange Window Eip 8 X ae ct h bee E Fet 9 D i fN h E i u a aa A 5 3 gt 11 ea ve on J ER id eS gt lt lt Show default text lt Clear Changes i Quick Publish to Web gt Design View x Close Editor Source Shoe_Depot_Dashboard wpp lt Page Preamble gt lt Master Page Preamble gt E lt DOCTYPE HTML PUBLIC 3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd gt m html lang en gt E a a lt head gt lt meta http equiv Content Type conte
38. or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice import Publish Sites System a J Media Web kiosk Media Html Madia di thletic Shoes E Gj reebeite E Default and logo a Ladies Boots d Ladies Mules Tickers gt jd Ladies Pumps PLO A Mens Boots a Mens Clasge Shoes P JI Publish Extensions D Mens Sandals Web kiosk w HHI Diet Ore lon URL Ue Fae Pass vari STREAM Ges criplion Add Delete Sorti Type Mowe to impor Publish Sites System r g Madily media Mywehbsite Type External HTML document Media Name Mywabsa URL hiig wwe myawebsibe cum lisernane lickers Password ll 7oOm pg ag Keep Aspectratio B ya no Volume yop FS 3 Allow Ticker E ye ma Febarciana MUO Import System j tea mebbis Sites 1 Channa wid El B The Shoe epot Channel Channels W The Shoe Depot Channel F The Web Kiaak Channel 5 playlists i 5 Help Logged in as user admin Lagged ri ar Ar ado op Ada URL in Falder JP Bites kinri Fte ra hn te hipu myran com refet Upload Add A Help Logged in as user admin Log out Cancel Save Help Loggad in as user admin Log vut ee 4 2 Playlists Settings Default Playlist
39. ot Dashboard M d Web kiosk Add Delete Figure 29 Choose the Upload button in the Import tab to upload the zipped dashboard site nut Shoe Depot Dashboard IMP Olt Publish Sites B Upload media to folder Shoe Depot Dashboard ca Upload file C Users LarsIngemar L HiowsAe Media _ NewS m Sa lt Upload multiple media files to media bank Tickers Logged in as user admin This media folder is empty Logged in as user admin This feature is for advanced use only It requires that you have JVM 1 5 installed on your computer Al Click on the button and a Java Applet will start and from which you can upload more than one file at a time a Multiple files Extensions Figure 30 Browse to the zipped website and press the Upload button MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 Log out Add URL Log out 35 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice multio f 1a mt ae af 2 Log out mpot Publish Sites System Help Logged in as user adm lt Modify media Local Storage Shoe_Depot_Dashboard zip cB Type External HTML d
40. our fade in effects that takes time that you maybe would have used in digital signage application Here a quick and immediate start of the video clip it the preferable solution SING DEP Figure 8 A way to further improve the impression is to let the button change appearance as it is pressed This can be further increased by adding a sound effect MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 14 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice 4 2 To create informative content suitable for kiosks Conventional digital sigs only contain brief messages to catch people s attention However when customers use kiosks they actively search for details on the products We can use the original designs used for in store TV However we now need to add the details that the customers wish for Mary s comfort clog 2 Expect comfort with this clog This women s casual slip on wraps your feet in a soft leather upper and leather lining Adjustable strap with hook and up closure Approx 1 1 2 heel height Leather lining Leather upper Rubber sole Figure 9 Based on the signs created for in store T
41. p Groove Folder Synchronization d z Restore previous versions d Shoe Depot P Images t Combine supported files in Acrobat di Info kiosk dashboard g Adobe Drive CS4 n i Shoe_Depot_Dashboard d wpimages Send To gt AVS Mobile Uploader di wpscripts v AVS Video Burner Cut AVS YouTube Uploader Copy Compressed zipped Folder Desktop create shortcut Pe ee see 2 ee Create Shortcut Delete INES Figure 28 To compress the web site folder right click on the folder then select Send To and finally select Compressed zipped Folder The compressed folder can now be uploaded as any media spot to the system Go to the Import tab of the system and choose the folder where you want to store the zipped dashboard MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 34 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice nulti2 TT Publish Sites Media Tickers Extensions 2 Media in d Media Athletic Shoes Default and logo Ladies Boots d Ladies Mules Ladies Pumps i Mens Boots d Mens Classic Shoes dL Mens Sandals Shoe Depot Dashboard Shoe Dep
42. rence to what image in the images folder should be used for the button By adding Menu_ at the beginning of the id this indicate that when the button is pressed the playlist mentioned in the remaining part of the id should be played and the dashboard having the same name should replace the existing one MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 2 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice Example lt img id Menu_Ladies_ pumps style top 35px left 20px src images Ladies shoes png gt Means that the playlist Ladies_pumps will start playing and the Ladies _pumps html dashboard will replace the index html dashboard when the button represented by the ladies shoes png image Tile is pressed We will also take a closer look at the Ladies_pumps html file lt html gt lt head gt lt style gt body background url images Ladiesshoesbackground png background repeat no repeat margin O moz user select inone img position fixed j lt style gt lt head gt lt script type text javascript src jquery 1 4 4 minjs gt lt script gt lt scr
43. rent lengths of label text by t stretching horizontally These Styles gt stretchable designs are suitable for use in Navigation Bars For more information see Using guides and Using Design Absolute mode Drop Shadow Buttons exist in varying states depending on the website environment and mouse activity Using Button States tab States displays thumbnail of all available states Double click to edit button state in the workspace 4 D indicates state currently in workspace Size sets button height and width respectively E Inner Shadow Adding a QuickShape or Image Using align and transform tabs ER a IR Modifying colour and styles Modifying text BOO i Worked example 5 Button States Design Tools ot o lis Button Background Normal Down Hover Disabled 14 r A r Spaced 0 pix H ell hA ea Menu Right Menu Below Relative to A Figure 18 In the Button design editor you can design your own buttons or use an already existing design For best results when using the buttons on a touch panel you are recommended to make the Normal and the Hover states look the same Button Label Ladies Shoes Action Hyperlink Page Ladies Shoes Submit Form Reset Form Custom Script onclick Disabled Button initially in Down state Figure 19 The Edit b
44. s the logo and the shoes On top of the background image there are PNG format images representing the buttons Two images are required for each button One image represents the button in its up not pushed state and the other in its down pressed state Therefore we first need to create the background images and the button images We want to create a website similar to the one above Therefore we use a similar design To set up the web page we need to know where to put the buttons Once you have drawn the look of the dashboards you can use any photo editing sottware or Draw Plus to decide the coordinates of the upper left corners of each button in relation to the upper left corner of each web page As shown in the next figure there are two sizes of buttons 250x80 pixels and 1 10x80 pixels In this case the buttons in the upper states were created in Draw Plus Then all buttons where copied to the same document and the copy of the buttons was altered using a filter to form the buttons in the down state The last stage was to export each button individually into separate image Tiles You can use the example web site to build your own dashboard websites The images folder contains the backerounc as well as the bulten images EAN One himi document for esch dashboard D aN Images Athleticinf index html Ladies pu Mensiclass javascriptys IS i A WAW jqguery 1 4 buttonHan callURL php clice way
45. se other web development tools more or less WYSIWYG The reason for choosing Web Plus here is because it is extremely easy to handle for people not familiar to MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 20 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice coding and because there is a wide range or graphical tools and effects that can be helpful at low cost WebPlus Figure 16 Serif Web Plus X5 4 5 1 To create the dashboard In the figure on the next page you can find most tools needed to work with Web Plus For further details please see Web Plus help or user manual Start up Web Plus and start a new site Then go to File gt Site Properties and select Page default and set up the dimensions of the dashboard 1280 x 304 pixels You also need to change the dimensions of the Home index page that was created when you started up the site Go to Edit gt Page Properties and select Appearance and finally change the dimensions to 1280x304 pixels here as well Save the site as Shoe_Depot_Dashboard We now have a dashboard that will fit in the lower part of the screen Now add three more web pages
46. spective companies We reserve the right to change the specifications without prior notice Having the content organized into playlists means that the customer on top of choosing playlist also can move within a playlist to watch video clips images or web pages that are related to that kind of product 4 3 To split the screen into two parts The first thing we need to do is to split the screen into two parts where the signs with details and the video clips are played in the upper area and the lower area is used for a dashboard containing the buttons used for navigation To create the new split video mode go to the video mode editor by selecting the Publish tab and then clicking on the Modes icon to the left and finally by pressing the Open mode editor button In the mode editor press the Area button and drag a 1280x720 pixel area across the top of the screen Then click the same button once more and drag a1280x304 pixel area across the lower part of the screen Finally name the video mode Shoe Depot Into Kiosk and save the mode using the save symbol on top second trom the left e Custom Mode Crestor EET Vc S op ude g N x dp Ticker ogical View Shoe Depot Info Kiosk Ticker Areas Areal reai Properties backgroundColor 4 height 720 name Areal l parent width 1280 x 0 Lh 0 Figure 11 In the video mode
47. the buttons and select hyperlink in the menu The hyperlinks initiated by the buttons on the home index page only lead to the three other dashboard pages of the site Here the target of the hyperlink is the Same Window because we want the main menu to be replaced by a sub menu when the buttons are pushed Add images including the logo and finally add a framed document with the above hyperlink that starts the index playlist The framed document will automatically send the hyperlink added when the index page is reloaded MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 28 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice Button Edit View Insert Format Tools Arrange Help i y Commit Changes X Cancel 6 G ALO A E AR QAG RAB A EE MERET Button State Normal x Swatches Colour Line Transparency F amp Home Back Forward Creating custom buttons Use Button Studio to create your own buttons and modify preset designs Remember the best designs are simple and subtle PA AEA 6 ALZIL ZA A JE Sone 0 By default the button design adapts to ESC a diffe
48. thout prior notice However when it comes to touch panels people tend to regard on screen buttons more like physical buttons expecting things to happen when the buttons are pressed down rather than on release For this reason buttons that react on release give a very slow impression The basic problem is the traditional web page design based on the mouse button on release concept Therefore we need to take actions to make the buttons react on Button down rather than on On release Action On Release Action On Button Down Soe Figure 7 The web pages used as dashboards should be designed to get the buttons to react on button down rather than on release Buttons that react on button down give a much quicker response than a button reacting On release However it could still take some time for the kiosk to react to start a video or even to fetch content trom the Internet To avoid the user trom pressing the button twice it is practical to let the button change colour or shape when it is pressed This gives a quick confirmation that the command has been taken A way to further increase this confirmation is to add a sound effect when the button Is pressed The impression of a touch panel application is very much connected to psychological factors such as quick response and confirmation that the button is pushed When you want the user to start a video clip by pressing a button you should avoid col
49. ting complex websites such as catalogues connected to data bases available in a public location Compared to using a conventional PC with keyboard and mouse you can limit the customer to only surf the website s of your choice Other advantages are that the kiosks can be set to standby mode outside business hours and you have access to central management and supervision In practice you never go to the actual units to change content or to see that they are on line All sottware updates are handled through the central system and you do not have to worry about updates initiated by anyone else but yourself Also you will never have to restart any of the media players manually since there are two built in watchdogs assuring that the unit is always up and running and never get stuck in a hung condition Figure 1 A web kiosk is a media monitor with keyboard and a pointing device that reuse an existing website The 1080 x 1280 pixel resolution in portrait orientation fit very well to most existing web pages MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 5 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice Most websites are 1000 pixels wid
50. tive companies We reserve the right to change the specifications without prior notice NUIT Import Publish l Sites System m bed amp Shoe Depot Dashboard Channel Channels F The Shoe Depot Channel Channels amp The Shoe Depot Channel PI D L m _ i _eetes tte etter teen eeeeeneneseeesennetenennsasensreesasenneeenensansssensenneneennsenenansnanenennens Playlists EAA a E a A F amp The Web Kiosk Channel L e d Modes Playlists Settings Playlists Remove y N 10 a Default Playlist index mee Athletic_shoes_2 Ladies_pumps Ladies_pumps_info Mens_classic_shoes Mens_classic_shoes_info Ladies_mules_info Ladies_boots_info Mens_sandals_info Duration 00 12 18 Size 178 5 MB Show channel schedule Help i Logged in as user admin Log out Playing Change Playing Change Playing Change Playing Change Playing Change Playing Change Playing Change Playing Change Playing Change Playing Change Add Display Time Lock on spot W Add Figure 13 The Shoe Depot Info Kiosk Channel contains a number of playlists that can be addressed by pressing buttons on the screen If no buttons have been pressed for a certain amount of time the information kiosk will play a default playlist index The playlists including the product images including the product details have the extension _ info to their names Not
51. uration menu if the unit is in factory state or you will be prompted for a user name default is installer and a password default is pass MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 10 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice The in addition to the media player id the remaining media monitor contiguration details are to be found in Settings menu of the System tab of the management system If your website uses Flash you need to install the Flash player when configuring the media monitor The installation is done by selecting the Plugins button of the configuration menu Then follow the instructions The web kiosk is now ready for operation and is manoeuvred as any website with the mouse and the keyboard Even password protected web sites can be used and the website will display beautifully in the portrait format offering less scrolling than on a conventional PC screen in landscape orientation MultiQ can provide floor stands as well as table and wall mounts The stands can be customized in colour to fit the profile of your location MultiQ Digital Signage Creation Quick Guide P
52. utton menu MultiQ Digital Signage Creation Quick Guide Part 2 Activate your customers with kiosks Version 1 29 11 2011 24 2011 MultiQ are registered trademarks or trademark applications of MultiQ International AB in various jurisdictions All other company names and products are trademarks or registered trademarks of their respective companies We reserve the right to change the specifications without prior notice Images The logo as well as the shoes is images that have been produces previously It is very handy to use transparent PNG images because then you can use interesting shadow effects that are available in the Styles tab to the right of the screen This also gives you the treedom to choose whatever color you like for the background independently of the background used in the images that are put on top 4 5 3 To set up the sub dashboard web pages More on hyperlinks to control the playlists We have already used a hyperlink to start the index playlist when the main menu index dashboard is loaded However on the other three web pages we will need to send hyperlinks directly from the buttons to start playlists When sending a hyperlink trom a button to the media monitor web browser there will be a response generated that needs to be taken care of In conventional web applications the answer is a web page that is to replace the current web page or to be opened in a new window In the dashboard however we are
Download Pdf Manuals
Related Search