Introduction to html2canvas and jsPDF

Sometimes it’s useful to get an image for a specific object (e.g. table, a text field) from your web page by simply clicking a button. At other times, you may want to just take a screenshot of an object and place it into a specific section on your web page as an image. I’ve found two JavaScript libraries to get these jobs done: html2canvas
and jsPDF. Both libraries are available free of charge. The first library includes the logic for building a screenshot based on the DOM. The second library saves the canvas as a PDF-File.

Scenario

To illustrate the syntax of the libraries, I’m going to give you a quick example of a use case from a little private project of mine.

Card games like Texas Hold’em Poker are strategic games. This means, that it is a good idea to have a winning strategy when you play it. A strategy, in turn, is a game plan for your play in specific situations against different opponents. For example, what kind of starting hands you want to raise (2Bet) in the first position (UTG = Under The Gun) and which hands you want to 4Bet (re-re-raise) if someone is re-raising (3Bet) you after you opened a hand. To illustrate the strategy it’d be nice to have a chart which gives the user a quick overview.

So we end up with a table showing starting hands for Texas Hold’em Poker. Furthermore, the user can manipulate the table to mark hands they are willing to play with their specific holding. In this example, the user wants to illustrate the situation described above. I’ve implemented this as an application running in a browser. Basically, it looks like this:

initialrange

initial state

 

range

defined strategy by a user

 

My project displays this table on the screen. But wouldn’t it be nice to save the resulting table with a click on a button as a picture? For example, in order to learn your strategy or to share it with your friends?

Code

To save the resulting HTML table as a PDF-File you just need to insert the mentioned libraries above in your HTML head tag.

headtaghtml2canvas

Next, define a button to trigger the event ‚Save as PDF‘.

buttonhtml2canvas

For this example, I’ve been using AngularJS, so I just added the following code in the controller.js-file.

That’s all it takes.

controllerhtml2canvas

outputhtml2canvas

Wrapping it up

In my opinion, this is a good way to quickly save specific elements of a web page as an image. However, there’s a catch: the quality of the canvas object isn’t really high compared to the real representation. That’s because it doesn’t make a real screenshot. Instead, it builds the screenshot based on the information available on the page.

What about the future of these libraries? A glance at the Google statistics doesn’t yield a clear view. On the one hand, both libraries are relatively unpopular. But on the other hand, both libraries increase their level of awareness year by year. Judging by this measure, choosing these libraries probably is a good choice.

statisticshtml2canvas

Veröffentlicht unter English, Uncategorized, Web Development | Kommentar hinterlassen

Camunda meets Mule – A java based flexible approach for Integration and APIs

Finding the right architectural integration approach for one’s business is becoming more important. One reason for this is the digitalisation. There are more and more devices like smartphones, IoT devices and gadgets but also applications and systems that communicate with each other. The power behind digitalisation is not a single technology or device. It is the network of systems, devices and people and the combination between technologies that promises huge benefits and new business models. The first, major step to gain these benefits is integration or: the integration of everything.

In integration of everything a combination of technologies will be found which is a mixture of classical approaches paired with other principles. Topics like device to process, process to device, streaming technologies, Big Data, API management, API monetization and much more are crossing classical integrational themes.

One huge challenge in these environments is to get a flexible and easy to adapt system architecture. Camunda BPM and Mulesoft’s Anypoint platform can provide such a system architecture.

During our monthly Opitz Consulting Community Day we started a project under the top name `Camunda meets Mule` to demonstrate how easy Camunda BPM and Mulesoft Anypoint can be combined. We started a demo project to demonstrate the API design features as well as the usefulness of connectors from Mulesoft. The processing layer is based on Camunda and is responsible for routing and business logic.

We started to think about a simple Use Case for our project that can be realised in a couple of hours. This resulted in a simple API, that allows sending messages via REST and JSON to Mule. Camunda starts a process to publish this information in Slack via Mule. Moreover, we wanted to approve messages, before they will be “live”.

Architectural Bird view

Here is an initial sketch we created during our initial discussion.

Camunda meets Mule Idea

Different parts we created are described in the following blog posts:

Our Team

And here is another picture of our group having fun during the project.

Team

 

Feedback from some of my colleagues was…..

Dominik Bial, Lead of the Competence Center Internet of Things:

“I am still impressed, that it took us less than 4 hours from idea to our first prototype. Great frameworks and powerful combination!”

Erzen Hyko, Professional Developer:

“This project showed that Mule and Camunda can be very easily and fast combined together, providing a solid base for integrating APIs and model business processes.”

Alexander Rüsberg, Senior Consultant:

“Both frameworks provide a very fast and intuitive approach on integration without the usual ramp up and training effort that is necessary for most of their competitors.”

And finally my personal feedback on it:

“I’m still working with Camunda BPM in several projects and had always to work with different integration layers. In most cases it is a mixture of multiple systems and thus more than one publisher teams. Some tools are very powerful and some of them need more communication to define an interface. The main advantage when you recap your integration layer to one software tool like Mulesoft Anypoint is, it increases your Time to Market due to the fact that you minimize and optimize the communication between the publishers and consumers. That’s an important point for successful integration solutions.”

Veröffentlicht unter Architecture, camunda BPM, Integration, Java, SOA | Kommentar hinterlassen

A tiny MQTT-Broker docker image

Intro

Some time ago I started to get a look at MQTT and needed a broker to start with. Eclipse Mosquitto (http://mosquitto.org/) was a logical choice for a quick start and as I am a fan of docker containers for not polluting your local system installation whilst trying new software stacks, I searched for a docker image with Mosquitto.

Of course, there were many, but I was a bit astonished about their size. 500MB and more? That’s not what I expected from an efficient docker build result. I started to check what the exact technical requirements of Mosquitto were and actually, it doesn’t need so much to run.

Approach

The most simple way would be a small Linux coming at least with a package manager to get it up and running, as it is pointed out here: https://mosquitto.org/download/The OpenWRT approach seemed to be the most interesting, as it is available for various CPU types and its known to be damn small.

Solution

A short time later the Dockerfile was written and an image which was packed below 4MB. I’d call that a success J You can find the results right here https://hub.docker.com/r/mrinus/docker-openwrt-mosquitto/ or by doing a docker pull on mrinus/docker-openwrt-mosquitto and run the image by:

docker run -p 1883:1883 -d mrinus/docker-openwrt-mosquito


Dockerfile

BTW

Just to mention it: Nowadays there is an official image locatable as eclipse/mosquito which has an even smaller footprint. As they did not provide a build tagged latest you can run it by giving the latest build tag:

docker run eclipse/mosquitto:1.4.8 –p 1883:1883
 
Have fun exploring MQTT!
Veröffentlicht unter Integration, IoT, Quicktipp | Kommentar hinterlassen

Published CattleCrew Case Management UI

As a result of our case management experience, we recently released a self-developed case management UI on GitHub to get a better introduction to case management and CMMN 1.1.

Intro

In addition to the traditional process and rules management, Case Management has established itself as the third standard in the BPM standard Toolkit. Case management is particularly suitable for dynamic business processes, which have a high variance in execution. What BPMN represents for traditional process models is the CMMN standard for case management.

The CattleCrew Case Management UI has emerged from the idea of providing an easy introduction to the topic with tool support. We decided for a UI because during our first attempts we noticed that an optimized user interface is a central element for case management. In order to promote the topic with the help of the community, we have published it on GitHub.

Try it out

After following the instructions on GitHub and invoking the user interface, the overview page opens. By selecting a case you get to the detailed view.

cccmui-dashboard

Dashboard

In the detail view, all the context informations about the current case are displayed in four columns to support the knowledge worker with required information. This includes case’s history, information from comparable or related cases, and existing documents.

In the first column of the left the navigation search functionality for  similar or related cases is placed. Below all the associated documents are displayed. In the second column from the left, relevant context information are listed. In the third column you can see the status of the case and what happened so far. The right column shows the activities that can be executed or are currently being processed.

cccmui-casedetails

Case Details

Behind the second tab, the rendered case model is displayed.

cccmui-casemodel

Case Model

Behind the third tab, DMN tables with the input and output parameters are displayed . In the current version, these are displayed only if a BPMN process was started from the case that references a DMN table.

cccmui-casedetailsdecisionhistory

Decision History

The fourth tab shows the data you’ve determined and is especially useful for the developer.

cccmui-casedetailsrawdata

Raw Case Data

By selecting the „New Case“ button in the main navigation, a new case can be started.

cccmui-newcase

New Case

All existing cases in the process engine are listed. After the selection of a case a business key and process variables can be added.

cccmui-newcasewithvariable

New Case with Process Variables

As soon as a case has been started, you will be directed to the overview page, where the newly started case is also visible.

Used process engine

The project requires the Camunda BPM Process Engine. Camunda BPM is one of the first software vendorsthat has integrated CMMN 1.1 into their process engine and also provides a corresponding modeller. Since Camunda 7.6, the „CMMN Monitoring“ feature is also included in the Enterprise version.

CattleCrew Case Management UI is flexible designed so that the engine specific implementation can be replaced by another to test the UI with other process engines. In the following figure, the layers are shown in an abstract manner.

cccmui-architectureoverview

Technical Birdview

The project can be found on GitHub at https://github.com/opitzconsulting/cattlecrew-case-management-ui. There is also an installation manual. The QR code is

QR-Code

QR-Code

 

 

 

 

Of course, you are invited to participate to this project, too. If you are interested, please contact us.

Have fun on experimenting with case management and CMMN!

Feedback is always welcome 😉

Veröffentlicht unter ACM, BPM, camunda BPM, Integration, Modern Clients, Web Development | Kommentar hinterlassen

Data Lineage mit dem Oracle© Data Integrator 12c

In diesem Beitrag geht es darum, wie man Data Lineage mit dem ODI 12c umsetzen kann. Der Beitrag richtet sich u. a. an diejenigen, die den Ursprung ihrer Daten im DWH nicht mehr nachvollziehen können und vielleicht auch das Vertrauen in die Kennzahlen verloren haben.

Data Lineage beschreibt das Zurückverfolgen der Daten vom Ziel bis zur Quelle. Da ein DWH in den meisten Fällen aus mehreren komplexen ETL-Prozessen besteht, ist oft schwer nachzuvollziehen, aus welchen Quelldaten, Daten aus dem Frontend abgeleitet wurden. Bei der Umsetzung von Data Lineage profitiert man u. a. von einem erhöhten Vertrauen der Endanwender in die Daten im DWH. Weitere Vorteile, die sich aus einer Umsetzung ergeben, finden sich z. B. hier: Lineage tracing for general data warehouse transformations.

Für ein Kunden-DWH, das aus diversen komplexen ETL-Strecken besteht, wurde ein Prototyp zur Visualisierung, der Herkunft der Daten erstellt. Da die ETL-Strecken mithilfe des Oracle Data Integrator 12c entwickelt worden sind, wurde auch zum Abgreifen der Metadaten und zur Entwicklung des Prototyps die von Oracle zur Verfügung gestellte Java SDK genutzt.

Mithilfe der SDK wird eine Schnittstelle zum ODI entwickelt, welche die Metadaten ausliest und diese so aufbereitet, dass diese sinnvoll in einer Graphendatenbank, in diesem Fall Neo4J, gespeichert werden können. Dabei ist die Schnittstelle so implementiert, dass diese universell für jedes Projekt, das mit dem ODI entwickelt wird, verwendet werden kann. Die Daten werden einmal aus dem ODI geladen und bereitgestellt. Nach Änderungen sollen die Daten aus dem ODI neu geladen werden.

Die Daten in der Graphendatenbank werden mithilfe von D3js im Browser visualisiert. Dabei wird dem Nutzer eine Suchoption geboten, um sich nur die gewünschten Objekte darstellen zu lassen. Komponenten, die sich im selben Mapping befinden, werden „gehighlightet“, somit wird der Fluss der Daten transparent. (Für eine Defintion der ODI typischen Begriffe sei hier auf den Developers Guide für den Oracle© Data Integrator verwiesen.) Außerdem werden detaillierte Informationen zu den Komponenten visualisiert, wobei zwischen verschiedenen Typen unterschieden wird. So wird z. B. zwischen Join- und Expression-Komponenten differenziert. Ferner wird bei Join-Komponenten der Jointyp dargestellt. Die Transformationen  lassen sich daher besser nachvollziehen.

Diese Lösung bietet im Gegensatz zum OEMM 12c eine leichte Anpassbarkeit und Erweiterbarkeit sowie eine moderne Visualisierung.

Veröffentlicht unter BI | Verschlagwortet mit , , , , , | Kommentar hinterlassen

Geschichten aus dem OC|Lab: Retrofitting am Beispiel

In loser Folge werden wir hier aus Projekten berichten, die mit Hilfe des OC|Lab umgesetzt wurden.

Über Digitalisierung wird derzeit viel gesprochen und geschrieben. Viele scheuen sich aber vor dem Invest, den ein solcher Einstiegt eventuell bedeutet. Vor allem dann, wenn man große Maschinen hat, deren Abschreibungszyklus länger ist. Mit Retrofitting ergibt sich hier aber eine Möglichkeit, bestehende Hardware „smart“ zu machen. Das galt es einmal im realen Leben auszuprobieren.

Wir sind also mit der Idee des Retrofittings zu Q-loud (vergleiche älterer Post zu Q-loud) gegangen und haben hier über konkrete Ideen gesprochen. Zur Demonstration der Funktionalitäten der eignen Lösung hat Q-loud eine Maschine, die Würfel aus verschiedenen Unter- und Oberteilen zusammenbaut. Die Steuerung erfolgte über eine Siemens SPS. Die Arbeitsteilung war schnell klar, Q-loud sorgte für eine sichere Bereitstellung der Daten in der Cloud und wir waren für die Auswertung und optische Aufbereitung verantwortlich. So wurden die Daten von der Maschine durch einen zusätzlichen Sensor abgerufen und sofort an die IoT-Cloud von Q-loud gesendet. Auf Basis der dort vorliegenden historischen und aktuellen Daten hat sich das Team aus dem Lab überlegt, zwei Dashboards zu bauen: eines für das Management und eines für die Produktion.

dashboards-entwurf

Aus dem Entwurf wurden dann Dashboards, die die Daten in quasi Realtime (der Delay ergibt sich aus der Dauer der Übertragung der Daten, und auf Messen ist das WLan meist stark beansprucht) angezeigt und analysiert haben.

dashboards-prototyp

Auf der OOP 2017 konnten wir dann das Ergebnis präsentieren und sind auf großes Interesse gestoßen. In kurzer Zeit und mit relativ geringem Aufwand wurde eine Maschine, wie sie in vielen Fertigungen steht, „smart“ gemacht und die dort anfallenden Daten mit anderen Daten kombiniert und über weitere Lösungen Mehrwerte geschaffen, die an der Maschine direkt nicht möglich gewesen wären. Danke an das Team, der Retrofitting Test war damit bestanden.

Veröffentlicht unter cloud, Cloud Computing, Conference, German, IoT, Uncategorized | Verschlagwortet mit | Kommentar hinterlassen

Approve messages in Camunda BPM with DMN and forward via Camunda HTTP Connector

While I was watching today a video of Jakob Freund talking about “Camunda in the cloud”, I understood better the simple process modelled by my colleagues and me a couple of days ago. In this speech at the BPMCon 2016 he was talking about clients, who used Camunda, not being interested in the zero code case as much as the other advantages of BPM. Most of them see the ability to dis Weiterlesen

Veröffentlicht unter camunda BPM, English, Integration, Java | Kommentar hinterlassen