Slider

Es kam die Anfrage wegen eines Sliders.

So könnte er z.B. aussehen.

Zum steuern von Mediaplayer, Chromoflex, DMX usw.

Datenübertragung von 0-100%

slider.png

Ohhh Rainer,DELUXE sag ich nur!!! :smiley:

Wer testen möchte, hier der Code.

Eigene Seite erstellen oder einbinden. In IPS eine Variable(Integer) anlegen.
Eine Seite Slider.php anlegen und im user Verzeichnis ablegen. Dieses einfügen und die ID der IntegerVariable anpassen.

Wem die Abstufung von 10% zuviel ist kann hier

discreteValues="101"

den Wert ändern. 101 ist 1%, 21 ist 5% Abstufung.

SetValue(34343,(int)$_GET['slider']);// ID anpassen

SliderSeite im Webfront

<!--
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<style type="text/css">@import "../dojo-release-1.3.0/dijit/themes/nihilo/nihilo.css";</style>
<style type="text/css">@import "webfront.css";</style>
<style type="text/css">
html, body { margin: 0px; padding: 0; }
</style>

<script type="text/javascript" src="../dojo-release-1.3.0/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript"> 

dojo.require("dijit.form.Slider");
dojo.require("dojo.parser"); 

function doRequest(value) { dojo.xhrGet( { url:'./Slider.php', content: {slider: dojo.byId('horizontalSlider').value = value}} ); } 
</script>  
</head><body class="nihilo">

<div class="variablesContainer" style="height: auto;">
            <div class="variableContainer" style="height: 50px; background: transparent url(img/icons/png/Speaker.png) no-repeat scroll 10px 8px;">
         <div class="deviceTitle">
           <div class="deviceTitleContent" style="top: 5px;">Mediaplayer</div>
        </div>
            <div id="horizontalSlider" class="deviceState" style="left: 300px; width: 50%;" dojoType="dijit.form.HorizontalSlider" 
    value="50" minimum="0" maximum="100" discreteValues="11"
    intermediateChanges="true"
    onChange="doRequest"
    showButtons="true" style="width:500px;">
  <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.5em; font-size:100%; color:white;">
    
    <li>0%</li>
    <li>20%</li>
    <li>40%</li>
    <li>60%</li>
    <li>80%</li>
    <li>100%</li>
    
  </ol></div>

</div>

</head><body>  

Viel Spaß damit.

Danke das nenne ich service

Den Slider hatte ich damals auch im normalen WebFront drin, aber er war mir zu hakelig für Touchscreens und immer genau mit der Maus treffen und ziehen war mir auch zu fusselig. Daher gab es ja von mir den Balken, den man irgendwo treffen konnte. Da das auch zu fitzelig war und vor allem bei Sachen mit unbekannt großen Bereichen zu ungenau habe ich dann die Version mit den klickbaren Blöcken gebaut. Für die könnte ich aber auch mal einen Parameter mit der Anzahl per config.custom.php basteln…

Wem das besser gefällt, einfach Code austauschen.

@Horst. Auf einem Touch habe ich das ganze noch nicht getestet. Ich habe noch keinen. :frowning:

<div class="variablesContainer" style="height: auto;">
            <div class="variableContainer" style=" background: transparent url(img/icons/png/Speaker.png) no-repeat scroll 10px 4px;">
         <div class="deviceTitle">
           <div class="deviceTitleContent" >Mediaplayer</div>
        </div>
</div>
<div class="variablesContainer" style="height: auto;">
            <div class="variableContainer" style="height: 50px; background: transparent url(img/icons/png/Intensity.png) no-repeat scroll 10px 8px;">
         <div class="deviceTitle">
           <div class="deviceTitleContent"style="top: 5px;" >Volume</div>
        </div>
            <div id="horizontalSlider" class="deviceState" style="left: 300px; width: 50%;" dojoType="dijit.form.HorizontalSlider" 
    value="50" minimum="0" maximum="100" discreteValues="11"
    intermediateChanges="true"
    onChange="doRequest"
    showButtons="true" style="width:500px;">
  <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.5em; font-size:100%; color:white;">
    
    <li>0%</li>
    <li>20%</li>
    <li>40%</li>
    <li>60%</li>
    <li>80%</li>
    <li>100%</li>
    
  </ol></div>
   </div>
 </div>
</div>

Hi,

sag mal wo fügst Du diese zeile:

SetValue(34343,(int)$_GET[‚slider‘]);// ID anpassen

denn ein ?

Ich habe mir eine Variable angelegt und so weiter. Die Seite steht auch, aber diese eine Zeile habe ich noch nicht unterbringen können…

Hast Du nen Tip ?

Gruss
B71

Für diese Zeile machst Du eine Seite Slider.php und ins user Verzeichnis legen.
Das ist die Schnittstelle zwischen Webfront und IPS.

Hallo Rainer,

ich habe eine Slider.php erstellt in die ich den langen Codestrang hineingepackt habe und diese liegt im Webfront User Verzeichnis.

Diese habe ich dann in meine custom.php eingebunden und habe auch eine Slideranzeige im Webfront.

Jetzt haste mich abgehängt, wie ich die Variableninstanz da auch noch reinzirkeln soll… grübel

Gruss
B71

Moin B71,

2 Seiten sind vorhanden.

1x Seite xyz.php für die Webseite
1x Slider.php für die Daten

Du kannst wegen mir auch SetSlider.php schreiben, dann musst Du es im Code aber anpassen.

Hallo Rainer,

das hatte ich so gemacht, aber mir hat wohl der Browser Cache einen Streich gespielt.

Wird heute abend ausgetestet.

Gruss
B71

Hallo,

Sieht super aus.
Genau sowas wäre doch optimal für meine Sollvorgaben, z.b. Temperaturen.
Ich hoffe das sowas über die benutzerdefinierten Variablenprofilen möglich ist,und nicht nur über externe Seiten.

Michael

Hallo Michael,

für Temperaturvorgabe, zumindest für FHT nicht geeignet. Da ja der Wert direkt gesendet wird. Ruckzuck ist die FHZ dicht.
Dann lieber den Heizungsregler verwenden, dieser sendet erst nach eingestellter Temperatur und Set.

@RWN

für SPS’en wäre dies aber optimal.
Aber um nochmal die Variablenprofile anzusprechen, ist sowas geplant das einer Variable so ein Slider zugwiesen werden kann.

Michael

Das musst Du schon die Macher von IPS fragen.

Hallo Rainer,
ich „raffe“ es einfach nicht !!!

Kannst Du mir die beiden Dateien eventuell al PN senden oder hier posten ?

Ich bin scheinbar ausser Stande etwas so simples nachzubauen.

Gruss
B71

Nadann noch mal zum mit schreiben. :slight_smile:

Slider.php

SetValue(34343,(int)$_GET['slider']);// ID anpassen 

Webseite xyz.php

// der andere lange Code

Genau das mache ich die ganze Zeit…

Ich wundere mich schon gar nicht mehr über meinen Dilletantismus…

Markise.php enthält den gesamten langen code
Slider.php enthält die 1 Zeile …
Variable Integer ist angelegt.

Na…ich werde mal weiter probieren.

Gruss
B71

Na dann schreib doch was nicht geht und lass mich nicht als raten.

Fehlermeldung usw…

OK

Hintergrund ist „falsch“ (schwarz statt gräulich)
Logo vor dem Eintrag Markise wird nicht angezeigt (sun.png)
Änderung des Sliders bewirkt keine Änderung der Integer Variablen

= Totalschaden :slight_smile:

Markise.PHP mit erstem „Langcode“ ist ohne jegliche Änderung mit copy / paste übernommen worden

Slider.php NUR die eine Zeile.
Brauche ich da eventuell noch PHP Code wie <? oder <! …

IE 8 ist im Einsatz…
Immerhin bin ich voll der „DAU“ im PHP und helfe mir nur mit den Schnipseln von hier immer weiter…(was bis dato ja auch immer ganz gut funktionierte)

Gruss
B71