How To

This page contains many tricks and tips on how to do various things.

How to use resources (images, sounds, etc.)

MUPE platform has a dedicated media service, The ClientMediaManager. This manager is responsible for transmitting all resource files (sounds, images, etc.) between the client and the server. To use graphics in your application, place the graphics (prefera bly png format) in the media/ folder. From there, the client can refer to any of these files by using the URL mupe://. To test this, edit the xml/content/BaseExtensions/resources.xml file. Use Mupe->AddCodeSnippet->basic->resource to add new resources to the file. In the following example, there are two image resources.

<!-- Define all your resource files here and match the resourcecount attribute
with the number of resources -->
<i_attribute resourcecount='2' />
<resource type='image' id='icon_user' url='mupe://personal.png' global='true'/>
<resource type='image' id='map' url='mupe://map.png' global='true'/>


In the code, you can use these with for example in an image (Added: Mupe->AddCodeSnippet->Widget->Image)

<image id='img' resource='map' />

Taking photos with an application

Select Mupe->AddCodeSnippet->media->take_photo to add the photo taking. The code it adds is as follows:

<image id='img'>
      <!-- this hook is called everytime an image is taken -->
      <on_new_picture>
          <i_setimage resource='snapshot' />
          <!-- You can create a new image into the server by calling the Image contructor -->
          <g_send>Image::clientCreate {$(service.username)} {new image name} {$(resources.snapshot)}</g_send>
      </on_new_picture>
   </image>


      <!-- This activates the camera. You can set either width or height or both for the resulting image.
            If only either one is set (recommended) the image will have correct aspect ratio.
            The process creates image resource with id 'snapshot', and calls the method 'new_picture' of the object 'img'. -->
      <g_getsnapshot id='img' resource='snapshot' accept='on_new_picture' width='150' />



 The image is a container for the image that is taken. It contains a hook that is called when the photo is succesfully taken. The hook replaces the image resouce with the new photo, and calls the Image constructor on server and sends the data.

The  g_getsnapshot activates the camera. It also specifies the id that is called, the hook and the width of the image that is taken.If height is not specified, the camera assumes a 4:3 aspect ratio.