From bab-tec.de wiki

Jump to: navigation, search



optimal resolutions

Here you will find the optimum resolution for different visualisation devices


Full screen viwe, started from the home screen (no address bar)

1024x748 (with retina display)
1021*746 (without retina display)

Web Container

The web container can display contents from other webpages inside the ajax visualisation. Simply create a new web container in the editor and copy the code from the boxes below into the configuration field for HTML Code.

Radar forecast

<img style="position: absolute; top: 0px; left: 0px;" width="194" height="215" src="http://www.wetter.info/imgs/radarani194_back.jpg" alt="">
<img style="position: absolute; top: 0px; left: 0px;" width="194" height="215" src="http://data.wetter.info/data/teaser/radar_de.gif" alt="">
<img style="position: absolute; top: 0px; left: 0px;" width="194" height="215" src="http://www.wetter.info/imgs/teaserdeutschland_borders.gif">

Wetter.info Widget

The weather for dortmund (generated on weather.info):

<!-- von wetter.info generierter Code //-->
<div class="wetterinfo" style="background-color:#FFFFFF;">
<link href="http://wiga.t-online.de/wetter/webgadget/css/wetterboxen.css" rel="stylesheet" type="text/css" />
<div id="BigCity" class="Day"><a href="http://www.wetter.info/wetter-deutschland/nordrhein-westfalen/wetter-dortmund/17756040" target="_blank">Wetter Dortmund</a></div>
<div id="wetterinfo_data">
<script language="javascript" src="http://wiga.t-online.de/wetter/webgadget/getWetterinfoTemplate.php?uni=K05913000&sView=Big&Region=Germany&sFormat=HTML&sSearch=false&Box=1"></script>
<div class="BigWetterLogo"><a target="_blank" href="http://www.wetter.info"><img alt="Wetter" title="Wetter" height="18px" width="94px" id="wetterLogoBild" src="http://wiga.t-online.de/wetter/webgadget/images/wetter_info.gif"/></a></div>
<!-- von wetter.info generierter Code Ende//-->

Creating Flip Pages

under construction !


Scaling the Slider (Version 0.11.8)

Slider scaled.png

From version 0.11.8 and later the slider can be scaled to fit in a user defined layout and to have a better control for setting the value. 

The theme image (160 pixel high / width) gets separated by 60-40-60 pixel. The 40 pixel part will be scaled, so if you want to create a theme, this part should not contain text or non-scaleable information.

Ajax Visualisation

The ajax visualisation has been developed for internet tablets like Apple iPad, Samsung Galaxy Tab etc.. It can also be used on android phones or iPhone.

You can also use the ajax visualisation with your desktop browser (Firefox, Google Chrome, Safari etc.).

Open visualisation without beeing asked for username / password

If you don't want to fill in username and password everytime you open the ajax visualisation, log in once, select the project (if you have more than one) and set a bookmark to the opened visualisation.

Visualisation as "application" (Application Shortcut)

One way to have a very short visualisation startup time is to set an Application Shortcut (only available for the browser Google Chrome). Just open the ajax visualisation and select "Options" => "Tools" => "Create Application Shortcut...". You get a desktop icon which you can place in your quickstart area of your task bar.

Another benefit of this feature is that the visualisation will be displayed without address line like a real application.

Slow Flip-Pages on Apple devices

The default mechanism for moving the flip-pages is absolute positioning. This works fine on most devices because of hardware accelleration.

On the iPad, the moving of flip pages works very slow (about ~2 frames per second). The absolute positioning is not hardware accellerated. In version 0.11.8 we integrated a new type of animation which makes use of 3d animations of CSS3. This is the only possibility to get hardware accelleration on iPads.

If you start the ajax visualisation in version 0.11.8 or later you will be asked if the flip pages should use the default positioning or CSS3 animations. You can change this setting with the icon in the lower right corner, which is displayed for 10 seconds after the startup of the visualisation.

HIC Visualisation

You can add an icon for the HIC on the homescreen of your iPhone. Start safari and type in http://IPeibPort/web/hic. After starting the visualisation use "add to home screen". An icon will be placed. Whren you touch this icon HIC will start immediately in full screen modus.

Personal tools