Author Topic: SimbleeForMobile two screens  (Read 718 times)

Stanley

  • RFduino Newbie
  • *
  • Posts: 7
  • Karma: +0/-0
    • View Profile
SimbleeForMobile two screens
« on: August 13, 2017, 11:36:17 PM »
Hi all,

I am now studying how to use SimbleeForMobile to have two screens on my mobile app. For now, I only added one picture and one function that can generate random number on Screen 1. However, when I tried to change to Screen 2, the picture and number are still there. I wonder if I need a function to clear the previous stuff before running the codes for Screen 2.

Appreciate if someone could help me. Thanks in advance.

RFD_Nelson

  • RFduino Team
  • *****
  • Posts: 43
  • Karma: +0/-0
    • View Profile
Re: SimbleeForMobile two screens
« Reply #1 on: August 14, 2017, 06:38:35 AM »
Hi Stanley,

In order to help you further, can you please attach a copy of your sketch?

Thanks,

Nelson

Stanley

  • RFduino Newbie
  • *
  • Posts: 7
  • Karma: +0/-0
    • View Profile
Re: SimbleeForMobile two screens
« Reply #2 on: August 14, 2017, 06:21:59 PM »
Hi Nelson,

The following is my sketch codes. Thank you for the help.


Code: [Select]

#include <SimbleeForMobile.h>

#include "heart6_png.h"

//
// The ID of the button which displays screen 2
//
int toScreen2ButtonID;

//
// The ID of the button which displays screen 1
//
int toScreen1ButtonID;

//
// The ID of the current screen being displayed
//
int currentScreen;

/*
 * Traditional Arduino setup routine
 *
 * Initialize the SimbleeForMobile environment.
 */
void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println("Setup beginning");
 
  SimbleeForMobile.deviceName = "2 Screens";
  SimbleeForMobile.advertisementData = "Sample";

  // use a shared cache
  SimbleeForMobile.domain = "twoscreens.simblee.com";
 
  // Begin Simble UI
  SimbleeForMobile.begin();
     randomSeed(analogRead(0));
  Serial.println("Setup completed");
}
uint8_t text1;
/*
 * The traditional Arduino loop method
 *
 * Enable SimbleeForMobile functionality by calling the process method
 * each time through the loop. This method must be called regularly for
 * functionality to work.
 */

unsigned long lastUpdated = 0;
unsigned long updateRate = 500; // half a second
void loop() {
 unsigned long loopTime = millis();

   if (SimbleeForMobile.updatable && updateRate < (loopTime - lastUpdated))
  {
    lastUpdated = loopTime;
     int hr = random(60,80);
          char buf1[16];
    sprintf(buf1, "%d", hr);
           SimbleeForMobile.updateText(text1, buf1);
  // put your main code here, to run repeatedly:
  // process must be called in the loop for Simblee UI
  }
  SimbleeForMobile.process(); 
 
}

/*
 * Callback when a Central connects to this device
 *
 * Reset the current screen to non being displayed
 */
void SimbleeForMobile_onConnect()
{
  currentScreen = -1;
}

/*
 * Callback when a Central disconnects from this device
 *
 * Not used in this sketch. Could clean up any resources
 * no longer required.
 */
void SimbleeForMobile_onDisconnect()
{
}

/*
 * SimbleeForMobile ui callback requesting the user interface
 *
 * Check which screen is being requested.
 * If that is the current screen, simply return.
 * If it is a different screen, create the requested screen.
 * A screen request which is out of range, is logged and ignored.
 */
void ui()

  if(SimbleeForMobile.screen == currentScreen) return;
 
  currentScreen = SimbleeForMobile.screen;
  switch(SimbleeForMobile.screen)
  {
    case 1:
      createScreen1();
      break;
       
    case 2:
      createScreen2();
      break;
           
   default:
      Serial.print("ui: Uknown screen requested: ");
      Serial.println(SimbleeForMobile.screen);
  }
}

/*
 * SimbleeForMobile event callback method     
 *
 * An event we've registered for has occur. Process the event.
 * The only events of interest are EVENT_RELEASE which signify a button press.
 * If the button to open the screen not being displayed is pressed, request
 * to show that screen.
 */
void ui_event(event_t &event)
{
//  printEvent(event);
  if(event.id == toScreen1ButtonID && event.type == EVENT_RELEASE && currentScreen == 2)
  {
    SimbleeForMobile.showScreen(1);
  } else if(event.id == toScreen2ButtonID && event.type == EVENT_RELEASE && currentScreen == 1)
  {
    SimbleeForMobile.showScreen(2);
  }
}

/*
 * Create the first screen.
 *
 * The screen simply consists of a label displaying the screen number
 * and a button which swaps screens. Register for events on the button
 * such that we receive notifications when it is pressed.
 */
void createScreen1()
{
    #define  IMAGE2  5
  //
  // Portrait mode is the default, so that isn't required
  // here, but shown for completeness. LANDSCAPE could be
  // used for that orientation.
  //
  SimbleeForMobile.beginScreen(YELLOW, PORTRAIT);
     text1 = SimbleeForMobile.drawText(210, 150, "", BLUE, 45);
    SimbleeForMobile.imageSource(IMAGE2, PNG,  heart6_png, heart6_png_len); 
  SimbleeForMobile.drawImage(IMAGE2,110,100);
      if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_IOS) {
    SimbleeForMobile.drawText(260, 175,  "BPM", BLUE, 20);
    //230,325
  } else if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_ANDROID) {
    SimbleeForMobile.drawText(270, 248, "\xc2\xb0" "C", BLUE);
  } else if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_UNKNOWN) {
    SimbleeForMobile.drawText(270, 248, "C", BLUE);
  }

  int textID = SimbleeForMobile.drawText(80, 60, "Screen 1", BLACK, 40);
  toScreen2ButtonID = SimbleeForMobile.drawButton(100, 200, 100, "Screen 2");

  //
  // Receive notifications when a "release" occurs on the button.
  // Other event notifications are supported and can be combined in this call.
  // I.e. to receive press and release events you'd pass:
  //
  // EVENT_PRESS | EVENT_RELEASE
  //
  // into the function:
  //
  // SimbleeForMobile.setEvents(toScreen2ButtonID, EVENT_PRESS | EVENT_RELEASE);
  //
  // However, you don't want to register for events which are not required as
  // that results in extra traffic.
  //
  SimbleeForMobile.setEvents(toScreen2ButtonID, EVENT_RELEASE);
  SimbleeForMobile.endScreen();
}

/*
 * Create the second screen.
 *
 * The screen simply consists of a label displaying the screen number
 * and a button which swaps screens. Register for events on the button
 * such that we receive notifications when it is pressed.
 */
void createScreen2()
{
   
  SimbleeForMobile.beginScreen(WHITE);
 

  int textID = SimbleeForMobile.drawText(80, 60, "Screen 2", BLACK, 40);
  toScreen1ButtonID = SimbleeForMobile.drawButton(100, 200, 100, "Screen 1");

   
  SimbleeForMobile.setEvents(toScreen1ButtonID, EVENT_RELEASE);
  SimbleeForMobile.endScreen();
}

/*
 * Utility method to print information regarding the given event
 */
void printEvent(event_t &event)
{
  Serial.println("Event:");
  Serial.print("  ID: ");
  Serial.println(event.id);
 
  Serial.print("   Type: ");
  Serial.println(event.type); 

  Serial.print("   Value: ");
  Serial.println(event.value);
 
  Serial.print("   Text: ");
  Serial.println(event.text); 
 
  Serial.print("   Coords: ");
  Serial.print(event.x); 
  Serial.print(","); 
  Serial.println(event.y); 
}


« Last Edit: August 14, 2017, 07:24:32 PM by Stanley »

tolson

  • Global Moderator
  • *****
  • Posts: 880
  • Karma: +21/-0
    • View Profile
    • Thomas Olson Consulting
Re: SimbleeForMobile two screens
« Reply #3 on: August 14, 2017, 07:07:02 PM »
Hi Stanley,

I edited your post for you so it is better readable.

You can/should wrap your sketch between CODE flags.

As far as your code generating the image on both screens... Looks like that is what your code is saying to do. You define, initialize, and drawImage in both createScreen1 and createScreen2.
« Last Edit: August 14, 2017, 07:12:24 PM by tolson »

Stanley

  • RFduino Newbie
  • *
  • Posts: 7
  • Karma: +0/-0
    • View Profile
Re: SimbleeForMobile two screens
« Reply #4 on: August 14, 2017, 07:28:38 PM »
Hi Tolson,

Thank you for the reminding. I made a mistake that I copied wrong codes here. I have deleted the wrong ones. The problem is that, when changing to screen 2 from screen 1, the random number still displays.

Michael Anderson

  • RFduino Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: SimbleeForMobile two screens
« Reply #5 on: August 15, 2017, 08:11:52 AM »
Hi Tolson,

Thank you for the reminding. I made a mistake that I copied wrong codes here. I have deleted the wrong ones. The problem is that, when changing to screen 2 from screen 1, the random number still displays.

Hey Stanley,
Sounds like you are looking for the function call
SimbleeForMobile.setVisible(text1,false);

In this case anytime you call draw for screen 2, you should setVisiblilty for your random number text object ID to false.
Not sure if you need to set it back to true when you draw screen 1 again, I assume the existing draw call for it will make it visible again.

I looked up this function because I did not like to stare at a white blank screen as my Simblee App spent 3-5 seconds downloading my logo image when the app is first opened up, So when screen 1 is created I do this

  int textID = SimbleeForMobile.drawText(1, 1, "Downloading Content, Please wait...", BLACK, 20);
  SimbleeForMobile.imageSource(IMAGE_1, PNG, image4535_png, image4535_png_len);
  SimbleeForMobile.drawImage(IMAGE_1, 10, 7);
  SimbleeForMobile.setVisible(textID,false);

So a downloading message appears on the screen immediately, then after the image is transferred from the Simblee device to the App (depending on size of image could take some time) the message quickly hides itself.
« Last Edit: August 15, 2017, 12:06:47 PM by Michael Anderson »

Stanley

  • RFduino Newbie
  • *
  • Posts: 7
  • Karma: +0/-0
    • View Profile
Re: SimbleeForMobile two screens
« Reply #6 on: August 16, 2017, 10:56:13 PM »
Thank you Anderson. That worked.

Now I have another problem. When I tried to put two images and two random number on Screen 1 only, by the time I switch to Screen 2, the Simblee will crash itself. Could anyone help me?  Thanks in advance.



The following is my codes.

#include <SimbleeForMobile.h>

#include "heart6_png.h"
#include "ss_jpg.h"


int toScreen2ButtonID;
int toScreen1ButtonID;
int currentScreen;

/*
 * Traditional Arduino setup routine
 *
 * Initialize the SimbleeForMobile environment.
 */
void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println("Setup beginning");
 
  SimbleeForMobile.deviceName = "2 Screens";
  SimbleeForMobile.advertisementData = "Sample";

  // use a shared cache
  SimbleeForMobile.domain = "twoscreens.simblee.com";
 
  // Begin Simble UI
  SimbleeForMobile.begin();
 
  randomSeed(analogRead(0));
 
  Serial.println("Setup completed");
}
uint8_t text1;
uint8_t text2;
/*
 * The traditional Arduino loop method
 *
 * Enable SimbleeForMobile functionality by calling the process method
 * each time through the loop. This method must be called regularly for
 * functionality to work.
 */

unsigned long lastUpdated = 0;
unsigned long updateRate = 500; // half a second
void loop() {
 unsigned long loopTime = millis();

   if (SimbleeForMobile.updatable && updateRate < (loopTime - lastUpdated))
  {
    lastUpdated = loopTime;
     
     int hr = random(50,80);
     char buf1[16];
     sprintf(buf1, "%d", hr);
     SimbleeForMobile.updateText(text1, buf1);

     int spo2 = random(95,100);
     char buf2[16];
     sprintf(buf2, "%d", spo2);
     SimbleeForMobile.updateText(text2, buf2);
  }
 
  SimbleeForMobile.process(); 
 
}

/*
 * Callback when a Central connects to this device
 *
 * Reset the current screen to non being displayed
 */
void SimbleeForMobile_onConnect()
{
  currentScreen = -1;
}

/*
 * Callback when a Central disconnects from this device
 *
 * Not used in this sketch. Could clean up any resources
 * no longer required.
 */
void SimbleeForMobile_onDisconnect()
{
}

/*
 * SimbleeForMobile ui callback requesting the user interface
 *
 * Check which screen is being requested.
 * If that is the current screen, simply return.
 * If it is a different screen, create the requested screen.
 * A screen request which is out of range, is logged and ignored.
 */
void ui()

  if(SimbleeForMobile.screen == currentScreen) return;
 
  currentScreen = SimbleeForMobile.screen;
  switch(SimbleeForMobile.screen)
  {
    case 1:
      createScreen1();
      break;
       
    case 2:
      createScreen2();
      break;
           
   default:
      Serial.print("ui: Uknown screen requested: ");
      Serial.println(SimbleeForMobile.screen);
  }
}

/*
 * SimbleeForMobile event callback method     
 *
 * An event we've registered for has occur. Process the event.
 * The only events of interest are EVENT_RELEASE which signify a button press.
 * If the button to open the screen not being displayed is pressed, request
 * to show that screen.
 */
void ui_event(event_t &event)
{
//  printEvent(event);
  if(event.id == toScreen1ButtonID && event.type == EVENT_RELEASE && currentScreen == 2)
  {
    SimbleeForMobile.showScreen(1);
  } else if(event.id == toScreen2ButtonID && event.type == EVENT_RELEASE && currentScreen == 1)
  {
    SimbleeForMobile.showScreen(2);
  }
}

/*
 * Create the first screen.
 
 */
void createScreen1()
{
    #define  IMAGE2  5
    #define  IMAGE3  6
 
  // Portrait mode is the default, so that isn't required
  // here, but shown for completeness. LANDSCAPE could be
  // used for that orientation.
  SimbleeForMobile.beginScreen(YELLOW, PORTRAIT);
   
  text1 = SimbleeForMobile.drawText(210, 150, "", BLUE, 45);
   
  SimbleeForMobile.imageSource(IMAGE2, PNG,  heart6_png, heart6_png_len); 
  SimbleeForMobile.drawImage(IMAGE2,110,100);
     
    if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_IOS) {
    SimbleeForMobile.drawText(260, 175,  "BPM", BLUE, 20);
    //230,325
  } else if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_ANDROID) {
    SimbleeForMobile.drawText(270, 248, "BPM", BLUE);
  } else if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_UNKNOWN) {
    SimbleeForMobile.drawText(270, 248, "BPM", BLUE);
  }

 
 text2 = SimbleeForMobile.drawText(230, 300, "", BLUE, 45);
  //160 470
 
  SimbleeForMobile.imageSource(IMAGE3, JPG,  ss_jpg, ss_jpg_len); 
  SimbleeForMobile.drawImage(IMAGE3,110,270);
  //30 460

 
    if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_IOS) {
    SimbleeForMobile.drawText(280, 305,  "%", BLUE, 40);
    //230 475
  } else if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_ANDROID) {
    SimbleeForMobile.drawText(280, 305, "%", BLUE);
  } else if(SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_UNKNOWN) {
    SimbleeForMobile.drawText(280, 305, "%", BLUE);
  }



  int textID = SimbleeForMobile.drawText(80, 60, "Screen 1", BLACK, 40);
  toScreen2ButtonID = SimbleeForMobile.drawButton(100, 200, 100, "Screen 2");

 
  SimbleeForMobile.setEvents(toScreen2ButtonID, EVENT_RELEASE);
  SimbleeForMobile.endScreen();
}

/*
 * Create the second screen.

 */
void createScreen2()
{
   

  SimbleeForMobile.beginScreen(WHITE);
 
 


  int textID = SimbleeForMobile.drawText(80, 60, "Screen 2", BLACK, 40);
  toScreen1ButtonID = SimbleeForMobile.drawButton(100, 200, 100, "Screen 1");
 

 
 

  SimbleeForMobile.setEvents(toScreen1ButtonID, EVENT_RELEASE);
  SimbleeForMobile.endScreen();
}

/*
 * Utility method to print information regarding the given event
 */
void printEvent(event_t &event)
{
  Serial.println("Event:");
  Serial.print("  ID: ");
  Serial.println(event.id);
 
  Serial.print("   Type: ");
  Serial.println(event.type); 

  Serial.print("   Value: ");
  Serial.println(event.value);
 
  Serial.print("   Text: ");
  Serial.println(event.text); 
 
  Serial.print("   Coords: ");
  Serial.print(event.x); 
  Serial.print(","); 
  Serial.println(event.y); 
}