lb_setup_ui

Description:

lb setup ui

Logbot Setup UI SDK for Flutter #
Logbot Setup UI to implement the Logbot First Setup procedure over Bluetooth and WiFi to setup a Logbot
IoT easily from a mobile app. This package contains all the widgets necessary to implement the whole
setup procedure. An example application is provided to test the setup procedure.
To customize the graphics to adapt them to your application, the developers should implement the procedure
in their application, extending all the widget classes overriding whats needed (the build method to
customize the graphics, and if necessary other methods to customize error messages, logs, translations etc.).
Requirements #
Dart 2.17 or later
Installation & Usage #
Add the dependencies from pub.dev:
dependencies:
lb_setup_ui:
copied to clipboard
import 'package:lb_setup_ui/lb_setup_ui.dart';

class Example {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("BLE Setup Process"),
),
// This starts the default Setup UI
body: const LbSetupBluetoothPage(),
);
}
}
copied to clipboard
To modify the UI with custom widgets and graphics, all classes must be extended and at least the build method should be overridden:
/// extends LbSetupLanConnectionConfig
class MyCustomLanConfig extends LbSetupLanConnectionConfig {
const MyCustomLanConfig({
Key? key,
required onSuccess,
required onCancel,
}) : super(
key: key,
onSuccess: onSuccess,
onCancel: onCancel,
);

@override
State<MyCustomLanConfig> createState() => _MyCustomLanConfigState();
}

/// extends LbSetupLanConnectionConfigState<MyCustomLanConfig>
class _MyCustomLanConfigState extends LbSetupLanConnectionConfigState<MyCustomLanConfig> {


/// (OPTIONAL) Can also override methods to customize logs, error messages
/// or add functionalities
@override
Future<bool> init() async {
if (!isInitialized) {
MyCustomLogger().log(widget: "LbSetupLanConnectionConfigState", method: "init", message: "Init Called");
isInitialized = true;
try {
return initApiCall();
} catch(e, s) {
MyCustomLogger().error(widget: "LbSetupLanConnectionConfigState", method: "init", message: e.toString(), stack: s);
return false;
}
}
return true;
}

/// Custom UI for the LAN configuration page
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: FutureBuilder(
future: init(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
/// Can customize text with translation etc.
MyCustomText(
text: "first_setup_lan_config".tr(),
align: TextAlign.center,
fontStyle: FontStyle.italic,
),
SizedBox(height: 4.0.h),
/// Can customize fields with widgets designed for your app
MyCustomStringField(
value: formData["ipv4"]["address"],
label: "ip_address".tr(),
placeholder: "192.168.1.100",
onSubmit: (value) {
var result = UtilsManager.validation.validateIp(value);
if (result != null) {
return result;
}
formData["ipv4"]["address"] = value;
},
),
SizedBox(height: 2.0.h),
MyCustomStringField(
value: LogbotSetupUiUtils().prefixToSubnet(formData["ipv4"]["prefix"]) ?? "255.255.255.0",
label: "subnet_mask".tr(),
placeholder: "255.255.255.0",
onSubmit: (value) {
var result = UtilsManager.validation.validateIp(value);
if (result != null) {
return result;
}
formData["ipv4"]["prefix"] = LogbotSetupUiUtils().subnetToPrefix(value) ?? 24;
},
),
SizedBox(height: 4.0.h),
/// Can customize buttons with widget designed for your app
!isLoading ?
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FillButton(
status: isLoading ? "disabled" : "primary",
size: "small",
text: "back".tr(),
icon: FontAwesomeIcons.arrowUp,
onTap: widget.onCancel,
),
FillButton(
status: isLoading ? "disabled" : "primary",
size: "small",
text: "next".tr(),
icon: FontAwesomeIcons.arrowDown,
onTap: submit,
),
],
) : const Center(child: CircularProgressIndicator.adaptive()),
],
);
} else {
return const Center(
child: CircularProgressIndicator.adaptive(),
);
}
}
),
);
}
}
copied to clipboard
Setup Procedure #
The setup procedure can be performed via WiFi or via Bluetooth Low Energy.

WiFi Connection: the user must be connected via WiFi to the Access Point that the device generates when is not configured:

SSID: logbot-wifi-ap
Password: password
copied to clipboard

Bluetooth Connection: The unconfigured device shows as a bluetooth device with ID 00000000. The IoT can be discovered direclty in the mobile app within the setup process, but for iOS users, the device must first be paired to the mobile phone from the settings (Settings > Bluetooth). If the IoT is not paired to the phone, an error message will be shown when trying to start the setup procedure.

The setup procedure is a series of 8 steps that start after the connection to the device:

License Setup
LAN Connection Configuration
Main Connection Selection
Main Connection Configuration
Secondary Connection Selection (Optional)
Secondary Connection Configuration (Optional)
Access Point Configuration (Optional)
Finalization of the Setup and Reboot

The following schema shows the various steps for the configuration of the device, including all the
optional steps based on the previously configured connections (es: Access Point cannot be configured if the WiFi is already in use as a connection).

At the end of the configuration of the connection, a Bonjour page is shown and the device is rebooted.
After the reboot the device should be configured.
There are some additional steps performed by the Logbot Setup UI to confirm the correct configuration of the device.

After the device has rebooted (usually in around a minute), Logbot Discovery is used to scan for devices in the local network. If the device is correcly configured, the device should be visible.
If the device is discovered, an healthcheck to the device's Logbot Setup service is performed to confirm that the service is running correctly.
If these steps complete successfully, the device has completed the configuration successfully.
If these steps do not complete, it doesn't mean the configuration has failed. The device could be still rebooting, or the user is connected to a different network and the device cannot be discovered. If these steps failed but the license activation and rebooting completed, then the configuration completed as a "partial success", meaning that the user will need to manually verify that the device is correctly configured and connecting to Logbot.

If a user was logged in when performing the configuration, and the user has the Editor role, more additional steps are performed:

The list of devices owned by the user is downloaded
If the device is not present in the list, it means that the device must be registered in the Logbot Platform. The user will be asked to insert the device name and it will be inserted in the device collection of the user.
If the device is already registered, the procedure completes.

Tests #
To run all tests:
flutter test
copied to clipboard
Author #
Logbot SRL [email protected]