SlideShow

172 views
Skip to first unread message

Jami

unread,
Aug 21, 2019, 3:07:34 PM8/21/19
to MIT App Inventor Forum
Hi everyone,
Can MIT Inventor do a slideshow that contains news.csv by using html. without buttons but only by using swap finger?

TimAI2

unread,
Aug 21, 2019, 8:18:01 PM8/21/19
to MIT App Inventor Forum
Probably....

Depends what is in the news.csv / html

Use a canvas for the swiping
Message has been deleted
Message has been deleted

Jami

unread,
Aug 23, 2019, 1:24:27 AM8/23/19
to MIT App Inventor Forum
Good Morning Tim

Please have a look to my app screen and block . Please tell me if I can make a swap function?
Thank you so much.

blocks (2).png
slideScreen.png

Rami Jami

unread,
Aug 23, 2019, 7:48:43 AM8/23/19
to MIT App Inventor Forum
Hi Tim 

Is it possible to use flip box way in flip csv in my app?
Kindly, I need your answer.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

</body>
</html>

TimAI2

unread,
Aug 23, 2019, 7:58:44 AM8/23/19
to MIT App Inventor Forum
You can't hover on a touchscreen, so no.

Rami Jami

unread,
Aug 23, 2019, 8:13:42 AM8/23/19
to MIT App Inventor Forum
Hello Tim

Thank you so much for rely.

Is there some method to swap csv. ?
Kindly, give me some help if you don't mind.
Thank you

Message has been deleted

TimAI2

unread,
Aug 23, 2019, 2:59:46 PM8/23/19
to MIT App Inventor Forum
Please provide a more detailed explanation of what you are trying to achieve, what you have done so far, what works, what doesn't work...

Jami

unread,
Aug 23, 2019, 3:21:32 PM8/23/19
to MIT App Inventor Forum
Hello Tim,
Thank you so much for giving me the opportunity to help me.
Actually I am trying to make a swipe view between texts which are in .csv but I couldn't find any code to help me to make it in my app. I have just found click button to go to next or previous text.  

TimAI2

unread,
Aug 23, 2019, 4:12:36 PM8/23/19
to MIT App Inventor Forum
You can use the canvas drag event to swipe, the canvas drawText to write text on the canvas.
call a different csv with the drag event to change the csv, and write the contents with drawText

Jami

unread,
Aug 23, 2019, 4:43:45 PM8/23/19
to MIT App Inventor Forum
Isn't there a conflict if I use canvas because I use Webviewer and html to view the text in csv.

TimAI2

unread,
Aug 23, 2019, 6:53:54 PM8/23/19
to MIT App Inventor Forum
You said:

"Actually I am trying to make a swipe view between texts which are in .csv"

I provide a possible solution

Jami

unread,
Aug 24, 2019, 1:16:11 AM8/24/19
to MIT App Inventor Forum
Hello Tim
I have build a canvas and moved the blocks from next button and previous button to it.
Please give me your opinion. 
blocks.png
canvas.png

Jami

unread,
Aug 24, 2019, 3:19:30 AM8/24/19
to MIT App Inventor Forum
Hello Tim,
It swipe the page left and right but I must touch the canvas not the Webviewer. So the canvas and Webviewr will be on the screen. 

You can use the canvas drag event to swipe, the canvas drawText to write text on the canvas.
call a different csv with the drag event to change the csv, and write the contents with drawText

I don't know how to do make the canvas draw Text to write text on the canvas.
Please explain to me how to make it works.
Thank you.

TimAI2

unread,
Aug 24, 2019, 8:04:12 AM8/24/19
to MIT App Inventor Forum
Alternatively, you might want to have a look at using jquery mobile : touch/swipe event


whether the jquery will work in the current webviewer I do not know....

Jami

unread,
Aug 24, 2019, 9:10:05 AM8/24/19
to MIT App Inventor Forum
Hi Tim,
I tried the example but I think there is something is missing. It doesn't show the csv which is in the asset.
sceen.png
Text.html
blocks (1).png

TimAI2

unread,
Aug 24, 2019, 12:07:30 PM8/24/19
to MIT App Inventor Forum
You didn't make any changes to the jquery script to make your text appear ?

Simplify, make it work, then apply to your app.

Jami

unread,
Aug 24, 2019, 3:25:27 PM8/24/19
to MIT App Inventor Forum
Hi Tim,

I have tried many times but I don't know why it doesn't work as I want. Please check the below html if it correct after I have make some changes:

<!DOCTYPE html>
<head>
 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>

            $(document).on("pagecreate","#page1",function() {
            $("p").on("swipe",function() {
               $("span").text("swipe event occurred!!!");
            });
         });
   </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
        

         <div data-role = "main" class = "ui-content">
        
   </body>

</html>

TimAI2

unread,
Aug 24, 2019, 3:36:05 PM8/24/19
to MIT App Inventor Forum
This html file works in my emulator webviewer


<!DOCTYPE html>
<head>

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
<script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swipe",function() {
               $("span").text("swipe event occurred!!!");
            });
         });
</script>

</head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>It will display the text when you swipe here.</p>
            <span style = "color:orange"></span>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html> 


Rami Jami

unread,
Aug 24, 2019, 3:48:27 PM8/24/19
to MIT App Inventor Forum
I think you miss understood me.
I didn"t say that code doesn't. I am saying that I don't know How can I make any changes in it in order to let csv swipe.
I am sorry to explain to you very clear.

TimAI2

unread,
Aug 24, 2019, 4:00:13 PM8/24/19
to MIT App Inventor Forum
The swiping makes the set text appear. You need to change this to make your text appear. You may need to search for "swipe left" and "swipe right" jquery mobile functionalities so your users can move back and forth between the texts. You are going to need some kind of counter variable to keep track of where you are.

Jami

unread,
Aug 25, 2019, 3:28:54 AM8/25/19
to MIT App Inventor Forum
Hello Tim
I have done the html code but I don't know how to call csv:
<!DOCTYPE html>
   <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function(c, a, b, i) {
        i++; if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function(){ scroll(c, a, b, i); }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

</script>

</head>
<body>

      
      <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swipeleft",function(){
               $("span").text("swipeleft!!!");
            });
         });
      </script>
 <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swiperight",function() {
               $("span").text("swiperight!!!");
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>It will display the text when you swipe left side.</p>
            <span style = "color:orange"></span>
         </div>

   </body>
</html>

TimAI2

unread,
Aug 25, 2019, 4:17:15 AM8/25/19
to MIT App Inventor Forum
Try changing

$("span").text("swipeleft!!!");
and
$("span").text("swiperight!!!");

to

$("span").text(window.AppInventor.getWebViewString());

This will only work (if it works) in Companion/compiled app in AI2 and assumes your app is setting WebViewString with a "text"

Jami

unread,
Aug 25, 2019, 4:48:17 AM8/25/19
to MIT App Inventor Forum
I have changed what you said and it's ok but I must swipe on the sentence "It will display the text when you swipe left side"  

 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>


</head>
<body>

      
      <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swipeleft",function(){
               $("span").text(window.AppInventor.getWebViewString());
            });
         });
      </script>
 <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swiperight",function() {
               $("span").text(window.AppInventor.getWebViewString());
swipe2.jpeg

TimAI2

unread,
Aug 25, 2019, 5:19:52 AM8/25/19
to MIT App Inventor Forum
Change

$("p").on("swipeleft",function(){
and

$("p").on("swipeleft",function(){


to

$("body").on("swipeleft",function(){
and
$("body").on("swiperight",function(){



You will now have to work out the interactivity between the html and the app using the webviewstring. As previously mentioned a counter will be needed in the html on each swipe (using a variable!) to send a value back to the app using webviewstring for the app to serve up a different page.

We have worked through all this before, Rami/RamiJami/Ghanem.O/Osama Sayar/Jame Brouwn, in related posts (why do you need to keep changing your name/account ?)

You should also be giving credit where credit is due, the html was originally written by Ghica van Emde Boas, not Jane Brown

Good luck!

Jami

unread,
Aug 25, 2019, 5:38:04 AM8/25/19
to MIT App Inventor Forum
I am sorry for that. However, I like to change my name every time in order to not be a famous and to be get helpped.
Thank you for helping me Tim:)
Now the problem is just swipe only one time then stick.

TimAI2

unread,
Aug 25, 2019, 5:54:31 AM8/25/19
to MIT App Inventor Forum
For anybody else looking for this swipe functionality in their html
here are the bare essentials

<!DOCTYPE html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>


<script>
    $(document).on("pagecreate","#page1",function() {
        $("body").on("swipeleft",function(){
        $("span").text("swipeleft!!!");
        });
    });
</script>
 <script>
    $(document).on("pagecreate","#page1",function() {
        $("body").on("swiperight",function() {
        $("span").text("swiperight!!!");
        });
    });
</script>

</head>
   
<body>
    <div data-role = "page" id = "page1">
        
        <div data-role = "header">
        </div>

        <div data-role = "main" class = "ui-content">
            <span style = "color:orange"></span>
        </div>
        
</div>
</body>

</html>


Jami

unread,
Aug 25, 2019, 7:09:57 AM8/25/19
to MIT App Inventor Forum
I have Change

$("p").on("swipeleft",function(){
and
$("p").on("swipeleft",function(){


to

$("body").on("swipeleft",function(){
and

Jami

unread,
Aug 25, 2019, 7:21:15 AM8/25/19
to MIT App Inventor Forum
Hello Tim,

Please tell me how can I work out the interactivity between the html and the app using the webviewstring?

TimAI2

unread,
Aug 25, 2019, 8:42:45 AM8/25/19
to MIT App Inventor Forum
As mentioned above, we have done all this in previous work, you know how to do it.

Rami Jami

unread,
Aug 25, 2019, 9:06:34 AM8/25/19
to MIT App Inventor Forum
You are right but believe me this thread is more difficult than the previous one.

Ghica

unread,
Aug 25, 2019, 9:25:25 AM8/25/19
to mitappinv...@googlegroups.com
@Tim, I do not think I wrote the html. Maybe Taifun did or W3Schools, maybe part of it. Anyway, I do not want my name in it, so Jane Brown is fine.

@Osama,
I do not think that changing your name will make us help you any sooner. At contrary, we are very annoyed by now.

And, if you do not understand how to communicate between JavaScript/html/Webviewstring, what did you understand then of the app you made earlier? With the sentence highlighting??
Look here for a tutorial about it: http://appinventor.mit.edu/explore/ai2/webview-javascript.html although, at that time the webviewstring changed event was not there yet, which makes communicating a bit simpler.

Did you consider that if you manage to get your example working, it will not work together with your touch the screen - hide the buttons example? So, you have to choose between the two.

My sincere advice to you is: be happy with what you have!
If you find a bug in your existing app, then probably someone will help solve it.
Cheers, Ghica.

Jami

unread,
Aug 25, 2019, 10:38:10 AM8/25/19
to MIT App Inventor Forum
Hi Ghica,

Actually I feel guilty and I am sorry to annoy all of you. You are all really a very good people and helpful. Maybe you know that the sentence highlighting is not working in a proper way as before and still I don't know how it will work if they didn't fix bug as Chris said about the release  n178.

Ghica

unread,
Aug 25, 2019, 10:52:17 AM8/25/19
to MIT App Inventor Forum
I know. If it is really not working with the new release, you should post an as-small-as-possible example .aia that shows the problem (in the other thread). This can help the people at MIT to solve a bug if there is a problem remaining.
Cheers, Ghica.

Jami

unread,
Aug 25, 2019, 10:52:32 AM8/25/19
to MIT App Inventor Forum
Hello Tim,
I think I need to add code in Setwebviewer block but I don't know how to start. Please give me your opinion like previous time if you don't mind. I really appreciate of your help.
blocks.png

Jami

unread,
Aug 25, 2019, 10:56:59 AM8/25/19
to MIT App Inventor Forum
Thank you so much for your good advise. I will make a very small example .aia. and I will post it in the forum.

TimAI2

unread,
Aug 25, 2019, 10:57:19 AM8/25/19
to MIT App Inventor Forum
The original question has been answered.

Go back over your previous work for a solution.

Rami Jami

unread,
Aug 25, 2019, 3:42:33 PM8/25/19
to MIT App Inventor Forum
Hi Tim,

I don't know how to start. Please I need a little help.

Osama

unread,
Aug 26, 2019, 2:34:30 AM8/26/19
to MIT App Inventor Forum
Hi Tim
There is <div between sentence. I don't know how to remove them.


screen.png
Reply all
Reply to author
Forward
0 new messages