Languages

Menu
Sites
Language
Swipe command for Gear S3

Hello everyone,

A developer (systemik) has created a JeeS3Dom application that allows to control a home automation system called Jeedom via HTTP requests.  

This app works on the Gear S3 Watch.

 https // github . com / Didier3L / JeeS3Dom . git


The application has menus (<! - Main Page ->) to control lights, alarm, scenario, etc.


For lights, there are two sub-menus:

<! - Light Page -> and <! - Light Swipe Page ->

Regarding <! - Light Page -> :

Pressing a command sends an HTTP request (httprequest.js)
<li> <a onclick="requestcommand(ORDERNUMBER); return false;"> On Office </a> </ li>
<li> <a onclick="requestcommand(ORDERNUMBER); return false;"> Off Office </a> </ li>


http: // ipaddress: port / core / api / jeeApi.php apikey votre_cle_API_jeedom = & type = cmd & id = ORDERNUMBER

 

I would like to know how to get the same result with the <! - Light Swipe Page ->
Gesture to the right: On
Gesture to the left: Off

Can you help us ? cordially

 
 
#s3gt_translate_tooltip_mini { display: none !important; }
Edited by: DidierSweb on 17 Dec, 2017
List

Responses

6 Replies
Armaan-Ul- Islam

What You Looking for is TAU SwipeList. Tizen Advanced UI (TAU) Library offers this element. I'm sharing a sample code snippet with you here.

 

SwipeList HTML Code

<div class="ui-page ui-page-active" id="pageSwipeList">
	<header class="ui-header">
		<h2 class="ui-title">SwipeList Demo</h2>
	</header>
	<div class="ui-content">
	     <!--List items that can be swiped-->
	     <ul class="ui-listview ui-swipelist-list">
	         <li id="swipelistLight">Lights</li>
	     </ul>
	     <!--Swipe actions-->
	     <div class="ui-swipelist">
	        <div class="ui-swipelist-left">
	            <div class="ui-swipelist-icon"></div>
	            <div class="ui-swipelist-text">On</div>
	        </div>
	        <div class="ui-swipelist-right">
	            <div class="ui-swipelist-icon"></div>
	            <div class="ui-swipelist-text">Off</div>
	         </div>
	      </div>
	</div>
</div>

 

SwipeList JS Code

(function()
{
/* Effect */ -->
   var page = document.getElementById("pageSwipeList"),
       listElement = page.getElementsByClassName("ui-swipelist-list")[0],
       swipeList;


   page.addEventListener("pageshow", function()
   {
      /* Make swipe list object */
      swipeList = new tau.widget.SwipeList(listElement,
      {
         swipeTarget: "li",
         swipeElement: ".ui-swipelist"
      });
   });


   page.addEventListener("pagehide", function()
   {
      /* Release object */
      swipeList.destroy();
   });
   
/* Event Handling */-->
    var slist = document.getElementById("swipelistLight");

    slist.addEventListener("swipelist.left", function(evt){
        alert("Lights On");  // swipe left event
        /* You can connect your app with a native app (such as phone call or message) using the Device API */
    });

    slist.addEventListener("swipelist.right", function(evt){
        alert("Lights Off"); // swipe right event
});

})();

 

Additional: To Change Image you may switch Images in: lib > tau > wearable > theme > blue/brown/changeable/default > images > Swipelist

 

Please check the API References for details Implementation:

https://developer.tizen.org/development/api-references/web-application?redirect=/dev-guide/4.0.0/org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_swipelist.htm

DidierSweb

Good evening,

Thank you for your reply.
I specify that I am not a developer.

The SwipeList part exists in the Index.html file
The list_swipelist.js file must be modified.

But what values do I have to modify in this file ?
Can you see the files in Github ?

Cordially

DidierSweb

Good evening,

Thank you for your reply.
I specify that I am not a developer.

The SwipeList part exists in the Index.html file
The list_swipelist.js file must be modified.

But what values do I have to modify in this file ?
Can you see the files in Github ?

Cordially

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
	<title>JeeS3Dom</title>
	<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
	<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
	<!-- load theme file for your application -->
	<link rel="stylesheet" href="css/style-basic.css">
</head>
<body onload="initJeedomValue();initJeedomJsonValue(); return false;">
	
<!-- Main Page -->    
    
	<div class="ui-page ui-page-active" id="main">
		<header class="ui-header">
			<h2 class="ui-title">Jeedom Gear S3</h2>
		</header>
		<div class="ui-content content-padding">
			<ul class="ui-listview" style="text-align:center">
				<li> <a href="#voice"> Voix</a></li>
				<li> <a href="#lights"> Lights</a></li>
				<li> <a href="#lightsswipe"> LightsSwipe</a></li>				
				<li> <a href="#alarm"> Alarm</a></li>
				<li> <a href="#scenario"> Scenario</a></li>
				<li> <a href="#settingskey"> Settings</a></li>
			</ul>
		</div>
	</div>
	
<!-- Light Page --> 
<!-- Change the xxx in the requestsite call to the proper value --> 
       
	<div class="ui-page" id="lights">
		<header class="ui-header">
			<h2 class="ui-title">Lights</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview">
				<li> <a onclick="requestcommand(436); return false;">Salon On</a></li>
				<li> <a onclick="requestcommand(437); return false;">Salon Off</a></li>
				<li> <a onclick="requestcommand(667); return false;">Enfant 1 On</a></li>
				<li> <a onclick="requestcommand(668); return false;">Enfant 1 Off</a></li>
				<li> <a onclick="requestcommand(427); return false;">Enfant 2 On</a></li>
				<li> <a onclick="requestcommand(428); return false;">Enfant 2 Off</a></li>
			</ul>

		</div>
    </div>

<!-- Light Swipe Page -->    
    
    <div class="ui-page" id="lightsswipe">
		<header class="ui-header ui-button">
			<h2 class="ui-title">Lights Swipe</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview ui-swipelist-list">
				<li>Salon</li>
				<li>Enfant 1</li>
				<li>Enfant 2</li>
			</ul>
			<div class="ui-swipelist">
				<div class="ui-swipelist-left">
					<div class="ui-swipelist-icon"></div>
					<div class="ui-swipelist-text">On</div>
				</div>
				<div class="ui-swipelist-right">
					<div class="ui-swipelist-icon"></div>
					<div class="ui-swipelist-text">Off</div>
				</div>
			</div>
		</div>
		<script src="js/list_swipelist.js"></script>
	</div>
   
<!-- Alarm Page -->        
<!-- Change the xxx in the requestsite call to the proper value --> 
    
	<div class="ui-page" id="alarm">
		<header class="ui-header">
			<h2 class="ui-title">Alarm</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview">
				<li> <a onclick="requestcommand(228); return false;">ON</a></li>
				<li> <a onclick="requestcommand(229); return false;">OFF</a></li>
			</ul>
		</div>
	</div>

<!-- Scenario Page -->        
<!-- Change the xxx in the requestsite call to the proper value --> 
    
    <div class="ui-page" id="scenario">
		<header class="ui-header">
			<h2 class="ui-title">Scenario</h2>
		</header>
		<div class="ui-content content-padding">
			<ul class="ui-listview">
				<li> <a onclick="requestscenario(128); return false;">Scenario 1</a></li>
				<li> <a onclick="requestscenario(129); return false;">Scenario 1</a></li>
			</ul>
		</div>
	</div>

<!-- Voice  Page -->

	<div class="ui-page" id="voice">
		<header class="ui-header">
			<h2 class="ui-title">Lights</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview">
				<li> <a onclick="requesttext(); return false;">Interaction text</a></li>
				<li> <a onclick="requestvoice(); return false;">Interaction</a></li>
			</ul>
		</div>
    </div>
	
	
<!-- Settings KEY Page -->        
    
    <div class="ui-page" id="settingskey">
		<header class="ui-header">
			<h2 class="ui-title">Jeedom Key</h2>
		</header>
<!--		<div class="ui-content">
			<input type="checkbox" checked/>
			<input type="checkbox" >
		</div>
-->
      		<div class="ui-content">
				<label>Address Value: <input type="text" id="addressValue"></label>
				<label>Key Value: <input type="text" id="keyValue"></label>
			</div>

        <footer class="ui-footer ui-bottom-button">
			<a onclick="saveJeedomValue(); return false;" href="#popupToast" class="ui-btn">Save</a>
   	    </footer>
	</div>

 <!-- Popup Save -->        
   
    <div id="popupToast" class="ui-popup ui-popup-toast toast-text-only">
        <div class="ui-popup-content">
					Your setting<br>
                    has been saved
        </div>

 <!-- End of PAGES -->  
	
	<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
	<script type="text/javascript" src="js/circle-helper.js"></script>
	<script type="text/javascript" src="js/httprequest.js"></script>
	<script src="app.js"></script>
	<script src="lowBatteryCheck.js"></script>
</body>
</html>
/*global tau */
(function(){

    var page = document.getElementById( "lightsswipe" ),
		listElement = page.getElementsByClassName( "ui-swipelist-list" )[0],
		swipeList;

	/**
	 * pagebeforeshow event handler
	 * Do preparatory works and adds event listeners
	 */
	page.addEventListener( "pagebeforeshow", function() {
		// make SwipeList object
		swipeList = tau.widget.SwipeList( listElement, {
			swipeTarget: "li",
			swipeElement: ".ui-swipelist"
		});
	});

	/**
	 * pagebeforehide event handler
	 * Destroys and removes event listeners
	 */
	page.addEventListener( "pagebeforehide", function() {
		// release object
		swipeList.destroy();
	});

}());

 

DidierSweb

Hello
The code on Github is now in public mode

https://github.com/Didier3L/JeeS3Dom.git

 

 

Armaan-Ul- Islam

Seems good, What you are missing in list_swipelist.js is the 'event linstener' for 'swipe-left' or 'swipe-right' event. Just add the event listener functions and write your desired 'operations to be done' there.

I'm showing one example:

<ul class="ui-listview ui-swipelist-list">
    <li id="salon-swipe">Salon</li>
    <li id="enfant-swipe">Enfant</li>
</ul>
// list_swipelist.js

(function(){

    var page = document.getElementById( "lightsswipe" ),
    	listElement = page.getElementsByClassName( "ui-swipelist-list" )[0],
		swipeList;

	/**
	 * pagebeforeshow event handler
	 * Do preparatory works and adds event listeners
	 */
	page.addEventListener( "pagebeforeshow", function() {
		// make SwipeList object
		swipeList = tau.widget.SwipeList( listElement, {
			swipeTarget: "li",
			swipeElement: ".ui-swipelist"
		});
	});

	/**
	 * pagebeforehide event handler
	 * Destroys and removes event listeners
	 */
	page.addEventListener( "pagebeforehide", function() {
		// release object
		swipeList.destroy();
	});
    
    var salonSwipe = document.getElementById("salon-swipe");
    
      salonSwipe.addEventListener("swipelist.right", function(evt){
        alert("Salon On");  // swipe right event
        requestcommand(436);
        /* You can connect your app with a native app (such as phone call or message) using the Device API */
    });

    salonSwipe.addEventListener("swipelist.left", function(evt){
        alert("Salon Off");  // swipe left event
        requestcommand(437);
        /* You can connect your app with a native app (such as phone call or message) using the Device API */
    });
    
    var enfantSwipe = document.getElementById("enfant-swipe");
    
      enfantSwipe.addEventListener("swipelist.right", function(evt){
        alert("Enfant On");  // swipe right event
        requestcommand(667);
        /* You can connect your app with a native app (such as phone call or message) using the Device API */
    });

    enfantSwipe.addEventListener("swipelist.left", function(evt){
        alert("Enfant Off");  // swipe left event
        requestcommand(668);
        /* You can connect your app with a native app (such as phone call or message) using the Device API */
    });

}());

 

DidierSweb

thank you very much