Canonical Voices

Benjamin Zeller

Releasing the 4.1.0 Ubuntu SDK IDE

We are happy to announce the release of the Ubuntu SDK IDE 4.1.0 for the Trusty, Xenial and Yakkety Ubuntu series.

The testing phase took longer than we have expected but finally we are ready. To compensate this delay we have even upgraded the IDE to the most recent 4.1.0 QtCreator.

Based on QtCreator 4.1.0

We have based the new IDE on the most recent QtCreator upstream release, which brings a lot of new features and fixes. To see whats new there just check out: http://blog.qt.io/blog/2016/08/25/qt-creator-4-1-0-released/.

LXD based backend

The click chroot based builders are now deprecated. LXD allows us to download and use pre built SDK images instead of having to bootstrap them every time a new build target is created.  These LXD containers are used to run the applications from the IDE. Which means that the host machine of the SDK IDE does not need any runtime dependencies.

Get started

It is good to know that all existing schroot based builders will not be used by the IDE anymore. The click chroots will remain on the host but will be decoupled from the Ubuntu SDK IDE. If they are not required otherwise just remove them using the Ubuntu dialog in Tools->Options.

If the beta IDE was used already make sure to recreate all containers, there were some bugs in the images that we do not fix automatically.

To get the new IDE use:

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa

sudo apt update && sudo apt install ubuntu-sdk-ide

Check our first blog post about the LXD based IDE for more detailed instructions:

https://developer.ubuntu.com/en/blog/2016/06/14/calling-testers-new-ubuntu-sdk-ide-post/

Read more
Prakash

The Internet of Things (IoT) has the potential to become a $4-11 trillion market by 2025, contributing 11% to the global economy, according to a McKinsey Global Institute report, The Internet of Things: Mapping the value beyond the hype.

IoT is about connecting sensors and devices to the Internet, collecting their data and automating processes and decision-making. It touches almost every industry and will soon be in your house, your office, your company, your city, your country and your planet.

IoT, however, does face a host of issues—lack of standards being a big one. Remember the days when there was no standard USB phone charger and every phone manufacturer chose its “own standard”? The Internet and mobile have evolved rapidly because they are built on open standards and often open source standards. IoT is being held back due to the lack of standards. Devices are generating data in proprietary ways, which can’t be easily shared with other devices. Hence, no synergetic actions can be taken.

Security is another issue. In mid-2015, a connected car got hacked and the two hackers were able to take full control of the car—the steering, brakes and even its engine. With everything becoming connected through IoT, security will be key for IoT to be successful in the long term. IoT will continue to require better security solutions than what is currently available. The best way to secure a system is to allow anybody to inspect the code and contribute a patch. Closed source is just hiding problems, not making solutions more secure. Through open source more eyes can look at the code and solve any security issues.

IoT is currently a collection of technical solutions for an unvalidated set of customer problems. Years ago people would ask: “Why do I need a smartphone?” Angry Birds, WhatsApp, Pokémon GO, and many other apps have had an enormous effect on what we do with a phone. Most of us only make calls a fraction of the time we spend on our phones.

We don’t know what an Angry Birds or Pokémon GO equivalent for a fridge, a robot, a drone, a router, etc, looks like. However, by providing an app-based infrastructure, we make it easy for software developers to create apps that can derive much more value from any smart device.

App stores on devices will help us find the IoT Pokémon GO for lots of new smart devices. By open sourcing the technology to app-enable any type of smart device, we are accelerating this discovery process. Any enterprise will be able to run its own app store.

Today we can start IoT-enabling devices around us but managing large deployments of devices is hard.

You can’t go to a PC model where you are expected to take actions, like cleaning up disk space, to keep things going smoothly. Devices that are connected to the Internet will need software upgrades when security bugs are discovered. You will not want these upgrades to fail and stop the device from working. Even if the device is cheap, digging a hole in the street to get a device out of the ground or getting scaffolding to get if off the roof means the price of the device will be irrelevant if a software update fails.

By open sourcing a solution for transactional updates, any update that fails can be easily rolled back to the last working version. This will allow any developer, device manufacturer and enterprise to focus their efforts on solving real customer problems and not reinventing the wheel.

To give you an example, today every large building has IP (Internet protocol) security cameras. The only intelligence these cameras have is that they can sense motion. They will send everything they see to a central system where somebody needs to check the streams manually. All data will be recorded but finding that one image that matters is still really hard.

By app-enabling IP security cameras and providing them with trained artificial intelligence (AI) models, IP cameras will be able to recognise the person, animal or object in front of them. A rabbit on the grass can be ignored. An unknown person in the middle of the night generates a potential security alert. A known criminal with a weapon will make sure the police gets automatically warned.

IoT will initially be used to reduce costs. Smart meters will negotiate with power generation companies when electricity is cheapest. Home appliances like washing and drying machines will choose the most economical times to wash and dry your clothes. Your house will know you are home and it will make sure the temperature and ambiance is just the way you like it. Your house will not waste energy on warming or cooling when you are not home. In the office technicians will come and fix the copier before it breaks. Industrial 3D (three-dimensional) printers will print substitution parts when they are needed.

The mid- and long-term IoT future will, however, bring more change. Autonomous cars will be rented, not owned. Owning a car means you have it parked 95% of the time. If the same car can be used to transport many people on the same day, personal transport-as-a-service will cost a fraction of the cost of owning a car. You also won’t need city parking.

Vending machines can have app stores, iris scanners, touch screens, and more. All of a sudden you can use a vending machine to make an international money transfer to family on the other side of the world. An app-enabled MRI (magnetic resonance imaging) scanner will look for thousands of symptoms categorized by the health risks based on your DNA profile.

Automatic sewing robots will make personalised clothes that you can try on before they exist via digital mirrors and augmented reality. Your city will pick up your garbage when it is full and you will only pay for what you waste, all done by autonomous trucks.

When the world was affected by the Y2K (Year 2000) problem, India was safe as it didn’t have a lot of the legacy mainframes and mini computers which were affected. India has the same advantage today with IoT. The country doesn’t have many IoT deployments, so it can choose the right approach before any deployment happens.

India is able to choose open source and open standards when deploying IoT. This will give India huge advantages today and help prevent future problems. India has one of the most tech-savvy populations. Cheap hardware like Raspberry Pi will allow Indian start-ups and enterprises to dream up new IoT solutions without breaking the bank.

By using open source IoT app standards, Indian entrepreneurs will be able to sell their IoT apps globally. App store customers can run these apps on any type of enterprise or industrial hardware. India’s software industry is uniquely positioned to benefit from IoT. India can combine low-cost, innovation and revenue generation in any future IoT solution. IoT is the next big thing, and India should do everything possible to drive it.

This was published at Mint Newspaper

Read more
Victor Palau

In order to test k8s you can always deploy a single-node setup locally using minikube, however it is a bit limited if you want to test interactions that require your services to be externally accessible from a mobile or web front-end.

For this reason, I created a basic k8s setup for a Core OS single node in Azure using https://coreos.com/kubernetes/docs/latest/getting-started.html . Once I did this, I decided to automate its deployment via script.

It requires a Core OS instance running, then connect to it and:

git clone https://github.com/vtuson/k8single.git k8
cd k8
./kubeform.sh [myip-address] –> ip associated to eth, you can find it using ifconfig

This will deploy k8 into a single node, it sets up kubectl in the node and deploys skydns add on.

It also includes a busybox node file that can be deployed by:

kubectl create -f files/busybox

This might come useful to debug issues with the set up. To execute commands in busybox run:
kubectl exec busybox — [command]

The script and config files can be access at https://github.com/vtuson/k8single

If you hit any issues while deploying k8s in a single node a few things worth checking are:


sudo systemctl status etcd
sudo systemctl status flanneld
sudo systemctl status docker

Also it is worth checking what docker containers are running and if necessarily check the logs

docker ps -a
docker logs [container-id]


Read more
Michael Hall

Snaps are a great way to get the most up to date applications on your desktop without putting the security or stability or your system at risk. I’ve been snapping up a bunch of things lately and the potential this new paradigm offers is going to be revolutionary. Unfortunately nothing comes for free, and the security of snaps comes with some necessary tradeoffs like isolation and confinement, which reduces some of the power and flexibility we’ve become used to as Linux users.

But now the developers of the snappy system (snapd, snap-confine and snapcraft) are giving us back some of that missing flexibility in the form of a new “content” interface which allows you to share files (executables, libraries, or data) between the snap packages that you develop. I decided to take this new interface for a test drive using one of the applications I had recently snapped: Geany, my editor of choice. Geany has the ability to load plugins to extend it’s functionality, and infact has a set of plugins available in a separate Github repository from the application itself.

I already had a working snap for Geany, so the next thing I had to do was create a snap for the plugins. Like Geany itself, the plugins are hosted on GitHub and have a nice build configuration already, so turning it into a snap was pretty trivial. I used the autotools plugin in Snapcraft to pull the git source and build all of the available plugins. Because my Geany snap was built with Gtk+ 3, I had to build the plugins for the same toolkit, but other than that I didn’t have to do anything special.

parts:
 all-plugins:
 plugin: autotools
 source: git@github.com:geany/geany-plugins.git
 source-type: git
 configflags: [--enable-gtk3=yes --enable-all-plugins]

Now that I had a geany.snap and geany-plugins.snap, the next step was to get them working together. Specifically I wanted Geany to be able to see and load the plugin files from the plugins snap, so it was really just a one-way sharing. To do this I had to create both a slot and a plug using the content interface. Usually when you’re building snap you only use plugs, such as network or x11, because you are consuming services provided by the core OS. In those cases also you just have to provide the interface name in the list of plugs, because the interface and the plug have the same name.

But with the content interface you need to do more than that. Because different snaps will provide different content, and a single snap can provide multiple kinds of content, you have to define a new name that is specific to what content you are sharing. So in my geany-plugins snapcraft.yaml I defined a new kind of content that I called geany-plugins-all (because it contains all the geany plugins in the snap), and I put that into a slot called geany-plugins-slot which is how we will refer to it later. I told snapcraft that this new slot was using the content interface, and then finally told it what content to share across that interface, which for geany-plugins was the entire snap’s content.

slots:
 geany-plugins-slot:
 content: geany-plugins-all
 interface: content
 read:
 - /

With that I had one half of the content interface defined. I had a geany-plugins.snap that was able to share all of it’s content with another snap. The next step was to implement the plug half of the interface in my existing geany.snap. This time instead of using a slots: section I would define a plugs: section, with a new plug named geany-plugins-plug and again specifying the interface to be content just like in the slot. Here again I had to specify the content by name, which had to match the geany-plugins-all that was used in the slot. The names of the plug and slot are only relevant to the user who needs to connect them, it’s this content name that snapd uses to make sure they can be connected in the first place. Finally I had to give the plug a target directory for where the shared content will be put. I chose a directory called plugins, and when the snaps are connected the geany-plugins.snap content will be bind-mounted into this directory in the geany.snap

plugs:
 geany-plugins-plug:
 content: geany-plugins-all
 default-provider: geany-plugins
 interface: content
 target: plugins

Lastly I needed to tell snapcraft which app would use this interface. Since the Geany snap only has one, I added it there.

apps:
 geany:
 command: gtk-launch geany
 plugs: [x11, unity7, home, geany-plugins-plug]

Once the snaps were built, I could install them and the new plug and slot were automatically connected

$ snap interfaces
Slot                             Plug
geany-plugins:geany-plugins-slot geany:geany-plugins-plug

Now that put the plugins into the application’s snap space, but it wasn’t enough for Geany to actually find them. To do that I used Geany’s Extra plugin path preferences to point it to the location of the shared plugin files.

Screenshot from 2016-08-30 16-27-12

After doing that, I could open the Plugin manager and see all of the newly shared plugins. Not all of them work, and some assume specific install locations or access to other parts of the filesystem that they won’t have being in a snap. The Geany developers warned me about that, but the ones I really wanted appear to work.

Screenshot from 2016-08-30 16-29-54

Read more
Daniel Holbach

I’m looking forward to next week, as

Going-To-Akademy-2016On Wednesday I’m going to give this workshop

So if you are interested in learning how to publish software easily and directly to users, this might be just for you.

Snaps are self-contained, confined apps, which run across a variety of Linux systems. The process of snapping software is very straight-forward and publishing them is very quick as well. The whole process offers many things upstreams and app publishers have been asking for years.

The workshop is interactive, all that’s required is that you either have VirtualBox or qemu installed or run any flavour of Ubuntu 16.04 or later. I’m going to bring USB sticks with images.

The workshop will consist of three very straight-forward parts:

  • Using the snap command to find, install, remove, update and revert software installations.
  • Using snapcraft to build and publish software.
  • Taking a look at KDE/Qt software and see how it’s snapped.

A few words about your host of the session: I’m Daniel Holbach, I have been part of the Ubuntu community since its very early days and work for Canonical on the Community team. Right now I’m working closely with the Snappy team on making publishing software as much fun as it should be.

See you next Wednesday!

Read more
Alan Griffiths

An Example Mir Desktop Environment

The world of Mir

Mir is a set of libraries supporting the development of display servers, desktop environments, shells and implementing toolkit support for applications running on them.

As part of their “convergence” of computing devices Canonical are committed to providing Mir on a range of platforms including desktops, phones, tablets and “the internet of thing”. You can read about the work to provide it as a “snap” in the “internet of things” on Kevin Gunn’s blog [kg’s blog].

Toolkits and other “client” platforms that have support for Mir include GTK, Qt and SDL – which mean that applications using these can work on Mir. There’s a separate Xmir project to support X11 applications on Mir.

On the driver side of things Mir works with Mesa on desktop-like systems and, using libhybris, on an android based stack on a number of devices. The Mesa support is a work in progress and Ubuntu carries a set of patches to enable it. There are some notes about how to incorporate these on other platforms here: [Enabling Mir EGL]. Work is in progress to upstream Mir support.

The “Mir Abstraction Layer” (MirAL) packages the server-side functionality in a way that makes it easy to use. My previous post[MirAL] introduced MirAL in more detail.

Before we begin

If you want to experiment with this code I suggest using Ubuntu 16.04 or later on desktop for the reasons mentioned above. On an Ubuntu phone you can use the current stable version with this code, but doing development on a phone is a whole other article. On other distributions you likely need to patch Mesa and rebuild toolkits with Mir support enabled.

Having got an Ubuntu desktop you also need to install MirAL, at present this is not available from the Ubuntu archives, so you have to build and install it yourself:

$ sudo apt-get install devscripts equivs bzr
$ bzr branch lp:miral
$ sudo mk-build-deps -i --build-dep miral/debian/control
$ mkdir miral/build
$ cd miral/build
$ cmake ..
$ make
$ sudo make install

egmde [Example Mir Desktop Environment]

To illustrate MirAL I’m going to show what is involved in writing a (very simple) window manager. It runs on desktops, tablets and phones and supports keyboard, mouse and touch input. It will support applications using the GTK and Qt toolkits, SDL applications and (using Xmir) X11 applications.

The full code for this example is available on github:

$ git clone https://github.com/AlanGriffiths/egmde.git

Naturally, the code is likely to evolve, especially if I write a follow-up article but the version presented here is tagged v1.0. Assuming that you’ve MirAL installed as described above you can build it as follows:

$ mkdir egmde/build
$ cd egmde/build
$ cmake ..
$ make

The example code

A lot of the functionality (default placement of windows, menus etc.) comes with the MirAL library. For this exercise we’ll implement one class and write a main function that injects it into MirAL. The main program looks like this:

int main(int argc, char const* argv[])
{
    miral::MirRunner runner{argc, argv};

    return runner.run_with(
        {
            set_window_managment_policy<ExampleWindowManagerPolicy>()
        });
}

Yes, you’ve guessed it: the class we’ll be implementing is ExampleWindowManagerPolicy. It looks like this:

class ExampleWindowManagerPolicy : public CanonicalWindowManagerPolicy
{
public:
    using CanonicalWindowManagerPolicy::CanonicalWindowManagerPolicy;

    // Switch apps  : Alt+Tab
    // Switch window: Alt+`
    // Close window : Alt-F4
    bool handle_keyboard_event(MirKeyboardEvent const* event) override;

    // Switch apps  : click on the corresponding window
    // Switch window: click on the corresponding window
    // Move window  : Alt-leftmousebutton drag
    // Resize window: Alt-middle_button drag
    bool handle_pointer_event(MirPointerEvent const* event) override;

    // Switch apps  : tap on the corresponding window
    // Switch window: tap on the corresponding window
    // Move window  : three finger drag
    // Resize window: three finger pinch
    bool handle_touch_event(MirTouchEvent const* event) override;

private:
    void pointer_resize(Window const& window, Point cursor, Point old_cursor);
    void resize(WindowInfo& window_info, Point new_pos, Size new_size);

    // State held for move/resize by pointer
    Point old_cursor{};
    bool resizing = false;
    bool is_left_resize = false;
    bool is_top_resize = false;

    // State held for move/resize by touch
    int old_touch_pinch_top = 0;
    int old_touch_pinch_left = 0;
    int old_touch_pinch_width = 0;
    int old_touch_pinch_height = 0;
};

For this simple example the only functionality we’ll be providing is the handling of input events to allow the user to switch between applications and windows and to resize and move windows.

We only need to provide three handle_XXX_event() functions as we’re relying on the default behaviour for everything else. The first of these functions is the simplest:

bool ExampleWindowManagerPolicy::handle_keyboard_event(MirKeyboardEvent const* event)
{
    auto const action = mir_keyboard_event_action(event);
    auto const shift_state = mir_keyboard_event_modifiers(event) & shift_states;

    if (action == mir_keyboard_action_down &&
        shift_state == mir_input_event_modifier_alt)
    {
        switch (mir_keyboard_event_scan_code(event))
        {
        case KEY_F4:
            tools.ask_client_to_close(tools.active_window());
            return true;

        case KEY_TAB:
            tools.focus_next_application();
            return true;

        case KEY_GRAVE:
            tools.focus_next_within_application();
            return true;

        }
    }

    return false;
}

I don’t think this needs a lot of explanation: we select key presses while only the Alt button is pressed and act according to the button pressed.

The other two functions are a bit longer as they need to remember some state in order to interpret mouse or touchpad gestures. There’s in them nothing I consider worth pointing out here and the full code is available on github. There’s not much:

$ wc *
15 28 446 CMakeLists.txt
357 957 10528 egmde.cpp
372 985 10974 total

I have much to compare it with, bit I don’t think 372 lines is bad for a functional window manager.

Running egmde

Once egdme has been built you can run it in two modes: the simplest is the “Mir-on-X” mode:

$ ./egmde

This will produce a rather boring black “Mir-on-X” window. You can attach Mir clients to this:

$ miral-run gnome-system-monitor
$ miral-run gnome-terminal

These will run in the window and make it less boring. You can also have egmde launch them when it starts as follows:

$ ./egmde --startup gnome-terminal:gnome-system-monitor

If you don’t want to run in a window under X11 you can also give egmde access to your hardware directly by running it as root and specifying a “virtual terminal”. But I think it is probably better to use mir_demo_server in “system-compositor” mode to handle the hardware and launch egdme a normal user.

$ sudo apt install mir-demos
$ sudo mir_demo_server --vt 3 --window-manager system-compositor

You’ll find this switches you to vt3, switch back with Ctrl-Alt-F7 and, from another terminal, you can connect egdme to this. (We need the VT switch here as the host mir_demo_server is paused while X11 is in control.)

$ sudo chvt 3&&./egmde --host /tmp/mir_socket --startup gnome-terminal

You don’t have to start the gnome-terminal, but it is convenient as you can launch other applications. For example:

$ mir_demo_client_eglplasma

Conclusion

I hope that the egmde example is enough to spark someone’s interest in MirAL and to provide a starting point for developing something more ambitious.

Much of what has been discussed is a work-in-progress, especially MirAL which I hope to get added to the Ubuntu archives soon. I am optimistic this will happen as it is in the interests of both Canonical and the wider community to have a stable server ABI against which to write desktop environments (including Unity8). Indeed I’ve been working with the main developer of the QtMir abstraction layer to migrate it to MirAL.

Similarly, a significant portion of the work needed on Mesa to support Mir is similar to the work to support Wayland/Weston and everyone would benefit from cleaning this up (and, for example, removing hard dependencies on X11).

Read more
Inayaili de León Persson

August’s reading list

August has been a quiet month, as many of team have taken some time off to enjoy the unusually lovely London summer weather, but we have a few great links to share with you that were shared by the design team this month:

  1. Developing a Crisis Communication Strategy
  2. Accessibility Guidelines
  3. An Evening with Cult Sensation – Randall Munroe
  4. Clearleft Public Speaking Workshop in Brighton
  5. Hello Color
  6. The best and worst Olympic logo designs throughout the ages, according to the man who created I <3 NY
  7. Readability Test Tool
  8. Breadcrumbs For Web Sites: What, When and How

Thank you to Joe, Peter, Steph and me for the links this month!

Read more
UbuntuTouch

[原]LeMaker Guitar Snappy Ubuntu安装体验

我们知道LeMaker的版子是支持Ubuntu Core的.具体的信息可以在地址找到.在这篇文章中,我们介绍如何安装Ubuntu Core到LeMaker的板子中去.


1.准备工作


LeMaker Guitar + LeMaker Guitar Baseboard Rev.B 一套

电源适配器一套
PC主机一套
Snappy Ubuntu SD卡镜像(http://mirror.lemaker.org/Snappy_Ubuntu_16_For_Guitar_SD_Beta2.7z


2.更新升级EMMC里面的系统


虽然我们用的是SD卡的镜像,但是由于LeMaker Guitar的早期板子的出厂emmc系统使用的旧版本固件,新旧固件在显示框架上面有很大的改动,不能混用,所以建议首先将板子emmc里面系统镜像升级到最新目前网站上面提供的任意系统的最新版本。

系统下载:http://www.lemaker.org/product-guitar-resource.html , 任意选择一个系统的最新emmc版本的下载。
EMMC系统安装方法见说明,很容易:http://wiki.lemaker.org/LeMaker_Guitar:Quick_Start#Installing_OS_image_into_eMMC_NAND_Flash


EMMC里面的系统升级安装完成后,先插上电源,不要插SD卡,确认EMMC里面的系统是跑起来了,然后断开电源。如果EMMC系统运行没问题,才能开始下面一步。


3. 将下载的SD卡的系统镜像烧录到SD卡中


我使用的windows电脑。下载一个SDFormatter软件和win32 Disk Imager。

(1)将SD卡通过USB读卡器插入到电脑上面,建议一定要USB读卡器,否则会导致烧录不成功。
(2)使用SDFormatter软件格式化SD卡。
(3)使用win32 disk imager软件载入下载的系统镜像,并且烧录到SD卡中。
烧录成功后拔下SD卡。


当然你也可以用Linux的电脑来完成上面步骤,可以先通过fdisk和mkfs等命令格式化SD卡,然后通过dd命令烧录系统镜像即可。我相信,玩Linux的人应该这几个命令是比较熟悉的。


4.将SD卡插入到Guitar板子中上电启动。由于Snappy Ubuntu Core不带桌面,所以HDMI输出显示的是命令行模式。

作者:UbuntuTouch 发表于2016/9/12 7:21:00 原文链接
阅读:175 评论:0 查看评论

Read more
UbuntuTouch

[原]如何把魅族Pro 5刷成Ubuntu手机

对于一下Ubuntu的粉丝来说,能够把魅族的手机刷成Ubuntu手机是一件非常幸运的事.我找到了一篇这样的文章.不过大家需要小心.我对下面这个链接的内容没有做任何的验证.希望大家本着自己对自己负责的原则.我们对里面的内容,不做任何的负责.


How to flash Meizu Pro 5 to Ubuntu Touch


中文教程:http://weibo.com/ttarticle/p/show?id=2309404019204142568347

作者:UbuntuTouch 发表于2016/9/12 14:02:55 原文链接
阅读:504 评论:0 查看评论

Read more
UbuntuTouch

在这篇文章中,我们将介绍一个崭新的工具snapcraft-gui来帮我们开发snap应用.对于一些刚开始开发snap应用的开发者来说,很多的命令及格式对它们来说非常不熟悉.我们可以利用现有的一个含有GUI的Qt应用来帮助我们来创建一个崭新的应用或用来管理我们已经创建好的一个应用.我们再也不需要那些繁琐的命令来帮我们了.我们只需要做的就是按下工具里面的按钮或在文本输入框中直接编辑我们的snapcraft.yaml项目文件即可.


1)下载及安装


我们可以在如下的地址:


找到这个项目的开源地址.我们可以在地址下载它的最新的发布.它目前有deb包.当我们下载完后,只需要双击就可以安装这个debian包了.请注意,由于目前开发snap的应用只限于在Ubuntu 16.04及以上的版本上,我们需要将我们的Ubuntu桌面升级到相应的版本.

等安装完我们的应用后,我们直接在dash中找到这个应用:






在上面我们可以看到应用启动后的界面.


2)使用snapcraft-gui来创建及管理我们的snap项目


首先,我们可以利用snapcraft-gui项目来管理我们已经创建的一个项目.比如我们可以在地址:


下载我之前做过的一个项目:

$ git clone https://github.com/liu-xiao-guo/helloworld-demo

我们可以选择"Open (yaml)"这个按钮导入我们已经创建的项目:


我们可以通过这个界面来管理我们的snapcraft.yaml文件(比如修改并保存).当然我们也可以按照我们build一个snap包的顺序点击按钮进行打包我们的snap.


我们可以在工具的右上角发现这些build的步骤.当然我们也可以选择针对我们项目中的某个part进行单独操作.这特别适合于有些part的编译及下载需要很长的时间.如果这个part没有改动,我们不需要在重新build时clean它,进而节省我们的时间.

我们也可以关掉当前的项目,并点击"New (init)"来创建一个崭新的项目(snapcraft.yaml),比如:




我们可以在上面的工具中,编辑我们的snapcraft.yaml,并调试我们的最终的项目.

如果你想对snap有更多的了解,请参阅我的文章:安装snap应用到Ubuntu 16.4桌面系统

作者:UbuntuTouch 发表于2016/9/19 10:15:54 原文链接
阅读:92 评论:0 查看评论

Read more
UbuntuTouch

我们可以利用Ubuntu SDK中的GeocodeModel来在进行地理编码.比如说,我们给出一个地名,通过GeocodeModel来查询该地理位置的具体的信息,比如经度维度,街道信息等.在今天的文章中,我们通过一个简单的例程来展示如何查询一个地点.

就像我们的API文档中介绍的那样:

    GeocodeModel {
        id: geocodeModel
        plugin: plugin
        autoUpdate: false

        onStatusChanged: {
            mymodel.clear()
            console.log("onStatusChanged")
            if ( status == GeocodeModel.Ready ) {
                var count = geocodeModel.count
                console.log("count: " + geocodeModel.count)
                for ( var i = 0; i < count; i ++ ) {
                    var location = geocodeModel.get(i);
                    mymodel.append( {"location": location})
                }
            }
        }

        onLocationsChanged: {
            console.log("onStatusChanged")
        }

        Component.onCompleted: {
            query = "中国 北京 朝阳 望京"
            update()
        }
    }
在上面的代码中,当我们的GeocodeModel被装载后,我们发送一个查询的请求:

            query = "中国 北京 朝阳 望京"
            update()
当这个请求有结果回来后,在我们的onStatusChanged中返回我们所需要的结果.我们可以通过列表的方式显示我们所需要的结果.我们所有的代码为:

Main.qml


import QtQuick 2.4
import Ubuntu.Components 1.3
import QtLocation 5.3
import QtPositioning 5.2

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "geocodemodel.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Plugin {
        id: plugin
        name: "osm"
    }

    ListModel {
        id: mymodel
    }

    PositionSource {
        id: me
        active: true
        updateInterval: 1000
        preferredPositioningMethods: PositionSource.AllPositioningMethods
        onPositionChanged: {
            console.log("lat: " + position.coordinate.latitude + " longitude: " +
                        position.coordinate.longitude);
            console.log(position.coordinate)
            console.log("mapzoom level: " + map.zoomLevel)
            map.coordinate = position.coordinate
        }

        onSourceErrorChanged: {
            console.log("Source error: " + sourceError);
        }
    }

    GeocodeModel {
        id: geocodeModel
        plugin: plugin
        autoUpdate: false

        onStatusChanged: {
            mymodel.clear()
            console.log("onStatusChanged")
            if ( status == GeocodeModel.Ready ) {
                var count = geocodeModel.count
                console.log("count: " + geocodeModel.count)
                for ( var i = 0; i < count; i ++ ) {
                    var location = geocodeModel.get(i);
                    mymodel.append( {"location": location})
                }
            }
        }

        onLocationsChanged: {
            console.log("onStatusChanged")
        }

        Component.onCompleted: {
            query = "中国 北京 朝阳 望京"
            update()
        }
    }

    Page {
        id: page
        header: standardHeader

        PageHeader {
            id: standardHeader
            visible: page.header === standardHeader
            title: "Geocoding"
            trailingActionBar.actions: [
                Action {
                    iconName: "edit"
                    text: "Edit"
                    onTriggered: page.header = editHeader
                }
            ]
        }

        PageHeader {
            id: editHeader
            visible: page.header === editHeader
            leadingActionBar.actions: [
                Action {
                    iconName: "back"
                    text: "Back"
                    onTriggered: {
                        page.header = standardHeader
                    }
                }
            ]
            contents: TextField {
                id: input
                anchors {
                    left: parent.left
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                placeholderText: "input words .."
                text: "中国 北京 朝阳 望京"

                onAccepted: {
                    geocodeModel.query = text
                    geocodeModel.update()
                }
            }
        }

        Item  {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: page.header.bottom
            }

            Column {
                anchors.fill: parent

                ListView {
                    id: listview
                    clip: true
                    width: parent.width
                    height: parent.height/3
                    opacity: 0.5
                    model: mymodel
                    delegate: Item {
                        id: delegate
                        width: listview.width
                        height: layout.childrenRect.height + units.gu(0.5)

                        Column {
                            id: layout
                            width: parent.width

                            Text {
                                width: parent.width
                                text: location.address.text
                                wrapMode: Text.WordWrap
                            }

                            Text {
                                text: "(" + location.coordinate.longitude + ", " +
                                      location.coordinate.latitude + ")"
                            }

                            Rectangle {
                                width: parent.width
                                height: units.gu(0.1)
                                color: "green"
                            }
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                console.log("it is clicked")
                                map.coordinate = location.coordinate
                                // We do not need the position info any more
                                me.active = false
                            }
                        }
                    }
                }

                Map {
                    id: map
                    width: parent.width
                    height: parent.height*2/3
                    property var coordinate

                    plugin : Plugin {
                        name: "osm"
                    }

                    zoomLevel: 14
                    center: coordinate

                    MapCircle {
                        center: map.coordinate
                        radius: units.gu(3)
                        color: "red"
                    }

                    Component.onCompleted: {
                        zoomLevel = 14
                    }
                }
            }
        }

        Component.onCompleted: {
            console.log("geocodeModel limit: " + geocodeModel.limit)
        }
    }
}

运行我们的应用:

   
 

整个项目的源码:https://github.com/liu-xiao-guo/geocodemodel

作者:UbuntuTouch 发表于2016/6/7 13:54:14 原文链接
阅读:602 评论:0 查看评论

Read more
UbuntuTouch

在这篇文章中,我们将介绍如何在snap系统中进行交叉汇编来把我们的应用编译并安装到目标机器中.我们知道目前Snap支持ARM及x86芯片.在我们的Classic 16.04的系统中,我们很容易地编译出我们想要的在x86上的snap文件,但是我们如何生产为ARM板生产相应的armhf的snap文件呢?

下面我们以树莓派2板子为例来描述是如何实现的.


1)为树莓派2/3安装snap系统


我们可在地址下载最新的树莓派2的image,并存于系统的~/Downloads目录中.如果你是使用树莓派3的话,那么你可以在地址下载image.你也可以在如下的地址找到所有最新的Ubuntu Core image:

http://cdimage.ubuntu.com/ubuntu-snappy/16.04/current/

整个image的大小约为161M.我们把我们的SD卡插入到我们电脑的MMC卡槽中,或插入到一个USB的adapter中.在进行拷贝image前,我们必须unmount我们的卡.然后,我们使用如下的命令来拷贝我们的image到卡中:


# Note: replace /dev/sdX with the device name of your SD card (e.g. /dev/mmcblk0, /dev/sdg1 ...)

xzcat ~/Downloads/all-snaps-pi2.img.xz | sudo dd of=/dev/sdX bs=32M
sync

目前对于p3设备来说,默认的输出是通过串口,可以连接到我们的电脑上并进行查看启动的信息.大家可以买一个像链接所示的串口线.在我们的terminal中打入如下的命令:

$ sudo screen /dev/ttyUSB0 115200

这样就可以看到我们启动时的信息了.

当然,如果大家没有这样的连接线的话,我们可以通过修改如下的文件,并最终使得显示的结果输出到HDMI的显示器中:



我们把cmdline.txt中的文件的内容,修改为:

dwc_otg.lpm_enable=0 console=tty1 elevator=deadline

这样,我们就可以在HDMI的显示器上看到输出的结果了.通过键盘的操作,我们第一次完成Network的设置后,就可以在电脑上通过刚ssh的方式来进行登陆了.记住,我们必须提供launchpad的账号信息来完成设置的动作.

等上面的操作完成后,拔出我们的SD卡,并插入到我们的树莓派的SD卡插槽中.然后启动我们的树莓派.第一次的启动的时间比较长,需要耐心等待.



注意:这里的image名字"all-snaps-pi2.img.xz"可能会跟着版本的变化而发生改变.请根据你下载的具体的文件来替换.这里的sdX需要换成我们卡的设备号,比如在我们的电脑的MMC插槽中就是mmcblk0:



在我们刷卡时,我们可以使用sudo fdisk -l,或lsblk来获取我们的设备的代码.注意在我们执行命令时,命令行中的"/dev/sdX"可以是/dev/sdb而不是/dev/sdb1,可能是 /dev/mmcblk0 而不是 /dev/mmcblk0p1.


2)连接我们的树莓派设备


如果大家有路由器的话,建议大家把树莓派和自己的电脑同时连接到同一个路由器上.我们可以参阅文章"如何在装上Snappy Ubuntu的树莓派上启动WiFi"来找到树莓派上的IP地址.一旦得到树莓派的IP地址,我们就可以通过如下的命令来完成和树莓派的ssh连接.在电脑上打入如下的命令:

$ ssh ubuntu@your_raspberry_pi_ip_address

在默认的情况下的密码是"ubuntu".

特别值得注意的是,如果是使用最新的Ubuntu Core的软件的话,这里的ubuntu应改为自己的launchpad的用户名.对于我的情况是liu-xiao-guo@your_raspberry_pi_ip_address.



一旦我们连接上我们的树莓派,我们可以参照文章"安装snap应用到Ubuntu 16.4桌面系统"来安装和检查我们的snap系统,比如:





3)交叉编译我们的应用



在这一节中,我们来展示如何把我们的应用进行交叉编译,并最终形成可以在我们的树莓派上可以运行的snap包.

首先我们在树莓派中安装如下的叫做"classic"的应用:

$ sudo snap install classic --devmode --edge

然后,我们打入如下的命令:

$ sudo classic.create 
$ sudo classic.shell (or "sudo classic" depending on your version)



我们再打入如下的命令来更新我们的系统:

$ sudo apt-get update



我们可以把git安装到系统中:

$ sudo apt install snapcraft git-core build-essential

这样我们就安装好了我们的系统,我们可以用这里的环境来交叉编译我们的任何一个snap应用.编译后的snap包就可以直接在我们的树莓派上直接运行:




编译完我们的应以后,我们可以直接在我们的shell环境中安装我们的应用:




我们通过如下的方法来安装我们的应用:

$ sudo snap install webcam-webui_1_armhf.snap --devmode

这里我们采用了--devmode,也就是说我们让我们的应不受任何的安全机制的限制,就像我们以前的Ubuntu桌面上的应用一样.在以后的章节中,我们必须通过interface来连接我们的plug及slot.camera的plug目前还没有在树莓派的image中.





至此,我们已经把我们的项目webcam-webui编译为我们树莓派可以使用的snap了.

作者:UbuntuTouch 发表于2016/8/25 11:45:03 原文链接
阅读:278 评论:0 查看评论

Read more
UbuntuTouch

在今天的文章中,我们将介绍如何利用Map API来展示如何显示我们的坐标信息,并展示如何在地图上标记我们的位置.我可以通过这个简单的应用显示在我们手机中所支持的Plugin的Providers(提供者).同时,我们也可以列出目前所支持的所有的MapType,并通过选择它们来展示我们的结果.


1)显示我们所有的Plugin的Service Providers



我们可以通过Plugin的API接口:

    Plugin {
        id: plugin

        // Set the default one
        Component.onCompleted: {
            name = availableServiceProviders[0]
        }
    }

来获取,我们目前所支持的所有的plugin.目前在我们的MX4手机上所展示的Providers:



就像上面的图中显示的那样,我们可以发现"nokia"及"osm"两个service providers.目前的情况是在中国"nokia"是用不了的(这可能是由于license的原因).在国外,应该可以使用NokiaHere地图的.

2)如何在地图中标注


简单地,我们可以使用MapCircle

MapCircle {
    center: me.position.coordinate
    radius: units.gu(3)
    color: "red"
}

在我们的地图中用一个全来标注我们所感兴趣的点.在这里,"center"用来表示圆圈的中心坐标位置.
我们可以MapQuickItem来用任何一个Item来标注我们的兴趣点.在我们的例程中,我们使用了如下的方法:

                    MapQuickItem {
                        id: mylocation
                        sourceItem: Item {
                            width: units.gu(6)
                            height: info.height

                            Label {
                                id: info
                                anchors.centerIn: parent
                                anchors.verticalCenterOffset: -units.gu(2)
                                text: "(" + me.position.coordinate.longitude.toFixed(2) + "," + me.position.coordinate.latitude.toFixed(2) + ")"
                                color: "blue"
                            }


                            Rectangle {
                                width: units.gu(2)
                                height: width
                                radius: width/2
                                color: "red"
                                x: parent.width/2
                                y: parent.height/2
                            }
                        }

我们使用了一个圆点及一个可以显示坐标的Label.



我们可以在代码中动态地生产我们需要的QML Component并标注我们的位置信息:

           MouseArea {
                        anchors.fill: parent

                        onPressed: {
                            if ( setMarks.checked ===false ) {
                                mouse.accepted = false
                                return;
                            }

                            console.log("mouse: " + mouseX + " " + mouseY)
                            var coord = map.toCoordinate(Qt.point(mouseX, mouseY))

                            console.log("creating the component")
                            var component = Qt.createComponent("MapMarkItem.qml")
                            console.log("creating the item")
                            var item = component.createObject(map, { coordinate: coord })
                            console.log("adding the item")
                            map.addMapItem(item)

//                            var circle = Qt.createQmlObject('import QtLocation 5.3; MapCircle {}', map)
//                            circle.center = coord
//                            circle.radius = units.gu(4)
//                            circle.color = 'green'
//                            circle.border.width = 3
//                            map.addMapItem(circle)

                            mouse.accepted = true;
                        }
                    }


在上面我们通过Qt.createQmlObject来动态地创建一个MapCirle的控件.我们通过map.addMapItem来添加进去.当我们点击地图时,我们把标注加入到地图中去:



我们可以获得任何一个地点的位置信息.这在中国的手机地图中是得不到这个信息的:)

3)如何通过手势操作放大/缩小/移动地图



在默认的情况下,我们可以直接通过手势的操作来进行Zoom及Pan我们的地图.我们也可以定义我们自己的gesture来启动或禁止这个手势的操控:

                    gesture {
                        enabled: !setMarks.checked
                        activeGestures: MapGestureArea.ZoomGesture | MapGestureArea.PanGesture

                        onPanStarted:  {
                            console.log("onPanStarted")
                        }

                        onPanFinished: {
                            console.log("onPanFinished")
                        }

                        onPinchStarted: {
                            console.log("onPinchStarted")
                        }

                        onPinchFinished: {
                            console.log("onPinchFinished")
                        }

                        onPinchUpdated: {
                            console.log("onPinchUpdated")
                            console.log("point1: " + "(" + pinch.point1.x + pinch.point1.y + ")")
                        }
                    }

当我们的enabled项设为false时,我们可以进行任何的zoom或pan.


4)如何获得所有的MapType



我们可以通过设置Map的MapType来查看卫星,夜间,地形图等信息.我们可以通过如下的API来列表所有的MapType:

            leadingActionBar {
                id: leadbar
                actions: {
                    var supported = map.supportedMapTypes;
                    console.log("count: " + supported.length)
                    var acts = []
                    console.log("Going to add the types")
                    for ( var i = 0; i < supported.length; i++ ) {
                        var item = supported[i]

                        console.log("map type name: " + item.name)
                        console.log("map style: " + item.style)
                        console.log("type des:" + item.description)
                        var action = creatAction(leadbar, "info", item)
                        acts.push(action)
                    }

                    return acts
                }
            }

在这里,我们使用了"map.supportedMapTypes"来列表所有的被支持的地图形式.最终在我们的应用中:


  

  


5)如何获得当前位置的位置信息



我们可以通过PositionSource接口获取我们的当前的位置信息:

    PositionSource {
        id: me
        active: true
        updateInterval: 1000
        preferredPositioningMethods: PositionSource.AllPositioningMethods
        onPositionChanged: {
            console.log("lat: " + position.coordinate.latitude + " longitude: " +
                        position.coordinate.longitude);
            console.log(position.coordinate)
            console.log("mapzoom level: " + map.zoomLevel)
        }

        onSourceErrorChanged: {
            console.log("Source error: " + sourceError);
        }
    }

我们可以通过设置updateInterval来得到获取位置的频率.

整个项目的源码在:https://github.com/liu-xiao-guo/gps




作者:UbuntuTouch 发表于2016/6/2 13:36:31 原文链接
阅读:568 评论:0 查看评论

Read more
UbuntuTouch

在今天的练习中,我们来做一个设计.在我们的ListView的列表中,我们想点击它的项时,它的项能够展开.这对于我们的有些设计是非常用的.比如我们不希望打开另外一个页面,但是我们可以展示我们当前项的更多的信息.我们可以使用Ubuntu SDK提供的Expandable.这个设计的图片为:


 


如果每个项的详细信息并不多的时候,我们可以利用这种方法来展示我们的每个项的内容.具体的代码为:


Main.qml


import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.ListItems 1.3 as ListItem

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "expandable.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    ListModel {
        id: listmodel
        ListElement { name: "image1.jpg" }
        ListElement { name: "image2.jpg" }
        ListElement { name: "image3.jpg" }
        ListElement { name: "image4.jpg" }
        ListElement { name: "image5.jpg" }
        ListElement { name: "image6.jpg" }
        ListElement { name: "image7.jpg" }
        ListElement { name: "image8.jpg" }
        ListElement { name: "image9.jpg" }
        ListElement { name: "image10.jpg" }
        ListElement { name: "image11.jpg" }
    }

    Page {
        header: PageHeader {
            id: pageHeader
            title: i18n.tr("expandable")
        }

        Item {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: pageHeader.bottom
            }

            UbuntuListView {
                id: listview
                anchors.fill: parent
                height: units.gu(24)
                model: listmodel
                delegate: ListItem.Expandable {
                    id: exp
                    expandedHeight: units.gu(15)
                    expanded: listview.currentIndex == index

                    Row {
                        id: top
                        height: collapsedHeight
                        spacing: units.gu(2)
                        Image {
                            height: parent.height
                            width: height
                            source: "images/" + name
                        }

                        Label {
                            text: "This is the text on the right"
                        }
                    }

                    Label {
                        anchors.top: top.bottom
                        anchors.topMargin: units.gu(0.5)
                        text: "This is the detail"
                    }

                    onClicked: {
//                        expanded = true;
                        listview.currentIndex = index
                    }
                }
            }
        }

    }
}



作者:UbuntuTouch 发表于2016/6/15 17:31:13 原文链接
阅读:462 评论:0 查看评论

Read more
UbuntuTouch

[原]如何在Snap包中定义全局的plug

我们知道在我们snap应用中,我们可以通过定义plug来访问我们所需要的资源.在一个snap包中,我们也可以定义许多的应用,每个应用可以分别定义自己的plug.假如一个Snap包有一个plug是共同的,那么,我们有上面办法来定义一个全局的plug,这样所有的在同一个包中的所有的snap应用都可以同时拥有这个plug.这个到底怎么做呢?

关于snap中的interface及plug概念,请参阅我之前的文章"安装snap应用到Ubuntu 16.4桌面系统".

最近,我读了一篇关于snap interface的文章.很受启发.文章可以在地址找到.其中有一段非常有意思的一段话:


Note that only the links app refers to plugs, the bookmarks app does not. If a plug or slot is declared in a snap, but not associated with a specific application they will be implicitly bound to all apps. When a plug or slot is specified by one or more apps, as in the above example, it will be bound only to those applications. Compare that to the following code:

它的意思就是如果我们在我们的snapcraft.yaml中定义一个plug,但是它不被任何的应用所应用,那么它隐含地就是所有的应用都有这个plug.


我们拿我们的例程https://github.com/liu-xiao-guo/helloworld-plug为例,我们定义如下:


name: hello-xiaoguo
version: "1.0"
architectures: [ all ]
summary: The 'hello-world' of snaps
description: |
    This is a simple snap example that includes a few interesting binaries
    to demonstrate snaps and their confinement.
    * hello-world.env  - dump the env of commands run inside app sandbox
    * hello-world.evil - show how snappy sandboxes binaries
    * hello-world.sh   - enter interactive shell that runs in app sandbox
    * hello-world      - simply output text
confinement: strict
type: app  #it can be gadget or framework

apps:
 env:
   command: bin/env
 evil:
   command: bin/evil
 sh:
   command: bin/sh
 hello-world:
   command: bin/echo
 createfile:
   command: bin/createfile
 createfiletohome:
   command: bin/createfiletohome
 writetocommon:
   command: bin/writetocommon

plugs:
    home:
        interface: home

parts:
 hello:
  plugin: copy
  files:
    ./bin: bin

在上面的snapcraft.yaml文件中,我们写了如下的句子:

plugs:
    home:
        interface: home

由于在我们的任何一个应用中都没有引用home plug,所有这个plug将被定义为包级的plug,也就是说所有的app都享有这个plug.我们可以做一个简单的测试.我们安装好我们的hello snap后,执行如下的命令:

liuxg@liuxg:~$ hello-xiaoguo.createfiletohome 
Hello a nice World!
This example demonstrates the app confinement
This app tries to write to its own user directory
Succeeded! Please find a file created at /home/liuxg/snap/hello-xiaoguo/x1/test.txt
If do not see this, please file a bug


我们的createtohome脚本如下:

#!/bin/sh

set -e
echo "Hello a nice World!"

echo "This example demonstrates the app confinement"
echo "This app tries to write to its own user directory"

echo "Haha" > /home/$USER/test.txt

echo "Succeeded! Please find a file created at $HOME/test.txt"
echo "If do not see this, please file a bug"

显然它向home里写入一个叫做test.txt的文件.我们的写入操作是成功的.


从我们的文件目录中,我们可以看出来我们刚刚创建的文件test.txt.细心的开发者也可以出去上面定义的plug,在试一试是否成功?







作者:UbuntuTouch 发表于2016/8/19 17:07:51 原文链接
阅读:125 评论:0 查看评论

Read more
UbuntuTouch

在我们的Ubuntu SDK中,我们提供了QtOrganizer API接口.通过这个API我们可以来管理我们自己的日历,也可以利用这个API来导入一个日历.在今天的例程中,我们来详细了解这个API的具体的用法.在练习的开始,我们可以在我们的手机中的"日历"应用中创建一些我们所需要的事件.比如:

  



1)如何得到手机中所有的manager 


我们可以通过这个OrganizerModel API来列举在我们的系统中所支持的所有的managers.

availableManagers : list<string>

这里的每个manager对应于一个数据库.这样我们就可以对它们进行操作.在目前的MX4手机中,我们列出的manager为:



在上面列出了三个manager: invalid,memory及eds.这里的memory可以被用在来导入我们在文件中的一个文件,并最终形成我们可以对一个文件中的事件进行操作.当然,我们也可以实现同步的功能,或导出的动作.具体的例程可以参阅文章"Qt Quick Organizer List View Example".虽然例程中使用的API的有些接口和我们现有的会有所不同,但是我们可以实现同样的功能.在上面图中显示的"eds"就是我们的手机中自动应用"日历"所使用的manager.在接下来的操作中,我们主要来通过这个来进行剖析.


2)如何得到所有的event


我们可以通过OrganizerModel中的如下方法来得到所有的event的列表:

items : list<OrganizerItem>

通过这个API,我们可以得到在我们的日历中所有的事件的列表:



就如上图所示的那样,我们可以得到所有的事件的列表信息.


3)如何得到每个事件的详细信息



我们可以通过OrganizerItem来得到每个事件的具体信息.我们可以通过:

itemDetails : list<Detail>

来得到事件已经拥有的那些属性.我们可以通过如下的API来得到该项的所有的具体的信息:

Detail detail(type)

比如在上面图中显示的时间信息.对于一个事件来说:



从上面的图中可以看出来,每个事件的具体信息,并展示它所支持的具体的属性项目.我们可以尝试点击最下面的按钮"Change the description to I LOVE"来改变我们的事件的description. 修改过后的列表为:




4)如何删除一个事件


我们可以通过OrganizerModel中的:

removeItem(OrganizerItem item)

来删除我们不想要的事件.在我们的应用中,我们可以通过向左滑动,显示出删除图标.点击删除图标即可达到删除的目的.

  

可以看出来,我们已经成功地删除了我们的"day event on June 8th".

当然我们可以更多地来explore更过的关于QtOrganizer的API接口.这个练习就留给开发者自己来做.在这里我们就只抛砖引玉地展示其中的一部分.

Main.qml


import QtQuick 2.4
import Ubuntu.Components 1.3
import QtOrganizer 5.0

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "organizer.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    OrganizerModel {
        id: organizerModel

        endPeriod: {
            var date = new Date();
            date.setDate(date.getDate() + 10);
            return date
        }

        sortOrders: [
            SortOrder {
                id: sortOrder

                detail: Detail.EventTime
                field: EventTime.startDateTime
                direction: Qt
            }
        ]

        onExportCompleted: {
            console.log("onExportCompleted")
        }

        onImportCompleted: {
            console.log("onImportCompleted")
        }

        onItemsFetched: {
            console.log("onItemsFetched")
        }

        onModelChanged: {
            console.log("onModelChanged")
            console.log("item count: " + organizerModel.itemCount)
            mymodel.clear();
            var count = organizerModel.itemCount
            for ( var i = 0; i < count; i ++ ) {
                var item = organizerModel.items[i];
                mymodel.append( {"item": item })
            }
        }

        onDataChanged: {
            console.log("onDataChanged")
        }

        manager: "eds"
    }

    ListModel {
        id: mymodel
    }

    Component {
        id: highlight
        Rectangle {
            width: parent.width
            color: "lightsteelblue"; radius: 5
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }

    PageStack {
        id: pagestack
        anchors.fill: parent

        Component.onCompleted: {
            pagestack.push(main)
        }

        Page {
            id: main
            header: PageHeader {
                id: pageHeader
                title: i18n.tr("organizer")
            }
            visible: false

            Item {
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                    top: pageHeader.bottom
                }

                Column {
                    anchors.fill: parent
                    spacing: units.gu(1)

                    Label {
                        text: "Organizer managers:"
                    }

                    ListView {
                        id: listview
                        width: parent.width
                        height: units.gu(10)
                        highlight: highlight
                        model:organizerModel.availableManagers
                        delegate: Label {
                            width: listview.width
                            text: modelData
                            fontSize: "large"

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    listview.currentIndex = index
                                }
                            }
                        }
                    }

                    Rectangle {
                        id: divider
                        width: parent.width
                        height: units.gu(0.1)
                        color: "green"
                    }

                    ListView {
                        clip: true
                        width: parent.width
                        height: parent.height - divider.height - listview.height
                        model: mymodel
                        delegate: ListItem {
                            Label {
                                text: item.description
                            }

                            Label {
                                anchors.right: parent.right
                                text : {
                                    var evt_time = item.detail(Detail.EventTime)
                                    var starttime = evt_time.startDateTime;
                                    console.log("time: " + starttime.toLocaleDateString())
                                    return starttime.toLocaleDateString()
                                }
                            }

                            onClicked: {
                                detailpage.myitem = item
                                pagestack.push(detailpage)
                            }

                            trailingActions: ListItemActions {
                                actions: [
                                    Action {
                                        iconName: "delete"
                                        onTriggered: {
                                            console.log("delete is triggered!");
                                            organizerModel.removeItem(item)
                                        }
                                    }
                                ]
                            }
                        }
                    }
                }
            }

            Component.onCompleted: {
                console.log("manage name: " + organizerModel.manager)
            }
        }

        Page {
            id: detailpage
            header: PageHeader {
                id: header
                title: i18n.tr("Detail page")
            }
            visible: false

            property var myitem

            Item {
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                    top: header.bottom
                }

                Column {
                    anchors.fill: parent
                    spacing: units.gu(1)

                    Label {
                        id: col1
                        width: parent.width
                        text: "collectionId: " + detailpage.myitem.collectionId
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col2
                        width: parent.width
                        text: "description: " + detailpage.myitem.description
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col3
                        width: parent.width
                        text: "displayLabel: " + detailpage.myitem.displayLabel
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col4
                        width: parent.width
                        text: "guid: " + detailpage.myitem.guid
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col5
                        width: parent.width
                        text: "itemId: " + detailpage.myitem.itemId
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col6
                        width: parent.width
                        text: "itemType : " + detailpage.myitem.itemType
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col7
                        width: parent.width
                        text: "manager : " + detailpage.myitem.manager
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col8
                        width: parent.width
                        text: "modified  : " + detailpage.myitem.modified
                        wrapMode: Text.WordWrap
                    }

                    Label {
                        id: col9
                        width: parent.width
                        text: "Item details are:"
                    }

                    ListView {
                        width: parent.width
                        height: parent.height - col1.height - col2.height -col3.height - col9.height -
                                col4.height - col5.height - col6.height - col7.height - col8.height
                        model: detailpage.myitem.itemDetails
                        delegate: Label {
                            text: {
                                switch (modelData.type) {
                                case Detail.Undefined:
                                    return "Undefined";
                                case Detail.Classification:
                                    return "Classification"
                                case Detail.Comment:
                                    return "Comment";
                                case Detail.Description:
                                    return "Description"
                                case Detail.DisplayLabel:
                                    return "DisplayLabel"
                                case Detail.ItemType:
                                    return "ItemType"
                                case Detail.Guid:
                                    return "Guid"
                                case Detail.Location:
                                    return "Location"
                                case Detail.Parent:
                                    return "Parent"
                                case Detail.Priority:
                                    return "Priority"
                                case Detail.Recurrence:
                                    return "Recurrence"
                                case Detail.Tag:
                                    return "Tag"
                                case Detail.Timestamp:
                                    return "Timestamp"
                                case Detail.Version:
                                    return "Version"
                                case Detail.Reminder:
                                    return "Reminder"
                                case Detail.AudibleReminder:
                                    return "AudibleReminder"
                                case Detail.EmailReminder:
                                    return "EmailReminder"
                                case Detail.VisualReminder:
                                    return "VisualReminder"
                                case Detail.ExtendedDetail:
                                    return "ExtendedDetail"
                                case Detail.EventAttendee:
                                    return "EventAttendee"
                                case Detail.EventRsvp:
                                    return "EventRsvp"
                                case Detail.EventTime:
                                    return "EventTime"
                                case Detail.JournalTime:
                                    return "JournalTime"
                                case Detail.TodoTime:
                                    return "TodoTime"
                                case Detail.TodoProgress:
                                    return "TodoProgress"
                                default:
                                    return "Unknown type"
                                }
                            }
                        }
                    }
                }

                Button {
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: units.gu(1)
                    anchors.horizontalCenter: parent.horizontalCenter

                    text: "Change the description to I LOVE"
                    onClicked: {
                        console.log("changing the description")
                        detailpage.myitem.description = "I LOVE YOU"
                        organizerModel.saveItem(detailpage.myitem)
                    }
                }
            }

        }
    }
}







作者:UbuntuTouch 发表于2016/6/6 10:01:30 原文链接
阅读:347 评论:0 查看评论

Read more
UbuntuTouch

在我们先前的文章"如何在Ubuntu手机中使用前置照相机"对如何使用前置照相机给出了一个解决方案.事实上,在我们最新的Camera API中 (QtMultiMedia 5.6),已经有新的API来完成这个功能了.我们不再需要额外的C++代码来完成这个功能.


在新的Camera API中,我们可以指定:

deviceId : string
来使得我们的Camera来选择我们需要的前后相机.那么我们如何得到这个deviceId呢?在新的QtMultiMedia的接口中,我们可以通过如下的API来得到所有的Camera的描述信息:

QtMultimedia.availableCameras

通过这个API,我们可以得到一个Camera的如下信息:


基于上面的信息,我们做了如下的一个简单的照相机应用:

Main.qml


import QtQuick 2.4
import Ubuntu.Components 1.3
import QtMultimedia 5.6

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "cameralist.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    Camera {
        id: camera

        imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash

        exposure {
            exposureCompensation: -1.0
            exposureMode: Camera.ExposurePortrait
        }

        flash.mode: Camera.FlashRedEyeReduction

        imageCapture {
            id: capture
            onImageCaptured: {
                console.log("onImageCaptured!")
                // Show the preview in an Image
                photoPreview.source = preview
            }

            onImageSaved: {
                console.log("image has been saved: " + requestId);
                console.log("saved path: " + path);
            }
        }
    }

    Component {
        id: highlight
        Rectangle {
            width: parent.width
            height: listview.delegate.height
            color: "lightsteelblue"; radius: 5
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }

    Page {
        id: page
        header: PageHeader {
            id: pageHeader
            title: i18n.tr("cameralist")
        }

        Item {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: pageHeader.bottom
            }

            Column {
                anchors.fill: parent

                ListView {
                    id: listview
                    width: page.width
                    height: units.gu(20)

                    model: QtMultimedia.availableCameras
                    highlight:highlight
                    delegate: Item {
                        id: delegate
                        width: listview.width
                        height: layout.childrenRect.height + units.gu(0.5)

                        Column {
                            id: layout
                            width: parent.width

                            Text {
                                text: "deviceId: " + modelData.deviceId
                            }

                            Text {
                                text: "displayName: " + modelData.displayName
                            }

                            Text {
                                text: {
                                    switch(modelData.position) {
                                    case Camera.UnspecifiedPosition:
                                        return "position: UnspecifiedPosition"
                                    case Camera.BackFace:
                                        return "position: BackFace";
                                    case Camera.FrontFace:
                                        return "position: FrontFace"
                                    default:
                                        return "Unknown"
                                    }
                                }
                            }

                            Rectangle {
                                width: parent.width
                                height: units.gu(0.1)
                                color: "green"
                            }

                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                camera.deviceId = modelData.deviceId
                                listview.currentIndex = index
                            }
                        }
                    }
                }

                VideoOutput {
                    id: output
                    source: camera
                    width: parent.width
                    height: parent.height - listview.height
                    focus : visible

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            console.log("going to capture to: " + path)
                            capture.captureToLocation(path);
                            output.visible = false
                            photoPreview.visible = true
                        }
                    }
                }

                Image {
                    id: photoPreview
                    width: parent.width
                    height: parent.height - listview.height
                    fillMode: Image.PreserveAspectFit

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            photoPreview.visible = false
                            output.visible = true
                        }
                    }

                    Component.onCompleted: {
                        visible = false
                    }
                }
            }
        }
    }
}

由于我们希望存储当前相机的所照的照片,我们必须得到能够存储照片的位置信息.我们在我们的Main.cpp中使用了如下的方法:

main.cpp

QString getPrivatePath()
{
    QString writablePath = QStandardPaths::
            writableLocation(QStandardPaths::DataLocation);
    qDebug() << "writablePath: " << writablePath;

    QString absolutePath = QDir(writablePath).absolutePath();
    qDebug() << "absoluePath: " << absolutePath;

    absolutePath += ".liu-xiao-guo/photos";

    // We need to make sure we have the path for storage
    QDir dir(absolutePath);
    if ( dir.mkpath(absolutePath) ) {
        qDebug() << "Successfully created the path!";
    } else {
        qDebug() << "Fails to create the path!";
    }

    qDebug() << "private path: " << absolutePath;

    return absolutePath;
}

    QString path = getPrivatePath();
    qDebug() << "final path: " << path;
   ...
    context->setContextProperty("path", QVariant::fromValue(path));

通过这样的方法,我们可以在我们的QML的代码中直接引用path来存储我们的照片.

运行我们的应用:

   


从上面的图中,我们可以看到所有相机的列表信息.我们可以随意选择我们所需要的相机,并进行拍摄.当然我们也可以进行录像的动作.具体的实现,可以参阅文章"在Ubuntu手机平台中使用Camera API来录像".


作者:UbuntuTouch 发表于2016/5/30 11:47:27 原文链接
阅读:328 评论:0 查看评论

Read more
UbuntuTouch

在Ubuntu的手机设计中,我们可以利用ContactModel API接口来读取我们的电话本信息.我们可以通过如下的API接口:

availableManagers 

来获取我们所有的电话本的manager.也就是有多少个电话本.通过设置:

manager 
来选择不同的电话本来读取信息.所有的电话本信息,我们可以在如下的API中读取:

contacts : list<Contact>
每个Contact包含一个电话本每个项的所有的信息:

address : Address
addresses : list<Address>
anniversary : Anniversary
avatar : Avatar
birthday : Birthday
contactDetails : list<ContactDetail>
contactId : int
displayLabel : DisplayLabel
email : EmailAddress
emails : list<EmailAddress>
extendedDetail : ExtendedDetail
extendedDetails : list<ExtendedDetail>
family : Family
favorite : Favorite
gender : Gender
geolocation : GeoLocation
globalPresence : GlobalPresence
guid : Guid
hobby : Hobby
manager : string
modified : bool
name : Name
nickname : Nickname
note : Note
onlineAccount : OnlineAccount
organization : Organization
organizations : list<Organization>
phoneNumber : PhoneNumber
phoneNumbers : list<PhoneNumber>
presence : Presence
ringtone : Ringtone
syncTarget : SyncTarget
tag : Tag
timestamp : Timestamp
type : enumeration
url : Url
urls : list<Url>
version : Version
我们可以根据我们所需要的信息来显示.

当我们显示信息的时候,我们可以通过SortOrder来排序我们的电话本中的项.

  ContactModel {
        id: mymodel
        sortOrders: [
            SortOrder {
                id: sortOrder

                detail: ContactDetail.Name
                field: Name.FirstName
                direction: Qt.DescendingOrder
            }
        ]
  ...
  }

我们也可以通过filter来过滤我们所需要的项,比如:

        filter: DetailFilter {
            id: favouritesFilter

            detail: ContactDetail.Favorite
            field: Favorite.Favorite
            value: "Yang"
            matchFlags: DetailFilter.MatchExactly
        }
这个filter将显示所有的Favorite的电话本,而如下的filter将显示lastName中有"Yang"的电话本:

        filter: DetailFilter {
            id: nameFilter

            detail: ContactDetail.Name
            field: Name.LastName
            value: "Yang"
            matchFlags: DetailFilter.MatchExactly
        }

我们的一个简单的例程如下:

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3
import QtContacts 5.0
import Ubuntu.Components.ListItems 1.0 as ListItem

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "contactmodel.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)


    ContactModel {
        id: mymodel
        sortOrders: [
            SortOrder {
                id: sortOrder

                detail: ContactDetail.Name
                field: Name.FirstName
                direction: Qt.DescendingOrder
            }
        ]

        fetchHint: FetchHint {
            detailTypesHint: [ContactDetail.Avatar,
                ContactDetail.Name,
                ContactDetail.PhoneNumber]
        }

//        filter: DetailFilter {
//            id: favouritesFilter

//            detail: ContactDetail.Favorite
//            field: Favorite.Favorite
//            value: "Yang"
//            matchFlags: DetailFilter.MatchExactly
//        }

        filter: DetailFilter {
            id: nameFilter

            detail: ContactDetail.Name
            field: Name.LastName
            value: "Yang"
            matchFlags: DetailFilter.MatchExactly
        }
    }

    Component {
        id: highlight
        Rectangle {
            width: parent.width
            height: manager.delegate.height
            color: "lightsteelblue"; radius: 5
            Behavior on y {
                SpringAnimation {
                    spring: 3
                    damping: 0.2
                }
            }
        }
    }


    Page {
        header: PageHeader {
            id: pageHeader
            title: i18n.tr("contactmodel")
        }

        Item {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top:pageHeader.bottom
            }

            Column {
                anchors.fill: parent
                spacing: units.gu(0.5)

                Label {
                    text: "The contact managers:"
                    fontSize: "x-large"
                }

                ListView {
                    id: manager
                    clip: true
                    width: parent.width
                    height: units.gu(8)
                    highlight: highlight
                    model: mymodel.availableManagers
                    delegate: Item {
                        id: delegate
                        width: manager.width
                        height: man.height
                        Label {
                            id: man
                            text: modelData
                            fontSize: "large"
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                manager.currentIndex = index
                                // set the contact model manager
                                mymodel.manager = modelData
                            }
                        }
                    }
                }

                Rectangle {
                    id: divider
                    width: parent.width
                    height: units.gu(0.1)
                    color: "green"
                }

                CustomListItem {
                    id: storage
                    title.text: {
                        switch (mymodel.storageLocations ) {
                        case ContactModel.UserDataStorage:
                            return "UserDataStorage";
                        case ContactModel.SystemStorage:
                            return "SystemStorage";
                        default:
                            return "Unknown storage"
                        }
                    }
                }

                // Display the contact info here
                ListView {
                    width: parent.width
                    height: parent.height - manager.height - divider.height - storage.height
                    model: mymodel
                    delegate: ListItem.Subtitled {
                        text: contact.name.firstName + " " + contact.name.lastName
                        subText: contact.phoneNumber.number
                    }
                }
            }
        }

        Component.onCompleted: {
            console.log("count of manager: " + mymodel.availableManagers.length)
        }

    }
}

运行我们的代码:








作者:UbuntuTouch 发表于2016/5/31 11:24:06 原文链接
阅读:335 评论:0 查看评论

Read more
UbuntuTouch

在我们的Ubuntu SDK中,它提供了一个"Web App"的模版,它很方便地让我们把一个Web-based网页转换成一个Ubuntu的应用.大家可以参考我的文章"如何使用在线Webapp生成器生成安装包"来创建Web App.在今天的文章中,我们来介绍如实现一个全屏的Web App.


下面我们以百度地图为例.当我们利用我们的Ubuntu SDK创建一个应用时:

baidumap.desktop

[Desktop Entry]
Name=百度地图
Comment=webapp for baidumap
Type=Application
Icon=baidumap.png
Exec=webapp-container --enable-back-forward --store-session-cookies --webappUrlPatterns=https?://map.baidu.com/* http://map.baidu.com %u
Terminal=false
X-Ubuntu-Touch=true

细心的开发者可以看到在上面的"--enable-back-forward"选项.它让我们的Web App在最上面有一个title/header的地方,就像下面的图展示的那样:



在上面的图中,我们可以看到有一个"百度地图"的标题栏.它可以让我们返回以前的页面.

如果我们把上面的"--enable-back-forward"选项去掉,也就是:

Exec=webapp-container --store-session-cookies --webappUrlPatterns=https?://map.baidu.com/* http://map.baidu.com %u

那么我们的运行结果将是:



我们可以看出来,我们的header/title区域不见了.这样的好处是我们可以得到更多的显示区域.当然我们还是可以看到我们的indicator区域.

对于一些游戏的页面来说,能有一个全屏的用户界面是一个至高无上的需求,那么,我们可以更进一步来做如下的修改.我们添加一个"--fullscreen"的选项.

[Desktop Entry]
Name=百度地图
Comment=webapp for baidumap
Type=Application
Icon=baidumap.png
Exec=webapp-container --fullscreen -cookies --webappUrlPatterns=https?://map.baidu.com/* http://map.baidu.com %u
Terminal=false
X-Ubuntu-Touch=true

重新运行我们的项目:



我们可以看到一个全屏的应用,甚至连indicator的影子都没有.

更多关于Web App开发的信息可以在网站找到.



作者:UbuntuTouch 发表于2016/6/23 9:30:22 原文链接
阅读:440 评论:0 查看评论

Read more
UbuntuTouch

在Ubuntu SDK中,它提供了一个PlaceSearchModel接口.通过这个接口,我们可以在规定的区域里搜寻我们需要的地点,比如,KFC, Pizzar,或银行.在今天的教程中,我们来利用这个API来展示如何搜寻我们的兴趣点.

   


PlaceSearchModel的基本用法:

    PlaceSearchModel {
        id: searchModel
        plugin: myPlugin

        searchTerm: "KFC"
        searchArea: QtPositioning.circle(curLocation)

        Component.onCompleted: update()
    }


这里的searchTerm就是我们需要搜索的关键词.searchArea标示的是我们以什么为中心进行搜索.每当有一个新的关键词要进行搜索时,我们可以通过如下的方式来做:

                    searchModel.searchTerm = text
                    searchModel.update();

这里的plugin是已经存在于我们的系统的plugin.我们实际上是可以通过如下的方式来得到系统所有的plugin的:

    Plugin {
        id: plugin

        // Set the default one
        Component.onCompleted: {
            name = availableServiceProviders[0]
        }
    }

具体的使用方法可以参阅文章"在Ubuntu手机上利用Map API来显示地图并动态显示标记".

当一个地点被成功搜寻后,它返回的数据如下:


我们可以通过这些数据来显示我们得到位置的信息.

基于这些理解,我们做出了我们的例程:

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Popups 1.3
import QtLocation 5.3
import QtPositioning 5.2

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "placesearchmodel.liu-xiao-guo"

    width: units.gu(60)
    height: units.gu(85)

    property bool centerCurrent: true

    Plugin {
        id: myPlugin
        name: "osm"
    }

    PositionSource {
        id: positionSource
        property variant lastSearchPosition: curLocation
        active: true
        updateInterval: 5000
        onPositionChanged:  {
            var currentPosition = positionSource.position.coordinate

            if ( centerCurrent ) {
                map.center = currentPosition
            }

            var distance = currentPosition.distanceTo(lastSearchPosition)
            //            if (distance > 500) {
            // 500m from last performed pizza search
            lastSearchPosition = currentPosition
            searchModel.searchArea = QtPositioning.circle(currentPosition)
            searchModel.update()
            //            }
        }
    }

    property variant curLocation: QtPositioning.coordinate( 59.93, 10.76, 0)

    PlaceSearchModel {
        id: searchModel
        plugin: myPlugin

        searchTerm: "KFC"
        searchArea: QtPositioning.circle(curLocation)

        Component.onCompleted: update()
    }

    Connections {
        target: searchModel
        onStatusChanged: {
            if (searchModel.status == PlaceSearchModel.Error)
                console.log(searchModel.errorString());
        }
    }

    Component {
        id: pop
        Popover {
            id: popover
            width: units.gu(20)
            property var model
            Column {
                anchors {
                    left: parent.left
                    right: parent.right
                }

                Label {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: {
                        switch (model.type) {
                        case PlaceSearchModel.UnknownSearchResult:
                            return "type: UnknownSearchResult"
                        case PlaceSearchModel.PlaceResult:
                            return "type: PlaceResult"
                        case PlaceSearchModel.ProposedSearchResult:
                            return "type: ProposedSearchResult"
                        }
                    }
                    fontSize: "medium"
                }

                Label {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "title: " + model.title
                    fontSize: "medium"
                }

                Label {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "distance: " + (model.distance).toFixed(2) + "m"
                    fontSize: "medium"
                }

                Label {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "sponsored: " + model.sponsored
                    fontSize: "medium"
                }
            }
        }
    }

    Page {
        id: page
        header: standardHeader

        PageHeader {
            id: standardHeader
            visible: page.header === standardHeader
            title: "PlaceSearchModel"
            trailingActionBar.actions: [
                Action {
                    iconName: "edit"
                    text: "Edit"
                    onTriggered: page.header = editHeader
                }
            ]
        }

        PageHeader {
            id: editHeader
            visible: page.header === editHeader
            leadingActionBar.actions: [
                Action {
                    iconName: "back"
                    text: "Back"
                    onTriggered: {
                        page.header = standardHeader
                    }
                }
            ]
            contents: TextField {
                id: input
                anchors {
                    left: parent.left
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                placeholderText: "input words .."
                text: "KFC"

                onAccepted: {
                    // clear all of the markers
                    mapItemView.model.reset()

                    searchModel.searchTerm = text
                    searchModel.update();
                }
            }
        }

        Item  {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                top: page.header.bottom
            }

            Map {
                id: map
                anchors.fill: parent
                plugin: Plugin {
                    name: "osm"
                }
                center: curLocation
                zoomLevel: 13

                gesture {
                    onPanFinished: {
                        centerCurrent = false
                    }
                }

                MapCircle {
                    id: mylocation
                    center: positionSource.position.coordinate
                    radius: units.gu(4)
                    color: "yellow"
                }

                MapItemView {
                    id: mapItemView
                    model: searchModel
                    delegate: MapQuickItem {
                        id: mapitem
                        coordinate: place.location.coordinate

                        anchorPoint.x: image.width * 0.5
                        anchorPoint.y: image.height

                        sourceItem: Column {
                            Image {
                                width: units.gu(3)
                                height: width
                                id: image
                                source: "marker.png"
                            }
                            Text { text: title; font.bold: true }
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                onClicked: PopupUtils.open(pop, mapitem, { 'model': model })
                            }
                        }
                    }
                }

                Component.onCompleted: {
                    zoomLevel = 15
                }
            }
        }

    }
}


整个项目的源码在:https://github.com/liu-xiao-guo/PlaceSearchModel



            
作者:UbuntuTouch 发表于2016/6/21 8:40:59 原文链接
阅读:288 评论:0 查看评论

Read more