Материал из for iRidium developers
Перейти к: навигация, поиск
Эта страница является переводом страницы Editor Tools. Перевод выполнен на 39%.

Other languages:
English • ‎Nederlands • ‎русский

Содержание

iRidium Studio

De eerste stappen voor het maken van je visualisatie-project met iRidium mobile.

Voor een actueel overzicht van de beschikbare trainingen kijk je op:
Trainingen

Elk iRidium project bestaat uit een grafisch gedeelte (pagina's, popup pagina's, knoppen afbeeldingen, animaties, video-beelden etc) en het technische gedeelte (commando's, feedbacks, Javascript op basis van deze JavaScript handleiding). Al deze onderdelen communiceren continue, en gezamenlijk bepalen zij de werking van je project. Je start altijd met het grafische gedeelte bij het maken van een project in iRidium mobile.

Je kunt op een aantal maniere starten met het maken van projecten in de iRidium Studio editor:

  1. Als eerste mogelijkheid kun je een kant-en-klaar project downloaden in de "Downloads" sectie op onze website. Hiermee bespaar je veel tijd, en je hoeft niet een project vanaf scratch te maken.
  2. De tweede optie is een compleet grafisch project aan te schaffen in het koopgedeelte van onze website (alleen toegankelijk voor geregistreerde system-integrators). Hiervoor dien je de z.g. Full registration procedure te doorlopen op de website in het Mijn Account gedeelte.
  3. De laatste optie is om een compleet eigen ontwerp te maken, met eigen kleuren, logo's etc.


Je eerste iRidium project

Na het starten van de iRidium Studio is de eerste stap een nieuw project te maken of een bestaand project te openen. Een nieuw project kun je maken met behulp van de menu-keuze File > New Project (afbeelding 1), de knop op de werkbalk (afbeelding 2) of via de toetscombinatie Control-N (afbeelding 3)

Editor window menu new project.png


Na deze stap, krijg je het volgende dialoogscherm te zien:

Editor window new project.png

Bestand > Nieuw > Nieuw project bedieningstoestel

  • Projectnaam - de naam van het project
  • Bedieningstoestel - het type bedieningstoestel waarop je project zal gaan draaien (dit bepaald de resolutie van het project). Selecteer "Aangepast" om zelf de resolutie te bepalen *Landscape Breedte / Landscape Hoogte - de resolutie van de horizontale pagina in het aantal pixels
  • Paginanaam - de naam van de eerste pagina in het nieuwe project
  • Oriëntatie - de oriëntatie van de startpagina (Portrait/Landscape)


Na het maken van je project zie je dit scherm met alle instellingen:


Klik op de naam van de eerste pagina in je project om te beginnen met het tekenen van je eerste knop:

GUIfirstPage.png


Met behulp van de onderstaande twee functies kun je schakelen tussen het selecteren van items (knoppen, afbeeldingen, dimmers, etc) en het tekenen van nieuwe items:

Icon Select.png Select – om een grafisch item te selecteren
Icon Draw Item.png Draw Item - om een nieuw grafisch item te tekenen

Alle hulpmiddelen voor het snel ontwikkelen van je grafische project kun je vinden in het gedeelte



De structuur van je project

De verschillende onderdelen

  • Paginas - de basis van je project. Op de pagina('s) plaats je de grafische elementen (items) zoals knoppen, afbeeldingen, tekst, etc. De z.g. popup-pagina's (zie hieronder) kun je alleen tonen bovenop een pagina.
    • Je project dient ten minste één pagina te bevatten
    • Pagina's mogen horizontaal (landscape) of verticaal (portrait) zijn
    • Pagina's ondersteunen de functie om automatisch te schakelen tussen horizontale of verticale weergave. Dit werkt overigens alleen maar op bedieningstoestellen met een accelerometer. Om deze functie te kunnen gebruiken dien je 2 dezelfde pagina's te maken met een verschillende resolutie.
    • Alle pagina's in je project hebben hetzelfde formaat. Het formaat bepaal je in de project-eigenschappen.
    • Je kunt pagina's niet voorzien van animatie-effecten (zoals binnenvliegen van rechts naar links); ze mogen ook niet (gedeeltelijk) transparant zijn.
    • Je kunt altijd maar één pagina tegelijk openen (het openen van een nieuwe pagina zal tot gevolg hebben dat de vorige gesloten zal worden, inclusief eventuele aanwezige popups)
  • Popup-paginas - dit zijn stukken van een pagina in elke gewenste resolutie; hierop kun je grafische items plaatsen.
    • Het gebruik van popup-pagina's is een optie; het is dus niet verplicht
    • popup-pagina's kunnen niet horizontaal of verticaal georiënteerd zijn
    • popup-pagina's worden automatisch gesloten bij het draaien van je bedieningstoestel, maar ook bij het openen van een andere pagina
    • popup-pagina's kunnen elk formaat, transparantie en positie op de pagina hebben.
    • Je kunt net zoveel popup-pagina's op een pagina maken als je zelf wilt
  • Knoppen voor het schakelen tussen pagina's en popup-pagina's
    • je kunt voor deze functie elk willekeurig grafisch item gebruiken
    • je kunt met een knop je project besturen door het toevoegen van het "Flip" commando
    • je kunt knoppen gebruiken voor het besturen van pagina's, popup-pagina's en apparatuur.
  • Knoppen voor het besturen van apparatuur
    • je kunt hiervoor elk grafisch item gebruiken
    • de instellingen van de knop bepalen de waarde die je naar de apparatuur stuurt
    • deze knoppen kunnen pagina's besturen, maar gelijktijdig ook popup-pagina's en/of apparatuur
  • Items als onderdeel van je grafische ontwerp
    • je kunt elk grafisch item hiervoor gebruiken
    • je kunt deze items inactief maken: als de gebruiker er op drukt, zal er geen effect zichtbaar zijn


De opbouw van je grafische project

  • Projecten op basis van pagina's

Wanneer je projecten maakt op basis van alleen pagina's (dus zonder gebruik te maken van popup-pagina's) kun je gebruik maken van de automatische functie om van pagina te veranderen als je de smartphone of tablet draait. Tijdens het werken met pagina's kun je gebruik maken van het commando "Prev Page" (vorige pagina) om naar de vorige pagina te gaan.

Een nadeel van het werken met pagina's is, dat je bij navigatie-structuren (menu's) alle pagina's dient te onderhouden wanneer er een menu-item gewijzigd of toegevoegd dient te worden. Het is daarom beter om bij projecten met navigatie-structuren niet met pagina's te werken, maar met een combinatie van 1 hoofdpagina (met daarop het navigatie-menu) en losse popups die de functionaliteit van een bepaald menu tonen.

  • Projecten op basis van 1 pagina en (1 of meer) popup-pagina's

Met deze methode maak je dus 1 hoofdpagina (met b.v. links in beeld het navigatie-menu) en diverse popup-pagina's met de functionaliteit. De hoofdpagina blijft continue in beeld, terwijl de informatie in de popup-pagina's kan wisselen, afhankelijk van de gekozen functie (het gekozen menu). Je kunt ook nog extra pagina's maken. Een project met 1 hoofdpagina en een aantal popup-pagina's kun je niet draaien, omdat dit niet mogelijk is bij popup-pagina's.



Grafische items

Grafische items zijn alle objecten die zich binnen een iRidium project op een pagina of popup-pagina bevinden. Dit kunnen o.a. knoppen, dimmers, iconen, achtergronden en alle overige zaken zijn die gezamenlijk je project vormen.

Als je een nieuw iRidium project gestart bent, zie je de startpagina waarna je kunt starten met het toevoegen van grafische items.



Item tekenen

Gebruik het tekengereedschap om een nieuw grafisch item te tekenen: een knop met standaard twee statussen: uit (off) en aan (on). Op basis van deze standaardknop kun je alle eigenschappen aan gaan passen:

Editor window menu draw item.png


Een nieuw item is standaard van het type 'Knop' (Button) en heeft standaard 2 statussen: uit en aan (off en on). Een dergelijke knop wijzigt de status door deze in te drukken, en weer terug door hem los te laten.


De status van grafische items

Om een status aan een item toe te voegen of te verwijderen, of te schakelen tussen statussen, klik je op het tabblad Object Properties > States:

Editor window Object Properties States.png
Icon Current State.png Current State - de geselecteerde status van het grafische item
Icon Prev State.png Prev State - ga naar de vorige status
Icon Next State.png Next State - ga naar de volgende status
Icon Add State.png Add State - voeg 1 of meer statussen toe
Icon Delete State.png Delete State - verwijder de geselecteerde status




De verschillende typen grafische items

In iRidium projecten kun je de volgende typen grafische items gebruiken:

Knop (Button) Voor het versturen van vaste waarden (commando's) en het weergeven van ontvangen data (feedback)
Dimmer (Level) Voor het versturen van een vastgestelde reeks van waarden met behulp van een slider, en voor het weergeven van de actuele waarde (feedback) op deze slider.
Toggle knop (Trigger Button) Voor het schakelen tussen 2 vaste waarden, die ingesteld worden bij het aanmaken van de knop
Op/Neer knop (Up/Down Button)
Het verhogen of verlagen van een waarde met een ingestelde stapgrootte. De onder- en bovengrens van de toegestane waarde zijn in te stellen bij de eigenschappen van de knop
Multi-state knop (Multistate Button) Het versturen van vaste waarden en het ontvangen van data (feedback), voorzien van een animatie bij het indrukken van de knop of het ontvangen van data
Multi-state dimmer (Multistate Level) Het vesturen en ontvangen van waarden in een binnen een onder- en bovengrens, waarbij elke waarde (of groep van waarden) een aparte afbeeldingen kan hebben
Invoerveld (Edit Box) Voor het invoeren van eigen tekst, die verstuurt kan worden naar de bus
Joystick Voor de besturing van RGB- of DMX-apparaten met behulp van een color picker
Lijst (Static List) Een lijst met verschillende popup-pagina's waar je doorheen kunt scrollen



Knop


De knop is een grafisch item met 1 of 2 statussen. Knoppen kunnen informatie versturen (commando's), of 'statisch' zijn (gewoon een tekst of een afbeelding om uw project mooi te maken). Bij het indrukken van een knop worden de commando's die aan de knop verbonden zijn, verzonden naar het betreffende apparaat.


1 Maak een commando aan, waar een getal of tekst naar verstuurd moet wroden. Doe dit met de instructies op deze Wiki-pagina's.

2 Maak een knop aan en configureer deze als volgt (zie ook: instellingen):

UImakeAbutton.png
Type Button
Feedback De manier waarop de knop reageert op het indrukken door de gebruiker, of het ontvangen van feedback van apparatuur
  • Momentary - de knop verstuurt waarden, maar laat geen feedback zien
  • Channel - de knop verstuurt waarden, en geeft ook de ontvangen feedback weer
  • None - de knop reageert niet op het indrukken er van, maar ook niet op het ontvangen van feedback
  • Invert Channel - de knop stuurt waarden en toont ontvangen waarden (feedback) geïnverteerd (niet waar - aan, waar - uit)

3 Drag & drop het commando naar de knop, en kies de gewenste actie uit het dialoogvenster:

UIdragCommand.png
Actie Send Number - het versturen van een getal naar het apparaat. Je kunt ook kiezen voor Send String om een tekst te versturen (ASCII tekst)
Event for Action De gebeurtenissen (events) die aan de knop gekoppeld kunnen worden. Wanneer de gebeurtenis wordt geactiveerd zal de opgegeven waarde verstuurd worden
  • Press - versturen van de waarde bij het indrukken van de knop
  • Release - versturen van de waarde bij het loslaten van de knop
  • Hold - versturen van de waarde bij het ingedrukt houden van de knop
  • Move - deze functie werkt niet bij een knop


Je kunt meerdere gebeurtenissen (events) tegelijk gebruiken. Je kunt bijvoorbeeld bij het indrukken van de knop het getal 100 versturen, en bij het loslaten het getal 0.

Value De waarde die je wilt versturen bij 1 of meerdere gebeurtenissen (events)
Add a feedback channel (Maak een feedback channel aan) Vink deze optie aan als je wilt dat iRidium automatisch een feedback aanmaakt, waarmee deze weergegeven kan worden op de knop. Dit kan een verandering van de status zijn (b.v. van uit naar aan), maar je kunt de waarde ook als getal weergeven in het tekstveld van de knop.

4 Na het bevestigen met OK, is het commando gekoppeld aan de knop. Je kunt alles gekoppelde commandos (en feedbacks) zien in het tabblad OBJECT PROPERTIES > Programming


Gebruik feedback om de waarden op een item weer te geven in cijfers :

  1. zet een variabele (die begint met $) in het tekstveld van het grafische item
  2. drag & drop de feedback naar het grafische item, en kies bij het loslaten voor de optie "In Value":


Lijst met variabelen in een tekstveld van een grafisch item

Variabele Functie Variabele Functie
$V De waarde van de feedback weergegeven als geheel getal (integer) $P De waarde van de feedback weergegeven als percentage
$F1 - 5 De waarde van de feedback met het gewenste aantal cijfers achter de komma (van 1 tot 5)
$H De hoogste waarde
$S De waarde van de huidige status $A De waarde van de feedback min de laagste waarde
$R Weergave van het verschil tussen de hoogste waarde en de laagste waarde $L Weergave van de laagste waarde
$X De waarde van de feedback in HEX $$ De weergave van het dollar-teken ($)

Je kunt het weergeven van de feedback in he tekstveld van het grafische item uiteraard combineren met andere tekst en symbolen. Voorbeeld: De huidige temperatuur is $F2° levert dit als resultaat op: De huidige temperatuur is 22,50°
(Het gradenteken ° krijg je met ALT-248)


Dimmer


De dimmer (level) kun je gebruiken voor het besturen dimmers, het instellen van volumes, temperaturen etc. Door het indrukken of bewegen van de dimmer verstuur je de geselecteerde waarde naar je apparaat (dimmer, volume-regeling).

1 Maak een commando aan (b.v. een dim-commando) wat je wilt gebruiken in de dimmer.

2 Maak een dimmer aan, en stel deze als volgt in (zie het hoofdstuk "alle instellingen"):

UImakeAlevel.png
Type Dimmer (level)
Feedback de manier waarop de dimmer zal reageren met het weergeven van de feedback (b.v. het actuele volume)
  • Channel - om waarden te versturen en feedback te ontvangen (de slider zal bewegen om de actuele waarde van de feedback weer te geven)
Min / Max De onder- en bovenwaarde van de slider: zij bepalen de range van te versturen waarden
Invert Range De range van de te sturen waarden wordt geïnverteerd (dus bijvoorbeeld niet van 0 tot 100 dimmen, maar van 100 naar 0)

3 Drag & drop het commando naar de slider, zoals weergegeven in onderstaande afbeelding. Bij het loslaten zal het dialoogkader 'Send Command' getoond worden:

UIdragCommandToLevel.png
Action Send Token - voor het versturen van de gekozen waarde op de slider, in de range die opgegeven is
Event for Action De gewenste events (gebeurtenissen) die de gekozen waarde moeten versturen
  • Press - om de gekozen waarde te versturen bij het indrukken van de slider
  • Release - om de gekozen waarde te versturen bij het loslaten van de slider
  • Move - om reeds tijdens het bewegen van de slider de waarde te versturen.
    Het is raadzaam om een Delay van 100 milliseconden toe te voegen voor het 'Move' event, om overbelasting van het busssyteem te voorkomen. Door het toevoegen van het Delay-commando zal het commando 'Move' 1 keer per 100ms werken.



Je kunt deze events ook allemaal tegelijk gebruiken.

Add a feedback channel (Automatisch een feedback aanmaken) - Hiermee wordt automatisch een feedback aangemaakt, waarmee de slider altijd de acutele waarde (b.v. lichtsterkte, volume, temperatuur) zal weergeven.

4 Het commando (en eventuele feedback) is nu gekoppeld aan de slider. Alle gekoppelde commando's en feedbacks kun je altijd zien in het tabblad OBJECT PROPERTIES > Programming


Gebruik feedback om de waarden op een item weer te geven in getallen :

  1. zet een variabele (die begint met een $) in het tekstveld van het grafische item
  2. drag & drop de feedback naar het grafische item, en kies bij het loslaten voor de optie "In Value":


Lijst met variabelen in een tekstveld van een grafisch item

Variabele Functie Variabele Functie
$V De waarde van de feedback weergegeven als geheel getal (integer) $P De waarde van de feedback weergegeven als percentage
$F1 - 5 De waarde van de feedback met het gewenste aantal cijfers achter de komma (van 1 tot 5)
$H De hoogste waarde
$S De waarde van de huidige status $A De waarde van de feedback min de laagste waarde
$R Weergave van het verschil tussen de hoogste waarde en de laagste waarde $L Weergave van de laagste waarde
$X De waarde van de feedback in HEX $$ De weergave van het dollar-teken ($)

Je kunt het weergeven van de feedback in he tekstveld van het grafische item uiteraard combineren met andere tekst en symbolen. Voorbeeld: De huidige temperatuur is $F2° levert dit als resultaat op: De huidige temperatuur is 22,50°
(Het gradenteken ° krijg je met ALT-248)



Multistate knop


Met een multi-state knop kun je (net zoals een gewone knop) commando's versturen. Alleen zal tijdens het indrukken van de knop een animatie getoond worden, bestaande uit de afzonderlijke afbeeldingen die gekoppeld zijn aan individuele statussen van de knop. Elke 'status' van de ingedrukte knop geeft dus een aparte afbeelding weer, deze worden achter elkaar afgespeeld als een kleine animatie. Deze animatie kan ook afgespeeld worden door het ontvangen van feedbacks op de multi-state knop.


1 Maak een nieuw commando aan waarmee een getal of tekst verstuurd moet worden.

2 Maak een nieuw item aan van het type 'Multistate button', en maak hier het gewenste aantal statussen in aan. Koppel aan elke status een andere afbeelding. Je kunt uiteraard ook aan elke status afzonderlijke teksten toevoegen, of randen (borders), etc. Kijk ook (hier voor alle instellingen):

UImakeAnMSbutton.png
Type Multistate knop
Feedback de manier waarop de knop zal reageren op het indrukken ervan of het ontvangen van feedback van apparatuur
  • Momentary – de animatie zal starten als de knop ingedrukt wordt. Als je de knop weer loslaat, zal de animatie in omgekeerde volgorde afgespeeld worden. Repeat: True - de animatie zal niet stoppen totdat de knop zal worden losgelaten.
  • On – de animatie zal starten zodra het iRidium project wordt gestart. Repeat: True - de animatie zal gedurende het werken met het project doorgaan (eindeloze loop)
  • Blink / Channel – de animatie wordt afgespeeld wanneer er een getal (niet zijnde 0) wordt ontvangen van de apparatuur. Repeat: True - de animatie zal niet stoppen, totdat een nul (0) wordt ontvangen van de apparatuur
Time Up / Time Down (in tienden van seconden) de snelheid van het afspelen van de animatie van het eerste frame tot het laatste frame en terug
Repeat eindeloos doorgaan met de animatie zolang het actief is

3 Drag & drop het commando naar de knop, zoals in onderstaand voorbeeld:

UIdragCommand.png
Action Send Number - voor het versturen van getallen met het commando. Je kunt ook kiezen voor 'Send String' om tekst te versturen.
Event for Action Kies het gewenste event (gebeurtenis) waarmee de waarde verstuurd moet worden
  • Press - de waarde wordt verstuurd bij het indrukken van de knop
  • Release - de waarde wordt verstuurd wordt bij het loslaten van de knop
  • Hold - de waarde wordt verstuurd bij het ingedrukt houden van de knop



Je kunt verschillende events tegelijk gebruiken. Bijvoorbeeld het getal 100 versturen bij het indrukken en het getal 0 bij het loslaten van de knop.

Value De waarde die je wilt versturen met het commando. De knop zal altijd de waarde die je hier opgeeft versturen.
Add a feedback channel (Automatisch een feedback aanmaken) Vink deze optie aan om automatisch een feedback aan te maken, zodat de status van de knop gewijzigd wordt als er feedback wordt ontvangen van je apparatuur. Ook zal de animatie afgespeeld worden bij het ontvangen van de feedback.

4 Het commando (en eventuele feedbacks) is nu gekoppeld aan de knop. Je kunt alle commando's en feedbacks altijd raadplegen in het tabblad OBJECT PROPERTIES > Programming



Multistate dimmer


De multistate dimmer is een dimmer (slider) met meer dan 2 statussen. Door te drukken op de dimmer, wordt de waarde verstuurd van de ingedrukte positie. Maar is geen 'slider' aanwezig (het balkje dat je normaal verschuift). In plaats daarvan toont de dimmer één van de statussen (afbeeldingen) die corresponderen met de geselecteerde (of ontvangen) waarde. Elke status (state) van een multistate dimmer kan worden voorzien van een eigen afbeeldingen, tekst, kleur etc.


1 Maak een nieuw commando aan waarmee een getal of tekst verstuurd moet worden.

2 Maak een nieuw item aan van het type 'Multistate dimmer', en maak hier het gewenste aantal statussen in aan. Koppel aan elke status een andere afbeelding. Je kunt uiteraard ook aan elke status afzonderlijke teksten toevoegen, of randen (borders), etc. Kijk ook (hier voor alle instellingen):

Editor examples of Multistate Level 1.png
Type Multistate dimmer
Feedback het reageren van de dimmer op het indrukken door de gebruiker of het ontvangen van data (feedback) van apparatuur
  • Momentary - de statussen van de dimmer wijzigen alleen door het indrukken
  • Channel - de statussen wijzigen door het indrukken, maar ook door het ontvangen van feedback van apparatuur
Min / Max de onder- en bovengrens (range) waarin de dimmer werkt
Invert Range de dimmer werkt geïnverteerd (omgekeerd): niet van 0 naar 100, maar van 100 naar 0

3 Drag & drop het commando naar de dimmer. Het volgende dialoogkader verschijnt::

UIdragCommandToLevel.png
Action Send Token - verstuurt de actuele waarde naar de bus, in de opgegeven range (min/max)
Event for Action Kies hier het gewenste 'event' (of meerdere events) die u wilt koppelen aan de knop. Door het activeren van een event wordt de gekozen waarde verstuurd naar de bus
  • Press - de waarde wordt verstuurd bij het indrukken van de knop
  • Release - de waarde wordt verstuurd wordt bij het loslaten van de knop
  • Move -de waarde wordt verstuurd bij het ingedrukt houden van de knop.
    Het is raadzaam om een Delay van 100 milliseconden toe te voegen voor het 'Move' event, om overbelasting van het busssyteem te voorkomen. Door het toevoegen van het Delay-commando zal het commando 'Move' 1 keer per 100ms werken



Je kunt verschillende events tegelijk gebruiken. Bijvoorbeeld het volume van een versterker verhogen met 5dB bij het indrukken en met 10dB bij het ingedrukt houden van de knop.

Add a feedback channel (Automatisch een feedback aanmaken) - Hiermee wordt automatisch een feedback aangemaakt, waarmee de slider altijd de acutele waarde (b.v. lichtsterkte, volume, temperatuur) zal weergeven

4 Het commando (en eventuele feedback) is nu gekoppeld aan de slider. Alle gekoppelde commando's en feedbacks kun je altijd zien in het tabblad OBJECT PROPERTIES > Programming



Dynamische lijst


Algemeen.
De dynamische lijst is een bijzonder grafisch item dat rechtstreeks met apparatuur communiceert.
De naam zegt het al: het is een lijst met 'dynamische' (wisselende) informatie, in tegenstelling tot de statische lijst (zie verderop).
Dynamische lijsten zijn bijzonder krachtig: alle content met dynamische inhoud kun je weergeven in zelf vormgegeven lijsten. De keerzijde van het gebruik van dynamische lijsten is echter, dat er kennis van Javascript nodig om is om de lijsten goed te kunnen vullen met inhoud.
Wil je bijvoorbeeld covert-art (albumhoesjes) weergeven van af te spelen DVD- of BluRay-films, dan dien je niet alleen die cover-art (de daadwerkelijke afbeeldingen) van een server af te halen (b.v. een media-player), maar ook op te slaan in een array.
De dynamische lijst is gemaakt om een reeks van items (knoppen), die gebaseerd is op templates, weer te geven. Op elke knop kun je bepaalde (dynamische) tekst weergeven, maar ook dynamische afbeeldingen. Met het indrukken van zo'n knop selecteer je dan de gewenste keuze. Dat kan een bepaald muzieknummer zijn, of een bepaalde artiest, of een bepaalde ruimte, etc. De inhoud van de dynamische lijst dien je te vullen met iRidium Script; kijk daarvoor op de iRidium List API.

Zoals gezegd, kun je de dynamische lijst gebruiken om bijvoorbeeld een lijst te maken van muzieknummers, films en mappen, afkomstig uit een externe bron.


1 Maak met behulp van JavaScript een set gegevens aan waarmee de dynamisch lijst wordt opgebouwd (bijvoorbeeld een lijst met artiesten of tekstschrijvers). Gebruik de List API om de lijst te vullen.

2 Maak de dynamische lijst aan met behulp van de volgende parameters (zie ook (alle instellingen)):

Editor examples of List.png
Type Dynamische lijst
Feedback heeft effect op de lijst, maar niet op de items daarin. Wordt niet gebruikt.
List Template de popup die je gebruikt om de dynamische lijst samen te stellen
List Items de lijst-items die standaard gebruikt worden (op basis van het template). Je kunt een willekeurig aantal items toevoegen en verschillende teksten daarvoor gebruiken. De commando's stel je samen met behulp van de List API
Resistance de mate van 'weerstand' van de lijst
Scroll Bar om de scroll bar wel of niet te tonen

3 Gebruik de dynamische lijst API om items te koppelen aan de gebruikte apparatuur.



Op/neer knop


Algemeen.
De op/neer knop heeft altijd 2 onderdelen: een op (of +) en een neer (of -) knop. Samen zorgen ze ervoor, dat -met een bepaalde stapgrootte- een waarde naar de bus gestuurd wordt, maar altijd binnen een range, die je zelf kunt bepalen met de parameter Min/Max value. De waarde die gestuurd wordt, is een berekende waarde: het is de actuele waarde (die als feedback van de bus verkregen is) + de van te voren ingestelde stapgrootte. Je hebt dus altijd de feedback van de bus nodig om met een op/neer-knop te kunnen werken.

Hieronder de stappen om een op/neer-knop te kunnen maken:


1 Maak een commando aan, waarvan de waarde verhoogd/verlaagd kan worden. Zie de betreffende documentatie op deze site hoe dit te doen.

2 Maak een level (dimmer) en twee knoppen (de + en de - knop) en stel deze met de volgende parameters in (kijk ook bij alle instellingen):

Editor window Object Properties General Up Down.png
Type Op/Neer Button
Feedback Het effect van het klikken op de + en - knoppen wordt weergegeven in het level: daarop komt de feedback binnen.
  • Momentary - er kan alleen op de + en - knoppen gedrukt worden, er is verder geen visuele verandering van de status.
Up/Down Value de gewenste stapgrootte voor het verhogen/verlagen (de stapgrootte kan zowel een positief- als negatief getal zijn)
Min/Max Value de onder- en bovengrens die maximaal ingesteld kunnen worden
Hold Value de stapgrootte die gehanteerd moet worden indien het 'On Hold' event wordt geactiveerd. Hiermee kun je bereiken dat kort of lang indrukken van de knop resulteert in andere waarden die naar de bus gestuurd worden.
Hold Time de tijd (in milliseconden) voordat het 'On Hold' event actief wordt
Repeat Time de frequentie waarmee de 'On Hold' events herhaald worden

3 Drag & drop de commando's naar de knoppen zoals aangegeven in de onderstaande afbeelding:

Editor drag to UDB.png
Action Send Token - verstuur de berekende waarde (bestaande uit de som van de huidige waarden + de stapgrootte)
Event for Action Het gewenste event wat aan de knop gekoppeld is, en waarmee de waarde verstuurd moet worden:
  • Press - de waarde wordt verstuurd bij het indrukken van de knop
  • Hold - de waarde wordt verstuurd bij het ingedrukt houden van de knop


Je kunt verschillende events tegelijk gebruiken. Bijvoorbeeld het volume van de versterker met 5dB ophogen bij het indrukken van de knop, en met 10dB bij het ingedrukt houden van de knop.

Add a feedback channel (Automatisch een feedback aanmaken) Vink deze optie aan om automatisch een feedback aan te maken, zodat de status van de knop gewijzigd wordt als er feedback wordt ontvangen van je apparatuur.

4 Het commando (en de feedback) is nu gekoppeld aan de knoppen + slider. Alle gekoppelde commando's en feedbacks kun je altijd zien in het tabblad OBJECT PROPERTIES > Programming



Toggle knop


Algemeen. Met de toggle-knop (vaak binnen iRidium Trigger-Button genoemd, wat eigenlijk niet de juiste benaming is) kun je twee vaste waarden sturen, die je vastlegt in respectievelijk Trigger Value 1 en Trigger Value 2. Als er feedback op de knop ontvangen wordt, zal deze automatisch van status veranderen, en de tegenovergestelde waarde versturen bij het indrukken van de knop.

Voorbeeld: als de knop een feedback van een schakelaar ontvangt dat de lamp aan staat, zal automatisch status 2 (aan) getoond worden. Wanneer de toggle-knop dan ingedrukt wordt, zal de waarde 'uit' gestuurd worden, en ook de status 1 weer getoond worden.
De toggle-knop kan slechts 2 statussen bevatten; 3 of meer statussen is niet mogelijk.

Hieronder de stappen om een toggle-knop te maken:


1 Maak een commando aan, wat kan schakelen tussen 2 waarden: aan/uit, omhoog/omlaag, naar boven/beneden. Zie de betreffende documentatie op deze site hoe je dit doet.

2 Maak een knop aan en stel deze met de volgende parameters in (kijk ook bij alle instellingen):

UImakeAtriggerButton.png
Type Toggle knop
Feedback Zoals het indrukken van de knop als het ontvangen van feedback is zichtbaar
  • Channel - stuurt de andere waarde en toont de feedback (andere typen feedback worden niet gebruikt)
Trigger Value 1 / Trigger Value 2 de waarden die je wilt versturen met de Toggle-knop.

3 Drag & drop het commando naar de toggle-knop, en kies in het dialoogscherm de juiste instellingen:

UIdragCommandToTrigger.png
Action Send Token - stuur (afhankelijk van de huidige status) de waarde van 'Trigger Value 1' of 'Trigger Value 2' naar de bus
Event for Action Het betreffende event dat gebruikt wordt voor het versturen van waarden
  • Press - de waarde wordt verstuurd bij het indrukken van de knop
  • Release - de waarde wordt verstuurd bij het loslaten van de knop



Bij de Toggle-knop kun je altijd maar 1 event tegelijk gebruiken

Add a feedback channel (Automatisch een feedback aanmaken) Vink deze optie aan om automatisch een feedback aan te maken, zodat de status van de knop gewijzigd wordt als er feedback wordt ontvangen van je apparatuur.

4 Now the variable is connected to the trigger. You can see all relations in OBJECT PROPERTIES > Programming



Radio Buttons


Radio Button - an interface item which allows to select one of the preset options. In iRidium Radio Buttons are not separated as an item type as they can be set up on the basis of Trigger Button. The task of Radio Buttons: to send to the variables values from different buttons from which you can select only one.

Settings and behavior of Radio Button depend on the variable you work with. You can find several examples below.


Variant 1 Radio Buttons for controlling one variable with the possibility to receive feedback. Values are written in one variable: equipment returns the current state of this variable.

  1. Set up the Trigger Button items (see the image) in a number equal to the number of Radio Buttons. In the fieldsTrigger Value 1 and 2 indicate the same values corresponding to those which have to be sent to the controlled variable by each button
  2. Drag the command for controlling the variable on all Radio Buttons. Select the Press or Release events for sending, tick Add A Feedback Channel to display the variable status


RadioButtons-MainSettings.png
RadioButtons-DragCommand.png

the set up button will go to State 2 only when the variable takes the value indicated in Trigger Value 1 and 2


Variant 2 Radio Buttons for controlling variables with possibility to receive feedback. ON/OFF values are written in different variables; equipment returns the current state of these variables. The variables are not synchronized by automation equipment for working in the Radio Buttons mode (inactive modes on the side of iRidium have to be off)

  1. Set up the items Type: Trigger Button, Feedback: Channel, indicate Trigger Value 1 = inactive, Trigger Value 2 = the variable active state (for example 0/1, 0/100)
  2. Drag the commands for controlling the variables on graphic items. By the example of the first item of the group:
    1. Send zeros to all variables in the Radion Buttons group to deactivate the current active mode. In order to do that select Action: Send Number in the dialog window for command sending
    2. Add Delay(50) ms through the macros editor of the Press event to give equipment time to deactivate the active mode
    3. Drag the command for controlling the variable corresponding to Radio Button on the item. Leave Action: Send Token. Value on the Press (or Release) event, tick Add a Feedback Channel


RadioButtons-MainSettings-Septd.png
RadioButtons-DragCommand-Septd.png

If the equipment working modes are synchronized on the automation equipment side (when activating one of the modes the rest are automatically deactivated) you do not need to send zeros to the deactivated variables. Execute only article 2.3 of the settings.



Edit Box


It is an item for inputting data from keyboards. The input data are assigned to an item from where they can be "taken" - sent to equipment or processed in the script.


1 Создайте элемент, настройте его следующим образом (cм. все настройки):

Editor window Object Properties Programming EditBoxSetup.png
Type Tekst invoerveld
Feedback Het gedrag van de knop wanneer deze ingedrukt wordt
  • Momentary - het tekstinvoerveld is geselecteerd wanner de muis erop komt te staan

2 Поле ввода можно связать с переменной напрямую или через скрипт

Editor window Object Properties Programming Edit Box show.png

При нажатии на поле ввода, выполните команду открытия клавиатуры:

  • Object Properties > Programming > Press > «Show Keyboard [keyboard_type]»


По событию Enter, передайте данные из Editbox элементу или драйверу.


Пример работы:

  • Press - открывается виртуальная клавиатура смартфона (планшета)
  • Enter - поле ввода отправляет текст как команду драйверу; закрывает клавиатуру; очищает поле ввода.


Чтобы удалить ранее введенные данные, запишите в поле ввода пустую строку:

Editor window Object Properties Programming Edit Box hide.png
Editor window Object Properties Programming Edit Box Clean.png



Virtual Key


It is an item for creating user keyboards. You can create a keyboard of any type and configuration in your iRidium project.


1 Create an item and set it up as follows (see all settings):

Editor window Object Properties General Virlual Key.png
Type Virtual key
Feedback Reaction on pressings
  • Momentary - for keys responsible for input of separate symbols
  • Channel - for keys which there is a possibility to change registers



To switch the layout use the project variables which stores the number - the current key state. Assign the variable using “In Value” to change the register.

Key Action Key event
  • Insert Text – input of the symbol indicated in the text field of the key. Write one letter or figure in the text field and it will be sent by the key
  • Enter, Up, Down, Left, … – commands of the Windows OS keyboard


The virtual key sends the value in the active input field (Edit Box). If you did not create Edit Box the value will not be written anywhere.



Joystick


It is a graphic item with 1 state. It has X and Y coordinates - the current position of the Joystick cursor. The range for moving the cursor is limited by the minimum and maximum values. It is also possible to receive the color under the cursor for RGB control.


1 Create an item and set it up as follows (see all settings):

Editor window Object Properties General Joystick.png
Type Joystick
Feedback the reaction on events
  • Momentary – the cursor is moved by the user
MinX ... MaxX / MinY ... MaxY the range for moving by the X and Y coordinates
InvertX / InvertY the minimum and maximum values by the X and Y coordinates swap locations

2 Joystick can be related to the variable directly or via scripts. Usually the script for receiving the color under the cursor and sending the color components to the RGB strip control channels is used



Color Picker



RGB LED strips are controlled with the help of DMX controllers and have one of the following configuration:

  • Red, Green, Blue - three channels for controlling the LED strip color. Decrease of brightness is performed by decreasing brightness of separate channels.
  • Red, Green, Blue, Alpha - four channels for controlling the LED strip color and brightness


Variant 1 Control RGB strips with the help of three (four) Level items.


You create 3 (4) Unsigned 8-bit (Subtupe: VALUE) variables in the project. The variables are controlled in the range 0...255, value increase in the channel corresponds to the increase brightness of the respective color.

LEVEL

Pressing on the level or moving of the slider sends to the variable the value corresponding to the current slider position.

1 Create a variable which has to be regulated. Set it up as it is shown in the instructions.

2 Create a level and set it up as follows (see all settings):

UImakeAlevel.png
Type Level
Feedback the level reaction on user's pressings and receiving data from equipment
  • Channel - to send values and display feedback (the slider moves when receiving data)
Min / Max the limits of level regulation: they define the value range in which the slider moves
Invert Range to swap the top and bottom level parts. i.e. the regulation from 0 to 100 will be performed not from the bottom upwards (when the level is vertical) but from top downwards.

3 Drag the variable to the level, indicate in the dialog window:

UIdragCommandToLevel.png
Action Send Token - to send to the variable Value, taken as the current slider position in the Min...Max range
Event for Action the event interface connected to the button. When the event is activated the indicated value will be written in the variable
  • Press - to send Value on pressings
  • Release - to send Value on releasing
  • Move - to send all intermediate Values when moving the slider.
    add Delay (100) before commands for the Move event to avoid overload of equipment (with the Delay command Move will work once in 100 ms)



You can use all three events together.

Add a feedback channel (Create a feedback channel) Tick it for the slider to move in accordance with the actual variable state

4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming


Variant 2 Control of RGB strips with the help of palette


You can use any colored item as a palette - you will be able to send commands of setting up the selected color to equipment by moving a finger on the item.

It requires adding a special script - RGB libraries - in your project. The script has to be added only once. Then you will be able to use it to control RGB strips of any built-in iRidium drivers.

2.1 Create a palette and auxiliary items. You can use any colored image as a palette.

  • Set up the palette like Joystick with the range 0...100 for Х and Y coordinates
  • Set up an inactive item Button which will display the color selected on the palette
  • If it is required set up active Button items which will change the strip brightness step-by-step
RGBPalette.png

2.2 Download the file RGB_Library.js

This file enables color control with the help of JavaScript. Add the file in your visualization project: open the project in iRidium Studio, click Icon Scripts.png, select the item ( + ) "Add Script From File"

2.3 Create an empty script file: ( + ) "New Script" to add the description of your RGB palette in it:

Describe the palette and the item for displaying the selected color in the script file:
///////// Copy this function to make one more RGB palette ///////
RGB_player(
         "Driver",                                            // Driver in project
         "Channel Red",                                       // Name of Red Channel
         "Channel Green",                                     // Name of Green Channel 
         "Channel Blue",                                      // Name of Blue Channel
         255,                                                 // Top limit for RGB channel (100 or 255)
         IR.GetItem("Page 1").GetItem("Item Color Picker 1"), // Item "Color Picker"
         /////// optional parameters ///////////////////////////
         IR.GetItem("Page 1").GetItem("Item Display 1"),      // Item "Display"
         )

The extended version has buttons for controlling brightness:

Palette, displaying the color and the button +/- for controlling brightness

///////// Copy this function to make one more RGB palette ///////
RGB_player(
         "Driver",                                            // Driver in project
         "Channel Red",                                       // Name of Red Channel
         "Channel Green",                                     // Name of Green Channel 
         "Channel Blue",                                      // Name of Blue Channel
         255,                                                 // Top limit for RGB channel (100 or 255)
         IR.GetItem("Page 1").GetItem("Item Color Picker 1"), // Item "Color Picker"
         /////// optional parameters ////////////////////////////
         IR.GetItem("Page 1").GetItem("Item Display 1"),      // Item "Display"
         IR.GetItem("Page 1").GetItem("Up 1"),                // Item "Up"
         IR.GetItem("Page 1").GetItem("Down 1"),              // Item "Down"
         10                                                   // Increment step for "Up" and "Down"
         )


In the description indicate where the palette is and to what equipment it sends data:

  • IR.GetDevice("Driver") - the name of the diver to which you will send RGB commands. Copy the driver name in PROJECT DEVICE PANEL
  • "Channel Red", "Channel Green", "Channel Blue" - the names of the variables (Commands) which are responsible for control of red, green and blue color components. Copy the names in PROJECT DEVICE PANEL. The Commands names have to be the same as the names of Feedbacks from where information about the current color of the RGB strip comes.
    HDL-Buspro, Domintell - they have a special way of writing names. For them you need to indicate <the device name in the network>:<the channel name>, for example "Dimmer in Bedroom:Channel 1"
  • 255 - the maximum brightness value for each color. For the majority of equipment brightness is regulated in the range from 0 to 255 but there are drivers which control color brightness in the range 0...100 (for example, HDL). For HDL-Buspro indicate value 100 for this property.
  • IR.GetItem("Page 1").GetItem("Item Color Picker 1") - the page name ("Page 1") and the item on it ("Item Color Picker 1") which you will use as a palette
  • IR.GetItem("Page 1").GetItem("Item Display 1") - the page name ("Page 1") and the item on it ("Item Display 1") which you will use for displaying the color selected on the palette
  • IR.GetItem("Page 1").GetItem("Up 1") - the page name ("Page 1") and the item on it ("Up 1") which will increase brightness of the selected color on pressing
  • IR.GetItem("Page 1").GetItem("Down 1") - the page name ("Page 1") and the item on it ("Down 1") which will decrease brightness of the selected color on pressing
  • 10 - the value on which brightness of the selected color will increase/decrease when clicking Up and Down


2.3 Click "OK" to save the palette description. Start Emulator to test its work.

Errors which can appear at incorrect palette description are displayed in the log window (F4)


Static List (List of Popups)


It is a graphic item inside which you can scroll popups. it is used for creating menus controlled with the help of gestures.

1 Create an item and set it up as follows (see all settings):

Editor window Object Properties General Static list.png
Type Joystick
Popups List the list of popups: open the settings window and select the popups to be displayed on the list
Direction the vertical or horizontal list
Resistance (%) the degree of list resistance
Pull Up Type / Time the type of animation at list scrolling / (ms) the speed of list scrolling
List Type the way of "sticking" popups to the edges of the base list item: to the center, to the left edge, to both edges . It is used when the size of popups in the list is different from the base item.

Command to equipment are assigned to graphic items on the popups of the list.

example
DOWNLOAD



Project pages and popups

Een project dient minstens één pagina te bevatten. De afmeting van deze pagina is tevens het formaat van het gehele project. Popup-pagina's zijn 'losse' pagina's met grafische items, en worden altijd over een pagina geopend.


Nieuwe pagina's, nieuwe popup-pagina's

Je project bestaat uit pagina's en popup-pagina's:

  • Pagina - de basis voor het plaatsen van grafische items.
    • je project dient minstens één pagina te bevatten
    • pagina's kunnen horizontaal of verticaal georiënteerd zijn
    • pagina's ondersteunen de functie om automatisch te roteren van horizontaal (landscape) naar verticaal (portrait) als je bedieningstoestel een accelerometer heeft. Wil je van deze functie gebruik maken, dan dien je 2 pagina's te maken: 1 pagina in horizontale opmaak, en 1 pagina in verticale opmaak.
    • alle pagina's in een project hebben altijd hetzelfde formaat.
    • pagina's kunnen geen effecten bevatten en kunnen ook niet transparant of half-transparant zijn
    • er kan altijd maar 1 pagina gelijktijdig geopend zijn (bij het openen van een nieuwe pagina sluit de vorige pagina inclusief eventuele aanwezige popup-pagina's)
  • Popup-pagina's - extra pagina's met grafische items .
    • je bent niet verplicht om popup-pagina's in je project op te nemen
    • popups cannot be horizontal or vertical (its coordinates are fixed)
    • popups can have any size, opacity and position on the page
    • there can be any number of popups on one page
    • popups close at auto-turn of the page


Создать страницу (попап):

Editor menu project add page.png
  • Add Page – добавить страницу
  • Add Popup Page – добавить попап (окно)
  • Add Folder – создать папку страниц и окон
  • Change View - переключить вид дерева страниц для работы с Popup Groups

Настройки страницы (попапа):

Editor menu project setup pageORpopup.png
  • Новая страница
    • Name - имя
    • Landscape/Portrait - горизонтальная/вертикальная
  • Новый попап
    • Name - имя
    • Left и Top - сдвиг относительно левого-верхнего угла страницы (в пикселях)
    • Width и Height - ширина и высота (в пикселях)



Авто-поворот страницы

При создании страниц вы можете выбрать, а затем изменить их положение.

GUI Page orientation Settings.png
  • Name - имя
  • Alternate View - страница с противоположной ориентацией, которая автоматически появится вместо текущей при повороте панели (если панель оснащена датчиком положения)


Дизайна с авто-поворотом должен состоять из одних страниц. Эта рекомендация связана с тем, что при авто-повороте все открытые попапы закрываются. Чтобы при авто-повороте открывать нужные попапы, используйте JavaScript API



Пред-просмотр попапа на странице

Настройте пред-просмотр в меню правой кнопки мыши на открытой странице или в окне.

Editor right click page view popap.png



Переходы между страницами и попапами

Команды управления страницами и окнами могут быть выполнены по событию:

  • Нажатие на элемент
  • Жест на странице или в окне

Команды формируются в окне макросов для страниц, окон и графических элементов:

Editor examples of macros on press.png


"'Lijst van commando' s:"'

Flip (commands for switching pages)
Show TEST THEO Page (Page name) Open a page (only 1 page can be opened at a time). Indicate the name of the page which has to be open in the command properties
Prev Page show the previous project page
Show Popup (Popup name) Show a popup (multiple popups can be shown at a time). Indicate the name of the popup which has to be open in the command properties
Hide Popup (Popup name) Parameter – the name of the hidden popup
Toggle Popup (Popup name) Show if it is hidden and hide if it is shown. Indicate the name of the popup to be hidden in the command properties
Hide Group (Group name) Hide all popups in Popups group (see below)
Hide Popups On Page (Page name) Hide all popups on the page (page name)
Hide All Popups Hide all popups opened in the project at the moment

В совокупности кнопки, содержащие команды навигации, образуют систему навигации по страницам и окнам проекта iRidium.

Эти команды выполняются и с помощью жестов. Выберите в 'Projects Overview' страницу, зайдите в 'Object Properties – Programming – Gesture'.



Popup Group

В дереве страниц вы можете создавать Папки (Folders) для группировки страниц и попапов. Это не влияет на работу проекта. Но вы также можете создавать Группы попапов (Popup Group) по нажатию правой кнопкой мыши на проект или попап:

Popup Group - набор попапов, которые никогда не должны быть открыты одновременно. Попапы, добавленные в одну группу, становятся взаимоисключающими. Если один попап из группы уже открыт, то при вызове другого он закроется автоматчески.

Группы попапов полезны для упрощения системы навигации проекта. Они позволяют не следить за тем, что ненужные попапы действительно были закрыты, т.к. их закрытие происходит автоматически.

GUI Popup Group Altern.png


Команда Hide Group служит для того, чтобы скрывать любой открытый попап группы:

GUI Popup Group Altern 1.png


Скрыть группу попапов можно командой из скрипта: IR.HideGroup("Group")


Стартовая страница проекта

При запуске проекта iRidium откроется только 1 страница и любое количество всплывающих окон.

Выберите стартовую страницу в Project Properties:

Editor window menu project properties.png
  • Page – имя страницы, которая должна быть открыта при запуске проекта iRidium (только одна);
  • Popups – список попапов, которые должны быть открыты при запуске проекта. Попапы будут открыты по порядку

StartUp в настройках проекта:

Editor window project properties startup.png



Скринсейвер проекта

шаг 1 Создайте страницу-заставку

шаг 2 Настройте кнопку "назад" для возврата к проекту, команда "Prev Page":

Editor screensaver page with items.png

шаг 3 Выберите страницу-заставку проекта в Project Properties:

Editor window project properties screensaver.png

ScreenSaver - экран заставки:

  • On/Off – вкл/выкл экран заставки для проекта
  • Page – страница, которая будет использоваться в качестве экрана заставки
  • Interval (сек.) – время простоя проекта, через которое будет открываться заставка



Пароль на открытие страницы

Используйте систему паролей при настройке кнопок, открывающих страницы и окна.

Editor object properties password number.png
Пароль присваивается графическому элементу:
  • None – пароль не установлен, свободный доступ (по умолчанию)
  • 1 … 4 – порядковый номер пароля, определяющий категорию доступа (с 1й по 4ю)

Откройте настройки проекта, чтобы задать пароли, соответствующие их порядковым номерам:

Editor object properties password number inSudio.png

Приложение автоматически запросит пароль при нажатии на защищенную кнопку. Все команды, прикрепленные к кнопке, выполнятся только после ввода правильного пароля. Если пароль не выбран в настойках проекта, окно запроса пароля не появится.

Изменить пароль можно в в iRidium Cloud (см. настройки проекта), iRidium Transfer, а также в системном меню приложения:

Editor object properties password number cloud.png
Editor object properties password number transfer.png

в JavaScript API есть метод, который позволяет "проверить" системный пароль, т.е. использовать системные пароли не со стандартным окном запроса пароля, а при выполнении любых действий:



Масштабирование страниц и элементов

Чтобы изменить разрешение проекта, например, сделать из 2048х1536 проект 1024x768, впишите нужное разрешение в свойствах проекта. При этом рекомендуется переходить от большего разрешения к меньшему во избежание потери качества изображений в проекте.

ResolutionChange InProject.png

После сохранения проекта в новом разрешении, появятся два диалоговых окна:

1. Подтвердите масштабирование

ResolutionChange ConfirmResize.png
  • "Ok" - подтверждает изменение размера проекта
  • "Cancel" - проект сохранит исходное разрешение, никаких действий не будет произведено


2. Выберите, нужно ли изменять размер окон и графических элементов проекта

ResolutionChange ChooseResizeType.png
  • "Yes" - размеры окон и графических элементов проекта будут масштабированы пропорционально новому размеру страниц
  • "No" - размеры окон и графических элементов останутся старыми, изменится только размер страниц проекта


3. Сохраните масштабированный проект, чтобы зафиксировать изменения.

После сохранения, проект можно редактировать или сращивать с другими проектами.


Особенности масштабирования:

Если в новом разрешении пропорции сторон отличаются от исходных, то результирующий проект может выглядеть излишне растянутым или сжатым.

Вы можете улучшить его внешний вид, меняя разрешение в 2 этапа: сначала уменьшим проект без изменения пропорций. Для этого возьмите финальную высоту проекта и посчитайте ширину, которая позволит сохранить его исходные пропорции. При масштабировании подтвердите, что хотите изменить размеры элементов и окон проекта.

Теперь, проект нужно привести к финальным пропорциям, для чего изменим только его ширину. Отклоните запрос на изменение размера элементов и окон проекта.

Теперь у вас есть проект нужного размера, а элементы на нем сохранили свои исходные пропорции. В правой части проекта появилась не занятая область, или, напортив, не все элементы помещаются на странице. Переместив элементы проекта относительно друг друга, вы можете это компенсировать.


Обработка нажатий и жестов

Виды событий

Взаимодействие пользователя с интерфейсом панели управления - это последовательность событий, при возникновении которых должны выполняться, или отменяться команды интерфейса.

Нажатие на экран, отпускание экрана, сдвиг элемента - это разные события, на которые может отреагировать графический интерфейс.

Страницы, окна, графические элементы, пункты списков - поддерживают разный набор событий, значит, подчиняются разным правилам отправки команд.

GUI Events And Gestures.png

Краткое описание:

  • Press - отправка команд по касанию кнопки
  • Release - отправка команд в момент отпускания кнопки
  • Hold - циклическая отправка команд в течении всего времени удержания кнопки
  • End Of Hold - однократная отправка команд при отпускании кнопки, если её до этого удерживали
  • Move - отправка команд при перемещении ползунка Level или Joystic


  • Select - выбор пункта и подпункта в элементе List. Управление событием доступно в JavaScript: List API


  • Change - ввод символа или команды в элемент Edit Box. Подробные даныне доступны в JavaScript: GUI API
  • Enter - нажатие клавиши Enter в элементе Edit Box


  • Lost Focus - событие, которое генерирует любой элемент, вне зависимости от типа и условий, в момент отпускания. Событие означает потерю элементом фокуса (активности). Событие доступно для обработки только в JavaScript: GUI API


  • Gestures - жесты, настройка возможна только в свойствах страницы (Page). Жест может начаться на самой странице, графическом элементе или в окне. жест будет автоматически передан родительской странице - сработают команды, настроенные для страницы. Исключение: элементы Level, Joystic, List и Static List, которые обрабатывают событие Move, запрещающее срабатывании жестов
скачать пример использования жестов >>


События, доступные для объектов разного типа:

Page

  • Press
  • Release
  • Gestures:
    • Swipe Left
    • Swipe Right
    • Swipe Up
    • Swipe Down
    • Pinch In
    • Pinch Out
    • Double Tap

Popup
  • -

Button
  • Press
  • Release
  • Hold
  • End of Hold

Level
  • Press
  • Release
  • Move

Multistate Button
  • Press
  • Release
  • Hold
  • End of Hold

Multistate Level

  • Press
  • Release
  • Move

List

Up/Down Button

  • Press
  • Release
  • Hold
  • End of Hold

Trigger Button
  • Press
  • Release
  • Hold
  • End of Hold

Edit Box
Virtual key
  • Press
  • Release

Joystick

  • Press
  • Release
  • Move

Static List
  • Press
  • Release

Linear Trend
  • -

Pie Chart
  • -

Bar Chart
  • -


Принцип работы событий интерфейса

На странице или попапе, которые не пересвистываются (не входят в состав Static List и List), кнопки ведут себя следующим образом:

  1. короткое нажатие на элемент генерирует события Press > Release
  2. длинное нажатие на элемент генерирует события Press > Hold > End Of Hold
  3. перемещение ползунка Level, Joystic генерирует события Press > Move > Release
  4. При отпускании любого элемента генерируется событие Lost Focus


Графические элементы в списке List и Static List отличаются тем, что работа их событий может прерваться перелистыванием списка. Перелистывание может начаться на попапе и графическом элементе, что останавливает выполнение команд:

  1. начало перелистывания списка отключает событие Release, поэтому, при коротком нажатии со сдвигом, у кнопки сработает только событие Press > перелистывание
  2. при начале перелистывания списка (смещении курсора/пальца), сразу перестает работать Hold и генерируется End Of Hold: Press > Hold > перелистывание > End Of Hold
  3. При отпускании любого элемента генерируется событие Lost Focus


Советы по реализации сценариев интерфейса:

  • Если кнопка работает на обычной странице, команды нужно привязывать к событию Press, если в списке - к Release
  • Если кнопка должна выполнять разные команды по короткому и длинному нажатию, привяжите "короткую" команду к Release, а "длинную" к End Of Hold
  • Если нужно отправить импульс (сначала 1, потом 0) по короткому нажатию, есть два способа:
    • на Press привязать отправку 1, на Release отправку 0. Это позволит регулировать длину импульса временем удержания кнопки. Но, нельзя использовать этот способ в списках, т.к. смещение списка отменит событие Release
    • на Release привяжите обе команды: 1 и 0, настройте между ними задержку (Delay). Импульс будет иметь фиксированную длину и будет правильно работать в списках

Macros Editor

В этом окне настраивают команды, которые нужно выполнить по нажатию на тот или иной графический элемент.

Список событий интерфейса и жестов, на которые реагирует iRidium


Набор команд, которые можно выполнить по событию интерфейса, может быть любым, поэтому опишем только сами команды и способы создания макросов - последовательностей из нескольких команд.


Выберите графический элемент и откройте Macros Editor в окне Object Properties > Programming. В зависимости от типа элемента, будет доступен разный набор событий.

Строки макроса выполняются последовательно, сверху вниз:

Editor examples of macros on press.png



Команды в Macros Editor:

Flip (команды переключения страниц)
Show Page (Имя страницы) Открыть страницу (единовременно может быть открыта только 1 страница). В параметрах команды указывается имя страницы, которую нужно открыть
Prev Page показать предыдущую открытую страницу проекта
Show Popup (Имя попапа) Показать попап (одновременно может быть показано множество попапов). В параметрах команды указывается имя попапа, который нужно открыть
Hide Popup (Имя попапа) Скрыть попап. Параметр – имя скрываемого попапа
Toggle Popup (Имя попапа) Переключить попап (показать, если скрыт, скрыть, если показан). В параметрах команды указывается имя попапа, который нужно переключить
Hide Group (Имя группы) Скрыть все попапы, входящие в Группу попапов (см. далее)
Hide Popups On Page (Имя страницы) Скрыть все попапы на странице (имя страницы)
Hide All Popups Скрыть все попапы, открытые на данный момент в проекте


Sound (управление звуками)
Play Sample Воспроизвести аудио-файл
Stop Sample Остановить воспроизведение аудио-файла
Stop Slot (номер дорожки) Остановит воспроизведение аудио-файла на первой дорожке
Stop All Sounds Остановить воспроизведение всего аудио в проекте
Send To Driver (отправить данные драйверу)
Send Number Отправить десятичное число (формат DEC)
Send Text Отправить строку данных (формат ASCII)
Send Data Отправить бинарные данные (формат BIN)
Send Token Отправить данные, извлеченные из параметров графического элемента (Value, координаты, размеры и т.д. – переменные значения, определяемые свойствами объекта)
Send To Token (отправить данные переменной проекта)
Send Number Записать в токен десятичное число (формат DEC)
Send Text Записать в токен текст (формат ASCII)
Send Token Записать в токен данные, извлеченные из параметров графического элемента (Value, координаты, размеры и т.д. – переменные значения, определяемые свойствами объекта)
Other (остальные команды)
Delay (мс) Установить задержку между командами макроса (настраивается произвольно)
Script Call (имя функции) Обратиться к функции iRidium Script по имени
Show Keyboard (тип клавиатуры) Вызвать виртуальную клавиатуру управляющей панели
Hide Keyboard Скрыть виртуальную клавиатуру управляющей панели
Minimize Свернуть приложение iRidium App на управляющей панели
Execute (команда) Выполнить стандартную команду ОС, например:
  • открыть гиперссылку в браузере (http://iridiummobile.ru/)
  • отправить письмо на адрес (mailto:example@mail.ru)
  • открыть «калькулятор» (calc)
  • или другие стандартные команды для различных ОС
Exit Закрыть приложение iRidium App на управляющей панели (только для Windows и Android)


Команды управления макросами:

GUI Editor macros window.png
Wiki Macros 1.png удалить выделенный макрос
Wiki Macros 2.png переместить выделенный макрос на одну позицию вверх
Wiki Macros 3.png переместить выделенный макрос на одну позицию вниз
Wiki Macros 4.png клонировать выделенный макрос
Wiki Macros 5.png удалить группу макросов
Wiki Macros 6.png сохранить группу макросов в локальную галерею макросов


Сохранение макросов:

  1. Создайте последовательность команд, нажмите кнопку "Сохранить"
  2. Дайте имя новой макрокоманде, нажмите ОК
  3. Откройте "GALLERY" > "Project Gallery" > "Macros". Вы можете перетащить команду на кнопку или в окно Programming, чтобы привязать к какому-либо событию, помимо Press


Wiki Macros 7.png


Создание связей (Relations):
Кроме макрокоманд, настраиваемых в свойствах отдельных объектов интерфейса (кнопок, страниц, попапов), существуют общие макрокоманды проекта, настройка которых производится в окне All Relations. Здесь создаются связи для передачи данных от одного объекта интерфейса другому:


Icon All Relations.png - открыть окно "Все связи"

Editor window feedback relation.png
например, с помощью значения, полученного с ползунка уровня Item 1, Вы можете изменить координату элемента Item 2. Взаимодействовать могут параметры графических элементов, страниц, попапов, а также каналы и токены (глобальные переменные).



Галереи графики и звука

Галереи iRidium - инструмент хранения фоновых изображений, кнопок, уровней, блоков из нескольких элементов или целых проектов, звуков, макрокоманд.



Графические галереи

Графическая галерея редактора (Gallery > Graphics)
- хранилище объектов интерфейса, которые можно использовать при создании проектов. В графической галерее могут храниться:

  • простые изображения в виде объектов с 1 состоянием
  • кнопки с двумя состояниями
  • анимированные кнопки
  • уровни с двумя состояниями
  • уровни с множеством состояний
  • группы графических элементов
  • страницы и окна проектов
Editor window Gallery Graphics.png


Галерея проекта (Gallery > Project Gallery)
– содержит только те изображения, которые уже используются в проекте iRidium. Не содержит сложных объектов, а только отдельные изображения, из которых объекты состоят.



Галереи звука

Галерея звуков редактора (Gallery > Sounds)
- библиотека аудио-файлов для проекта визуализации. Звук можно воспроизвести по событию (нажатие, отпускание элемента). Привязывают звуки методом Drag&Drop. Звук будет отображен во вкладке Programming окна Object Properties:

Editor window Gallery Project Sounds.png

При нажатии на [...] во вкладке Programming откроется редактор макросов:

Editor window Sound macros.png
  • Play Sample - воспроизвести аудио-файл (имя)
  • Play System Sample - воспроизвести стандартный системный звук (один из двух)
  • Stop Sample - остановить аудио-файл (имя)
  • Stop Slot - остановить воспроизведение конкретного слота (от 1 до 32)
  • Stop All Sounds - остановить воспроизведение всех звуков

Двойной клик по строке аудио-файла открывает настройки воспроизведения:

Editor window Sound settings.png
  • Sound - название аудио-файла;
  • Slot - номер слота воспроизведения (необходимо для группировки по потокам). Всего можно создать 32 слота с неограниченным количеством аудио-файлов в каждом. По умолчанию выставляется "Слот 0" (формируется новый канал воспроизведения без слота);
  • Volume - громкость воспроизведения аудио-файла;
  • Loop - включает (True) или отключает (False) повтор воспроизведения


Поддерживаемые аудио-форматы:

mp3 (с фиксированным и переменным битрейтом)
wav со следующими кодеками:
PСM (глубина звука 8 или 16 бит, частота дискретизации от 8 до 96 кГц)
IMA ADPCM (глубина звука 8 или 16 бит, частота дискретизации от 8 до 96 кГц)
MS ADPCM (глубина звука 8 или 16 бит, частота дискретизации от 8 до 96 кГц)
GSM (частота дискретизации 8 кГц, глубина звука 16 бит)
MS GSM (частота дискретизации 8 кГц, глубина звука 16 бит)
mu-Law (частота дискретизации 8 кГц, глубина звука 16 бит)
A-Law (частота дискретизации 8 кГц, глубина звука 16 бит)
OGG


Галерея проекта (Gallery > Project Gallery)
– содержит только те звуки, которые уже используются в проекте iRidium.



Работа с изображениями


Фоновые изображения

Editor window Gallery put image.png

Используйте команду “Put Image To Page Background” в меню правой кнопки мыши, чтобы сделать изображение фоном страницы или окна. Эта команда не работает для сложных объектов галереи.
Выбрать фон страницы можно и в Object Properties > States, параметр Image


Основные изображения, иконки

Editor window Gallery add as image.png

Кнопка может одновременно отображать 2 картинки:

  • Image - базовое изображение
  • Icon - иконка, размещенная поверх Image



Выберите, какую роль будет выполнять картинка при перетаскивании на кнопку (о Chameleon Image читайте далее)

Настройки изображений и иконок во вкладке States:

Editor window Object Properties change image.png

Изменить изображение и иконку элемента можно в настройках объекта, States:

  • Image – основное изображение
  • Icon – изображение-иконка (размещается поверх основного)
  • Chameleon Image - изображение в формате PNG, которое при наложении на кнопку использует цвета её заливки и рамки, для того чтобы определить цвета внутри изображения
  • Icon Align – выравнивание иконки относительно элемента
  • Image Aligh – выравнивание основного изображения относительно элемента



Вкладка States обращается к локальной галерее проекта, где хранятся изображения, уже добавленые в проект.


Chameleon Image

Chameleon Image - изображение с не фиксированным цветом. Изменив цвет кнопки и цвет бордюра, вы меняете цвет изображения-хамелеона. При использовании с пользовательскими палитрами хамелеоны позволяют создать множество цветовых схем для одного шаблона, а также выделение, свечение, эффект тени и глубины.

Хамелеон - изображение в формате PNG, состоит из четырех цветовых каналов (альфа, красный, зеленый и синий: ARGB). Цвета обрабатываются следующим образом:

Editor Chameleon Image.png
  • Alpha - форма элемента
  • Red - область, которая будет заполнена цветом заливки элемента
  • Green - область, которая будет заполнена цветом бордюра элемента
  • Blue - не используется



Чтобы прозрачность была распознана правильно, сохраните PNG файл в RGB цветах (32-bit).


Пример настройки и результат применения цветовой схемы хамелеона:

Editor examples of Chameleon Image.png
Editor examples of Chameleon Image result.png



Execute: URL схемы

URL схема - указатель на ресурс, который можно вызвать командой iRidium. С помощью URL схемы можно запустить приложение, открыть ссылку в браузере, открыть mail-агент, позвонить по номеру, отправить СМС.

Для различных ОС существуют разные URL схемы, учитывайте тип операционной системы, на которой будет работать проект при выборе исполняемых команд.


Вызовы из iRidium

В iRidium вы можете создать кнопку, которая открывает стороннее приложение или ссылку в браузере. Примеры команд, которые можно выполнить на разных ОС:

AppCallFromUI.png

Гиперссылки:

  • Execute(http://iridiummobile.net)


Файлы и приложения на Windows:

  • Execute(c:\Program Files\iRidium.exe)


Экранная клавиатура на Windows:

  • Execute(osk)


Позвонить по номеру, написать СМС:

  • Execute(tel:+123456789)
  • Execute(sms:+123456789)


Написать email:

  • Execute(mailto:test@example.com)


Запустить приложение:

  • Execute(videos://)
  • Execute(music://)


Настройки iOS 8 и iOS 9 (для iOS 10 решения пока нет):


Настройки i3 pro на iOS 9-10:

  • Execute(app-settings://)


На iOS и Android URL-схемы не идентичны

запустить приложение нельзя, если его разработчик не заложил такую возможность!


Вызовы из JavaScript

Создайте JavaScript файл в редакторе скриптов iRidium Studio, чтобы выполнять команды по нажатию на кнопку или событию в системе.

IR.Execute("http://iridiummobile.net");

Подробная информация о работе с JavaScript представлена в Руководстве.



Вызов iRidium из других приложений


URL схемы запуска i3 pro можно вызывать из браузера или почтового клиента, аналогично гиперссылкам на сетевые ресурсы. Используйте команды:

  • i3pro://
команда вызова прилоежния (открыть или развернуть). Работает в браузере iOS/Android устройства, где установлен i3 pro. Ее можно выполнить как гиперссылку в браузере, почтовом клиенте или другом приложении
  • i3pro://script?data1&data2
команда вызова приложения и запуском скрипта
строка с данными, которая будет передана в скрипт, в параметр query. IR.AddListener(IR.EVENT_RECIEVE_SCHEME,0,function(query, source) {}); - слушатель, который нужно создать в проекте iRidium для получения данных из URL схемы


Пример:


URL схема в стороннем приложении, браузере:

i3pro://script?Page1

Обработчик URL схемы в IRidium:

IR.AddListener(IR.EVENT_RECIEVE_SCHEME,0,function(query, source) 
{
   if (query == "Page1")   
      IR.ShowPage("Page 1");
});



Эффекты визуализации

iRidium поддерживает анимацию нажатия на элементы, покадровую анимацию элементов, анимацию при октрытии страниц и специальные библиотеки iRidium Script.


Анимация при открытии попапов

В свойствах попапа Object Properties > General укажите эффекты анимации, с которым попап будет открываться и закрываться:

Editor Object Properties popap effects.png


  • Lifetime (мс) – время жизни попапа. По завершению, попап автоматически закроется
  • Effects – установка эффектов появления и скрытия попапа. Допускается создание произвольных комбинаций эффектов.
    • Fade - "выцветание" - попап меняет степень прозрачности
    • Rotate - "кручение" - попап движется, вращаясь вокруг центральной оси
    • Slide - "появление" - попап выдвигается из-за края экрана или "из-за себя"
    • Scale - "расширение" - попап увеличивает или уменьшает свои координаты Х и Y от нуля до заданных
    • TV Scan - "панорама" - попап появляется через изменение координаты Y от нуля до заданной

Настройки эффектов:

  • Duration (мс) - время выполнения эффекта
  • Delay (мс) - задержка перед началом выполнения эффекта
  • Tween - направление, в котором движется попап при появлении или исчезании



Эффект нажатия

Для создания визуального эффекта при нажатии на элемент, используйте разные изображения для активного и неактивного состояния элемента:

Editor effect of pushing on button.png

Состояние элемента меняется при нажатии, если в его настройках выбран "Feedback: Momentary".
Состояние элемента меняется при получении обратной связи при выборе "Feedback: Channel".



«Быстрые эффекты»

Инструмент для автоматического создания эффекта анимации на основе первого (неактивного) состояния кнопки.

Добавьте в проект изображение и нажмите кнопку «Быстрый эффект» на панели инструментов. В параметрах модифицированного состояния укажите:

  • Сдвиг изображения относительно изначального
  • Прозрачность нового состояния (альфа-канал элемента)
  • Цвет и размер текста на новом состоянии


Editor Rapid effect on button.png
Editor Rapid effect on button action.png



Покадровая анимация

Элемент, цикл анимации на котором прокручивается все время:

  1. Создайте элемент с типом Multistate Button и состояниями, содержащими кадры анимации
  2. Анимация должна воспроизводиться циклически Repeat: True
  3. Тип обратной связи Feedback: On, обеспечит последовательное циклическое воспроизведение кадров анимации


Editor examples of create animation logo.png

Элемент, цикл анимации которого воспроизводится при получении ненулевого значения (логической единицы):

  1. Создайте элемент с типом Multistate Button и состояниями, содержащими кадры анимации
  2. Анимация должна воспроизводиться циклически Repeat: True
  3. Выберите тип обратной связи Feedback: Blink


Editor examples of create animation element.png


Элемент, цикл анимации которого воспроизводится при нажатии пользователя:

  1. Создайте элемент с типом Multistate Button и состояниями, содержащими кадры анимации
  2. Анимация должна воспроизводиться циклически Repeat: True
  3. Выберите тип обратной связи Feedback: Momentary


Editor examples of create animation button.png



Оптимизация проекта

Editor Delete Unused Files menu.png

Используйте опцию Delete Unused Files - быстрое удаление, чтобы убрать из проекта картинки, которые были в него добавлены, но фактически не используются.

Такие картинки увеличивают время загрузки и общий объем проекта, частая причина их появления - масштабирование элементов, при котором создаются копии изображений в новом размере.

Проверяйте, очищен ли проект от неиспользуемых элементов перед загрузкой на панель:



Объединение проектов

Чтобы научиться быстро объединять свой проект с готовым Script модулем (имеющим свою графическую и драйверную часть), или другим проектом, воспользуйтесь видео-инструкцией: