Framework7 + FTUI

lewej · 30 September 2017, 20:58:41

Hallo Zusammen,

ich würde gerne das Smart Selected nutzen und es soll als POPUP aufgehen:
https://framework7.io/docs/smart-select.html

Aber irgendwie funktioniert es nicht. Ich würde gerne folgendes umsetzen:

Code Auswählen


<div class="list-block">
											<ul>
												<!-- Smart select item -->
												<li>
													<!-- Additional "smart-select" class -->
													<a href="#" class="item-link smart-select">
														<!-- select -->
														<select name="WohnzimmerLampe">
															<option value="on" selected>An</option>
															<option value="off">Aus</option>
															<option value="Blau">Blau</option>
															<option value="Rot">Rot</option>															
														</select>
														<div class="item-content">
															<div class="item-inner">
																<!-- Select label -->
																<div class="item-title">Licht Wohnzimmer</div>
																<!-- Selected value, not required -->
																<div class="item-after">Rot</div>
															</div>
														</div>
													</a>
												</li>
											</ul>
										</div>

Wo muss man data-content oder data-map-checked hier einsetzen, und muss hier noch javascript geschrieben werden?

Falls jemand bereits sowas ähnliches am laufen? Ein Beispiel, wäre Super.

Gruß und Danke
Vitali

lewej · 03 Oktober 2017, 07:16:02

Hallo Zusammen,

nutzt keiner das Selected ..... Popup, wäre sehr an einem Beispiel interessiert.

Gruss
lewej

setstate · 03 Oktober 2017, 08:48:09

Ich nutze das (noch) nicht, habe aber mal schnell versucht das zusammen zu klickern.
So funktioniert das bei mir

Code Auswählen


<li>
    <!-- Additional "smart-select" class -->
    <a href="#" class="item-link smart-select">
        <!-- select -->
        <select data-type="html" data-value="AvReceiver:input" data-changed="AvReceiver:input">
            <option value="Webradio" selected>Webradio</option>
            <option value="Sat">Sat</option>
            <option value="BD/DVD">BD/DVD</option>
            <option value="Spotify">Spotify</option>
            <option value="FireTv">FireTv</option>
            <option value="Phono">Phono</option>
            <option value="FM">FM</option>
        </select>
        <div class="item-content">
            <div class="item-inner">
                <!-- Select label -->
                <div class="item-title">Input</div>
                <!-- Selected value, not required -->
                <div class="item-after" data-type="html" data-value="AvReceiver:input"></div>
            </div>
        </div>
    </a>
</li>

l3skon3 · 03 Oktober 2017, 09:01:50

da war jemand schneller

aber eine Ergänzung hab ich noch... um es als Popup zu öffnen.

Code Auswählen


<li>
    <!-- Additional "smart-select" class -->
    <a href="#" class="item-link smart-select" data-open-in="popup">
        <!-- select -->
        <select data-type="html" data-value="AvReceiver:input" data-changed="AvReceiver:input">
            <option value="Webradio" selected>Webradio</option>
            <option value="Sat">Sat</option>
            <option value="BD/DVD">BD/DVD</option>
            <option value="Spotify">Spotify</option>
            <option value="FireTv">FireTv</option>
            <option value="Phono">Phono</option>
            <option value="FM">FM</option>
        </select>
        <div class="item-content">
            <div class="item-inner">
                <!-- Select label -->
                <div class="item-title">Input</div>
                <!-- Selected value, not required -->
                <div class="item-after" data-type="html" data-value="AvReceiver:input"></div>
            </div>
        </div>
    </a>
</li>

also grad das data-open-in="popup" wird ergänzt.

edit: ich persönlich finde data-open-in="picker" data-picker-close-text="zurück" eine schöne Lösung.

lewej · 06 Oktober 2017, 07:35:05

Zitat von: l3skon3 am 03 Oktober 2017, 09:01:50
da war jemand schneller
aber eine Ergänzung hab ich noch... um es als Popup zu öffnen.

Code Auswählen Erweitern
<li>  <a href="#" class="item-link smart-select" data-open-in="popup">  <select data-type="html" data-value="AvReceiver:input" data-changed="AvReceiver:input"> <option value="Webradio" selected>Webradio</option> <option value="Sat">Sat</option> <option value="BD/DVD">BD/DVD</option> <option value="Spotify">Spotify</option> <option value="FireTv">FireTv</option> <option value="Phono">Phono</option> <option value="FM">FM</option> </select> <div class="item-content"> <div class="item-inner">  <div class="item-title">Input</div>  <div class="item-after" data-type="html" data-value="AvReceiver:input"></div> </div> </div> </a> </li>

also grad das data-open-in="popup" wird ergänzt.

edit: ich persönlich finde data-open-in="picker" data-picker-close-text="zurück" eine schöne Lösung.

Super es funktioniert, so wie es soll. Ich habe es noch etwas erweitert, um auto close und als Picker:

Code Auswählen


<!-- Beginn Popup Wolf Stufe -->
					<li>
						<!-- Additional "smart-select" class picker -->
						<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
							<!-- select -->
							<select data-type="html" data-value="WOLF_CWL_STATE_STUFE:STATE" data-changed="WOLF_CWL_STATE_STUFE:STATE">
								<option value="0" selected>Aus</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
							</select>
							<div class="item-content">
								<div class="item-inner">
									<!-- Select label -->
									<div class="item-title">Stufe</div>
									<!-- Selected value, not required -->
									<div class="item-after" data-type="html" data-content="WOLF_CWL_STATE_STUFE:STATE"></div>
								</div>
							</div>
						</a>
					</li>

lewej · 06 Oktober 2017, 09:41:00

Hallo Zusammen,

ich versuche in den icons die Symbol Farbe zu ändern, je nach Status, klappt aber nicht.

Ein Beispiel, wo die Farben bzw. Zahlen geändert werden, habe ich :

Code Auswählen


<i class="icon fa oa-fts_window_1w">
<span class="badge theme-green bg-red" data-type="html" data-content="dmy_ZE.OPEN_Fenster:STATE"  data-class="dmy_ZE.OPEN_Fenster:STATE" data-map-class='{"0":"hide", ".*":"show"}'>0</span>
	</i>

Ich möchte aber jetzt nur ein Lampen Symbol haben und die Farbe von der Lampe soll geändert werden.

In der alten FTUI habe ich das so gemacht:

Code Auswählen


<div data-type="symbol"
	data-device="HUEDevice14"
	data-get="state"
	data-get-on="on.*"
	data-get-off="off"
	data-icon="fa-lightbulb-o"
	data-on-color="#eee"
	data-off-color="#f0f0e1"
	data-on-background-color="HUEDevice14:rgb"
	data-off-background-color="#cacad9"
class="item-media fa fa-fw">
</div>

Wenn ich das nutze, zerreist es mir das ganze Layout.

Kann ich die Datenfelder auch in der i class bzw. span class nutzen? Hat jemand ein Beispiel ?

Gibt es auch eine Übersicht wie die ganzen neuen data Variablen heißen, zu data-content oder data-map-class, habe ich im git nichts gefunden.

Gruß
lewej

lewej · 07 Oktober 2017, 13:09:08

Hallo Zusammen,

ich bekomme es einfach nicht hin. Was muss ich eintragen, damit die FTUI folgende Sachen absetzt:

Code Auswählen


1. set KuecheSchraenkeLedStripe rgb FARBE
2. set SKuecheSchraenkeLedStripe on
3. KuecheSchraenkeLedStripe off
4. KuecheSchraenkeLedStripe 6fe600

Ich habe folgenden code, der setzt immer nur die Farbe, egal ob ich an oder aus wähle.

Code Auswählen


<li>
	<!-- Additional "smart-select" class picker -->
	<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
		<!-- select -->
		<select data-type="html" data-value=""= data-checked="KuecheSchraenkeLedStripe" data-map-checked='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}' data-changed="KuecheSchraenkeLedStripe:STATE" data-map-changed='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}'>
			<option value="aus">Aus</option>
			<option value="an">An</option>
			<option value="6fe600">grün</option>
		</select>
		<div class="item-content">
			<div data-type="symbol"
				data-device="KuecheSchraenkeLedStripe"
				data-get="state"
				data-get-on="on.*"
				data-get-off="off"
				data-icon="fa-lightbulb-o"
				data-on-color="KuecheSchraenkeLedStripe:rgb"
				data-off-color="#f0f0e1"
				data-on-background-color="KuecheSchraenkeLedStripe:rgb"
				data-off-background-color="#cacad9"
				class="item-media fa fa-fw">
			</div>


			<div class="item-inner">
				<div class="item-title-row">
					<div class="item-title">LedStripes</div>
					<div class="item-subtitle">
						<div class="range-slider">
							<input data-type="html" data-value="KuecheSchraenkeLedStripe:val" data-changed="KuecheSchraenkeLedStripe:val" type="range" min="0" max="100" value="3" step="10">
							</div>
						</div>
					</div>
					<div class="item-after" data-type="html" data-content="KuecheSchraenkeLedStripe:stateLight"></div>
				</div>
			</div>
		</a>
	</li>

Gruß
lewej

l3skon3 · 07 Oktober 2017, 18:07:44

Hallo,

hat vielleicht jemand eine Idee wie man Weekprofil und Weeddaytimer lauffähig bekommt?

l3skon3 · 07 Oktober 2017, 18:09:25

Zitat von: lewej am 07 Oktober 2017, 13:09:08
Hallo Zusammen,

ich bekomme es einfach nicht hin. Was muss ich eintragen, damit die FTUI folgende Sachen absetzt:

Code Auswählen Erweitern
1. set KuecheSchraenkeLedStripe rgb FARBE 2. set SKuecheSchraenkeLedStripe on 3. KuecheSchraenkeLedStripe off 4. KuecheSchraenkeLedStripe 6fe600

Ich habe folgenden code, der setzt immer nur die Farbe, egal ob ich an oder aus wähle.

Code Auswählen Erweitern
<li>  <a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">  <select data-type="html" data-value=""= data-checked="KuecheSchraenkeLedStripe" data-map-checked='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}' data-changed="KuecheSchraenkeLedStripe:STATE" data-map-changed='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}'> <option value="aus">Aus</option> <option value="an">An</option> <option value="6fe600">grün</option> </select> <div class="item-content"> <div data-type="symbol" data-device="KuecheSchraenkeLedStripe" data-get="state" data-get-on="on.*" data-get-off="off" data-icon="fa-lightbulb-o" data-on-color="KuecheSchraenkeLedStripe:rgb" data-off-color="#f0f0e1" data-on-background-color="KuecheSchraenkeLedStripe:rgb" data-off-background-color="#cacad9" class="item-media fa fa-fw"> </div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">LedStripes</div> <div class="item-subtitle"> <div class="range-slider"> <input data-type="html" data-value="KuecheSchraenkeLedStripe:val" data-changed="KuecheSchraenkeLedStripe:val" type="range" min="0" max="100" value="3" step="10"> </div> </div> </div> <div class="item-after" data-type="html" data-content="KuecheSchraenkeLedStripe:stateLight"></div> </div> </div> </a> </li>

Gruß
lewej

hm, probier mal

Zitatdata-value=""=

auszubessern.

lewej · 07 Oktober 2017, 19:47:14

Hallo,

aktuell habe ich hinbekommen, das die Farben gesetzt werden können. Ich frage mich jedoch, ob das so richtig ist und ob man das doch besser anders angehen sollte.

Code Auswählen


<!-- Beginn Popup TVLEDS -->
<li>
	<!-- Additional "smart-select" class picker -->
	<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
		<!-- select -->
		<select data-type="html" data-checked="WZTVLEDSTRIPE:STATE" data-content="WZTVLEDSTRIPE" data-changed="WZTVLEDSTRIPE:STATE">
			<option value="off">Aus</option>
			<option value="rgb ffffff" selected>An</option>
			<option value="rgb 6fe600">gruen</option>
			<option value="rgb efefef">rgb2</option>
		</select>
		<div class="item-content">


			<div data-type="symbol"
					data-device="WZTVLEDSTRIPE"
					data-get="STATE"
					data-get-on="on.*"
					data-get-off="off"
					data-icon="fa-lightbulb-o"
					data-on-color="#ffbf00"
					data-off-color="#f0f0e1"
					data-on-background-color="#004000"
					data-off-background-color="#cacad9"
					class="item-media fa fa-fw">
			</div>



			<div class="item-inner">
				<div class="item-title-row">
					<div class="item-title">TV-LedStripes</div>
					<div class="item-subtitle">
						<div class="range-slider">
							<input data-type="html" data-value="WZTVLEDSTRIPE" data-changed="WZTVLEDSTRIPE:val" type="range" min="0" max="254" value="3" step="20">
							</div>
						</div>
					</div>
					<div class="item-after" data-type="html" data-content="WZTVLEDSTRIPE:stateLight"></div>
				</div>
			</div>
		</a>
	</li>

gruß
lewej

Pi_Newbie · 08 Oktober 2017, 11:59:23

Hallo zusammen,

ich bin dabei verschiedenste UI's für mich auszuprobieren, da ich nicht so der coding freak bin. Würde gerne auch dieses mal testen. Würde jemand mal seine gesamten .html hierzu bereitstellen? Das wäre super!

Besten Dank an alle!

viper2033 · 11 Oktober 2017, 18:49:06

Hallo,

wäre auch brennend an deinen Files interessiert, sieht echt gut aus was du bis jetzt gebaut hast.
Wäre echt top wenn du mir diese auch zusenden könntest

lewej · 12 Oktober 2017, 20:29:58

Hallo Zusammen,

ich habe ein Problem mit einem html/label:

Folgenden Code habe ich:

Code Auswählen


<li>
	<!-- Additional "smart-select" class picker -->
	<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
		<!-- select -->
		<select data-type="html" data-checked="KuecheDeckeLedStripe" data-content="KuecheDeckeLedStripe" data-changed="KuecheDeckeLedStripe:STATE">
			<option value="off">Aus</option>
			<option value="rgb ffffff">An</option>
			<option value="hsv 328.97,16.03,100" selected data-option-icon="fa fa-lightbulb-o color-pink">pink-white</option>
			<option value="hsv 180,21.02,100" selected data-option-icon="fa fa-lightbulb-o color-lightblue">aqua-white</option>
			<option value="hsv 238.01,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-blue">blue-white</option> 	
			<option value="hsv 131.03,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-cyan">mint-white</option>
		</select>
		<div class="item-content">
			<div data-type="symbol"
					data-device="KuecheDeckeLedStripe"
					data-get="stateLight"
					data-get-on="on.*"
					data-get-off="off"
					data-icon="fa-lightbulb-o"
					data-on-color="#ffe599"
					data-off-color="#f0f0e1"
					class="item-media fa fa-fw">
			</div>
			<div class="item-inner">
				<div class="item-title-row">
					<div class="item-title">LEDStripes</div>
					<div class="item-subtitle">
						<div class="item-content"></div>
						<div class="range-slider">
							<input data-type="html" data-value="KuecheDeckeLedStripe:val" data-changed="KuecheDeckeLedStripe:val" type="range" min="0" max="100" value="3" step="20">
							</div>
						</div>
					</div>				
					<div class="item-after"  data-type="label" 
							data-device="KuecheDeckeLedStripe" 
							data-get="KuecheDeckeLedStripe:state" 
							data-substitution='["opened","An","disconnected","Aus"]'
						</div>
					</div>
				</div>
			</div>
		</a>
	</li>

Wenn irgend eine Farbe auswähle, überschreibt es mir rechts den state status, eigentlich sollte dort immer nur an und aus stehen. Wenn ich die Seite reloade dann steht wieder das richtige dort.

Hat jemand eine Idee?
Siehe Bilder:

Standarduser · 13 Oktober 2017, 17:35:43

Zitat von: viper2033 am 11 Oktober 2017, 18:49:06
Hallo,

wäre auch brennend an deinen Files interessiert, sieht echt gut aus was du bis jetzt gebaut hast.
Wäre echt top wenn du mir diese auch zusenden könntest

Meintest Du mich?

Ist noch die totale Baustelle und viel zusehen gibts eigentlich auch nicht, aber ich teile gern, was ich bereits habe.
Insbesondere eine funktionierende Struktur hinzubekommen war stellenweise echt anstrengend. Also greift zu und macht etwas draus

lewej · 22 Oktober 2017, 21:37:23

Zitat von: lewej am 12 Oktober 2017, 20:29:58
Hallo Zusammen,

ich habe ein Problem mit einem html/label:

Folgenden Code habe ich:

Code Auswählen Erweitern
<li>  <a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">  <select data-type="html" data-checked="KuecheDeckeLedStripe" data-content="KuecheDeckeLedStripe" data-changed="KuecheDeckeLedStripe:STATE"> <option value="off">Aus</option> <option value="rgb ffffff">An</option> <option value="hsv 328.97,16.03,100" selected data-option-icon="fa fa-lightbulb-o color-pink">pink-white</option> <option value="hsv 180,21.02,100" selected data-option-icon="fa fa-lightbulb-o color-lightblue">aqua-white</option> <option value="hsv 238.01,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-blue">blue-white</option> <option value="hsv 131.03,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-cyan">mint-white</option> </select> <div class="item-content"> <div data-type="symbol" data-device="KuecheDeckeLedStripe" data-get="stateLight" data-get-on="on.*" data-get-off="off" data-icon="fa-lightbulb-o" data-on-color="#ffe599" data-off-color="#f0f0e1" class="item-media fa fa-fw"> </div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">LEDStripes</div> <div class="item-subtitle"> <div class="item-content"></div> <div class="range-slider"> <input data-type="html" data-value="KuecheDeckeLedStripe:val" data-changed="KuecheDeckeLedStripe:val" type="range" min="0" max="100" value="3" step="20"> </div> </div> </div> <div class="item-after" data-type="label" data-device="KuecheDeckeLedStripe" data-get="KuecheDeckeLedStripe:state" data-substitution='["opened","An","disconnected","Aus"]' </div> </div> </div> </div> </a> </li>

Wenn irgend eine Farbe auswähle, überschreibt es mir rechts den state status, eigentlich sollte dort immer nur an und aus stehen. Wenn ich die Seite reloade dann steht wieder das richtige dort.

Hat jemand eine Idee?
Siehe Bilder:

@state: Hast du eine Idee, warum der Status überschrieben wird?

Gruss
lewej