beac0n's blog https://schempp.dev Zola en Sun, 30 Mar 2025 00:00:00 +0000 About Sun, 30 Mar 2025 00:00:00 +0000 Unknown https://schempp.dev/about/ https://schempp.dev/about/ <h1 id="hi-there">Hi there</h1> <p>My name is beac0n <img src="/favicon.png" style="vertical-align: middle; padding: 0; margin: 0; border: 0; height: 16px; display: inline;"> and this is my blog.</p> <p>I'm a software engineer from germany and enjoy video gaming, hacking, coding.</p> <p>I don't write regularly, but I try to add new posts from time to time.</p> <p>I hope you enjoy the things I've put up on this blog :).</p> <p>So long and thanks for all the fish... 🐟</p> <h1 id="impressum">Impressum</h1> <p>Angaben gemäß § 5 TMG</p> <p>Maximilian Schempp</p> <p>Leonie-Ossowski-Promenade 11</p> <p>68309 Mannheim</p> <p>Deutschland</p> <p>E-Mail: <a href="mailto:&#99;&#111;&#110;&#116;&#97;&#110;&#116;&#64;&#115;&#99;&#104;&#101;&#109;&#112;&#112;&#46;&#100;&#101;&#118;"> contant@schempp.dev </a></p> Fair joint account transfer Sun, 28 Jan 2024 19:49:00 +0000 Unknown https://schempp.dev/blog/fair-joint-account-transfer/ https://schempp.dev/blog/fair-joint-account-transfer/ <form id="fairTransfer"> <label for="income_a">Income Partner A:</label> <input id="income_a" placeholder="Income Partner A" style="width: 300px" min="0" type="number" required> <br/> <label for="income_b">Income Partner B:</label> <input id="income_b" placeholder="Income Partner B" style="width: 300px" min="0" type="number" required> <br/> <label for="income_a_single">Income Partner A as single with no kids:</label> <input id="income_a_single" placeholder="Income Partner A single" style="width: 300px" min="0" type="number" required> <br/> <label for="income_b_single">Income Partner B as single with no kids:</label> <input id="income_b_single" placeholder="Income Partner B single" style="width: 300px" min="0" type="number" required> <br/> <label for="amount">Amount of money needed for common expenses:</label> <input id="amount" placeholder="Amount" style="width: 300px" min="0" type="number" required> <br/> <p id="amount_a"></p> <p id="amount_b"></p> <input type="submit" value="Calculate Amounts"> </form> <script type="text/javascript"> document.getElementById("fairTransfer").addEventListener("submit", (e) => { e.preventDefault() var income_a = Number(document.getElementById("income_a").value) var income_b = Number(document.getElementById("income_b").value) var income_a_single = Number(document.getElementById("income_a_single").value) var income_b_single = Number(document.getElementById("income_b_single").value) var amount = Number(document.getElementById("amount").value) var swap = income_a < income_b if (swap) { var cache = income_a income_a = income_b income_b = cache var cache = income_a_single income_a_single = income_b_single income_b_single = cache } var f = income_a_single / income_b_single var p_a = ((amount - income_b)*f + income_a) / (income_a * (f+1)) var p_b = ( amount + income_b *f - income_a) / (income_b * (f+1)) var amount_a = (income_a * p_a).toFixed(2) var amount_b = (income_b * p_b).toFixed(2) if (swap) { var cache = amount_a amount_a = amount_b amount_b = cache } document.getElementById("amount_a").innerHTML="Amount Partner A: " + amount_a + "€" document.getElementById("amount_b").innerHTML="Amount Partner B: " + amount_b + "€" }); </script> <p>The topic of "who contributes how much" in relationships, where partners live together often times leads to heated arguments.</p> <p>I came up with a formular, that tries to calculate the most fair amount, that each partner has to contribute to a joint banking account, which is used to pay all common expenses.</p> <p>I will use "partner A" and "partner B" to describe each partner in the relationshship.</p> <p>The formular needs the following variables:</p> <ul> <li> <p><code>income_a</code>: Current income of partner A <strong>after</strong> taxes</p> </li> <li> <p><code>income_b</code>: Current income of partner B <strong>after</strong> taxes</p> </li> <li> <p><code>income_a_single</code>: Income of partner A <strong>after</strong> taxes, <strong>if</strong> partner A would be <strong>single</strong> and had no kids</p> </li> <li> <p><code>income_b_single</code>: Income of partner B <strong>after</strong> taxes, <strong>if</strong> partner B would be <strong>single</strong> and had no kids</p> </li> <li> <p><code>amount</code>: Amount of money that the couple needs for their common expenses per month</p> </li> <li> <p><code>f = max(income_a_single, income_b_single) / min(income_a_single, income_b_single)</code>: fairness factor - how much more the "higher earner" partner earns, compared to the other partner</p> </li> </ul> <p>Up until this point, everything can be calculated easily, because it is well known how much each partner earns and also what they would earn if they where single.</p> <p>To calculate now how much each partner has to transfer to the joint account, we have to use that fairness factor, that we calculated earlier:</p> <ul> <li> <p><code>income_a * p_a + income_b * p_b = amount</code>, where</p> <ul> <li><code>p_a</code>: how much percent partner A pays of <code>amount</code></li> <li><code>p_b</code>: how much percent partner B pays of <code>amount</code></li> </ul> </li> <li> <p><code>f = (income_a * (1 - p_a)) / (income_b * (1 - p_b))</code>, where</p> <ul> <li><code>income_a * (1 - p_a)</code>: the amount of money that partner A has, <strong>after</strong> they transfered their share to the joint account</li> <li><code>income_b * (1 - p_b)</code>: the amount of money that partner B has, <strong>after</strong> they transfered their share to the joint account</li> </ul> </li> </ul> <p>To calculate <code>p_a</code> and <code>p_b</code>, we have to solve the equations for <code>p_a</code> and <code>p_b</code>:</p> <ul> <li><code>p_a = (amount*f - income_b*f + income_a) / (income_a * (f+1))</code></li> <li><code>p_b = (amount + income_b*f - income_a) / (income_b * (f+1))</code></li> </ul> <p>Which leads us to the final amounts for partners A and B: <code>amount = amount_a + amount_b</code>, where</p> <ul> <li><code>amount_a = income_a * p_a</code>: amount that partner A has to transfer to the joint account</li> <li><code>amount_b = income_b * p_b</code>: amount that partner B has to transfer to the joint account</li> </ul> <p>The idea is, that the ratio between the incomes of partner A and B that they earn if they would be single, is still the same after they have transferred their shares to the bank accounts.</p> <p>Example:</p> <p>Partner A earns 2000€ a month if they would be single, partner B earns 1000€ a month if they would be single: <code>f = 2</code>.</p> <p>They both have common expenses of 1000€ a month.</p> <p>Partner A and B are now married and partner A now earns 2500€ due to tax reasons and other benefits that they have because of their marriage and partner B now earns 850€, because they reduced the workload to take care of kids or for other reasons that contribute to the partnership (e.g. had to take a less well paid job, because both moved to further partner As carreer).</p> <p>After calculation, this means that partner B would have to contribute 66.66€ and partner A would have contribute 933.33€.</p> <p>Partner B would have left: <code>850 - 66.66 = 783.34€</code> and <br/> Partner A would have left: <code>2500 - 933.33 = 1566.67€</code>.</p> <p>The ration between the money that both partners have left is still <code>2</code>: <code>783.34 * 2 = 1566.68€</code>.</p> <p>Of course the values can change dramatically, depending on personal circumstances.</p> <p>The general idea however is, that both partners contribute their fair share, given their current income, compared to what they could earn, if both would focus only on their carreer given their respective fields. This formular tries to factor in the care work that is often done by one partner, while the other one contributes more financially to the partnership.</p> Family Graph Tool Mon, 11 Apr 2022 22:28:00 +0000 Unknown https://schempp.dev/blog/family-graph/ https://schempp.dev/blog/family-graph/ <p>I've developed a tool which allows the user to display their family tree.</p> <p>The special thing about this tool: it can have multiple family roots. This means that you could display your whole family tree together with the family tree of your spouse.</p> <p>This makes this a family "graph" rather than a family "tree", because it has multiple "roots".</p> <p>You can check out the tool <a rel="external" href="https://family-graph.schempp.dev">here</a>.</p> Tools Tue, 29 Sep 2020 00:00:00 +0000 Unknown https://schempp.dev/tools/ https://schempp.dev/tools/ <p>This page collects all the tools, which might come in handy in the daily work of a software developer. Most tools are just reimplementation of existing tools, which I found too insufficient to use. All tools are written in javascript and/or WebAssembly and don't require any network connection. Enjoy!</p> <p><a href="/tools/format-converter.html">Number format converter</a></p> <p><a href="/tools/text-tools.html">Text tools</a></p> <p><a href="/tools/timestamps.html">Date and timestamps</a></p> <p><a href="/tools/hash.html">Hash</a></p> <p><a href="/tools/permute.html">Permute</a></p> Cooking for nerds #1: Pumpkin one pot pasta Sun, 01 Dec 2019 00:00:00 +0000 Unknown https://schempp.dev/blog/2019-12-1-cooking-for-nerds-pumpkin-one-pot-pasta/ https://schempp.dev/blog/2019-12-1-cooking-for-nerds-pumpkin-one-pot-pasta/ <p>I don't like cooking, but I like good food. I therefore like recipes which are easy to implement.</p> <p><a rel="external" href="https://breifreibaby.de/kuerbis-one-pot-pasta/">https://breifreibaby.de/kuerbis-one-pot-pasta/</a> is one of those recipes.</p> <p>Unfortunately, like most recipes, it is written in running text. I will therefore try to simplify this recipe as much as possible and add my own improvements and fixes.</p> <h2 id="utensils">Utensils</h2> <ul> <li>one big cooking pot</li> <li>kitchen scale</li> <li>chopping board</li> <li>plastic gloves for slicing pumpkin</li> <li>bowl for measuring weight of pasta</li> <li>bowl for pumpkin pieces and cut carrots</li> <li>bowl for kitchen scraps</li> <li>big sharp knife for slicing pumpkin</li> <li>sharp knife for cutting onion and carrots</li> <li>small knife for peeling onion</li> <li>small bowl for diced onion</li> <li>small bowl for spices</li> <li>wooden spoon</li> <li>spoon to hollow out pumpkin</li> <li>tablespoon</li> <li>teaspoon</li> <li>measuring cup</li> <li>stove</li> <li>(optional) tools for opening containers</li> </ul> <h2 id="ingredients"><a name="ingredients"></a>Ingredients</h2> <ul> <li>350 g hokkaido pumpkin meat <ul> <li>wash</li> <li><strong>don't</strong> remove skin</li> <li>hollow out</li> <li>cut into rectangular (~1cm) pieces</li> </ul> </li> <li>120 g carrots <ul> <li>remove green stuff</li> <li>wash</li> <li>cut into thin slices</li> </ul> </li> <li>1 small onion <ul> <li>peel</li> <li>dice</li> </ul> </li> <li>400-500 ml coconut milk</li> <li>400 ml vegetable broth <ul> <li>use 1 flat teaspoon of vegetable broth powder and dissolve it in cooked water</li> </ul> </li> <li>250g pasta (not spaghetti)</li> <li>2 tablespoons frying oil (no need for container -&gt; fist ingredient) <ul> <li>use colza oil, sunflower oil or regular frying oil</li> </ul> </li> </ul> <p>Spices - put all in small bowl:</p> <ul> <li>1 pinch of salt</li> <li>1 flat teaspoon pepper</li> <li>0.5 flat teaspoon nutmeg</li> <li>1 flat teaspoon turmeric</li> </ul> <h2 id="recipe">Recipe</h2> <ul> <li>prepare everything as described in <a href="https://schempp.dev/blog/2019-12-1-cooking-for-nerds-pumpkin-one-pot-pasta/#ingredients">Ingredients</a></li> <li>prepare two timers for 2 and 3 minutes</li> <li>set stove to level 5/10</li> <li>add frying oil to big cooking pot</li> <li>add cut onion to big cooking pot</li> <li>wait 2 - 4 minutes -&gt; stir regularly</li> <li>add carrots to big cooking pot</li> <li>add pumpkin to big cooking pot</li> <li>wait 3 minutes -&gt; stir regularly</li> <li>add vegetable broth to big cooking pot</li> <li>add coconut milk to big cooking pot</li> <li>add pasta to big cooking pot</li> <li>stir everything well</li> <li>wait 2 minutes</li> <li>repeat stiring and waiting (approx. 11 minutes) until <ul> <li>pasta is al dente</li> <li>pumpkin and carrots are well done</li> </ul> </li> <li>season the food with the spices mentioned in <a href="https://schempp.dev/blog/2019-12-1-cooking-for-nerds-pumpkin-one-pot-pasta/#ingredients">Ingredients</a></li> <li>stir everything well so that the spices are evenly distributed</li> </ul> bye bye social media Sun, 26 Mar 2017 00:00:00 +0000 Unknown https://schempp.dev/blog/bye-bye-social-media/ https://schempp.dev/blog/bye-bye-social-media/ <p>I recently deleted all my social media accounts <strong>gasp</strong> , which were exactly two: facebook and twitter.</p> <h2 id="but-why">But why?</h2> <ol> <li>They consume too much time</li> <li>They provide little or no value for my live</li> <li>I can communicate with the people I care about through other software. Why do we have these messenger apps if we don't use them?</li> <li>Also I watched this <a rel="external" href="https://www.youtube.com/watch?v=3E7hkPZ-HTk">video</a></li> <li>I now get my tech news through various newsletters (and boy... there are a lot of them)</li> </ol> Optimizing my blog Sun, 26 Mar 2017 00:00:00 +0000 Unknown https://schempp.dev/blog/optimizing-my-blog/ https://schempp.dev/blog/optimizing-my-blog/ <p>Recently, I optimized my blog for page speed and file size. I did this, because I came across the <a rel="external" href="https://testmysite.thinkwithgoogle.com/">Mobile Website Speed Testing Tool</a> and my blog did not have 100 points in every category.</p> <p>It wasn't that bad though. My blog was above the 90 points margin. I still wanted to have 100 points in all categories, so I started optimizing my blog, which took longer than expected.</p> <h2 id="reading-the-detailed-report">Reading the detailed report</h2> <p>After google analyzed my blog, the report told me which party of my blog were not optimized. The report is splitted in three categories:</p> <ol> <li>mobile friendliness (got 99/100)</li> <li>mobile speed (got 91/100)</li> <li>desktop speed (got 97/100)</li> </ol> <h3 id="mobile-friendliness-size-tap-targets-appropriately">Mobile friendliness - size tap targets appropriately</h3> <p>My "tap targets" were not big enough. Apparently size still matters.</p> <p>Thanks to the report, which included <a rel="external" href="https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately">links</a> to all problems found, this was an easy fix:</p> <ul> <li>the distance between clickable elements should not be smaller than 32px (...done)</li> <li>clickable targets should be at least 48px big (...done)</li> </ul> <h3 id="mobile-and-desktop-speed-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content">Mobile and desktop speed - Eliminate render-blocking JavaScript and CSS in above-the-fold content</h3> <p>The categories "mobile speed" and "desktop speed" apparently measure the same thing but have different impacts on the score, because, e.g. big pictures are worse on a mobile client than on a desktop client.</p> <p>The only point which I got wrong was the render-blocking JavaScript and CSS in above-the-fold. I don't use JavaScript on my blog, so the only not optimized thing was my CSS.</p> <p>And this is the part where it gets a little bit ugly. I first started to pull out the stuff which is clearly "above-the-fold" (e.g. CSS for the header). This still didn't produce the wanted results. My score was still not 100/100. After fiddleing around for some time, I realized, that almost all of my CSS was "above-the-fold" (including blog posts).</p> <p>So I just put all of my CSS in the header, which is not that bad, because my CSS is not that big. I also optimized my CSS, using <a rel="external" href="https://github.com/css/csso">CSSO</a>.</p> <h2 id="not-done-yet">Not done yet</h2> <p>After having all scores maxed out (100/100) I tried <a rel="external" href="http://www.webpagetest.org/">webpagetest.org</a>. Turns out, that I haven actually enabled gzip compression for my favicon.ico. Since the favicon is the only image on my start page, which is not inlined, I got an F for compression T_T.</p> <p>The fix was easy. I just had to put</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="plain"><span class="giallo-l"><span>gzip_types *;</span></span></code></pre> <p>in the nginx config file.</p> Possible Frontend Architecture Mon, 06 Mar 2017 00:00:00 +0000 Unknown https://schempp.dev/blog/possible-frontend-architecture/ https://schempp.dev/blog/possible-frontend-architecture/ <p>This post is about how a frontend architecture could look like. The presented architecture is not the only way how to solve the problems in the frontend like loading time, data retrieval, etc. but it can be one possible way.</p> <h2 id="the-architecture">The architecture</h2> <p>In the architecture, the "backend" is behind an API-Gateway, which doesn't really concern us. The task of this API-Gateway is to handle REST-Calls.</p> <p>The four main parts in the frontend are:</p> <ol> <li> <p><strong>Data Fetcher:</strong> a server which fetches data from the API-Gateway. Could be <a rel="external" href="http://graphql.org/">GraphQL</a> or something like that.</p> </li> <li> <p><strong>Server Side Renderer:</strong> a server which prerenders the html/css markup for you. This is relevant for <a rel="external" href="https://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> and <a rel="external" href="http://andrewhfarmer.com/server-side-render/">performance</a> stuff. And with performance I mean the time it takes for your webpage to display something (If you code everything with React, you won't have static html, until you prerender it of couse).</p> </li> <li> <p><strong>Frontend Deliverer:</strong> delivers the js, css and image files to the browser. This could be something like a <a rel="external" href="https://en.wikipedia.org/wiki/Content_delivery_network">CDN</a> or a cookieless domain (just search the web for "cookieless domain" and you will find many blogs, suggesting that you should server static content from a cookieless domain...).</p> </li> <li> <p><strong>Browser:</strong> the software which you are using right now to view this page, unless you are using curl, wget or something similar...</p> </li> </ol> <p><img src="/images/frontendArchitecture.png" alt="alt text" title="Frontend Architecture" /></p> <h2 id="request-order">Request Order</h2> <ol> <li> <p>As seen in the image, the first thing the Browser has to do is send a request to some server. This server has to return the prerendered html markup, so the server has to be the Server Side Renderer.</p> </li> <li> <p>After the browser got the html page, it loads the javascript bundles and the css files from the Frontend Deliverer.</p> </li> <li> <p>Finally the javascript code is executed. The javascript code gets it's data from the Data Fetcher and</p> <ol> <li><strong>UPDATE:</strong> you could also store the data, using <a rel="external" href="http://graphql.org/">GraphQL</a> and <a rel="external" href="http://graphql.org/learn/queries/#mutations">Mutations</a>. But be aware, that <a rel="external" href="http://graphql.org/">GraphQL</a> and <a rel="external" href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm">REST</a> are <a rel="external" href="https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/">two completely different things</a>. Both have their strengths and weaknesses.</li> </ol> </li> <li> <p>sends PUT, POST or DELETE requests directly to the API Gateway. As the user uses the site, more requests might be sent to either the Data Fetcher or the API Gateway.</p> </li> </ol> <p>To prerender the site, the Server Side Renderer executes the same code, which is executed in the browser. Therefore the Server Side Renderer has to execute javascript at some point, which suggests that the Server Side Renderer should be implemented in javascript (e.g. node.js)</p> <h2 id="benefits">Benefits</h2> <p>You might ask yourself, why you should do this. After all, you could just deliver everything from one server. However, if you use this architecture you can:</p> <ul> <li>deploy separately from the backend, thus deploy faster and more secure (you just need to exchange some js bundles to update the frontend)</li> <li>optimize the size and count of http requests you need to send to the backend, thus reducing the amount of data transfered over a possible small bandwidth medium</li> <li>create an interface, which spereates the frontend from the backend in such a manner, that they are more exchangable</li> <li>reuse some of the parts of this architecture to implement a second user interface, e.g. for an mobile app</li> <li>write frontend integrationtests easier, because you don't need a running server on your local machine</li> <li>improve the developer experience by beeing able to develop the frontend much faster</li> </ul> <h2 id="drawbacks">Drawbacks</h2> <p>Of course, nothing is without drawbacks. Everything has a price. This architecture</p> <ul> <li>is more complex</li> <li>is not necessarily suited for frontend newcomers or junior developers, because it requires some expertise in how http, javascript and the browsers work</li> <li>needs more effort to maintain, because if you deploy your frontend detached from your backend, your current frontend version has to match the current backend version or be backwards compatible, and vice versa</li> </ul> <h2 id="conclusion">Conclusion</h2> <p>If you need a frontend, which <strong>has</strong> to look and feel homogeneous, you should use this architecture.</p> <p>If you need a frontend, which <strong>can</strong> look and feel homogeneous, you should still use this architecture.</p> <p>If you need a frontend, which <strong>musn't</strong> look and feel homogenous, you could still use this architecture. After all, why wouldn't you want to have the benefits described above?</p> <p>Of course if you are writing a small service, building such an architecture is way to oversized. So for small services, you shouldn't use this architecture.</p> <p>In the end it all comes down to how big your frontend is going to be. At some point you have to think about the problems which occur with big web applications and this architecture might help you solve some of them.</p> React-Redux Frontend Architecture Sat, 22 Oct 2016 14:39:10 +0000 Unknown https://schempp.dev/blog/react-redux-architecture/ https://schempp.dev/blog/react-redux-architecture/ <p>This post is about how we used <a rel="external" href="https://facebook.github.io/react/">React</a> in combination with <a rel="external" href="http://redux.js.org/">Redux</a> in our project, to create a frontend architecture, in which the code we write is easy to test, maintain and extend.</p> <h2 id="the-categories-of-the-architecture">The categories of the architecture</h2> <p>We divided the files in our project in seven categories:</p> <ol> <li>(<a rel="external" href="https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d">Stateless</a>) <a rel="external" href="https://facebook.github.io/react/docs/react-component.html">Components</a></li> <li><a rel="external" href="http://redux.js.org/docs/basics/UsageWithReact.html#container-components">Redux Containers</a></li> <li><a rel="external" href="http://redux.js.org/docs/basics/Actions.html#action-creators">Action Creators</a></li> <li>Controllers</li> <li><a rel="external" href="http://redux.js.org/docs/basics/Reducers.html">Reducers</a></li> <li><a rel="external" href="http://redux.js.org/docs/recipes/ComputingDerivedData.html">Selectors</a></li> <li>APIs</li> </ol> <p>How the different categories work together can be seen in the following graphic:</p> <p><img src="/images/reactReduxArchitecture.png" alt="alt text" title="React-Redux-Architecture" /></p> <p>Most of the categories are marked with either the react-icon <img src="/images/reactLogo.svg" alt="react-icon" class="iconImage"> or the redux-icon <img src="/images/reduxLogo.svg" alt="redux-icon" class="iconImage">.</p> <p>Categories marked with an icon are a common principle of the library, which the icon represents. Looking at the graphic, you can see that most of the categories are already a common part of either the react or redux library. Only the "Controllers" and the "APIs" categories are different. These categories provide abstractions, which make it easier to maintain and improve the code.</p> <p>As seen in the graphic, components seem to always be inside a container. However, components do not necessarily need to be in a container to be used. Sometimes components are used directly in other components and get their properties in the components which are inside a container:</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #81A1C1;">const</span><span style="color: #88C0D0;"> ComponentWithContainer</span><span style="color: #81A1C1;"> =</span><span> (</span></span> <span class="giallo-l"><span style="color: #ECEFF4;"> {</span><span>valueA</span><span style="color: #ECEFF4;">,</span><span> valueB</span><span style="color: #ECEFF4;">,</span><span> callbackA</span><span style="color: #ECEFF4;">}</span><span>)</span><span style="color: #81A1C1;"> =&gt;</span><span style="color: #ECEFF4;"> {</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #81A1C1;"> return</span><span> (</span></span> <span class="giallo-l"><span style="color: #81A1C1;"> &lt;div&gt;</span></span> <span class="giallo-l"><span style="color: #81A1C1;"> &lt;p&gt;{</span><span>valueA</span><span style="color: #81A1C1;">}</span><span>: </span><span style="color: #81A1C1;">{</span><span>valueB</span><span style="color: #81A1C1;">}&lt;/p&gt;</span><span> </span></span> <span class="giallo-l"><span style="color: #81A1C1;"> &lt;</span><span style="color: #8FBCBB;">ComponentWithoutContainer</span><span> </span></span> <span class="giallo-l"><span style="color: #8FBCBB;"> doStuff</span><span style="color: #81A1C1;">={</span><span>callbackA</span><span style="color: #81A1C1;">}</span><span> </span></span> <span class="giallo-l"><span style="color: #81A1C1;"> /&gt;</span></span> <span class="giallo-l"><span style="color: #81A1C1;"> &lt;/div&gt;</span><span>)</span></span> <span class="giallo-l"><span style="color: #ECEFF4;">}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #81A1C1;">export default</span><span style="color: #88C0D0;"> connect</span><span>(</span><span style="color: #81A1C1;">...</span><span>)(ComponentWithContainer)</span></span></code></pre> <p>The <strong>APIs</strong> category contains APIs to communicate with webservices in the backend, but it can also encapsulate other APIs, like e.g. an API to legacy code in the frontend or an API to a third-party frontend library like a tracking-API.</p> <p><strong>Controllers</strong> contain more complex logic and use the APIs and the Action Creators to fulfill their work. The Controllers use the Action Creators to e.g. chain multiple Actions and API calls together by using promises. In the following example, we are using <a rel="external" href="https://github.com/gaearon/redux-thunk">thunk</a> to be able to use function callbacks in addition to action creators.</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #81A1C1;">import * as</span><span style="color: #8FBCBB;"> backend</span><span style="color: #81A1C1;"> from</span><span style="color: #ECEFF4;"> &#39;</span><span style="color: #A3BE8C;">../api/backendRest</span><span style="color: #ECEFF4;">&#39;</span></span> <span class="giallo-l"><span style="color: #81A1C1;">import * as</span><span style="color: #8FBCBB;"> actions</span><span style="color: #81A1C1;"> from</span><span style="color: #ECEFF4;"> &#39;</span><span style="color: #A3BE8C;">../actions/someActions</span><span style="color: #ECEFF4;">&#39;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #81A1C1;">export function</span><span style="color: #88C0D0;"> someController</span><span style="color: #ECEFF4;">()</span><span style="color: #81A1C1;"> =&gt;</span><span style="color: #ECEFF4;"> {</span></span> <span class="giallo-l"><span style="color: #88C0D0;"> return</span><span style="color: #ECEFF4;"> (</span><span>dispatch</span><span style="color: #ECEFF4;">,</span><span> getState</span><span style="color: #ECEFF4;">)</span><span style="color: #81A1C1;"> =&gt;</span><span style="color: #ECEFF4;"> {</span></span> <span class="giallo-l"><span> return backend</span><span style="color: #ECEFF4;">.</span><span>fetchSomeData</span><span style="color: #ECEFF4;">()</span></span> <span class="giallo-l"><span> .then(</span><span style="color: #ECEFF4;">(</span><span>json</span><span style="color: #ECEFF4;">)</span><span style="color: #81A1C1;"> =&gt;</span><span style="color: #ECEFF4;"> {</span></span> <span class="giallo-l"><span style="color: #88C0D0;"> dispatch</span><span style="color: #ECEFF4;">(</span><span>actions.actionA(json</span><span style="color: #ECEFF4;">)</span><span>)</span></span> <span class="giallo-l"><span style="color: #ECEFF4;"> }</span><span>)</span></span> <span class="giallo-l"><span> .catch(</span><span style="color: #ECEFF4;">(</span><span>error</span><span style="color: #ECEFF4;">)</span><span style="color: #81A1C1;"> =&gt;</span><span style="color: #ECEFF4;"> {</span></span> <span class="giallo-l"><span> console</span><span style="color: #ECEFF4;">.</span><span>warn(</span><span style="color: #ECEFF4;">&#39;</span><span style="color: #A3BE8C;">ERROR:</span><span style="color: #ECEFF4;">&#39;,</span><span> error)</span></span> <span class="giallo-l"><span style="color: #ECEFF4;"> }</span><span>)</span></span> <span class="giallo-l"><span style="color: #ECEFF4;"> }</span></span> <span class="giallo-l"><span style="color: #ECEFF4;">}</span></span></code></pre> <p>In the example above, we first get data from the backend and then use said data with an action. Of course we can do more complex things in the controllers, like e.g. more complex communication with different backends.</p> <p>How the other categories (marked with <img src="/images/reduxLogo.svg" alt="redux-icon" class="iconImage"> or <img src="/images/reactLogo.svg" alt="react-icon" class="iconImage">) are used together is already described on <a rel="external" href="http://redux.js.org/">redux.js</a> or <a rel="external" href="https://facebook.github.io/react/docs/hello-world.html">React</a></p> <h2 id="testing">Testing</h2> <p>To test our application, we use unit tests, as well as integration tests. Everything that is reasonable testable without using the backend, is tested with unit tests. Everything that would be really hard to mock, is tested with integration tests.</p> <p>In our project, we unit test the react components, which is really easy, because they are almost always functional components. This does not mean, that stateful components should never be used. However, stateful components should only be used if necessary. Only use stateful components, if the state has something to do with the visual representation of the component. Never put business logic in your components! Putting business logic in your components is like putting business logic in the view of a <a rel="external" href="http://martinfowler.com/eaaDev/uiArchs.html#ModelViewController">MVC</a> program. More on stateful vs stateless components can be found <a rel="external" href="https://facebook.github.io/react/docs/state-and-lifecycle.html">here</a></p> <p>Furthermore, we also unit test the selectors and the actions together with the reducers. To test our react components, we use <a rel="external" href="https://facebook.github.io/jest/">jest</a> together with <a rel="external" href="https://github.com/airbnb/enzyme">enzyme</a>.</p> <p>The Controllers and the APIs are tested (together with everything else) with integration tests, since they are heavily dependent on an existing backend. However, our integration tests test everything except the react components (which are already covered by the unit tests). So the integration tests replace the react components (so to say) and trigger all the functionality, stored in the Controllers and Action categories, which can be seen in the following graphic:</p> <p><img src="/images/reactReduxArchitectureIntegrationTesting.png" alt="alt text" title="React-Redux-Architecture - Integration testing" /></p> <p>The integration tests run on node.js, as well as the unit tests. This means, that we can test every category and every component in our application, without starting the browser (which is awesome :-) ).</p> <p>Of course we still need some <a rel="external" href="http://docs.seleniumhq.org/">selenium</a> tests, to tests the application in different browsers. However, the amount of selenium tests can be reduced significantly.</p> <p>Furthermore, "replacing" the react components with integration tests makes it very easy to write said integration tests, because you could say, that the integration tests are just another "view".</p> <p>So instead of having react components, which the user can use (by clicking, typing), you have the integration tests which take care of the interaction. Thus an integration test can be written like a user story and is therefore easy to understand.</p> <p>An integration test, involving two sites which are implementet with react and redux and use the same backend could be testet as follows:</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="javascript"><span class="giallo-l"><span style="color: #81A1C1;">const</span><span> storeSiteA</span><span style="color: #81A1C1;"> =</span><span style="color: #88C0D0;"> createStoreFromRootReducer</span><span>(rootReducerSiteA)</span></span> <span class="giallo-l"><span style="color: #81A1C1;">const</span><span> storeSiteB</span><span style="color: #81A1C1;"> =</span><span style="color: #88C0D0;"> createStoreFromRootReducer</span><span>(rootReducerSiteB)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #616E88;">// changes something in the backend which affects the other site</span></span> <span class="giallo-l"><span>storeSiteA</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">dispatch</span><span>(siteAactions</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">someAction</span><span>())</span></span> <span class="giallo-l"><span style="color: #616E88;">// expect the change to have an effect on the state</span></span> <span class="giallo-l"><span style="color: #88C0D0;">expect</span><span>(siteAselectors</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">someSelector</span><span>(storeSiteA</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">getState</span><span>()))</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">toBe</span><span>(</span><span style="color: #81A1C1;">...</span><span>)</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #616E88;">// get data from backend</span></span> <span class="giallo-l"><span>storeSiteB</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">dispatch</span><span>(siteBactions</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">pullData</span><span>())</span></span> <span class="giallo-l"><span style="color: #616E88;">// expect data to be what came from site A</span></span> <span class="giallo-l"><span style="color: #88C0D0;">expect</span><span>(siteBselectors</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">getData</span><span>(storeSiteB</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">getState</span><span>()))</span><span style="color: #ECEFF4;">.</span><span style="color: #88C0D0;">toBe</span><span>(</span><span style="color: #81A1C1;">...</span><span>)</span></span></code></pre> <p>The actions and selectors which are used by the components are also used by the integration test.</p> The importance of refactoring Fri, 14 Oct 2016 14:39:10 +0000 Unknown https://schempp.dev/blog/the-importance-of-refactoring/ https://schempp.dev/blog/the-importance-of-refactoring/ <p>Describing refactoring to a non-developer person can be tough. Especially when this person does not understand the implications of the absence of clean code or other code-quality improving techniques.</p> <p>If you try to explain code-quality improving techniques to non-developer persons, you might hear questions like "why haven't you done it right the first time?".</p> <p>Even explaining why code-quality matters is really difficult, particularly when money is involved. For a person who is only interested in making money with the resulting software, improving code-quality sounds like a waste of time and money, because the software might work, even without improving the code-quality.</p> <p>But if you want to continue developing the software, the code needs to be maintainable, well structured and as small as possible but still understandable. Because if it isn't, developing new features and fixing bugs will become nearly impossible.</p> <p>Communicating the importance of code-quality to a non-developer person verbally is hard. To make the process of highlighting the importance of code-quality and refactoring more easy, I created a four-quadrant matrix.</p> <h3 id="the-refactoring-matrix">The Refactoring-Matrix</h3> <p><img src="/images/refactoringMatrix.png" alt="alt text" title="Refactoring-Matrix" /></p> <p>As the old saying goes "a picture is worth a thousand words", this graphic is meant to explain the importance of refactoring and code-quality without going into detail too much.</p> <h2 id="the-axes">The axes</h2> <p>In the grahpic, you can see two axes. The x-axis describes the time, which is spent in the current project (the time spent on the software).</p> <p>The y-axis describes the time, which is spent on the implementation of new features or the time spent on bug-fixing.</p> <p>The matrix in general is meant to describe the correlation between time, which has passed, and the effort which is needed to implement new features or fix existing bugs.</p> <p>The red and green lines describe what happens if you do/don't do refactoring</p> <h2 id="">?</h2> <p>The quadrant on the lower left is the quadrant in which every new project starts. It's too early to say something about the quality of the code, because there simply isn't much code.</p> <h2 id="this-should-not-happen">This should not happen</h2> <p>The quadrant on the upper left should never be reached in any project. If this quadrant is reached, it means that you need a lot of time do implement new features in the early phase of the project. This might still happen, if</p> <ul> <li>people use a technology which is not suited for the task or outdated</li> <li>people use a technology they are not familiar with, so they have to learn the whole language/framework</li> <li>people put to much effort in thinking about absolutely <strong>every</strong> little detail instead of writing code</li> </ul> <h2 id="no-problems">no problems</h2> <p>The quadrant on the lower right is the quadrant in which every project should be. In this quadrant,</p> <ul> <li>new features are easy to develop in a short amount of time</li> <li>bugs are easy to detect and easy to fix</li> <li>the code is as small as possible and as big as necessary</li> <li>there are many tests</li> <li>tests are easy to write</li> </ul> <p>This quadrant can be reached by constantly doing refactoring and constantly thinking about improvements of the code-quality and software architecture.</p> <p>As you can clearly see in the graphic, the green line does <strong>not</strong> converge to zero, it's more like a sinus curve. This means, that you can't develop the "perfect" software architecture and never need to think about this stuff again. It means, that whatever is done in the project, the developers have to think and do something about the software-architecture/clean-code.</p> <h2 id="danger-zone">danger zone</h2> <p>The quadrant on the upper left is the quadrant, which a project should never ever reach. In this quadrant,</p> <ul> <li>the code is unmaintainable,</li> <li>the code is complicated/hard to understand</li> <li>new features take a (very) long time to implement</li> <li>bugs are hard to fix</li> <li>there are no or too little tests</li> <li>tests are (really) hard to write</li> </ul> <p>The red line in this quadrant looks like the half of a parabola, which means that the red curve will rise very fast. Every feature implemented in such a project will take longer and longer for every feature that is developed.</p> <p>This means, that after some time, the software will not be maintainable anymore. New features can't be developed, because they would break something somewhere. It is therefore very important, that a project never gets too deep into the "danger zone", because it might never leave it again.</p> Fix bootloader problem with Linux in windows Wed, 27 May 2015 20:34:30 +0000 Unknown https://schempp.dev/blog/fix-linux-windows-bootloader/ https://schempp.dev/blog/fix-linux-windows-bootloader/ <p>If you install windows after you installed Linux, the Linux bootloader will be "overwritten".</p> <p>To fix this, you don't have to reinstall grub or syslinux or any other bootloader you are using. Just boot into windows, figure out on which partition the bootloader is and set the active partition flag on this partition.</p> <h2 id="set-the-active-partition">set the active partition</h2> <p>to set the active partition, you simply can use diskpart. Run diskpart:</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #88C0D0;">diskpart</span></span></code></pre> <p>then navigate to the disk, containing the Linux partition with the bootloader. For example:</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #81A1C1;">select</span><span> disk 0</span></span> <span class="giallo-l"><span style="color: #81A1C1;">select</span><span> partition 3</span></span> <span class="giallo-l"><span style="color: #88C0D0;">active</span></span> <span class="giallo-l"><span style="color: #88C0D0;">exit</span></span></code></pre> <p>in this case, the bootloader of my Linux installation was on my first disk on partition three.</p> <h2 id="update-problems">update problems</h2> <p>For some updates in windows 7, the active partition needs to be the partition with the windows bootloader on it. The windows 7 bootloader partition is usually 100MB big and is the partition right before the partition with your windows 7 system.</p> <h2 id="scripts">scripts</h2> <p>to make life easier, I wrote some scripts which set the active flag on either the partition with syslinux or the partition with the windows bootloader.</p> <p>file arch</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #81A1C1;">select</span><span> disk 0</span></span> <span class="giallo-l"><span style="color: #81A1C1;">select</span><span> partition 2</span></span> <span class="giallo-l"><span style="color: #88C0D0;">active</span></span> <span class="giallo-l"><span style="color: #88C0D0;">exit</span></span></code></pre> <p>file windows</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #81A1C1;">select</span><span> disk 0</span></span> <span class="giallo-l"><span style="color: #81A1C1;">select</span><span> partition 3</span></span> <span class="giallo-l"><span style="color: #88C0D0;">active</span></span> <span class="giallo-l"><span style="color: #88C0D0;">exit</span></span></code></pre> <p>file set_boot_loader.bat</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #88C0D0;">diskpart</span><span style="color: #A3BE8C;"> /s</span><span style="color: #ECEFF4;"> &quot;</span><span style="color: #A3BE8C;">%~dpnx1</span><span style="color: #ECEFF4;">&quot;</span><span style="color: #81A1C1;"> &gt;</span><span style="color: #A3BE8C;"> logfile.txt</span></span></code></pre> <p>file set_boot_loader_arch.bat</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #88C0D0;">set_boot_loader.bat</span><span style="color: #A3BE8C;"> arch</span></span></code></pre> <p>file set_boot_loader_windows.bat</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #88C0D0;">set_boot_loader.bat</span><span style="color: #A3BE8C;"> windows</span></span></code></pre> Apps you should have for rooted Android devices Fri, 26 Dec 2014 12:33:51 +0000 Unknown https://schempp.dev/blog/apps-you-should-have/ https://schempp.dev/blog/apps-you-should-have/ <p>After rooting my android device, I realized, that there are a variety of apps which are very powerful if you have a rooted device. In this post, I want to introduce you to my favorite apps which are <strong>only</strong> for rooted devices or are <strong>more useful</strong> on rooted devices.</p> <h2 id="voltage-control"><a rel="external" href="https://play.google.com/store/apps/details?id=com.darekxan.voltagecontrol">Voltage Control</a></h2> <p>This simple app allows you to change the CPU govenours, IO shedulers and the CPU frequency. It does <strong>not</strong> have profiles and all this "if screen turned of then..." stuff which is, in my opinion, positive in any way. Additionally, this app is completely free and has no advertisement what so ever.</p> <h2 id="greenify"><a rel="external" href="https://play.google.com/store/apps/details?id=com.oasisfeng.greenify">Greenify</a></h2> <p>Another great app, which also works on not rooted devices. Of course the full potential of this app is only accessible with root rights. Furthermore the power of this app can be extended by installing an extension called <a rel="external" href="http://repo.xposed.info/module/de.robv.android.xposed.installer">xposed framework</a>. So what does this app do? It simply puts all selected apps in a hibernate mode, which makes the apps use much less power than they would normally do. With the additional exposed framework, one can unlock the experimental features.</p> <h2 id="os-monitor"><a rel="external" href="https://play.google.com/store/apps/details?id=com.eolwral.osmonitor">OS Monitor</a></h2> <p>Another app, which only works with root rights. This app is similar to <strong>htop</strong> in Linux or <strong>taskmanager</strong> in windows. It allows the user to list and interact with all running process, connections and other stuff.</p> <h2 id="afwall"><a rel="external" href="https://play.google.com/store/apps/details?id=dev.ukanth.ufirewall">AFWall+</a></h2> <p>A must have for all rooted phones. This app simply is a firewall with blacklists or whitelists and some other stuff like logs. You can select which app is allowed to connect via Wifi and/or mobile Internet.</p> <h2 id="gsam-battery-monitor"><a rel="external" href="https://play.google.com/store/apps/details?id=com.gsamlabs.bbm&amp;hl=de">GSam Battery Monitor</a></h2> <p>This is the best app for tracking your battery. It shows you which app sucks the most out of your battery and shows you all sort of information about the battery drain. Definitely a must have.</p> <h2 id="repetitouch"><a rel="external" href="https://play.google.com/store/apps/details?id=com.cygery.repetitouch.free&amp;hl=de">RepetiTouch</a></h2> <p>Awesome app. Basically this app allows you to <strong>record</strong> your typing on the screen, and then allows you to <strong>play back</strong> what you just recorded. You can also define how much you want your recording to be played back.</p> Reverse Tether mit Cyanogenmod 7.2.0 und Kubuntu 12.04 LTS Mon, 27 May 2013 00:00:00 +0000 Unknown https://schempp.dev/blog/reverse-tether-mit-cyanogenmod-7-2-0-und-kubuntu-12-04-lts/ https://schempp.dev/blog/reverse-tether-mit-cyanogenmod-7-2-0-und-kubuntu-12-04-lts/ <p>Folgendes Tutorial beschreibt, wie man mit dem Smartphone per USB über den PC ins Internet zu verbindet:</p> <p>Zuerst richtet man bei Kubuntu neben der Verbindung für das Internet eine neue Verbindung ein, die als Methode "Gemeinsam" verwendet.</p> <p>Nun aktiviert man auf dem Smartphone USB-Tethering und verbindet, unter Kubuntu, über die eben erstellten Verbindung, mit dem Smartphone (sollte im Netzwerkmanager zu sehen sein).</p> <p>Jetzt tippt man im Terminal in Kubuntu "ifconfig" ein und schaut welche IP die zum Smartphone gehörige Verbindung hat (z.B. 10.42.0.1) und wie die Verbindung heißt (z.B. usb0).</p> <p>Anschließend öffnet man auf dem Smartphone einen Terminal Emulator, ich empfehle <a rel="external" title="https://play.google.com/store/apps/details?id=jackpal.androidterm" href="https://play.google.com/store/apps/details?id=jackpal.androidterm">https://play.google.com/store/apps/details?id=jackpal.androidterm</a> und gibt folgendes ein:</p> <pre class="giallo" style="color: #D8DEE9; background-color: #2E3440;"><code data-lang="shellscript"><span class="giallo-l"><span style="color: #88C0D0;">su</span><span style="color: #A3BE8C;"> busybox ifconfig usb0</span><span style="color: #B48EAD;"> 10.42.0.5</span><span style="color: #A3BE8C;"> up route add default gw</span><span style="color: #B48EAD;"> 10.42.0.1</span><span style="color: #A3BE8C;"> dev usb0</span></span></code></pre> <p>Wobei 10.42.0.1 die zum Smartphone gehörige IP ist und usb0 die Kabelverbindung zum Smartphone. Die IP 10.42.0.5 kann eigentlich eine beliebige sein, muss aber im selben Netz wie die zum Smartphone gehörige liegen.</p> Drohne Relief-Darstellung Thu, 28 Mar 2013 00:00:00 +0000 Unknown https://schempp.dev/blog/drohne-relief-darstellung/ https://schempp.dev/blog/drohne-relief-darstellung/ <p>Im Rahmen des einwöchigen Autonome Systeme Labors wurde die nachfolgende Dokumentation in Zusammenarbeit mit meinem Kommilitonen Thorsten Z. angefertigt.</p> <h2 id="inhalt">Inhalt</h2> <ul> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Gruppenmitglieder">Gruppenmitglieder</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Zusammenfassung_47_Abstract">Zusammenfassung / Abstract</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Keywords">Keywords</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Arbeitsplan">Arbeitsplan</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Einf_252hrung">Einführung</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Aufgabenanalyse">Aufgabenanalyse</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Relevante_Komponenten_des_RoboView_45Frameworks">Relevante Komponenten des RoboView-Frameworks</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Mathematisches_Modell_f_252r_die_Erfassungseigenschaften_des_Ultraschall_45Sensors">Mathematisches Modell für die Erfassungseigenschaften des Ultraschall-Sensors</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Idee">Idee</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Modell">Modell</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Bezeichnungen">Bezeichnungen</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Ablauf">Ablauf</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Algorithmus_in_Pseudocode">Algorithmus in Pseudocode</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Modellierung_der_Datenstruktur_45_GridMap">Modellierung der Datenstruktur - GridMap</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Idee_AN1">Idee</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Interface">Interface</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Implementierung_der_GridMap">Implementierung der GridMap</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#HashMap">HashMap</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Hashing_45Verfahren">Hashing-Verfahren</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Mapping_von_gemessenen_Punkt_45Daten_auf_Zellen_in_der_GridMap">Mapping von gemessenen Punkt-Daten auf Zellen in der GridMap</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Wahrscheinlichkeitswert_f_252r_eine_Zelle_setzen">Wahrscheinlichkeitswert für eine Zelle setzen</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Ausdehnung_der_GridMap">Ausdehnung der GridMap</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#GridMap_leeren">GridMap leeren</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Ausblick">Ausblick</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Abtastrate">Abtastrate</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Grafische_Implementierung">Grafische Implementierung</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Coverage_Maps">Coverage Maps</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Referenzen">Referenzen</a></li> <li><a href="https://schempp.dev/blog/drohne-relief-darstellung/#Ressourcen">Ressourcen</a></li> </ul> <h3 id="gruppenmitglieder"><a name="Gruppenmitglieder"></a>Gruppenmitglieder</h3> <ul> <li>Thorsten Z.</li> <li>Maximilian S.</li> </ul> <h3 id="zusammenfassung-abstract"><a name="Zusammenfassung_47_Abstract"></a>Zusammenfassung / Abstract</h3> <p>Die Arbeit beschreibt ein Modell für die Erfassungseigenschaften eines Ultraschall-Sensors. Ein Ultraschall-Sensor hat eine kegelförmige Abtastung. Wenn ein Objekt durch den Sensor erkannt wurde, bekommt man einen Distanzwert zurück gegeben, Informationen über die Lage des Objektes innerhalb des Kegels fehlen jedoch. Durch die mathematische Analyse des Abtastkegels, konnte ein Modell für den Sensor erstellt werden. In einem eigens dafür entwickelten Algorithmus wird der Ultraschall-Kegel mit Hilfe ausgesendeter Vektoren stückweise abgetastet und Wahrscheinlichkeitswerte über die abgetasteten Regionen berechnet. Dadurch wird eine Statistik über die Wahrscheinlichkeit des Ortes eines Objektes innerhalb des Kegels ermittelt. Weiter wird eine spezielle Datenstruktur, eine so genannte GridMap, vorgestellt, in die diese Wahrscheinlichkeitswerte abgelegt werden. Zuletzt wird die GridMap ausgelesen und die interpretierten Wahrscheinlichkeitswerte als Relief in OpenGL dargestellt.</p> <h3 id="keywords"><a name="Keywords"></a>Keywords</h3> <p>Ultraschall, Sensor, GridMap, OpenGL, Topologie, Raumtopologie</p> <h3 id="arbeitsplan"><a name="Arbeitsplan"></a>Arbeitsplan</h3> <p>Montag 25.02.2013</p> <ul> <li><strong>Aufgabenanalyse (Milestone 0)</strong></li> <li>Teilaufgaben festlegen und Arbeitsplan erstellen.</li> <li>Bereits existierende Ansätze ermitteln.</li> <li>Theoretische Einarbeitung in das Thema (Grid Maps).</li> <li>Ziel: Allgemeines Verständnis was wie zu tun ist und Projektspezifikation.</li> </ul> <p>Dienstag 26.02.2013</p> <ul> <li><strong>In Eclipse-Projektstruktur/-Projektfunktionen einarbeiten (Milestone 1)</strong></li> <li>Bestimmung der für das Ziel relevant Projektkomponenten.</li> <li>Bestimmen an welcher Stelle Komponenten erweitert werden müssen.</li> <li>Bestimmen wie auf Sensordaten zugegriffen werden kann.</li> <li>Ziel: Allgemeines Verständnis der bereits vorhandenen Projekstruktur/-komponenten und Dokumentation der relevanten Komponenten.</li> <li><strong>Entwicklung des Modelles für Erfassungseigenschaften des Ultraschall-Sensors (Milestone 2)</strong></li> <li>Analyse der Sensordaten.</li> <li>Kegelproblematik lösen</li> <li>Bestimmen welche mathematischen Lösungswege möglich/sinnvoll sind.</li> <li>Modell mathematisch formulieren und Algorithmus erarbeiten</li> </ul> <p>Mittwoch 27.02.2013</p> <ul> <li><strong>Entwicklung des Modelles für Erfassungseigenschaften des Ultraschall-Sensors (Milestone 2)</strong></li> <li><strong>Implementierung des Modells mit einer Software-Architektur</strong></li> <li>Implementierung der GridMap <strong>(Milestone 3)</strong></li> <li>Interface</li> <li>Implementierung der kegelförmigen Ultraschallerfassung. <strong>(Milestone 4)</strong></li> <li>Ziel: Fertiges Modell, welches in der Lage ist, per Ultraschallsensor eine Karte zu erstellen.</li> </ul> <p>Donnerstag 28.02.2013</p> <ul> <li><strong>Implementierung des Modells mit einer Software-Architektur</strong></li> <li>Implementierung der kegelförmigen Ultraschallerfassung. <strong>(Milestone 4)</strong></li> <li>Ziel: Fertiges Modell, welches in der Lage ist, per Ultraschallsensor eine Karte zu erstellen.</li> </ul> <p>Freitag 29.02.2013</p> <ul> <li><strong>Implementierung des Modells mit einer Software-Architektur</strong></li> <li>Implementierung der kegelförmigen Ultraschallerfassung. <strong>(Milestone 4)</strong></li> <li>Ziel: Fertiges Modell, welches in der Lage ist, per Ultraschallsensor eine Karte zu erstellen</li> <li>Dokumentation</li> </ul> <h3 id="einfuhrung"><a name="Einf_252hrung"></a>Einführung</h3> <p>Ultraschall-Sensoren senden Schallwellen, die in ihrer Ausbreitung die Form eines Kegels bilden. Die gemessene Distanz enthält keine Informationen, wo innerhalb des Kegels ein Objekt lokalisiert ist. Für gewisse Anwendungen ist die Information über die Lage eines gefundenen Objektes jedoch gewünscht, zum Beispiel beim Kartografieren eines Geländes. Ein anderer Punkt betrifft die Kosten der Sensoren. Es könnte anstelle eines Ultraschall-Sensors auch ein Laser oder ein bildgebender Sensor eingesetzt werden, der die Lokalisierung deutlich vereinfacht. Durch den Einsatz eines günstigen Ultraschall-Sensors und die Entwicklung eines sinnvollen mathematischen Modells, wählt man die preisgünstigere Variante. Beide Aspekte sind beim vorliegenden Projekt der Flugdrohne von Bedeutung.</p> <h3 id="aufgabenanalyse"><a name="Aufgabenanalyse"></a>Aufgabenanalyse</h3> <p>Im Zuge der Aufgabenanalyse sowie der Einarbeitung in die Entwicklungsumgebung und die gesamte Projektstruktur, soll die Aufgabe komplett verstanden und mögliche Lösungsansätze bereits skizziert werden. Innerhalb der Projektstruktur sollen die potenziell zu bearbeitenden Stellen herausgefunden werden. (siehe Milestone 0 und 1). Es soll analysiert werden, welche Informationen der Ultraschallsensor liefert und eine Strategie entwickelt werden, um das Problem der kegelförmigen Abtastung des Sensors zu lösen. Die Idee ist hierbei, über ein Zeitintervall hinweg die Wahrscheinlichkeiten für die Belegungen (Occupation) der Zellen zu ermitteln. Die Erfassungseigenschaften sollen in einem mathematischen Modell beschrieben und ein Algortithmus daraus abgeleitet werden. (Milestone 2) Die erfassten Wahrscheinlichkeitsdaten sollen in einer Gridmap persistiert werden, die als Grundlage der grafischen Ausgabe dient (siehe Milestone 3). Dieses Ultraschall-Modell soll innerhalb des RoboView-Projektes implementiert werden (siehe Milestone 4). Die Karten muss in OpenGL aufgebaut und mit den Sensordaten befüllt werden (siehe Milestone 5). Das gesamte Projekt wird zunächst auf Basis der zur Verfügung gestellten Software-Emulation entworfen und ausgeführt. Eine mögliche spätere Hardware-Emulation ist möglich aber nicht nötig.</p> <h3 id="relevante-komponenten-des-roboview-frameworks"><a name="Relevante_Komponenten_des_RoboView_45Frameworks"></a>Relevante Komponenten des RoboView-Frameworks</h3> <table border="1"> <tbody> <tr> <th colspan="2">Paket de.hska.lat.perception.observation</th> </tr> <tr> <td>DistanceObservation.java</td> <td>In dieser Klasse liegt die gesamte Logik der Implementierung. Die Methode distanceChanged() ​stellt den Event-Handler dar. Immer wenn der Sensor neue Daten liefert, wird diese Methode aufgerufen und die Logik ausgeführt.</td> </tr> <tr> <td>GridMap.java und GridMapHashTableImpl.java</td> <td>Die erste Klasse stellt das Interface, die zweite Klasse die Implementierung für die GridMap-Datenstruktur dar. (siehe unten)</td> </tr> <tr> <td>Cell.java</td> <td>Objekte dieser Klasse repräsentieren einzelne Einträge in der GridMap.</td> </tr> <tr> <th colspan="2">Paket de.hska.lat.robot.component.distanceSensor</th> </tr> <tr> <td>DistanceSensor.java</td> <td>Diese Klasse kapselt einen Sensor mit zugehörigen Informationen über die Position und Orientierung im Raum. Außerdem gibt der Sensor die Distanz zum gefundenen Objekt zurück.</td> </tr> </tbody> </table> <h3 id="mathematisches-modell-fur-die-erfassungseigenschaften-des-ultraschall-sensors"><a name="Mathematisches_Modell_f_252r_die_Erfassungseigenschaften_des_Ultraschall_45Sensors"></a>Mathematisches Modell für die Erfassungseigenschaften des Ultraschall-Sensors</h3> <p>Um die kegelförmigen Erfassungseigenschaften des Ultraschall-Sensors korrekt abzubilden, ist ein mathematisches Modell nötig. Dadurch wird garantiert, dass der Algorithmus zur Erfassung von Objekten im Raum, funktioniert. Im Folgenden sollen die Überlegungen zum Modell, die korrekte mathematische Formulierung und eine Skizze zum entworfenen Algorithmus widergegeben werden.</p> <h4 id="idee"><a name="Idee"></a>Idee</h4> <p>Eine Drohne fliegt mit einer definierten Höhe über dem Boden. Der Ultraschall-Sensor sendet sein Signal in eine bestimmte Richtung, üblicherweise nach unten. Durch die vom Sensor zurück gegebene Distanz ist die Höhe des aktuell zu analysierenden Sensorkegels bekannt. Jeder Ultraschall-Sensor besitzt außerdem eine so genannte Beam-Width, die den Winkel zwischen der Kegel-Halbierenden und dem äußeren Rand (dem Mantel) des Kegels, beschreibt. Die Idee um herauszufinden, wo innerhalb des Kegels ein Objekt mit hoher Wahrscheinlichkeit zu finden ist, wird der gesamte Kegel stufenweise von der Spitze bis zur Bodenfläche abgetastet. Alle Vektoren die nicht in einer bestimmten Region nah der Grundfläche oder genau darauf liegen, korrespondieren mit Zellen die definitiv leer sind, in denen also keine Objekt gefunden werden können. Das liegt daran, dass die Distanz zum gefundenen Objekt länger ist, als er ausgesendete Vektor. Das ermöglicht es nicht nur besetzte Zellen in eine Datenstruktur einzutragen, sondern auch solche die definitiv unbesetzt sind. Solche Vektoren, die genau in der Region um die Grundfläche oder darauf liegen, liegen in einem Bereich der potentiell von einem Objekt besetzt wird. Um festzustellen, ob tatsächlich ein Objekt in einer Region liegt, müssen viele Messungen des Sensors ausgewertet werden und für alle Messungen eine Wahrscheinlichkeit berechnet werden, ob eine Region von einem Objekt besetzt ist. Diese Messungen werden in einer GridMap gespeichert (siehe nächster Abschnitt).</p> <h4 id="modell"><a name="Modell"></a>Modell</h4> <p><a href="/images/2013/03/skizze_kl.png"><img src="/images/2013/03/skizze_kl.png" alt="" /></a> Grafik 0</p> <h5 id="bezeichnungen"><a name="Bezeichnungen"></a>Bezeichnungen</h5> <table> <tbody> <tr> <td>β</td> <td>Beamwinkel, β > 0</td> </tr> <tr> <td>α</td> <td>Orientierung des Sensors</td> </tr> <tr> <td>U</td> <td>Position des Sensors im Raum</td> </tr> <tr> <td>y</td> <td>Abstand des Sensors vom Boden</td> </tr> <tr> <td>y<sub>t</sub></td> <td>Distanz von Sensor bis letzte Zellebene</td> </tr> <tr> <td>d</td> <td>Gemessene Distanz</td> </tr> <tr> <td>r</td> <td>Zellbreite, r > 0</td> </tr> <tr> <td>φ</td> <td>Teilt Beamwinkel in gleiche Teile</td> </tr> <tr> <td>V<sub>R</sub></td> <td>(0, -1, 0)<sup>T</sup> Richtungsvektor von Sensor nach unten</td> </tr> <tr> <td>V<sub>RRot</sub></td> <td>Richtungsvektor V<sub>R</sub> um Orientierung des Sensors gedreht. Also V<sub>RRot</sub>= R * V<sub>R</sub></td> </tr> <tr> <td>R</td> <td>Rotationsmatrix für Rotation um Orientierung des Sensors</td> </tr> <tr> <td>P[]</td> <td>Menge aller Vektoren, die zur Berechnung der Zellen benutzt werden. P[] = U + λ * R<sub>φ</sub> * V<sub>RRot</sub>, λ ∈ [0,d]</td> </tr> <tr> <td>R<sub>φ</sub></td> <td>Rotationsmatrix für schrittweise Rotation um die Abtastrate</td> </tr> </tbody> </table> <h4 id="ablauf"><a name="Ablauf"></a>Ablauf</h4> <p>Um alle Zellen die in dem Kegel liegen, welcher von dem Sensor erfasst wird, zu bestimmen, wird zuersteinmal bestimmt welche Zellreihen überhaupt in dem Kegel liegen. Dazu wird zuerst die erste Zellreihe unterhalb des Sensors bestimmt, welche sich durch y-(y%r) errechnet. Dies erklärt sich dadurch, dass der Sensor ja theorethisch zwischen zwei Zellreihen liegen kann. Durch die Subtraktion von y%r wird also der Rest, welcher über der ersten Zellreihe unterhalb des Sensor steht, entfernt. Alle nachfolgenden Zellreihen sind nun immer ein vielfaches von r von der ersten Zellreihe entfernt, also y-(y%r)-r für die zweite Zellreihe unterhalb des Sensors, y-(y%r)-2r für die dritte Zellreihe unterhalb des Sensors, usw. Die letzte Zellreihe errechnet sich durch (y-y<sub>t</sub>)-((y-y<sub>t</sub>)%r). Dies erklärt sich dadurch, dass die letzte Zellreihe sich unterhalb oder auf der höhe befindet, welche mit d und y<sub>t</sub> ein rechtwinkliges Dreieck bildet. y<sub>t</sub> ist hierbei das Teilstück von y (siehe Grafik 1). Da nun alle Zellreihen bekannt sind kann dazu übergegangen werden die Zellen zu berechnen. Zellen können anhand von Punkten, welche in den Zellen liegen, leicht bestimmt werden (siehe Mapping von gemessenen Punkt-Daten auf Zellen in der GridMap). Wie an Grafik 1 zu sehen ist, werden vom Uhrsprungspunkt, also der Punkt im Raum an dem sich die Drohne befindet, Vektoren in Richtung der bekannten Zellreihen berechnet. Diese Vektoren bestimmen nun alle Punkte, die auf der jeweiligen Zellreihe und im Kegel liegen. Die einzelnen Vektoren werden wie folgt berechnet: Da V<sub>RRot</sub> bekannt ist und alle Vektoren die innerhalb des Kegels liegen zu V<sub>RRot</sub> den maximalen Winkel β haben (wäre der Winkel größer würde sich ja der Vektor ausserhalb des Beam-Winkelbereichs befinden), müssen logischerweise alle Vektoren die sich im Kegel befinden einen Winkel größer 0 und &lt;= β zu V<sub>RRot</sub> haben. Dieser Winkel wird als vielfaches von φ bezeichnet. Es wird nun schrittweise der Winkel der einzelnen Vektoren mit folgender Formel berechnet: P[] = U + λ * R<sub>φ</sub> * V<sub>RRot</sub>. Hierbei ist R<sub>φ</sub> die Matrix mit der V<sub>RRot</sub> rotiert wird, so dass der neue Vektor den entsprechenden Winkel zu V<sub>RRot</sub> hat. λ ist die länge des Vektors, welche sich leicht errechnen lässt, da ja die Zellreihe und somit auch die Höhe bekannt ist.<a href="/images/2013/03/skizze_vektoren_kl.png"><img src="/images/2013/03/skizze_vektoren_kl.png" alt="skizze_vektoren_kl.png" /></a> Grafik 1</p> <p>Da der Winkel im dreidimensionalen Raum errechnet werden muss, tritt noch ein weiteres Problem auf, welches sich aber leicht beheben lässt. Grafik 2 zeigt einen Schnitt des Kegels. Bei der Berechnung des Winkels wird die Rotation um die x- und z-Achse durchlaufen. Hierbei kann es passieren, dass Rotationen entstehen wodurch der resultierende Vektor nicht mehr im Kegel liegen würde. Durch eine einfache Kreisberechnung kann bestimmt werden ob der entstehende Vektor im Kegel liegen würde. Der Radius des Kreises ist hierbei der Beam Winkel β und die x- und z-Rotationen erstrecken sich von -β bis +β, da von der Achse des Kegels aus in alle Richtungen rotiert werden muss. Durch die allgemeine Formel x² + y² = r² kann bestimmt werden ob ein Punkt mit Koordinaten x und y im Kreis liegt, wobei r der Radius des Kreises ist. die x- bzw. y-Koordinaten sind in diesem Fall die Winkel der Rotationen um die x- bzw. z-Achse. Der Radius ist gleich dem Beam Winkel β. Ein Vektor liegt also im Kegel wenn gilt: (x-Roatation)² + (z-Roatation)² &lt;= β². Ohne diese Berechnung würde durch die Vektoren kein Kegel sondern eine Pyramide beschrieben werden.</p> <p><a href="/images/2013/03/circle.png"><img src="/images/2013/03/circle.png" alt="circle.png" title="circle.png" /></a>Grafik 2</p> <p>Schlussendlich kann es noch passieren, dass die berechneten Vektoren über die Grenzen des Kegels hinaus "schießen" (siehe Grafik 3). Dies stellt jedoch keine weiteren Probleme dar, da ja bekannt ist, dass die Länge eines jeden Vektors nicht länger als d sein darf, da der Abstand vom Sensor zum Boden des Kegels immer gleich ist. Sollte also bei der berechnung eines Vektors die länge des Vektors länger sein als d, so wird die länge des Vektors einfach auf d gesetzt. Dadurch dass nun bekannt ist, dass der der Vektor übers die Grenzen des Kegels hinaus "schießt" und seine länge nun auf d begrenzt wurde, ist auch der Punkt in einer Zelle, in der sich möglicherweisse ein Objekt befindet. Hierdurch wurde nun bereits die Frage geklärt, wie man die Zellen bestimmt in denen sich möglicherweisse ein Objekt befinden könnte.<a href="/images/2013/03/skizze_vektoren2_kl.png"><img src="/images/2013/03/skizze_vektoren2_kl.png" alt="skizze_vektoren2_kl.png" /></a>Grafik 3</p> <h4 id="algorithmus-in-pseudocode"><a name="Algorithmus_in_Pseudocode"></a>Algorithmus in Pseudocode</h4> <p><a href="/images/2013/03/pseudocode.png"><img src="/images/2013/03/pseudocode.png" alt="" /></a></p> <h3 id="modellierung-der-datenstruktur-gridmap"><a name="Modellierung_der_Datenstruktur_45_GridMap"></a>Modellierung der Datenstruktur - GridMap</h3> <h4 id="idee-1"><a name="Idee_AN1"></a>Idee</h4> <p>Eine GridMap ist eine Datenstruktur, die den dreidimensionalen Raum in einzelne Würfel unterteilt, die alle die Kantenlänge <strong>r</strong> besitzen. Neben einer x-, y- und z-Koordinate wird in jeder Zelle ein Wahrscheinlichkeitswert abgelegt, der darüber bestimmt ob ein Objekt oder auch nur ein Teil davon aus dem 3D-Raum innerhalb eines Würfels liegt. Die Würfel werden im folgenden als Zellen bezeichnet. Wenn der Ultraschallsensor ein Objekt lokalisiert hat, wird die korrespondierende Zelle aus der Gridmap ausgewählt und der Wahrscheinlichkeitswert dieser Zelle aktualisiert.</p> <h4 id="interface"><a name="Interface"></a>Interface</h4> <table> <tbody> <tr> <td>setCellProbabilityByPoint(float x, float y, float z, boolean cellOccupied);</td> <td>Ändert den Wahrscheinlichkeitswert einer Zellen zu einem gegebenen Punkt.Wenn cellOccupied = false, ist die Zelle wahrscheinlich nicht mit einem Objekt belegt. Für cellOccupied = true dagegen sehr wahrscheinlich.</td> </tr> <tr> <td>public int[] getCellCoordByPoint(float x, float y, float z);</td> <td>Ermittelt die Koordinaten einer Zelle zu einem gegebenen Punkt.</td> </tr> <tr> <td>public float getCellProbability(int x, int y, int z);</td> <td>Ermittelt die Wahrscheinlichkeit einer Zelle zu einem gegebenen Punkt.</td> </tr> <tr> <td>public LinkedList <cell>getAllCells();</cell></td> <td>Gibt alle bisher in irgendeiner Art beeinflussten Zellen in einer Liste zurück.</td> </tr> <tr> <td>public int[] getMaxBounds();</td> <td>Gibt die maximale Ausbreitung der GridMap zurück.</td> </tr> <tr> <td>public int[] getMinBounds();</td> <td>Gibt die minimale Ausbreitung der GridMap zurück.</td> </tr> <tr> <td>public float getCellSize();</td> <td>Gibt die Breite einer Zelle zurück.</td> </tr> <tr> <td>public void clear();</td> <td>Setzt die GridMap auf Initial-Wert zurück. Jede Zelle hat die gleiche Initial-Wahrscheinlichkeit.</td> </tr> </tbody> </table> <h3 id="implementierung-der-gridmap"><a name="Implementierung_der_GridMap"></a>Implementierung der GridMap</h3> <p>Die Implementierung der GridMap speichert die Zellgröße, die Anzahl der Zellen, sowie einen Initial-Wert für die Wahrscheinlichkeit jeder Zelle. Die Daten selbst werden in einer Hashmap&lt;int[], Float&gt; abgelegt. Das Integer-Array ist dreidimensional und repräsentiert die drei Koordinaten x, y und z der jeweiligen Zelle. Zu jedem Koordinaten-Tripel wird der Wahrscheinlichkeitswert als Float gespeichert. Wird die GridMap anfangs initialisiert, muss eine Zellgröße, die Initial-Wahrscheinlichkeit und eine Zellanzahl übergeben werden. Aus letzterem Wert wird die Größe der HashMap bestimmt.</p> <h4 id="hashmap"><a name="HashMap"></a>HashMap</h4> <p>Die der GridMap zurgunde liegende Datenstruktur ist eine HashMap. Diese wurde gezielt ausgewählt, da sie einen Zugriff von O(1) garantiert. Wenn die HashMap bei der Befüllungen einen Schwellwert überschreitet, wird sie durch die Laufzeitumgebung vergrößert und alles Hashes neu berechnet. Das erleichtert die Reorganisation erheblich. Zu Beginn der Implementierung war vorgesehen, die GridMap auf Basis einen dreidimensionalen Arrays zu erstellen. Bei Überläufen, insbesondere in den negativen Zahlenbereich, wären komplizierte Reorganisationen dieses Arrays zu tätigen, was durch die HashMap vom System selbst übernommen wird.</p> <h4 id="hashing-verfahren"><a name="Hashing_45Verfahren"></a>Hashing-Verfahren</h4> <p>Um einen Wert in der GridMap abzulegen, wird der Hash-Wert über die (x,y,z)-Koordinaten der Zelle gebildet. Da Java die <em>hashcode()</em>-Methode für float-Arrays nicht selbstständig überschrieben hat, wählten wir die statische <em>hashcode(float[])</em>-Methode aus der Klasse <em>Arrays</em>.</p> <h4 id="mapping-von-gemessenen-punkt-daten-auf-zellen-in-der-gridmap"><a name="Mapping_von_gemessenen_Punkt_45Daten_auf_Zellen_in_der_GridMap"></a>Mapping von gemessenen Punkt-Daten auf Zellen in der GridMap</h4> <p>Beim berechnen der Vektoren in dem Kegel des Sensors entstehen Punkte auf den Zellreihen. Diese Punkte liegen jeweils in genau einer Zelle. Im folgenden wird beschrieben wie zu einem Punkt im Raum die entsprechende Zelle errechnet wird. Die erste Zelle (also Zelle (0,0,0)) beginnt im Uhrsprung und erstreckt sich um die Zelllänge nach x, y und z. Alle weiteren Zellen bauen sich um die erste Zelle herrum auf. So beginnt die nächste Zelle in x-Richtung (also nach rechts) nach der ersten Zelle bei (r,0,0) (wobei r die Zelllänge ist), was bedeutet dass diese Zelle Zelle (1,0,0) ist. betrachtet man die Zelle in negativer x-Richtung von der ersten Zelle (also nach links) so beginnt diese bei (-r,0,0) und ist somit die Zelle (-1,0,0). Die Zelle links von Zelle (-1,0,0) beginnt bei (-2r,0,0) und ist somit die Zelle (-2,0,0). Das selbe Prinzip gilt auch für die y- und z-Achse. Die Zelle über der ersten Zelle beginnt bei (0,r,0) und ist somit Zelle (0,1,0). Die Zelle, welche räumlich vor der ersten Zelle liegt beginnt bei (0,0,r) und ist somit Zelle (0,0,1). Grafik 4 zeigt einen Teil einer GridMap und veranschaulicht das Prinzip.<a href="/images/2013/03/grid.png"><img src="/images/2013/03/grid.png" alt="grid.png" title="grid.png" /></a>Grafik 4 Die Berechnung einer Zelle in Abhängigkeit von einem Gegebenen Punkt ist für positive x-, y- oder z-Werte nicht sehr kompliziert. Man berechnet hierfür erst einmal den Teil welcher "übersteht" und zieht diesen dann von den x-, y- und z-Werten des Punktes ab und teilt dann durch die Zelllänge, also: Seien x,y,z die Koordinaten des Punktes, welche alle &gt;= 0 sind, r die Zelllänge und x<sub>z</sub>, y<sub>z</sub> und z<sub>z</sub> die Koordinaten der Zelle, dann gilt:</p> <p>x<sub>z</sub> = (x-(x%r))/r</p> <p>y<sub>z</sub> = (y-(y%r))/r</p> <p>z<sub>z</sub> = (z-(z%r))/r</p> <p>Bei Punkten mit negativen x-, y- oder z-Werten funktioniert dieses Verfahren jedoch leider nicht. Angenommen man hätte eine Zelllänge von r = 10 und einen Punkt (-3,2,-1), so würde man die Zelle (-1,0,-1) erwarten. Das Ergebniss ist jedoch die Zelle (0,0,0). Das liegt daran, dass man bei negativen Werten "abrunden" und nicht "aufrunden" muss. Der Punkt (-3,2,-1) müsste also auf (-10,0,-10) fallen und somit die Zelle (-1,0,-1) ergeben. Für negative Werte eines Punktes gilt also folgendes: Seien x,y,z die Koordiaten des Punktes, welche alle &lt; 0 sind, r die Zelllänge und x<sub>z</sub>, y<sub>z</sub> und z<sub>z</sub> die Koordinaten der Zelle, dann gilt:</p> <p>x<sub>z</sub> = (x-(r+(x%r)))/r , falls x%r &lt; 0</p> <p>x<sub>z</sub> = x/r , falls x%r = 0</p> <p>y<sub>z</sub> = (y-(r+(y%r)))/r , falls y%r &lt; 0</p> <p>y<sub>z</sub> = y/r , falls y%r = 0</p> <p>z<sub>z</sub> = (z-(r+(z%r)))/r , falls z%r &lt; 0</p> <p>z<sub>z</sub> = z/r , falls z%r = 0</p> <h4 id="wahrscheinlichkeitswert-fur-eine-zelle-setzen"><a name="Wahrscheinlichkeitswert_f_252r_eine_Zelle_setzen"></a>Wahrscheinlichkeitswert für eine Zelle setzen</h4> <p>Um die Wahrscheinlichkeit einer Zelle zu setzen, muss zuerst die Zelle, die mit einem Punkt korrespondiert, mit dem obigen Verfahren bestimmt werden. Für diese Zelle wird die alte Wahrscheinlichkeit festgehalten. Wurde die Zelle bisher noch nicht tangiert, ist die A-Priori-Wahrscheinlichkeit gesetzt. In unserer Implementierung liegt diese bei 0.5. Mit der bool'schen Variable cellOccupied wird der Methode mitgeteilt, ob die betrachtete Zelle potentiell besetzt (true) oder unbesetzt (false) ist. Für den ersteren Fall wird die neue temporäre Wahrscheinlichkeit newProb für den aktuellen Zeitschritt berechnet aus (1.0 + oldProb) / 2. Wenn die Zelle potentiell unbesetzt ist, wird die alte Wahrscheinlichkeit durch 2 geteilt und newProb zugewiesen ((0.0 + oldProb)/2). Da die Formel, die die gesamte Wahrscheinlichkeit für eine Zelle bestimmt (siehe nächster Abschnitt) aus Brüchen besteht und in diesen durch Null geteilt werden könnte, wird für den Fall, dass die neue temporäre Wahrscheinlichkeit newProb Null wird, diese auf 0.001 gesetzt. Nun kann die im folgenden Abschnitt beschriebene Formel zur Berechnung der gesamten Wahrscheinlichkeit einer Zelle angewandt werden.</p> <p><strong>Neue Wahrscheinlichkeit = 1/(1+((1-newProb)/newProb) * (initProbability/(1-initProbability))*((1-oldProb)/oldProb)))</strong></p> <p>Für viele Messungen, konvergiert diese Formel gegen 1, falls die Zelle mit einem Objekt besetzt ist und gegeben 0, falls sie unbesetzt ist. Es gibt alternative Formeln, die aber den Nachteil haben, dass die Wahrscheinlichkeit gegen einen Wert zwischen 0 und 1 konvergiert und man sich geeignete Schwellwerte überlegen muss, um zu bestimmen, ob eine Zelle besetzt oder unbesetzt ist.</p> <h4 id="ausdehnung-der-gridmap"><a name="Ausdehnung_der_GridMap"></a>Ausdehnung der GridMap</h4> <p>Um die GridMap später zeichnen zu können, müssen die Dimensionen bekannt sein. Der GridMap liegt eine HashMap zu Grunde, die im Prinzip deutlich größer sein kann, als die belegten Werte. Beim Zeichnen will man aber nur den Bereich, der auch belegt ist, zeichnen. Für die Ermittlung des belegten Bereiches wurden die Methoden getMaxBounds() und getMinBounds() implementiert. Intern werden triviale Maximum- und Minimum-Suchen eingesetzt um die höchsten und niedrigsten x-, y- und z-Werte zu finden.</p> <h4 id="gridmap-leeren"><a name="GridMap_leeren"></a>GridMap leeren</h4> <p>Für den Fall, dass eine GridMap komplett geleert werden soll, wurde die clear()-Methode implementiert. Die alte HashMap wird hierbei einfach durch eine neue Instanz ersetzt.</p> <h3 id="ausblick"><a name="Ausblick"></a>Ausblick</h3> <p>Durch diese Arbeit ist das mathematische Modell, sowie eine Implementierung des Modells gegeben. Folgende Arbeiten können an verschiedenen Punkten anknüpfen. Diese sollen nun erörtert werden.</p> <h4 id="abtastrate"><a name="Abtastrate"></a>Abtastrate</h4> <p>Beim Abtasten der Kreisfläche des Kegels wird der doppelte Beam-Winkel in 1°-Schritten durchlaufen. Dadurch wird ein Quadrat mit Seitenlänge 2 * Beam-Winkel beschrieben. Mit der Abfrage der Kreisbedingung werden nur diejenigen Winkel-Konfigurationen beachtet, die sich tatsächlich in der Kreisfläche befinden. Bei dieser Vorgehensweise, werden die gleichen Zellen mehrmals von unterschiedlichen Punkten berührt und es muss festgehalten werden, welche Zellen schon betrachtet worden sind, damit nicht mehrmals die Wahrscheinlichkeit einer Zelle verändert wird. Hier könnte man sich eine dynamische Abtastrate für den Winkel Phi überlegen, der in jeder Zellebene die Kreisfläche durchläuft und dabei alle Kästchen genau einmal trifft. Hierfür wäre ein analytisches Verfahren notwendig. Da die Berechnung der Abtastung auf schnellen Rechnern abläuft, funktioniert die jetzige Implementierung ohne Probleme. Sollte es durch andere Konfigurationen Schwierigkeiten mit der Performanz geben, kann auch über eine stochastische Lösung der Abtastung nachgedacht werden. Die Idee wäre hierbei randomisiert Punkte innerhalb der Kreisfläche zu bestimmen. Durch die Statistik und die ständige Wiederholung des Verfahrens, würden alle Zellen im Schnitt abgedeckt sein und es wären weniger Berechnungen notwendig.</p> <h4 id="grafische-implementierung"><a name="Grafische_Implementierung"></a>Grafische Implementierung</h4> <p>Da durch die vorliegende Implementierung eine Datenstruktur (GridMap) vorliegt, die die jeweiligen Wahrscheinlichkeitswerte für Objekte innerhalb der Zellen enthält, kann sie ohne größeren Aufwand durch Grafikbibliotheken, wie OpenGL, gezeichnet werden. Dadurch erhält man die Raumtopologie als Reliefdarstellung.</p> <h4 id="coverage-maps"><a name="Coverage_Maps"></a>Coverage Maps</h4> <p>In der vorliegenden Implementierung werden die Wahrscheinlichkeiten einer Belegung einer Zelle die Werte für 0 für nicht belegt, 0.5 für nicht beeinflusst und 1 für belegt annehmen. Damit kann eine Zelle komplett gemalt werden, sobald der Wert 1 darin enthalten ist. Diese Maps werden Occupancy Maps genannt und bilde eine binäre Struktur. Neben den Occupancy Maps gibt es aber auch solche Strukturen, die Teilbelegungen durch Objekte mit beachten. Wenn ein Teil eines Objektes eine Zelle nur zu 20% belegt, kann das in einer Struktur gespeichert werden, die sich Coverage Map nennt. Dadurch wird die Granularität der Reliefdarstellung erhöht und die Raumtopologie genauer beschrieben.</p> <h3 id="referenzen"><a name="Referenzen"></a>Referenzen</h3> <p>C. Stachniss: <em>Robotic Mapping and Exploration</em>, Springer-Verlag Berlin Heidelberg, 2009 Adam Milstein, University of Waterloo, Canada: <em>Occupancy Grid Maps for Localization and Mapping</em> (<a rel="external" href="http://cdn.intechopen.com/pdfs/5368/InTech-Occupancy_grid_maps_for_localization_and_mapping.pdf">http://cdn.intechopen.com/pdfs/5368/InTech-Occupancy_grid_maps_for_localization_and_mapping.pdf</a>)</p> <p>C. Stachniss: Universität Freiburg, <em>Mapping and Exploration with Mobile Robots using Coverage Maps</em>: (<a rel="external" href="http://www.informatik.uni-freiburg.de/~stachnis/pdf/stachniss03iros.pdf">http://www.informatik.uni-freiburg.de/~stachnis/pdf/stachniss03iros.pdf</a>)</p> <h3 id="ressourcen"><a name="Ressourcen"></a>Ressourcen</h3> <p>RoboView-Framework</p> Empire State Building in X3D Sun, 18 Nov 2012 00:00:00 +0000 Unknown https://schempp.dev/blog/empire-state-bulding-x3d/ https://schempp.dev/blog/empire-state-bulding-x3d/ <p>Im Rahmen meines Computergrafik Labors musste ich mit meinem Kommilitonen ein 3D-Modell des Empire State Buildings modellieren. Das ganze war ein enormer Aufwand und ich möchte euch mein Modell nicht vorenthalten.</p> <p><a href="/data/empirebuilding.x3d" title="empirebuilding.x3d">X3D-Datei</a>.</p> <p>Leider kann ich die Texturen nicht zur Verfügung stellen, da diese einem Copyright unterliegen.Ihr könnt euch die unteren beiden Ebenen aber selbst zusammen basteln.</p> <p>Die unterste soll New York darstellen, die große Ebene darüber soll transparentes Wasser darstellen (der Effekt ist: New York steht unter Wasser und das Empire State Building ragt daraus empor). Wenn ihr eine Wasser Textur und eine "New York"-Textur findet könnt ihr das ganze so nachbauen.</p> Facebook-Chat verschlüsseln (Miranda IM und OTR) Sat, 28 Apr 2012 00:00:00 +0000 Unknown https://schempp.dev/blog/facebook-chat-verschlusseln-miranda-im-und-otr/ https://schempp.dev/blog/facebook-chat-verschlusseln-miranda-im-und-otr/ <p>Dieses Tutorial beschreibt, wie man mit Miranda IM und OTR (Off the Record) seinen Facebook-Chat verschlüsselt und sich dabei von dem Facebook-Chat im Browser unabhängig macht.</p> <p><strong>Was ist Miranda IM?</strong></p> <p>Zitat Wikipedia:</p> <blockquote> <p><strong>Miranda IM</strong> (meist nur „Miranda“) ist ein <a rel="external" title="Freie Software" href="http://de.wikipedia.org/wiki/Freie_Software">freier</a><a rel="external" title="Multi-Protokoll-Client" href="http://de.wikipedia.org/wiki/Multi-Protokoll-Client"> Multi-Protokoll-Client</a> für <a rel="external" title="Microsoft Windows" href="http://de.wikipedia.org/wiki/Microsoft_Windows">Windows</a>.</p> </blockquote> <p>Ein Multi-Protokoll-Client ist eine Software, die es ermöglicht, mehrere Chat-Protokolle mit einem Programm zu benutzen (z.B. ICQ und Facebook).</p> <p><strong>Warum das ganze?</strong></p> <p>Weil Facebook sämtlichen Chatverlauf mitlesen kann. Der Hauptgrund für mich war aber, dass ich eigentlich Facebook nur noch als Chat-Plattform verwenden wollte, weil mir Facebook selbst zu viel Zeit gestohlen hat.</p> <p><strong>Miranda einrichten</strong></p> <p><strong>Schritt 1: Miranda installieren</strong></p> <p>Zuerst muss Miranda heruntergeladen und installiert werden. Die jeweils aktuelle Version gibt es hier: <a rel="external" title="http://www.miranda-im.org/download/" href="http://www.miranda-im.org/download/">http://www.miranda-im.org/download/</a></p> <p>Nachdem ihr die .exe-Datei heruntergeladen und ausgeführt habt, klickt einfach immer auf "next &gt;". Lasst bei "Installation Mode" die Auswahl auf "Normal Install (recommendet)".</p> <p>Sobald ihr dieses Fenster...</p> <p><a href="/images/2012/04/miranda_1.png"><img src="/images/2012/04/miranda_1.png" alt="" title="Miranda 1" /></a></p> <p>... vor euch habt, merkt euch den Pfad in dem Miranda installiert wird (in diesem Fall ist das "E:\Program Files (x86)\Miranda IM"). Der Pfad wird später benötigt um Plugins zu installieren.</p> <p>Klickt nun auf "Next &gt;" bis Miranda installiert wurde. Sollte Miranda nun starten, beendet es wieder (Rechtsklick auf das Miranda-Symbol in der Taskleiste =&gt; Exit).</p> <p><strong>Schritt 2: Facebook Plugin installieren</strong></p> <p>Nun da Miranda installiert ist, muss noch das Plugin heruntergeladen werden.</p> <p>Für 32-Bit Systeme (Für ältere Computer, Windows XP z.B.) gibt es das hier: <a rel="external" title="http://addons.miranda-im.org/details.php?action=viewfile&id=4406" href="http://addons.miranda-im.org/details.php?action=viewfile&amp;id=4406">http://addons.miranda-im.org/details.php?action=viewfile&amp;id=4406</a></p> <p>Für 64-Bit Systeme (Für Computer ab c.a. 2002, also Windows 7) gibt es das hier: <a rel="external" title="http://addons.miranda-im.org/details.php?action=viewfile&id=4407" href="http://addons.miranda-im.org/details.php?action=viewfile&amp;id=4407">http://addons.miranda-im.org/details.php?action=viewfile&amp;id=4407</a></p> <p>Ladet die Datei herunter und entpackt die Ordner in den Pfad in dem Miranda installiert wurde (siehe Schritt 1).</p> <p><strong>Schritt 3: Off the Record installieren</strong></p> <p>Nun kommt der eigentlich wichtigste Teil. Wir installieren das Plugin, das es uns ermöglicht sämtlich Nachrichten zu verschlüsseln.</p> <p>OTR gibt es hier: <a rel="external" title="http://addons.miranda-im.org/details.php?action=viewfile&id=2644" href="http://addons.miranda-im.org/details.php?action=viewfile&amp;id=2644">http://addons.miranda-im.org/details.php?action=viewfile&amp;id=2644</a></p> <p>Ladet die Datei herunter und entpackt sie in das euer Verzeichnis\Plugins. In meinem Fall wäre das "E:\Program Files (x86)\Miranda IM\Plugins".</p> <p><strong>Schritt 4: Miranda starten und Facebook einrichten</strong></p> <p>Nun müssen wir nur noch unsere Daten von unserem Facebook Account in Miranda eintragen.</p> <p>Miranda Starten =&gt; Auf das Miranda Symbol oben links klicken =&gt; Accounts auswählen =&gt; auf das grüne Plus klicken =&gt; Kontoname eingeben (z.b. "Facebook") =&gt;  Als Protokoll-Typ "JABBER" auswählen.</p> <p><a href="/images/2012/04/miranda_2.png"><img src="/images/2012/04/miranda_2.png" alt="" title="Miranda 2" /></a></p> <p>Dann den eben erstellten Account auswählen und als Typ "Facebook Chat" auswählen, Benutzer und Passwort eintragen.</p> <p><a href="/images/2012/04/miranda_3.png"><img src="/images/2012/04/miranda_3.png" alt="" title="Miranda 3" /></a></p> <p>Der Benutzter ist der Nutzername in Facebook (siehe Bild)</p> <p><a href="/images/2012/04/miranda_4.png"><img src="/images/2012/04/miranda_4.png" alt="" title="Miranda 5" /></a></p> <p>Nach einem Klick auf "Ok" sollte in Miranda unten rechts nun der Facebook Account (Das Lämpchen) angezeigt werden (siehe Bild).</p> <p><a href="/images/2012/04/miranda_5.png"><img src="/images/2012/04/miranda_5.png" alt="" title="Miranda 6" /></a></p> <p>Wenn ihr euren Nutzernamen gerade erst angelegt habt, kann es sein dass ein Fehler auftritt. Sollte dies der Fall sein: einfach später nochmal versuchen.</p> <p><strong>Schritt 5: OTR benutzen</strong></p> <p>Wollt ihr nun OTR benutzen, braucht die Person mit der ihr schreibt ebenfalls OTR. Sobald ihr eine Konversation mit der anderen Person beginnt, wird die Verbindung verschlüsselt, was sich darin äussert, dass das Schloss (siehe Bild)</p> <p><a href="/images/2012/04/miranda_6.png"><img src="/images/2012/04/miranda_6.png" alt="" title="Miranda 7" /></a></p> <p>nicht mehr das Rote durchgestrichene Schildchen hat.</p> <p>Sollte ein Popup Fenster auftauchen dann bestätigt es mit "Yes".</p> <p>Zu Anfang kann es vorkommen, dass OTR nicht richtig funktioniert. Sollte dies der Fall sein, Miranda beenden und neu starten. Eventuell auch den Computer neu starten.</p> NextGEN Gallery: Thumbnails manuell erstellen Wed, 22 Feb 2012 00:00:00 +0000 Unknown https://schempp.dev/blog/nextgen-gallery-thumbnails-manuell-erstellen/ https://schempp.dev/blog/nextgen-gallery-thumbnails-manuell-erstellen/ <p>Bei Nutzung der NextGEN Gallery kann es vorkommen, dass manche oder gar alle Thumbnails nicht erstellt werden. Das folgende Tutorial erläutert wie dieser unangenehme Fehler (<a href="/images/2012/02/pic9.png" title="/images/2012/02/pic9.png">Bild</a>) umgangen werden kann.</p> <p>Benötigte Software: Extreme Thumbnail Generator (<a rel="external" title="http://www.exisoftware.com/thumbnail_generator/" href="http://www.exisoftware.com/thumbnail_generator/">download</a>)</p> <p>Schritt 1: Als erstes müssen die Bilder ganz normal auf den Server hochgeladen werden. Dann wird im Browser mit dem Pfad der Bilder eine neue Gallerie erstellt.</p> <p><a href="/images/2012/02/pic8.png"><img src="/images/2012/02/pic8-300x164.png" alt="" title="pic8" /></a></p> <p>Schritt 2:</p> <p>Nun werden, unglücklicherweise, mehrer Fehler auftreten.</p> <p><a href="/images/2012/02/pic9.png"><img src="/images/2012/02/pic9-300x161.png" alt="" title="pic9" /></a></p> <p>Das bedeutet, dass keine Thumbnails erstellt wurden. Deswegen werden wir das nun selbst übernehmen.</p> <p>Hier kommt der Extreme Thumbnail Generator ins Spiel.</p> <p><a href="/images/2012/02/pic1.png"><img src="/images/2012/02/pic1-300x288.png" alt="" title="pic1" /></a></p> <p>Einfach alle Bilder per drag &amp; drop in das Fenster ziehen, dannach auf "Next" klicken.</p> <p>Auf der nächsten Seite am besten den Desktop als Zielpfad auswählen und auf "Next" klicken</p> <p><a href="/images/2012/02/pic2.png"><img src="/images/2012/02/pic2-300x287.png" alt="" title="pic2" /></a></p> <p>auf der nächsten Seite werden die größe der Thumbs und andere Optionen eingestellt</p> <p><a href="/images/2012/02/pic3.png"><img src="/images/2012/02/pic3-300x289.png" alt="" title="pic3" /></a></p> <p>nun auf "Thumbnail image format klicken"...</p> <p><a href="/images/2012/02/pic4.png"><img src="/images/2012/02/pic4-300x288.png" alt="" title="pic4" /></a></p> <p>... die Qualitätsstufe auf 100 stellen und "OK" klicken.</p> <p>Jetzt auf "Thumbnail file names" klicken (WICHTIG!) ...</p> <p><a href="/images/2012/02/pic5.png"><img src="/images/2012/02/pic5-300x288.png" alt="" title="pic5" /></a></p> <p>... und wie in der Grafik gezeigt, den Beginn der Dateinamen der Thumbnails auf "thumbs_" setzen. Das ist wichtig, das Wordpress die Thumbnails sonst nicht erkennt (ACHTUNG: die Dateiendungen müssen auch stimmen!).</p> <p>Jetzt auf "OK" klicken und dannach auf "Next".</p> <p>Auf der letzten Seite...</p> <p><a href="/images/2012/02/pic6.png"><img src="/images/2012/02/pic6-300x286.png" alt="" title="pic6" /></a></p> <p>...auf "Generate thumbnails only" klicken, das Programm arbeiten lassen, fertig.</p> <p>Schritt 3: Zuguterletzt müssen die Thumbs (in dem Ordner "thumns") noch auf den Server geladen werden...</p> <p><a href="/images/2012/02/pic10.png"><img src="/images/2012/02/pic10-300x181.png" alt="" title="pic10" /></a></p> <p>... und zwar in den selben Ordner in dem auch die Bilder liegen für die die Thumbs erzeugt wurden.</p> <p>Das Ergebniss:</p> <p>Vor dem upload der Thumbs:</p> <p><a href="/images/2012/02/pic11.png"><img src="/images/2012/02/pic11-300x187.png" alt="" title="pic11" /></a></p> <p>Nach dem upload der Thumbs:</p> <p><a href="/images/2012/02/pic12.png"><img src="/images/2012/02/pic12-300x165.png" alt="" title="pic12" /></a></p> How to google Sun, 25 Dec 2011 01:02:52 +0000 Unknown https://schempp.dev/blog/how-to-google/ https://schempp.dev/blog/how-to-google/ <p>Einige werden sich jetzt sicher fragen: warum dieser Artikel? Jeder weiss doch wie man googelt.</p> <p>Leider ist dem nicht so, aber anstatt Leuten die nicht mit Google umgehen zu wissen zu helfen machen sich viele einen Spass mit diesen Menschen und leiten sie auf Seiten wie <a rel="external" title="http://www.lmgtfy.com/" href="http://www.lmgtfy.com/">http://www.lmgtfy.de</a> weiter.</p> <p>Dieser Artikel richtet sich an all jene, die nicht wissen wie man mit Google umgeht bzw. immer viel zu wenig oder unzureichende Suchergebnisse bekommen.</p> <p><strong>Keep it simple</strong></p> <p>Es macht keinen Sinn lange Texte in das Suchfeld der Suchmaschine zu hämmern. Wörter wie "der", "es" oder "ein" sind für das Suchergebnis in der Regel völlig irrelevant.</p> <p>Man sollte sich bei der Suche auf das wesentliche beschränken. Stichworte sind für eine große Anzahl an Suchergebnissen am besten geeignet.</p> <p>Im übrigen ignoriert Google sowieso Fragewörter wie "wer", "wie" oder "was".</p> <p>Die Kunst des richtigen Googelns ist, das was gesucht werden soll in so wenig wie möglichen Suchbegriffen zu beschreiben.</p> <p>Außerdem können Suchergebnisse dadurch verfeinert werden, indem nicht nur deutsche Wörter benutzt werden, sondern auch englische. Wenn z.B. eine Suchanfrage mit ausschließlich deutschen Wörtern nicht zum gewünschten Ergebnis führt, könnte die selbe Suche in englischer Sprache wesentlich erfolgreicher sein.</p> <p>Auch wenn es öfter den Anschein erweckt: Google ist <strong>nicht</strong> intelligent. Das einzige was Google macht ist, in Seiten nach den Wörtern zu suchen die vorgegeben werden. Google sucht nicht nach Synonymen. Wenn also nach "Ritter Sport" gesucht wird, sucht Google nicht nach "Schokolade".</p> <p><strong>Sonderzeichen</strong></p> <p>Die google-Suche bietet, neben der einfachen suche auch noch die Suche mit Sonderzeichen an, die da wären:</p> <p>+, -, ~, . ., " ", *</p> <p>Im folgenden wird nun die Funktionsweise der einzelnen Zeichen erläutert:</p> <p><strong>Plus</strong></p> <p>Durch das Plus vor einem Wort wird diese verstärkt gesucht, d.h. eine Suche wie "Paris +Berlin" wird Suchergebnisse bevorzugen die Berlin enthalten.</p> <p><strong>Minus</strong></p> <p>Durch das Minus wird ein Wort vollständig ausgeschlossen. Dies ist vor allem dann sehr hilfreich wenn auf vielen Seiten zu dem gesuchten Begriff immer ein anderer unerwünschter auftaucht.</p> <p><strong>Synonym-Op</strong></p> <p>Durch das ~ Zeichen ist es möglich nach Synonymen zu suchen.</p> <p><strong>Zwei Punkte</strong></p> <p>Dieser Operator ist nur dann wichtig wenn man Zahlen in der Suchanfrage hat. Durch diesen Operator kann man einen Wert zwischen zwei Zahlen abfragen, z.B. 500 .. 1000. Google sucht dann nach einem Wert zwischen 500 und 1000.</p> <p><strong>Anführungszeichen</strong></p> <p>Die Anführungszeichen sind bei vielen Suchanfragen unverzichtbar. Soll nach einem Satz gesucht werden, so wird die Suche meist erschwert indem Google den Satz auseinander nimmt und nach den einzelnen Wörtern sucht. Durch die Anführungszeichen wird genau nach dem Satz zwischen den beiden Anführungszeichen gesucht.</p> <p>Beispiel: "Das ist ein Test"</p> <p><strong>Stern</strong></p> <p>Der Stern wird in Kombination mit den Anführungszeichen eingesetzt und steht für ein beliebiges Wort.</p> <p>Beispiel: "Das * ein Test"</p> <p>Neben diesen Sonderzeichen gibt es noch andere Möglichkeiten die Suche einzuschränken.</p> <p>Beispielsweise kann mit "site:de" nur nach deutschen Seiten, also Webseiten die mit .de enden gesucht werden. Dies ist natürlich auch auf Seiten anwendbar die mit .com enden (site:com), sowie mit allen anderen Seiten.</p> <p>Neben all diesen, für Anfänger etwas krpytisch wirkenden Befehlen, gibt es bei Google immer noch die "Erweiterte Suche" (siehe Bild)</p> <p><a href="/images/2011/12/google.png"><img src="/images/2011/12/google-300x159.png" alt="" title="Google - Erweiterte Suche" /></a></p> <p>Wer sich intensiver mit der Suchmaschine von Google beschäftigen möchte: <a rel="external" title="http://www.googleguide.com/google_works.html" href="http://www.googleguide.com/google_works.html">http://www.googleguide.com/google_works.html</a></p>