svt:Timer - for a gallery of changing pictures

Tests for viewhelpers of SVT including timer

The following plugin shows that a timer can also be set every minute. At the same time, the example shows how SVG can be flexibly used to display charts. The required arithmetic operations in the view for a dynamic rendering is done by the viewhelper <svt: calculate>.

Since the reference to the SVT file has been extended by a timer function, you can also use custom templates to show and hide images at different times. Good technology for timely marketing campaigns and website appearances. You can quickly convert all important content elements, if your website is programmed in TYPO 8.7.

Prepare the test-plugin of 'svt' for testing

  1. Define a sysfolder for timer-definitions.
  2. Define a timer-definition with the periodic structure:
    • active period for one minute
    • passive period for one minute
    • passive period for one minute
  3. Define a timer-definition with the periodic structure:
    • passive period for one minute
    • active period for one minute
    • passive period for one minute
  4. Open the content-element for this plugin.
    (If you read this in the frontend, you have already done this.)
  5. Add at lest two svg-file as alternative partials to this plugin:
    • Remark the first svg-file with the first timer-definition.
    • Remark the second svg-file with the second timer-definition.
    If you have installed this extension, you will find two sub-tables in the /fileadmin /svt/Diagramms folder. Otherwise, you must first make available the svg files / partials from typo3conf /ext/svt/initialization/files/diagrams/ in your TYPO3-FAL.
  6. Reload every minute the page, which contains this plugin, and see how it works.

Generate CSS and JS dynamically with TYPO3

Generate dynamically CSS/stylesheets

german flag could change temporay (typoscript-time-condition)

CSS classes for flag requested by extension and dynamically generated by TYPO3

Staticly inluded javascript, which is dynamically generated by TYPO3

Open the console of your browser. You should find two messages: one from the static file and one from the dynamically generated stream.

calculation result expected checked
2 ↑ -3 ↓ 5 ↑ 333 ok
2 ↑ (-3 ↓ 5) ↑ 3 33 ok
30 *sin(30°) +14 2929 ok
round(30 *sin(30°) +14) 2929 ok
abs(3*5+6*-4+3^2-1)11 ok

Test the svg-charts

You have to define an periodic timer in an separate folder.The timer should take three minutes. Add to this plugin a chart of the folder 'fileadmin/svt/Diagramms' as 'alternative partial' and combine it with your 'three-minute-timer'.

List of data for a bar-chart

This is the default partial. It shows a table (uid, value, color}. There is no active alternative partial.
uid value Farbe

Chart-partial will override list-partial

New path overrides object

If you have defined at least one partial to override, this partial will everytime overide the default partial defined by the plugin.
Heinz: 37Michael: -217585Laurin: -4353Klaus: -148354

Override with path defined by string

Template with diagramm override periodicly template with text

Timer used in if-codition

This part will use the viewhelper <svt:timerActive>. The viewhelper generate a '1', if the timer is active. You can switch betweee two alternative templates (partials) in this example.
Heinz: 37Michael: -217585Laurin: -4353Klaus: -148354

Selection of Partial from list by timer

The viewhelper select the first hit as alternative partial from a objectstorage. The objectstorage may contain a list of alternative partials. You can use this viewhelper, to use different alternative partials with overlapping timeframes without conflicts.
Heinz: 37Michael: -217585Laurin: -4353Klaus: -148354

Switch between different teaser by timer

Use SVG in HTML to allow different teaser-forms. If your developer define and allows it, you may override an existing partials with your uploaded partial. The current test situation is simpler. The timer only switch between two SVG-partials. The table show your used informations, which are similiar in both cases.
Your donation supports the dynamic creative internet.56,-£GREATMy gift for you

Informations used for the teaser
Path of Image Short Sentence Price Pimp Word Slogan
/typo3temp/assets/_processed_/3/c/csm_FarbeImLeben_56611a851b.jpgYour donation supports the dynamic creative internet.56,-£GREATMy gift for you

Don't forget

After his testing the editor may forget to replace the test date to a historical date. Activate the scheduler of 'svt', which then automatically resets the test date in the database.