Blog

Page d’exemple

Projets

Un site internet pour tester à la volée des…

Ici nous allons vous montrer un site internet pour essayer les codes HTML ; CSS ; javascript.

Introduction au projet

On ne voulait utiliser un site fait maison pour être sûr de pas se faire attaquer par le DNS du service informatique, qui peut arbitrairement décider de bloquer tel ou tel site web.

On a alors posé un cahier des charges :

  • Un site permettant de charger du HTML, du CSS et du JS.
  • Intuitif.
  • Un retour console pour le JS car c’est mieux que d’aller dans la console du navigateur.

Une fois fait, on s’est mis a coder, on était large, on avait 2 jours pour proposer au prof un outil clé en main.

Interface

L’idée de l’interface est simple :
<emb751|center>
En rouge : le site retour.
En bleu : les zones d’édition.
En noir : le bouton pour envoyer tout ce beau code

L’architecture est un système de div, très pratique pour la mise en page.
Afin de ne pas interférer avec le code éventuel des élèves, on donne des ID aléatoirement générés pour les parties vitales du site (inputs, outputs).

Le JavaScript

C’est la partie la plus importante du site.

Pour le bon fonctionnement du site, il nous faut 3 fonctions :

  • Une fonction de récupération de console.
  • Une fonction d’envoi du code.
  • Une fonction traitant le CSS à envoyer.

Récupération console

On réécrit la fonction console.log et on associe cette fonction à la fonction window.onerror.

<code class="javascript">Retour ligne automatique
console.log = function () Retour ligne automatique
// On recupère le message passé en argumentRetour ligne automatique
var message = [].join.call(arguments, " ") ;

// On crée un nouvel élément <div> qu'on ajoute dans le codeRetour ligne automatique
var div = document.createElement("div") ;Retour ligne automatique
div.appendChild(document.createTextNode(message)) ;Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div) ;Retour ligne automatique
 ;

// Redéfinition de la fonction d'erreurRetour ligne automatique
window.onerror = console.log ;Retour ligne automatique
</code>

Fonction de traitement du CSS

On commence par convertir le CSS en une seule ligne.
Ensuite on split la chaine obtenue avec le charactère «  », ça nous permet d’avoir un Array contenant des strings commençant toujours par un objet à modifier en CSS ou une string vide.

Comme notre fenêtre visible et modifiable par les élèves porte l’ID « main », on ajoute « #main  » a chaque objet ou on remplace « body » par « #main » afin de n’affecter que la div main.

<code class="javascript">Retour ligne automatique
function convertCSS(code) Retour ligne automatique
code = code.replace("\n", "") ;Retour ligne automatique
code = code.replace("\r", "") ;Retour ligne automatique
var newCode = code.split("") ;Retour ligne automatique
for (var i = newCode.length ; i >= 0 ; i—) Retour ligne automatique
if (newCode[i] !== undefined && newCode[i] !== "") Retour ligne automatique
newCode[i] = newCode[i].replace(/^\s+|\s+$/g, "") ;Retour ligne automatique
if (newCode[i].startsWith("body")) Retour ligne automatique
newCode[i] = "#main " + newCode[i].substring(4) ;Retour ligne automatique
Retour ligne automatique
if (!newCode[i].startsWith("#main")) Retour ligne automatique
newCode[i] = "#main " + newCode[i] ;Retour ligne automatique
Retour ligne automatique
newCode[i] += "" ;Retour ligne automatique
Retour ligne automatique
Retour ligne automatique
return newCode.join("") ;Retour ligne automatique
Retour ligne automatique
</code>

Fonction d’envoi du code

On commence par clear la console.
Puis on envoie un retour console avec un id précis pour changer son style. Ce retour permet de nous assurer que le code a été envoyé.

On actualise les balises du site qui assurent le bon fonctionnement de la fenêtre main en prenant bien soin de traiter le CSS.

Problème principal lors de la réalisation de cette fonction :
Pour pouvoir modifier le JS de la fenêtre, il est indispensable de supprimer la balise < script > qui contient l’ancien JS. On ne peut pas juste réécrire le JS, sinon la cache ne s’actualise pas.

<code class="javascript">Retour ligne automatique
// Fonction d'envoi du codeRetour ligne automatique
var sendCode = function() Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").innerHTML = "<p>Retour console</p>" ;Retour ligne automatique
// On crée un nouvel élément <div> qu'on ajoute dans le codeRetour ligne automatique
var div = document.createElement("div") ;Retour ligne automatique
div.id = "change" ;Retour ligne automatique
div.appendChild(document.createTextNode("Code envoyé !")) ;Retour ligne automatique
document.getElementById("vfRDiMPLLlGMBuKV").appendChild(div) ;Retour ligne automatique
// Changement HTMLRetour ligne automatique
document.getElementById("main").innerHTML = document.getElementById("html").value ;Retour ligne automatique
// Changement JSRetour ligne automatique
document.getElementById("toAdd").remove() ;Retour ligne automatique
var script = document.createElement("script") ;Retour ligne automatique
script.id = "toAdd" ;Retour ligne automatique
document.body.appendChild(script) ;Retour ligne automatique
document.getElementById("toAdd").innerHTML = document.getElementById("js").value ;Retour ligne automatique
// Changement CSS Retour ligne automatique
document.getElementById("maincss").innerHTML = convertCSS(document.getElementById("css").value) ;Retour ligne automatique
if(document.getElementById("html").value.toString().indexOf("<body onload=") !== -1)Retour ligne automatique
window[Retour ligne automatique
document.getElementById("html").value.substring(Retour ligne automatique
document.getElementById("html").value.toString().indexOf("\""Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("<body onload="))+1Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("("Retour ligne automatique
,document.getElementById("html").value.toString().indexOf("<body onload=")))]() ;Retour ligne automatique
Retour ligne automatique
</code>

Conclusion

Le site fut fini dans les temps et opérationnel !
https://workspace.nsi.xyz/

Projets

Un Sokoban pour la NumWorks

Le Sokoban est un jeu de puzzle inventé au Japon en 1982. Le principe est simple : vous êtes un gardien d’entrepôt et vous devez amener les caisses aux bons emplacement. Pour cela, vous pouvez uniquement pousser les caisses, et une seule à la fois.*

Une partie des informations de cette page sont extraites de la page Wikipédia Sokoban.
Si vous souhaitez creuser le sujet, n’hésitez pas à la consulter.

L’objectif du jeu est de résoudre les niveaux en un nombre minimum de déplacements. Par ailleurs, il existe des milliers de niveaux, pour la majorité créés par la communauté. En fonction de la taille et de la complexité de la grille, ainsi que de l’exigence de l’utilisateur pour réduire son nombre de coups, tous les niveaux de difficultés sont imaginables. Ces éléments donnent une grande durabilité au jeu.

En raison de son apparition rapide dans le monde du jeu vidéo, de sa simplicité apparente et de son intérêt toujours renouvelé, le jeu a connu un grand succès et a été développé sous de nombreuses versions et plateformes. A mon tour de le porter sur la calculatrice NumWorks !

Fonctionnalités

  • Aide (règles, touches, signification des couleurs) affichée au lancement et accessible à tout moment.
  • Ajustement de l’affichage à la taille de la grille.
  • Possibilité d’annuler les mouvements précédents.
  • Déplacement rapide.
  • Détection de la victoire.
  • Ajout et choix de niveaux facile (voir la section correspondante).

Lancer le jeu

Le moteur de jeu et le contenu (les niveaux) sont stockés dans des scripts séparés :

Pour jouer, il faut télécharger ces scripts et exécuter sokoban.py. Il vous est demandé de préciser la cartouche (liste de niveaux) à utiliser ainsi que le niveau auquel vous souhaitez commencer. Il n’est pas nécessaire de remplir ces champs, le jeu commencera par défaut au niveau 1 de la cartouche soko.

Ajouter des niveaux

Si vous venez à bout des 50 niveaux inclus dans la cartouche de base, vous pouvez en télécharger une autre sur le Workshop. Ils sont nommés soko1soko2, … Pour les utiliser, il suffit de rentrer le nom de la cartouche au lancement du jeu.

Une présentation détaillée de ce projet à été publiée sur tiplanet.org

Tutoriels

Lancer une machine virtuelle sur son ordinateur

Dans le cadre des cours de spécialité NSI, vous pouvez être amené à utiliser une machine virtuelle sur votre propre ordinateur. En informatique, une machine virtuelle (VM en anglais) est une illusion d’un appareil informatique créée par un logiciel d’émulation.

Une machine virtuelle, c’est quoi ?

D’après wikipédia

En informatique, une machine virtuelle (VM en anglais) est une illusion d’un appareil informatique créée par un logiciel d’émulation.

Le logiciel d’émulation simule la présence de ressources matérielles et logicielles telles que la mémoire, le processeur, le disque dur, voire le système d’exploitation et les pilotes, permettant d’exécuter des programmes dans les mêmes conditions que celles de la machine simulée

Une machine virtuelle, ça sert à quoi ?

D’après wikipédia

Un des intérêts des machines virtuelles est de pouvoir s’abstraire des caractéristiques de la machine physique utilisée (matérielles et logicielles — notamment système d’exploitation), permettant une forte portabilité des logiciels et la gestion de systèmes hérités étant parfois conçus pour des machines ou des environnements logiciels anciens et plus disponibles.

Les machines virtuelles sont également utilisées pour isoler des applications pour des raisons de sécurité, pour augmenter la robustesse d’un serveur en limitant l’impact des erreurs système ou pour émuler plusieurs machines sur une seule machine physique (virtualisation).

Les inconvénients des machines virtuelles sont d’une part des performances brutes sensiblement inférieures à une exécution sur le matériel en natif (ce qui peut rendre malaisé le test de jeux 3D), d’autre part de consommer une petite partie de la mémoire réelle pour leur propre fonctionnement. Leurs avantages sont de permettre des tests de variantes d’installation sur des machines simulées possédant des tailles de RAM, de mémoire graphique, et des nombres de processeurs très divers.

Une machine virtuelle en spé NSI

Le programme de la spé NSI comporte une partie qui traite des système d’exploitation, de leurs fonctionnalités et de l’utilisation du mode console d’un OS.

Pour des raisons de sécurité, sur les ordinateurs du lycée, est bloqué :

  •  le mode console 
  • la possibilité d’installer un nouvel OS 
  •  l’accès administrateur

Manipuler une machine virtuelle permet de disposer d’une machine sur laquelle on peut installer un système libre (Ubuntu sera choisit pour sa simplicité), et sur ce système d’exploitation vous serez administrateur (vous pourrez donc tout casser par exemple, ou installer un virus (si vous y arrivez) sur votre machine virtuelle sans pour autant contaminer votre système d’exploitation natif.

Mon ordinateur peut-il faire tourner une machine virtuelle ?

Le fonctionnement (ou le non fonctionnement) d’une VM dépend des éléments suivants :

  • processeur : Si votre processeur est très vieux ou très peu puissant, il ne pourra pas faire tourner une machine virtuelle.
  • Chipset : Certains chipset peuvent bloquer mais en général il s’agit plus d’un réglage à faire dans le BIOS
  • BIOS : Il est parfois nécessaire d’accéder au BIOS et d’y modifier un paramètre.
  • Système d’exploitation

Mon processeur est-il capable de faire tourner une machine virtuelle ?

L’article sur le site du fabricant de processeur intel est particulièrement bien écrit : 
Processeur Intel

Si vous n’arrivez pas à faire tourner une machine virtuelle, dans 90% des cas la solution sera de modifier un paramètre du BIOS de votre carte mère.

Modifier le BIOS pour faire tourner une machine virtuelle

D’après wikipédia

Le BIOS, de l’anglais Basic Input Output System (en français : « système élémentaire d’entrée/sortie ») est un ensemble de fonctions, contenu dans la mémoire morte (ROM) de la carte mère d’un ordinateur, lui permettant d’effectuer des opérations de base, lors de sa mise sous tension. Par exemple l’identification des périphériques d’entrée/sortie connectés et la lecture d’un secteur sur un disque, un CD ou une partie d’une clé USB.

Par extension, le terme est souvent utilisé pour décrire l’ensemble du micrologiciel de la carte mère.

C’est en quelque sorte le centre de contrôle de la carte mère. Sur les cartes récentes il est remplacé par sa version moderne l’UEFI.

Si au lancement de la machine virtuelle, vous avez ce message d’erreur :

Alors voici les grandes lignes de ce qu’il va falloir faire :

  1. Trouver le moyen d’accéder au BIOS de son ordinateur
  2. Trouver le bon paramètre, et le modifier
  3. Sauvegarder le nouveau paramétrage du BIOS
  4. Redémarrer la machine physique

1. Accéder au BIOS

Pour accéder au BIOS, la procédure change selon la marque, l’année de votre ordinateur, son installation…

Si ce tutoriel marche :
How to enable virtualisation vt-x/amd-v on windows 10 (in bios) suivez le !

Paramètres Windows > Mise à jour et sécurité > Récupération > Démarrage avancéRetour ligne automatique
puis : Retour ligne automatique
Dépannage > Options avancées > Changer les paramètres du microprogramme UEFI

Si cette méthode ne marche pas, il faudra spammer au redémarrage les touches permettant d’accéder au BIOS, souvent la touche « Suppr », « Del », « F2″…

BIOS – Accéder au setup du Bios

2. Trouver le bon paramètre

Ne modifiez que ce que vous comprenez.

La paramètre à modifier peut se cacher vous divers noms. 
Les deux captures d’écrans réalisées par Metais R. et Fernando L. pourront vous aider dans cette recherche.

3. Sauvegarder le nouveau paramétrage du BIOS

Vous devez sauvegarder ce nouveau réglage avant de redémarrer le PC.

4. Redémarrer la machine physique

Sur Windows 10 > Démarrer le gestionnaire de tâche et vérifier que la virtualisation est activé.

Autres débogage

Si cela ne marche toujours pas, pas de panique. Essayez les stratégie ci-dessous :

1. Désactiver Hyper-V dans les fonctionnalités de Windows

Désactiver = la case doit être décochée !

2. Modifier les paramètres de la machine virtuelle elle même

Procédure à venir …

Projets

Un Tetris en python pour la NumWorks

Tout le monde sait qu’une calculatrice programmable sert à jouer à des jeux. Or quand on parle de jeux, un des premiers à nous venir en tête est Tetris, alors pourquoi pas un Tetris pour NumWorks ?

Ainsi, après un démineur, un snake, on vous propose cette fois ci le jeu mythique de la Gameboy adapté en flat design et codé en python pour la NumWorks.

Donne moi 32 ko, je te ferai un Tetris !

Jusqu’à la version 13.2 d’Epsilon, l’OS officiel de la NumWorks, faire un jeu en python sur la couche graphique de la NumWorks était impossible et les scripts commençaient à planter dès qu’ils pesaient 3-4 ko.

Avec un tas python heap de 32 ko, on peut enfin commencer à s’amuser et monter des projets dont le code source pèse près de 8ko.

Le récit de la création d’un jeu en image

Tout commença le 19 avril 2020 dans une nuit confinée.

🧐 Bon on vient de finir nos trois projets en python, on fait quoi maintenant ?
🤓 Oh on peut acheter des contrefaçon de Gameboy sur Aliexpress pour 10€ ! Et il y a 400 jeux dedans.
🧐 La nuit porte conseil, on en parle demain, enfin dans quelques heures !

Le lendemain :

🧐 Bon on fait un Tetris. Je viens de lire l’article sur Wikipédia, c’est passionnant. Par contre par un mot à Arthur, il va nous piquer notre idée sinon. Et cette fois, on ne stocke pas coordonnées des cases occupées dans des matrices, et on va utiliser la fonction get_pixel() de la NumWorks pour déterminer si une case est occupée ou non.

et c’est ainsi qu’un premier Tétrominos apparaît à l’écran.

🤓 J’ai peut être fini la collision
🧐 Hein ?! Mais j’ai pas commencé moi…
🧐 Bon je partage l’écran. Qu’est ce qu’on a dit déjà ? 120 pixels pour le menu, 120 pixels pour le score et 42 pixels pour le jeu en lui même c’est bien ça ?


🧐 Bon je viens de finir la maquette d’une ébauche de menu, reste à le coder !
🤓 et moi je viens de finir les collisions …
🧐 Pour les couleurs ça sera délicat et subtil. On va s’écarter du code couleur original.

🧐 Et du coup on va faire un rappel dans le menu
🤓 On fixe les points d’ancrage dans les pièces, et ainsi elles peuvent tourner

Rendu final souhaité (et obtenu)

🤓 Astuce : Si tu joues sur Omega, alors l’interface du jeu n’est plus orange mais rouge, elle s’adapte au fork de Epsilon.

🧐 D’ailleurs faudra que je relance l’équipe de développement de Omega, ils m’ont promis un tas python de 120 ko et j’ai l’impression que ce projet n’avance pas !
🧐 Bon ils sont encore sur répondeur, ils ont du bloquer mon numéro !
🤓 On fait une pause, j’ai envie de jouer un peu :

🧐 Bon je vais spoiler Critor de tiplanet.org mais toujours aucune info à Arthur !
🤓 Score codé, avec des fonctions polynôme et les points marqués dépendent du niveau du jeu …
🧐 Niveau max : 99, Score max : 999 999
🤓 Vitesse du jeux codé, avec une fonction logarithme népérien car un polynôme n’était pas adapté …

🧐 Bon maintenant s’agit de faire un gros score, histoire d’être certain que Critor ne nous batte pas !

Commencé un dimanche, fini le mercredi suivant, c’était presque trop facile !

🧐 Je reviens, je vais conseiller à Critor de commencer level 42, ça plantera son score !

Meilleurs scores

🧐 Il a commencé sa partie directement au niveau 42, du coup son score est à peine acceptable !🤓 En plus, il a triché ! Il a utilisé une vision prédictive triple et la grille d’aide !

Bien évidemment, il a nié avoir triché 🙄

Je ne les ai même pas utilisés, c’était pour mettre à l’écran le maximum d’éléments visuels, car j’étais parti pour l’utiliser également comme photo d’illustration d’article

Xavier Andréani, alias Critor du tiplanet.org

Mais nous ne sommes pas dupes non plus !

Epsilon 20…

31 Janvier 2023, une nouvelle version du système d’exploitation de la NumWorks est publié : Epsilon 20 ! 😍
NumWorks décide alors d’enfin implémenter le tableau périodique (qui était déjà d’ailleurs disponible sur Omega depuis un bon moment) dans son système, mais décide également de mettre à jour le fonctionnement du codage des couleurs dans l’application Python, ce qui a pour effet de mettre le Tetris, sortie 3 ans plus tôt, complètement KO et dysfonctionnel…

2,5 ans plus tard

🧐 Bon, ça fait plus de 2 ans que le Tetris est planté, il va falloir faire quelque chose…
🧐 Demande de l’aide à Kevin
🤓 Un peu sous l’eau en ce moment, ça bosse ici (il faut bien payer les impôts pour augmenter les parlementaires et les professeurs)
😎 J’aurai un peu de temps après mes partiels, je peux y jeter un œil et en profiter pour mettre à jour l’interface, j’aurai juste à reprendre le code de l’UI/UX du Mastermind, il est flexible et facilement implémentable
😎 Bon ça m’a pris toute la journée mais c’est censé être bon, j’en ai aussi profiter pour rajouter un système de pause, je me souviens qu’à l’époque c’était frustrant de perdre sa partie quand le prof passait derrière…
🧐 Tsss

Réagir ou commenter ce jeu

N’hésitez à réagir à cet article sur le forum tiplanet.org associé :
Tetris en Python pour NumWorks 13.2.0+

Vous pouvez également réagir à l’annonce de ce Tetris posté sur twitter :

https://twitter.com/nsi_xyz/status/1259418545173209089

Projets

Un menu en python pour les jeux sur la…

Un jeu commence souvent par un écran de paramétrage. Celui-ci doit être ergonomique, intuitif, et permettre à l’utilisateur final de personnaliser son expérience ludique. Cette article présente l’un des tout premier menu adaptable conçu en python pour la calculatrice NumWorks, ainsi que 3 exemples d’utrilisation.

Le contexte

Avec la sortie de la version 13.2.0 d’Epsilon, l’OS qui anime la calculatrice NumWorks, les capacités de la calculatrice à exécuter des scripts python a été doublée.

Le tas python « heap » est ainsi passé de 16ko à un peu plus de 31ko.
Et on peut donc désormais se lancer dans des projets un peu plus ambitieux.

Après avoir développé chacun un démineur en python pour la NumWorks, nous avons décidé de mettre au point un système de menu commun, paramétrable, utilisable dans ces deux démineurs et dans le snake que Arthur Jacquin a développé.

Ce menu a été codé pour permettre un maximum de souplesse, donc n’hésitez pas à l’utiliser comme tel ou à l’adapter.

D’un écran statique à un menu dynamique

Le « menu » originel de l’un des deux démineurs n’est en fait que du texte, affiché quelques secondes, uniquement lors du premier lancement du jeu. On ne peut pas interagir, et il va falloir intuiter le fonctionner des différentes touches.

Sur une application de calcul mental, nous avions conçu un vrai menu en mode texte :

Avec un système de navigation interne au menu primitif mais fonctionnel.

L’idée était donc de créer un menu ergonomique, sur la couche graphique de la NumWorks.

Les quelques croquis conceptuels ci-dessous illustrent parfaitement le cheminement fait d’essais/erreurs pour concevoir un menu simple, intuitif, ergonomique. La démarche est évidemment ponctuée de tests de positionnement.

Croquis

Test

Vertical ou horizontal ? Hybride ? Finalement, c’est l’affichage vertical qui est retenu, avec une coloration de l’objet actif pour une navigation claire, simple, en flat design.

Fonctionnalités

  • S’accorde avec la couleur de l’OS (Epsilon est orange, Omega rouge),
  • Permet le paramétrage de 1 à 5 paramètres, comportant autant d’options que souhaité,
  • Permet une option par défaut pour les paramètres,
  • Design épuré, minimaliste,
  • Possibilité d’afficher des informations sur plusieurs lignes.

Brancher le menu sur votre programme

Il suffit ensuite d’appeler la fonction menu() avec votre application. Elle retourne une liste des paramètres validés.

Il est souhaitable de faire cet appel proprement, et de prévoir le cas ou le menu n’est pas disponible, ainsi si le menu n’est pas présent sur la calculatrice, alors le jeu fonctionnera quand même avec des paramètres par défaut.

Par exemple :

try:
    mines, co, cr = menu("MINESWEEPER",
         "Lancer la partie",
         ["Mines", 22, 32, 42, 12],
         ["Commandes", " Nav: Flèches", " Déminer: OK", "Drapeau: DEL", "Rejouer: OK"],
         ["Crédits", "Arthur J.", "Vincent R."])[0]
except :
    mines = 20

Pour les utilisateurs avancés de ce menu, il est également possible de modifier les paramètres d’affichage avec une version souple (les versions du menu seront déclinées en fin d’article), permettant ainsi d’afficher plus de 5 paramètres, des chaînes de caractères plus longues, ou d’ajuster selon vos goûts.

Un branchement plus détaillé est présenté à la fin de cet article.

Paramètres de la fonction()

Le deuxième paramètre est le nom de l’action correspondant à la validation des paramètres, ici « Lancer la partie ».

Les paramètres suivants sont stockés dans des listes, il peut y en avoir jusqu’à 4 ou 5 et le dernier gère l’affichage sur deux lignes de manière optionnelle. Chaque paramètre comporte, dans l’ordre :

  • 1 nom (chaîne de caractère)
  • 1 ou plusieurs options

Affichage d’information

Les paramètres, comme leur nom l’indique, sont destinés à paramétrer l’expérience qui suivra ce menu. Cependant, vous pouvez également les utiliser pour afficher des informations, telles que les crédits ou les commandes. C’est notamment pour cela qu’est prévu l’affichage sur plusieurs lignes (qui est optionnel).

L’affichage multiligne n’est utilisable uniquement sur le dernier paramètre, et réduit évidemment le nombre de paramètres possibles. Pour l’activer, il suffit de séparer le contenu de la première ligne et celui de la deuxième par un dollar ($), par exemple :

  • « Auteur$Vincent Robert »
  • « Site web$nsi.xyz/snake »
  • « Navigation$Flèches »

Le dollar ($) est un caractère ACSII standard mais il faudra le saisir depuis le workshop, il n’est pas disponible de le saisir directement sur la calculatrice.

Epsilon ou Omega ?

L’essai d’une fonction exclusive à Omega suffit, et permet un accord visuel de l’objet actif avec la barre de titre de l’écran :

def omega(): # Vérificateur d'OS
    try: get_keys()
    except: return False
    else: return True

Détection des touches

Les différents projets, et notamment les jeux, nécessitent très souvent un système de détection des touches pressées. La fonction wait() est destinée à cet usage, et s’importe en même temps que le menu. Pratique !

def wait(buttons = range(53)): # Attends qu'une des touches précisées soit pressée
    while True:
        for i in buttons:
            if keydown(i):
                while keydown(i): True # Fonction anti-rebond
                return i

La fonction, par défaut, attendra qu’une des 46 touches soit pressée. Cependant, pour plus d’efficacité et pour n’avoir à traiter uniquement les signaux qui vous intéressent, vous pouvez passer en paramètre la liste des touches à interroger.

La table des codes clavier de la NumWorks est accessible sur cet article de Ti-Planet.

Table des codes clavier

Tester le menu

Le menu est disponible ici :

MenuVersion AVersion B
VariationsLe titre est en noir, quelques variations dans le code mais le rendu final est identiqueLe titre est en bleue, quelques variations dans le code mais le rendu final est identique
Téléchargermenu.pymenu.py
Démonstrationmenu_demo.pymenu_demo.py
Développementmenu_devn.a.

Pour le voir en action directement dans le workshop, vous pouvez utiliser une version non branchée mais autonome, ce sont les scripts menu_demo.py.

Une version de développement est également disponible, si vous souhaitez changer ou tester d’autres réglages : menu_dev.py

À la parution de cet article, quelques scripts utilisent ce menu, ce qui peut vous donner une idée plus concrète des usages possibles du menu :

Liendemine.pysnake.pycalcul.py
Taille8.42 ko8.42 ko8.42 ko
Auteur principalRobert VincentArthur JacquinFedyna Kevin
Menu

Ces applications existent en deux versions :

app.py est l’application qui intègre une copie du code du menu, app_se.py désigne une édition spéciale, allégée de menu qui est appelé depuis un autre script. Ainsi, le code du menu est mutualisé, ce code occupe donc moins de place car l’espace de stockage des scripts sur la calculatrice est limité.

Les applications app_se.py peuvent se lancer à priori sans le menu, mais dans ce cas là, il n’est pas possible de paramétrer l’application. On a encore quelques bug à résoudre, un try import semble ne pas fonctionner … On travaille sur ce sujet. Les applications sans _se sont par contre fonctionnelles.

Si l’équipe de Numworks nous lit, on aimerait bien

  • profiter un peu des 8 Mo de la ROM de la N0110, et donc avoir plus de 32ko pour stocker nos scripts
  • Que les touches les touches manquantes soient mappés sur le workshop, c’est à dire qu’il faut mapper toutes les touches en fait et non pas seulement 7…

Brancher proprement le menu sur une application

Un branchement propre est un branchement qui se comporte ainsi :

  • Si au lancement du script, la fonction menu() n’est pas détectée alors le jeux ou l’application se lance avec les paramètres par défaut, c’est un fonctionnement dégradé mais l’application marche. (On a encore quelques bug à résoudre)
  • Si au lancement du script, la fonction menu() est détectée, le menu se lance.

Exemple de branchement qui intègre le mode de fonctionnement dégradé :

def start():
    global mines, triche, graphisme
    try:
        mines, triche, graphisme, com, cre = menu("Démineur", "Lancer la partie",
                                                  ["Mines", 19, 22, 25, 28, 31, 33, 36, 39, 42, 7, 10, 13, 16],
                                                  ["Mode Triche", "non", "oui"],
                                                  ["Graphisme", "sobre", "classique"],
                                                  ["Commandes", "Nav: Flèches", "Déminer: OK", "Drapeau: Retour",
                                                   "Rejouer: Maison", "Triche: shift"],
                                                  ["Crédits", "Site web$nsi.xyz/demine", "Auteur$Vincent Robert",
                                                   "Contributeur$Bisam tiplanet.org",
                                                   "Contributeur$Critor tiplanet.org", "Contributeur$Arthur Jacquin"])
        triche = 0 * (triche == "non") + 1 * (triche == "oui")
        graphisme = 0 * (graphisme == "sobre") + 1 * (graphisme == "classique")
    except:
        mines, triche, graphisme = 19, 0, 0
    jeux()

Pour que tout ceci marche, il faut que la calculatrice importe le script menu.py et le script qui utilise le menu lors de la bascule vers la console d’éxécution. Ce fonctionnement ne peut malheureusement pas être simulé sur le workshop, mais sur calculatrice cela fonctionne.

Depuis le gestionnaire de script python, il suffit d’activer les options :
« Importation auto dans la console » des deux scripts.

Vous pouvez réagir à cet article sur le topic tiplanet.org de cette news :
Snake, calcul mental, et interface lancement jeux Python

Projets

Un Snake codé en python pour la NumWorks

Le snake est un jeu très ancien, apparu en 1976 dans Blockade. Le principe est simple : le joueur dirige un serpent qui grandit, et doit éviter le plus longtemps possible de se mordre la queue ou les bordures. Il existe cependant de très nombreuses variantes. Nous vous proposons ici un snake codé en python pour la NumWorks.

Un classique des portables Nokia sous Symbian OS

Sa simplicité apparente et son caractère addictif l’ont mené à être porté sur de très nombreuses plateformes, provoquant un succès planétaire. Nokia y a grandement participé en l’intégrant sur ses téléphones dès 1998, y compris l’iconique 3310.

Cet article présente donc une énième version de ce jeu, cette fois pour la calculatrice NumWorks.

Evolution et défis

La première version ne propose pas d’option et stocke le corps du serpent dans une liste constituée des coordonnées, en divisant l’écran en une grille de 32 par 20 carreaux :

snake = [[3, 3], [4, 3], [5, 3], [6, 3]] # Corps du serpent, de la queue à la tête

Fonctionnel, très pratique pour le faire avancer, par les méthodes pop()et append(), et pour savoir comment dessiner les bordures. Cependant un problème apparaît rapidement : l’occupation de la mémoire. En effet, les listes, et tout particulièrement les listes de listes, sont très coûteuses.

La première évolution a donc consisté à changer le système de stockage du serpent : désormais, seules les coordonnées de la queue et la tête sont enregistrées, diminuant considérablement la place occupée en mémoire, et ce quelle que soit la longueur du serpent.

snake = [3, 3, 6, 3] # Coordonnées de la queue et de la tête

Cela demande en revanche de modifier l’ensemble des procédures graphiques, et d’utiliser une méthode de détection de couleur de pixel, kandinsky.get_pixel(). Les fonctions get_pixel() et set_pixel()n’étant pas bijectives, il a fallu s’assurer de la bijectivité des couleurs utilisées. (Ceci fera l’objet prochainement d’un article dédié)

Pour éviter des conversions fréquentes entre les coordonnées de la grille et celles des pixels, l’ensemble des coordonnées est ensuite modifié pour ne présenter uniquement des coordonnées en pixels.

snake = [30, 52, 60, 52] # Coordonnées de la queue et de la tête

La gestion de la direction a également suscité réflexion, car il faut pouvoir saisir à tout moment les instructions de changement de direction, et il faut également éviter au joueur de mourir lors des demi-tours. Après quelques améliorations, on arrive à ce code :

# Gestion du temps et de la direction
direction = di
while monotonic() < time + speed: # Attente du prochain rafraîchissement du serpent
    for k in range(4): # Changement de direction
        if keydown(k) and direction+k != 3: di = k
    if keydown(6): start() # Retour au menu
time = monotonic()

A la demande de Robert Vincent, j’adapte le code pour pouvoir implémenter un mode où la téléportation d’un bord à l’autre de l’écran est possible, par un jeu de modulos. Le script perd en optimisation, mais gagne en polyvalence.

Les étapes suivantes sont moins lourdes de conséquences :

  • ajout de différents niveaux de difficulté, modifiant la vitesse du serpent et l’intensité de son agrandissement à chaque pomme mangée. 
  • ajout du mode « Dingue », où le serpent grandi et accélère tout seul, progressivement, au lieu de manger des pommes. 

Les dernières étapes ont été de brancher le jeu sur un menu polyvalent graphique en python codé en parallèle, et de finaliser les options d’accessibilité : 

  • choix définitif des touches utilisées
  • amélioration du dessin de la pomme 
  • ajustement du système de points

L’ajout d’autres modes n’est pas exclu.

Images

MenuInterface de jeu
TéléportationPartie perdue

Réagir à cet article

Vous pouvez réagir à cet article sur le topic tiplanet.org de cette news : 
Snake, calcul mental, et interface lancement jeux Python

Projets

Un démineur en python sur la NumWorks

Le démineur, jeu de réflexion dont le but est de localiser des mines cachées dans une grille représentant un champ de mines virtuel, avec pour seule indication le nombre de mines dans les zones adjacentes est désormais porté en python sur ta NumWorks !

Souvenir de jeunesse

J’ai découvert la programmation sur une désormais antique Casio 9960GT, propulsé par son CPU 8 bits à 4,3 MHz. Lycéen et autodidacte, j’ai alors entrepris de créer un démineur sur ma calculatrice et cela fut pour moi une découverte de différents concepts en algorithmique.

Le processeur de cette génération de calculatrice était tellement lent et l’accès à la mémoire encore plus lent que chaque test logique prenait un temps considérable. Le démineur codé et parfaitement fonctionnel se montrait ainsi d’une lenteur remarquable au premier lancement lors de l’affichage de la couche graphique, il fallait près de 42 secondes pour initialiser la couche graphique.

Quelques caractéristiques de ce démineur :

  • 5 niveau de difficulté
  • un plateau de jeu de 14 cases par 7, soit 98 cases en tout.
  • L’initialisation de la couche graphique prenait à elle seule plus de 30 secondes
  • La navigation était fluide, mais la fonction découverte pouvait prendre une bonne dizaine de seconde.

Sur une NumWorks, en Python

20 ans plus tard, l’idée est donc de coder un nouveau démineur, en python, et de le faire tourner sur la calculatrice à la mode du moment : une NumWorks, propulsé par un CPU ARMv7 à 100 / 200 mhz, donc probablement plus de 50 fois plus rapide que celui de mon antique Casio.

Mes élèves de seconde étant tous équipés de cette calculatrice, ils pourront s’amuser en silence quand les cours sont trop ennuyeux, et cela montrera aux futurs élèves de la spécialité NSI les possibilités de la calculatrice et la souplesse du langage python.

L’objectif est de sortir ce démineur pour la sortie officielle de la version 13 de Epsilon, le logiciel sous licence CC BY-NC-SA de la calculatrice NumWorks. La version 13 de Epsilon introduit beaucoup d’améliorations et de nouveautés à l’application Python, celle qui nous intéresse particulièrement et le getkey, la capacité de la calculatrice dans un script python à détecter si une touche est pressée.

Le site tiplanet.org ayant déjà bien documenté cette fonctionnalité, on dispose donc déjà des codes associés aux touches :

Créer une interface graphique

Pour faire un démineur, on a besoin d’un tableau de n lignes et p colonnes dans lequel on va afficher une mine, un drapeau ou un chiffre.

Il faut donc s’adapter à la résolution de l’écran, et la principale contrainte à prendre en compte est la taille d’affichage des chiffres.

Puis on les met en couleur

et enfin on code les mines et le drapeau.

#codage des couleurs
co=color
f,h,n = 255,127,0
c=[co(f,f,f), co(45,125,210), co(151,204,4), co(238,185,2), co(244,93,1), co(215,65,167), co(n,n,n), co(n,n,n), co(n,n,n),
   co(h,h,h),co(192,192,192),co(96,96,96),co(253,236,185)]
def terrain(): #Affiche la grille
  fill_rect(8,21,300,200,c[9])
  for y in range(21,243,20):
    for x in range(8,309):
      set_pixel(x,y,c[10])
  for x in range(8,320,20):
    for y in range(21,222):
      set_pixel(x,y,c[10])
def cl(x,y):
  fill_rect(9+20*x,22+20*y,19,19,c[0])
 
def drapeau(x,y):
  fill_rect(17+20*x,26+20*y,3,9,c[12])
  fill_rect(17+20*x,36+20*y,3,3,c[12])
 
def mine(x,y): # Ce code ne sera pas retenu pour la version finale.
  cl(x,y);
  fill_rect(12+20*x,36+20*y,13,4,c[9])
  fill_rect(14+20*x,34+20*y,9,2,c[11])
  fill_rect(17+20*x,32+20*y,3,2,c[5])

Une matrice pour stocker les mines

Le plus simple est de stocker les mines dans une matrice 10×15.
Pour cela on défini une matrice en python et on la rempli de 0.

m = [[0 for y in range(10)] for x in range(15)]

puis un script génère des bombes, codées 999 dans la matrice.

def gvt(): #fonction renommée depuis ...
  b = 20
  while b>0:
    x, y = randint(0,14),randint(0,9)
    if m[x][y]!=999:
      m[x][y]=999
      b-=1
      for p in range(max(0,x-1),min(15,x+2)):
        for q in range(max(0,y-1),min(10,y+2)):
          if m[p][q]!=999:m[p][q]+=100  

Le script ci-dessus a deux fonctions, il place les 20 mines puis « calcule » pour chaque case le nombre de bombes dans les 8 cases autour.

Ainsi, la matrice contient à ce stade uniquement des entiers :
soit des 0 (0 bombes dans les 8 cases environnantes), soit des multiples de 100, soit des 999.

Pourquoi 100 et pas 1 pour indiquer qu’il y a une bombe ?

Car on va utiliser cette matrice pour y stocker une information importante, à savoir si la case a été découverte ou pas.

m[i][j]La case (i,j) contientDans les 8 cases autour de la case (i,j) il y acase découverte
9991 mineon ne sait pasnon sinon (…)
3420 mine3 minesoui
3000 mine3 minesnon
420 mine0 mineoui
10 mine0 mineen cours de découverte
00 mine0 minenon

Calcul du nombre de mines de chaque case

En parcourant l’article Wikipédia sur le démineur lors de la rédaction de ce compte rendu, j’y ai découvert que j’ai construit intuitivement l’un des deux algorithmes classiques pour le calcul des nombres des différentes cases du démineur.

Sur mon antique Casio 9960GT, j’utilisais l’algorithme par case :

explorer tableau par case
si case est vide
nombre := compter_mines(case.voisinage)
case.valeur = nombre<

et sur la NumWorks, j’ai construit une version légèrement adapté de l’algorithme par mine :

// Placement de la mine
explorer mine.voisinage par case
si case est vide
incrémenter case.valeur

Dans une première version en python, j’utilisais la partie décimale pour y stocker le 42 ou le 0.01, ainsi cela donnait 1,42 si il y a une mine dans le voisinage et que la case est déjà découverte, mais ceci posa un problème, le test :

if 1.42-round(1.42)==42

ne marchait pas, car python ne dispose pas d’un moteur de calcul exact sur les réels.
Le résultat du calcul 1.42-1 en python est 0.419999999999999

Par ailleurs, stocker en réel et non un entier est susceptible de consommer plus de mémoire, donc le stockage de l’information sous la forme d’entier est préférable pour les tests conditionnels.

Une fonction pour les découvrir toutes !

A partir de la matrice, on peut exécuter un script qui révèle les positions et vérifie que tout fonctionne correctement :

def verif():
  for x in range(15):
    for y in range(10):
      if m[x][y]==666:
        mine(x,y)
      elif m[x][y]>0:
        chiffre(x,y)

La fonction chiffre elle a pour objectif d’afficher le nombre de bombes autour :

def chiffre(x,y):
  cl(x,y)
  nb[1]+=(m[x][y]%100!=42)
  i=m[x][y]-m[x][y]%100
  m[x][y]=i+42
  if i>=100:v=int(i/100);draw_string(str(v),13+20*(x),23+20*(y),c[v],c[0])
  deminage()

pas à pas de la fonction chiffre :

  • cl(x,y) éclairci la case
  • nb[1] s’incrémente de 1 si la case n’a pas déjà été découverte, c’est le compteur de la victoire
  • Si la valeur m[x][y] contenait Z00 elle sera désormais de Z42, Z étant un entier entre 0 et 8.
  • On affiche la valeur de Z, avec une couleur adaptée.
  • On exécute le script deminage(), qui calcule le score et vérifie si l’on a gagné.

Le plus difficile à coder est la fonction de découverte de proche en proche, si on dévoile une case ne contenant aucune mine, et pas de mine non plus dans les 8 cases alentours, il faut faire un « script récursif » de traitement et de découverte de ces cases.

La fonction decouvre() est la suivante :

def decouvre(x,y):
  i=1
  while i>0:
    chiffre(x,y)
    for p in range(max(0,x-1),min(15,x+2)):
      for q in range(max(0,y-1),min(10,y+2)):
        if m[p][q]>=100:chiffre(p,q)
        elif m[p][q]==0:m[p][q]+=1
    i=0
    for p in range(15):
      for q in range(10):
        if m[p][q]%100==1:i=1;x=p;y=q;p=14;q=9

Elle est appelée par la fonction marche() :

def marche(x,y):
  if m[x][y]>=999:explose()
  elif m[x][y]>=100:chiffre(x,y)
  else:decouvre(x,y)

Ainsi la fonction découverte n’est appelée que si on « marche » sur une case sans mine, et que les 8 cases aux alentours ne contiennent également aucune mine.

Elle teste les 8 cases du voisinage, affiche le chiffre de celles qui doivent afficher un chiffre. Si les cases contiennent un 0, il devient 1 et devra être traité par le script ultérieurement.

Ce fonctionnement n’est pas optimal en temps de calcul, mais il ne crée aucun nouvel objet en mémoire. Il n’est pas vraiment non plus récursif au sens python pour éviter là encore de consommer trop de mémoire.

Une précédente version ajoutait les coordonnées des cases à traiter dans une liste, mais cette liste grossissait et pouvait saturer la mémoire.

Piloter un drone sur un terrain miné

Il ne reste plus qu’à coder la navigation dans l’écran, c’est à dire l’interaction entre l’affichage et le clavier de la calculatrice.

a,r,t,l,k,s=set_pixel,fill_rect,draw_string,range,keydown,sleep
p=[[6,5],[7,5]]
 
def survol():
  x, y = p[1][0], p[1][1]
  v = m[x][y]
  gps(x,y)
  # t(str(int(v/100)),20,2)
  x, y = p[0][0], p[0][1]
  v = m[x][y]
  if p[1][0]!=x or p[1][1]!=y:
    if (v-42)%100==0:gps(x,y,0)
    else:gps(x,y,9)
  del p[0]
 
def gps(x,y,i=6):
  r(9+20*x,22+20*y,19,2,c[i])
  r(26+20*x,22+20*y,2,19,c[i])
  r(9+20*x,22+20*y,2,19,c[i])
  r(9+20*x,39+20*y,19,2,c[i])
 
def drone():
  while not k(6):
    if k(0):p.append([max(p[0][0]-1,0),p[0][1]])
    if k(3):p.append([min(p[0][0]+1,14),p[0][1]])
    if k(1):p.append([p[0][0],max(p[0][1]-1,0)])
    if k(2):p.append([p[0][0],min(p[0][1]+1,9)])
    if k(4):marche(p[0][0],p[0][1])
    if k(17) or k(16):drapeau(p[0][0],p[0][1])
    if k(52):nb[2]=0;nb[0]=22;minage(nb[0]);s(1)
    if k(45):nb[0]=min(nb[0]+5,90);minage(nb[0]);s(1)
    if k(46):nb[0]=max(nb[0]-5,10);minage(nb[0]);s(1)
    if len(p)>1:survol();s(0.120)

La fonction survol() déplace le curseur, en rétablissant l’affichage de la case précédemment survolée à l’aide de la fonction gps().

la fonction drone() attend que l’utilisateur appuie sur une touche du clavier.

ToucheCode toucheAction
Flèche haut1se déplacer
Flèche bas2se déplacer
Flèche gauche0se déplacer
Flèche droite3se déplacer
OK4marcher sur la case
Clear ou Tolbox17Afficher un drapeau
Maison6quitter la boucle
+45ajouter 3 mines et recommencer la partie
46enlever 3 mines et recommencer la partie
EXE52recommencer la partie avec les paramètres par défaut

Le nombre de mine par défaut est fixé à 19 pour un plateau de 150 cases, soit un ratio de 12.7%.

Le démineur de Microsoft sur Windows 10, appelé Minesweeper propose des ratios de 11,1%, 15%, et 20% respectivement pour les modes faciles, moyen et difficile.

Le nombre de mine qu’il est possible de placer est un nombre dans la liste :
13, 16, 19, 22, 25, …, 40 mais une petite astuce mathématiques permet de choisir n’importe quel entier entre 11 et 42 pour désigner le nombre de mine.

Oui n’importe quel nombre entier entre 11 et 42 alors que l’interface et l’utilisation des touches [+] et [-] ne permet que d’ajouter ou d’enlever 3 mines…

Epsilon version 13.2

La sortie de la version 13.2.0 d’Espilon, le logiciel qui anime la NumWorks permet de faire tourner sans problème ce démineur. Si dans la version 13.0.0 et 13.1.0 le démineur ne fonctionnait pas à cause d’une affectation insuffisante de mémoire pour l’exécution des scripts python, la version 13.2.0 résout ce problème qui n’est plus qu’un mauvais souvenir. Ainsi, la NumWorks est l’une des calculatrice la plus rapide lors de l’exécution des scripts Python, et que pour un prix d’achat de 79€ elle n’a clairement aucune concurrence dans cette gamme de prix.

Omega, un firmware alternatif pour votre NumWorks

Le logiciel de la NumWorks est libre et ouvert, ce qui est très appréciable et on peut même dire admirable dans l’univers très fermé des calculatrices.

Ainsi, tout le monde peut accéder au code source, le lire, le modifier et le redistribuer en respectant les conditions imposées par la licence CC BY-NC-SA.

Une équipe de passionné a donc décidé de développer un firmware alternatif, et il l’ont appelé Omega. Ils intègrent différentes amélioration, et poussent les developpeur du firmware stock à s’améliorer sans cesse.

Pour tester ce démineur, tu dois :

  • Soit mettre à jour ta calculatrice en version 13.2.0 au minimum.
  • Soit installer le firmware Omega.
InstallerLien hypertexte
1. Installer Le firmware Omegaen quelques clics
1. Ou mettre à jour Epsilonen quelques clics
2. Installer le démineurworshop

Le démineur en version 1.20

Une nouvelle version de ce démineur est sortie le 18 avril 2020, elle intègre un menu graphique python développé en interne pour cette occasion.

Le script du démineur pèse désormais 8.42ko, et le démineur peut désormais être paramétré par un menu graphique, interactif et intuitif.

De nouvelles options ont été ajoutées :

  1. Le choix du graphisme : Flat vs Classique
  2. Un mode triche à tester avec la touche MAJ de l’ordinateur ou Shift sur la calculatrice.

Quelques dernières remarques

Si tu souhaites réagir à cet article, tu es invité à le faire sur ce forum :
[tiplanet.org] Un démineur en python pour la NumWorks, tu y trouvera des discussions pointues sur l’utilisation de la mémoire lors de l’éxécution d’un script Python.

Entre le script initial et le script proposé en ligne à cet instant, de nombreuses réécritures portions du code ont été réécrites, mais les explications de cet article restent valables.

Tutoriels

Personnaliser le curseur de sa souris

Un petit tutoriel pour vous permettre de personnaliser le curseur de votre souris comme vous le souhaitez.

Pour commencer il va vous falloir ouvrir le panneau de configuration , pour cela cliquez sur l’explorateur de fichiers windows.

Puis sur bureau

Puis sur panneau de configuration

Une fois le panneau de configuration ouvert, cliquez sur Matériel et Audio

Puis dans « Périphériques et imprimantes » cliquez sur souris .

Vous avez ouvert les propriétés de votre souris , cliquez maitenant sur pointeur.

Vous avez normalement devant vous une liste de formes de pointeurs qui servent à différentes actions , que vous pouvez parcourir à l’aide de la barre de défilement.

Maintenant choisissez quel pointeur vous souhaitez modifier en cliquant dessus ( dans l’exemple de ce tutoriel le pointeur Sélection normale sera celui choisi ), puis cliquez sur Parcourir… , cela va ouvrir un fichier de votre ordinateur ou se trouve toutes les formes de pointeurs de base de windows , garder cette fenêtre ouverte nous y reviendrons juste après.

Obtenir des pointeurs personnalisé

Pour ce tutoriel je vais vous donner 2 solutions pour obtenir des pointeurs personnaliser :

1ère méthode -Vous téléchargez sur internet des pointeurs faits par d’autres personnesRetour ligne automatique
(voici un site internet ou vous pourrez trouvez de nombreux pointeurs http://www.rw-designer.com/cursor-l… )

Après il vous suffis de cliquez sur l’ensemble de pointeurs que vous souhaitez , puis de cliquez sur download

Lorsque que le téléchargement est terminé , mettez le fichier sur votre bureau (cliquez sur fichier et maintenez votre clique pour le faire glisser sur votre bureau) , faite un clique droit et faite extraire ici .

Cela devrait faire apparaitre sur votre bureau les icones des pointeurs que vous vouliez ( et si d’autre fichiers que ces pointeurs apparaissent supprimez les avec un clique droit => supprimer ) .

Maintenant , reprenez la fenêtre windows contenant les pointeurs que vous avez ouvert au préalable.

Glisser y les pointeurs que vous venez de téléchargez en cliquant sur l’un d’eux et en maintenant le clique jusqu’à le faire glisser jusqu’à la fenêtre windows.

2ème méthode-Vous créez vous même vos propres pointeurs à l’aide d’un logiciel que vous pouvez télécharger ici https://www.clubic.com/telecharger-…

Une fois ce logiciel téléchargez , lancez le .cliquez sur Create , sélectionner New mouse cursor et cliquez sur create .

Vous avez maintenant une interface vous permettant de créez un pointeur. Voici quelques aides pour comprendre les bases du fonctionnement du logiciel .

Vous pouvez pour vous aidez cherchez des image de pixel art sur internet tel que celle ci

Et en recopier en les modifiant comme vous le souhaitez comme pour donner par exemple cela

Ensuite cliquez sur fichier puis save as et cliquez sur bureau puis sur ok

Déplacez ensuite votre pointeur personnaliser dans la fenêtre windows des pointeurs ouvert au préalable ( cliquez dessus , maintenez le clique et faite le glisser dans la fenêtre )

Changer son pointeur

Enfin choisissez le pointeur que vous voulez dans la fenêtre windows des pointeurs , cliquez sur ouvrir , et cliquez sur appliquer .

Tada !! Votre curseur de souris s’est transformé !!
Noter qu’il vous est possible de modifier l’apparence du pointeur pour n’importe quel action que fais votre curseur (suffit de cliquez sur celui que l’on souhaite modifier)
Et je vous deconseil fortement de mettre deux fois la même apparence , cela porte à confusion .
Vous pouvez maintenant refermez toutes les fenêtres ouvertes avec leurs croix rouges respectives ( en haut a droite )

Tutoriels

Comment créer son QR code ?

Un QR code est une image qui permet de pouvoir stocker plus d’informations qu’un code à barres classique à une dimension. On l’utilise pour faciliter l’accès à différent liens (URL, téléphone, email…)

Voici 2 méthodes pour créer son QR code :

  • Avec un ordinateur
  • Avec une application Android

Avec un ordinateur :

1 – aller sur un navigateur internet

2 – Aller sur le site https://www.qr-code-generator.com

3 – S’enregistrer sur ce site en cliquant sur « SIGN UP »
(en haut à droite)

4 – choisir la nature de l’information de votre QR code

5 – Cliquer sur « NEXT »

6 – rentrer l’information que vous souhaiter transformer en QR code

7 – Cliquer sur « NEXT »

8 – Vous pouvez personnaliser le cadre, la forme, la couleur et le logo de votre QR code

frame : cadre
code : forme et couleur edges : bords

9 – maintenant télécharger votre QR code en cliquant sur « DOWNLOAD »

Avec une application Android :

1 – télécharger l’application « QR code Générateur » sur play store

2 – ouvrir l’application télécharger

3 – cliquer sur « texte » et choisissez la nature de l’information

4 -mettre l’information dans la barre de saisie

5 – cliquer sur « produire »

6 – clique sur l’icône pour l’enregistrer entourée en rouge ci-dessous :

Tutoriels

3 méthodes pour réaliser une capture d’écran sur Windows

Vous souhaitez faire une capture d’écran et au moment de la faire vous n’y arrivez pas ou vous connaissez qu’une seul méthode ? Pas de panique, grâce à ce tutoriel vous allez apprendre comment faire une capture d’écran sur son ordinateur est une opération à connaître absolument ! Cela vous permet d’immortaliser à jamais un moment (sur une application, un site web…), d’obtenir plus facilement de l’aide sur les forums d’assistance informatique et bien d’autres choses !

Méthode 1 :

La première méthode consiste à réaliser une capture d’écran avec l’outil de capture d’écran de Windows

Faire une capture d’écran avec l’outil capture d’écran est l’une des méthodes les plus simples pour faire une capture d’écran et elle parfaite pour tous les débutants !

1 – Démarrez l’Outil Capture d’écran de Windows en entrant le terme « capture » dans le menu démarrer puis sélectionnez l’application outil Capture d’écran.

2 – Puis une fois, après avoir démarrez l’application, sélectionnez le mode de capture en cliquant sur le bouton Mode. Plusieurs modes de capture vont apparaître et vous allez devoir choisir celui qui convient le mieux à votre besoin :

Capture Forme libre : permet de sélectionner « à la volée » avec la souris la zone à capturer.
Capture rectangulaire : permet de sélectionner précisément une zone de l’écran.
Capture Fenêtre : permet de capturer la fenêtre d’un logiciel affichée à l’écran.
Capture Plein écran : permet de capturer tout l’écran.

3 – Ensuite après avoir sélectionnez votre mode, cliquez sur Nouveau puis sélectionnez la zone de l’écran que vous souhaitez capturer.
4 – Une fois, après avoir capturé la zone sélectionnée, votre capture s’affiche dans le logiciel.

5 – Après avoir fait votre capture d’écran vous pouvez écrire ou dessiner dessus en sélectionnant les boutons Stylet et Surligneur ou le bouton Gomme pour effacer.

6 – Pour finir, vous pouvez enregistrer la capture sur votre ordinateur et en faire ce que vous voulez !

Méthode 2 :

La deuxième méthode est de faire une capture d’écran avec avec la touche Imp. écran.
Cette méthode est la plus basique, elle permet de prendre une capture d’écran et de la placer dans le Presse-papier.

1 – Si vous désirez faire une capture d’écran de la totalité de l’écran vous devez appuyer sur la touche Impr. écran.

Si vous désirez faire une capture d’écran uniquement de la fenêtre active, il vous suffit d’appuyez simultanément sur les touches Alt + Impr. écran.

2 – La zone capturée est placée dans le Presse-papier.
Ouvrez ensuite votre logiciel d’édition graphique puis collez votre capture d’écran avec Ctrl + V .Et votre capture d’écran va apparaître dans votre application

3 – Pour finir, il suffira juste d’enregistrer votre capture d’écran en tant que fichier image dans le format de votre choix.

Méthode 3 :

La troisième méthode est de réaliser une capture d’écran avec l’application Capture d’écran et croquis de Windows.

1 – Comme dans la méthode précédente vous devez démarrez l’application Capture d’écran et croquis de Windows en entrant le terme « croquis » dans le menu démarrer puis sélectionnez l’application Capture d’écran et croquis.

2 – Après avoir lancer l’application cliquez sur le bouton Nouveau pour faire une capture d’écran maintenant ou sélectionnez Rogner retardé de 3 ou 10 secondes dans la liste déroulante pour lancer la capture après un délai de 3 ou 10 secondes.

3 – Ensuite en haut de l’écran, il y aura comme dans la méthode précédente différentes façons de capture d’écran, prenez celle qui vous convient cliquez sur le bouton correspondant :

Capture rectangulaire : permet de sélectionner précisément une zone de l’écran.
Capture de forme libre : permet de sélectionner « à la volée » avec la souris la zone à capturer.
Capture de fenêtre : permet de capturer la fenêtre d’un logiciel affichée à l’écran.
Capture plein écran : permet de capturer tout l’écran.

4 – Après avoir définit la zone sélectionnée, votre capture s’affiche dans l’application.

5 – Ensuite, vous pouvez écrire ou dessiner sur votre capture d’écran avec le crayon ou le surligneur et vous pouvez également choisir la couleur et l’épaisseur du crayon.

6 – Pour finir, vous pouvez enregistrer votre capture d’écran avec Ctrl + S.

Voilà, maintenant vous connaissez trois méthodes pour faire une capture d’écran sur Windows. J’espère que ce tutoriel vous aura aidé et si vous n’y arrivez toujours pas, je comprends pas 😂. Non je plaisante pensez à bien relire toute les étapes !